/* =====================================================================
LiveSoko Admin — Design System
Dense, keyboard-first, light default with dark toggle.
Brand tokens shared with the consumer site; orange is reserved for
primary actions and active state only — admin work is neutral.
===================================================================== */
:root{
--brand:#FF5F35;
--brand-600:#EF4A1D;
--brand-050:#FFF0EB;
--ok:#0E9F6E; --ok-bg:#E7F7F1;
--warn:#C77700; --warn-bg:#FFF5E5;
--danger:#DC2626; --danger-bg:#FEECEC;
--info:#2563EB; --info-bg:#EAF1FE;
--hold:#159A8C; --hold-bg:#E6F5F3;
--muted-bg:#F1F2F4;
--bg:#F7F8F9;
--panel:#FFFFFF;
--panel-2:#FBFBFC;
--sidebar:#0E1013;
--sidebar-text:#9BA2AA;
--sidebar-active:#FFFFFF;
--text:#0B0B0C;
--text-2:#5A6069;
--text-3:#8A9199;
--line:#E4E6EA;
--line-2:#EFF0F3;
--focus:#FF5F35;
--shadow-sm:0 1px 2px rgba(11,11,12,.06);
--shadow:0 1px 3px rgba(11,11,12,.08), 0 8px 24px rgba(11,11,12,.06);
--shadow-lg:0 24px 60px rgba(11,11,12,.18);
--r-xs:6px; --r-sm:8px; --r:10px; --r-lg:14px; --r-pill:999px;
--ff:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--ff-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
--sidebar-w:250px;
--sidebar-w-collapsed:64px;
--topbar-h:56px;
--row-h:44px;
}
html[data-theme="dark"]{
--bg:#0B0D0F;
--panel:#141719;
--panel-2:#191D20;
--sidebar:#08090A;
--sidebar-text:#7E868F;
--text:#F2F4F6;
--text-2:#9BA2AA;
--text-3:#6B737B;
--line:#252A2F;
--line-2:#1D2126;
--muted-bg:#1D2126;
--ok-bg:rgba(14,159,110,.16);
--warn-bg:rgba(199,119,0,.18);
--danger-bg:rgba(220,38,38,.16);
--info-bg:rgba(37,99,235,.18);
--hold-bg:rgba(21,154,140,.18);
--brand-050:rgba(255,95,53,.15);
--shadow-sm:0 1px 2px rgba(0,0,0,.5);
--shadow:0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
--shadow-lg:0 24px 60px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:var(--bg); color:var(--text);
font-family:var(--ff); font-size:14px; line-height:1.5;
-webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer; padding:0}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.02em; line-height:1.2}
h1{font-size:1.4rem} h2{font-size:1.1rem} h3{font-size:.95rem} h4{font-size:.85rem}
p{margin:0}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--ff-mono); font-variant-numeric:tabular-nums}
.num{font-family:var(--ff-mono); font-variant-numeric:tabular-nums; text-align:right}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.tiny{font-size:.75rem}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.grow{flex:1}
.hidden{display:none !important}
.skip{position:absolute;left:-9999px;background:var(--brand);color:#fff;padding:10px 16px;z-index:999}
.skip:focus{left:0;top:0}
/* ---------------- Layout ---------------- */
.app{display:flex; min-height:100vh}
.sidebar{
width:var(--sidebar-w); flex:none; background:var(--sidebar); color:var(--sidebar-text);
display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:60;
transition:width .2s ease, transform .25s ease;
}
body.nav-collapsed .sidebar{width:var(--sidebar-w-collapsed)}
.main{
flex:1; min-width:0; margin-left:var(--sidebar-w);
display:flex; flex-direction:column; transition:margin-left .2s ease;
}
body.nav-collapsed .main{margin-left:var(--sidebar-w-collapsed)}
.sb-head{
height:var(--topbar-h); display:flex; align-items:center; gap:10px;
padding:0 14px; border-bottom:1px solid rgba(255,255,255,.07); flex:none;
}
.sb-logo{display:flex; align-items:center; gap:8px; overflow:hidden}
.sb-logo svg{height:20px; width:auto; flex:none}
.sb-env{
font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
padding:2px 6px; border-radius:4px; background:var(--warn-bg); color:var(--warn); flex:none;
}
html[data-theme="dark"] .sb-env{background:rgba(199,119,0,.25)}
.sb-scroll{flex:1; overflow-y:auto; padding:12px 10px 20px; scrollbar-width:thin}
.sb-scroll::-webkit-scrollbar{width:6px}
.sb-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:3px}
.nav-group{margin-bottom:4px}
.nav-label{
font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
color:rgba(255,255,255,.32); padding:14px 10px 6px; white-space:nowrap; overflow:hidden;
}
body.nav-collapsed .nav-label{opacity:0; height:14px; padding-block:6px}
.nav-item{
display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--r-sm);
color:var(--sidebar-text); font-size:.855rem; font-weight:500; white-space:nowrap;
transition:background .15s, color .15s; position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-item.active{background:rgba(255,95,53,.16); color:#fff}
.nav-item.active::before{
content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
background:var(--brand); border-radius:0 3px 3px 0;
}
.nav-item svg{width:17px; height:17px; flex:none; opacity:.9}
.nav-item .label{overflow:hidden; text-overflow:ellipsis}
.nav-item .count{
margin-left:auto; font-family:var(--ff-mono); font-size:.68rem; font-weight:700;
background:var(--brand); color:#fff; border-radius:var(--r-pill); padding:1px 6px; min-width:18px; text-align:center;
}
.nav-item .count.neutral{background:rgba(255,255,255,.14); color:rgba(255,255,255,.75)}
body.nav-collapsed .nav-item .label,
body.nav-collapsed .nav-item .count{display:none}
body.nav-collapsed .nav-item{justify-content:center; padding-inline:0}
/* ---------------- Topbar ---------------- */
.topbar{
height:var(--topbar-h); background:var(--panel); border-bottom:1px solid var(--line);
display:flex; align-items:center; gap:10px; padding:0 16px; position:sticky; top:0; z-index:50;
}
.iconbtn{
width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center;
color:var(--text-2); transition:background .15s, color .15s; flex:none; position:relative;
}
.iconbtn:hover{background:var(--muted-bg); color:var(--text)}
.iconbtn svg{width:18px; height:18px}
.iconbtn .dot{
position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
background:var(--danger); border:2px solid var(--panel);
}
.searchbtn{
display:flex; align-items:center; gap:9px; height:34px; padding:0 12px; min-width:230px;
border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text-3);
background:var(--panel-2); transition:border-color .15s; font-size:.83rem;
}
.searchbtn:hover{border-color:var(--text-3)}
.searchbtn svg{width:15px; height:15px}
.searchbtn kbd{
margin-left:auto; font-family:var(--ff-mono); font-size:.68rem; border:1px solid var(--line);
border-radius:4px; padding:1px 5px; background:var(--panel); color:var(--text-3);
}
.mkt-switch{
display:flex; align-items:center; gap:7px; height:34px; padding:0 11px;
border:1px solid var(--line); border-radius:var(--r-sm); font-size:.83rem; font-weight:550;
}
.mkt-switch:hover{background:var(--muted-bg)}
.mkt-flag{
font-family:var(--ff-mono); font-size:.66rem; font-weight:700; background:var(--muted-bg);
padding:2px 5px; border-radius:4px;
}
.who{display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px; border-radius:var(--r-pill)}
.who:hover{background:var(--muted-bg)}
.avatar{
width:27px; height:27px; border-radius:50%; background:var(--brand); color:#fff;
display:grid; place-items:center; font-size:.72rem; font-weight:700; flex:none;
}
.who .meta{line-height:1.15; text-align:left}
.who .meta b{display:block; font-size:.8rem; font-weight:600}
.who .meta span{font-size:.68rem; color:var(--text-3)}
/* ---------------- Page ---------------- */
.page{padding:20px; max-width:1600px; width:100%}
.page-head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.page-head .ph-text{min-width:0}
.page-head h1{margin-bottom:4px}
.page-head p{color:var(--text-2); font-size:.85rem}
.page-head .ph-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.crumbs{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-3); margin-bottom:8px}
.crumbs svg{width:12px; height:12px}
.crumbs a:hover{color:var(--brand)}
/* ---------------- Buttons ---------------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
height:34px; padding:0 14px; border-radius:var(--r-sm); font-size:.83rem; font-weight:600;
border:1px solid transparent; white-space:nowrap; transition:background .15s, border-color .15s, opacity .15s;
}
.btn svg{width:15px; height:15px; flex:none}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-600)}
.btn-default{background:var(--panel); border-color:var(--line); color:var(--text)}
.btn-default:hover{background:var(--muted-bg)}
.btn-ghost{color:var(--text-2)}
.btn-ghost:hover{background:var(--muted-bg); color:var(--text)}
.btn-danger{background:var(--danger); color:#fff}
.btn-danger:hover{opacity:.9}
.btn-ok{background:var(--ok); color:#fff}
.btn-ok:hover{opacity:.9}
.btn-sm{height:28px; padding:0 10px; font-size:.78rem; border-radius:var(--r-xs)}
.btn-xs{height:24px; padding:0 8px; font-size:.73rem; border-radius:var(--r-xs)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-block{width:100%}
/* ---------------- Cards & panels ---------------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.card-head{
display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line-2);
}
.card-head h3{flex:1; min-width:0}
.card-head .sub{font-size:.76rem; color:var(--text-3); font-weight:400}
.card-body{padding:16px}
.card-foot{padding:12px 16px; border-top:1px solid var(--line-2); background:var(--panel-2); display:flex; gap:8px; align-items:center}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media (max-width:1180px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g-2-1,.g-1-2{grid-template-columns:1fr} }
@media (max-width:820px){ .g2,.g3,.g4{grid-template-columns:1fr} }
/* KPI */
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px}
.kpi .k-label{font-size:.74rem; color:var(--text-3); font-weight:600; letter-spacing:.02em; display:flex; align-items:center; gap:6px}
.kpi .k-label svg{width:14px; height:14px}
.kpi .k-value{font-family:var(--ff-mono); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; margin:8px 0 4px}
.kpi .k-delta{font-size:.75rem; font-weight:600; display:flex; align-items:center; gap:4px}
.k-up{color:var(--ok)} .k-down{color:var(--danger)} .k-flat{color:var(--text-3)}
/* ---------------- Tables ---------------- */
.toolbar{
display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line-2);
flex-wrap:wrap; background:var(--panel);
}
.field{
display:flex; align-items:center; gap:7px; height:32px; padding:0 10px;
border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); font-size:.81rem;
}
.field svg{width:14px; height:14px; color:var(--text-3); flex:none}
.field input,.field select{
border:0; background:none; outline:none; min-width:0; width:100%; font-size:.81rem;
}
.field.w-search{min-width:220px; flex:1; max-width:340px}
select.field{padding-right:6px; cursor:pointer}
.chipset{display:flex; gap:6px; flex-wrap:wrap}
.chip{
height:28px; padding:0 11px; border-radius:var(--r-pill); border:1px solid var(--line);
font-size:.78rem; font-weight:600; color:var(--text-2); display:inline-flex; align-items:center; gap:6px;
transition:all .15s; background:var(--panel);
}
.chip:hover{border-color:var(--text-3); color:var(--text)}
.chip.on{background:var(--text); color:var(--panel); border-color:var(--text)}
.chip .n{font-family:var(--ff-mono); font-size:.7rem; opacity:.7}
.table-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:.83rem}
.tbl thead th{
position:sticky; top:0; z-index:2; background:var(--panel-2);
text-align:left; font-weight:600; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
color:var(--text-3); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl thead th.sortable{cursor:pointer; user-select:none}
.tbl thead th.sortable:hover{color:var(--text)}
.tbl thead th .arrow{opacity:.4; margin-left:3px}
.tbl tbody td{padding:0 12px; height:var(--row-h); border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl tbody tr.clickable{cursor:pointer}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .col-tight{width:1%; white-space:nowrap}
.tbl .col-actions{width:1%; white-space:nowrap; text-align:right}
.cell-2{line-height:1.25}
.cell-2 b{display:block; font-weight:600}
.cell-2 span{font-size:.74rem; color:var(--text-3)}
.thumb{
width:34px; height:34px; border-radius:var(--r-xs); background:var(--muted-bg); flex:none;
display:grid; place-items:center; font-size:.65rem; font-weight:700; color:var(--text-3); overflow:hidden;
}
.with-thumb{display:flex; align-items:center; gap:10px; min-width:0}
.checkbox{width:15px; height:15px; accent-color:var(--brand); cursor:pointer}
.pager{display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--line-2); font-size:.79rem; color:var(--text-2); flex-wrap:wrap}
.pager .pages{margin-left:auto; display:flex; gap:4px}
.pager .pg{min-width:28px; height:28px; padding:0 8px; border-radius:var(--r-xs); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600}
.pager .pg.on{background:var(--text); color:var(--panel); border-color:var(--text)}
.pager .pg:hover:not(.on){background:var(--muted-bg)}
/* ---------------- Pills ---------------- */
.pill{
display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px;
border-radius:var(--r-pill); font-size:.73rem; font-weight:650; white-space:nowrap;
background:var(--muted-bg); color:var(--text-2);
}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.pill.no-dot::before{display:none}
.p-ok{background:var(--ok-bg); color:var(--ok)}
.p-warn{background:var(--warn-bg); color:var(--warn)}
.p-danger{background:var(--danger-bg); color:var(--danger)}
.p-info{background:var(--info-bg); color:var(--info)}
.p-hold{background:var(--hold-bg); color:var(--hold)}
.p-live{background:var(--brand-050); color:var(--brand-600)}
html[data-theme="dark"] .p-live{color:#FF8A66}
.p-live::before{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.tag{
display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:var(--r-xs);
font-family:var(--ff-mono); font-size:.68rem; font-weight:600; background:var(--muted-bg); color:var(--text-2);
}
/* ---------------- Forms ---------------- */
.form-grid{display:grid; gap:14px}
.fg{display:flex; flex-direction:column; gap:6px}
.fg > label{font-size:.78rem; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:6px}
.fg .req{color:var(--danger)}
.fg .hint{font-size:.73rem; color:var(--text-3)}
.input,.textarea,.select{
width:100%; min-height:36px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
background:var(--panel); font-size:.85rem; outline:none; transition:border-color .15s, box-shadow .15s;
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}
.input:disabled{background:var(--muted-bg); color:var(--text-3)}
.textarea{min-height:88px; resize:vertical; font-family:inherit}
.select{cursor:pointer; appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9199' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 9px center; background-size:15px; padding-right:30px;
}
.input-group{display:flex; align-items:stretch}
.input-group .addon{
display:flex; align-items:center; padding:0 10px; background:var(--muted-bg);
border:1px solid var(--line); font-size:.8rem; color:var(--text-3); font-family:var(--ff-mono);
}
.input-group .addon:first-child{border-right:0; border-radius:var(--r-sm) 0 0 var(--r-sm)}
.input-group .addon:last-child{border-left:0; border-radius:0 var(--r-sm) var(--r-sm) 0}
.input-group .input:not(:first-child){border-radius:0 var(--r-sm) var(--r-sm) 0}
.input-group .input:not(:last-child){border-radius:var(--r-sm) 0 0 var(--r-sm)}
.switch{position:relative; width:38px; height:22px; flex:none}
.switch input{opacity:0; width:0; height:0; position:absolute}
.switch .track{
position:absolute; inset:0; background:var(--line); border-radius:var(--r-pill);
transition:background .18s; cursor:pointer;
}
.switch .track::after{
content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
background:#fff; transition:transform .18s; box-shadow:var(--shadow-sm);
}
.switch input:checked + .track{background:var(--ok)}
.switch input:checked + .track::after{transform:translateX(16px)}
.switch input:focus-visible + .track{outline:2px solid var(--focus); outline-offset:2px}
.row-toggle{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.row-toggle:last-child{border-bottom:0}
.row-toggle .rt-text{flex:1; min-width:0}
.row-toggle b{display:block; font-size:.85rem; font-weight:600}
.row-toggle span{font-size:.76rem; color:var(--text-3)}
/* ---------------- Detail lists ---------------- */
.dl{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:.83rem; align-items:baseline}
.dl dt{color:var(--text-3); font-size:.78rem; white-space:nowrap}
.dl dd{margin:0; font-weight:550; text-align:right}
.stack-list > *{padding:11px 0; border-bottom:1px solid var(--line-2)}
.stack-list > *:last-child{border-bottom:0}
/* Timeline */
.timeline{position:relative; padding-left:22px}
.timeline::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative; padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
content:""; position:absolute; left:-19px; top:5px; width:10px; height:10px; border-radius:50%;
background:var(--panel); border:2px solid var(--line);
}
.tl-item.done::before{background:var(--ok); border-color:var(--ok)}
.tl-item.now::before{background:var(--brand); border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-050)}
.tl-item b{display:block; font-size:.84rem; font-weight:600}
.tl-item span{font-size:.75rem; color:var(--text-3)}
/* ---------------- Tabs ---------------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
padding:9px 13px; font-size:.84rem; font-weight:600; color:var(--text-3);
border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .15s;
}
.tab:hover{color:var(--text)}
.tab.on{color:var(--brand); border-bottom-color:var(--brand)}
.tab .n{font-family:var(--ff-mono); font-size:.7rem; opacity:.65; margin-left:4px}
/* ---------------- Category tree ---------------- */
.tree{font-size:.85rem}
.tree-row{
display:flex; align-items:center; gap:9px; height:38px; padding-right:10px;
border-bottom:1px solid var(--line-2); transition:background .12s;
}
.tree-row:hover{background:var(--panel-2)}
.tree-row .twist{
width:20px; height:20px; display:grid; place-items:center; flex:none; color:var(--text-3);
border-radius:4px; transition:transform .15s;
}
.tree-row .twist:hover{background:var(--muted-bg); color:var(--text)}
.tree-row .twist svg{width:13px; height:13px}
.tree-row.open > .twist{transform:rotate(90deg)}
.tree-row .twist.leaf{visibility:hidden}
.tree-row .drag{color:var(--text-3); cursor:grab; opacity:0; transition:opacity .15s}
.tree-row:hover .drag{opacity:1}
.tree-row .drag svg{width:14px; height:14px}
.tree-row .tname{font-weight:550; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tree-row .tmeta{margin-left:auto; display:flex; align-items:center; gap:12px; flex:none}
.tree-children.collapsed{display:none}
/* ---------------- Slide-over ---------------- */
.scrim{
position:fixed; inset:0; background:rgba(8,9,10,.5); backdrop-filter:blur(2px);
opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s; z-index:80;
}
.scrim.on{opacity:1; visibility:visible}
.sheet{
position:fixed; top:0; right:0; bottom:0; width:min(560px, 96vw); background:var(--panel);
box-shadow:var(--shadow-lg); transform:translateX(102%); transition:transform .3s cubic-bezier(.32,.72,0,1);
z-index:85; display:flex; flex-direction:column;
}
.sheet.on{transform:none}
.sheet.wide{width:min(880px, 98vw)}
.sheet-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); flex:none}
.sheet-head h3{flex:1; min-width:0}
.sheet-body{flex:1; overflow-y:auto; padding:18px}
.sheet-foot{padding:13px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background:var(--panel-2); flex:none}
/* ---------------- Modal ---------------- */
.modal{
position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px;
opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.modal.on{opacity:1; visibility:visible}
.modal-box{
position:relative; background:var(--panel); border-radius:var(--r-lg); width:min(460px,100%);
box-shadow:var(--shadow-lg); transform:translateY(10px) scale(.99); transition:transform .24s cubic-bezier(.32,.72,0,1);
max-height:88vh; display:flex; flex-direction:column;
}
.modal.on .modal-box{transform:none}
.modal-box.lg{width:min(720px,100%)}
.modal-head{padding:18px 20px 0}
.modal-head h3{margin-bottom:5px}
.modal-head p{font-size:.83rem; color:var(--text-2)}
.modal-body{padding:18px 20px; overflow-y:auto}
.modal-foot{padding:14px 20px; border-top:1px solid var(--line-2); display:flex; gap:8px; justify-content:flex-end}
.modal-icon{
width:40px; height:40px; border-radius:var(--r); display:grid; place-items:center; margin-bottom:12px;
}
.modal-icon svg{width:20px; height:20px}
.mi-danger{background:var(--danger-bg); color:var(--danger)}
.mi-warn{background:var(--warn-bg); color:var(--warn)}
.mi-ok{background:var(--ok-bg); color:var(--ok)}
.mi-brand{background:var(--brand-050); color:var(--brand)}
/* ---------------- Command palette ---------------- */
.cmdk{position:fixed; inset:0; z-index:95; display:flex; justify-content:center; padding-top:12vh;
opacity:0; visibility:hidden; transition:opacity .16s, visibility .16s}
.cmdk.on{opacity:1; visibility:visible}
.cmdk-box{
position:relative; width:min(580px,94vw); max-height:64vh; background:var(--panel);
border-radius:var(--r-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
transform:translateY(-8px); transition:transform .2s;
}
.cmdk.on .cmdk-box{transform:none}
.cmdk-input{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-2)}
.cmdk-input svg{width:17px; height:17px; color:var(--text-3)}
.cmdk-input input{flex:1; border:0; outline:none; background:none; font-size:.95rem}
.cmdk-list{overflow-y:auto; padding:6px}
.cmdk-sec{font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); font-weight:700; padding:9px 10px 5px}
.cmdk-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); font-size:.87rem; cursor:pointer}
.cmdk-item svg{width:16px; height:16px; color:var(--text-3)}
.cmdk-item.sel{background:var(--brand-050)}
.cmdk-item .path{margin-left:auto; font-size:.72rem; color:var(--text-3); font-family:var(--ff-mono)}
/* ---------------- Misc ---------------- */
.empty{padding:56px 20px; text-align:center}
.empty svg{width:38px; height:38px; color:var(--text-3); margin:0 auto 14px}
.empty b{display:block; font-size:.95rem; margin-bottom:5px}
.empty p{font-size:.83rem; color:var(--text-2); max-width:34ch; margin:0 auto 16px}
.banner{
display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-radius:var(--r);
font-size:.83rem; border:1px solid transparent; margin-bottom:16px;
}
.banner svg{width:17px; height:17px; flex:none; margin-top:1px}
.banner b{display:block; margin-bottom:2px}
.b-warn{background:var(--warn-bg); color:var(--warn); border-color:rgba(199,119,0,.25)}
.b-danger{background:var(--danger-bg); color:var(--danger); border-color:rgba(220,38,38,.25)}
.b-info{background:var(--info-bg); color:var(--info); border-color:rgba(37,99,235,.25)}
.b-ok{background:var(--ok-bg); color:var(--ok); border-color:rgba(14,159,110,.25)}
.banner .banner-act{margin-left:auto; flex:none}
.bar-track{height:6px; border-radius:3px; background:var(--muted-bg); overflow:hidden}
.bar-track i{display:block; height:100%; border-radius:3px; background:var(--brand)}
.spark{display:flex; align-items:flex-end; gap:2px; height:34px}
.spark i{flex:1; background:var(--brand-050); border-radius:2px 2px 0 0; min-height:2px}
.spark i.hi{background:var(--brand)}
.toast-wrap{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{
display:flex; align-items:center; gap:9px; background:var(--text); color:var(--bg);
padding:10px 16px; border-radius:var(--r-pill); font-size:.83rem; font-weight:600;
box-shadow:var(--shadow); animation:toastIn .25s cubic-bezier(.2,.8,.3,1);
}
.toast svg{width:15px; height:15px}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)}to{opacity:1;transform:none}}
.role-lock{opacity:.45; pointer-events:none; position:relative}
/* Mobile */
.nav-scrim{display:none}
@media (max-width:1000px){
.sidebar{transform:translateX(-100%)}
body.nav-open .sidebar{transform:none}
.main{margin-left:0 !important}
.nav-scrim{display:block; position:fixed; inset:0; background:rgba(8,9,10,.5); z-index:55; opacity:0; visibility:hidden; transition:.2s}
body.nav-open .nav-scrim{opacity:1; visibility:visible}
.searchbtn{min-width:0; width:34px; padding:0; justify-content:center}
.searchbtn span,.searchbtn kbd{display:none}
.who .meta{display:none}
.page{padding:14px}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
/* =====================================================================
FORMS, EDITORS & MEDIA (added with the create/edit surfaces)
===================================================================== */
.form-grid.split{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.split > .fg:not(.half),
.form-grid.split > .form-divider,
.form-grid.split > .banner,
.form-grid.split > .row-toggle{grid-column:1 / -1}
@media (max-width:640px){ .form-grid.split{grid-template-columns:1fr} }
.form-divider{
display:flex; align-items:center; gap:12px; margin:6px 0 2px;
font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
font-weight:700; color:var(--text-3);
}
.form-divider::after{content:""; flex:1; height:1px; background:var(--line)}
.input-inline{
min-height:28px; padding:4px 8px; font-size:.8rem; border-color:transparent;
background:transparent; width:100%; min-width:64px;
}
.input-inline:hover{border-color:var(--line); background:var(--panel)}
.input-inline:focus{border-color:var(--brand); background:var(--panel)}
td .input-inline{text-align:inherit}
.select-sm{min-height:28px; padding:3px 26px 3px 8px; font-size:.78rem; background-position:right 6px center}
.select.locked{opacity:.5; cursor:not-allowed}
.dropzone{
border:1.5px dashed var(--line); border-radius:var(--r); padding:22px 14px;
display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
color:var(--text-3); cursor:pointer; transition:border-color .15s, background .15s;
}
.dropzone:hover{border-color:var(--brand); background:var(--brand-050)}
.dropzone svg{width:22px; height:22px}
.dropzone b{font-size:.83rem; color:var(--text-2); font-weight:600}
.taglist{
display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:7px;
border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); min-height:38px;
}
.tagchip{
display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 5px 0 9px;
border-radius:var(--r-xs); background:var(--muted-bg); font-size:.78rem; font-weight:550;
}
.tagchip button{display:grid; place-items:center; color:var(--text-3); width:16px; height:16px; border-radius:3px}
.tagchip button:hover{background:var(--danger-bg); color:var(--danger)}
.tagchip svg{width:11px; height:11px}
.taginput{border:0; outline:none; background:none; flex:1; min-width:80px; font-size:.82rem; padding:0 4px}
.swatch-cell{display:flex; align-items:center; gap:7px}
.swatch{width:18px; height:18px; border-radius:4px; border:1px solid var(--line); flex:none}
.drag-handle{color:var(--text-3); cursor:grab; display:grid; place-items:center}
.drag-handle:active{cursor:grabbing}
.drag-handle svg{width:14px; height:14px}
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:10px}
.media-grid.lib{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.media-tile{
position:relative; aspect-ratio:1; background:var(--muted-bg); border-radius:var(--r-sm);
display:grid; place-items:center; color:var(--text-3); border:1px solid var(--line-2);
}
.media-tile svg{width:22px; height:22px}
.media-tile.add{border:1.5px dashed var(--line); cursor:pointer; gap:4px; align-content:center}
.media-tile.add:hover{border-color:var(--brand); color:var(--brand)}
.media-tile.lib{cursor:pointer}
.media-tile.lib:hover{border-color:var(--brand)}
.media-pos{
position:absolute; left:6px; top:6px; width:18px; height:18px; border-radius:4px;
background:var(--text); color:var(--panel); font-size:.65rem; font-weight:700;
display:grid; place-items:center; font-family:var(--ff-mono);
}
.media-x{
position:absolute; right:5px; top:5px; width:20px; height:20px; border-radius:4px;
background:var(--panel); color:var(--text-3); display:grid; place-items:center;
opacity:0; transition:opacity .15s; box-shadow:var(--shadow-sm);
}
.media-tile:hover .media-x{opacity:1}
.media-x:hover{color:var(--danger)}
.media-x svg{width:12px; height:12px}
.media-meta{
position:absolute; left:0; right:0; bottom:0; padding:4px 6px; font-size:.65rem;
font-family:var(--ff-mono); color:var(--text-3); background:linear-gradient(transparent,var(--panel) 60%);
text-align:center;
}
.media-badge{
position:absolute; left:6px; top:6px; padding:1px 6px; border-radius:var(--r-pill);
background:var(--warn-bg); color:var(--warn); font-size:.62rem; font-weight:700;
}
.inherit-box{
margin-top:14px; padding:14px; border:1px solid var(--line); border-left:3px solid var(--hold);
border-radius:var(--r-sm); background:var(--panel-2);
}
.inherit-head{display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:.8rem; color:var(--hold)}
.inherit-head svg{width:15px; height:15px; flex:none}
.inherit-head b{color:var(--text-2); font-weight:600}
.perm-grid{display:flex; flex-wrap:wrap; gap:6px}
table.matrix td{padding:6px 10px}
table.matrix td:first-child{min-width:180px}
table.matrix th:not(:first-child){text-align:center}
.push-preview{
display:flex; gap:11px; padding:12px; border-radius:var(--r); background:var(--muted-bg);
border:1px solid var(--line-2);
}
.pp-icon{
width:34px; height:34px; border-radius:9px; background:var(--brand); color:#fff;
display:grid; place-items:center; font-size:.7rem; font-weight:700; flex:none;
}
.pp-body b{display:block; font-size:.85rem; margin-bottom:2px}
.pp-body p{font-size:.8rem; color:var(--text-2); margin-bottom:4px; line-height:1.45}
/* =====================================================================
MULTI-PAGE ADDITIONS
Utility classes used by the generated pages.
===================================================================== */
.link{color:var(--brand)}
.link:hover{text-decoration:underline}
.link-brand{color:var(--brand); font-weight:600}
.bold{font-weight:600}
.ml-auto{margin-left:auto}
.mt-8{margin-top:8px} .mt-18{margin-top:18px} .mt-20{margin-top:20px} .mt-22{margin-top:22px}
.ok-text{color:var(--ok)} .danger-text{color:var(--danger)} .warn-text{color:var(--warn)}
.grow{flex:1}
.chev-sm{width:13px !important; height:13px !important; opacity:.5}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.btn-block{width:100%}
.btn-tall{height:40px}
.is-disabled{opacity:.45; pointer-events:none}
.spark-x{display:flex; justify-content:space-between; margin-top:8px}
.bar-head{display:flex; justify-content:space-between}
.rollout{display:flex; align-items:center; gap:8px; justify-content:flex-end}
.rollout .bar-track{width:60px}
.att-row{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.att-row:last-child{border-bottom:0}
.att-row svg{width:42px; height:42px; flex:none; color:var(--text-3)}
.att-ico{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none}
.att-ico svg{width:16px; height:16px}
.attr-row{display:flex; align-items:center; gap:8px}
.attr-row svg{width:14px; height:14px; flex:none; color:var(--text-3)}
.stars{font-size:.8rem; letter-spacing:1px}
.stars .on{color:var(--brand)}
.stars .off{color:var(--line)}
.thumb.sm{width:26px; height:26px; font-size:.6rem}
.chat-scroll{max-height:340px; overflow-y:auto}
.chat-msg{display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line-2)}
.chat-msg.flagged{background:var(--danger-bg)}
.chat-msg .cm-body{flex:1; min-width:0}
.chat-msg .cm-head{display:flex; gap:7px; align-items:center}
.chat-msg .cm-text{font-size:.83rem}
.chat-msg .cm-acts{display:flex; gap:4px; align-self:center}
.tree-row .tnum{min-width:56px; text-align:right}
.tree-row .tsub{min-width:64px; text-align:right}
.check-inline{display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--text-2); font-size:.83rem}
.check-inline.start{align-items:flex-start; font-size:.8rem}
.check-inline.start .checkbox{margin-top:2px}
.row-between{display:flex; align-items:center; justify-content:space-between; font-size:.83rem}
/* Table cells with an input keep their alignment */
td .input-inline{width:100%}
/* Media tiles now carry real ![]()
placeholders */
.media-tile img{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.media-tile{overflow:hidden}
/* Avatar fallback image, used when a user has no uploaded photo */
.avatar.img-fallback{background:var(--muted-bg) url("../images/placeholder-avatar.svg") center/cover no-repeat; color:transparent}
/* =====================================================================
Server-rendered additions
Components that only exist now that pages are backed by real data:
the market switcher menu, inline field errors, the neutral pill, and
the raw-payload viewer used by the webhook and provider sheets.
===================================================================== */
/* Market switcher ---------------------------------------------------- */
.mkt-wrap{position:relative}
.mkt-menu{
position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:210px;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
box-shadow:var(--shadow-lg); padding:5px; display:grid; gap:1px}
.mkt-menu a{
display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-xs);
font-size:.83rem; color:var(--text)}
.mkt-menu a:hover{background:var(--muted-bg)}
.mkt-menu a.on{background:var(--muted-bg); font-weight:600}
/* Inline validation --------------------------------------------------- */
.fg-err{display:block; margin-top:6px; font-size:.76rem; color:var(--danger); font-weight:500}
.fg.has-err .input,
.fg.has-err .select,
.fg.has-err .textarea{border-color:var(--danger)}
.fg.has-err .input:focus,
.fg.has-err .select:focus,
.fg.has-err .textarea:focus{box-shadow:0 0 0 3px var(--danger-bg)}
/* Pills ---------------------------------------------------------------- */
.p-neutral{background:var(--muted-bg); color:var(--text-2)}
/* Back link above a page title ---------------------------------------- */
.back-link{
display:inline-flex; align-items:center; gap:5px; margin-bottom:7px;
font-size:.79rem; font-weight:600; color:var(--text-3)}
.back-link:hover{color:var(--brand)}
.back-link svg{width:14px; height:14px}
/* Raw JSON / payload viewer ------------------------------------------- */
.raw-json{
font-family:var(--ff-mono); font-size:.74rem; line-height:1.6; white-space:pre-wrap;
word-break:break-word; background:var(--muted-bg); border:1px solid var(--line-2);
border-radius:var(--r-sm); padding:13px 15px; max-height:420px; overflow:auto; margin:0}
/* Secret values on the integrations screen ---------------------------- */
.secret-set{
display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono);
font-size:.76rem; color:var(--text-2)}
.secret-set .dot-fill{letter-spacing:.14em}
/* Small stat used beside integration cards ---------------------------- */
.conn-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.conn-row .grow{flex:1}
/* Bulk-action bar that appears when rows are ticked -------------------- */
.bulk-bar{
display:flex; align-items:center; gap:10px; padding:10px 14px;
border-bottom:1px solid var(--line-2); background:var(--muted-bg); font-size:.82rem}
.bulk-bar .count{font-weight:600}
/* Empty-state paragraph inside a table cell --------------------------- */
.tbl .empty{padding:44px 20px}
.tree-row.is-off .tname{color:var(--text-3)}
.tree-row .tmeta form{display:inline-flex}
.mono.danger,.num .danger{color:var(--danger)}
.mono.warn,.num .warn{color:var(--warn)}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line);vertical-align:-2px;margin-right:5px}
/* Product media grid ---------------------------------------------------- */
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px}
.media-item{margin:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
background:var(--panel-2)}
.media-item img,.media-item video{display:block; width:100%; aspect-ratio:1; object-fit:cover}
.media-item figcaption{display:flex; align-items:center; gap:6px; padding:6px 8px;
border-top:1px solid var(--line-2)}
.media-item figcaption .tag{margin-left:auto}
/* Checkbox list standing in for a multiselect --------------------------- */
.chip-check{display:flex; flex-wrap:wrap; gap:10px 16px}
/* Replay gallery -------------------------------------------------------- */
.replay-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.replay-cover{position:relative; display:block; aspect-ratio:16/9; background:var(--muted-bg)}
.replay-cover img{width:100%; height:100%; object-fit:cover; display:block}
.replay-placeholder{width:100%; height:100%; display:grid; place-items:center; color:var(--text-3)}
.replay-placeholder svg{width:30px; height:30px}
.replay-time{position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.72); color:#fff;
font-family:var(--ff-mono); font-size:.68rem; padding:2px 6px; border-radius:4px}
.replay-stats{display:flex; gap:12px; color:var(--text-2); flex-wrap:wrap}
.replay-stats span{display:inline-flex; align-items:center; gap:4px}
.replay-stats svg{width:13px; height:13px}
/* A row that has been moderated away ------------------------------------ */
tr.is-muted td{opacity:.5}
tr.is-selected td{background:var(--muted-bg)}
.ok{color:var(--ok)}
.banner-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.banner-preview{aspect-ratio:16/7; background:var(--muted-bg)}
.banner-preview img{width:100%; height:100%; object-fit:cover; display:block}
.att-row.is-selected{background:var(--muted-bg); border-radius:var(--r-xs)}
/* Permission matrix ----------------------------------------------------- */
.tbl.matrix td,.tbl.matrix th{vertical-align:middle}
.levels{display:flex; gap:2px; background:var(--muted-bg); border-radius:var(--r-xs); padding:2px}
.levels .lvl{flex:1; text-align:center; cursor:pointer}
.levels .lvl input{position:absolute; opacity:0; pointer-events:none}
.levels .lvl span{
display:block; padding:4px 6px; border-radius:4px; font-size:.68rem; font-weight:600;
color:var(--text-3); text-transform:capitalize; transition:background .12s,color .12s}
.levels .lvl:hover span{color:var(--text)}
.levels .lvl input:checked + span{background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm)}
.levels .lvl input:focus-visible + span{outline:2px solid var(--brand); outline-offset:1px}
.levels .lvl.is-na{opacity:.3; cursor:not-allowed}
.levels .lvl input:disabled + span{cursor:not-allowed}
/* =====================================================================
Six-box code entry
Fixed-width square boxes rather than the browser default text field —
without this the six inputs render as six full-width boxes, which reads
as a form rather than as one code.
===================================================================== */
.otp{
display:flex; gap:8px; justify-content:flex-start; flex-wrap:nowrap;
}
.otp input{
width:100%; min-width:0; flex:1 1 0; max-width:56px; aspect-ratio:1/1.15;
padding:0; text-align:center;
font-family:var(--ff-mono); font-size:1.35rem; font-weight:700;
color:var(--text); background:var(--panel);
border:1px solid var(--line); border-radius:var(--r-sm);
transition:border-color .12s, box-shadow .12s, background .12s;
/* The number spinner would collide with a centred single digit. */
-moz-appearance:textfield;
}
.otp input::-webkit-outer-spin-button,
.otp input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.otp input:hover{border-color:var(--line-strong, var(--text-3))}
.otp input:focus{
outline:none; border-color:var(--brand);
box-shadow:0 0 0 3px var(--brand-bg, rgba(255,95,53,.16));
}
.otp input.filled{background:var(--panel-2); border-color:var(--text-3)}
@media (max-width:420px){
.otp{gap:6px}
.otp input{font-size:1.15rem}
}
/* Inside the step-up modal the boxes sit in a narrower column. */
.modal-body .otp input{max-width:48px}
/* Default size for any icon that no context rule claims.
icon() emits a bare