/* BookChop — main stylesheet */

/* ── Fonts: served locally, no CDN ── */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('/vendor/fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('/vendor/fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/vendor/fonts/dm-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/vendor/fonts/dm-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/vendor/fonts/dm-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/vendor/fonts/dm-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Theme tokens ── */
:root {
    --bg:      #f7f5f2;
    --surface: #eeeae3;
    --border:  #d6d0c8;
    --accent:  #1a8c5e;
    --accent2: #1479a0;
    --amber:   #a86820;
    --text:    #1a1816;
    --muted:   #8a8278;
    --danger:  #b02840;
    --radius:  12px;
}

html[data-theme="dark"] {
    --bg:      #0d0f12;
    --surface: #151820;
    --border:  #252a35;
    --accent:  #4fffb0;
    --accent2: #00cfff;
    --amber:   #ffc340;
    --text:    #e8eaf0;
    --muted:   #5a6075;
    --danger:  #ff4f6a;
}

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

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    transition: background .2s ease, color .2s ease;
}

/* ── Layout ── */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

@media (max-width: 480px) {
    .container { padding: 1rem; }
}

/* ── Header & Nav ── */
header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: .75rem;
    margin-bottom: 2rem;
    position: relative;
    gap: .5rem;
    transition: border-color .2s ease;
}

.site-logo {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -.5px;
    text-decoration: none;
    color: var(--text);
    margin-right: auto;
    transition: color .2s ease;
}

/* ── Theme toggle ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: border-color .15s, color .15s;
    flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Hamburger ── */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: .25rem;
    line-height: 1;
    flex-shrink: 0;
}

.site-nav ul { list-style: none; display: flex; gap: 1.75rem; }

.site-nav a {
    display: flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: var(--muted);
    font-size: .9rem;
    font-family: 'DM Sans', sans-serif;
    transition: color .15s;
}
.site-nav a:hover { color: var(--text); }
.site-nav a i { font-size: .9rem; }

@media (max-width: 640px) {

    /* ── Hamburger → × ── */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 8px;
        position: relative;
        z-index: 300;
    }

    .nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transform-origin: center;
        transition: transform .38s cubic-bezier(.4,0,.2,1),
                    opacity .22s ease,
                    width .32s cubic-bezier(.4,0,.2,1);
    }

    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; width: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Backdrop ── */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(8,8,8,.93);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity .38s ease;
    }
    .nav-backdrop.open { opacity: 1; pointer-events: auto; }

    /* ── Full-screen nav overlay ── */
    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 250;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity .38s ease, transform .42s cubic-bezier(.4,0,.2,1);
    }
    .site-nav.open { pointer-events: auto; opacity: 1; transform: none; }

    .site-nav ul { flex-direction: column; align-items: center; gap: 0; text-align: center; }

    .site-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .65rem;
        color: rgba(255,255,255,.65);
        font-size: 2.1rem;
        letter-spacing: -.4px;
        padding: .8rem 2.5rem;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .32s ease, transform .42s cubic-bezier(.4,0,.2,1), color .18s ease;
    }
    .site-nav a i { font-size: 1.15rem; opacity: .45; margin-top: .15rem; }
    .site-nav a:hover, .site-nav a:focus { color: #fff; outline: none; }
    .site-nav a:hover i, .site-nav a:focus i { opacity: .8; }

    .site-nav.open li:nth-child(1) a { opacity: 1; transform: none; transition-delay: .06s; }
    .site-nav.open li:nth-child(2) a { opacity: 1; transform: none; transition-delay: .12s; }
    .site-nav.open li:nth-child(3) a { opacity: 1; transform: none; transition-delay: .18s; }
    .site-nav.open li:nth-child(4) a { opacity: 1; transform: none; transition-delay: .24s; }
    .site-nav.open li:nth-child(5) a { opacity: 1; transform: none; transition-delay: .30s; }

    .site-nav li + li { border-top: 1px solid rgba(255,255,255,.07); }

    /* keep toggle button above backdrop */
    .theme-toggle { z-index: 300; }
}

/* ── Footer ── */
footer {
    border-top: 1px solid var(--border);
    margin-top: 3rem;
    padding-top: 1rem;
    font-size: .8rem;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    transition: border-color .2s ease;
}

/* ── Nugget / build log ── */
.nugget {
    background: var(--surface);
    border-left: 3px solid var(--amber);
    padding: 1.25rem 1.5rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 2rem;
    transition: background .2s ease, border-color .2s ease;
}
.nugget h2 {
    font-family: 'DM Mono', monospace;
    font-size: .65rem;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}
.nugget p {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: .5rem;
}
.nugget small {
    font-family: 'DM Mono', monospace;
    font-size: .68rem;
    color: var(--muted);
}

/* ── CTA card ── */
.cta-wrap { margin-bottom: 1.5rem; }
.cta-card {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    font-size: .9rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .04em;
    transition: background .15s, color .15s;
}
.cta-card:hover { background: var(--accent); color: var(--bg); }

/* ── Nav user widget ── */
.nav-user {
    display: flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    color: var(--text);
    font-size: .85rem;
    transition: color .15s;
}
.nav-user:hover { color: var(--accent); }

.nav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
}
.nav-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--bg);
    font-family: 'DM Mono', monospace;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .02em;
    border: none;
}
.nav-user-name { font-size: .85rem; }

/* ── Login page ── */
.login-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem 0 5rem;
}
.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.25rem 2rem 2rem;
    text-align: center;
}
.login-brand {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1rem;
    line-height: 1;
}
.login-heading {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: .4rem;
}
.login-sub {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* 2×2 grid of icon-over-text provider cards */
.login-providers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.75rem;
}
.provider-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    text-decoration: none;
    padding: 1.25rem .75rem 1.1rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    color: var(--muted);
    background: var(--bg);
    transition: border-color .18s, color .18s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.provider-btn:hover {
    color: var(--text);
    transform: translateY(-2px);
}
.provider-btn:active { transform: translateY(0); }

.provider-btn i {
    font-size: 1.75rem;
    line-height: 1;
    transition: color .18s;
}
.provider-btn span {
    font-family: 'DM Mono', monospace;
    font-size: .72rem;
    letter-spacing: .04em;
}

/* Brand colours on hover */
.provider-google:hover    i { color: #EA4335; }
.provider-microsoft:hover i { color: #00a4ef; }
.provider-facebook:hover  i { color: #1877F2; }
.provider-discord:hover   i { color: #5865F2; }

/* Border accent on hover */
.provider-google:hover    { border-color: #EA4335; }
.provider-microsoft:hover { border-color: #00a4ef; }
.provider-facebook:hover  { border-color: #1877F2; }
.provider-discord:hover   { border-color: #5865F2; }

.login-terms {
    font-size: .7rem;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    line-height: 1.6;
}

/* ── Profile page ── */
.profile-wrap {
    display: flex;
    justify-content: center;
    padding: 2rem 0 4rem;
}
.profile-card {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
}
.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}
.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.profile-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--bg);
    font-family: 'DM Mono', monospace;
    font-size: 1.3rem;
    font-weight: 500;
    border: none;
}
.profile-name  { font-size: 1.15rem; font-weight: 500; margin-bottom: .2rem; }
.profile-email { font-size: .82rem; color: var(--muted); font-family: 'DM Mono', monospace; }

.profile-meta {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.profile-meta-item { display: flex; align-items: baseline; gap: .75rem; }
.profile-meta-item label {
    font-family: 'DM Mono', monospace;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    min-width: 100px;
}
.profile-meta-item span { font-size: .88rem; }
.profile-meta-item i { margin-right: .3rem; }

.profile-actions { display: flex; gap: .75rem; }
.profile-signout {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--danger);
    border: 1.5px solid var(--danger);
    padding: .6rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .03em;
    transition: background .15s, color .15s;
}
.profile-signout:hover { background: var(--danger); color: #fff; }

/* ════════════════════════════════════════
   Page: Scan
   ════════════════════════════════════════ */
body.page-scan {
    --bg:      #0d0f12;
    --surface: #151820;
    --border:  #252a35;
    --accent:  #4fffb0;
    --accent2: #00cfff;
    --amber:   #ffc340;
    --text:    #e8eaf0;
    --muted:   #5a6075;
    --danger:  #ff4f6a;
    --radius:  12px;
}

/* scan page is always dark — no toggle needed */
body.page-scan .theme-toggle { display: none; }

body.page-scan header { margin-bottom: 1.5rem; }

body.page-scan main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 4rem;
    width: 100%;
}

.scan-btn {
    width: 100%;
    max-width: 480px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'DM Mono', monospace;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.scan-btn:active { background: var(--accent); color: var(--bg); }

#result-area { width: 100%; max-width: 480px; margin-top: 1.5rem; }

.result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    animation: scFadeIn .3s ease;
}

@keyframes scFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.result-isbn {
    font-family: 'DM Mono', monospace;
    font-size: .72rem;
    color: var(--accent2);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .75rem;
    display: flex;
    justify-content: space-between;
}

.result-source   { font-size: .68rem; color: var(--muted); }
.result-title    { font-size: 1.2rem; font-weight: 500; line-height: 1.3; }
.result-subtitle { font-size: .85rem; color: var(--muted); font-style: italic; margin-top: .25rem; }

.result-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.meta-item label {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-bottom: .2rem;
}
.meta-item span { font-size: .85rem; }

.status-bar {
    font-family: 'DM Mono', monospace;
    font-size: .78rem;
    color: var(--muted);
    padding: .75rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.status-bar.error   { color: var(--danger); }
.status-bar.loading { color: var(--accent2); }

.dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    animation: scPulse 1s ease-in-out infinite;
}
@keyframes scPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.cache-pill {
    display: inline-flex;
    align-items: center;
    background: #e8295a;
    color: #fff;
    font-family: 'DM Mono', monospace;
    font-size: .6rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .18rem .5rem;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: .4rem;
}

/* ── Scanner overlay ── */
#scanner-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: #000; }
#scanner-overlay.open { display: block; }

#preview-container { position: absolute; inset: 0; overflow: hidden; }
#preview-container video { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
#preview-container canvas { display: none !important; }

.sc-grad-top { position: absolute; top: 0; left: 0; right: 0; height: 35%; background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent); z-index: 5; pointer-events: none; }
.sc-grad-bot { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,.82), transparent); z-index: 5; pointer-events: none; }

.sc-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 2.75rem 1.25rem 0; }
.sc-label  { font-family: 'DM Mono', monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sc-close  { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-family: 'DM Mono', monospace; font-size: .72rem; letter-spacing: .05em; padding: .45rem .8rem; border-radius: 8px; cursor: pointer; }

.sc-vf { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 78%; max-width: 300px; aspect-ratio: 3 / 1; z-index: 10; pointer-events: none; }

.sc-corner { position: absolute; width: 20px; height: 20px; border-style: solid; border-color: var(--accent); transition: border-color .25s; }
.sc-corner.tl { top:0; left:0;   border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }
.sc-corner.tr { top:0; right:0;  border-width: 2px 2px 0 0; border-radius: 0 3px 0 0; }
.sc-corner.bl { bottom:0; left:0;  border-width: 0 0 2px 2px; border-radius: 0 0 0 3px; }
.sc-corner.br { bottom:0; right:0; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }

.sc-line { position: absolute; left: 2px; right: 2px; height: 1.5px; background: linear-gradient(to right, transparent, var(--accent) 20%, var(--accent) 80%, transparent); top: 0; animation: scSweep 1.7s ease-in-out infinite; }
@keyframes scSweep { 0% { top: 6%; opacity: .4; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 88%; opacity: .4; } }

.sc-prog-wrap { position: absolute; bottom: -12px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.sc-prog { height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .1s linear, background .25s; }

.sc-status { position: absolute; bottom: -34px; left: 0; right: 0; text-align: center; font-family: 'DM Mono', monospace; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); transition: color .25s; }

.sc-vf.locking .sc-corner { border-color: var(--amber); }
.sc-vf.locking .sc-line   { background: linear-gradient(to right, transparent, var(--amber) 20%, var(--amber) 80%, transparent); animation-duration: .45s; }
.sc-vf.locking .sc-prog   { background: var(--amber); }
.sc-vf.locking .sc-status { color: var(--amber); }
.sc-vf.locked  .sc-corner { border-color: #fff; }
.sc-vf.locked  .sc-line   { display: none; }
.sc-vf.locked  .sc-prog   { background: #fff; width: 100% !important; }
.sc-vf.locked  .sc-status { color: #fff; }

.sc-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 1rem 1.5rem 3.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.sc-manual-btn { background: none; border: none; color: rgba(255,255,255,.35); font-family: 'DM Mono', monospace; font-size: .68rem; letter-spacing: .06em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.sc-manual-row { display: none; width: 100%; max-width: 300px; gap: .5rem; }
.sc-manual-row.open { display: flex; }
.sc-manual-row input { flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: 'DM Mono', monospace; font-size: .9rem; padding: .65rem .85rem; border-radius: 8px; outline: none; }
.sc-manual-row input::placeholder { color: rgba(255,255,255,.28); }
.sc-manual-row input:focus { border-color: var(--accent); }
.sc-manual-row button { background: var(--accent); color: var(--bg); border: none; font-family: 'DM Mono', monospace; font-size: .8rem; font-weight: 500; padding: .65rem 1rem; border-radius: 8px; cursor: pointer; }