:root{--checker-a:rgba(148,163,184,.13);--checker-b:transparent;--glow:0 0 0 6px rgba(37,99,235,.12)}
html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"]{--checker-a:rgba(148,163,184,.08);--checker-b:transparent;--glow:0 0 0 6px rgba(59,130,246,.18)}
.tool-app *{box-sizing:border-box}
.tool-app button,.tool-app input,.tool-app select,.tool-app textarea{font:inherit}
.tool-app button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
.layout-slot{display:block}
.section{max-width:1280px;margin:0 auto 16px;padding:0 16px}
.card{border:1px solid var(--border);background:var(--surface);border-radius:26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.hero{padding-top:24px}
.hero-card{padding:26px;position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;background:radial-gradient(circle, rgba(37,99,235,.18), transparent 65%);filter:blur(10px);pointer-events:none}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);font-size:.82rem;font-weight:800}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero h1{margin:0 0 10px;font-size:clamp(2rem,3vw,3.2rem);line-height:1.04;letter-spacing:-.03em;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{margin:0;max-width:980px;color:var(--muted);line-height:1.8}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.section-head h3{margin:0 0 6px;color:var(--text);font-size:1.08rem}
.section-head p{margin:0;color:var(--muted);line-height:1.7}
.inline-status{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);font-size:.78rem;font-weight:800;white-space:nowrap}
.inline-status.success{background:var(--success-soft)}
.inline-status.warning{background:var(--warning-soft)}
.inline-status.danger{background:var(--danger-soft)}
.btn-primary,.btn-outline,.btn-ghost,.mini-btn,.copy-btn,.swatch-btn{min-height:46px;border-radius:15px;padding:0 16px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;font-weight:800;line-height:1;cursor:pointer;user-select:none;transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;text-decoration:none}
.btn-primary{color:var(--btn-primary-text);background:var(--accent-grad);border-color:rgba(255,255,255,.08);box-shadow:0 12px 26px rgba(37,99,235,.22)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(37,99,235,.28)}
.btn-outline,.copy-btn{color:var(--btn-outline-text);background:var(--btn-outline-bg);border-color:var(--btn-outline-border)}
.btn-outline:hover,.copy-btn:hover{transform:translateY(-1px);background:rgba(37,99,235,.14)}
.btn-ghost,.mini-btn,.swatch-btn{color:var(--btn-ghost-text);background:var(--btn-ghost-bg);border-color:var(--btn-ghost-border)}
.btn-ghost:hover,.mini-btn:hover,.swatch-btn:hover{transform:translateY(-1px);background:var(--surface-soft)}
.btn-primary:disabled,.btn-outline:disabled,.btn-ghost:disabled,.copy-btn:disabled{opacity:.55;cursor:not-allowed;transform:none !important;box-shadow:none !important}
.preset-strip{padding:18px}
.preset-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.swatch-btn{min-height:74px;border-radius:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-soft)}
.swatch-btn span{position:absolute;inset:auto 8px 8px 8px;padding:6px 8px;border-radius:10px;background:rgba(15,23,42,.42);color:#fff;font-size:.74rem;font-weight:800;backdrop-filter:blur(8px)}
.main-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:start}
.left-stack,.right-stack{display:grid;gap:16px;align-self:start}
.preview-card,.controls-card,.formats-card,.details-card,.palette-card{padding:18px}
.preview-shell{border:1px solid var(--border);border-radius:24px;background:var(--preview-bg);overflow:hidden}
.preview-stage{position:relative;min-height:410px;background-image:linear-gradient(45deg, var(--checker-a) 25%, var(--checker-b) 25%),
        linear-gradient(-45deg, var(--checker-a) 25%, var(--checker-b) 25%),
        linear-gradient(45deg, var(--checker-b) 75%, var(--checker-a) 75%),
        linear-gradient(-45deg, var(--checker-b) 75%, var(--checker-a) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:hidden}
.preview-fill{position:absolute;inset:0;transition:background .15s ease}
.preview-overlay{position:absolute;inset:0;background:radial-gradient(circle at 25% 20%, rgba(255,255,255,.34), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,.14), transparent 24%, transparent 76%, rgba(0,0,0,.08));pointer-events:none}
.preview-center{position:absolute;inset:0;display:grid;place-items:center;padding:20px;z-index:2;pointer-events:none}
.preview-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(15,23,42,.36);color:#fff;font-weight:800;backdrop-filter:blur(10px);box-shadow:0 12px 24px rgba(0,0,0,.16);max-width:100%}
.preview-toolbar{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border-top:1px solid var(--border);background:var(--surface-soft)}
.preview-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border-top:1px solid var(--border);background:var(--surface-soft)}
.mini-stat{padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-strong)}
.mini-stat small{display:block;color:var(--muted);margin-bottom:4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.mini-stat strong{display:block;word-break:break-word;font-size:.96rem}
.controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.82rem;font-weight:800;color:var(--text)}
.field input[type="text"],.field input[type="number"],.field select,.field textarea{width:100%;min-height:46px;border-radius:15px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);padding:11px 13px;outline:none;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent1);box-shadow:var(--glow)}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:46px;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 19px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.range-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.tool-app input[type="range"]{width:100%;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg, rgba(37,99,235,.22), rgba(124,58,237,.22));outline:none;border:none}
.tool-app input[type="range"]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #0b6e75;box-shadow:0 8px 16px rgba(37,99,235,.24);cursor:pointer}
.tool-app input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #0b6e75;box-shadow:0 8px 16px rgba(37,99,235,.24);cursor:pointer}
.value-pill{min-width:78px;text-align:center;padding:10px 12px;border-radius:12px;background:var(--surface-strong);border:1px solid var(--border);color:var(--text);font-weight:800;font-size:.86rem}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.format-list{display:grid;gap:12px}
.format-row{border:1px solid var(--border);border-radius:20px;background:var(--surface-soft);padding:14px;box-shadow:var(--shadow-soft)}
.format-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.format-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);font-size:.74rem;font-weight:800;color:var(--muted)}
.format-value{width:100%;min-height:52px;border-radius:15px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);padding:12px 14px;font:700 .96rem/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;word-break:break-word;overflow-wrap:anywhere}
.format-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.detail-card{padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft);box-shadow:var(--shadow-soft)}
.detail-card small{display:block;color:var(--muted);margin-bottom:6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.detail-card strong{display:block;font-size:1rem;line-height:1.5;word-break:break-word}
.contrast-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.contrast-card{padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft)}
.contrast-preview{min-height:84px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:1.1rem;margin-top:10px;box-shadow:var(--shadow-soft)}
.palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.palette-item{border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--surface-soft);box-shadow:var(--shadow-soft)}
.palette-color{height:86px}
.palette-meta{padding:10px;display:grid;gap:8px}
.palette-hex{font:800 .82rem/1.4 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;word-break:break-word}
.notice{margin-top:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:var(--surface-soft);color:var(--muted);line-height:1.7;font-size:.92rem}
.hidden-inputs{display:none}
@media (max-width:1180px){
.preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.main-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
.controls-grid,.details-grid,.contrast-grid{grid-template-columns:1fr}
.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.preview-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
.hero-actions,.quick-actions,.preview-toolbar,.format-actions{display:grid;grid-template-columns:1fr}
.hero-actions > *,.quick-actions > *,.preview-toolbar > *,.format-actions > *{width:100%}
.preview-stage{min-height:320px}
.preview-bar{grid-template-columns:1fr}
.preset-grid,.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* page overrides */
/* RGB to HEX: flat "Soft & clear" layout */
.tool-app .cc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.tool-app .cc-status{font:500 14px var(--zl-font-head);color:var(--zl-muted);min-height:1.4em}
.tool-app .cc-status.success{color:var(--zl-accent-strong)}
.tool-app .cc-status.danger{color:#b42318}
.tool-app .cc-status.warning{color:var(--zl-note-ink,#8a5a00)}
html[data-theme="dark"] .tool-app .cc-status.danger{color:#ff8a80}
.tool-app .card{border-radius:18px;padding:18px;margin:0 0 16px}
.tool-app .main-grid .card{margin:0}
.tool-app .main-grid{margin:0 0 16px;gap:16px}
.tool-app .card>.zl-ui-title{margin:0 0 12px}
.tool-app .cc-note{margin:-6px 0 12px;color:var(--zl-muted);font-size:14px}
.tool-app .details-card .cc-note{margin:12px 0 0}
.tool-app .preset-strip{padding:16px 18px}
.tool-app .preset-grid{grid-template-columns:repeat(16,minmax(0,1fr));gap:8px}
.tool-app .swatch-btn{min-height:52px;border-radius:12px;border:1px solid var(--zl-line);box-shadow:none;padding:0;transition:none}
.tool-app .swatch-btn:hover{transform:none;border-color:var(--zl-ink)}
.tool-app .swatch-btn span{inset:auto 0 0 0;border-radius:0 0 11px 11px;padding:2px 4px;background:rgba(0,0,0,.45);font:500 11px var(--zl-font-head);backdrop-filter:none;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-app .preview-shell{border-radius:16px;border-color:var(--zl-line);background:var(--zl-surface)}
.tool-app .preview-stage{min-height:200px}
.tool-app .preview-chip{background:rgba(0,0,0,.55);backdrop-filter:none;box-shadow:none;border:0;font:600 15px var(--zl-font-mono);padding:8px 14px}
.tool-app .preview-bar,.tool-app .preview-toolbar{background:var(--zl-surface-2);border-color:var(--zl-line)}
.tool-app .mini-stat,.tool-app .detail-card,.tool-app .contrast-card,.tool-app .format-row,.tool-app .palette-item{border-radius:12px;border:1px solid var(--zl-line);background:var(--zl-surface);box-shadow:none}
.tool-app .mini-stat small,.tool-app .detail-card small{font-family:var(--zl-font-head);letter-spacing:.04em}
.tool-app .mini-stat strong{font-family:var(--zl-font-mono);font-size:14px;font-weight:600}
.tool-app .field label{font:500 14px var(--zl-font-head);color:var(--zl-ink)}
.tool-app .field textarea{min-height:64px;font-size:15px}
.tool-app .field input.is-invalid,.tool-app .field textarea.is-invalid{border-color:#b42318}
.tool-app input[type="range"]{background:var(--zl-line-2);height:6px}
.tool-app input[type="range"]::-webkit-slider-thumb{border-color:var(--zl-accent);box-shadow:none;width:22px;height:22px}
.tool-app input[type="range"]::-moz-range-thumb{border-color:var(--zl-accent);box-shadow:none}
.tool-app .value-pill{min-width:64px;padding:8px 10px;border-radius:10px;background:var(--zl-surface-2);border-color:var(--zl-line);font:500 14px var(--zl-font-mono)}
.tool-app .controls-grid[data-mode="rgb"] #hueRange,.tool-app .controls-grid[data-mode="rgb"] #satRange,.tool-app .controls-grid[data-mode="rgb"] #lightRange,
.tool-app .controls-grid[data-mode="hsl"] #redRange,.tool-app .controls-grid[data-mode="hsl"] #greenRange,.tool-app .controls-grid[data-mode="hsl"] #blueRange{opacity:.6}
.tool-app .quick-actions{border-color:var(--zl-line)}
.tool-app .format-list{gap:8px}
.tool-app .format-row{padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px}
.tool-app .format-top{display:contents}
.tool-app .format-title{grid-column:1;grid-row:1;gap:8px}
.tool-app .format-title strong{font:600 14px var(--zl-font-head)}
.tool-app .format-hint{color:var(--zl-muted);font-size:13px}
.tool-app .format-row .copy-btn{grid-column:2;grid-row:1/span 2;min-height:44px}
.tool-app .format-value{grid-column:1;grid-row:2;display:block;min-height:0;padding:0;border:0;background:none;font:500 15px/1.5 var(--zl-font-mono);color:var(--zl-ink)}
.tool-app .notice{border-radius:12px;border-color:var(--zl-line);background:var(--zl-surface-2);font-size:14px}
.tool-app .notice.is-pass{background:var(--zl-tint);color:var(--zl-ink)}
.tool-app .notice.is-partial{background:var(--zl-note,#fff4d6);color:var(--zl-note-ink,#5c4300)}
.tool-app .notice.is-fail{background:#fde8e6;color:#8c1d13}
html[data-theme="dark"] .tool-app .notice.is-fail{background:#3a1d1a;color:#ffb4ab}
.tool-app .contrast-preview{box-shadow:none;border:1px solid var(--zl-line);font:600 28px var(--zl-font-head);min-height:72px}
.tool-app .palette-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.tool-app .palette-item{display:flex;flex-direction:column;padding:0;cursor:pointer;color:var(--zl-ink);text-align:left;overflow:hidden;min-width:0}
.tool-app .palette-item:hover{border-color:var(--zl-accent)}
.tool-app .palette-color{display:block;height:56px;border-bottom:1px solid var(--zl-line)}
.tool-app .palette-meta{display:grid;gap:2px;padding:6px 8px}
.tool-app .palette-hex{font:500 12.5px var(--zl-font-mono)}
.tool-app .palette-label{font-size:12px;color:var(--zl-muted)}
.tool-app .hidden-inputs{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tool-app .hidden-inputs input{width:1px;height:1px}
.tool-app{position:relative}
@media (max-width:1180px){.tool-app .preset-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.tool-app .palette-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.tool-app .main-grid{display:flex;flex-direction:column}.tool-app .left-stack,.tool-app .right-stack{display:contents}
.tool-app .preview-card{order:1}.tool-app .controls-card{order:2}.tool-app .formats-card{order:3}.tool-app .details-card{order:4}}
@media (max-width:680px){
.tool-app .card{padding:14px}
.tool-app .preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.tool-app .preview-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-app .preview-toolbar,.tool-app .quick-actions{display:grid;grid-template-columns:1fr 1fr}
.tool-app .cc-actions{display:grid;grid-template-columns:1fr 1fr}
.tool-app .cc-actions #randomBtn{grid-column:1/-1}
.tool-app .cc-status{grid-column:1/-1}
.tool-app .quick-actions #applyInputBtn{grid-column:1/-1}
.tool-app .palette-grid{gap:6px}
.tool-app .palette-color{height:44px}
.tool-app .palette-meta{padding:4px 4px}
.tool-app .palette-hex{font-size:10.5px}
.tool-app .palette-label{display:none}
}
/* page content: long code samples scroll inside their box instead of widening the page */
.zl-article,.zl-body>*{min-width:0}
.zl-article pre{max-width:100%;overflow-x:auto}
.zl-article pre code{white-space:pre}
.zl-article .zl-table-wrap{max-width:100%;overflow-x:auto}
.zl-article :not(pre)>code{overflow-wrap:anywhere;word-break:break-word}
/* 320px: cards in the stacked flex column may shrink below content min width */
.tool-app .main-grid .card{min-width:0;max-width:100%}
@media (max-width:1180px){.tool-app .main-grid{align-items:stretch}}