:root {
    --stage-bg: #0d1117;
    --substrate: #10301c;
    --outline: #ffd84d;
    --npth: #0d1117;
    --vscore: #ff5a5a;
    --tab: #ffffff;
}
html, body { height: 100%; }
body { display: flex; flex-direction: column; background: #12161c; }

.drop-zone {
    border: 2px dashed var(--bs-border-color); border-radius: .5rem; padding: 1.6rem 1rem;
    text-align: center; cursor: pointer; transition: background .15s, border-color .15s;
}
.drop-zone.over { border-color: var(--bs-warning); background: rgba(255, 193, 7, .06); }
#drop-list { max-height: 11rem; overflow: auto; margin-top: .5rem; text-align: left; }
.pending { display: flex; align-items: center; gap: .45rem; padding: .15rem .25rem; border-radius: .25rem; }
.pending:hover { background: rgba(255, 255, 255, .04); }
.pending .text-truncate { flex: 1; min-width: 0; }
.pending .badge { width: 3.3rem; flex: none; }

/* editor layout */
.editor { flex: 1; display: grid; grid-template-columns: 270px 1fr 300px; min-height: 0; }
.editor[hidden] { display: none; }
.side { overflow-y: auto; background: var(--bs-tertiary-bg); font-size: .85rem; }
.side-left { border-right: 1px solid var(--bs-border-color); }
.side-right { border-left: 1px solid var(--bs-border-color); }
.sec { padding: .7rem .9rem; border-bottom: 1px solid var(--bs-border-color); }
.sec-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.side .form-label { font-size: .72rem; margin-bottom: .1rem; color: var(--bs-secondary-color); }
.stats th { font-weight: 500; color: var(--bs-secondary-color); width: 40%; }

.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toolbar { display: flex; gap: .5rem; align-items: center; padding: .4rem .6rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.viewport { flex: 1; position: relative; background: var(--stage-bg); overflow: hidden; cursor: grab; }
.viewport.panning { cursor: grabbing; }
#svg { width: 100%; height: 100%; display: block; }
.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8b949e; pointer-events: none; }

/* layer list */
.layer-row { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; }
.layer-row .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; cursor: pointer; border: 1px solid #0006; }
.layer-row .sw.off { opacity: .15; }
.layer-row .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.layer-row.off .fn { color: var(--bs-secondary-color); text-decoration: line-through; }
.layer-row select { width: 118px; flex: none; font-size: .72rem; padding: .1rem 1.4rem .1rem .3rem; }

#warnings .alert { font-size: .75rem; padding: .35rem .5rem; margin-bottom: .3rem; }

/* svg styling */
.l-copper, .l-other { opacity: .85; }
.l-mask { opacity: .35; }
.l-paste { opacity: .55; }
.l-drill { color: var(--npth) !important; }
.pnl-outline { fill: none; stroke: var(--outline); vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.brd-outline { fill: none; stroke: var(--outline); vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.substrate { fill: var(--substrate); fill-rule: evenodd; }
.vscore { stroke: var(--vscore); stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.npth { fill: var(--npth); }
.fid-cu { fill: #d4883c; }
.fid-mask { fill: none; stroke: #2ecc71; vector-effect: non-scaling-stroke; stroke-width: 1px; }
.tab-hl { fill: rgba(255, 255, 255, .07); }

@media (max-width: 992px) {
    .editor { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; }
    .side-left, .side-right { border: 0; }
}

/* pick & place markers */
.pnp-m circle { fill: none; stroke-width: .1; }
.pnp-m line { stroke-width: .1; }
.pnp-m text { font: .55px sans-serif; }
.pnp-t { color: #ff4fd8; stroke: currentColor; }
.pnp-b { color: #3fe0ff; stroke: currentColor; }
.pnp-m text { fill: currentColor; stroke: none; }

/* drop onto the editor viewer */
.drop-msg { display: none; position: absolute; inset: 12px; border: 2px dashed var(--bs-warning); border-radius: .5rem;
    background: rgba(13, 17, 23, .75); color: var(--bs-warning); font-size: 1.2rem; align-items: center; justify-content: center; gap: .5rem; pointer-events: none; }
.viewport.drop-over .drop-msg { display: flex; }
.toast-msg { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 90%; background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis); border: 1px solid var(--bs-success-border-subtle); padding: .4rem .8rem; border-radius: .4rem; font-size: .85rem; }

.gap-h { font-size: .74rem; font-weight: 600; margin-bottom: .15rem; }
.gap-h .text-secondary { font-weight: 400; }

/* ── auth / support / admin ─────────────────────────────────────────── */
.page-auth, .page-admin, .page-support { overflow-y: auto; }
.auth-wrap { flex: 1; }
.feature-list li { margin-bottom: .35rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.donate-card { border: 1px solid var(--bs-border-color); border-top: 3px solid var(--brand); border-radius: .5rem; padding: .9rem; background: var(--bs-tertiary-bg); }
.donate-ico { color: var(--brand); font-size: 1.6rem; }
.donate-qr { display: block; width: 160px; height: 160px; margin: .3rem auto 0; background: #fff; padding: 6px; border-radius: .35rem; object-fit: contain; }
.donate-qr.qr-auto img, .donate-qr.qr-auto canvas { width: 148px !important; height: 148px !important; }
.donate-btn { background: var(--brand); color: #111; font-weight: 600; border: 0; }
.donate-btn:hover { filter: brightness(1.1); color: #111; }
.support-card { border-color: rgba(220, 53, 69, .35); }
.thanks-card { border: 1px solid rgba(220, 53, 69, .4); background: rgba(220, 53, 69, .07); border-radius: .4rem; padding: .55rem .7rem; }

.admin-tabs .nav-link { color: var(--bs-secondary-color); }
.admin-tabs .nav-link.active { background: var(--bs-warning); color: #111; }
.kpi-link { cursor: pointer; transition: border-color .15s; }
.kpi-link:hover { border-color: var(--bs-warning); }
.edit-card.off { opacity: .55; }
.edit-card .form-label { margin-bottom: .1rem; color: var(--bs-secondary-color); }
.qr-thumb { width: 84px; height: 84px; object-fit: contain; background: #fff; border-radius: .3rem; display: block; }
.qr-thumb.empty { background: var(--bs-body-bg); border: 1px dashed var(--bs-border-color); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--bs-secondary-color); }
.fab-dot { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex: none; text-shadow: 0 0 2px #0008; }
.api-box { border: 1px dashed var(--bs-border-color); border-radius: .4rem; padding: .6rem .75rem; }
.type-menu { max-height: 60vh; overflow-y: auto; }

/* send to manufacturing */
.fab-summary { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem; }
.fab-summary b { color: var(--bs-warning); }
.fab-card { border: 1px solid var(--bs-border-color); border-left: 4px solid var(--brand); border-radius: .5rem; padding: .9rem; background: var(--bs-tertiary-bg); height: 100%; display: flex; flex-direction: column; }
.fab-card .notes { white-space: pre-line; font-size: .8rem; color: var(--bs-secondary-color); flex: 1; }

/* guest mode */
.guest-strip { background: rgba(255, 193, 7, .1); color: var(--bs-warning-text-emphasis); }
.guest-strip a { color: var(--bs-warning); font-weight: 600; }