:root{
  --ocp-bg:#f8fafc;--ocp-bg-soft:rgba(255,255,255,.72);--ocp-surface:#fff;--ocp-text:#0f172a;--ocp-muted:#64748b;--ocp-border:rgba(99,102,241,.14);--ocp-primary:#6366f1;--ocp-secondary:#06b6d4;--ocp-accent:#f43f5e;--ocp-success:#22c55e;--ocp-shadow:0 20px 50px rgba(15,23,42,.08);--ocp-radius:24px;
}
html[data-theme='dark']{
  --ocp-bg:#020617;--ocp-bg-soft:rgba(15,23,42,.72);--ocp-surface:#0f172a;--ocp-text:#e2e8f0;--ocp-muted:#94a3b8;--ocp-border:rgba(148,163,184,.15);--ocp-primary:#818cf8;--ocp-secondary:#22d3ee;--ocp-accent:#fb7185;--ocp-success:#4ade80;--ocp-shadow:0 20px 50px rgba(2,6,23,.35);
}
html,body{background:radial-gradient(circle at top left,rgba(99,102,241,.10),transparent 35%),radial-gradient(circle at top right,rgba(6,182,212,.12),transparent 35%),var(--ocp-bg);color:var(--ocp-text);scroll-behavior:smooth}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{transition:all .25s ease}
img{max-width:100%;height:auto}
.screen-reader-text{position:absolute;left:-9999px}
.min-vh-75{min-height:75vh}
.card-glass{background:var(--ocp-bg-soft);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--ocp-border);border-radius:var(--ocp-radius);box-shadow:var(--ocp-shadow)}
.site-header .header-top,.site-header .navbar,.site-footer{background:rgba(255,255,255,.5);backdrop-filter:blur(16px)}
html[data-theme='dark'] .site-header .header-top,html[data-theme='dark'] .site-header .navbar,html[data-theme='dark'] .site-footer{background:rgba(2,6,23,.72)}
.site-brand img.custom-logo{width:40px;height:40px;border-radius:12px}
.nav-link{color:var(--ocp-text);font-weight:600}
.nav-link:hover,.footer-links a:hover{color:var(--ocp-primary)!important}
.btn-primary{background:linear-gradient(135deg,var(--ocp-primary),var(--ocp-secondary));border:0;box-shadow:0 12px 28px rgba(99,102,241,.25)}
.btn-outline-primary{border-color:rgba(99,102,241,.25);color:var(--ocp-primary)}
.btn-outline-primary:hover{background:rgba(99,102,241,.08);color:var(--ocp-primary);border-color:var(--ocp-primary)}
.btn-icon{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;padding:0}
.preview-hero .preview-swatch{height:220px;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.mini-stat{background:rgba(255,255,255,.4);border:1px solid var(--ocp-border);border-radius:20px;padding:1rem;display:flex;flex-direction:column;gap:.45rem;height:100%}
html[data-theme='dark'] .mini-stat{background:rgba(15,23,42,.5)}
.mini-stat span{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ocp-muted)}
.mini-stat strong{font-size:1rem;line-height:1.4;color:var(--ocp-text)}
.color-wheel{width:100%!important;height:220px!important;border-radius:20px;border:0;padding:.375rem;cursor:pointer;background:transparent}
.form-control,.form-select,.form-range{border-radius:16px;border-color:var(--ocp-border)}
.form-control,.form-select,textarea{background:rgba(255,255,255,.72)!important;color:var(--ocp-text)!important}
html[data-theme='dark'] .form-control,html[data-theme='dark'] .form-select,html[data-theme='dark'] textarea{background:rgba(15,23,42,.85)!important}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 .25rem rgba(99,102,241,.16);border-color:var(--ocp-primary)}
.live-preview{height:300px;border-radius:28px;background:#6c63ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.multiple-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.preview-box{min-height:86px;border-radius:18px;padding:1rem;font-weight:700;display:grid;place-items:center;background:#fff;color:#0f172a}
.checker-bg{background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.ocppro-values .form-control{font-size:.9rem}
.gradient-preview{min-height:220px;border-radius:24px;background:linear-gradient(135deg,#6c63ff,#00c2ff,#ff6b6b);border:1px solid var(--ocp-border)}
.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem}
.palette-item{border-radius:20px;overflow:hidden;border:1px solid var(--ocp-border);cursor:pointer;transition:transform .25s ease, box-shadow .25s ease}
.palette-item:hover{transform:translateY(-4px);box-shadow:var(--ocp-shadow)}
.palette-swatch{height:120px}
.palette-meta{padding:.85rem;background:rgba(255,255,255,.68)}
html[data-theme='dark'] .palette-meta{background:rgba(15,23,42,.76)}
.chip-row{display:flex;flex-wrap:wrap;gap:.75rem}
.color-chip{width:42px;height:42px;border-radius:999px;border:2px solid rgba(255,255,255,.65);box-shadow:0 8px 20px rgba(15,23,42,.14);cursor:pointer}
.social-link{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1rem;border-radius:999px;background:rgba(99,102,241,.1);border:1px solid var(--ocp-border);color:var(--ocp-text);text-decoration:none;font-size:.9rem}
.footer-links{display:flex;flex-direction:column;gap:.65rem}.footer-links a{text-decoration:none;color:var(--ocp-muted)}
.map-placeholder img{width:100%;border-radius:20px;border:1px solid var(--ocp-border)}
.back-to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:52px;height:52px;border-radius:999px;display:grid;place-items:center;z-index:1000}
.toc-wrapper{padding:1rem 1.25rem;border:1px solid var(--ocp-border);border-radius:20px;background:rgba(255,255,255,.55)}
html[data-theme='dark'] .toc-wrapper{background:rgba(15,23,42,.55)}
.toc-wrapper ul{margin:0;padding-left:1rem}.toc-wrapper li+li{margin-top:.4rem}
.reading-progress{position:sticky;top:0;height:4px;background:linear-gradient(90deg,var(--ocp-primary),var(--ocp-secondary));width:0;border-radius:999px;z-index:3}
.ocppro-breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem}.ocppro-breadcrumb a{text-decoration:none}
.entry-content>:first-child{margin-top:0}.entry-content h2,.entry-content h3,.entry-content h4{scroll-margin-top:100px}
.entry-content table{width:100%;border-collapse:collapse}.entry-content th,.entry-content td{border:1px solid var(--ocp-border);padding:.75rem}
.entry-content blockquote{border-left:4px solid var(--ocp-primary);padding:1rem 1.25rem;background:rgba(99,102,241,.06);border-radius:0 18px 18px 0}
.author-box{background:rgba(255,255,255,.42)}
html[data-theme='dark'] .author-box{background:rgba(15,23,42,.55)}
.widget-title{margin-bottom:.75rem}
.search-form{display:flex;gap:.75rem}.search-field{flex:1;border-radius:999px!important;padding:.9rem 1rem}.search-submit{border-radius:999px!important}
.legal-copy h1{margin-bottom:1rem}.legal-copy p:last-child{margin-bottom:0}
.toast{text-wrap:balance}
.panel{display:block}
.ocppro-tool-app[data-tool-page='picker'] .panel:not(.panel-picker):not(.panel-export):not(.panel-contrast):not(.panel-names){display:none}
.ocppro-tool-app[data-tool-page='converter'] .panel:not(.panel-converter):not(.panel-picker){display:none}
.ocppro-tool-app[data-tool-page='gradient'] .panel:not(.panel-gradient){display:none}
.ocppro-tool-app[data-tool-page='palette'] .panel:not(.panel-palette){display:none}
.ocppro-tool-app[data-tool-page='contrast'] .panel:not(.panel-contrast):not(.panel-picker):not(.panel-export){display:none}
.ocppro-tool-app[data-tool-page='names'] .panel:not(.panel-names):not(.panel-picker):not(.panel-export){display:none}
@media (max-width:991.98px){.min-vh-75{min-height:auto}.header-top .widget{display:none}.preview-hero .preview-swatch{height:180px}.live-preview{height:240px}.multiple-previews{grid-template-columns:1fr 1fr 1fr}}
.entry-singular.content-width-narrow,.entry-page.content-width-narrow{max-width:860px;margin-inline:auto}.entry-singular.content-width-wide,.entry-page.content-width-wide{max-width:none}.layout-has-sidebar .entry-singular,.layout-has-sidebar .entry-page{margin-inline:0}.comment-list li{padding:1rem 0;border-bottom:1px solid var(--ocp-border)}.comment-respond{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--ocp-border)}.ocppro-admin-visibility label{font-size:12px;line-height:1.5}
@media (max-width:767.98px){.palette-grid{grid-template-columns:repeat(2,1fr)}.multiple-previews{grid-template-columns:1fr}.site-footer,.site-header .header-top,.site-header .navbar{background:var(--ocp-bg-soft)}.search-form{flex-direction:column}}