:root{--ink:#16232e;--muted:#64707b;--line:#dde3e8;--bg:#f3f5f7;--card:#fff;--brand:#0f3d5e;--accent:#1f7ae0;--ok:#1b7f45;--err:#c0392b}
[hidden]{display:none!important}
@media (prefers-color-scheme:dark){:root{--ink:#e6edf3;--muted:#98a4ae;--line:#2c3a46;--bg:#0f161c;--card:#17212a;--brand:#0b2a40}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:5;flex-wrap:wrap}
.bar a,.bar .link{color:#fff;text-decoration:none;font-size:15px}
.brand{font-weight:700;font-size:17px!important}
nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
main{max-width:760px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.narrow{max-width:400px;margin:40px auto}
h1{font-size:21px;margin:0 0 12px}
label{display:block;font-weight:600;font-size:14px;margin:12px 0 4px}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:11px;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:12px 18px;font:600 16px system-ui;cursor:pointer;text-align:center;text-decoration:none}
.btn.sm{padding:7px 12px;font-size:14px}.btn.full{width:100%;margin-top:16px}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn:disabled{opacity:.6}
.link{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer}
.inline{display:inline}
.photo-btns{display:flex;gap:10px;flex-wrap:wrap}.photo-btns .btn{margin:0;font-weight:600}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:10px}
.thumbs div{position:relative}.thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.thumbs button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:#000a;color:#fff;font-size:18px;line-height:1}
.err{color:var(--err);font-weight:600}.ok{color:var(--ok);font-weight:600}.muted{color:var(--muted);font-size:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.filters select,.filters input{width:auto;flex:1;min-width:120px;margin:0}
.reports{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.reports a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;color:inherit;text-decoration:none}
.row1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;color:#fff;white-space:nowrap}
.sev-low{background:#5c8f5c}.sev-medium{background:#c88a12}.sev-high{background:#d4572a}.sev-critical{background:#a8162b}
dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:8px 0}dt{color:var(--muted);font-size:14px}dd{margin:0}
dd select{display:inline;width:auto;padding:4px;margin-left:8px}
.desc{white-space:pre-wrap;border-top:1px solid var(--line);padding-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}tr.off{opacity:.45}
.qbanner{background:#fff6d6;color:#4a3b00;border:1px solid #e9d27a;border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:15px}
.qbanner>div+div{margin-top:8px}.qbanner .btn{margin-left:6px;padding:5px 10px}.qbad{color:#7a1b12}
.warn{background:#fdecea;color:#7a1b12;border-radius:8px;padding:8px 10px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#16232e;color:#fff;padding:10px 16px;border-radius:99px;z-index:20;font-weight:600}
.perm{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.perm .pi{font-size:26px;line-height:1}.perm .pt{flex:1}.perm .ps{font-weight:600;margin-top:4px}.perm .ph{font-size:14px;margin-top:4px}
.perm.is-ok .ps{color:var(--ok)}.perm.is-bad .ps{color:var(--err)}
@media (prefers-color-scheme:dark){.qbanner{background:#3a3110;color:#f4e3a1;border-color:#6b5a1d}.qbad{color:#ffb4a8}.warn{background:#3d1b17;color:#ffb4a8}}
.hello{margin:6px 0 0}.hub{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.tile{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;color:inherit;text-decoration:none}
.tile b{font-size:18px}.ti{font-size:30px}.hub.small .tile{padding:12px 14px}.hub.small .tile b{font-size:15px}
@media (max-width:420px){.hub{grid-template-columns:1fr}.hub.small{grid-template-columns:1fr 1fr}}
.fline{border:1px solid var(--line);border-radius:10px;padding:4px 12px 12px;margin:12px 0}
.fline legend{font-weight:700;padding:0 6px}.fline .rm{font-size:14px;margin-left:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr 110px;gap:0 10px}.grid3 label{margin-top:6px}
@media (max-width:520px){.grid3{grid-template-columns:1fr 1fr}.grid3 label:last-child{grid-column:1/-1}}
.ftotal{margin-top:14px;font-size:18px}.pill.ft{background:#2a6f97}
td.num,th.num{text-align:right}tr.tot td{font-weight:700;border-top:2px solid var(--line)}
.fline.bad{border-color:var(--err);background:color-mix(in srgb,var(--err) 6%,transparent)}

/* Tillman Fiber Toolbox — Electric Blue Theme */
:root {
  color-scheme: dark;
  --ink: #eaf6ff;
  --muted: #a6c0d7;
  --line: #29547c;
  --bg: #061326;
  --card: #102b4b;
  --brand: #071e3b;
  --accent: #087cff;
  --ok: #48e0a1;
  --err: #ff6b75;
}

body {
  background:
    radial-gradient(circle at 90% 0%, #087cff24, transparent 45%),
    var(--bg);
}

.bar {
  border-bottom: 1px solid #20dfff55;
  box-shadow: 0 4px 24px #0006;
}

.card, .tile, .reports a {
  box-shadow: 0 8px 24px #0003;
}

.tile {
  transition: transform .18s, border-color .18s;
}

.tile:hover {
  transform: translateY(-2px);
  border-color: #20dfff;
}

.btn {
  background: linear-gradient(135deg, #087cff, #0054cf);
  box-shadow: 0 3px 12px #087cff44;
}

.btn:focus-visible, .tile:focus-visible,
input:focus-visible, select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #20dfff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:hover { transform: none; }
}

/* ========================================
   TILLMAN FIBER TOOLBOX
   Branded Login Screen
   ======================================== */

.toolbox-login {
  max-width: 460px;
  margin: 35px auto;
  padding: 28px;
  border: 1px solid #168bff;
  border-radius: 20px;
  background: linear-gradient(145deg, #102c50, #07162c);
  box-shadow: 0 0 35px rgba(0, 136, 255, 0.18);
}

.toolbox-login-brand {
  text-align: center;
  margin-bottom: 26px;
}

.toolbox-login-logo {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 20px;
  filter: drop-shadow(0 0 16px rgba(0, 190, 255, 0.4));
}

.toolbox-login h1 {
  color: #ffffff;
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 6px;
}

.toolbox-login-brand .muted {
  color: #8fdcff;
  margin: 0;
}

.toolbox-login input {
  background: #071b33;
  border: 1px solid #35638d;
  color: #ffffff;
}

.toolbox-login input:-webkit-autofill,
.toolbox-login input:-webkit-autofill:hover,
.toolbox-login input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 0 0 1000px #071b33 inset;
  transition: background-color 9999s ease-out;
}

.toolbox-login input:focus {
  border-color: #20dfff;
  outline: 2px solid #20dfff;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .toolbox-login {
    padding: 20px;
    margin: 16px auto;
  }

  .toolbox-login-logo {
    max-width: 185px;
  }
}
