:root{--bg:#0c1118;--surface:#16202e;--surface-2:#1e2a3a;--ink:#eef4f2;--muted:#9fb1c2;
  --soft:#6a7b8c;--line:rgba(255,255,255,.14);--accent:#1fb57a;--accent-soft:#7df0c0;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:radial-gradient(80% 50% at 50% -10%,rgba(31,181,122,.10),transparent 55%),var(--bg);
  color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;padding:0 1.4rem 1.4rem}
.wrap{max-width:64rem;margin:0 auto;padding-top:6.4rem}
.app{opacity:0}
.account-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1.25rem,5vw,4rem);background:rgba(11,9,23,.78);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-family:"Barlow Condensed",sans-serif;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.brand img{width:28px;height:28px}
.account-nav{display:flex;align-items:center;gap:1.25rem;color:var(--muted);font-weight:700;font-size:.9rem}
.account-nav a{text-decoration:none;color:inherit}
.account-nav a:hover{color:var(--ink)}
.account-nav a.active{color:var(--ink)}
.account-nav a.active::after{content:"";display:block;height:2px;margin-top:.25rem;border-radius:999px;background:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:999px;padding:.7rem 1.1rem;
  min-height:2.65rem;font-weight:800;text-decoration:none;cursor:pointer}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(255,255,255,.07)}
.linkbtn{color:var(--muted);font-weight:700;font-size:.9rem;background:none;border:0;cursor:pointer;font:inherit;padding:0}
.linkbtn:hover{color:var(--ink)}
h1{font-family:"Barlow Condensed",sans-serif;font-size:2rem;margin:0 0 .2rem}
.sub{color:var(--muted);margin:0 0 1.6rem}
.account-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:-.6rem 0 1.2rem}
.stack{display:grid;gap:1.1rem}
.stack > [data-account-section].hidden{display:none}
.panel{background:linear-gradient(180deg,var(--surface),#0e1622);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 .8rem}
.panel h2{font-family:"Barlow Condensed",sans-serif;font-size:1.2rem;margin:0;letter-spacing:.02em}
.panel h3{font-family:"Barlow Condensed",sans-serif;font-size:1.05rem;margin:0 0 .5rem;letter-spacing:.02em}
.mod{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.mod:last-child{border-bottom:0}
.mod a{color:var(--accent);font-weight:700;text-decoration:none}
.item{padding:.65rem 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item b{display:block}
.item small{color:var(--soft)}
.pill{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(31,181,122,.4);border-radius:999px;padding:.15rem .5rem}
.empty{color:var(--soft);font-size:.9rem}
.empty.small{font-size:.82rem;margin:0 0 .6rem}
.office-count{display:inline-flex;align-items:center;margin-right:.45rem;padding:.08rem .45rem;border:1px solid var(--line);border-radius:999px;color:var(--accent-soft);font-weight:800}
.cta{display:inline-block;margin-top:.4rem;padding:.6rem 1rem;border-radius:999px;background:linear-gradient(180deg,var(--accent-soft),var(--accent));color:#04241a;font-weight:800;text-decoration:none}
.cta.ghost{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink)}
.hidden{display:none}
.head-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
.receipt-block{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}

/* subscription state */
.sub-state{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.6rem}
.sub-state p{width:100%;margin:.2rem 0 0;color:var(--soft);font-size:.9rem}
.pill.on{color:var(--accent);border-color:rgba(31,181,122,.5)}
.pill.off{color:#f0a; color:#ff8a8a;border-color:rgba(255,138,138,.4)}
.pill.warn{color:#e9b949;border-color:rgba(233,185,73,.4)}
.linkbtn.danger{color:#ff8a8a}

/* offices */
.office{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line,#1b2636)}
.office:last-child{border-bottom:0}
.office-main b{display:block}
.office-main small{color:var(--soft);font-size:.82rem}
.office-btns{display:flex;gap:.5rem;flex-shrink:0}
.office-tag{margin-left:.5rem;padding:.05rem .4rem;border-radius:999px;border:1px solid var(--line,#1b2636);color:var(--soft);font-size:.72rem;text-transform:none;letter-spacing:0}
.office-edit{display:grid;gap:.55rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line,#1b2636)}
.office-edit label{display:grid;gap:.25rem;font-size:.82rem;font-weight:600}
.office-edit .req{color:var(--accent-2,#e9b949)}
.office-edit input{width:100%;padding:.5rem .6rem;border-radius:.5rem;border:1px solid var(--line-2,#23324a);background:var(--surface,#0e1622);color:var(--ink);font:inherit}
.office-edit input:focus{outline:2px solid var(--accent);outline-offset:1px}
.office-actions{display:flex;align-items:center;gap:.8rem}
.office-err{color:#ff8a8a;font-size:.85rem;margin:.1rem 0 0}

/* attendance register */
.csvlink{color:var(--accent);font-weight:700;font-size:.82rem;text-decoration:none;white-space:nowrap}
.csvlink:hover{text-decoration:underline}
.sess{border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;overflow:hidden}
.sess:last-child{margin-bottom:0}
.sess-head{display:flex;align-items:center;gap:.7rem;width:100%;padding:.7rem .85rem;background:none;border:0;
  color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.sess-head:hover{background:rgba(255,255,255,.03)}
.sess-head .caret{color:var(--soft);transition:transform .15s ease;flex:0 0 auto}
.sess.open .sess-head .caret{transform:rotate(90deg)}
.sess-head .meta{flex:1;min-width:0}
.sess-head .meta b{display:block;font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess-head .meta small{color:var(--soft);font-size:.8rem}
.sess-head .count{flex:0 0 auto;font-size:.78rem;font-weight:700;color:var(--accent);
  border:1px solid rgba(31,181,122,.4);border-radius:999px;padding:.12rem .55rem}
.sess-body{display:none;padding:.2rem .85rem .8rem;border-top:1px solid var(--line)}
.sess.open .sess-body{display:block}
.att{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.att:last-child{border-bottom:0}
.att .who b{font-weight:600;font-size:.9rem}
.att .who small{display:block;color:var(--soft);font-size:.78rem}
.att .when{color:var(--soft);font-size:.76rem;white-space:nowrap}
.sess-actions{display:flex;justify-content:flex-end;padding-top:.6rem}
.sess-actions .danger{margin-left:.8rem}

/* account dropdown mirrors the marketing/library header */
.acct,.acct-wrap{position:relative}
.acct-btn{display:flex;align-items:center;gap:.45rem;min-height:2.65rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.03);color:var(--ink);padding:.35rem .65rem .35rem .4rem;font:inherit;font-weight:800;cursor:pointer}
.acct-avatar{width:1.9rem;height:1.9rem;border-radius:999px;background:linear-gradient(180deg,var(--accent-soft),var(--accent));color:#04241a;
  display:grid;place-items:center;font-size:.82rem;font-weight:900}
.acct-name{max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-caret{color:var(--muted);transition:transform .15s ease}
.acct-wrap.open .acct-caret{transform:rotate(180deg)}
.acct-menu{display:none;position:absolute;right:0;top:calc(100% + .55rem);width:min(17rem,calc(100vw - 2rem));
  background:#101827;border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:.45rem;z-index:80}
.acct-wrap.open .acct-menu{display:flex;flex-direction:column}
.acct-head{padding:.65rem .7rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}
.acct-head b,.acct-head small{display:block}
.acct-head small{color:var(--soft);font-size:.78rem;overflow:hidden;text-overflow:ellipsis}
.acct-menu a,.acct-menu button{display:block;width:100%;padding:.58rem .7rem;border:0;background:transparent;color:var(--muted);
  text-align:left;border-radius:8px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.acct-menu a:hover,.acct-menu button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.acct-menu [data-acct-logout]{color:var(--accent-soft);margin-top:.2rem;border-top:1px solid var(--line);border-radius:0 0 8px 8px}
.app-footer{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:1.8rem 0 .3rem;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--soft);font-size:.82rem}
.app-footer a{color:var(--muted);font-weight:700;text-decoration:none}
.app-footer a:hover{color:var(--ink)}

/* account dialog */
.ned-dialog-backdrop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.25rem;background:rgba(3,7,12,.66)}
.ned-dialog-backdrop[hidden]{display:none}
.ned-dialog{width:min(27rem,100%);border:1px solid var(--line);border-radius:14px;background:#101827;color:var(--ink);
  box-shadow:0 14px 36px rgba(0,0,0,.38);padding:1.1rem;transform:translateY(0);animation:nedDialogIn .16s ease-out}
.ned-dialog h2{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1rem;line-height:1.3;margin:0 0 .35rem}
.ned-dialog p{margin:0;color:var(--muted);font-size:.9rem}
.ned-dialog-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1rem}
.ned-dialog-actions button{min-height:2.45rem;border-radius:999px;border:1px solid var(--line);padding:.55rem .9rem;background:rgba(255,255,255,.04);
  color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.ned-dialog-actions button:hover{background:rgba(255,255,255,.08)}
.ned-dialog-actions .primary{border-color:rgba(31,181,122,.55);background:linear-gradient(180deg,var(--accent-soft),var(--accent));color:#04241a}
.ned-dialog-actions .danger{border-color:rgba(255,138,138,.42);color:#ffd1d1;background:rgba(255,138,138,.09)}
@keyframes nedDialogIn{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.ned-dialog{animation:none}}
@media (max-width:760px){
  body{padding:0 .9rem 1rem}
  .wrap{padding-top:5.5rem}
  .account-header{padding:.7rem .9rem;gap:.65rem}
  .account-nav{display:none}
  .acct-name{display:none}
  .panel{padding:1rem}
  .panel-head{align-items:flex-start}
  .att{align-items:flex-start;flex-direction:column;gap:.15rem}
  .att .when{white-space:normal}
}