/* Cross-document view transitions — this is still a real full-page
   navigation (every sidebar click stays a normal <a href>, nothing about
   the app's logic changes), but supporting browsers (current Chrome/Edge;
   Safari/Firefox just ignore this and fall back to today's hard cut, no
   regression either way) cross-fade the old page into the new one instead
   of a jarring white flash. See #nav-progress in app.js for the loading
   affordance layered on top of the same click. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .16s;
}

#nav-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--violet),var(--teal));
  box-shadow:0 0 8px -1px var(--violet);
  transition:width .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
  opacity:0;pointer-events:none;
}
#nav-progress.active{opacity:1;}

:root{
  --bg:#f7f6fb;
  --surface:#ffffff;
  --surface-2:#f1effa;
  --ink:#1d1836;
  --muted:#6f6a85;
  --border:#e5e2f0;
  --violet:#6c53e6; --violet-soft:#efecfd;
  --teal:#0fa79b; --teal-soft:#e2f6f4;
  --amber:#e8930c; --amber-soft:#fdf1dd;
  --rose:#e63e68; --rose-soft:#fde8ee;
  --sky:#2384d6; --sky-soft:#e3f1fc;
  --emerald:#119e68; --emerald-soft:#e1f5ec;
  --shadow:0 2px 6px rgba(29,24,54,.06),0 12px 32px -12px rgba(29,24,54,.12);
  --shadow-lift:0 4px 10px rgba(29,24,54,.08),0 20px 44px -12px rgba(108,83,230,.22);
  --sidebar-w:248px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131022; --surface:#1c1830; --surface-2:#241f3d; --ink:#eceaf6; --muted:#9d97b8;
    --border:#312a52; --violet:#9b87ff; --violet-soft:rgba(155,135,255,.14);
    --teal:#3fd6c8; --teal-soft:rgba(63,214,200,.13);
    --amber:#ffb547; --amber-soft:rgba(255,181,71,.13);
    --rose:#ff6d92; --rose-soft:rgba(255,109,146,.13);
    --sky:#5db4f5; --sky-soft:rgba(93,180,245,.13);
    --emerald:#3ecf94; --emerald-soft:rgba(62,207,148,.13);
    --shadow:0 2px 6px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.5);
    --shadow-lift:0 4px 10px rgba(0,0,0,.35),0 20px 44px -12px rgba(155,135,255,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#131022; --surface:#1c1830; --surface-2:#241f3d; --ink:#eceaf6; --muted:#9d97b8;
  --border:#312a52; --violet:#9b87ff; --violet-soft:rgba(155,135,255,.14);
  --teal:#3fd6c8; --teal-soft:rgba(63,214,200,.13);
  --amber:#ffb547; --amber-soft:rgba(255,181,71,.13);
  --rose:#ff6d92; --rose-soft:rgba(255,109,146,.13);
  --sky:#5db4f5; --sky-soft:rgba(93,180,245,.13);
  --emerald:#3ecf94; --emerald-soft:rgba(62,207,148,.13);
  --shadow:0 2px 6px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.5);
  --shadow-lift:0 4px 10px rgba(0,0,0,.35),0 20px 44px -12px rgba(155,135,255,.28);
}
:root[data-theme="light"]{
  --bg:#f7f6fb; --surface:#ffffff; --surface-2:#f1effa; --ink:#1d1836; --muted:#6f6a85;
  --border:#e5e2f0; --violet:#6c53e6; --violet-soft:#efecfd;
  --teal:#0fa79b; --teal-soft:#e2f6f4;
  --amber:#e8930c; --amber-soft:#fdf1dd;
  --rose:#e63e68; --rose-soft:#fde8ee;
  --sky:#2384d6; --sky-soft:#e3f1fc;
  --emerald:#119e68; --emerald-soft:#e1f5ec;
  --shadow:0 2px 6px rgba(29,24,54,.06),0 12px 32px -12px rgba(29,24,54,.12);
  --shadow-lift:0 4px 10px rgba(29,24,54,.08),0 20px 44px -12px rgba(108,83,230,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
a{color:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;}
.code-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--violet-soft);color:var(--violet);
  border:none;border-radius:999px;padding:3px 10px 3px 8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.code-chip svg{width:11px;height:11px;flex:none;opacity:.85;}
.code-chip:hover{background:var(--violet);color:#fff;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px;}

/* ---------- SIDEBAR LAYOUT ---------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:40;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:18px 14px;gap:4px;overflow-y:auto;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  /* Named so cross-document view transitions (see @view-transition above)
     treat the sidebar as the SAME persisting element across a navigation
     instead of cross-fading it along with everything else — it's visually
     identical page to page (bar the active-link highlight and badge
     counts), so without this it was flashing out/in on every click even
     though nothing about it actually changed. */
  view-transition-name: app-sidebar;
}
.sidebar .brand{
  display:flex;align-items:center;gap:8px;
  font-weight:900;font-size:1.15rem;letter-spacing:-.01em;
  padding:6px 10px 18px;
}
.sidebar .hello{
  padding:0 10px 16px;
  margin-top:-10px;
  font-size:.92rem;font-weight:600;color:var(--muted);
}
.sidebar .hello .wave{display:inline-block;animation:waveHand 2.4s ease-in-out infinite;transform-origin:70% 70%;}
.sidebar .hello .grad{
  font-weight:800;
  background:linear-gradient(94deg,var(--violet),var(--teal));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
@keyframes waveHand{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.sidebar .brand .grad{
  background:linear-gradient(94deg,var(--violet),var(--teal));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.sidebar .brand svg{width:22px;height:22px;color:var(--violet);}
.sidebar .brand .role{font-size:.65rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-left:2px;align-self:flex-start;margin-top:3px;}
@keyframes navIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.side-link{
  --c:var(--violet);--cs:var(--violet-soft);
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:11px;
  font-size:.88rem;font-weight:700;color:var(--muted);
  text-decoration:none;transition:background .18s ease,color .18s ease;
  position:relative;
  opacity:0;animation:navIn .4s cubic-bezier(.2,.8,.2,1) forwards;
}
.side-link svg{width:18px;height:18px;flex:none;color:var(--c);opacity:.75;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;}
.side-link:hover{background:var(--cs);color:var(--c);}
.side-link:hover svg{transform:scale(1.18) rotate(-8deg);opacity:1;}
.side-link.active{background:var(--cs);color:var(--c);}
.side-link.active svg{opacity:1;}
.side-link.active::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;
  border-radius:0 4px 4px 0;background:var(--c);
}
.side-link .badge{
  margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--rose);color:#fff;font-size:.68rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.side-sep{height:1px;background:var(--border);margin:10px 8px;}
.side-group{--c:var(--violet);--cs:var(--violet-soft);}
.side-group-head{
  width:100%;display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:11px;border:none;background:none;cursor:pointer;
  font-size:.88rem;font-weight:700;color:var(--muted);
  font-family:inherit;text-align:left;transition:background .18s ease,color .18s ease;
}
.side-group-head svg:first-child{width:18px;height:18px;flex:none;color:var(--c);opacity:.75;}
.side-group-head:hover{background:var(--cs);color:var(--c);}
.side-group-head .chev{width:15px;height:15px;margin-left:auto;flex:none;opacity:.85;transition:transform .2s ease;transform:rotate(-90deg);}
.side-group.expanded .side-group-head .chev{transform:rotate(0deg);}
.side-group-body{display:none;flex-direction:column;gap:2px;padding-left:14px;margin-top:2px;}
.side-group.expanded .side-group-body{display:flex;}
@keyframes skelPulse{0%,100%{opacity:.35}50%{opacity:.8}}
.skel{animation:skelPulse 1.1s ease-in-out infinite;}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;}
.saldo-chip{
  display:flex;align-items:center;gap:8px;
  background:var(--amber-soft);color:var(--amber);
  padding:10px 12px;border-radius:11px;font-weight:800;font-size:.88rem;
  text-decoration:none;transition:transform .18s ease;
}
.saldo-chip:hover{transform:translateY(-1px);}
.saldo-chip svg{width:17px;height:17px;flex:none;}
.saldo-chip .lbl{display:block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.75;}
.bell-btn{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;color:var(--muted);
  font-size:.85rem;font-weight:700;text-align:left;
  transition:background .16s ease,color .16s ease;
}
.bell-btn:hover{background:var(--surface-2);color:var(--ink);}
.bell-btn svg{width:17px;height:17px;flex:none;}
.bell-badge{
  margin-left:auto;min-width:19px;height:19px;padding:0 5px;
  background:var(--rose);color:#fff;border-radius:999px;font-size:.68rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.logout-btn{
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:1px solid var(--border);border-radius:11px;padding:10px 12px;
  cursor:pointer;font-weight:700;font-size:.85rem;color:var(--muted);text-align:left;
}
.logout-btn:hover{background:var(--rose-soft);color:var(--rose);border-color:transparent;}
.logout-btn svg{width:16px;height:16px;flex:none;}
.install-btn{
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:1px solid var(--border);border-radius:11px;padding:10px 12px;
  cursor:pointer;font-weight:700;font-size:.85rem;color:var(--muted);text-align:left;
}
.install-btn:hover{background:var(--violet-soft);color:var(--violet);border-color:transparent;}
.install-btn svg{width:16px;height:16px;flex:none;}

/* notification panel (bell dropdown) */
.notif-panel{
  position:fixed;left:calc(var(--sidebar-w) + 10px);bottom:18px;z-index:60;
  width:330px;max-height:65vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-lift);padding:14px;
  animation:pop .22s cubic-bezier(.2,.8,.2,1);
}
.notif-panel h4{margin:2px 0 10px;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;justify-content:space-between;}
.notif-close{border:none;background:none;padding:2px;cursor:pointer;color:var(--muted);display:flex;}
.notif-close svg{width:15px;height:15px;}
.notif-close:hover{color:var(--ink);}
.notif-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px;border-radius:10px;font-size:.83rem;
  border-left:3px solid var(--c,var(--violet));background:var(--surface-2);
  margin-bottom:8px;
}
.notif-item svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--c,var(--violet));}
.notif-empty{color:var(--muted);font-size:.85rem;text-align:center;padding:14px 0;}

/* content area next to sidebar */
.main{margin-left:var(--sidebar-w);min-height:100vh;}
.page{max-width:1120px;margin:0 auto;padding:30px 28px 90px;}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:24px;}
.page-head h1{margin:0 0 4px;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;}
.page-head h1 svg{width:24px;height:24px;color:var(--violet);}
.page-head p{margin:0;color:var(--muted);font-size:.9rem;}

/* Shared tab bar for the merged Settings pages (Currency Markup/Manage
   Users/Manage Roles/Email Templates/API & Webhooks) — one sidebar entry,
   switching between them happens here instead. */
.settings-tabs{display:flex;gap:4px;margin:-6px 0 24px;border-bottom:1px solid var(--border);overflow-x:auto;}
.settings-tab{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:.86rem;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;transition:color .15s,border-color .15s;}
.settings-tab svg{width:15px;height:15px;}
.settings-tab:hover{color:var(--ink);}
.settings-tab.active{color:var(--violet);border-bottom-color:var(--violet);}

/* mobile top bar + drawer */
.mobile-bar{
  display:none;position:sticky;top:0;z-index:30;
  align-items:center;gap:12px;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:12px 16px;box-shadow:var(--shadow);
  view-transition-name: app-mobile-bar; /* same reasoning as .sidebar above */
}
.mobile-bar .brand{font-weight:900;display:flex;align-items:center;gap:7px;}
.mobile-bar .brand svg{width:19px;height:19px;color:var(--violet);}
.hamburger{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.hamburger svg{width:19px;height:19px;}
.scrim{position:fixed;inset:0;background:rgba(20,15,40,.45);z-index:35;display:none;}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lift);}
  body.nav-open .sidebar{transform:none;}
  body.nav-open .scrim{display:block;}
  .main{margin-left:0;}
  .mobile-bar{display:flex;}
  .notif-panel{left:12px;right:12px;width:auto;bottom:12px;}
  .page{padding:22px 16px 80px;}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  border:none;border-radius:11px;padding:10px 18px;font-weight:700;font-size:.88rem;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
  text-decoration:none;
}
.btn svg{width:16px;height:16px;}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 6px 16px -6px rgba(108,83,230,.5);}
.btn-primary:hover:not(:disabled){box-shadow:0 8px 20px -6px rgba(108,83,230,.6);transform:translateY(-1px);}
.btn-ghost{background:var(--surface-2);color:var(--ink);}
.btn-ghost:hover:not(:disabled){background:var(--border);}
.btn-success{background:var(--emerald);color:#fff;}
.btn-danger{background:var(--rose);color:#fff;}
.btn-sm{padding:7px 12px;font-size:.8rem;border-radius:9px;}

/* ---------- CARDS ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:20px;box-shadow:var(--shadow);
}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{
  --c:var(--violet);--cs:var(--violet-soft);
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
  transition:transform .2s ease;
}
.stat-card:hover{transform:translateY(-3px);}
.stat-card .ic{width:38px;height:38px;border-radius:11px;background:var(--cs);color:var(--c);display:flex;align-items:center;justify-content:center;}
.stat-card .ic svg{width:20px;height:20px;}
.stat-card .val{font-size:1.4rem;font-weight:900;letter-spacing:-.02em;}
.stat-card .lbl{font-size:.78rem;color:var(--muted);font-weight:600;}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.ev-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;
}
.ev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.ev-card .top{height:6px;background:var(--c,var(--violet));}
.ev-card .poster{
  height:150px;background:linear-gradient(135deg,var(--cs,var(--violet-soft)),var(--surface-2));
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.ev-card .poster img{width:100%;height:100%;object-fit:cover;}
.ev-card .poster svg{width:38px;height:38px;color:var(--c,var(--violet));opacity:.5;}
.ev-card .body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.ev-card h3{margin:0;font-size:1.02rem;font-weight:800;line-height:1.3;}
.ev-card .meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:var(--muted);}
.ev-card .meta span{display:flex;align-items:center;gap:4px;}
.ev-card .meta svg{width:13px;height:13px;}
.ev-card .desc{font-size:.85rem;color:var(--muted);flex:1;}
.ev-card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.ev-card .price{font-weight:800;color:var(--c,var(--violet));}
.ev-badge{
  position:absolute;top:10px;right:10px;padding:4px 11px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.02em;box-shadow:0 3px 8px rgba(29,24,54,.22);
}
.ev-badge.full{background:var(--rose);color:#fff;}
.ev-badge.low{background:var(--amber);color:#2b1b03;}

/* ---------- STATUS PILLS ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;
}
.pill svg{width:12px;height:12px;}
.pill-published,.pill-approved,.pill-paid,.pill-joined,.pill-attended,.pill-sent{background:var(--emerald-soft);color:var(--emerald);}
.pill-pending,.pill-draft,.pill-unpaid,.pill-registered,.pill-no_recipient{background:var(--amber-soft);color:var(--amber);}
.pill-rejected,.pill-cancelled,.pill-no_show,.pill-void,.pill-error{background:var(--rose-soft);color:var(--rose);}
.pill-waitlisted,.pill-closed,.pill-not_configured{background:var(--sky-soft);color:var(--sky);}
.pill-done{background:var(--violet-soft);color:var(--violet);}
.pill-in_progress{background:var(--sky-soft);color:var(--sky);}

/* Role select — an editable dropdown styled as a colored pill/badge instead
   of a bare native <select>, so it reads as "click to change" at a glance
   and gives instant color feedback once a different role is picked. */
.role-select{
  appearance:none;-webkit-appearance:none;border:none;cursor:pointer;
  font-size:.78rem;font-weight:800;letter-spacing:.02em;padding:6px 26px 6px 12px;border-radius:999px;
  background-repeat:no-repeat;background-position:right 10px center;background-size:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.role-select[data-role="admin"]{background-color:var(--violet-soft);color:var(--violet);}
.role-select[data-role="finance"]{background-color:var(--amber-soft);color:var(--amber);}
.role-select[data-role="event"]{background-color:var(--sky-soft);color:var(--sky);}
.role-select[data-role="pdm"]{background-color:var(--teal-soft);color:var(--teal);}
.role-select[data-role="sales"]{background-color:var(--rose-soft);color:var(--rose);}
.role-select[data-role="custom"]{background-color:var(--surface-2);color:var(--muted);}
.role-select:disabled{opacity:.55;cursor:not-allowed;background-image:none;padding-right:12px;}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);}
table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:560px;}
th{
  text-align:left;padding:11px 14px;background:var(--surface-2);color:var(--muted);
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  position:sticky;top:0;
}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
th.sortable:hover{color:var(--ink);}
th .arrow{opacity:.4;font-size:.7rem;margin-left:3px;}
th.sorted .arrow{opacity:1;color:var(--violet);}
td{padding:11px 14px;border-top:1px solid var(--border);}
tr:hover td{background:var(--surface-2);}
td.num{text-align:right;font-variant-numeric:tabular-nums;}

.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;font-size:.83rem;color:var(--muted);}
.pager button{
  border:1px solid var(--border);background:var(--surface);border-radius:9px;
  padding:6px 12px;cursor:pointer;font-weight:700;font-size:.8rem;
}
.pager button:disabled{opacity:.4;cursor:not-allowed;}
.pager button:hover:not(:disabled){background:var(--surface-2);}

/* Activity Log — clickable rows expand into a field-level diff */
.activity-row{cursor:pointer;}
.activity-row .chevron{display:inline-block;transition:transform .15s;opacity:.5;}
.activity-row.open .chevron{transform:rotate(90deg);opacity:1;}
.diff-row td{padding:0;border-top:none;background:var(--surface-2);}
.diff-row:hover td{background:var(--surface-2);}
.diff-panel{padding:4px 14px 16px 38px;}
.diff-empty{color:var(--muted);font-size:.82rem;font-style:italic;padding:6px 0;}
.diff-table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:0;}
.diff-table td{padding:6px 10px;border-top:1px solid var(--border);}
.diff-table tr:first-child td{border-top:none;}
.diff-field{color:var(--muted);font-weight:700;white-space:nowrap;width:1%;}
.diff-from{color:var(--rose);text-decoration:line-through;text-decoration-color:var(--rose);opacity:.75;}
.diff-arrow{color:var(--muted);width:1%;padding:6px 4px !important;}
.diff-to{color:var(--emerald);font-weight:600;}
.diff-empty-val{color:var(--muted);font-style:italic;}
.diff-note{font-size:.8rem;color:var(--muted);margin-top:8px;}

/* ---------- FORMS ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:.8rem;font-weight:700;color:var(--muted);}
.field input,.field select,.field textarea{
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);outline:none;
}
.field textarea{resize:vertical;min-height:80px;}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 14px;}

/* Password field with an in-field show/hide toggle — wrap the input in
   .field-password instead of using .field directly on the input. */
.field-password{position:relative;}
.field-password input{width:100%;padding-right:42px;}
.pass-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:none;background:none;color:var(--muted);border-radius:8px;cursor:pointer;
  transition:color .15s ease,background .15s ease;
}
.pass-toggle svg{width:18px;height:18px;}
.pass-toggle:hover{background:var(--surface-2);color:var(--ink);}
.pass-toggle.active{color:var(--violet);}

/* form section grouping inside modal */
.fsection{margin-bottom:18px;}
.fsection-head{
  display:flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c,var(--violet));margin-bottom:12px;
  padding-bottom:8px;border-bottom:2px solid var(--cs,var(--violet-soft));
}
.fsection-head svg{width:15px;height:15px;}

/* ---------- SEARCHABLE DROPDOWN ---------- */
.dd-wrap{position:relative;}
.dd-panel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-lift);max-height:240px;overflow-y:auto;
  animation:pop .18s cubic-bezier(.2,.8,.2,1);
}
.dd-item{
  padding:9px 13px;cursor:pointer;font-size:.86rem;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--border);
}
.dd-item:last-child{border-bottom:none;}
.dd-item:hover,.dd-item.hl{background:var(--violet-soft);}
.dd-item .sub{color:var(--muted);font-size:.76rem;flex:none;}
.dd-item .tick{color:var(--emerald);font-weight:800;}
.dd-empty{padding:12px;color:var(--muted);font-size:.84rem;text-align:center;}
.dd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.dd-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--teal-soft);color:var(--teal);
  padding:5px 10px;border-radius:999px;font-size:.76rem;font-weight:700;
}
.dd-chip button{border:none;background:none;cursor:pointer;color:inherit;display:flex;padding:0;}
.dd-chip svg{width:11px;height:11px;}
.dd-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);width:14px;height:14px;}

/* ---------- DATE-TIME PICKER ---------- */
.dtp-input{cursor:pointer;background:var(--surface);}
.dtp-panel{
  position:absolute;left:0;top:calc(100% + 6px);z-index:70;width:290px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-lift);padding:14px;
  animation:pop .18s cubic-bezier(.2,.8,.2,1);
}
.dtp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.dtp-head .title{font-weight:800;font-size:.9rem;}
.dtp-head button{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.dtp-head button:hover{background:var(--surface-2);}
.dtp-head button svg{width:14px;height:14px;}
.dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
.dtp-dow{font-size:.66rem;font-weight:800;color:var(--muted);text-transform:uppercase;padding:4px 0;}
.dtp-day{
  aspect-ratio:1;border:none;background:none;border-radius:9px;cursor:pointer;
  font-size:.82rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.dtp-day:hover{background:var(--violet-soft);}
.dtp-day.out{color:var(--muted);opacity:.4;}
.dtp-day.today{box-shadow:inset 0 0 0 2px var(--teal);}
.dtp-day.sel{background:var(--violet);color:#fff;font-weight:800;}
.dtp-time{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.dtp-time svg{width:15px;height:15px;color:var(--muted);}
.dtp-time select{
  flex:1;border:1px solid var(--border);border-radius:9px;padding:7px 9px;background:var(--surface);
  font-variant-numeric:tabular-nums;font-weight:700;
}
.dtp-actions{display:flex;justify-content:space-between;gap:8px;margin-top:12px;}
.dtp-actions .btn{padding:8px 14px;font-size:.8rem;}

/* ---------- MONTH CALENDAR ---------- */
.cal-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:10px 14px;box-shadow:var(--shadow);margin-bottom:16px;flex-wrap:wrap;
}
.cal-toggle{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;}
.cal-toggle button{
  border:none;background:none;padding:7px 15px;border-radius:8px;cursor:pointer;
  font-weight:700;font-size:.82rem;color:var(--muted);
}
.cal-toggle button.active{background:var(--surface);color:var(--violet);box-shadow:var(--shadow);}
.cal-nav{display:flex;align-items:center;gap:8px;}
.cal-nav .month-label{font-weight:800;font-size:1rem;min-width:130px;text-align:center;}
.cal-nav button{
  border:1px solid var(--border);background:var(--surface);border-radius:9px;
  padding:7px 13px;cursor:pointer;font-weight:700;font-size:.8rem;
  display:flex;align-items:center;gap:5px;
}
.cal-nav button:hover{background:var(--surface-2);}
.cal-nav button svg{width:13px;height:13px;}
.cal-grid{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:repeat(7,1fr);
}
.cal-dow{
  padding:10px 8px;text-align:center;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
.cal-cell{
  min-height:96px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden;
}
.cal-cell:nth-child(7n){border-right:none;}
.cal-cell .dnum{font-size:.78rem;font-weight:700;color:var(--muted);}
.cal-cell.other .dnum{opacity:.35;}
.cal-cell.today{background:var(--violet-soft);}
.cal-cell.today .dnum{color:var(--violet);font-weight:900;}
.cal-chip{
  display:block;padding:3px 7px;border-radius:6px;
  font-size:.68rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--cs,var(--violet-soft));color:var(--c,var(--violet));
  border-left:3px solid var(--c,var(--violet));
  cursor:default;
}
@media (max-width:700px){
  .cal-cell{min-height:64px;}
  .cal-chip{font-size:.6rem;padding:2px 4px;}
}

/* ---------- RANK LIST (reports) ---------- */
.section-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:20px;box-shadow:var(--shadow);margin-bottom:22px;
}
.section-head{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:.95rem;font-weight:800;color:var(--c,var(--violet));
}
.section-head .ic{
  width:34px;height:34px;border-radius:10px;background:var(--cs,var(--violet-soft));
  display:flex;align-items:center;justify-content:center;color:var(--c,var(--violet));flex:none;
}
.section-head .ic svg{width:18px;height:18px;}
.rank-row{
  display:flex;align-items:center;gap:14px;padding:11px 4px;
  border-bottom:1px solid var(--border);
  opacity:0;transform:translateY(10px);
  animation:rowIn .45s cubic-bezier(.2,.8,.2,1) forwards;
}
.rank-row:last-child{border-bottom:none;}
.rank-row:hover{background:var(--surface-2);border-radius:10px;}
@keyframes rowIn{to{opacity:1;transform:none;}}
.rank-badge{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:900;color:#fff;
}
.rank-badge.gold{background:linear-gradient(135deg,#f6c343,#e8930c);}
.rank-badge.silver{background:linear-gradient(135deg,#cdd3e0,#8a93a8);}
.rank-badge.bronze{background:linear-gradient(135deg,#dd9f70,#b6653a);}
.rank-badge.plain{background:var(--surface-2);color:var(--muted);}
.rank-main{flex:1;min-width:0;}
.rank-main .name{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-main .sub{font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:1px;}
.bar-track{height:6px;border-radius:99px;background:var(--surface-2);margin-top:6px;overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;background:var(--c,var(--violet));width:0;transition:width .8s cubic-bezier(.2,.8,.2,1);}
.rank-value{font-weight:800;font-variant-numeric:tabular-nums;flex:none;text-align:right;min-width:96px;font-size:.9rem;}
.rank-value .unit{display:block;font-size:.68rem;font-weight:600;color:var(--muted);}

@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.stat-card{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) backwards;}
.stat-card .ic{transition:transform .3s ease;}
.stat-card:hover .ic{transform:scale(1.12) rotate(-6deg);}

/* ---------- FILTER BAR ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;align-items:center;}
.filter-bar select,.filter-bar input,.page-head select{
  border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--surface);font-size:.85rem;
}

/* ---------- BULK ACTION BAR ----------
   Appears once ≥1 row is checked in a bulk-selectable table — floats above
   the content rather than pushing it, so selecting rows never reflows the
   page underneath it. */
.bulk-bar{
  position:fixed;left:calc(var(--sidebar-w) + 24px);right:24px;bottom:20px;z-index:45;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:12px 16px;box-shadow:var(--shadow-lift);
  animation:cardIn .25s cubic-bezier(.2,.8,.2,1);
}
.bulk-bar #bulk-count{font-weight:800;font-size:.88rem;flex:none;}
.bulk-bar select{border:1px solid var(--border);border-radius:10px;padding:7px 10px;background:var(--bg);font-size:.85rem;}
@media (max-width:900px){.bulk-bar{left:16px;right:16px;}}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,15,40,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
  animation:fadeIn .18s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);border-radius:18px;padding:26px;max-width:480px;width:100%;
  box-shadow:var(--shadow-lift);max-height:88vh;overflow-y:auto;
  animation:pop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal h2{margin:0 0 18px;font-size:1.15rem;font-weight:800;display:flex;align-items:center;gap:8px;}
.modal h2 svg{width:20px;height:20px;color:var(--violet);}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}

.modal-tabs{display:flex;gap:4px;margin:-6px 0 18px;padding:4px;background:var(--surface-2);border-radius:12px;}
.modal-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 10px;border-radius:9px;font-size:.82rem;font-weight:700;color:var(--muted);
  cursor:pointer;transition:background .15s ease,color .15s ease;user-select:none;
}
.modal-tab svg{width:14px;height:14px;}
.modal-tab:hover{color:var(--ink);}
.modal-tab.active{background:var(--surface);color:var(--violet);box-shadow:0 1px 4px rgba(20,15,40,.12);}

/* ---------- TOAST ---------- */
#toast-root{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:100;}
.toast{
  background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:10px;font-size:.85rem;font-weight:600;
  box-shadow:var(--shadow-lift);display:flex;align-items:center;gap:8px;
  animation:slideIn .25s cubic-bezier(.2,.8,.2,1);max-width:320px;
}
.toast.error{background:var(--rose);color:#fff;}
.toast.success{background:var(--emerald);color:#fff;}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* ---------- EMPTY STATE ---------- */
.empty-state{text-align:center;padding:50px 20px;color:var(--muted);}
.empty-state svg{width:46px;height:46px;margin-bottom:12px;color:var(--border);}
.empty-state p{margin:0;font-size:.9rem;}

/* ---------- EVENT LOGISTICS TRACKING ---------- */
.evl-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px;}
.evl-chip{
  border:1px solid var(--border);background:var(--surface);color:var(--muted);
  font-size:.82rem;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.evl-chip:hover{background:var(--surface-2);}
.evl-chip.active{background:var(--violet);color:#fff;border-color:var(--violet);}
.evl-chip .n{opacity:.75;margin-left:5px;}
.evl-search{margin-left:auto;position:relative;min-width:220px;}
.evl-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);}
.evl-search input{
  width:100%;padding:8px 12px 8px 32px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.85rem;
}
.evl-search input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);}

.evl-event{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
}
.evl-event-head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none;}
.evl-event-head .chev{width:14px;height:14px;color:var(--muted);flex:none;transition:transform .18s ease;}
.evl-event.collapsed .chev{transform:rotate(-90deg);}
.evl-event-head .titles{flex:1;min-width:0;}
.evl-event-head h2{margin:0 0 2px;font-size:1rem;font-weight:800;line-height:1.3;}
.evl-event-head .meta{display:flex;flex-wrap:wrap;gap:10px;font-size:.78rem;color:var(--muted);}
.evl-event-head .meta span{display:flex;align-items:center;gap:4px;}
.evl-event-head .meta svg{width:12px;height:12px;}
.evl-event-head .when.soon{color:var(--rose);}
.evl-progress{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--muted);flex:none;}
.evl-progress-bar{width:56px;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.evl-progress-bar i{display:block;height:100%;background:var(--emerald);border-radius:99px;}
.evl-event[data-state="attention"] .evl-progress-bar i{background:var(--amber);}
.evl-event[data-state="missing"] .evl-progress-bar i{background:var(--rose);}

.evl-needs{display:flex;flex-wrap:wrap;gap:16px;padding:0 18px 14px;font-size:.78rem;color:var(--muted);border-bottom:1px solid var(--border);}
.evl-needs b{color:var(--ink);font-weight:800;}
.evl-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px;}
.evl-event.collapsed .evl-body,.evl-event.collapsed .evl-needs{display:none;}

.evl-campus{border:1px solid var(--border);border-radius:13px;padding:14px 16px;background:var(--surface);}
.evl-campus .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:start;margin-bottom:10px;}
.evl-campus .name{font-weight:800;font-size:.92rem;}
.evl-campus .updated{font-size:.74rem;color:var(--muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.evl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.evl-lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.03em;margin-bottom:5px;}
.evl-delegates{font-weight:800;font-size:.95rem;}
.evl-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.evl-item-desc{font-size:.83rem;line-height:1.4;}
.evl-item-none{font-size:.83rem;color:var(--muted);}

.evl-status{
  appearance:none;-webkit-appearance:none;border:none;cursor:pointer;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;padding:4px 24px 4px 10px;border-radius:999px;
  background-repeat:no-repeat;background-position:right 8px center;background-size:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.evl-status[data-v="preparing"]{background-color:var(--amber-soft);color:var(--amber);}
.evl-status[data-v="done"]{background-color:var(--emerald-soft);color:var(--emerald);}
.evl-status[data-v="pending"]{background-color:var(--amber-soft);color:var(--amber);}
.evl-status[data-v="in_progress"]{background-color:var(--sky-soft);color:var(--sky);}

.evl-pic-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.evl-pic-toggle{
  display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;padding:0;
  cursor:pointer;color:var(--ink);font:inherit;text-align:left;
}
.evl-pic-badge{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--violet-soft);color:var(--violet);font-size:.72rem;font-weight:800;flex:none;
}
.evl-pic-toggle .lbl{font-size:.82rem;font-weight:700;flex:1;}
.evl-pic-toggle .chev{width:13px;height:13px;color:var(--muted);transition:transform .18s ease;flex:none;}
.evl-pic-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}
.evl-pic-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:10px;}
.evl-pic-card{background:var(--surface-2);border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;}
.evl-pic-name{font-size:.85rem;font-weight:800;}
.evl-pic-title{font-size:.76rem;color:var(--muted);margin-top:-3px;}
.evl-pic-contact{display:flex;flex-direction:column;gap:3px;margin-top:2px;}
.evl-pic-contact a{font-size:.78rem;color:var(--ink);display:flex;align-items:center;gap:6px;text-decoration:none;}
.evl-pic-contact a:hover{color:var(--violet);}
.evl-pic-contact svg{width:13px;height:13px;color:var(--violet);flex:none;}
.evl-promo{font-size:.8rem;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);line-height:1.5;}

.evl-campus.missing{
  border-style:dashed;border-color:var(--rose);background:var(--rose-soft);
  display:flex;align-items:center;gap:10px;padding:12px 16px;
}
.evl-campus.missing svg{width:16px;height:16px;color:var(--rose);flex:none;}
.evl-campus.missing .name{font-weight:800;font-size:.88rem;color:var(--ink);}
.evl-campus.missing .note{font-size:.78rem;color:var(--rose);font-weight:700;}

.evl-export{
  flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.evl-export:hover{background:var(--violet-soft);color:var(--violet);border-color:transparent;}
.evl-export svg{width:16px;height:16px;}

.evl-history-btn{
  border:none;background:none;color:var(--muted);cursor:pointer;padding:2px;display:flex;align-items:center;
  border-radius:6px;transition:color .15s ease,background .15s ease;
}
.evl-history-btn:hover{color:var(--violet);background:var(--violet-soft);}
.evl-history-btn svg{width:13px;height:13px;}
.evl-history-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;}
.evl-history-item{
  display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:10px;
  background:var(--surface-2);font-size:.83rem;border-left:3px solid var(--violet);
}
.evl-history-item svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--violet);}
.evl-history-item .when{color:var(--muted);font-size:.74rem;margin-top:2px;}
.evl-history-empty{color:var(--muted);font-size:.85rem;text-align:center;padding:16px 0;}

/* ---------- API & WEBHOOKS ---------- */
.intg-section{margin-bottom:32px;}
.intg-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-bottom:16px;}
.intg-section-head h2{display:flex;align-items:center;gap:8px;font-size:1.05rem;font-weight:800;margin:0;flex:none;}
.intg-section-head h2 svg{width:19px;height:19px;color:var(--violet);}
.intg-section-head p{margin:0;color:var(--muted);font-size:.83rem;flex:1;min-width:220px;}
.intg-section-head .btn{flex:none;margin-left:auto;}
.intg-secret{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:9px;padding:6px 6px 6px 12px;max-width:fit-content;}
.intg-secret .mono{font-size:.8rem;white-space:nowrap;}
.intg-secret button{flex:none;}
.intg-webhook-card .intg-secret{max-width:100%;overflow-x:auto;}
.intg-webhook-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;margin-bottom:14px;
}
.intg-webhook-card .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px;}
.intg-webhook-card .name{font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:8px;}
.intg-webhook-card .url{font-size:.8rem;color:var(--muted);margin-top:3px;word-break:break-all;}
.intg-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:6px;}

/* ---------- LOGIN ---------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  position:relative;overflow:hidden;isolation:isolate;
}
.login-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;z-index:-1;animation:drift 16s ease-in-out infinite alternate;}
.login-blob.b1{width:320px;height:320px;background:var(--violet);top:-40px;left:-60px;}
.login-blob.b2{width:260px;height:260px;background:var(--teal);bottom:-50px;right:-40px;animation-delay:-6s;}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(36px,-24px)}}
.login-card{
  background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:38px 34px;
  width:100%;max-width:380px;box-shadow:var(--shadow-lift);
  animation:pop .35s cubic-bezier(.2,.8,.2,1);
}
.login-brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.4rem;letter-spacing:-.02em;margin-bottom:6px;}
.login-brand svg{width:26px;height:26px;color:var(--violet);}
.login-brand span{background:linear-gradient(94deg,var(--violet),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.login-sub{color:var(--muted);font-size:.86rem;margin:0 0 26px;}
.login-error{
  background:var(--rose-soft);color:var(--rose);padding:9px 12px;border-radius:10px;font-size:.83rem;
  margin-bottom:14px;display:none;font-weight:600;
}
.login-error.show{display:block;}
.login-card .btn{width:100%;margin-top:4px;padding:12px;}
.cf-turnstile{margin:10px 0 4px;display:flex;justify-content:center;}
.login-foot{text-align:center;margin-top:20px;font-size:.78rem;color:var(--muted);}

/* ---------- GLOBAL SEARCH (Ctrl/Cmd+K) ---------- */
.search-trigger{
  display:flex;align-items:center;gap:8px;width:calc(100% - 20px);margin:0 10px 14px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
  border-radius:10px;padding:8px 10px;font-size:.83rem;font-weight:600;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.search-trigger:hover{background:var(--violet-soft);border-color:transparent;color:var(--violet);}
.search-trigger svg{width:15px;height:15px;flex:none;}
.search-trigger span{flex:1;text-align:left;}
.search-trigger kbd{
  font:inherit;font-size:.7rem;font-weight:700;background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:2px 6px;color:var(--muted);
}
.search-overlay{
  position:fixed;inset:0;background:rgba(20,15,40,.45);backdrop-filter:blur(2px);
  z-index:70;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;
  animation:fadeIn .15s ease;
}
.search-box{
  width:100%;max-width:560px;background:var(--surface);border-radius:16px;
  box-shadow:var(--shadow-lift);overflow:hidden;animation:pop .2s cubic-bezier(.2,.8,.2,1);
}
.search-input-row{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);}
.search-input-row svg{width:17px;height:17px;color:var(--muted);flex:none;}
.search-input-row input{flex:1;border:none;background:none;font-size:1rem;font-family:inherit;color:var(--ink);outline:none;}
.search-close{border:none;background:none;color:var(--muted);cursor:pointer;display:flex;padding:2px;}
.search-close svg{width:16px;height:16px;}
.search-results{max-height:56vh;overflow-y:auto;padding:8px;}
.search-hint{color:var(--muted);font-size:.85rem;text-align:center;padding:22px 0;}
.search-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  text-decoration:none;color:var(--ink);transition:background .12s ease;
}
.search-item:hover{background:var(--violet-soft);}
.search-item svg{width:17px;height:17px;flex:none;color:var(--violet);}
.search-item .lbl{display:block;font-weight:700;font-size:.88rem;}
.search-item .sub{display:block;font-size:.76rem;color:var(--muted);margin-top:1px;}
@media (max-width:700px){.search-overlay{padding:8vh 12px 12px;}}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}