.color-reference .epr-hero{padding-bottom:38px}
.color-breadcrumb{margin-top:15px!important;font-size:.84rem!important}
.color-breadcrumb a{color:var(--epr-blue);font-weight:800;text-decoration:none}
.color-breadcrumb span{padding:0 7px;color:#91a1b1}
.color-browser{padding-top:30px;padding-bottom:70px}
.color-toolbar{position:sticky;top:72px;z-index:10;display:grid;grid-template-columns:1fr minmax(270px,390px);gap:22px;align-items:end;padding:18px 20px;border:1px solid var(--epr-line);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:var(--epr-shadow);backdrop-filter:blur(12px)}
.color-tabs{display:flex;flex-wrap:wrap;gap:9px}
.color-tab{display:flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--epr-line);border-radius:12px;background:#f8fbfd;color:var(--epr-ink);font-weight:800;cursor:pointer}
.color-tab span{min-width:25px;padding:2px 7px;border-radius:999px;background:#e8f1f5;color:#587084;font-size:.72rem}
.color-tab.is-active{border-color:var(--epr-accent);background:linear-gradient(135deg,#087f8c,#0b6aa2);color:#fff}
.color-tab.is-active span{background:rgba(255,255,255,.18);color:#fff}
.color-search span{display:block;margin-bottom:7px;color:var(--epr-muted);font-size:.73rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.color-search input{width:100%;min-height:43px;padding:10px 13px;border:1px solid var(--epr-line);border-radius:12px;background:var(--epr-soft);color:var(--epr-ink);outline:none}
.color-search input:focus{border-color:#5bb6c0;box-shadow:0 0 0 3px rgba(8,127,140,.1)}
.color-summary{display:flex;gap:6px;margin:24px 2px 13px;color:var(--epr-muted);font-size:.9rem}
.color-summary strong{color:var(--epr-ink)}
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:15px}
.color-card{overflow:hidden;border:1px solid var(--epr-line);border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(15,35,58,.06);transition:transform .16s ease,box-shadow .16s ease}
.color-card:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(15,35,58,.11)}
.color-swatch{height:118px;background:var(--swatch);border-bottom:1px solid rgba(15,35,58,.1)}
.color-card-body{padding:14px 15px 15px}
.color-card-heading{display:flex;align-items:start;justify-content:space-between;gap:10px}
.color-card h2{margin:0;font-size:1rem;line-height:1.35}
.color-card-heading span{padding:3px 6px;border-radius:6px;background:#edf5f7;color:var(--epr-accent);font-size:.65rem;font-weight:900}
.color-card p{min-height:2.6em;margin:7px 0 12px;color:#53667b;font-size:.83rem;line-height:1.35}
.color-card p:first-letter{text-transform:uppercase}
.color-hex{padding:4px 8px;border:0;border-radius:7px;background:#f0f4f7;color:#536475;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;cursor:pointer}
.color-hex:hover{background:#dff2f3;color:#086f7a}
.color-empty{padding:45px;border:1px dashed #b9cbd6;border-radius:18px;background:#fff;color:var(--epr-muted);text-align:center}
.color-note{margin-top:28px;padding:20px 22px;border:1px solid #ead597;border-radius:16px;background:#fff9e8;color:#705313}
.color-note p{margin:7px 0 0;line-height:1.65}
@media(max-width:760px){.color-toolbar{position:relative;top:auto;grid-template-columns:1fr}.color-browser{padding-top:20px}.color-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.color-swatch{height:90px}.color-card-body{padding:12px}.color-card p{font-size:.78rem}}
@media(max-width:420px){.color-grid{grid-template-columns:1fr 1fr}.color-card-heading{display:block}.color-card-heading span{display:inline-block;margin-top:5px}}