/* JShrink web cabinet — design system (derived from the Telegram Mini App; --tg-theme-* replaced by own light/dark tokens).
   Layout is driven by [data-layout=desktop|tablet|phone] set from the app root width: >=1200 desktop, 768-1199 tablet, <768 phone. */
:root{
  --bg:#fff;--sec:#f2f2f7;--card:#fff;--side:#fff;--text:#111114;--hint:#636366;--link:#0a62c0;
  --btn:#1668c7;--btn-text:#fff;--danger:#c4262e;--ok:#1f8f43;--ok-t:#17783a;--sep:rgba(60,60,67,.2);
  --sel:#e6f0fc;--shadow:0 10px 40px rgba(0,0,0,.22);--sec-h:#55555a;--scrim:rgba(0,0,0,.4);
  --cyan:#1ec8ff;--navy:#0f1535;color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#17212b;--sec:#0e1621;--card:#17212b;--side:#111b26;--text:#f5f7fa;--hint:#8ba0b5;--link:#6ab3f3;
  --btn:#2b6cb0;--btn-text:#fff;--danger:#ff7b82;--ok:#3ddc84;--ok-t:#5fe39a;--sep:rgba(255,255,255,.11);
  --sel:#1f3247;--shadow:0 10px 40px rgba(0,0,0,.55);--sec-h:#8ba0b5;--scrim:rgba(0,0,0,.6);color-scheme:dark;
}
:root{--press:color-mix(in srgb,var(--hint) 16%,transparent);--tint:color-mix(in srgb,var(--hint) 16%,transparent);--fs:15px;--rowh:60px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font:var(--fs)/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--sec);color:var(--text);overflow:hidden}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
a{color:var(--link)}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:8px}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mut{color:var(--hint)}.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
kbd{font:600 11px/1 ui-monospace,Menlo,monospace;padding:3px 5px;border-radius:5px;border:1px solid var(--sep);color:var(--hint);background:var(--card)}

/* root + layouts */
#app{position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;max-width:100%;margin:0 auto;background:var(--sec)}
#app[data-forced=true]{box-shadow:0 0 0 1px var(--sep)}
.banner{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;padding:8px 16px;background:#ffb703;color:#1a1200;font-weight:600;font-size:14px;z-index:30}
.banner button{background:#1a1200;color:#fff;border-radius:8px;padding:0 14px;min-height:34px;font-weight:600}
.banner button:focus-visible{outline-color:#1a1200;outline-offset:2px}
[data-layout=phone] .banner button,[data-layout=tablet] .banner button{min-height:44px}
.shell{flex:1;min-height:0;display:flex;position:relative}
.side{width:232px;flex:none;background:var(--side);border-right:1px solid var(--sep);display:flex;flex-direction:column;padding:14px 10px;z-index:41}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.brand img{width:30px;height:30px;border-radius:8px;background:var(--navy);padding:3px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--press)}
.nav a[aria-current=page]{background:var(--sel);color:var(--link);font-weight:600}
.nav .cnt{margin-left:auto;font-size:12px;color:var(--hint);font-weight:500}
.side .sp{flex:1}
.side .foot{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--sep);padding-top:12px}
.acct{display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:10px;min-width:0}
.acct .who{min-width:0;flex:1;line-height:1.2}.acct .who b{display:block;font-size:14px}.acct .who span{font-size:12px;color:var(--hint)}
.shellmain{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.topbar{flex:none;display:flex;align-items:center;gap:6px;height:56px;padding:0 8px;background:var(--bg);border-bottom:1px solid var(--sep)}
.topbar h1{margin:0;font-size:18px;flex:1;min-width:0}
.content{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
[data-layout=desktop] .topbar{display:none}
[data-layout=desktop] .scrim-nav{display:none}
[data-layout=tablet] .side,[data-layout=phone] .side{position:absolute;top:0;bottom:0;left:0;transform:translateX(-102%);transition:transform .22s;box-shadow:var(--shadow);width:min(280px,86%)}
#app[data-layout=tablet][data-nav=open] .side,#app[data-layout=phone][data-nav=open] .side{transform:none}
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:40;animation:fi .15s}
@keyframes fi{from{opacity:0}}

.iconbtn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:10px;color:var(--link);flex:none;position:relative}
.iconbtn:hover{background:var(--press)}
.iconbtn.plain{color:var(--hint)}
[data-layout=tablet] .iconbtn,[data-layout=phone] .iconbtn{width:44px;height:44px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 16px;border-radius:10px;background:var(--btn);color:var(--btn-text);font-weight:600;white-space:nowrap;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:default;filter:none}
.btn.sec{background:color-mix(in srgb,var(--link) 14%,var(--card));color:var(--link)}
.btn.tint{background:var(--tint);color:var(--text)}
.btn.danger{background:color-mix(in srgb,var(--danger) 13%,var(--card));color:var(--danger)}
.btn.danger.solid{background:var(--danger);color:#fff}
:root[data-theme=dark] .btn.danger.solid{color:#2a0508}
.btn.lg{min-height:48px;font-size:16px;border-radius:12px;padding:0 24px}
.btn.block{width:100%}
[data-layout=tablet] .btn,[data-layout=phone] .btn{min-height:44px}
[data-layout=tablet] .btn.lg,[data-layout=phone] .btn.lg{min-height:50px}

/* search + controls */
.search{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:10px;background:var(--tint);color:var(--hint);flex:1;min-width:0}
.search:focus-within{outline:2px solid var(--link);outline-offset:1px}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;height:100%;font-size:15px;color:var(--text)}
.search input::placeholder{color:var(--hint)}
.search .clr{width:32px;height:32px;display:grid;place-items:center;margin-right:-6px;color:var(--hint);border-radius:50%}
[data-layout=tablet] .search,[data-layout=phone] .search{height:44px}
[data-layout=phone] .search input{font-size:16px}
.seg{display:flex;padding:2px;border-radius:9px;background:var(--tint);min-width:0}
.seg button{flex:1;min-height:32px;padding:0 12px;border-radius:7px;font-size:13.5px;font-weight:500;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis}
.seg button[aria-pressed=true],.seg button[aria-checked=true]{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.2);font-weight:600}
[data-layout=tablet] .seg button,[data-layout=phone] .seg button{min-height:40px}
.select{height:36px;border-radius:9px;background:var(--tint);border:0;padding:0 10px;font-size:13.5px;min-width:0;max-width:100%}
[data-layout=tablet] .select{height:44px}

/* split master-detail */
.split{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}
.master{display:flex;flex-direction:column;min-width:0;background:var(--sec);flex:1}
[data-layout=desktop] .master{flex:none;width:clamp(380px,34%,500px);border-right:1px solid var(--sep)}
.mhead{flex:none;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px}
[data-layout=phone] .mhead{padding:10px 12px 6px}
.mtitle{display:flex;align-items:center;gap:10px}
.mtitle h1{margin:0;font-size:22px;letter-spacing:-.02em;flex:1}
[data-layout=phone] .mtitle h1,[data-layout=tablet] .mtitle h1{display:none}
.mtitle .count{font-size:13px;color:var(--hint)}
.mrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mrow .seg{flex:1}
.mlist{flex:1;min-height:0;overflow-y:auto;padding:4px 12px 90px;overscroll-behavior:contain}
[data-layout=desktop] .mlist{padding-bottom:20px}
.group{background:var(--card);border-radius:12px;overflow:hidden}
.item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:var(--rowh);padding:6px 12px;cursor:pointer;color:inherit;text-decoration:none;border:0;background:transparent}
.item+.item::before{content:"";position:absolute;top:0;left:64px;right:0;height:1px;background:var(--sep)}
.item:hover{background:var(--press)}
.item[aria-selected=true]{background:var(--sel)}
.item[aria-selected=true]::before,.item[aria-selected=true]+.item::before{opacity:0}
.item:focus-visible{outline-offset:-2px}
.item .txt{flex:1;min-width:0;line-height:1.25}
.item .t{display:flex;align-items:center;gap:6px;font-weight:600;font-size:15.5px;min-width:0}
.item .s{font-size:12.5px;color:var(--hint);margin-top:1px}
.item.off .av,.item.off .t span:first-child,.item.off .s{opacity:.6}
.vis{text-align:right;line-height:1.15;flex:none;padding-left:6px}
.vis b{display:block;font-size:15px;font-weight:600}.vis span{font-size:11px;color:var(--hint)}
.chev{color:var(--hint);width:16px;height:16px}
[data-layout=desktop] .item .chev{display:none}
.master[data-dense=true] .item{min-height:36px;padding:2px 12px;gap:10px}
.master[data-dense=true] .item .av{width:24px;height:24px;border-radius:7px;font-size:12px}
.master[data-dense=true] .item .av svg{width:14px;height:14px}
.master[data-dense=true] .item+.item::before{left:12px}
.master[data-dense=true] .item .txt{display:flex;align-items:center;gap:10px}
.master[data-dense=true] .item .s{margin:0;flex:1 1 0;min-width:0}
.master[data-dense=true] .item .t{flex:1.1 1 0;min-width:0}
.master[data-dense=true] .vis{display:flex;gap:6px;align-items:baseline}
.master[data-dense=true] .vis span{display:none}
.av{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;background:hsl(var(--h) 50% 38%)}
.av.file{background:color-mix(in srgb,var(--link) 16%,var(--card));color:var(--link)}
.av.lg{width:72px;height:72px;border-radius:22px;font-size:32px}.av.lg svg{width:34px;height:34px}
.av.round{border-radius:50%}
.badge{flex:none;font-size:10.5px;font-weight:700;line-height:1;padding:3px 6px;border-radius:6px;color:var(--hint);background:color-mix(in srgb,var(--hint) 20%,transparent);text-transform:uppercase;letter-spacing:.03em}
.badge.admin{color:var(--link);background:color-mix(in srgb,var(--link) 16%,transparent)}
.more{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:var(--hint);font-size:13px}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--hint) 35%,transparent);border-top-color:var(--hint);animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.sk{background:linear-gradient(90deg,color-mix(in srgb,var(--hint) 14%,transparent) 25%,color-mix(in srgb,var(--hint) 26%,transparent) 50%,color-mix(in srgb,var(--hint) 14%,transparent) 75%);background-size:200% 100%;animation:sh 1.3s linear infinite;border-radius:6px}
@keyframes sh{to{background-position:-200% 0}}
.sk-row{display:flex;gap:12px;align-items:center;padding:10px 12px;min-height:var(--rowh)}
.sk-row .l{flex:1}.sk-row .l1{height:13px;width:55%;margin-bottom:8px}.sk-row .l2{height:10px;width:80%}

/* composer */
.composer{background:var(--card);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;border:1px solid transparent}
.composer:focus-within{border-color:var(--link)}
.composer .line{display:flex;gap:8px;align-items:center}
.composer input,.composer textarea,.field input,.field textarea{flex:1;min-width:0;border:0;background:none;outline:0;font-size:15px;color:var(--text);padding:0 4px;height:38px}
.composer input::placeholder,.field input::placeholder,.field textarea::placeholder,.composer textarea::placeholder{color:var(--hint)}
.composer .extra{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--sep);padding-top:6px}
.composer .extra input,.composer .extra textarea{border-bottom:1px solid var(--sep);border-radius:0}
.composer .extra textarea{height:60px;padding:8px 4px;resize:none;line-height:1.35}
.err{color:var(--danger);font-size:13px;padding:0 6px 2px}
.err button{color:var(--link);font-weight:600;text-decoration:underline}
.result{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--ok) 14%,var(--card));flex-wrap:wrap}
.result .u{font-weight:700;color:var(--link);flex:1;min-width:140px;word-break:break-all}
.result .okm{color:var(--ok-t);display:flex;gap:6px;align-items:center;font-weight:600;font-size:13px}

/* detail */
.detail{background:var(--bg);display:flex;flex-direction:column;min-width:0;flex:1;min-height:0}
.dbar{flex:none;display:none;align-items:center;gap:4px;height:52px;padding:0 6px;border-bottom:1px solid var(--sep);background:var(--bg)}
.dbar b{flex:1;font-size:16px;text-align:center}
.dbar .back{display:flex;align-items:center;gap:2px;color:var(--link);min-height:44px;padding:0 10px 0 4px;border-radius:10px;font-size:16px}
.dscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.dinner{max-width:720px;margin:0 auto;padding:24px 28px 40px}
[data-layout=desktop] .detail{background:var(--bg)}
[data-layout=tablet] .detail,[data-layout=phone] .detail{position:absolute;top:0;right:0;bottom:0;z-index:20;width:min(520px,100%);box-shadow:var(--shadow);transform:translateX(104%);transition:transform .24s;visibility:hidden;flex:none}
[data-layout=phone] .detail{width:100%;box-shadow:none;background:var(--sec)}
[data-layout=tablet] .split[data-open=true] .detail,[data-layout=phone] .split[data-open=true] .detail{transform:none;visibility:visible}
[data-layout=tablet] .dbar,[data-layout=phone] .dbar{display:flex}
[data-layout=phone] .dinner{padding:8px 0 40px}
[data-layout=tablet] .dinner{padding:12px 20px 40px}
.split>.scrim{z-index:19;display:none}#app[data-layout=tablet] .split[data-open=true]>.scrim{display:block}
.hero{text-align:center;padding:12px 16px 4px}
.hero .av{margin:0 auto}
.short{display:inline-block;margin-top:14px;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--link);word-break:break-all;line-height:1.2;padding:4px 10px;border-radius:10px;text-decoration:none}
.short:hover{background:var(--press)}
[data-layout=phone] .short{font-size:23px}
.hero .name{margin-top:2px;font-size:16px}
.status{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--hint)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ok)}.status.off i{background:var(--hint)}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 0;max-width:460px;margin-left:auto;margin-right:auto}
[data-layout=phone] .acts{margin:16px 16px 0}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;border-radius:12px;background:var(--sec);color:var(--link);font-size:12.5px;font-weight:600}
.act:hover{background:var(--press)}
[data-layout=phone] .act{background:var(--card)}
.sech{padding:22px 4px 7px;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--sec-h);font-weight:600;display:flex;align-items:baseline;justify-content:space-between}
[data-layout=phone] .sech{padding:20px 20px 7px}
.sech>a,.sech>button{text-transform:none;letter-spacing:0;font-weight:500;color:var(--link);font-size:13px}
[data-layout=phone] .group.pad{margin:0 16px}[data-layout=phone] .grp{margin:0 16px}
.dcard{background:var(--sec);border-radius:12px;overflow:hidden}
[data-layout=phone] .dcard{background:var(--card)}
.grid{display:grid;grid-template-columns:repeat(3,1fr)}
.grid .c{padding:13px 8px;text-align:center;position:relative;min-width:0}
.grid .c b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em}
.grid .c span{font-size:12px;color:var(--hint)}
.grid .c:nth-child(n+4)::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--sep)}
.grid .c:not(:nth-child(3n+1))::after{content:"";position:absolute;top:14px;bottom:14px;left:0;width:1px;background:var(--sep)}
.grid .c b.sm{font-size:15px;line-height:23px}
.row{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:6px 16px}
.row+.row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--sep)}
.row .grow{flex:1;min-width:0}
.row .val{color:var(--hint);overflow-wrap:anywhere;text-align:right;max-width:70%}
.flag{font-size:20px;width:28px;text-align:center;flex:none;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.barrow{position:relative;display:flex;align-items:center;gap:10px;min-height:42px;padding:4px 16px;overflow:hidden}
.barrow+.barrow::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--sep)}
.barrow .fill{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--link) 11%,transparent);z-index:0}
.barrow>*:not(.fill){position:relative;z-index:1}
.barrow .n{margin-left:auto;font-weight:600}.barrow .n small{color:var(--hint);font-weight:400;margin-left:6px}
.ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;flex:none;background:var(--btn)}.ico svg{width:16px;height:16px}
.ico.gray{background:#6e7781}
button.barrow{width:100%}button.barrow:hover{background:var(--press)}
.field{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;position:relative}
.field+.field::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--sep)}
.field label{width:92px;flex:none;color:var(--hint);font-size:13.5px}
.field input{height:46px;font-size:15px}
.field textarea{height:auto;min-height:84px;padding:12px 0;resize:none;line-height:1.35;font-size:15px}
.field.ta{align-items:flex-start}.field.ta label{padding-top:14px}
[data-layout=phone] .field input,[data-layout=phone] .field textarea{font-size:16px}
.counter{font-size:12px;color:var(--hint);padding-right:4px}
.sw{position:relative;width:51px;height:31px;border-radius:16px;background:color-mix(in srgb,var(--hint) 42%,transparent);transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.28);transition:transform .2s}
.sw[aria-checked=true]{background:var(--ok)}.sw[aria-checked=true]::after{transform:translateX(20px)}
.savebar{position:sticky;bottom:0;display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:10px 0;background:linear-gradient(transparent,var(--bg) 30%);margin-top:8px}
[data-layout=phone] .savebar{padding:10px 16px;background:linear-gradient(transparent,var(--sec) 30%)}
.dangerzone{margin-top:24px}
[data-layout=phone] .dangerzone{margin:24px 16px 0}

/* pages (overview, new) */
.page{flex:1;min-height:0;overflow-y:auto}
.pinner{max-width:1040px;margin:0 auto;padding:24px 28px 48px}
[data-layout=tablet] .pinner{padding:18px 20px 40px}[data-layout=phone] .pinner{padding:8px 0 90px}
.ph{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ph h1{margin:0;font-size:24px;letter-spacing:-.02em;flex:1}
[data-layout=phone] .ph,[data-layout=tablet] .ph{display:none}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
[data-layout=phone] .cols,[data-layout=tablet] .cols{grid-template-columns:1fr;gap:0}
.cardx{background:var(--card);border-radius:12px;overflow:hidden}
.page .cardx{border:1px solid var(--sep)}
[data-layout=phone] .page .cardx{border:0;margin:0 16px}[data-layout=phone] .cols>div{display:block}
.bigstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sep)}
.bigstats .c{padding:16px 14px;min-width:0;background:var(--card)}
.bigstats .c b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em}
.bigstats .c span{font-size:12.5px;color:var(--hint)}
.bigstats .c b.sm{font-size:16px;line-height:32px}
.bigstats .c:last-child{grid-column:span 2}
#app[data-layout=phone] .bigstats,#app[data-layout=tablet] .bigstats{grid-template-columns:repeat(3,1fr)}
#app[data-layout=phone] .bigstats .c:last-child,#app[data-layout=tablet] .bigstats .c:last-child{grid-column:span 3}
#app[data-layout=phone] .bigstats .c,#app[data-layout=tablet] .bigstats .c{padding:13px 8px;text-align:center}
#app[data-layout=phone] .bigstats .c b{font-size:20px}

/* states */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 24px 16px;margin:auto 0}
.state svg.ill{width:120px;height:120px;margin-bottom:6px}
.state h2{margin:10px 0 6px;font-size:20px;letter-spacing:-.01em}
.state p{margin:0 0 16px;color:var(--hint);font-size:14.5px;line-height:1.4;max-width:340px}
.state .ways{display:flex;flex-direction:column;gap:8px;text-align:left;margin-top:8px;max-width:340px;width:100%}
.state .ways div{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--hint)}
.state .ways b{color:var(--text);display:block;font-size:14px}
.pholder{margin:auto;max-width:440px;padding:24px;text-align:center}
.pholder h2{margin:8px 0 4px;font-size:19px}.pholder p{margin:0 0 14px;color:var(--hint)}

/* FAB (phone) */
.fab{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;min-height:52px;padding:0 22px 0 18px;border-radius:26px;background:var(--btn);color:var(--btn-text);display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;box-shadow:0 6px 18px rgba(0,0,0,.3)}

/* overlays */
.overlay{position:absolute;inset:0;z-index:60;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px;animation:fi .15s}
.overlay.bottom{align-items:flex-end;padding:0}
.dialog{width:min(380px,100%);border-radius:16px;background:var(--card);box-shadow:var(--shadow);padding:20px 20px 16px;animation:pop .18s}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.dialog h3{margin:0 0 6px;font-size:17px}.dialog p{margin:0 0 16px;color:var(--hint);font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.dialog .btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
[data-layout=phone] .dialog .btns{flex-direction:column-reverse}[data-layout=phone] .dialog .btns .btn{width:100%}
.dialog table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:12px}.dialog td{padding:5px 0}.dialog td:last-child{text-align:right}
.sheet{width:100%;max-height:85%;overflow:auto;background:var(--sec);border-radius:16px 16px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));animation:up .22s}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--hint);opacity:.5;margin:2px auto 10px}
.sheet h4{margin:10px 8px 8px;font-size:12.5px;text-transform:uppercase;color:var(--sec-h);letter-spacing:.03em;font-weight:600}
.sheet .item{min-height:48px}.sheet .item+.item::before{left:16px}
.pop{position:absolute;z-index:50;background:var(--card);border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--sep);padding:6px;min-width:200px}
.toasts{position:absolute;left:0;right:0;bottom:16px;z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
[data-layout=phone] .toasts{bottom:80px}
.toast{display:flex;align-items:center;gap:8px;max-width:100%;padding:11px 16px;border-radius:12px;background:#1d1f24;color:#fff;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.3);animation:ti .22s}
:root[data-theme=dark] .toast{background:#e9edf2;color:#10151b}
.toast svg{color:#5fe39a}:root[data-theme=dark] .toast svg{color:#17783a}
.toast.bad svg{color:#ff8a90}
@keyframes ti{from{opacity:0;transform:translateY(10px)}}
.toast.out{opacity:0;transform:translateY(8px);transition:.25s}

/* login */
.login{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(1200px 500px at 50% -10%,color-mix(in srgb,var(--cyan) 14%,transparent),transparent),var(--sec)}
.lcard{width:min(420px,100%);background:var(--card);border-radius:20px;overflow:hidden;box-shadow:0 1px 0 var(--sep),var(--shadow)}
.lcover{background:var(--navy);text-align:center;padding:26px 20px 18px;color:#fff}
.lcover img{width:120px;height:auto;max-height:120px;object-fit:contain}
.lcover b{display:block;font-size:34px;letter-spacing:-.02em;margin-top:2px}
.lcover span{color:#b4bddc;font-size:14.5px}
.lbody{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px}
.lbody h1{margin:0;font-size:20px;letter-spacing:-.01em}
.lbody p{margin:0;color:var(--hint);font-size:14px}
.tgbtn{background:#1668c7;color:#fff}:root[data-theme=dark] .tgbtn{background:#2b6cb0}
.div{display:flex;align-items:center;gap:10px;color:var(--hint);font-size:12.5px}.div::before,.div::after{content:"";flex:1;height:1px;background:var(--sep)}
.gbtn{background:var(--card);color:var(--text);border:1px solid var(--sep)}
.gbtn:hover{background:var(--press)}
.lfoot{font-size:12px;color:var(--hint);text-align:center;margin-top:4px}
.ltheme{position:absolute;top:10px;right:10px}
.emailv{display:flex;flex-direction:column;gap:8px}
.emailv input{height:46px;border-radius:10px;border:1px solid var(--sep);background:var(--card);padding:0 12px;font-size:16px}
.emailv input:focus{outline:2px solid var(--link);outline-offset:1px}

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

/* row = container + main button + copy button (no nested interactives) */
.item{padding:0}
.item .main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;align-self:stretch;min-height:inherit;padding:6px 4px 6px 12px;text-align:left;border-radius:0}
.item .main:focus-visible{outline-offset:-2px;outline:2px solid var(--link);border-radius:8px}
.item .cp{width:44px;height:44px;margin-right:2px;display:grid;place-items:center;color:var(--link);border-radius:50%;flex:none}
.item .cp:hover{background:var(--press)}
.item .cp svg{width:18px;height:18px}
#app[data-layout=desktop] .item .cp{width:32px;height:32px;opacity:0}
#app[data-layout=desktop] .item:hover .cp,#app[data-layout=desktop] .item:focus-within .cp,#app[data-layout=desktop] .item[aria-current=true] .cp{opacity:1}
.item[aria-current=true]{background:var(--sel)}
.item[aria-current=true]::before,.item[aria-current=true]+.item::before{opacity:0}
.sheet .item .main{padding-left:16px}
.sheet .item .chk{color:var(--link);width:20px;height:20px;margin-right:14px}
.dialog .list{margin:0 -8px 8px}.dialog .list .item{min-height:48px}
.dialog .list .item+.item::before{left:16px}
.pop .item{min-height:44px;border-radius:8px}
.pop .meta{padding:8px 12px;font-size:12.5px;color:var(--hint)}
.pop .meta b{display:block;color:var(--text);font-size:14px}
.sticky-act{flex:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--sec);border-top:1px solid var(--sep)}
.okmark{width:72px;height:72px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;margin:0 auto 6px;animation:pop .4s}
:root[data-theme=dark] .okmark{color:#06210f}
.okmark svg{width:38px;height:38px;stroke-width:2.6}
.hint-line{font-size:12.5px;color:var(--hint);padding:8px 20px 0;line-height:1.35}
.statsfoot{font-size:12.5px;color:var(--hint);padding:8px 4px}

.seg button{padding:0 6px;font-size:13px}
.item .chev{display:none}
.lcover img{mix-blend-mode:lighten}
.select{width:100px;flex:none}
/* touch targets >=44px on tablet/phone */
#app[data-layout=tablet] .seg button,#app[data-layout=phone] .seg button{min-height:44px}
#app[data-layout=tablet] .short,#app[data-layout=phone] .short{min-height:44px}
#app[data-layout=tablet] .composer input,#app[data-layout=phone] .composer input{height:44px}
#app[data-layout=tablet] .sech>button,#app[data-layout=phone] .sech>button,#app[data-layout=tablet] .sech>a,#app[data-layout=phone] .sech>a{min-height:44px;padding:0 4px}
.sw::before{content:"";position:absolute;inset:-7px -4px}
.row .val{margin-left:auto}

/* help (?) buttons + shared tooltip */
.help{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;padding:0;border:1.5px solid currentColor;border-radius:50%;color:var(--hint);font:700 10px/1 -apple-system,"Segoe UI",sans-serif;text-transform:none;letter-spacing:0;vertical-align:-3px;flex:none;background:none;cursor:help}
.help::before{content:"";position:absolute;inset:-5px}
.help:hover,.help[aria-expanded=true]{color:var(--link)}
.help:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:50%}
#app[data-layout=tablet] .help,#app[data-layout=phone] .help{margin-left:12px;cursor:pointer}
#app[data-layout=tablet] .help::before,#app[data-layout=phone] .help::before{inset:-14px}
.field label .help{margin-left:4px}
.row>.help{margin-left:-4px}
#tip{position:fixed;z-index:200;max-width:260px;padding:8px 10px;border-radius:10px;background:#1d1f24;color:#fff;font:400 13px/1.35 -apple-system,"Segoe UI",sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none;text-transform:none;letter-spacing:0}
#tip b{font-weight:700}
:root[data-theme=dark] #tip{background:#e9edf2;color:#10151b}
.oh{display:block;font-size:12.5px;font-weight:400;color:var(--hint);margin-top:1px}
.mtitle .help{margin-left:-4px}

.sortbtn{gap:6px;padding:0 12px;min-height:36px}
.sortbtn[aria-expanded=true]{background:color-mix(in srgb,var(--link) 14%,var(--card));color:var(--link)}
.item .help{margin:0 14px 0 0}
#app[data-layout=tablet] .item .help,#app[data-layout=phone] .item .help{margin:0 18px 0 8px}
.pop.sortpop{padding:4px}.pop.sortpop .group{background:transparent}
.pop.sortpop .item .main{padding-left:12px}
.sheet .item .chk{margin-right:6px}

/* keyboard shortcuts list in the empty detail pane (was a legacy ".help" class that collided with the (?) button) */
.keys{list-style:none;margin:18px auto 0;padding:0;display:grid;gap:8px;width:max-content;max-width:100%;text-align:left}
.keys li{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:12px;font-size:14px;color:var(--hint)}
.keys .kc{display:flex;gap:4px;justify-content:flex-end}
.keys kbd{min-width:24px;text-align:center;padding:4px 7px;font-size:12px}
#app:not([data-layout=desktop]) .keys{display:none}

/* ---- production additions ---- */
.item .main{background:transparent}
.item .cp[hidden]{display:none}
.sk-line{height:14px}
.link-a{color:var(--link);font-weight:600;text-decoration:underline}
.login .lcard{position:relative}
.tg-holder{display:flex;justify-content:center;min-height:44px}
a.btn.gbtn{text-decoration:none}
.loading-msg{text-align:center;color:var(--hint);padding:18px 0}
.noscript{padding:24px;text-align:center}
.pop.accpop{min-width:220px}
.dbar .back{background:none}
.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
[data-layout=phone] .cols,[data-layout=tablet] .cols{grid-template-columns:minmax(0,1fr)}
.cols>div{min-width:0}


/* ---- admin nav group + platform overview (admin-overview) ---- */
.navgrp{margin-top:10px;padding-top:8px;border-top:1px solid var(--sep);display:flex;flex-direction:column;gap:2px}
.ngh{display:flex;align-items:center;gap:8px;padding:4px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--link)}
.ngh .i{width:15px;height:15px}
.nav a.sub{margin-left:12px;padding-left:12px;min-height:38px;border-left:2px solid color-mix(in srgb,var(--link) 28%,transparent);border-radius:0 10px 10px 0}
.nav a.sub[aria-current=page]{border-left-color:var(--link)}
.pinner.adm{border-top:3px solid color-mix(in srgb,var(--link) 55%,transparent);margin-top:0}
[data-layout=desktop] .pinner.adm{border-top:0}
.ph .badge.admin{margin-right:2px}
.admnote{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 12px;border-radius:10px;background:color-mix(in srgb,var(--link) 9%,transparent);color:var(--text);font-size:13px}
.admnote .i{width:16px;height:16px;color:var(--link);flex:none}
[data-layout=phone] .admnote{margin:8px 16px 14px}
[data-layout=tablet] .admnote{margin-top:0}
.bigstats.three{grid-template-columns:repeat(3,1fr)}
.bigstats.three .c:last-child{grid-column:auto}
.bigstats.three .c{text-align:left}
#app[data-layout=phone] .bigstats.three .c,#app[data-layout=tablet] .bigstats.three .c{text-align:center}
#app[data-layout=phone] .bigstats.three .c b{font-size:20px}
#app[data-layout] .bigstats.three .c:last-child{grid-column:auto}
.cols+.cols{margin-top:4px}

/* support tickets */
.pill{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:11.5px;font-weight:600;line-height:1;padding:4px 8px;border-radius:999px;color:var(--link);background:color-mix(in srgb,var(--link) 14%,transparent)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.answered{color:var(--ok-t);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.pill.closed{color:var(--hint);background:color-mix(in srgb,var(--hint) 18%,transparent)}
.nav .cnt.hot{background:var(--btn);color:var(--btn-text);font-weight:700;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 6px}
.item.tk .main{min-height:72px}
.item.tk .t{gap:8px}
.item.tk.unread .t .ell{font-weight:700}
.item.tk .u{font-size:12.5px;color:var(--text);font-weight:500;margin-top:1px}
.udot{width:9px;height:9px;border-radius:50%;background:var(--link);flex:none}
.tmeta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;padding:0 8px 0 6px;font-size:11.5px;color:var(--hint);white-space:nowrap}
.tkhead{flex:none;padding:18px 28px 14px;border-bottom:1px solid var(--sep);background:var(--bg)}
[data-layout=tablet] .tkhead{padding:14px 20px 12px}[data-layout=phone] .tkhead{padding:12px 16px 12px}
.tkhead h2{margin:0 0 8px;font-size:20px;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.tkmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--hint);font-size:13px}
.tkuser{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 10px;border-radius:10px;background:var(--sec)}
.tkuser .av{width:34px;height:34px;font-size:15px}
.tkuser .who{flex:1;min-width:0;line-height:1.25}.tkuser .who b{display:block;font-size:14.5px}.tkuser .who span{display:block;font-size:12.5px;color:var(--hint)}
.tkuser .lnk{font-weight:600;font-size:13.5px;color:var(--link);flex:none;padding:10px 6px}
.tkacts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thread{max-width:720px;margin:0 auto;padding:18px 28px 14px;display:flex;flex-direction:column;gap:14px}
[data-layout=tablet] .thread{padding:16px 20px 12px}[data-layout=phone] .thread{padding:14px 12px 10px}
.msg{display:flex;flex-direction:column;align-items:flex-start;max-width:84%}
.msg.right{align-self:flex-end;align-items:flex-end}
.bub{padding:9px 13px;border-radius:16px 16px 16px 4px;background:var(--sec);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}
[data-layout=phone] .bub{background:var(--card)}
.msg.right .bub{background:var(--btn);color:var(--btn-text);border-radius:16px 16px 4px 16px}
.mm{font-size:11.5px;color:var(--hint);margin:3px 6px 0}.mm b{font-weight:600}
.reply{flex:none;border-top:1px solid var(--sep);background:var(--bg);padding:10px 28px calc(10px + env(safe-area-inset-bottom,0px))}
[data-layout=tablet] .reply{padding-left:20px;padding-right:20px}[data-layout=phone] .reply{padding-left:12px;padding-right:12px}
.rwrap{max-width:664px;margin:0 auto}
.rin{display:flex;gap:8px;align-items:flex-end}
.reply textarea{flex:1;min-width:0;min-height:44px;max-height:140px;resize:none;border:1px solid var(--sep);border-radius:12px;background:var(--card);padding:10px 12px;line-height:1.35;outline:0;font-size:15px}
.reply textarea:focus{border-color:var(--link)}
.reply textarea[aria-invalid=true]{border-color:var(--danger)}
[data-layout=phone] .reply textarea{font-size:16px}
.tknote{font-size:13px;color:var(--hint);padding:0 2px 8px}
.reply .err{padding:0 2px 6px}
.tcomp{background:var(--card);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--link)}
.tcomp h3{margin:0;font-size:16px}
.tf label{display:block;font-size:13px;color:var(--hint);margin:0 2px 4px}
.tf input,.tf textarea{width:100%;border:1px solid var(--sep);border-radius:10px;background:var(--bg);padding:0 11px;height:42px;outline:0;font-size:15px;color:var(--text)}
.tf textarea{height:auto;min-height:110px;padding:10px 11px;resize:vertical;line-height:1.4}
.tf input:focus,.tf textarea:focus{border-color:var(--link)}
.tf [aria-invalid=true]{border-color:var(--danger)}
.tf input::placeholder,.tf textarea::placeholder{color:var(--hint)}
.tfm{display:flex;justify-content:space-between;gap:8px;min-height:18px;margin-top:3px}
.tfm .err{padding:0 2px}.tfm .counter{margin-left:auto;padding-right:2px}
.tbtns{display:flex;gap:8px;justify-content:flex-end}
.tcomp.tcph{border:0;border-radius:0;background:transparent;padding:4px 16px}
[data-layout=phone] .tf input,[data-layout=phone] .tf textarea{font-size:16px;background:var(--card)}
[data-layout=phone] .tf input{height:48px}
[data-layout=tablet] .tf input{height:44px}
.pholder>svg.i{width:44px;height:44px;color:var(--btn);opacity:.8}
.mtitle h1{white-space:nowrap}.mtitle .count{white-space:nowrap}
.tktop{display:flex;align-items:flex-start;gap:8px}.tktop h2{flex:1;min-width:0}.tktop .iconbtn{margin:-6px -8px 0 0}
.iconbtn[disabled]{opacity:.55;cursor:default}
.iconbtn.spinning svg{animation:sp .8s linear infinite}