/* Ting Rewards — admin styles.
   Ported from Admin App.dc.html. Plain CSS on purpose: no build step, no npm.
   Colours are the prototype's oklch values, kept verbatim. */

:root{
  --bg:oklch(0.965 0.004 260);
  --surface:#fff;
  --surface-2:oklch(0.97 0.006 260);
  --line:oklch(0.91 0.008 260);
  --line-soft:oklch(0.94 0.006 260);
  --ink:oklch(0.2 0.02 260);
  --ink-2:oklch(0.35 0.02 260);
  --muted:oklch(0.5 0.02 260);
  --accent:oklch(0.55 0.15 260);
  --accent-dim:oklch(0.5 0.13 260);
  --sidebar:oklch(0.16 0.015 260);
  --sidebar-2:oklch(0.22 0.015 260);
  --sidebar-active:oklch(0.28 0.02 260);
  --sidebar-icon:oklch(0.26 0.015 260);
  --sidebar-label:oklch(0.5 0.02 260);
  --sidebar-text:oklch(0.7 0.02 260);
  --danger:oklch(0.55 0.15 25);
  --danger-bg:oklch(0.94 0.05 25);
  --ok:oklch(0.5 0.14 145);
  --ok-bg:oklch(0.93 0.05 145);
  --warn:oklch(0.45 0.1 80);
  --warn-bg:oklch(0.94 0.05 80);
  --coin:oklch(0.35 0.08 80);
  --trophy:oklch(0.3 0.07 200);
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px}
a{color:inherit;text-decoration:none}
::placeholder{color:oklch(0.65 0.01 260)}
button{font-family:inherit}
[hidden]{display:none!important}

/* ---------- shell ---------- */
/* The viewport is the frame and .content is the only thing that scrolls, so the
   sidebar reaches the bottom of the screen however long the page gets. dvh keeps
   it honest on phones, where the browser chrome changes the viewport height. */
.shell{height:100vh;height:100dvh;display:flex;position:relative;overflow:hidden}
.backdrop{position:fixed;inset:0;background:oklch(0.15 0.01 260/.45);z-index:29}

.sidebar{width:232px;flex:0 0 auto;background:var(--sidebar);position:relative;left:0;top:0;
  height:100%;z-index:30;transition:width .15s ease,transform .2s ease}
.sidebar.collapsed{width:84px}
.sidebar-inner{display:flex;flex-direction:column;height:100%;padding:20px 14px;overflow-y:auto;overflow-x:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px}
/* The 聽 mark, white on the dark sidebar. The artwork is black, so it is inverted
   rather than kept as a second white-on-transparent file to go stale. */
.brand-mark{width:30px;height:30px;flex:0 0 auto;object-fit:contain;filter:invert(1)}
.brand-name{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em;white-space:nowrap}
.nav-section{margin-bottom:14px}
.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--sidebar-label);
  text-transform:uppercase;padding:8px 10px 4px;white-space:nowrap}
.nav-item{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:9px;margin-bottom:1px;color:var(--sidebar-text)}
.nav-item:hover{background:oklch(0.22 0.018 260)}
.nav-item.active{background:var(--sidebar-active);color:#fff}
.sidebar.collapsed .nav-item{justify-content:center}
.sidebar.collapsed .js-label{display:none}
.sidebar.collapsed .nav-label{padding:8px 0 4px;text-align:center}
.nav-icon{width:26px;height:26px;border-radius:8px;background:var(--sidebar-icon);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto}
.nav-item.active .nav-icon{background:var(--accent)}
.nav-text{font-size:13px;font-weight:600;white-space:nowrap}
.nav-badge{margin-left:auto;background:oklch(0.6 0.18 25);color:#fff;font-size:10px;font-weight:800;
  padding:2px 6px;border-radius:999px}
.sidebar-user{padding:10px;border-top:1px solid oklch(0.28 0.015 260);margin:8px 0}
.sidebar-user b{display:block;font-size:12.5px;color:#fff;white-space:nowrap}
.sidebar-user span{font-size:11px;color:oklch(0.55 0.02 260);white-space:nowrap}
.collapse-btn{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;background:oklch(0.24 0.02 260);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;margin:0 auto}

.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;height:100%}
.topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;background:#fff;border-bottom:1px solid var(--line)}
.page-title{font-size:20px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hamburger{all:unset;cursor:pointer;width:34px;height:34px;border-radius:9px;background:oklch(0.95 0.006 260);
  display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;flex:0 0 auto}
.hamburger i{width:16px;height:2px;background:oklch(0.3 0.02 260);display:block}
.avatar-btn{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700}
.menu{position:absolute;top:44px;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 24px oklch(0.2 0.02 260/.15);padding:6px;width:170px;z-index:40}
.menu button{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:9px 12px;
  border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.menu button:hover{background:var(--surface-2)}
.menu button.danger{color:var(--danger)}
.content{flex:1;min-height:0;padding:26px 28px 60px;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- generic ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:16px}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.mb16{margin-bottom:16px}
.muted{color:var(--muted)}

.btn{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 18px;border-radius:10px;font-size:13px;
  font-weight:700;text-align:center;white-space:nowrap;display:inline-block}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink-2)}
.btn-grey{background:oklch(0.94 0.006 260);color:oklch(0.3 0.02 260)}
.btn-danger{background:var(--danger);color:#fff}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.icon-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.icon-edit{font-size:15px;color:var(--accent-dim)}
.icon-more{font-size:16px;font-weight:800;color:var(--muted)}

.field label,.field .lbl{display:block;font-size:12px;font-weight:600;color:oklch(0.45 0.02 260);margin-bottom:5px}
.input,select.input,textarea.input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink)}
.input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.field+.field{margin-top:12px}
.field-row{display:flex;gap:12px}
.field-row>*{flex:1}

.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;display:inline-block}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-off{background:oklch(0.93 0.006 260);color:var(--muted)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-hot{background:oklch(0.94 0.07 30);color:oklch(0.52 0.19 30);letter-spacing:.04em}

/* ---------- filter bar / column picker / pagination ---------- */
.filter-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.filter-toggle{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px}
.filter-toggle .caret{font-size:11px;color:var(--muted)}
.filter-toggle .txt{font-size:13.5px;font-weight:700;color:oklch(0.25 0.02 260)}
.filter-rows{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filter-row .field{margin:0}
.filter-row .lbl{font-size:11px;margin-bottom:4px}
.filter-row select,.filter-row input{padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  font-size:13px;color:var(--ink-2);font-family:inherit}
.mini-btn{all:unset;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid var(--line);font-size:16px;font-weight:700;color:var(--ink-2);background:#fff}

.picker-wrap{position:relative;display:inline-block}
.picker{position:absolute;top:46px;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 24px oklch(0.2 0.02 260/.15);padding:8px;width:230px;z-index:15;max-height:320px;overflow-y:auto}
.picker label{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13px;
  color:var(--ink-2);cursor:pointer}
.picker label:hover{background:var(--surface-2)}
.picker-foot{border-top:1px solid var(--line-soft);margin-top:6px;padding-top:6px}
.picker-foot button{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:7px 9px;
  border-radius:8px;font-size:12.5px;font-weight:600;color:var(--accent)}
.picker-foot button:hover{background:var(--surface-2)}
.picker-foot button[disabled]{color:var(--muted);cursor:default;background:none}

/* ---------- global search ---------- */
.list-search-row{display:flex;justify-content:flex-end;margin-bottom:14px}
.list-search{display:flex;align-items:center;gap:8px;width:100%;max-width:340px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:0 10px;height:40px;box-sizing:border-box}
.list-search:focus-within{outline:2px solid var(--accent);outline-offset:-1px}
.list-search .ls-icon{display:flex;align-items:center;color:var(--muted);flex:0 0 auto}
.list-search input{all:unset;flex:1;min-width:0;font-size:13.5px;font-family:inherit;color:var(--ink);height:100%}
.list-search input::placeholder{color:var(--muted)}
.list-search input::-webkit-search-cancel-button{display:none}
.list-search .ls-clear{all:unset;cursor:pointer;flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--muted)}
.list-search .ls-clear:hover{background:var(--surface-2);color:var(--ink-2)}
.between .list-search-row{margin-bottom:0}
@media (max-width:640px){.list-search{max-width:none}}

.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;flex-wrap:wrap}
.pager .info{font-size:12.5px;color:var(--muted)}
.pager select{padding:6px 10px;border-radius:8px;border:1px solid var(--line);font-size:12.5px;font-family:inherit}
.pg-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 12px;border-radius:8px;
  background:oklch(0.94 0.006 260);color:var(--ink-2);font-size:12.5px;font-weight:600}
.pg-btn[disabled]{opacity:.5;cursor:not-allowed}
.pg-input{width:52px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;font-family:inherit;color:var(--ink);text-align:center}
.pg-input:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* ---------- table ---------- */
.table-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.table-scroll{overflow-x:auto}
.thead,.trow{display:grid;column-gap:14px;padding:12px 18px;align-items:center}
.thead{background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0;z-index:2}
.thead .col-head{position:relative;display:flex;align-items:center;min-width:0;height:100%}
.thead .col-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thead .sortable{cursor:pointer;user-select:none;white-space:nowrap}
.thead .sortable:hover{color:var(--accent)}

/* The grip sits in the column gap, so it never eats into the label. It is
   always visible — an invisible handle is a handle nobody finds. */
.thead .col-head{cursor:grab;touch-action:pan-y}
.thead .col-grip{position:absolute;top:-8px;bottom:-8px;right:-11px;width:17px;cursor:col-resize;
  z-index:3;display:flex;align-items:center;justify-content:center;touch-action:none}
.thead .col-grip::after{content:'';width:2px;height:15px;border-radius:1px;
  background:oklch(0.84 0.01 260);transition:background .12s,height .12s}
.thead .col-head:hover .col-grip::after{background:var(--muted);height:19px}
.thead .col-grip:hover::after,.thead .col-grip:active::after{background:var(--accent);height:22px}
.thead .col-head:last-child .col-grip{right:-4px}

body.col-resizing{cursor:col-resize;user-select:none}
body.col-resizing .thead .col-grip::after{background:var(--accent)}

/* Dragging a header sideways moves the column. */
body.col-moving{cursor:grabbing;user-select:none}
.thead .col-head.col-dragging{opacity:.45}
.thead .col-head.col-drop-before{box-shadow:inset 2px 0 0 var(--accent)}
.thead .col-head.col-drop-after{box-shadow:inset -2px 0 0 var(--accent)}

/* A finger needs more than a 2px line to aim at. */
@media (pointer:coarse){
  .thead .col-grip{width:26px;right:-16px}
  .thead .col-grip::after{width:3px;height:20px;background:var(--muted)}
  .thead .col-head:last-child .col-grip{right:-8px}
}
.trow{padding:13px 18px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-2)}
.trow:hover{background:oklch(0.985 0.003 260)}
.cell-name{display:flex;align-items:center;gap:10px;min-width:0}
.cell-avatar{width:30px;height:30px;border-radius:50%;background:oklch(0.9 0.01 260);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted)}
/* A student who has equipped an avatar shows it instead of their initials. */
img.cell-avatar{object-fit:cover;display:block;background:oklch(0.9 0.01 260)}

.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strong{font-weight:600;color:oklch(0.25 0.02 260)}
.coin{color:var(--coin);font-weight:600}
.trophy{color:var(--trophy);font-weight:600}
.empty{padding:40px 18px;text-align:center;color:var(--muted);font-size:13.5px}
.actions{display:flex;align-items:center;gap:10px}

/* ---------- dashboard ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.stat .lbl{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px}
.stat .val{font-size:26px;font-weight:800;color:var(--ink)}
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.panel h3{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 14px}
.tx{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px;
  border-bottom:1px solid var(--line-soft)}
.tx:last-child{border-bottom:0}
.tx .who{font-size:13px;font-weight:600;color:oklch(0.25 0.02 260)}
.tx .what{font-size:11.5px;color:var(--muted)}
.tx .amt{font-size:12.5px;font-weight:700;white-space:nowrap}
.mini-row{padding:10px 12px;background:var(--surface-2);border-radius:10px;margin-bottom:10px}
.mini-row b{display:block;font-size:12.5px;color:oklch(0.25 0.02 260)}
.mini-row span{font-size:11.5px;color:var(--muted)}

/* ---------- drawer + modal ---------- */
.overlay{position:fixed;inset:0;background:oklch(0.15 0.01 260/.4);z-index:50;display:flex}
.overlay.right{justify-content:flex-end}
.overlay.center{align-items:center;justify-content:center}
.drawer{width:460px;max-width:100%;background:#fff;height:100vh;padding:26px;overflow-y:auto;
  box-shadow:-8px 0 30px oklch(0.2 0.02 260/.15)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.drawer-head h3{font-size:17px;font-weight:800;margin:0}
.close-btn{all:unset;cursor:pointer;width:30px;height:30px;border-radius:8px;background:oklch(0.94 0.006 260);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:16px}
.drawer-foot{display:flex;gap:10px;margin-top:24px}
.drawer-foot .btn{flex:1}
.modal{width:380px;max-width:calc(100% - 32px);background:#fff;border-radius:16px;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
  border-bottom:1px solid var(--line-soft)}
.modal-head h3{font-size:16px;font-weight:800;margin:0}
.modal-body{padding:22px}
.modal-foot{display:flex;gap:10px;padding:0 22px 22px}
.modal-foot .btn{flex:1}
.help{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.err{color:var(--danger);font-size:12px;margin-top:5px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--sidebar)}
.login-card{width:100%;max-width:390px;background:#fff;border-radius:20px;padding:34px 30px;
  box-shadow:0 30px 60px -20px oklch(0.1 0.02 260/.6)}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.login-brand img{width:100%;max-width:250px;height:auto;display:block}
.login-brand .mark{width:38px;height:38px;border-radius:11px;background:var(--accent)}
.login-brand b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.login-card h1{font-size:19px;font-weight:800;margin:0 0 4px}
.login-card p.sub{font-size:13.5px;color:var(--muted);margin:0 0 22px}

/* A quiet line that points somewhere else — used where a panel has moved. */
.page-note{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:11px 15px;margin-bottom:16px;font-size:12.5px;color:var(--muted);line-height:1.6}
.page-note a{color:var(--accent);font-weight:700;text-decoration:underline}
.page-note b{color:var(--ink-2)}

/* Product Category: add box and search share one row. */
.cat-bar{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;max-width:760px;margin-bottom:16px}
.cat-bar .list-search-row{margin:0;flex:0 0 auto}
.cat-bar .list-search{width:300px}
@media (max-width:700px){
  .cat-bar .list-search-row{flex:1 1 100%}
  .cat-bar .list-search{width:100%;max-width:none}
}

/* ---------- typeable date field ----------
   Text box for typing, native picker as a calendar button beside it. The picker's
   own text is hidden in WebKit so it reads as a button, not a second date. */
.date-field{display:flex;align-items:stretch;gap:8px}
.date-field .input{flex:1;min-width:0}
.date-field .input.bad{outline:2px solid var(--danger);outline-offset:-1px}
.date-field .date-pick{flex:0 0 auto;width:42px;padding:0 2px;border-radius:10px;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-family:inherit;cursor:pointer}
.date-field .date-pick:hover{border-color:var(--accent)}
.date-field .date-pick::-webkit-datetime-edit,
.date-field .date-pick::-webkit-inner-spin-box,
.date-field .date-pick::-webkit-clear-button{display:none}
.date-field .date-pick::-webkit-calendar-picker-indicator{margin:0 auto;padding:0;cursor:pointer;opacity:.65}
.date-field .date-pick::-webkit-calendar-picker-indicator:hover{opacity:1}

/* ---------- record audit footer ---------- */
.record-audit{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:4px}
.record-audit>div{display:flex;gap:8px;font-size:12px;color:var(--muted);line-height:1.5}
.record-audit .k{flex:0 0 58px;font-weight:700;color:oklch(0.55 0.02 260)}
.record-audit .v{min-width:0}
.record-audit b{color:var(--ink-2);font-weight:700}

/* ---------- a settings row above a list ---------- */
.settings-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:16px}
.settings-strip b{display:block;font-size:13.5px;font-weight:700;color:oklch(0.25 0.02 260)}
.settings-strip span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.settings-strip .unit{font-size:12.5px;color:var(--muted)}

/* ---------- image preview ---------- */
img.thumb,.drop img,.banner-drop img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:90;background:oklch(0.12 0.01 260/.82);
  display:flex;align-items:center;justify-content:center;padding:32px}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain;
  box-shadow:0 30px 80px oklch(0.1 0.02 260/.6);background:#fff}
.lb-close{all:unset;cursor:pointer;position:absolute;top:14px;right:18px;width:40px;height:40px;
  border-radius:50%;background:oklch(1 0 0/.14);color:#fff;font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.lb-close:hover{background:oklch(1 0 0/.26)}
body.lb-open{overflow:hidden}
@media (max-width:640px){.lightbox{padding:16px}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:oklch(0.2 0.02 260);
  color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:80;
  box-shadow:0 10px 30px oklch(0.2 0.02 260/.35)}
.flash{padding:12px 16px;border-radius:12px;font-size:13.5px;font-weight:600;margin-bottom:16px}
.flash-warn{background:var(--warn-bg);color:var(--warn)}
.flash-ok{background:var(--ok-bg);color:var(--ok)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  /* The sidebar becomes a drawer. It is never "collapsed" here — a menu of
     unlabelled icons sliding over the page helps nobody. */
  .sidebar{position:fixed;transform:translateX(-100%);width:262px;max-width:86vw;height:100%;
    box-shadow:0 0 40px oklch(0.1 0.02 260/.45)}
  .sidebar.open{transform:translateX(0)}
  .sidebar.collapsed{width:262px}
  .sidebar.collapsed .js-label{display:revert}
  .sidebar.collapsed .nav-item{justify-content:flex-start}
  .sidebar.collapsed .nav-label{padding:8px 10px 4px;text-align:left}
  .collapse-btn{display:none}

  .topbar{padding:14px 14px}
  .page-title{font-size:17px}
  .content{padding:18px 16px 60px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr}
  .drawer{width:100%}
  .table-card{border-radius:12px}
  .pager{gap:10px}
  .pager>.row{flex-wrap:wrap}
}


/* ---------- slice 2 — expandable class rows and the roster combobox ---------- */

.expand{background:oklch(0.98 0.004 260);padding:10px 18px 14px 62px;border-top:1px solid var(--line-soft)}
.expand-head{display:grid;grid-template-columns:2fr 1fr 1fr;padding:6px 0;font-size:11px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.expand-row{display:grid;grid-template-columns:2fr 1fr 1fr;padding:6px 0;font-size:13px;color:oklch(0.3 0.02 260)}

.combo{position:relative;flex:1;min-width:260px;max-width:420px}
.combo-list{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px oklch(0.2 0.02 260/.15);
  z-index:20;max-height:280px;overflow-y:auto}
.combo-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.combo-item:last-child{border-bottom:0}


/* ---------- slice 3 — market tabs, thumbnails, image drop area, decision links ---------- */

.tabs{display:flex;background:oklch(0.93 0.01 260);border-radius:12px;padding:3px;margin-bottom:18px;width:fit-content}
.tab{all:unset;cursor:pointer;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:700;color:var(--muted)}
.tab.on{background:#fff;color:oklch(0.25 0.02 260)}

.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;display:block;background:oklch(0.93 0.01 260)}
.thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px}

.drop{width:104px;height:104px;border-radius:12px;border:1.5px dashed var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.drop img{width:100%;height:100%;object-fit:cover}
.drop span{font-size:11.5px;color:var(--muted)}

.link-ok{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--ok)}
.link-danger{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--danger)}
.link-ok:hover,.link-danger:hover{text-decoration:underline}
.link-ok[disabled]{opacity:.5;cursor:not-allowed}

.empty code{background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:12px}


/* ---------- slice 4 — leaderboard ranks, summary rows, chips, banner previews ---------- */

.rank{font-size:14px;font-weight:800;color:oklch(0.4 0.02 260)}
.rank-1{color:oklch(0.6 0.15 80)}
.rank-2{color:oklch(0.6 0.02 260)}
.rank-3{color:oklch(0.55 0.11 40)}

.summary{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.summary>div{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.summary>div:last-child{border-bottom:0}
.summary span{color:var(--muted)}
.summary b{color:var(--ink);font-weight:700}
.summary .total{background:#fff}
.summary .total b{font-size:16px}

.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:oklch(0.94 0.03 260);color:var(--accent-dim);margin-right:4px}

.banner-drop{width:100%;border-radius:12px;border:1.5px dashed var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.banner-drop img{width:100%;height:100%;object-fit:cover}
.banner-drop span{font-size:11.5px;color:var(--muted)}
.banner-drop.wide{aspect-ratio:750/300}
.banner-drop.ultrawide{aspect-ratio:1600/400}

/* ---------- user groups ---------- */
.page-intro{font-size:14.5px;color:var(--ink-2);max-width:76ch;margin:0 0 20px;line-height:1.6}
.page-intro b{color:var(--ink)}

/* one row per group, aligned like every other table in the app */
.ug-head,.ug-row{display:grid;
  grid-template-columns:minmax(230px,1.8fr) 84px 132px minmax(415px,2.2fr) 78px;
  column-gap:18px;align-items:center;padding:14px 20px}
.ug-head{background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em}
.ug-row{border-top:1px solid var(--line-soft);padding:16px 20px}
.ug-row:hover{background:oklch(0.985 0.003 260)}

.ug-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ug-name h3{font-size:15.5px;font-weight:700;margin:0;color:var(--ink);letter-spacing:-.01em}
.ug-desc{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5;max-width:40ch}

.ug-count{font-size:15px;font-weight:700;color:var(--ink)}
.ug-count small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:1px}

.ug-scope{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ug-scope i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--accent)}
.ug-scope.narrow i{background:oklch(0.72 0.11 200)}
.ug-scope.none i{background:oklch(0.85 0.008 260)}

/* five fixed slots, so access shape is comparable down the column */
.ug-areas{display:flex;gap:4px;flex-wrap:wrap;row-gap:5px}
.area-pill{display:inline-flex;align-items:baseline;gap:4px;font-size:10.5px;font-weight:600;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:var(--surface-2);color:oklch(0.72 0.01 260);border:1px solid var(--line-soft)}
.area-pill b{font-size:10.5px;font-weight:800}
.area-pill.has{background:var(--accent-soft,oklch(0.95 0.03 260));color:var(--accent-dim);
  border-color:oklch(0.88 0.05 260)}
.area-pill.full{background:var(--accent);color:#fff;border-color:transparent}

.ug-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}

.badge-builtin{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--surface-3,oklch(0.93 0.008 260));color:var(--muted)}
.badge-you{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--ok-bg);color:var(--ok)}

/* ---- drawer ---- */
.form-section{margin-bottom:26px}
.form-section>h4{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.07em;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}

.choice{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:12px;cursor:pointer;margin-bottom:8px;background:#fff}
.choice:hover{border-color:oklch(0.85 0.04 260)}
.choice.on{border-color:var(--accent);background:oklch(0.985 0.012 260)}
.choice input{margin-top:2px;flex:0 0 auto}
.choice .t{font-size:13.5px;font-weight:600;color:var(--ink)}
.choice .d{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}

.perm-block{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.perm-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.perm-block-head .n{font-size:12.5px;font-weight:700;color:var(--ink)}
.perm-block-head .c{font-size:11px;color:var(--muted);font-weight:600}
.perm-all{all:unset;cursor:pointer;font-size:11px;font-weight:700;color:var(--accent-dim);
  padding:3px 8px;border-radius:6px}
.perm-all:hover{background:oklch(0.95 0.03 260)}

.perm-item{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--line-soft)}
.perm-item:last-child{border-bottom:0}
.perm-item:hover{background:oklch(0.985 0.003 260)}
.perm-item:has(input:checked){background:oklch(0.975 0.012 260)}
.perm-item:has(input:checked) .l{color:var(--ink);font-weight:600}
.perm-item input{margin-top:2px;flex:0 0 auto}
.perm-item .l{font-size:13px;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:7px}
.perm-item .n{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.tag-care{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 6px;border-radius:4px;background:var(--danger-bg);color:var(--danger)}

.locked-note{display:flex;gap:10px;padding:13px 15px;border-radius:12px;
  background:var(--coin-soft);color:var(--ink-2);font-size:13px;line-height:1.55;margin-bottom:18px}
.locked-note b{color:var(--ink)}

@media (max-width:900px){
  .ug-head{display:none}
  .ug-row{grid-template-columns:1fr;row-gap:12px}
  .ug-areas{flex-wrap:wrap}
  .ug-actions{justify-content:flex-start}
}