:root{
    --bg:#0f172a;
    --bg-elevated:#1e293b;
    --bg-inset:#0f172a;
    --border:rgba(255,255,255,0.1);
    --text:#e2e8f0;
    --text-muted:#94a3b8;
    --accent:#6366f1;
    --accent-2:#8b5cf6;
    --accent-3:#ec4899;
    --overlay-4:#22d3ee;
    --gradient:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 50%,var(--accent-3) 100%);
    --radius:16px;
    --radius-sm:8px;
}

*, *::before, *::after{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);
    color:var(--text);
}

/* Several rules below (.view-tab, .edit-btn) set an explicit `display` at the same
   specificity as the UA stylesheet's `[hidden]{display:none}` and load later in the
   cascade, which silently defeats the `hidden` attribute/property on those elements
   (e.g. #admin-tab, #add-motor-btn) - confirmed via computed style while building this
   page. `!important` here is deliberate, not a shortcut: it's the standard fix for this
   exact conflict. */
[hidden]{
    display:none !important;
}

h1, h2, h3, h4{
    font-family:"Space Grotesk",Inter,sans-serif;
}

h4{
    margin:14px 0 4px;
    font-size:1em;
    color:var(--accent-2);
}

a{
    color:var(--accent-2);
}

header{
    background:rgba(15,23,42,0.95);
    border-bottom:1px solid var(--border);
    padding:14px 20px;
    position:sticky;
    top:0;
    z-index:10;
}

.header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand h1{
    margin:0;
    font-size:1.3em;
}

.brand .powered-by{
    margin:0;
    font-size:0.75em;
    color:var(--text-muted);
}

#status{
    font-size:0.85em;
    padding:4px 12px;
    border-radius:12px;
    background:rgba(255,255,255,0.08);
    border:1px solid var(--border);
}

.header-status{
    display:flex;
    align-items:center;
    gap:10px;
}

.auth-status, .admin-bell{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    border:1px solid var(--border);
    color:var(--text-muted);
}

.auth-status:hover, .admin-bell:hover{
    border-color:var(--accent);
}

.auth-status.can-edit{
    color:#4ade80;
    border-color:rgba(74,222,128,0.4);
}

.admin-bell .bell-count{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:16px;
    height:16px;
    padding:0 3px;
    border-radius:8px;
    background:#f87171;
    color:#1a1a1a;
    font-size:0.7em;
    font-weight:700;
    line-height:16px;
    text-align:center;
}

main{
    padding:20px;
    max-width:1000px;
    margin:0 auto;
}

.intro{
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-left:4px solid var(--accent);
    border-radius:var(--radius-sm);
    padding:18px 22px;
    margin-bottom:20px;
}

.intro p{
    margin:0 0 10px;
    line-height:1.55;
}

.intro > *:last-child{
    margin-bottom:0;
}

.intro strong{
    color:var(--text);
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-3) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.intro h2{
    margin:24px 0 10px;
    font-size:1.15em;
    color:var(--text);
}

.intro ul{
    margin:0 0 10px;
    padding-left:22px;
    line-height:1.6;
}

.intro li{
    margin-bottom:8px;
}

.intro code{
    background:var(--bg-inset);
    padding:1px 5px;
    border-radius:4px;
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:0.9em;
}

.intro pre{
    background:var(--bg-inset);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 14px;
    margin:0 0 10px;
    overflow-x:auto;
}

.intro pre code{
    background:none;
    padding:0;
}

.background-toc{
    display:flex;
    flex-wrap:wrap;
    gap:18px 28px;
    background:var(--bg-inset);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:14px 18px;
    margin:14px 0 20px;
}

.background-toc > p.note{
    flex-basis:100%;
    margin:0 0 4px;
}

.background-toc-group{
    min-width:200px;
}

.background-toc-group h4{
    margin:0 0 6px;
    font-size:0.85em;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:0.03em;
}

.background-toc-group ul{
    margin:0;
    padding:0;
    list-style:none;
}

.background-toc-group li{
    margin:0 0 4px;
    font-size:0.92em;
}

.spec-table-plain{
    border-collapse:collapse;
    width:100%;
    font-size:0.9em;
    margin:0 0 10px;
}

.spec-table-plain th, .spec-table-plain td{
    padding:6px 10px;
    text-align:left;
    border-bottom:1px solid var(--border);
}

.spec-table-plain th{
    color:var(--accent);
}

.stats-strip{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin:16px 0 4px;
}

.stat-card{
    background:var(--bg-inset);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 18px;
    min-width:110px;
    text-align:center;
}

.stat-value{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.6em;
    font-weight:700;
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.stat-label{
    font-size:0.78em;
    color:var(--text-muted);
    margin-top:2px;
}

.view-nav{
    display:flex;
    gap:8px;
    margin-top:12px;
    flex-wrap:wrap;
}

.view-tab{
    padding:8px 18px;
    border:1px solid var(--border);
    background:var(--bg-elevated);
    color:var(--text);
    border-radius:50px;
    cursor:pointer;
    font-size:0.95em;
    font-family:inherit;
    text-decoration:none;
    display:inline-block;
}

.view-tab.active{
    background:var(--gradient);
    border-color:transparent;
    color:white;
    font-weight:600;
}

.note{
    color:var(--text-muted);
    font-style:italic;
}

.browse-toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:14px;
    flex-wrap:wrap;
}

/* .edit-btn's own margin-top:8px (meant for a button stacked below other content
   elsewhere, e.g. the detail view's Edit/Delete row) doesn't belong here - it was
   the actual cause of "+ Add motor" / "Compare (N)" sitting visibly lower than the
   search box and brand-select beside them in this flex row (confirmed via
   getComputedStyle: 8px vs the select/input's 0px, not a disabled-button rendering
   quirk as first suspected). */
.browse-toolbar .edit-btn{
    margin-top:0;
}

.browse-toolbar input[type="search"]{
    flex:1;
    min-width:220px;
}

.browse-toolbar select{
    background:var(--bg-elevated);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:6px 8px;
}

.kv-filter{
    display:flex;
    align-items:center;
    gap:4px;
    color:var(--text-muted);
}

.kv-filter input[type="number"]{
    width:80px;
    background:var(--bg-elevated);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:6px 8px;
}

/* --- Motor list --- */

.badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:6px;
}

.badge{
    display:inline-block;
    font-size:0.75em;
    padding:2px 8px;
    border-radius:999px;
    white-space:nowrap;
}

.badge-brand{
    background:var(--accent);
    color:#fff;
}

.badge-tag{
    background:var(--bg-inset);
    border:1px solid var(--border);
    color:var(--text-muted);
}

.checkbox-label{
    display:flex;
    align-items:center;
    gap:6px;
}
.checkbox-label input[type="checkbox"]{
    width:auto;
}

.motor-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:12px;
}

.motor-card{
    position:relative;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:14px 16px 26px;
    cursor:pointer;
}

.motor-card:hover{
    border-color:var(--accent);
}

.compare-toggle{
    display:flex;
    align-items:center;
    gap:4px;
    margin-bottom:6px;
    font-size:0.8em;
    color:var(--text-muted);
    cursor:pointer;
    width:fit-content;
}

/* On the card itself, compare is a minor, out-of-the-way action - bottom-right
   corner, smaller than the .compare-group-filter labels that reuse this class in
   the compare view (those stay full-size, they're the primary control there). */
.motor-card .compare-toggle{
    position:absolute;
    bottom:8px;
    right:10px;
    margin-bottom:0;
    font-size:0.68em;
}

.motor-card .compare-toggle input[type="checkbox"]{
    width:11px;
    height:11px;
}

/* A generated performance graph exists for this motor - top-right corner, opposite
   the compare checkbox, so the two small indicators don't compete for the same
   spot. Color alone isn't the only signal (title tooltip + it's absent entirely
   when there's no graph), but green reads as "data available" at a glance. */
.perf-dot{
    position:absolute;
    top:10px;
    right:10px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#4ade80;
    box-shadow:0 0 4px rgba(74,222,128,0.6);
}

.motor-card h3{
    margin:0 0 4px;
    font-size:1.05em;
}

.motor-card p{
    margin:0;
}

/* --- Motor detail --- */

.motor-detail-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.comments-box{
    background:var(--bg-elevated);
    border:1px solid var(--accent-2);
    border-radius:var(--radius-sm);
    padding:10px 14px;
    margin:14px 0;
}

.comments-box h4{
    margin:0 0 6px;
    color:var(--accent-2);
}

.comments-box p{
    margin:0;
    white-space:pre-wrap;
}

.images-section{
    margin:14px 0;
}

.images-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:6px 0;
}

figure.motor-image{
    margin:0;
    text-align:center;
}

figure.motor-image .motor-thumb{
    max-width:140px;
    max-height:140px;
    display:block;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
}

figure.motor-image figcaption{
    font-size:0.8em;
    color:var(--text-muted);
    max-width:140px;
}

.image-row{
    display:flex;
    gap:6px;
    margin-bottom:6px;
    flex-wrap:wrap;
    align-items:center;
}

.image-row select, .image-row input[type="url"], .image-row input[type="text"]{
    padding:4px;
}

.spec-groups{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:14px;
    margin:14px 0;
}

.spec-group{
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 14px;
}

/* A 2-column grid sized to content (not a <table>) - keeps the label/value gap tight
   regardless of the card's own width, and gives every caption in a column the same
   right edge (real right-justification) since grid-template-columns:max-content sizes
   each column to its widest cell, same principle as a table's auto column layout,
   but without a table handing 100%-width leftover space to whichever column stretches. */
.spec-table{
    display:grid;
    grid-template-columns:max-content max-content;
    column-gap:10px;
    row-gap:2px;
    font-size:0.92em;
}

.spec-label{
    color:var(--text-muted);
    white-space:nowrap;
    text-align:right;
    padding:3px 0;
    border-bottom:1px solid var(--border);
}

.spec-value{
    text-align:left;
    word-break:break-word;
    overflow-wrap:anywhere;
    padding:3px 0;
    border-bottom:1px solid var(--border);
}

.info-icon{
    display:inline-block;
    position:relative;
    width:10px;
    height:10px;
    line-height:10px;
    border-radius:50%;
    background:var(--border);
    color:var(--text-muted);
    font-size:0.6em;
    font-style:italic;
    font-weight:bold;
    text-align:center;
    margin-left:3px;
    top:-1px;
    cursor:help;
    user-select:none;
    vertical-align:text-top;
}

/* An abbreviated caption (e.g. "τ", "Isat") that expands to its full name on hover -
   keeps the label column narrow (grid-template-columns:max-content sizes it to the
   widest caption in the table) without dropping the long-form name entirely. */
.abbr-label{
    position:relative;
    cursor:help;
    text-decoration:underline dotted;
    text-underline-offset:2px;
}

/* A native `title` tooltip is kept on the element for accessibility/fallback, but the
   tooltip people actually see is drawn here from `data-tooltip` instead - native title
   tooltips proved unreliable (help cursor shown, no popup ever appeared). Shared by
   .info-icon and .abbr-label. */
.info-icon::after, .abbr-label::after{
    content:attr(data-tooltip);
    position:absolute;
    z-index:20;
    top:130%;
    left:-2px;
    width:220px;
    max-width:min(220px, 90vw);
    background:var(--bg-inset);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:8px 10px;
    font-size:0.85em;
    font-style:normal;
    font-weight:normal;
    line-height:1.4;
    text-align:left;
    white-space:normal;
    box-shadow:0 4px 16px rgba(0,0,0,0.4);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.1s ease;
}
.info-icon:hover::after, .info-icon:focus::after,
.abbr-label:hover::after, .abbr-label:focus::after{
    opacity:1;
}

table.sim-table{
    border-collapse:collapse;
    width:100%;
    font-size:0.92em;
}

table.sim-table td, table.sim-table th{
    padding:3px 6px;
    text-align:left;
    border-bottom:1px solid var(--border);
}

table.sim-table th{
    color:var(--text-muted);
    font-size:0.85em;
}

.compare-view{
    margin-top:14px;
}

.compare-group-filter{
    display:flex;
    flex-wrap:wrap;
    gap:4px 16px;
    margin-bottom:10px;
}

.compare-group-filter .compare-toggle{
    margin-bottom:0;
}

.perf-params-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    margin:10px 0;
}

.perf-params-row label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.85em;
    color:var(--text-muted);
}

.perf-params-row input{
    width:80px;
}

.perf-startup-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 20px;
    margin:10px 0;
}

.perf-startup-row label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.85em;
    color:var(--text-muted);
}

.perf-startup-row input[type="number"]{
    width:70px;
}

.perf-startup-row select{
    background:var(--bg-elevated);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:5px 8px;
}

.perf-startup-readout{
    font-weight:600;
    font-style:normal;
}

.flywheel-builder{
    background:var(--bg-inset);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:14px 18px;
    margin:14px 0;
}

.flywheel-builder-inputs{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:12px 16px;
    margin-bottom:10px;
}

.flywheel-builder-inputs label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:0.85em;
    color:var(--text-muted);
}

.flywheel-builder-inputs input,
.flywheel-builder-inputs select{
    background:var(--bg-elevated);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:6px 8px;
    font-family:inherit;
    font-size:1em;
}

.perf-startup-readout.startup-within-limit{
    color:#4ade80;
}

.perf-startup-readout.startup-over-limit{
    color:#f87171;
}

.compare-table-wrap{
    overflow-x:auto;
    margin-top:10px;
}

table.compare-table{
    border-collapse:collapse;
    width:100%;
    font-size:0.92em;
}

table.compare-table td, table.compare-table th{
    padding:5px 10px;
    text-align:left;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

table.compare-table thead th{
    color:var(--accent);
    position:sticky;
    top:0;
    background:var(--bg);
}

td.compare-label{
    color:var(--text-muted);
}

td.compare-chart-cell{
    padding-top:6px;
    padding-bottom:6px;
    white-space:normal;
}

th.compare-group-header{
    color:var(--accent-2);
    background:var(--bg-elevated);
    text-align:left;
    padding-top:10px;
}

.profile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:12px;
    margin-top:10px;
}

/* Bigger than this section's first pass (240px) - a single motor's own detail page
   has the room, and the graph is the main point of the section, so it gets 2 per row
   on most screens instead of 3-4 small ones. */
.perf-chart-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
    gap:14px;
    margin:10px 0;
}

.perf-chart{
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:8px 10px;
}

.perf-chart-title{
    font-size:0.85em;
    color:var(--text-muted);
    margin-bottom:4px;
}

.perf-chart-svg{
    width:100%;
    height:auto;
}

.perf-chart-axis{
    stroke:var(--border);
    stroke-width:1;
}

/* Sparse (3 each way) dotted reference lines - see addSparseGrid() in ui.js. */
.perf-chart-gridline{
    stroke:var(--border);
    stroke-width:1;
    stroke-dasharray:1,3;
}

/* Track power supplies typically can't deliver more than CURRENT_SUPPLY_LIMIT_A -
   this shades the chart above that current so it reads as "danger zone" at a glance. */
.perf-chart-danger-zone{
    fill:#f87171;
    opacity:0.1;
}

.perf-chart-danger-line{
    stroke:#f87171;
    stroke-width:1;
    stroke-dasharray:4,3;
}

/* Vertical marker at a motor's own peak (shaft power / efficiency charts in
   compare) - color-matched to that motor's line via an inline style, same
   pattern as .perf-chart-line below. */
.perf-chart-max-line{
    stroke-width:1;
    stroke-dasharray:3,3;
    opacity:0.7;
}

/* The compare view's combined charts sit in a wide colspan cell, not a narrow card -
   cap how large perf-chart-svg's width:100% is allowed to grow on a very wide
   compare table with few motor columns. */
.perf-chart-combined .perf-chart-svg{
    max-width:640px;
}

.perf-chart-line{
    fill:none;
    stroke:var(--accent);
    stroke-width:2;
}

/* The startup-adjusted curve (see computeStartupAdjustedCurve in ui.js) - dashed so
   it reads as "hypothetical, with this duty_spup/duty_ramp applied" rather than a
   second real measurement, in the danger-zone accent color since its whole point is
   showing whether a tune keeps current out of that zone. */
.perf-chart-line-overlay{
    fill:none;
    stroke:#f87171;
    stroke-width:2;
    stroke-dasharray:5,4;
}

.perf-chart-overlay-note{
    margin-top:4px;
    font-size:0.78em;
}

.perf-chart-label{
    fill:var(--text-muted);
    font-size:9px;
}

.perf-chart-overlay{
    grid-column:1 / -1;
}

.perf-overlay-legend{
    display:flex;
    flex-wrap:wrap;
    gap:4px 14px;
    margin-top:6px;
    font-size:0.8em;
}

.perf-overlay-legend-item::before{
    content:"—";
    margin-right:4px;
    font-weight:bold;
}

.profile-card{
    background:var(--bg-inset);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 14px;
}

.profile-firmware{
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.75em;
    color:var(--accent);
    margin:-4px 0 8px;
}

.profile-verified{
    font-style:normal;
    font-weight:600;
    color:#4ade80;
    margin-bottom:6px;
}

.profile-fitness{
    font-style:normal;
    margin-bottom:8px;
}

.profile-fitness-ok{
    color:#4ade80;
}

.profile-fitness-risky{
    color:#f87171;
    font-weight:600;
}

.profile-fitness-unknown{
    color:var(--text-muted);
}

.profile-form label{
    display:block;
    margin-bottom:8px;
}

.profile-form label span{
    display:block;
    margin-bottom:2px;
    font-size:0.85em;
    color:var(--text-muted);
}

.profile-form input, .profile-form textarea{
    display:block;
    width:100%;
}

/* --- Forms --- */

.edit-btn{
    margin-top:8px;
    font-size:0.85em;
}

.edit-btn.danger{
    color:#f87171;
    border-color:rgba(248,113,113,0.4);
}

.config-edit{
    background:var(--bg-inset);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 14px;
    margin-top:10px;
}

.config-edit label{
    display:block;
    margin-bottom:6px;
}

.motor-edit-form{
    max-width:640px;
}

.motor-edit-form input, .motor-edit-form select{
    display:block;
    width:100%;
    max-width:400px;
}

.json-field{
    display:block;
    width:100%;
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:0.85em;
}

.field-error{
    color:#f87171;
    font-style:normal;
    margin:2px 0 0;
}

.form-actions{
    margin-top:8px;
    display:flex;
    gap:8px;
}

input, select, textarea{
    font-family:inherit;
    background:var(--bg-inset);
    color:var(--text);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:6px;
    padding:6px 8px;
}

input:focus, select:focus, textarea:focus{
    outline:none;
    border-color:var(--accent);
}

button{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    font-family:inherit;
    font-size:1em;
    line-height:1.2;
    vertical-align:middle;
    background:var(--bg-elevated);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:7px 14px;
    cursor:pointer;
}

/* Some browsers give a disabled button different default chrome (extra internal
   padding/line-height from native theming) even with `appearance:none` above -
   redeclaring the same box explicitly is what actually keeps a disabled button
   (e.g. #compare-btn at 0 selected) aligned with its enabled siblings in the same
   toolbar row, confirmed as the fix for exactly that misalignment. */
/* Only opacity/cursor - NOT font-size/line-height/padding/border. An earlier pass
   redeclared those here to rule out native disabled-button theming, but that rule
   has equal specificity to .edit-btn's own font-size:0.85em and happened to win by
   source order, silently overriding it back to 1em whenever a button was both
   .edit-btn and disabled (e.g. #compare-btn at 0 selected) - a bigger font meant a
   bigger line-height and padding box, so the "wrong" fix reintroduced the same
   visible height mismatch it was meant to rule out. Confirmed via getComputedStyle
   on the live misaligned button before removing this. */
button:disabled{
    opacity:0.55;
    cursor:not-allowed;
}

button:hover{
    border-color:var(--accent);
}

button[type="submit"]{
    background:var(--gradient);
    border:none;
    color:white;
    font-weight:600;
    border-radius:50px;
    padding:8px 22px;
}

a.edit-btn, button.edit-btn{
    display:inline-block;
}

code, pre{
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

pre{
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 12px;
    overflow-x:auto;
}

/* --- Account --- */

.password-field, .token-reveal{
    display:flex;
    align-items:center;
    gap:6px;
}

.password-field input{
    flex:1;
}

.token-reveal pre{
    flex:1;
    margin:0;
}

.icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    flex-shrink:0;
}

/* --- Admin --- */

.admin-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 0;
    border-bottom:1px solid var(--border);
}

.admin-row .admin-row-info{
    display:flex;
    flex-direction:column;
}

.admin-row .admin-row-actions{
    display:flex;
    gap:8px;
    flex-shrink:0;
}

.admin-row .status-tag{
    font-size:0.8em;
    color:var(--text-muted);
}

/* --- Footer --- */

footer{
    background:rgba(15,23,42,0.8);
    border-top:1px solid var(--border);
    color:var(--text-muted);
    text-align:center;
    padding:18px 20px;
    margin-top:20px;
}

footer a{
    color:var(--text-muted);
    text-decoration:underline;
}

footer p{
    margin:0;
    font-size:0.85em;
}