/* SLBS 1999 — mobile-first UI */

:root{
  --bg:#F4F6FA;
  --card:#FFFFFF;
  --ink:#0F172A;
  --ink-2:#475569;
  --ink-3:#94A3B8;
  --line:#E2E8F0;
  --line-2:#EEF2F7;
  --accent:#0F172A;
  --ok:#059669;
  --err:#DC2626;
  --r:14px;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.18);
  --tc:#0F172A;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:40px;
}
a{color:inherit}
.muted{color:var(--ink-2)}
.small{font-size:13px}

.wrap{max-width:960px;margin:0 auto;padding:0 14px}

/* ---------- Login ---------- */
.login-body{
  background:linear-gradient(160deg,#0F172A 0%,#1E293B 55%,#334155 100%);
  min-height:100vh; display:flex; align-items:center;
}
.login-wrap{width:100%;padding:24px 16px}
.login-card{
  max-width:420px;margin:0 auto;background:var(--card);
  border-radius:20px;padding:26px 22px;box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
}
.brand{text-align:center;margin-bottom:20px}
.brand-mark{
  display:inline-block;font-weight:800;letter-spacing:.14em;font-size:12px;
  background:#0F172A;color:#fff;padding:6px 12px;border-radius:999px;margin-bottom:12px;
}
.brand h1{font-size:19px;margin:0 0 4px;letter-spacing:-.01em}
.brand p{margin:0;font-size:13px}

.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.team-pick{
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:13px 12px;font:inherit;font-weight:600;font-size:14px;color:var(--ink);
  cursor:pointer;text-align:left;transition:.15s;
}
.team-pick:hover{border-color:var(--tc)}
.team-pick.on{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 7%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 14%,transparent)}
.team-pick .dot{width:10px;height:10px;border-radius:50%;background:var(--tc);flex:0 0 auto}
.admin-pick{grid-column:1 / -1;justify-content:center}

.pass-row{margin-top:16px;display:grid;gap:9px}
.lbl{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
input[type=password],input[type=search],input[type=text]{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,23,42,.08)}

.btn{border:0;border-radius:12px;padding:13px 16px;font:inherit;font-weight:650;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:active{transform:translateY(1px)}
.btn.block{width:100%}
.link-btn{background:none;border:0;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}

.alert{border-radius:12px;padding:11px 13px;margin:12px 0;font-size:14px}
.alert.error{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}
.alert.info{background:#EFF6FF;color:#1E40AF;border:1px solid #BFDBFE}
code{background:rgba(15,23,42,.07);padding:1px 5px;border-radius:5px;font-size:.9em}

/* ---------- Topbar ---------- */
.topbar{background:var(--tc);color:#fff;position:sticky;top:0;z-index:30;
  padding-top:env(safe-area-inset-top)}
.topbar-in{max-width:960px;margin:0 auto;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .dot{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.85;flex:0 0 auto}
.who-name{font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-sub{font-size:12px;opacity:.75;line-height:1.3}
.top-actions{display:flex;gap:6px;flex:0 0 auto}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.15);
  color:#fff;text-decoration:none;font-size:17px;border:0;cursor:pointer;
}
.icon-btn:active{background:rgba(255,255,255,.28)}
.icon-btn.ghost{background:var(--line-2);color:var(--ink-2)}

/* ---------- Dashboard ---------- */
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;margin:14px 0}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.panel-head h2{font-size:14px;margin:0;letter-spacing:-.01em}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dash-card{border:1px solid var(--line);border-left:4px solid var(--tc);border-radius:11px;padding:11px 12px}
.dash-card h3{margin:0 0 7px;font-size:13px;font-weight:700}
.dash-line{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);padding:2px 0}
.dash-line b{color:var(--ink);font-variant-numeric:tabular-nums}
.bar{height:5px;border-radius:99px;background:var(--line-2);margin-top:7px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--tc);border-radius:99px}

/* ---------- Stats ---------- */
.stats{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.stats::-webkit-scrollbar{display:none}
.stat{
  background:var(--card);border-radius:12px;box-shadow:var(--shadow);
  padding:10px 13px;min-width:96px;flex:0 0 auto;cursor:pointer;border:1.5px solid transparent;
}
.stat.on{border-color:var(--ink)}
.stat b{display:block;font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px;color:var(--ink-2)}

/* ---------- Filters ---------- */
.filters{margin:10px 0 4px}
.search-row{position:relative;display:flex;gap:8px}
.search-row input{padding-right:40px}
#clearQ{position:absolute;right:5px;top:5px}
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.sel{
  flex:0 0 auto;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1.5px solid var(--line);border-radius:999px;padding:8px 28px 8px 13px;
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer;
}
.sel.active{border-color:var(--ink);background-color:#fff;font-weight:600}

/* ---------- List ---------- */
.list{display:grid;gap:10px;margin-top:10px}
.card{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:13px 14px;border-left:4px solid var(--tc);
}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-name{font-weight:700;font-size:15.5px;letter-spacing:-.01em;margin:0 0 2px}
.card-biz{font-size:13.5px;color:var(--ink-2);margin:0}
.card-meta{font-size:12px;color:var(--ink-3);margin-top:3px}
.sr-badge{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pill{font-size:11.5px;font-weight:650;padding:4px 9px;border-radius:999px;white-space:nowrap}
.card-actions{display:flex;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2)}
.mini{
  flex:1;text-align:center;border:1.5px solid var(--line);border-radius:10px;
  padding:8px;font-size:13px;font-weight:600;color:var(--ink-2);
  background:#fff;text-decoration:none;cursor:pointer;
}
.mini:active{background:var(--line-2)}
.mini.solid{background:var(--ink);color:#fff;border-color:var(--ink)}

.empty{text-align:center;color:var(--ink-3);padding:40px 20px;font-size:14px}

/* ---------- Bottom sheet ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:40;
  animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);
  border-radius:20px 20px 0 0;max-height:90vh;overflow-y:auto;
  box-shadow:0 -12px 40px rgba(15,23,42,.28);
  animation:up .22s cubic-bezier(.2,.8,.2,1);
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:9px auto 2px;position:sticky;top:0}
.sheet-body{padding:6px 16px 10px;max-width:640px;margin:0 auto}
.sheet-title{font-size:19px;font-weight:750;margin:8px 0 2px;letter-spacing:-.02em}
.sheet-sub{color:var(--ink-2);font-size:14px;margin:0 0 14px}

.field-set{display:grid;gap:11px;margin:14px 0 4px}
.field{display:grid;gap:5px}
.field label{font-size:11.5px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.field select{
  width:100%;appearance:none;border:1.5px solid var(--line);border-radius:11px;
  padding:12px 34px 12px 13px;font:inherit;font-weight:600;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23334155' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.field select.saving{opacity:.6}

.kv{display:grid;grid-template-columns:112px 1fr;gap:8px 12px;margin-top:16px;font-size:14px}
.kv dt{color:var(--ink-3);font-size:12.5px;padding-top:1px}
.kv dd{margin:0;word-break:break-word}
.kv dd a{color:#1D4ED8}
.sec-title{font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.06em;margin:20px 0 6px;padding-top:14px;border-top:1px solid var(--line-2)}
.chal{display:flex;flex-wrap:wrap;gap:6px}
.chal span{background:#FFF7ED;color:#9A3412;border:1px solid #FED7AA;font-size:12px;padding:4px 9px;border-radius:8px}
.about{background:var(--line-2);border-radius:11px;padding:11px 12px;font-size:13.5px;color:var(--ink-2);white-space:pre-wrap}
.sheet-cta{display:flex;gap:8px;margin:18px 0 6px;position:sticky;bottom:0;background:var(--card);padding:10px 0}
.stamp{font-size:11.5px;color:var(--ink-3);margin-top:12px;text-align:center}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:80;
  background:#0F172A;color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;
  font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:fade .15s
}
.toast.bad{background:var(--err)}

@media (min-width:640px){
  body{font-size:15.5px}
  .list{grid-template-columns:1fr 1fr}
  .sheet{left:50%;right:auto;transform:translateX(-50%);width:min(640px,100%);
    border-radius:20px 20px 0 0}
  @keyframes up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
}

/* ---------- Activity log (admin) ---------- */
.panel-head-actions{display:flex;gap:7px;align-items:center}
.sel.sm{padding:6px 26px 6px 11px;font-size:12.5px}
.panel-head-actions .icon-btn{width:32px;height:32px;font-size:15px}
.log-list{max-height:400px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.log-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:10px 2px;border-bottom:1px solid var(--line-2);
}
.log-row:last-child{border-bottom:0}
.log-lead{font-weight:650;font-size:14px;line-height:1.3}
.log-team{
  font-size:10.5px;font-weight:600;color:var(--ink-3);border:1px solid var(--line);
  border-radius:6px;padding:1px 5px;margin-left:4px;vertical-align:1px;
}
.log-change{margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.log-field{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.log-arrow{color:var(--ink-3)}
.log-meta{text-align:right;flex:0 0 auto;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.log-meta b{display:block;color:var(--ink-2);font-size:12px}
.log-empty{color:var(--ink-3);font-size:13.5px;padding:16px 2px;text-align:center}
@media (max-width:520px){
  .log-row{flex-direction:column;gap:4px}
  .log-meta{text-align:left}
  .log-meta b{display:inline;margin-right:6px}
}