/* ===========================================================================
   Meet Hub — design system premium (HumAIn Noir & Or)
   =========================================================================== */
:root{
  --bg:#09090c; --bg2:#0d0d11; --panel:#131319; --panel-hi:#16161d; --card:#17171f;
  --line:rgba(200,164,92,.16); --line-soft:rgba(255,255,255,.055); --line-strong:rgba(200,164,92,.35);
  --gold:#c8a45c; --gold2:#e8cf8f; --gold-deep:#a8843c;
  --grad-gold:linear-gradient(180deg,#e3c179,#b7893c);
  --text:#efe9dc; --muted:#948f7e; --muted2:#5f5b50;
  --danger:#e0906c; --ok:#8fbf9c; --info:#8aa6cc;
  --shadow:0 18px 40px -22px rgba(0,0,0,.8);
  --shadow-sm:0 8px 20px -14px rgba(0,0,0,.7);
  --r:13px; --r-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 600px at 82% -8%, rgba(200,164,92,.06), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(120,140,180,.05), transparent 55%),
    var(--bg);
  color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13.5px; line-height:1.55; letter-spacing:.1px;
}
.hidden{display:none!important}
.muted{color:var(--muted)}
.serif,.logo,h1,h2,h3{font-family:"Iowan Old Style",Georgia,"Times New Roman",serif}
::selection{background:rgba(200,164,92,.28);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#22222b;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2c2c37}

/* Logo */
.logo{font-size:17px;font-weight:600;letter-spacing:.3px}
.logo b{color:var(--gold2)}
.logo span{color:var(--muted);font-size:12.5px;font-family:Georgia,serif}

/* Buttons */
.btn{position:relative;background:#1c1c25;color:var(--text);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:9px 15px;cursor:pointer;font-size:13px;transition:all .16s ease;
  font-family:inherit}
.btn:hover{border-color:var(--line);background:#20202a;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.gold{background:var(--grad-gold);color:#1c1305;border:0;font-weight:700;
  box-shadow:0 8px 22px -12px rgba(200,164,92,.7), inset 0 1px 0 rgba(255,255,255,.25)}
.btn.gold:hover{filter:brightness(1.06);box-shadow:0 12px 26px -12px rgba(200,164,92,.8)}
.btn.ghost{background:transparent;border-color:var(--line-soft)}
.btn.sm{padding:7px 12px;font-size:12px}
.btn.big{width:100%;padding:13px;font-size:14px;letter-spacing:.3px}
.err{color:var(--danger);font-size:12px;margin-top:8px;min-height:16px}

/* Inputs */
input,select{font-family:inherit}
input:focus,select:focus{outline:none}
.login-card input,.form input,.form select,label input,.dayinput{
  background:#0d0d12;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:10px 11px;color:var(--text);font-size:13px;transition:border-color .16s,box-shadow .16s;width:100%}
.login-card input:focus,.form input:focus,.form select:focus,label input:focus,.dayinput:focus{
  border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(200,164,92,.1)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}

/* ---------- Login ---------- */
.login{display:grid;place-items:center;height:100vh;padding:20px}
.login-card{width:360px;background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:30px 28px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04)}
.login-card .logo{font-size:22px}
.login-card p{margin:8px 0 22px;font-size:12.5px}
.login-card .btn{width:100%;margin-top:4px}
.demo{font-size:11px;color:var(--muted);margin-top:18px;line-height:1.6;padding-top:16px;border-top:1px solid var(--line-soft)}
.demo b{color:var(--gold2)}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:13px 26px;
  border-bottom:1px solid var(--line);background:rgba(11,11,15,.86);backdrop-filter:blur(12px)}
.tabs{display:flex;gap:3px}
.tab{background:transparent;border:0;color:var(--muted);padding:8px 15px;cursor:pointer;border-radius:var(--r-sm);
  font-size:13.5px;transition:all .15s;font-family:inherit}
.tab:hover{color:var(--text)}
.tab.on{color:var(--gold2);background:rgba(200,164,92,.11)}
.spacer{flex:1}
.online{font-size:11.5px;color:var(--ok);display:flex;align-items:center;gap:5px}
.me{font-size:12.5px;color:var(--muted)}
.role{background:rgba(200,164,92,.14);color:var(--gold2);padding:3px 9px;border-radius:6px;font-size:10.5px;
  margin-left:5px;text-transform:uppercase;letter-spacing:.8px}
.tab-body{padding:22px 26px 48px;max-width:1400px;margin:0 auto}

/* ---------- Sub-tabs ---------- */
.subtabs{display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--line-soft)}
.subtab{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:10px 16px;cursor:pointer;font-size:13px;margin-bottom:-1px;transition:all .15s;font-family:inherit}
.subtab:hover{color:var(--text)}
.subtab.on{color:var(--gold2);border-bottom-color:var(--gold)}

/* ---------- Layout & cards ---------- */
.config-grid{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
.config-main{min-width:0}
.card{background:linear-gradient(180deg,var(--panel-hi),var(--panel));border:1px solid var(--line-soft);
  border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm)}
.subpanel .card{max-width:780px}
.card h3{font-size:15px;margin-bottom:15px;font-weight:600;letter-spacing:.2px;display:flex;align-items:baseline;gap:8px}
.count{color:var(--muted);font-weight:400;font-size:12px;font-family:-apple-system,sans-serif}
label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:12px;letter-spacing:.3px}
label input{margin-top:5px}
.row{display:flex;gap:10px}.row>*{flex:1}
.form{border-top:1px solid var(--line-soft);margin-top:16px;padding-top:16px;display:flex;flex-direction:column;gap:9px}
.form input,.form select{font-size:12.5px}
.mini{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-top:5px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:11.5px;padding:5px 11px;border-radius:16px;border:1px solid var(--line-soft);
  cursor:pointer;user-select:none;color:var(--muted);transition:all .14s}
.chip:hover{border-color:var(--line);color:var(--text)}
.chip.on{background:rgba(200,164,92,.16);border-color:var(--line-strong);color:var(--gold2)}

/* List items */
.item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.item:last-of-type{border-bottom:0}
.item .nm{font-size:13.5px}
.item .sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.acts{margin-left:auto;display:flex;gap:14px;align-items:center}
.acts .edit{color:var(--muted);cursor:pointer;font-size:11.5px;transition:color .14s}
.acts .edit:hover{color:var(--gold2)}
.acts .x{color:var(--muted2);cursor:pointer;font-size:16px;line-height:1;transition:color .14s}
.acts .x:hover{color:var(--danger)}
.tag{font-size:10px;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.05);color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px}
.dayinput{width:250px}

/* Side column */
.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:80px}
.summary{margin-top:14px;font-size:12px}
.summary .ok{color:var(--ok);font-weight:600}
.summary .bad{color:var(--danger);font-weight:600}
.summary table{width:100%;border-collapse:collapse;margin-top:10px}
.summary td{padding:4px 0;border-bottom:1px solid var(--line-soft)}
.summary td.r{text-align:right;color:var(--muted)}
.activity{font-size:11.5px;line-height:1.65}
.activity .a{padding:5px 0;border-bottom:1px solid var(--line-soft);color:var(--muted)}
.activity .a:last-child{border-bottom:0}
.activity .a b{color:var(--text);font-weight:600}

/* Planning frame */
iframe{width:100%;height:calc(100vh - 140px);border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--bg);box-shadow:var(--shadow-sm)}

/* Motion */
.subpanel,.tab-body{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.cbadges{display:flex;flex-direction:column}
.cbadge{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.cbadge:last-child{border-bottom:0}
.cbadge .st{margin-left:auto;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px}
.cbadge .st.on{color:var(--ok)}
.cbadge .st.off{color:var(--muted)}
.switch{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;color:var(--text)}
.switch input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}

@media(max-width:1000px){.config-grid{grid-template-columns:1fr}.side{position:static}}