/* ============================================================
   VINAYAKAM STUDIOS — Access Control UX
   Builds on brand.css (tokens, type, buttons)
   ============================================================ */

body{background:var(--paper);min-height:100vh;}

/* ---------- Screen system ---------- */
.screen{display:none;min-height:100vh;}
.screen.active{display:block;}
.screen.is-split{display:none;}
.screen.is-split.active{display:grid;}

/* ============================================================
   SPLIT AUTH LAYOUT  (sign-in / verify / invite)
   ============================================================ */
.auth{grid-template-columns:1.05fr 1fr;min-height:100vh;}
@media(max-width:900px){.auth{grid-template-columns:1fr;}}

/* left brand panel */
.auth-brand{
  background:var(--teal-900);color:#EAF3F0;position:relative;overflow:hidden;
  padding:54px 60px;display:flex;flex-direction:column;
}
.auth-brand::after{content:"";position:absolute;right:-160px;top:-120px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(30,157,137,.30),transparent 60%);pointer-events:none;}
@media(max-width:900px){.auth-brand{padding:40px 34px;min-height:280px;}}
.ab-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
.ab-mid{margin-top:auto;margin-bottom:auto;position:relative;z-index:2;max-width:30ch;}
.ab-mid h2{color:#fff;font-size:clamp(30px,3.4vw,44px);line-height:1.08;}
.ab-mid h2 .gold{color:var(--gold-soft);font-style:italic;font-weight:400;}
.ab-mid p{color:#B9D2CC;margin-top:20px;font-size:16.5px;line-height:1.6;}
.ab-feats{margin-top:36px;display:flex;flex-direction:column;gap:16px;}
.ab-feat{display:flex;gap:14px;align-items:flex-start;}
.ab-feat .fi{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:var(--gold-soft);}
.ab-feat .fi svg{width:17px;height:17px;}
.ab-feat .ft{font-weight:600;font-size:15px;color:#fff;}
.ab-feat .fd{font-size:13.5px;color:#9DB5AF;margin-top:3px;line-height:1.5;}
.ab-foot{position:relative;z-index:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:#7E948E;margin-top:40px;}

/* right form panel */
.auth-form{display:flex;align-items:center;justify-content:center;padding:54px 40px;position:relative;}
.auth-card{width:100%;max-width:404px;}
.auth-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-600);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.auth-eyebrow::before{content:"";width:20px;height:1.5px;background:var(--gold);}
.auth-card h1{font-size:34px;line-height:1.05;margin-bottom:12px;}
.auth-card .sub{color:var(--muted);font-size:15.5px;line-height:1.55;margin-bottom:30px;}

.fld{margin-bottom:18px;}
.fld label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.inp{width:100%;padding:14px 16px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--white);
  font-family:var(--sans);font-size:15.5px;color:var(--ink);transition:.18s;}
.inp::placeholder{color:var(--muted-2);}
.inp:focus{outline:none;border-color:var(--teal-600);box-shadow:0 0 0 3px rgba(20,121,106,.12);}
.inp.err{border-color:#C0573F;box-shadow:0 0 0 3px rgba(192,87,63,.12);}
.btn-block{width:100%;justify-content:center;}
.auth-alt{margin-top:22px;font-size:14px;color:var(--muted);text-align:center;}
.auth-alt a,.linkish{color:var(--teal-700);font-weight:600;cursor:pointer;}
.auth-alt a:hover,.linkish:hover{color:var(--teal-800);text-decoration:underline;}
.formnote{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.5;display:flex;gap:9px;align-items:flex-start;}
.formnote svg{width:16px;height:16px;flex:none;color:var(--teal-600);margin-top:1px;}

/* inline error / info banners */
.banner{padding:12px 15px;border-radius:11px;font-size:13.5px;line-height:1.5;margin-bottom:18px;display:flex;gap:10px;align-items:flex-start;}
.banner svg{width:17px;height:17px;flex:none;margin-top:1px;}
.banner.bad{background:#FBEDEA;color:#9A3328;border:1px solid #E7C3BC;}
.banner.good{background:var(--teal-100);color:var(--teal-800);border:1px solid rgba(20,121,106,.2);}
.banner.info{background:#FBF6E7;color:#8A6D22;border:1px solid #E8D9A6;}

/* ---------- OTP ---------- */
.otp{display:flex;gap:10px;margin-bottom:8px;}
.otp input{flex:1;aspect-ratio:1;min-width:0;text-align:center;font-family:var(--mono);font-size:24px;font-weight:600;
  color:var(--ink);border:1.5px solid var(--line-strong);border-radius:12px;background:var(--white);transition:.15s;}
.otp input:focus{outline:none;border-color:var(--teal-600);box-shadow:0 0 0 3px rgba(20,121,106,.12);}
.otp input.filled{border-color:var(--teal-500);background:var(--teal-100);}
.resend{font-size:13.5px;color:var(--muted);margin-top:18px;text-align:center;}
.resend b{color:var(--ink);}

/* dev preview chip — surfaces the "emailed" code since there's no mail server */
.devcode{margin-top:22px;border:1px dashed var(--gold);background:#FBF6E7;border-radius:12px;padding:14px 16px;}
.devcode .dl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#A07D1E;display:flex;align-items:center;gap:8px;}
.devcode .dc{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.3em;color:var(--teal-800);margin-top:6px;}
.devcode .dn{font-size:11.5px;color:#8A6D22;margin-top:6px;line-height:1.45;}

/* ============================================================
   STUDIO HUB  (unlocked)
   ============================================================ */
.hub{background:var(--paper);}
.appbar{height:68px;background:linear-gradient(#0A4239,#073229);display:flex;align-items:center;padding:0 30px;gap:18px;position:sticky;top:0;z-index:40;}
.appbar .logo .name{color:#fff;font-size:18px;}
.appbar .logo .sub{color:var(--teal-300);}
.appbar .ab-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#0A4239;background:var(--gold);padding:4px 10px;border-radius:999px;}
.appbar .ab-right{margin-left:auto;display:flex;align-items:center;gap:18px;}
.appbar .ab-link{color:#9DB5AF;font-size:14px;font-weight:500;}
.appbar .ab-link:hover{color:#fff;}
.who{display:flex;align-items:center;gap:10px;flex:none;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--teal-600);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13.5px;font-family:var(--sans);flex:none;}
.who .wn{color:#fff;font-size:13.5px;font-weight:600;line-height:1.25;white-space:nowrap;}
.who .wr{color:var(--teal-300);font-size:11px;font-family:var(--mono);letter-spacing:.06em;white-space:nowrap;line-height:1.2;}
.appbar .ab-link{white-space:nowrap;}

.hub-body{max-width:1000px;margin:0 auto;padding:60px 32px 80px;}
.hub-hi{font-size:clamp(30px,4vw,44px);}
.hub-hi .gold{color:var(--gold);font-style:italic;font-weight:400;}
.hub-sub{color:var(--muted);font-size:17px;margin-top:14px;max-width:54ch;}
.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;}
@media(max-width:760px){.studio-grid{grid-template-columns:1fr;}}
.studio-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;
  display:flex;flex-direction:column;gap:14px;transition:.25s;position:relative;overflow:hidden;}
.studio-card.open:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent;}
.studio-card .sc-ico{width:50px;height:50px;border-radius:13px;background:var(--teal-100);display:flex;align-items:center;justify-content:center;color:var(--teal-700);}
.studio-card .sc-ico svg{width:26px;height:26px;}
.studio-card h3{font-size:23px;}
.studio-card p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.6;}
.studio-card .sc-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--teal-700);font-size:15px;}
.studio-card .sc-go .arr{transition:transform .22s;}
.studio-card.open:hover .sc-go .arr{transform:translateX(4px);}
.studio-card.locked{opacity:.72;}
.studio-card.locked .sc-ico{background:rgba(19,32,29,.06);color:var(--muted-2);}
.sc-lock{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);
  background:rgba(19,32,29,.05);padding:6px 11px;border-radius:999px;margin-top:auto;width:fit-content;}
.sc-lock svg{width:13px;height:13px;}

/* ============================================================
   LOCKED GATE  (overlay shown on a studio when not authed)
   ============================================================ */
.gate{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--teal-950);}
.gate-blur{position:absolute;inset:0;filter:blur(9px) saturate(.85);opacity:.5;transform:scale(1.06);pointer-events:none;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,#0A4239,#06302C 60%,#052420);}
.gate-blur::before,.gate-blur::after{content:"";position:absolute;background:rgba(255,255,255,.06);border-radius:18px;}
.gate-blur::before{left:7%;top:14%;width:30%;bottom:14%;}
.gate-blur::after{right:7%;top:10%;left:42%;height:42%;}
.gate-card{position:relative;z-index:2;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:440px;margin:24px;padding:44px 42px;text-align:center;}
.gate-lockring{width:66px;height:66px;border-radius:50%;background:var(--teal-100);display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;color:var(--teal-700);}
.gate-lockring svg{width:30px;height:30px;}
.gate-card .glabel{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.gate-card h2{font-size:28px;margin:12px 0 12px;}
.gate-card p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:26px;}
.gate-actions{display:flex;flex-direction:column;gap:12px;}
.gate-foot{margin-top:24px;font-size:12.5px;color:var(--muted-2);}

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.admin-body{max-width:1140px;margin:0 auto;padding:46px 32px 90px;}
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px;}
.admin-head h1{font-size:clamp(28px,3.4vw,40px);}
.admin-head .lead{color:var(--muted);font-size:16px;margin-top:10px;max-width:52ch;}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px;}
@media(max-width:760px){.stat-row{grid-template-columns:1fr 1fr;}}
.stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;}
.stat .sn{font-family:var(--serif);font-size:34px;color:var(--ink);line-height:1;}
.stat .sl{font-size:13px;color:var(--muted);margin-top:8px;}
.stat .sn .acc{color:var(--gold);}

.panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;margin-bottom:24px;}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.panel-h .pt{font-family:var(--serif);font-size:21px;}
.panel-h .ps{font-size:13.5px;color:var(--muted);margin-top:4px;}

/* invite form */
.invite-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.invite-row .fld{margin:0;flex:1;min-width:200px;}
.invite-row .fld.sm{flex:0 0 190px;min-width:160px;}
.sel{width:100%;padding:13px 15px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--white);
  font-family:var(--sans);font-size:15px;color:var(--ink);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6E69' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px;}
.sel:focus{outline:none;border-color:var(--teal-600);box-shadow:0 0 0 3px rgba(20,121,106,.12);}
.access-pick{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap;}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft);cursor:pointer;user-select:none;}
.chk input{width:18px;height:18px;accent-color:var(--teal-700);}

/* requests (pending approval) */
.req{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line);}
.req:first-of-type{border-top:none;}
.req .rmeta{flex:1;min-width:0;}
.req .rn{font-weight:600;font-size:15px;}
.req .re{font-size:13px;color:var(--muted);font-family:var(--mono);}
.req .rwhen{font-size:12.5px;color:var(--muted-2);}
.req-actions{display:flex;gap:9px;}

/* user table */
.utable{width:100%;border-collapse:collapse;}
.utable th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:500;padding:0 14px 12px;border-bottom:1px solid var(--line);}
.utable td{padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
.utable tr:last-child td{border-bottom:none;}
.uperson{display:flex;align-items:center;gap:12px;min-width:0;}
.uperson .avatar{background:var(--teal-700);}
.uperson .un{font-weight:600;font-size:14.5px;line-height:1.2;}
.uperson .ue{font-size:12.5px;color:var(--muted);font-family:var(--mono);margin-top:2px;}
.role-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:5px 11px;border-radius:999px;text-transform:uppercase;}
.role-admin{background:#EFE3C4;color:#7A5C13;}
.role-staff{background:var(--teal-100);color:var(--teal-800);}
.role-collab{background:rgba(19,32,29,.06);color:var(--ink-soft);}
.acc-toggles{display:flex;gap:8px;flex-wrap:wrap;}
.acc-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;
  border:1.5px solid var(--line-strong);background:var(--white);color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap;}
.acc-pill .dotp{width:7px;height:7px;border-radius:50%;background:var(--muted-2);}
.acc-pill.on{border-color:var(--teal-500);background:var(--teal-100);color:var(--teal-800);}
.acc-pill.on .dotp{background:var(--teal-500);}
.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;}
.status .sdot{width:8px;height:8px;border-radius:50%;}
.status.active .sdot{background:var(--teal-500);}
.status.invited .sdot{background:var(--gold);}
.status.suspended .sdot{background:#C0573F;}
.status.active{color:var(--teal-700);}
.status.invited{color:#A07D1E;}
.status.suspended{color:#C0573F;}
.row-actions{display:flex;gap:6px;justify-content:flex-end;}
.iconbtn{background:none;border:1px solid var(--line-strong);border-radius:9px;width:34px;height:34px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--muted);transition:.15s;}
.iconbtn:hover{border-color:var(--teal-600);color:var(--teal-700);background:var(--teal-100);}
.iconbtn.danger:hover{border-color:#C0573F;color:#C0573F;background:#FBEDEA;}
.iconbtn svg{width:16px;height:16px;}
.btn-sm{padding:9px 16px;font-size:13.5px;}

@media(max-width:820px){
  .utable thead{display:none;}
  .utable,.utable tbody,.utable tr,.utable td{display:block;width:100%;}
  .utable tr{border:1px solid var(--line);border-radius:14px;padding:8px 6px;margin-bottom:14px;background:var(--white);}
  .utable td{border-bottom:none;padding:9px 14px;}
  .row-actions{justify-content:flex-start;}
}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:13px 22px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;transition:.3s;z-index:200;box-shadow:var(--shadow-lg);
  pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(6,48,44,.42);backdrop-filter:blur(3px);z-index:150;display:none;
  align-items:center;justify-content:center;padding:24px;}
.modal-bg.show{display:flex;}
.modal{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:460px;padding:32px 34px;}
.modal h3{font-size:23px;margin-bottom:10px;}
.modal p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:22px;}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;}
.invite-link-box{display:flex;gap:10px;margin-top:8px;}
.invite-link-box .inp{font-family:var(--mono);font-size:13px;}

/* ---------- prototype screen switcher ---------- */
.proto-switch{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:300;
  background:rgba(8,33,29,.92);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:7px 8px 7px 16px;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow-lg);max-width:94vw;overflow-x:auto;}
.proto-switch .pl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7FC6B8;flex:none;margin-right:4px;}
.proto-switch button{flex:none;background:transparent;border:none;color:#9DB5AF;font-family:var(--sans);font-size:12.5px;font-weight:600;
  padding:7px 13px;border-radius:999px;transition:.15s;white-space:nowrap;}
.proto-switch button:hover{color:#fff;background:rgba(255,255,255,.08);}
.proto-switch button.on{background:var(--gold);color:var(--teal-950);}
@media print{.proto-switch{display:none;}}