:root { --bg:#0f172a; --panel:#111827; --panel2:#1f2937; --text:#e5e7eb; --muted:#9ca3af; --line:#334155; --accent:#38bdf8; --danger:#f87171; --ok:#34d399; --warn:#fbbf24; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
.topbar { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--line); background:#020617; position:sticky; top:0; z-index:5; }
h1 { margin:0; font-size:1.35rem; } h2 { margin-top:0; } p { color:var(--muted); } code { color:#bae6fd; }
main { padding:1rem; max-width:1500px; margin:0 auto; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem; margin-bottom:1rem; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.narrow { max-width:520px; margin:4rem auto; }
.hidden { display:none !important; }
.tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.tabs button, button, .button { border:1px solid var(--line); background:var(--panel2); color:var(--text); padding:.65rem .9rem; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-block; font-weight:700; }
.tabs button.active, button[type=submit] { background:var(--accent); color:#082f49; border-color:var(--accent); }
.secondary { background:transparent; color:var(--text); }
.tab { display:none; } .tab.active { display:block; }
.grid { display:grid; gap:.85rem; } .grid.one { grid-template-columns:1fr; } .grid.three { grid-template-columns:repeat(3, minmax(0,1fr)); } .grid.four { grid-template-columns:repeat(4, minmax(0,1fr)); }
label { display:flex; flex-direction:column; gap:.35rem; color:var(--muted); font-size:.9rem; }
input, select, textarea { width:100%; border:1px solid var(--line); background:#020617; color:var(--text); border-radius:10px; padding:.65rem; font:inherit; }
textarea { min-height:70px; resize:vertical; }
.wide { grid-column:1 / -1; } .actions { display:flex; gap:.5rem; align-items:center; }
.toolbar, .sectionHeader { display:flex; justify-content:space-between; gap:.75rem; align-items:center; margin:.75rem 0; }
.toolbar input { flex:1; }
.stats { display:grid; grid-template-columns:repeat(6, minmax(120px, 1fr)); gap:.8rem; margin-bottom:1rem; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem; }
.stat b { display:block; font-size:2rem; margin-top:.25rem; color:var(--accent); }
.stat.danger b { color:var(--danger); } .stat.warn b { color:var(--warn); } .stat.ok b { color:var(--ok); }
.twoCol { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.tableWrap { border:1px solid var(--line); border-radius:14px; overflow:auto; max-height:65vh; background:#020617; }
table { border-collapse:collapse; width:100%; min-width:1000px; }
th, td { border-bottom:1px solid var(--line); padding:.65rem; text-align:left; vertical-align:top; font-size:.88rem; }
th { background:#111827; color:#bae6fd; position:sticky; top:0; z-index:1; }
.sortButton { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.45rem; padding:0; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; font-weight:700; text-align:left; white-space:nowrap; }
.sortButton:hover { color:#fff; }
.sortButton:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sortIndicator { min-width:1em; color:var(--accent); font-size:.78rem; text-align:center; }
tr:hover td { background:rgba(56,189,248,.08); }
.badge { display:inline-block; padding:.2rem .45rem; border-radius:999px; background:var(--panel2); border:1px solid var(--line); }
.badge.Active, .badge.Pass, .badge.Good { color:var(--ok); } .badge.Retired, .badge.Fail, .badge.Destroyed, .badge.Damaged { color:var(--danger); } .badge.Out { color:var(--warn); }
#toast { position:fixed; bottom:1rem; right:1rem; background:#020617; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; opacity:0; transform:translateY(10px); transition:.2s; }
#toast.show { opacity:1; transform:translateY(0); }
@media (max-width:900px) { .grid.three, .grid.four, .twoCol, .stats { grid-template-columns:1fr; } .toolbar, .sectionHeader { align-items:stretch; flex-direction:column; } }

.grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
.fieldHint { color:var(--muted); font-size:.78rem; line-height:1.3; }
h3 { margin:.25rem 0 .75rem; color:#bae6fd; }
.rowActions { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.dangerButton { background:transparent; color:var(--danger); border-color:var(--danger); }
.dangerButton:hover, .dangerButton:focus-visible { background:rgba(248,113,113,.12); }
.adminTableWrap { max-height:45vh; }
.adminGrid { align-items:start; }
@media (max-width:900px) { .grid.two { grid-template-columns:1fr; } }