/* ============================================================
   Clarity Journal — Admin
   Same palette as the main app (index.html / admin.html), with
   quieter borders so dense admin tables stay calm.
   ============================================================ */
:root{
  --bg:#080A10;
  --panel:#0F1219;
  --panel-2:#12151C;
  --panel-3:#171B24;
  --hover:rgba(148,163,184,0.06);
  --border:rgba(160,170,190,0.06);
  --border-strong:rgba(160,170,190,0.088);

  --text:#EBEDF3;
  --text-2:#9AA0B2;
  --text-3:#7C8296;

  --green:#00D9A3;  --green-ink:#03130E; --green-soft:rgba(0,217,163,0.12);
  --red:#FF4D6A;    --red-strong:#C8233F; --red-soft:rgba(255,77,106,0.12);
  --amber:#FFB020;  --amber-soft:rgba(255,176,32,0.12);
  --violet:#8B7CFF; --violet-soft:rgba(139,124,255,0.14);
  --sky:#7DD3FC;    --sky-soft:rgba(160,170,190,0.06);
  --gray-soft:rgba(148,163,184,0.12);

  /* chart series: validated for dark surfaces (lightness band + CVD) */
  --c-green:#00A87F; --c-violet:#8B7CFF; --c-amber:#C2840F; --c-red:#D9485F; --c-gray:#6E7590;
  --grid:rgba(148,163,184,0.10);

  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.3);
  --shadow-pop:0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px var(--border-strong);
  --sidebar:248px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--bg); color:var(--text); font:14px/1.5 'Inter', system-ui, sans-serif;
  font-feature-settings:'cv11','ss01'; -webkit-font-smoothing:antialiased;}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
a{color:inherit;}
::selection{background:rgba(0,217,163,.28);}
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:6px;}
.num, .tabular{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--mono); font-size:12.5px;}
.muted{color:var(--text-2);}
.faint{color:var(--text-3);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
[hidden]{display:none !important;}

.ico{width:16px; height:16px; flex-shrink:0; display:block;}
.i{display:inline-flex;}

/* ---------- layout ---------- */
.app{display:flex; min-height:100vh;}
.sidebar{position:fixed; inset:0 auto 0 0; width:var(--sidebar); background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:14px 12px; z-index:40; transition:transform .22s var(--ease), width .2s var(--ease), padding .2s var(--ease);}
.main{flex:1; min-width:0; margin-left:var(--sidebar); display:flex; flex-direction:column; transition:margin-left .2s var(--ease);}

/* collapsed sidebar: an icon rail. Labels stay in the page for screen readers, just visually hidden. */
@media (min-width:1025px){
  .app.collapsed{--sidebar:68px;}
  .app.collapsed .sidebar{padding:14px 10px;}
  .app.collapsed .sidebar-head{flex-direction:column; gap:8px;}
  .app.collapsed .brand{flex:none; justify-content:center; padding:6px 0 0;}
  .app.collapsed .brand-text,
  .app.collapsed .nav-item > span:not(.i):not(.nav-badge),
  .app.collapsed .me-text{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .app.collapsed .nav-item{justify-content:center; padding:9px 0;}
  .app.collapsed .nav-item.active::before{left:-10px;}
  .app.collapsed .nav-badge{position:absolute; top:2px; right:6px; margin:0; min-width:16px; padding:0 4px; font-size:10px; line-height:15px; text-align:center;}
  .app.collapsed .me-btn{justify-content:center; padding:6px 0;}
  .app.collapsed .me-btn > .i{display:none;}
}
.view{flex:1; padding:28px 32px 64px; max-width:1360px; width:100%; margin:0 auto; outline:none;}
.view > .page{animation:pageIn .22s var(--ease);}
@keyframes pageIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

/* brand + collapse button */
.sidebar-head{display:flex; align-items:center; gap:2px; padding-bottom:12px;}
.brand{display:flex; align-items:center; gap:10px; padding:6px 2px 6px 8px; text-decoration:none; flex:1; min-width:0;}
.brand-name, .brand-sub{white-space:nowrap;}
.sidebar-head .collapse-btn{width:30px; height:30px; color:var(--text-3);}
.sidebar-head .collapse-btn:hover{color:var(--text);}
.brand img{width:28px; height:28px; border-radius:7px; display:block;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-name{font:700 12.5px 'Sora', sans-serif; letter-spacing:.08em; text-transform:uppercase;}
.brand-sub{font-size:11.5px; color:var(--text-3); font-weight:500;}

/* nav */
.nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.nav-label{font-size:11px; font-weight:600; color:var(--text-3); padding:12px 10px 6px; letter-spacing:.04em; text-transform:uppercase;}
.nav-item{position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm);
  color:var(--text-2); text-decoration:none; font-weight:500; font-size:13.5px; border:none; background:none; width:100%; text-align:left;
  transition:background .15s, color .15s;}
.nav-item:hover{background:var(--hover); color:var(--text);}
.nav-item.active{background:rgba(0,217,163,0.08); color:var(--text);}
.nav-item.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--green);}
.nav-item.active .ico{color:var(--green);}
.nav-badge{margin-left:auto; font:600 11px var(--mono); color:var(--amber); background:var(--amber-soft); border-radius:999px; padding:1px 7px;}
.sidebar-foot{border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; gap:2px;}
.me-btn{display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-sm); border:none; background:none; text-align:left; width:100%;
  transition:background .15s;}
.me-btn:hover{background:var(--hover);}
.me-btn .ico{color:var(--text-3); margin-left:auto;}
.me-text{display:flex; flex-direction:column; min-width:0; line-height:1.25;}
.me-name{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.me-role{font-size:11.5px; color:var(--text-3); text-transform:capitalize;}
.signout:hover{color:var(--red);}
.scrim{display:none;}

/* topbar */
.topbar{position:sticky; top:0; z-index:30; height:56px; display:flex; align-items:center; gap:12px; padding:0 32px;
  background:rgba(8,10,16,0.82); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border);}
.crumbs{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-3); min-width:0;}
.crumbs a{color:var(--text-2); text-decoration:none;} .crumbs a:hover{color:var(--text);}
.crumbs .cur{color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.crumbs .ico{width:14px; height:14px;}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:8px;}
.search-btn{display:flex; align-items:center; gap:8px; height:34px; padding:0 8px 0 10px; min-width:240px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--panel-2); color:var(--text-3); font-size:13px; transition:border-color .15s;}
.search-btn:hover{border-color:var(--border-strong); color:var(--text-2);}
.search-btn kbd{margin-left:auto;}
kbd{font:500 11px var(--mono); color:var(--text-3); border:1px solid var(--border); border-radius:5px; padding:1px 5px; background:var(--panel-3);}
.icon-btn{position:relative; width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid transparent; background:none; color:var(--text-2);
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s, border-color .15s;}
.icon-btn:hover{background:var(--hover); color:var(--text);}
.icon-btn.bordered{border-color:var(--border);}
.icon-btn .dot{position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 2px var(--bg);}
.avatar-btn{border:none; background:none; padding:2px; border-radius:50%;}
.menu-btn{display:none;}

.demo-banner{display:flex; align-items:center; gap:8px; justify-content:center; padding:7px 16px; font-size:12.5px; font-weight:500;
  color:var(--violet); background:var(--violet-soft); border-bottom:1px solid rgba(139,124,255,.25);}

/* ---------- page header ---------- */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap;}
.page-head h1{font-size:22px; font-weight:600; letter-spacing:-.015em; margin:0;}
.page-head p{margin:4px 0 0; color:var(--text-2); font-size:13.5px;}
.page-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--text-2); text-decoration:none; font-size:13px; margin-bottom:14px;}
.back-link:hover{color:var(--text);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 13px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--panel-3); color:var(--text); font-size:13px; font-weight:500; white-space:nowrap;
  text-decoration:none; transition:background .15s, border-color .15s, filter .15s, opacity .15s;}
.btn:hover{border-color:rgba(160,170,190,0.14); background:#1B2029;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn .ico{width:15px; height:15px;}
.btn-primary{background:var(--green); border-color:var(--green); color:var(--green-ink); font-weight:600;}
.btn-primary:hover{background:var(--green); border-color:var(--green); filter:brightness(1.07);}
.btn-danger{background:var(--red-strong); border-color:var(--red-strong); color:#fff; font-weight:600;}
.btn-danger:hover{background:var(--red-strong); border-color:var(--red-strong); filter:brightness(1.1);}
.btn-warn{background:var(--amber); border-color:var(--amber); color:#241800; font-weight:600;}
.btn-warn:hover{background:var(--amber); filter:brightness(1.06);}
.btn-ghost{background:none; border-color:transparent; color:var(--text-2);}
.btn-ghost:hover{background:var(--hover); border-color:transparent; color:var(--text);}
.btn-sm{height:28px; padding:0 10px; font-size:12.5px; border-radius:7px;}
.btn-icon{width:34px; padding:0;}
.btn-sm.btn-icon{width:28px;}
.btn.loading{pointer-events:none; opacity:.75;}
.btn.loading::after{content:""; width:12px; height:12px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- cards ---------- */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); min-width:0;}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 0;}
.card-head h2, .card-head h3{font-size:14px; font-weight:600; margin:0;}
.card-head p{margin:2px 0 0; font-size:12.5px; color:var(--text-2);}
.card-body{padding:16px 18px 18px;}
.card-foot{border-top:1px solid var(--border); padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.link-btn{background:none; border:none; padding:0; color:var(--text-2); font-size:12.5px; font-weight:500; display:inline-flex; align-items:center; gap:4px; text-decoration:none;}
.link-btn:hover{color:var(--text);}
.link-btn .ico{width:14px; height:14px;}

.grid{display:grid; gap:16px;}
.grid-stats{grid-template-columns:repeat(6, minmax(0,1fr)); margin-bottom:16px;}
.grid-2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}
.grid-2-even{grid-template-columns:repeat(2, minmax(0,1fr));}
.grid-detail{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); align-items:start;}
.stack{display:flex; flex-direction:column; gap:16px; min-width:0;}
.mt{margin-top:16px;}

/* ---------- stat cards ---------- */
.stat{padding:16px 16px 14px; display:flex; flex-direction:column; gap:10px;}
.stat-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.stat-label{font-size:12.5px; color:var(--text-2); font-weight:500;}
.stat-icon{width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:var(--panel-3); color:var(--text-2);}
.stat-icon .ico{width:15px; height:15px;}
.stat-value{font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;}
.stat-foot{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3); min-height:18px;}
.delta{display:inline-flex; align-items:center; gap:2px; font-weight:600; font-variant-numeric:tabular-nums;}
.delta .ico{width:12px; height:12px; stroke-width:2.25;}
.delta.up{color:var(--green);} .delta.down{color:var(--red);} .delta.flat{color:var(--text-3);}
.stat.attention .stat-icon{color:var(--amber); background:var(--amber-soft);}

/* ---------- badges / pills ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap;}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.pill-active{background:var(--green-soft); color:var(--green);}
.pill-pending{background:var(--amber-soft); color:var(--amber);}
.pill-suspended{background:var(--red-soft); color:var(--red);}
.pill-deactivated{background:var(--gray-soft); color:var(--text-2);}
.role{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-2); white-space:nowrap;}
.role .ico{width:13px; height:13px;}
.role-admin{color:var(--violet);}
.role-moderator{color:var(--sky);}
.tag{display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:6px; font-size:11.5px; font-weight:500; background:var(--panel-3); color:var(--text-2); border:1px solid var(--border);}
.tag-you{font-size:10.5px; height:18px; text-transform:uppercase; letter-spacing:.04em;}

/* ---------- avatar ---------- */
.avatar{width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  font:600 12px 'Inter', sans-serif; color:#0A0C11; letter-spacing:.01em;}
.avatar.sm{width:28px; height:28px; font-size:11px;}
.avatar.lg{width:56px; height:56px; font-size:19px;}
.user-cell{display:flex; align-items:center; gap:11px; min-width:0;}
.user-cell .meta{min-width:0;}
.user-cell .name{font-weight:500; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-cell .sub{font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---------- forms ---------- */
.input, .select{height:34px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--panel-2); color:var(--text);
  padding:0 11px; font-size:13px; transition:border-color .15s, box-shadow .15s; min-width:0;}
.input::placeholder, textarea::placeholder{color:var(--text-3);}
.input:focus, .select:focus, textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,217,163,.15);}
.select{appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8296' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:14px;}
.select option{background:var(--panel-2);}
textarea.input{height:auto; padding:9px 11px; resize:vertical; min-height:72px; line-height:1.5;}
.input:disabled, .select:disabled{opacity:.6; cursor:not-allowed;}
.search-field{position:relative; display:flex; align-items:center;}
.search-field .ico{position:absolute; left:10px; color:var(--text-3); pointer-events:none;}
.search-field .input{padding-left:32px; width:100%;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:12.5px; font-weight:500; color:var(--text-2);}
.field .hint{font-size:12px; color:var(--text-3);}
.field .err{font-size:12px; color:var(--red);}

/* checkbox */
.cb{appearance:none; width:16px; height:16px; border-radius:4px; border:1px solid rgba(148,163,184,.4); background:var(--panel-2); cursor:pointer;
  display:inline-grid; place-content:center; margin:0; transition:background .12s, border-color .12s; vertical-align:middle;}
.cb::after{content:""; width:9px; height:9px; clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background:var(--green-ink); transform:scale(0); transition:transform .1s;}
.cb:checked, .cb:indeterminate{background:var(--green); border-color:var(--green);}
.cb:checked::after{transform:scale(1);}
.cb:indeterminate::after{clip-path:none; height:2px; width:8px; transform:scale(1);}

/* toggle */
.switch{position:relative; display:inline-flex; width:36px; height:20px; flex-shrink:0;}
.switch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1;}
.switch span{position:absolute; inset:0; border-radius:999px; background:rgba(148,163,184,.25); transition:background .18s;}
.switch span::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .18s var(--ease); box-shadow:0 1px 2px rgba(0,0,0,.4);}
.switch input:checked + span{background:var(--green);}
.switch input:checked + span::after{transform:translateX(16px);}
.switch input:focus-visible + span{outline:2px solid var(--green); outline-offset:2px;}
.switch input:disabled{cursor:not-allowed;} .switch input:disabled + span{opacity:.5;}

/* segmented */
.seg{display:inline-flex; padding:3px; gap:2px; border-radius:var(--radius-sm); background:var(--panel-2); border:1px solid var(--border);}
.seg button{height:26px; padding:0 10px; border:none; border-radius:6px; background:none; color:var(--text-2); font-size:12.5px; font-weight:500; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.seg button:hover{color:var(--text);}
.seg button.on{background:var(--panel-3); color:var(--text); box-shadow:0 0 0 1px var(--border-strong);}
.seg .count{font:500 11px var(--mono); color:var(--text-3);}

/* ---------- toolbar ---------- */
.toolbar{display:flex; align-items:center; gap:8px; padding:14px 16px; flex-wrap:wrap; border-bottom:1px solid var(--border);}
.toolbar .search-field{flex:1 1 200px; max-width:300px;}
.toolbar .spacer{flex:1;}
.bulkbar{display:flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(0,217,163,.06); border-bottom:1px solid var(--border); flex-wrap:wrap;
  animation:pageIn .15s var(--ease);}
.bulkbar .count{font-weight:600; font-size:13px; margin-right:6px;}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;}
table.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:13px;}
.tbl th{position:sticky; top:0; text-align:left; font-size:12px; font-weight:500; color:var(--text-3); padding:9px 14px; background:var(--panel);
  border-bottom:1px solid var(--border); white-space:nowrap;}
.tbl th.sortable{cursor:pointer; user-select:none;}
.tbl th.sortable:hover{color:var(--text);}
.tbl th .sort{display:inline-flex; vertical-align:-2px; margin-left:3px;}
.tbl th .sort .ico{width:12px; height:12px;}
.tbl td{padding:10px 14px; border-bottom:1px solid rgba(160,170,190,0.06); vertical-align:middle; white-space:nowrap;}
.tbl tbody tr{transition:background .12s;}
.tbl tbody tr:hover{background:var(--hover);}
.tbl tbody tr.selected{background:rgba(0,217,163,.05);}
.tbl tbody tr.clickable{cursor:pointer;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl .c-check{width:40px; padding-right:0;}
.tbl .c-actions{width:48px; text-align:right;}
.tbl .right{text-align:right;}
.tbl .c-sub{font-size:12px; color:var(--text-3);}
.pager{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-2); flex-wrap:wrap;}
.pager .ctrl{display:flex; align-items:center; gap:8px;}
.pager .select{height:28px; font-size:12.5px;}

/* ---------- lists ---------- */
.list{list-style:none; margin:0; padding:0;}
.list-row{display:flex; align-items:center; gap:12px; padding:11px 18px; border-top:1px solid rgba(160,170,190,0.06);}
.list-row:first-child{border-top:none;}
.list-row .grow{flex:1; min-width:0;}
.feed-row{display:flex; gap:12px; padding:11px 18px; border-top:1px solid rgba(160,170,190,0.06); font-size:13px;}
.feed-row:first-child{border-top:none;}
.feed-icon{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--panel-3); color:var(--text-2);}
.feed-icon .ico{width:14px; height:14px;}
.feed-text{flex:1; min-width:0; color:var(--text-2); line-height:1.45;}
.feed-text b{color:var(--text); font-weight:500;}
.feed-time{font-size:12px; color:var(--text-3); white-space:nowrap;}
.tone-green{color:var(--green); background:var(--green-soft);}
.tone-amber{color:var(--amber); background:var(--amber-soft);}
.tone-red{color:var(--red); background:var(--red-soft);}
.tone-violet{color:var(--violet); background:var(--violet-soft);}
.tone-sky{color:var(--sky); background:var(--sky-soft);}
.tone-gray{color:var(--text-2); background:var(--gray-soft);}
.event-cell{display:flex; align-items:center; gap:10px;}
.event-cell .feed-icon{width:26px; height:26px;}

/* timeline */
.timeline{list-style:none; margin:0; padding:4px 18px 16px;}
.timeline li{position:relative; display:flex; gap:12px; padding:10px 0 0;}
.timeline li:not(:last-child)::before{content:""; position:absolute; left:13px; top:40px; bottom:-10px; width:1px; background:var(--border);}

/* definition list */
.dl{display:grid; grid-template-columns:minmax(110px, auto) 1fr; gap:0; margin:0; font-size:13px;}
.dl dt{color:var(--text-3); padding:9px 0; border-top:1px solid rgba(160,170,190,0.06);}
.dl dd{margin:0; padding:9px 0 9px 12px; border-top:1px solid rgba(160,170,190,0.06); text-align:right; min-width:0; overflow-wrap:anywhere;}
.dl dt:first-of-type, .dl dd:first-of-type{border-top:none;}
.copyable{display:inline-flex; align-items:center; gap:6px; max-width:100%;}
.copyable .mono{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* perm list */
.perm{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; border-top:1px solid rgba(160,170,190,0.06);}
.perm:first-child{border-top:none;}
.perm .ico{width:15px; height:15px;}
.perm.yes .ico{color:var(--green);} .perm.no{color:var(--text-3);} .perm.no .ico{color:var(--text-3);}

/* profile header */
.profile-head{display:flex; align-items:center; gap:16px; padding:20px; flex-wrap:wrap;}
.profile-head .who{flex:1; min-width:200px;}
.profile-head h1{font-size:20px; font-weight:600; margin:0; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.profile-head .sub{color:var(--text-2); font-size:13px; margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.mini-stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--border);}
.mini-stat{padding:14px 20px; border-left:1px solid var(--border);}
.mini-stat:first-child{border-left:none;}
.mini-stat .k{font-size:12px; color:var(--text-3);}
.mini-stat .v{font-size:18px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums;}
.notice{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius-sm); font-size:13px; line-height:1.5;}
.notice .ico{margin-top:2px;}
.notice-amber{background:var(--amber-soft); color:#F5C66B; border:1px solid rgba(255,176,32,.25);}
.notice-red{background:var(--red-soft); color:#FF8FA2; border:1px solid rgba(255,77,106,.25);}
.notice-info{background:var(--sky-soft); color:#A9E1FB; border:1px solid rgba(160,170,190,0.088);}

/* pending cards */
.pending-list .list-row{padding:14px 18px;}
.pending-actions{display:flex; gap:6px; flex-shrink:0;}
.pending-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text-3);}
.pending-meta span{display:inline-flex; align-items:center; gap:5px;}
.pending-meta .ico{width:13px; height:13px;}

/* ---------- empty / error / skeleton ---------- */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 20px; color:var(--text-2); font-size:13px;}
.empty .empty-icon{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--panel-3); color:var(--text-2); margin-bottom:12px; border:1px solid var(--border);}
.empty .empty-icon .ico{width:18px; height:18px;}
.empty h3{margin:0 0 4px; font-size:14px; font-weight:600; color:var(--text);}
.empty p{margin:0 0 14px; max-width:360px;}
.empty.error .empty-icon{color:var(--red); background:var(--red-soft); border-color:rgba(255,77,106,.25);}
.empty.compact{padding:28px 16px;}
.sk{display:block; height:12px; border-radius:5px; background:linear-gradient(90deg, var(--panel-3) 0%, #1E2330 50%, var(--panel-3) 100%); background-size:200% 100%; animation:shimmer 1.3s linear infinite;}
@keyframes shimmer{from{background-position:200% 0;} to{background-position:-200% 0;}}
.sk-circle{border-radius:50%;}

/* ---------- popovers / menus ---------- */
.menu{position:fixed; z-index:70; min-width:200px; padding:5px; border-radius:10px; background:var(--panel-3); box-shadow:var(--shadow-pop);
  animation:popIn .12s var(--ease); transform-origin:top right;}
@keyframes popIn{from{opacity:0; transform:scale(.97) translateY(-3px);} to{opacity:1; transform:none;}}
.menu-item{display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border:none; background:none; border-radius:6px; font-size:13px; color:var(--text); text-align:left; text-decoration:none;}
.menu-item .ico{width:15px; height:15px; color:var(--text-2);}
.menu-item:hover, .menu-item:focus-visible{background:rgba(148,163,184,.1); outline:none;}
.menu-item.danger{color:var(--red);} .menu-item.danger .ico{color:var(--red);}
.menu-item:disabled{opacity:.4; cursor:not-allowed; background:none;}
.menu-item .kbd-right{margin-left:auto; font-size:11.5px; color:var(--text-3);}
.menu-sep{height:1px; background:var(--border); margin:5px 2px;}
.menu-label{font-size:11.5px; color:var(--text-3); padding:6px 9px 4px;}
.menu-head{padding:8px 9px 8px; display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--border); margin:-5px -5px 5px; padding:12px 14px;}

.popover{position:fixed; z-index:70; width:380px; max-width:calc(100vw - 24px); border-radius:12px; background:var(--panel-2); box-shadow:var(--shadow-pop); animation:popIn .12s var(--ease); overflow:hidden;}
.popover-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border);}
.popover-head h3{font-size:13.5px; margin:0; font-weight:600;}
.popover-body{max-height:420px; overflow-y:auto;}
.notif-row{display:flex; gap:12px; padding:12px 16px; border-top:1px solid rgba(160,170,190,0.06); font-size:13px; text-decoration:none; color:inherit;}
.notif-row:first-child{border-top:none;}
.notif-row:hover{background:var(--hover);}
.notif-row.unread{background:rgba(255,176,32,.035);}

/* tooltip */
[data-tip]{position:relative;}
.tooltip{position:fixed; z-index:90; pointer-events:none; padding:5px 8px; border-radius:6px; font-size:12px; font-weight:500; color:var(--text);
  background:#232835; box-shadow:0 6px 16px -6px rgba(0,0,0,.6), 0 0 0 1px var(--border-strong); white-space:nowrap; animation:popIn .1s var(--ease);}

/* ---------- modal ---------- */
.overlay{position:fixed; inset:0; z-index:80; background:rgba(3,4,7,.66); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.modal{width:100%; max-width:440px; background:var(--panel-2); border-radius:14px; box-shadow:var(--shadow-pop); animation:modalIn .18s var(--ease); max-height:calc(100vh - 40px); overflow:auto;}
@keyframes modalIn{from{opacity:0; transform:translateY(6px) scale(.985);} to{opacity:1; transform:none;}}
.modal-body{padding:22px 22px 6px;}
.modal-icon{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.modal-icon .ico{width:18px; height:18px;}
.modal h2{font-size:16px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em;}
.modal p.desc{margin:0 0 16px; font-size:13.5px; color:var(--text-2); line-height:1.55;}
.modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 22px 20px;}
.modal-user{display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); margin-bottom:16px;}
.radio-list{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.radio-card{display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s, background .15s;}
.radio-card:hover{background:var(--hover);}
.radio-card:has(input:checked){border-color:var(--green); background:rgba(0,217,163,.05);}
.radio-card input{accent-color:var(--green); margin:3px 0 0;}
.radio-card b{font-weight:600; font-size:13px; display:block;}
.radio-card span{font-size:12.5px; color:var(--text-2);}

/* command palette */
.palette{width:100%; max-width:560px; align-self:flex-start; margin-top:12vh; background:var(--panel-2); border-radius:14px; box-shadow:var(--shadow-pop); overflow:hidden; animation:modalIn .15s var(--ease);}
.palette-input{display:flex; align-items:center; gap:10px; padding:0 16px; border-bottom:1px solid var(--border);}
.palette-input .ico{color:var(--text-3); width:18px; height:18px;}
.palette-input input{flex:1; height:52px; border:none; background:none; outline:none; font-size:15px;}
.palette-list{max-height:380px; overflow-y:auto; padding:6px;}
.palette-group{font-size:11.5px; color:var(--text-3); padding:8px 10px 4px;}
.palette-item{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:8px; border:none; background:none; text-align:left; font-size:13.5px;}
.palette-item .ico{color:var(--text-2);}
.palette-item.on{background:rgba(148,163,184,.1);}
.palette-item .hint{margin-left:auto; font-size:12px; color:var(--text-3);}
.palette-foot{display:flex; gap:14px; padding:9px 14px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-3);}

/* ---------- toasts ---------- */
.toasts{position:fixed; right:20px; bottom:20px; z-index:100; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none;}
.toast{pointer-events:auto; display:flex; align-items:flex-start; gap:10px; min-width:280px; max-width:400px; padding:12px 14px; border-radius:10px; background:var(--panel-3);
  box-shadow:var(--shadow-pop); font-size:13px; animation:toastIn .22s var(--ease);}
.toast.out{animation:toastOut .18s ease forwards;}
@keyframes toastIn{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
@keyframes toastOut{to{opacity:0; transform:translateY(4px);}}
.toast .ico{margin-top:1px;}
.toast.success .ico{color:var(--green);} .toast.error .ico{color:var(--red);} .toast.info .ico{color:var(--sky);}
.toast .t-body{flex:1;}
.toast .t-title{font-weight:600;}
.toast .t-desc{color:var(--text-2); margin-top:1px;}
.toast .t-close{background:none; border:none; color:var(--text-3); padding:0; margin-left:4px;}
.toast .t-close:hover{color:var(--text);}

/* ---------- charts ---------- */
.chart{position:relative; width:100%; height:220px;}
.chart.tall{height:260px;}
.chart svg{display:block; width:100%; height:100%; overflow:visible;}
.chart .axis text{fill:var(--text-3); font-size:11px; font-family:'Inter', sans-serif; font-variant-numeric:tabular-nums;}
.chart .gridline{stroke:var(--grid); stroke-width:1;}
.chart .baseline{stroke:rgba(148,163,184,.22); stroke-width:1;}
.chart .crosshair{stroke:rgba(148,163,184,.35); stroke-width:1; stroke-dasharray:3 3;}
.chart-tip{position:absolute; z-index:5; pointer-events:none; padding:8px 10px; border-radius:8px; background:#232835; box-shadow:0 8px 20px -8px rgba(0,0,0,.7), 0 0 0 1px var(--border-strong);
  font-size:12px; white-space:nowrap; transform:translate(-50%, calc(-100% - 10px));}
.chart-tip .tt-title{color:var(--text-3); margin-bottom:3px;}
.chart-tip .tt-row{display:flex; align-items:center; gap:7px;}
.chart-tip .tt-row b{font-weight:600; margin-left:auto; padding-left:12px; font-variant-numeric:tabular-nums;}
.sw{width:8px; height:8px; border-radius:2px; display:inline-block; flex-shrink:0;}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-2);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.chart-kpi{display:flex; align-items:baseline; gap:8px; margin-bottom:10px;}
.chart-kpi .v{font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.chart-kpi .l{font-size:12.5px; color:var(--text-3);}

.status-bar{display:flex; height:10px; border-radius:5px; overflow:hidden; gap:2px; margin:6px 0 16px;}
.status-bar div{min-width:3px; transition:flex-grow .3s var(--ease);}
.status-legend{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px;}
.status-legend .row{display:flex; align-items:center; gap:8px; font-size:13px;}
.status-legend .row b{margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums;}
.status-legend .row small{color:var(--text-3); font-size:12px; width:40px; text-align:right;}

.heat{width:100%; border-collapse:separate; border-spacing:3px; font-size:12px;}
.heat th{font-weight:500; color:var(--text-3); text-align:center; padding:4px; white-space:nowrap;}
.heat th.l{text-align:left;}
.heat td{text-align:center; height:32px; border-radius:5px; font-variant-numeric:tabular-nums; color:var(--text); min-width:44px;}
.heat td.l{text-align:left; background:none !important; color:var(--text-2); white-space:nowrap; padding-right:10px;}
.heat td.na{background:transparent; color:var(--text-3);}

/* ---------- tab access ---------- */
.access-tbl th.c-tab, .access-tbl td.c-tab{text-align:center; padding-left:8px; padding-right:8px;}
.access-tbl th.c-tab{white-space:normal; vertical-align:bottom; min-width:92px;}
.th-check{display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; line-height:1.3;}
.th-check span{color:var(--text-2); font-weight:500;}
.th-check:hover span{color:var(--text);}
.th-check small{font-size:11px; font-variant-numeric:tabular-nums;}
.access-tbl .user-cell{min-width:200px;}
.access-tbl .c-del-first{border-left:1px solid var(--border);}
.access-tbl th.c-del .th-check span{color:#FF8FA2;}
.access-tbl .locked-cell{display:inline-flex;}
.access-tbl .cb:disabled{opacity:.55; cursor:not-allowed;}

/* ---------- error log ---------- */
.elog-row{align-items:flex-start;}
.elog-msg{display:flex; align-items:flex-start; gap:8px; font-weight:500; line-height:1.45; overflow-wrap:anywhere;}
.elog-msg .tag{flex-shrink:0; margin-top:1px; border-color:transparent;}
.elog-meta{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:4px; font-size:12px; color:var(--text-3);}
.elog-meta b{color:var(--text-2); font-weight:500;}
.elog-side{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.elog-hits{font:500 12px var(--mono); color:var(--text-2); background:var(--panel-3); border:1px solid var(--border); border-radius:999px; padding:0 7px; line-height:20px;}
.elog-detail{margin-top:6px;}
.elog-detail summary{cursor:pointer; font-size:12px; color:var(--text-2); width:max-content;}
.elog-detail summary:hover{color:var(--text);}
.elog-note{font-size:12.5px; margin-top:12px; display:flex; gap:8px; align-items:flex-start; line-height:1.55;}
.elog-note .ico{margin-top:3px;}
.elog-note b{color:var(--text-2); font-weight:600;}

/* ---------- Support ---------- */
.tk-row{color:inherit; text-decoration:none;}
.tk-row:hover{background:rgba(255,255,255,.02);}
.tk-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.tk-row.unread .tk-dot{background:var(--amber);}
.tk-subject{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tk-row.unread .tk-subject{font-weight:600;}
.tk-title{overflow-wrap:anywhere;}
.tk-page .page-head p a{color:var(--text); font-weight:500;}
.tk-device{display:flex; align-items:center; gap:8px; font-size:12.5px; margin:-12px 0 16px;}
.tk-device .ico{width:14px; height:14px; flex-shrink:0;}
.tk-thread{display:flex; flex-direction:column; gap:12px; margin-bottom:16px;}
.tk-msg{padding:14px 16px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--border);}
.tk-msg.staff{background:rgba(227,177,59,.05); border-color:rgba(227,177,59,.25);}
.tk-msg header{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13px;}
.tk-msg header b{font-weight:600;}
.tk-msg header .faint{font-size:12px;}
.tk-msg header .feed-time{margin-left:auto;}
.tk-msg p{margin:0; font-size:13.5px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere;}
.tk-img{display:block; margin-top:10px; padding:0; border:0; background:none; cursor:zoom-in;}
.tk-img img{display:block; max-width:min(100%, 520px); max-height:300px; border-radius:8px; border:1px solid var(--border);}
.tk-label{display:block; font-size:12.5px; font-weight:600; margin-bottom:8px;}
.tk-reply textarea{width:100%;}
.tk-reply-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:12.5px;}
.tk-lightbox{cursor:zoom-out; padding:24px;}
.tk-lightbox img{max-width:100%; max-height:100%; border-radius:10px;}

/* ---------- settings ---------- */
.settings-layout{display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px; align-items:start;}
.settings-nav{position:sticky; top:80px; display:flex; flex-direction:column; gap:2px;}
.settings-nav a{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--radius-sm); color:var(--text-2); text-decoration:none; font-size:13px; font-weight:500;}
.settings-nav a:hover{background:var(--hover); color:var(--text);}
.settings-nav a.on{color:var(--text); background:var(--hover);}
.settings-nav .ico{width:15px; height:15px;}
.set-section{scroll-margin-top:80px;}
.set-section + .set-section{margin-top:16px;}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 18px; border-top:1px solid rgba(160,170,190,0.06);}
.set-row:first-of-type{border-top:none;}
.set-row .lbl{min-width:0;}
.set-row .lbl b{display:block; font-weight:500; font-size:13.5px;}
.set-row .lbl span{display:block; font-size:12.5px; color:var(--text-3); margin-top:2px;}
.set-row .ctl{flex-shrink:0; width:280px; display:flex; justify-content:flex-end;}
.set-row .ctl .input, .set-row .ctl .select{width:100%;}
/* long text fields (headline, message) sit under their label instead of beside it */
.set-row-wide{flex-direction:column; align-items:stretch; gap:10px;}
.set-row-wide .ctl{width:100%;}
.set-foot{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 18px; border-top:1px solid var(--border); background:rgba(255,255,255,.01); border-radius:0 0 var(--radius) var(--radius);}
.set-foot .dirty{margin-right:auto; font-size:12.5px; color:var(--amber); display:flex; align-items:center; gap:6px;}
.set-foot .dirty::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber);}
.matrix{width:100%; border-collapse:collapse; font-size:13px;}
.matrix th{font-weight:500; color:var(--text-3); text-align:center; padding:10px 18px; font-size:12px; border-bottom:1px solid var(--border);}
.matrix th:first-child{text-align:left;}
.matrix td{padding:11px 18px; border-bottom:1px solid rgba(160,170,190,0.06); text-align:center;}
.matrix td:first-child{text-align:left;}
.matrix td:first-child span{display:block; font-size:12px; color:var(--text-3);}
.matrix tr:last-child td{border-bottom:none;}
.matrix .lockcheck{color:var(--green); display:inline-flex;}
.matrix .lockcheck .ico{width:16px; height:16px;}

/* full-page states */
.center-state{min-height:70vh; display:flex; align-items:center; justify-content:center;}
.center-state .card{max-width:520px; width:100%;}
pre.code{background:var(--panel-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; font:12px/1.55 var(--mono); color:var(--text-2); overflow:auto; margin:10px 0 0; white-space:pre-wrap;}

/* booting */
.app[data-state="booting"] .view{opacity:.0;}

/* ---------- responsive ---------- */
.on-narrow{display:none;}
@media (max-width:1400px){
  .tbl .hide-xl{display:none;}
  .on-wide{display:none;} .on-narrow{display:inline;}
}
@media (max-width:1280px){
  .grid-stats{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width:1100px){
  .grid-2, .grid-detail{grid-template-columns:minmax(0,1fr);}
  .tbl .hide-lg{display:none;}
}
@media (max-width:1024px){
  .sidebar{transform:translateX(-100%); box-shadow:none;}
  .app.nav-open .sidebar{transform:none; box-shadow:24px 0 48px -12px rgba(0,0,0,.7);}
  .app.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(3,4,7,.55); z-index:35; animation:fadeIn .15s;}
  .main{margin-left:0;}
  .menu-btn{display:inline-flex;}
  .collapse-btn{display:none;}
  .topbar{padding:0 20px;}
  .view{padding:24px 20px 56px;}
  .settings-layout{grid-template-columns:minmax(0,1fr);}
  .settings-nav{position:static; flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:4px;}
  .settings-nav a{white-space:nowrap;}
  .tbl .hide-md{display:none;}
}
@media (max-width:760px){
  .grid-stats{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
  .grid-2-even{grid-template-columns:minmax(0,1fr);}
  .search-btn{min-width:0; width:34px; padding:0; justify-content:center; border-color:transparent; background:none;}
  .search-btn-label, .search-btn kbd{display:none;}
  .topbar{padding:0 12px; gap:6px;}
  .view{padding:20px 16px 48px;}
  .page-head h1{font-size:20px;}
  .stat{padding:14px;} .stat-value{font-size:22px;}
  .toolbar .search-field{max-width:none; flex-basis:100%;}
  .toolbar .select{flex:1;}
  .toolbar .seg{max-width:100%; overflow-x:auto; scrollbar-width:none;}
  .toolbar .seg::-webkit-scrollbar{display:none;}
  .toolbar .spacer{display:none;}
  .mini-stats{grid-template-columns:repeat(2, minmax(0,1fr));}
  .mini-stat:nth-child(3){border-left:none;}
  .mini-stat:nth-child(n+3){border-top:1px solid var(--border);}
  .set-row{flex-direction:column; align-items:stretch; gap:10px;}
  .set-row .ctl{width:100%; justify-content:flex-start;}
  .status-legend{grid-template-columns:minmax(0,1fr);}
  .pending-list .list-row{flex-wrap:wrap;}
  .pending-actions{width:100%; flex-wrap:wrap; justify-content:flex-end;}
  .pending-actions .btn-ghost{margin-right:auto; padding-left:0;}
  .elog-row{flex-wrap:wrap;}
  .elog-side{width:100%; justify-content:flex-end;}
  .toasts{left:12px; right:12px; bottom:12px; align-items:stretch;}
  .toast{min-width:0; max-width:none;}
  .crumbs > :not(.cur){display:none;}

  /* tables become cards */
  .tbl.responsive thead{display:none;}
  .tbl.responsive, .tbl.responsive tbody{display:block;}
  .tbl.responsive tr{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 12px; padding:12px 16px; border-bottom:1px solid rgba(160,170,190,0.06); align-items:center;}
  .tbl.responsive td{display:block; padding:0; border:none; white-space:normal;}
  .tbl.responsive td[data-label]{grid-column:2 / -1; display:flex; justify-content:space-between; gap:12px; font-size:12.5px;}
  .tbl.responsive td[data-label]::before{content:attr(data-label); color:var(--text-3);}
  .tbl.responsive td.c-check{grid-row:1; grid-column:1;}
  .tbl.responsive td.c-main{grid-row:1; grid-column:2; min-width:0;}
  .tbl.responsive td.c-actions{grid-row:1; grid-column:3; width:auto;}
  .tbl.responsive td.m-hide{display:none;}
  .tbl.responsive.no-check td.c-main{grid-column:1 / 3;}
  .tbl.responsive.no-check td[data-label]{grid-column:1 / -1;}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}