/* MASKERADE.ME — shared design system
   ──────────────────────────────────────────────────────────────────
   Single CSS file used across the landing page and all tool pages.
   Theme: minimal, mono-typed, dashboard. Light + dark via [data-theme].
   Zero external resources. Works offline. No font loads.            */

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ───────────────────────────────────────────────── */
:root {
    /* Surfaces — black & paper, swap on theme */
    --bg:        #0a0a0a;
    --bg-2:      #111111;
    --bg-3:      #1a1a1a;
    --line:      #262626;
    --line-2:    #333333;

    /* Type */
    --fg:        #e8e8e8;
    --fg-2:      #a8a8a8;
    --fg-3:      #6a6a6a;

    /* Accent — single hue, used sparingly */
    --acc:       #a855f7;   /* violet */
    --acc-soft:  rgba(168,85,247,.12);
    --acc-line:  rgba(168,85,247,.35);

    /* Brand colour — used only for the maskerade.me wordmark */
    --brand:     #67e8a3;

    /* Status */
    --warn:      #f7b955;
    --err:       #ff6b8a;
    --ok:        #67e8a3;

    /* Type */
    --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;

    /* Shape */
    --r: 4px;
    --r-2: 6px;
    --max: 1080px;
    --gut: clamp(1rem, 3vw, 2rem);

    /* Motion */
    --t: 140ms ease;
}

[data-theme="light"] {
    --bg:        #f7f7f5;
    --bg-2:      #ffffff;
    --bg-3:      #efefec;
    --line:      #d8d8d4;
    --line-2:    #c4c4c0;
    --fg:        #15151a;
    --fg-2:      #4a4a52;
    --fg-3:      #8a8a90;
    --acc:       #7c3aed;
    --acc-soft:  rgba(124,58,237,.10);
    --acc-line:  rgba(124,58,237,.35);
    --brand:     #1d8c5c;
    --warn:      #b87012;
    --err:       #c2304e;
    --ok:        #1d8c5c;
}

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--acc); color: var(--bg); }

/* ── Header ───────────────────────────────────────────────── */
.hd {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 50;
}
.hd-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gut);
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand {
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--fg);
    font-size: 13px;
}
.brand .sl { color: var(--fg-3); margin: 0 .35em; }
.brand .ac { color: var(--brand); }

.hd-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.hd-nav a {
    color: var(--fg-2);
    font-size: 12px;
    letter-spacing: .04em;
}
.hd-nav a:hover { color: var(--fg); text-decoration: none; }

.theme-toggle {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--fg-2);
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--t), border-color var(--t), background var(--t);
}
.theme-toggle:hover { color: var(--fg); border-color: var(--line-2); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
[data-theme="light"] .theme-toggle .sun { display: block; }
[data-theme="light"] .theme-toggle .moon { display: none; }

/* ── Language toggle (mirrors theme toggle) ─────────────────── */
.lang-toggle {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--fg-2);
    height: 32px;
    min-width: 32px;
    padding: 0 6px;
    border-radius: var(--r);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    transition: color var(--t), border-color var(--t), background var(--t);
}
.lang-toggle:hover { color: var(--fg); border-color: var(--line-2); }
.lang-toggle .lang-en { display: inline; }
.lang-toggle .lang-es { display: none; }
[data-lang="es"] .lang-toggle .lang-en { display: none; }
[data-lang="es"] .lang-toggle .lang-es { display: inline; }

/* ── Layout ───────────────────────────────────────────────── */
main {
    max-width: var(--max);
    margin: 0 auto;
    padding: 2rem var(--gut) 4rem;
}

/* ── Landing — dashboard ─────────────────────────────────── */
.intro {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--line);
}
.intro .label {
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--fg-3);
    text-transform: uppercase;
    margin-bottom: .35rem;
}
.intro h1 {
    font-family: var(--mono);
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--fg);
    margin-bottom: .5rem;
}
.intro p {
    color: var(--fg-2);
    font-size: 13px;
    max-width: 60ch;
    line-height: 1.7;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
}
.tile {
    background: var(--bg);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-decoration: none;
    color: var(--fg);
    transition: background var(--t), color var(--t);
    min-height: 130px;
    position: relative;
}
.tile:hover {
    background: var(--bg-2);
    text-decoration: none;
}
.tile:hover .tag { color: var(--acc); }
.tile:hover .arr { color: var(--acc); transform: translateX(2px); }
.tile .tag {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--fg-3);
    transition: color var(--t);
}
.tile h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    letter-spacing: -.005em;
    margin-top: .15rem;
}
.tile p {
    font-size: 12px;
    color: var(--fg-2);
    line-height: 1.55;
    margin-top: .15rem;
    flex: 1;
}
.tile .arr {
    position: absolute;
    bottom: 1rem;
    right: 1.25rem;
    font-size: 12px;
    color: var(--fg-3);
    transition: color var(--t), transform var(--t);
}

/* ── Tool page shell ──────────────────────────────────────── */
.tool-hd {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.tool-hd .tag {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--fg-3);
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.tool-hd h1 {
    font-family: var(--mono);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--fg);
    letter-spacing: -.01em;
}
.tool-hd p {
    color: var(--fg-2);
    font-size: 13px;
    max-width: 60ch;
    margin-top: .35rem;
}
.tool-hd .back {
    font-size: 12px;
    color: var(--fg-3);
}

/* ── Panels ───────────────────────────────────────────────── */
.panel {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.panel-label {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--fg-3);
    text-transform: uppercase;
    margin-bottom: .85rem;
}

/* ── Form elements ────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .3rem; }
.field-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.input,
.textarea,
.select {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 8px 10px;
    width: 100%;
    transition: border-color var(--t), background var(--t);
}
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--acc);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236a6a6a' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .05em;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color var(--t), background var(--t), color var(--t);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.btn:hover { border-color: var(--line-2); background: var(--bg-3); }
.btn-primary {
    background: var(--acc-soft);
    color: var(--acc);
    border-color: var(--acc-line);
    font-weight: 500;
}
.btn-primary:hover { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Button row */
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Pills / badges ───────────────────────────────────────── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid var(--line);
    color: var(--fg-2);
}
.pill.ok   { color: var(--ok);   border-color: var(--acc-line); background: var(--acc-soft); }
.pill.warn { color: var(--warn); border-color: rgba(247,185,85,.35); background: rgba(247,185,85,.08); }
.pill.err  { color: var(--err);  border-color: rgba(255,107,138,.35); background: rgba(255,107,138,.08); }

/* ── Output blocks ────────────────────────────────────────── */
.output {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .85rem 1rem;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg);
    word-break: break-all;
    line-height: 1.7;
}
.output.large { font-size: 1.1rem; padding: 1rem 1.1rem; }
.output.huge  { font-size: 1.6rem; padding: 1.2rem 1.25rem; letter-spacing: .04em; text-align: center; }

.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--fg-3); font-size: 12px; }
.kv .v { color: var(--fg); font-size: 12px; text-align: right; word-break: break-all; }

/* ── Drop zone ────────────────────────────────────────────── */
.drop {
    border: 1px dashed var(--line-2);
    border-radius: var(--r-2);
    padding: 2rem 1rem;
    text-align: center;
    color: var(--fg-3);
    font-size: 12px;
    cursor: pointer;
    transition: border-color var(--t), background var(--t), color var(--t);
}
.drop:hover, .drop.hover { border-color: var(--acc); color: var(--fg-2); background: var(--acc-soft); }

/* ── Footer ───────────────────────────────────────────────── */
.ft {
    border-top: 1px solid var(--line);
    margin-top: 4rem;
    padding: 1.5rem var(--gut);
    color: var(--fg-3);
    font-size: 11px;
    letter-spacing: .04em;
}
.ft-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hd-nav a { display: none; }
    .grid { grid-template-columns: 1fr 1fr; }
    .tile { min-height: 110px; padding: .9rem 1rem; }
    .output.huge { font-size: 1.2rem; }
}
@media (max-width: 380px) {
    .grid { grid-template-columns: 1fr; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
    .hd, .ft, .theme-toggle, .btn { display: none !important; }
    body { background: white !important; color: black !important; }
}

/* ──────────────────────────────────────────────────────────
   TOOL COMPONENTS — shared across all 7 tool pages.
   Theme uses the same tokens; nothing is hard-coded.
   ────────────────────────────────────────────────────────── */

/* ── Pills (mode/segmented selectors) ────────────────────── */
.pill-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 3px;
}
.pill-group.wrap { flex-wrap: wrap; }
.pill {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-2);
    background: transparent;
    border: none;
    border-radius: 3px;
    padding: 5px 11px;
    cursor: pointer;
    letter-spacing: .04em;
    transition: color var(--t), background var(--t);
    line-height: 1.4;
    flex: 1 1 auto;
    text-align: center;
    min-height: 26px;
    text-transform: none;     /* override the badge .pill rule above */
}
.pill:hover { color: var(--fg); }
.pill.active {
    color: var(--acc);
    background: var(--acc-soft);
    font-weight: 500;
}

/* ── Radio + checkbox (custom, themed) ───────────────────── */
.radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
}
.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    font-size: 12px;
    color: var(--fg-2);
    transition: border-color var(--t), color var(--t);
}
.radio-option:hover { border-color: var(--line-2); color: var(--fg); }
.radio-option input[type="radio"] { display: none; }
.radio-option:has(input:checked) {
    border-color: var(--acc);
    color: var(--fg);
    background: var(--acc-soft);
}
.radio-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: var(--sw, #888);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(255,255,255,.7);
}
.radio-swatch.blur-icon { background: var(--bg-3); color: var(--fg-2); font-weight: bold; }
.radio-text { flex: 1; }

.cb-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.cb-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fg-2);
    cursor: pointer;
}
.cb-label input[type="checkbox"] {
    accent-color: var(--acc);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* ── Slider (range input) ────────────────────────────────── */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--bg-3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--acc);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg);
}
.slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--acc);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg);
}
.slider-val {
    color: var(--acc);
    font-size: 11px;
    margin-left: .5rem;
}
.slider-hints {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--fg-3);
    margin-top: 2px;
}

/* ── Drop zone (file drag & drop) ────────────────────────── */
.drop-zone {
    border: 1px dashed var(--line-2);
    border-radius: var(--r-2);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t), background var(--t), color var(--t);
}
.drop-zone:hover, .drop-zone.highlight {
    border-color: var(--acc);
    background: var(--acc-soft);
}
.drop-zone .drop-main {
    font-size: 13px;
    color: var(--fg);
    margin: .5rem 0 .25rem;
}
.drop-zone .drop-sub {
    font-size: 11px;
    color: var(--fg-3);
    margin-bottom: .75rem;
}
.drop-zone .drop-icon { color: var(--fg-3); margin-bottom: .25rem; }

/* ── Mode tabs (calculator) ──────────────────────────────── */
.mode-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 3px;
}
.mode-tab {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-2);
    background: transparent;
    border: none;
    border-radius: 3px;
    padding: 5px 12px;
    cursor: pointer;
    letter-spacing: .04em;
    transition: color var(--t), background var(--t);
}
.mode-tab:hover { color: var(--fg); }
.mode-tab.active {
    color: var(--acc);
    background: var(--acc-soft);
    font-weight: 500;
}

/* ── Calculator panel ────────────────────────────────────── */
.calc-panel {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
}
.calc-display {
    background: var(--bg);
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--line);
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .2rem;
    position: relative;
}
.calc-hint {
    position: absolute;
    top: .5rem;
    left: .75rem;
    font-size: 10px;
    color: var(--fg-3);
    letter-spacing: .1em;
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
}
/* Calculator toolbar (DEG/RAD etc.) — sits between display and buttons */
.calc-toolbar {
    display: flex;
    gap: .4rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.calc-toolbar-btn {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--fg-2);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 4px 10px;
    cursor: pointer;
    letter-spacing: .08em;
    transition: color var(--t), border-color var(--t);
}
.calc-toolbar-btn:hover { color: var(--acc); border-color: var(--acc-line); }
.calc-expression {
    font-size: 12px;
    color: var(--fg-3);
    text-align: right;
    min-height: 1.4em;
    word-break: break-all;
    letter-spacing: .04em;
}
.calc-result {
    font-size: 1.8rem;
    color: var(--fg);
    text-align: right;
    letter-spacing: .02em;
    word-break: break-all;
    line-height: 1.2;
}
.calc-result.large { font-size: 2.2rem; }
.calc-result.small { font-size: 1.3rem; }
.calc-btns {
    display: grid;
    padding: .75rem;
    gap: .4rem;
    grid-template-columns: repeat(4, 1fr);
}
.calc-btns.scientific { grid-template-columns: repeat(6, 1fr); }
.calc-btns.hex { grid-template-columns: repeat(5, 1fr); }
.calc-btns.binary { grid-template-columns: repeat(5, 1fr); }
.cb {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--bg-3);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0;
    height: 48px;
    cursor: pointer;
    transition: background var(--t);
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb:active, .cb.pressed { transform: scale(.95); background: var(--line); }
.cb.op  { color: var(--acc); background: var(--acc-soft); }
.cb.fn  { font-size: 11px; color: var(--fg-2); background: var(--bg-2); letter-spacing: .04em; }
.cb.eq  { background: var(--acc); color: var(--bg); font-weight: 600; }
.cb.eq:hover { filter: brightness(1.08); }
.cb.clear { color: var(--err); }
.cb.zero { grid-column: span 2; }
.cb.wide { font-size: 11px; }

/* ── History ─────────────────────────────────────────────── */
.history {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: .85rem 1rem;
    max-height: 200px;
    overflow-y: auto;
}
.history-entry {
    font-size: 11px;
    color: var(--fg-2);
    padding: .35rem 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    cursor: pointer;
    transition: color var(--t);
}
.history-entry:hover { color: var(--fg); }
.history-entry:last-child { border-bottom: none; }
.history-expr { color: var(--fg-3); }
.history-val { color: var(--acc); }
.history-meta { flex-basis: 100%; font-size: 10px; color: var(--fg-3); margin-top: 1px; letter-spacing: .03em; }
.history-empty { font-size: 11px; color: var(--fg-3); text-align: center; padding: .75rem 0; }

/* ── Stat / strength meter ───────────────────────────────── */
.meter {
    height: 8px;
    background: var(--bg-3);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--line);
}
.meter-fill {
    height: 100%;
    background: var(--acc);
    transition: width .3s ease, background-color .3s ease;
    border-radius: 3px;
}
.meter-fill.weak    { background: var(--err); }
.meter-fill.fair    { background: var(--warn); }
.meter-fill.good    { background: var(--acc); }

/* ── Hash table ──────────────────────────────────────────── */
.hash-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12px;
    flex-wrap: wrap;
}
.hash-row:last-child { border-bottom: none; }
.hash-algo {
    color: var(--fg-2);
    flex-shrink: 0;
    width: 64px;
    font-size: 11px;
    letter-spacing: .04em;
}
.hash-algo.computing { color: var(--fg-3); font-style: italic; }
.hash-value {
    color: var(--fg);
    word-break: break-all;
    flex: 1;
    min-width: 0;
    font-size: 11px;
}
.hash-value.computing { color: var(--fg-3); font-style: italic; }
.hash-copy {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--fg-3);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 3px 7px;
    cursor: pointer;
    transition: color var(--t), border-color var(--t);
    flex-shrink: 0;
}
.hash-copy:hover { color: var(--acc); border-color: var(--acc); }
.hash-copy.copied { color: var(--acc); border-color: var(--acc); }

/* ── Progress bar ────────────────────────────────────────── */
.progress {
    height: 4px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
    margin: .5rem 0;
}
.progress-fill {
    height: 100%;
    background: var(--acc);
    width: 0%;
    transition: width .15s linear;
}
.progress-label {
    font-size: 10px;
    color: var(--fg-3);
    letter-spacing: .04em;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .calc-btns.scientific { grid-template-columns: repeat(4, 1fr); }
    .cb { height: 42px; font-size: 12px; }
    .cb.fn { font-size: 10px; }
    .calc-result { font-size: 1.5rem; }
    .calc-result.large { font-size: 1.7rem; }
}

/* ── Tool-specific small additions ───────────────────────── */
.verify-result.match    { color: var(--ok); }
.verify-result.nomatch  { color: var(--err); }

/* ── pwstrength result rows ──────────────────────────────── */
.result-block { display: flex; flex-direction: column; }
.result-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12px;
}
.result-row:last-child { border-bottom: none; }
.result-key { color: var(--fg-3); }
.result-val { color: var(--fg); text-align: right; word-break: break-word; }

/* ── totp ───────────────────────────────────────────────── */
#copy-confirm.show { opacity: 1; }
#ring-fill.urgent  { stroke: var(--err); }
#progress-bar.urgent { background: var(--err); }
#current-digits.refreshing { opacity: .3; transition: opacity .14s; }

/* ── passgen output items ────────────────────────────────── */
.output-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: .4rem;
}
.output-item .out-text {
    flex: 1;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg);
    word-break: break-all;
}
.copy-item-btn {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--fg-3);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 3px 7px;
    cursor: pointer;
    transition: color var(--t), border-color var(--t);
    flex-shrink: 0;
}
.copy-item-btn:hover { color: var(--acc); border-color: var(--acc); }
.copy-item-btn.copied { color: var(--acc); border-color: var(--acc); }

#entropy-badge.strong { color: var(--acc); border-color: var(--acc-line); background: var(--acc-soft); }

/* ── filemetadata sections ───────────────────────────────── */
.meta-section { margin-bottom: 1rem; }
.meta-section-title {
    font-size: 11px;
    color: var(--acc);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .35rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--line);
}
.meta-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12px;
}
.meta-row:last-child { border-bottom: none; }
.meta-key { color: var(--fg-3); flex-shrink: 0; }
.meta-val { color: var(--fg); text-align: right; word-break: break-word; }

/* ── Passgen blur-by-default ─────────────────────────────── */
.output-item.blurred .out-text {
    filter: blur(6px);
    transition: filter .15s;
    user-select: none;
}
.output-item .out-text {
    cursor: pointer;
    transition: filter .15s;
}
.output-item.blurred .out-text::after {
    content: '  (click to reveal)';
    color: var(--fg-3);
    font-size: 10px;
    margin-left: .25em;
    filter: blur(0);
    display: inline-block;
}
.output-item.blurred .out-text:hover {
    filter: blur(2px);
}
/* History blur (for revealed/hidden state) */
.history-text {
    filter: blur(5px);
    transition: filter .15s;
}
.history-text.revealed { filter: blur(0); }

/* ── RDCT redact button drawing state ─────────────────────── */
.btn.drawing {
    color: var(--acc);
    border-color: var(--acc);
    background: var(--acc-soft);
}
.btn.drawing:hover {
    color: var(--err);
    border-color: var(--err);
    background: rgba(255,107,138,.08);
}