/* Комната: оформление */
:root, [data-theme="dark"]{
  color-scheme: dark;
  --bg:#071018; --bg-2:#101a24; --bg-3:#172330; --text:#f4f8fc; --muted:#93a8bb;
  --accent:#4ec8e6; --accent-2:#7b6cff; --danger:#ff6b6b; --ok:#3dd68c;
  --line:rgba(255,255,255,.1); --glass:rgba(14,24,34,.72);
  --aside:rgba(10,18,26,.78); --log:#0a1118; --log-text:#b7c6d4;
  --sw-off:#2a3848; --err:#ff8b8b; --btn-text:#062028;
  --orb-a:#2aa8c8; --orb-b:#5b4ed8;
  --top-tools-span:168px;
}
[data-theme="light"]{
  color-scheme: light;
  --bg:#eef3f8; --bg-2:#ffffff; --bg-3:#f4f7fb; --text:#122033; --muted:#66788c;
  --accent:#1f9fc4; --accent-2:#5b4ed8; --danger:#e05252; --ok:#1ea86a;
  --line:rgba(20,40,70,.1); --glass:rgba(255,255,255,.78);
  --aside:rgba(255,255,255,.82); --log:#eef3f8; --log-text:#3d5166;
  --sw-off:#c9d5e0; --err:#c43d3d; --btn-text:#043544;
  --orb-a:#7ec8e0; --orb-b:#c084fc;
  --top-tools-span:168px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:15px/1.45 Manrope,ui-sans-serif,system-ui,sans-serif;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
input,textarea,select{background:var(--bg-3);color:var(--text);caret-color:var(--text);border:1px solid var(--line);border-radius:14px;padding:11px 14px;outline:none;width:100%}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea{min-height:120px;resize:vertical}
.hidden{display:none !important}
.orbs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:.45;animation:drift 26s ease-in-out infinite alternate}
.orb.a{width:42vw;height:42vw;left:-14vw;top:-18vh;background:radial-gradient(circle,var(--orb-a) 0%,transparent 70%)}
.orb.b{width:34vw;height:34vw;right:-12vw;top:8vh;background:radial-gradient(circle,var(--orb-b) 0%,transparent 70%);animation-duration:32s}
@keyframes drift{to{transform:translate3d(5vw,-4vh,0) scale(1.08)}}
.top-tools{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:47;display:flex;align-items:center;gap:8px;-webkit-transform:translateZ(0);transform:translateZ(0)}
.icon-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);background:color-mix(in srgb,var(--bg-2) 88%,transparent);border:1px solid var(--line);backdrop-filter:blur(12px);text-decoration:none}
.icon-btn:hover{background:var(--bg-2)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.theme-wrap{position:relative}
.theme-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:232px;padding:6px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.28);z-index:60}
.theme-pop button{width:100%;text-align:left;padding:10px 12px;border-radius:12px;color:var(--text);font-weight:700;display:flex;flex-direction:column;gap:2px}
.theme-pop button small{color:var(--muted);font-weight:500;font-size:12px}
.theme-pop button.on,.theme-pop button:hover{background:var(--bg-3)}
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));position:relative;z-index:1}
.card{width:100%;max-width:400px;background:var(--glass);border:1px solid var(--line);border-radius:28px;padding:28px;backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px;min-width:0}
.mark{width:44px;height:44px;border-radius:14px;overflow:hidden;flex:0 0 44px;background:#071018}
.mark img{width:100%;height:100%;display:block;object-fit:cover}
aside .brand{padding:4px 8px 14px}
aside .brand>div{min-width:0}
h1{margin:0;font-size:22px;letter-spacing:-.03em}
.sub{color:var(--muted);margin:0 0 18px;font-size:13px}
.field{margin-bottom:11px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.btn{width:100%;padding:12px;border-radius:999px;background:var(--accent);color:var(--btn-text);-webkit-text-fill-color:var(--btn-text);font-weight:800;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;color:var(--btn-text);-webkit-text-fill-color:var(--btn-text)}
.btn:disabled{opacity:.55}
.btn.ghost{background:var(--bg-3);color:var(--text);-webkit-text-fill-color:var(--text);font-weight:700;border:1px solid var(--line)}
.btn.danger{background:var(--danger);color:#fff;-webkit-text-fill-color:#fff}
.btn.sm{width:auto;padding:9px 16px;font-size:14px;line-height:1.2;white-space:nowrap}
.err{color:var(--err);font-size:13px;min-height:18px;margin-top:8px}
.up-track{position:relative;height:28px;margin-top:10px;border-radius:999px;background:var(--bg-3);overflow:hidden;border:1px solid var(--line)}
.up-track span{display:block;height:100%;width:0;background:var(--accent)}
.up-track b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--text)}
.ok{color:var(--ok);font-size:13px;margin-top:8px}
#app{min-height:100vh;display:grid;grid-template-columns:240px 1fr;position:relative;z-index:1}
aside{border-right:1px solid var(--line);background:var(--aside);padding:18px 14px;display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(16px)}
nav button{width:100%;text-align:left;padding:10px 12px;border-radius:12px;color:var(--muted);font-weight:600}
nav button.on,nav button:hover{background:var(--bg-3);color:var(--text)}
.aside-foot{margin-top:auto;padding:10px 8px 0;color:var(--muted);font-size:12px}
main{padding:22px 28px 40px;padding-right:max(28px,calc(var(--top-tools-span) + env(safe-area-inset-right,0px)));min-width:0}
main:focus{outline:none}
#app:not(.nav-open) .nav-scrim{pointer-events:none !important}
h2{margin:0 0 16px;font-size:22px;letter-spacing:-.03em}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.stat b{display:block;font-size:22px;letter-spacing:-.03em}
.stat span{color:var(--muted);font-size:12px}
.call-day{margin:12px 0 4px;color:var(--muted);font-size:12px;font-weight:700}
div.call-row,details.call-row summary{display:grid;grid-template-columns:52px 64px minmax(0,1fr) auto;gap:8px 10px;align-items:center}
.call-row{padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
details.call-row summary{cursor:pointer;list-style:none}
.call-row summary::-webkit-details-marker{display:none}
.call-time{color:var(--muted);font-variant-numeric:tabular-nums}
.call-kind{font-size:12px;font-weight:700;color:var(--muted)}
.call-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.call-meta{color:var(--muted);font-size:12px;white-space:nowrap}
.call-extra{grid-column:2 / -1;color:var(--muted);font-size:12px;line-height:1.4}
.call-list{padding-top:8px;padding-bottom:8px}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}
.panel h3{margin:0 0 10px;font-size:14px;color:var(--muted);font-weight:700}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
table input[type=checkbox]{width:auto;accent-color:var(--accent)}
th,td{text-align:left;padding:9px 8px;vertical-align:middle}
thead tr,tbody tr{border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;background:color-mix(in srgb,var(--muted) 55%,transparent)}
.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.name-with-status{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
h3.name-with-status{display:flex;margin-top:0}
#me-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.av{width:36px;height:36px;border-radius:50%;flex:0 0 36px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;line-height:1;position:relative;overflow:visible}
.av.sm{width:28px;height:28px;flex-basis:28px;font-size:11px}
.av.lg{width:72px;height:72px;flex-basis:72px;font-size:18px}
.av.has-img{color:transparent}
.av .av-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}
.av .av-face-bg{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;transform-origin:center center;will-change:transform}
.av .av-face-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none;max-height:none;display:block}
.name-av{display:flex;align-items:center;gap:10px;min-width:0}
.name-av-text{min-width:0}
.detail>.name-av{margin-bottom:12px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;vertical-align:middle}
.pill.off{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.pill.warn{background:color-mix(in srgb,#c48a12 18%,transparent);color:#c48a12}
.pill.adm,.pill.owner{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.pill.mod{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.access-role{padding:12px 0 4px;border-bottom:1px solid var(--line)}
.access-role b{display:block;margin-bottom:8px}
.access-role .seg{width:100%;flex-wrap:wrap}
.access-box{margin:12px 0 14px;padding:2px 14px 8px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.access-box>.toggle{border-bottom:1px solid var(--line)}
.access-pages{padding:12px 0 4px}
.access-pages.is-locked{opacity:.48;pointer-events:none}
.access-pages-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:4px}
.access-pages-head b{display:block}
.page-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:0 18px}
.page-sw{padding:8px 0;border-bottom:1px solid var(--line);align-items:center}
.page-sw b{font-size:13px;font-weight:650}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.log-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){.log-cols{grid-template-columns:1fr}}
.log-cols .panel{margin-bottom:0}
.log{max-height:420px;overflow:auto;font:12px/1.45 ui-monospace,Consolas,monospace;color:var(--log-text);background:var(--log);border-radius:12px;padding:12px;white-space:pre-wrap}
.log .e{color:var(--danger)}
.log .ok{color:var(--ok)}
.log .w{color:#c48a12}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.toggle b{font-weight:700}
.panel a:not(.btn){color:var(--accent)}
a.btn,a.btn:link,a.btn:visited,a.btn:hover{color:var(--btn-text);-webkit-text-fill-color:var(--btn-text)}
a.btn.ghost,a.btn.ghost:link,a.btn.ghost:visited{color:var(--text);-webkit-text-fill-color:var(--text)}
a.btn.danger,a.btn.danger:link,a.btn.danger:visited{color:#fff;-webkit-text-fill-color:#fff}
.sw{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;
  display:inline-block;width:52px;height:32px;min-width:52px;min-height:32px;max-height:32px;
  padding:0;border:0;border-radius:999px;background:var(--sw-off);
  position:relative;flex:none;vertical-align:middle;line-height:0;
}
.sw i{
  display:block;position:absolute;top:3px;left:3px;width:26px;height:26px;margin:0;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,32,48,.28);
  transition:transform .15s ease;pointer-events:none;
}
.sw.on{background:var(--accent)}
.sw.on i{transform:translateX(20px)}
.st-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.st-card{border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--bg-3)}
.st-card img{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 6px;cursor:zoom-in;background:var(--bg-2);border-radius:12px}
.st-card .tiny{padding:7px 10px;border-radius:10px;font-size:13px}
.st-card .st-meta{color:var(--muted);font-size:12px;text-align:center;margin:0 0 8px}
.st-card .st-hint{min-height:16px;font-size:12px;color:var(--ok);margin:4px 0 0}
.st-card .st-hint.err{color:var(--err)}
.st-head{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.st-head .grow{flex:1;min-width:180px}
.st-move{display:flex;gap:6px}
details.st-pack>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 4px;font-weight:700}
details.st-pack>summary::-webkit-details-marker{display:none}
details.st-pack>summary::after{content:'▸';color:var(--muted);font-size:12px;flex:0 0 auto;transition:transform .15s}
details.st-pack[open]>summary{margin-bottom:10px}
details.st-pack[open]>summary::after{transform:rotate(90deg)}
details.st-pack:not([open]){padding-bottom:12px}
details.st-pack>summary .st-sum{min-width:0}
details.st-pack>summary .st-sum b{display:block}
details.st-pack>summary .st-sum .sub{margin:4px 0 0}
.invite{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.invite code{font-size:14px;overflow-wrap:anywhere}
.seg{display:flex;gap:4px;background:var(--bg-3);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--bg-2);color:var(--text)}
.table-wrap{overflow-x:auto}
.charts{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-bottom:14px}
.charts.even{grid-template-columns:1fr 1fr}
@media (max-width:980px){.charts,.charts.even{grid-template-columns:1fr}}
.chart-svg{width:100%;height:240px;display:block;overflow:visible}
.chart-svg text{fill:var(--muted);font:11px Manrope,ui-sans-serif,sans-serif}
.ichart .chart-legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.ichart .chart-legend button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg-3);color:var(--muted);font-size:12px;font-weight:700}
.ichart .chart-legend button.on{color:var(--text);background:var(--bg-2)}
.ichart .chart-legend button i{width:8px;height:8px;border-radius:50%;display:inline-block}
.ichart .chart-legend button:not(.on) i{opacity:.35}
.chart-stage{position:relative}
.chart-tip{position:absolute;z-index:4;pointer-events:none;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:12px;box-shadow:0 10px 28px rgba(0,0,0,.22);min-width:148px;opacity:0;transform:translate(-8px,8px);transition:opacity .12s}
.chart-tip.show{opacity:1}
.chart-tip b{display:block;margin-bottom:4px}
.chart-tip .row{display:flex;justify-content:space-between;gap:14px;padding:1px 0}
.chart-tip .row span{color:var(--muted)}
.hour-bars i{cursor:pointer;opacity:.82;transition:opacity .12s, filter .12s}
.hour-bars i:hover,.hour-bars i.on{opacity:1;filter:brightness(1.18)}
.bar-h{cursor:default}
.bar-h:hover .nm{color:var(--text)}
.donut-row path{cursor:pointer;transition:opacity .12s}
.donut-row path:hover{opacity:.82}
.bar-h{display:flex;align-items:center;gap:10px;padding:6px 0}
.bar-h .nm{width:92px;flex:0 0 92px;font-size:12px;color:var(--muted)}
.bar-h .track{flex:1;height:10px;background:var(--bg-3);border-radius:999px;overflow:hidden;min-width:0}
.bar-h .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.bar-h .n{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
.hour-bars{display:flex;align-items:flex-end;gap:3px;height:160px;padding:8px 0 0}
.hour-bars i{flex:1;min-width:0;display:block;font-style:normal;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent-2) 70%,var(--accent)));border-radius:4px 4px 2px 2px}
.hour-labs{display:flex;gap:3px;margin-top:6px;color:var(--muted);font-size:10px}
.hour-labs span{flex:1;text-align:center;min-width:0}
.donut-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-row svg{width:140px;height:140px;flex:0 0 140px}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.stats-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.stats-head h2{margin:0}
.stats-head .seg{flex:0 0 auto}
.who{display:flex;flex-direction:column;gap:2px}
.who-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.who-row:last-child{border-bottom:0}
.fold{margin:4px 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-3);padding:0 12px}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;font-weight:700}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:'▸';color:var(--muted);font-size:12px;transition:transform .15s}
.fold[open]>summary::after{transform:rotate(90deg)}
.fold .who{max-height:360px;overflow:auto;padding-bottom:8px}
.check{display:flex;align-items:center;gap:10px;margin:8px 0 12px}
.check input{width:auto;accent-color:var(--accent)}
.detail{background:var(--bg-3);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0}
.kv div{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kv b{display:block;font-size:16px;letter-spacing:-.02em}
.kv span{color:var(--muted);font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-items:end;margin-bottom:12px}
.clickable{cursor:pointer}
.clickable:hover{background:var(--bg-3)}
.file-open{color:var(--accent);cursor:pointer;font-weight:600;background:none;border:0;padding:0;text-align:left}
.file-open:hover{text-decoration:underline}
.mf-thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;background:var(--bg-3);flex:0 0 40px}
.mf-name{display:flex;align-items:center;gap:8px}
.media-ov{position:fixed;inset:0;z-index:80;background:rgba(4,10,16,.78);display:flex;align-items:center;justify-content:center;padding:24px}
.media-ov.hidden{display:none}
.media-ov .box{width:min(920px,96vw);max-height:92vh;overflow:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:14px}
.media-ov .head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.media-ov img,.media-ov video:not(.circle-vid){display:block;max-width:100%;max-height:72vh;margin:0 auto;border-radius:12px;background:#000}
.media-ov audio{width:100%}
.media-ov .file-meta{display:grid;gap:6px;margin:8px 0 12px}
.media-ov .file-meta div{display:flex;gap:10px;align-items:baseline}
.media-ov .file-meta span{color:var(--muted);min-width:92px;font-size:12px}
.media-ov .file-meta b{font-weight:700;word-break:break-all}
.circle-player{width:min(360px,80vw);margin:8px auto 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.circle-wrap{position:relative;width:min(360px,80vw);aspect-ratio:1}
.circle-wrap .circle-vid{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#000;cursor:pointer;max-height:none}
.circle-wrap .circle-ring{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;background:conic-gradient(var(--accent) calc(var(--p,0)*1%),rgba(255,255,255,.18) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))}
.circle-wrap .circle-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.45);pointer-events:none}
.circle-wrap .circle-play::before{content:"";position:absolute;top:50%;left:54%;width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;transform:translate(-50%,-50%)}
.circle-wrap.playing .circle-play{display:none}
.mf-ext{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted);vertical-align:middle}
.scroll-card{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.scroll-card:last-child{border-bottom:0}
.scroll-card img{width:52px;height:88px;object-fit:cover;border-radius:10px;background:var(--bg-3);flex:0 0 52px}
.scroll-card .grow{flex:1;min-width:0}
.nav-scrim{display:none}
.mobile-bar{display:none}
.nav-toggle{flex:0 0 42px}
nav button{min-height:42px}
body.nav-lock{overflow:hidden;touch-action:none}
@media(max-width:900px){
  html,body{overflow-x:visible}
  #app,#login{overflow-x:clip;max-width:100%}
  .orb{opacity:.28;filter:blur(56px)}
  #app{display:block;min-height:100dvh}
  #app.nav-lock{overflow:hidden;height:100dvh}
  .mobile-bar{
    display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:46;
    padding:10px 12px 10px max(12px,env(safe-area-inset-left,0px));
    padding-top:calc(10px + env(safe-area-inset-top,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
    background:color-mix(in srgb,var(--aside) 92%,transparent);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px);
  }
  .mobile-bar b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.02em;flex:1}
  .mobile-bar .top-tools{
    position:static;
    top:auto;right:auto;
    margin-left:auto;
    flex:0 0 auto;
    gap:6px;
    z-index:auto;
  }
  .mobile-bar .icon-btn{width:38px;height:38px;flex:0 0 38px}
  .mobile-bar .theme-pop{position:fixed;top:calc(56px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:60}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:48;background:rgba(4,10,16,.48);opacity:0;pointer-events:none;transition:opacity .18s}
  #app.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  aside{
    position:fixed;left:0;top:0;bottom:0;z-index:50;width:min(300px,88vw);
    padding:16px 14px;padding-top:calc(16px + env(safe-area-inset-top,0px));
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
    border-right:1px solid var(--line);border-bottom:0;
    transform:translateX(-105%);transition:transform .2s ease;
    overflow:auto;overscroll-behavior:contain;
    background:var(--aside);
  }
  #app.nav-open aside{transform:none}
  nav{display:flex;flex-direction:column;gap:4px}
  nav button{padding:12px 14px;min-height:46px}
  .aside-foot{margin-top:auto;padding-top:16px;width:auto}
  .aside-foot .btn{width:100%}
  main{padding:14px max(14px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  main h2{display:none}
  .stats-head{flex-direction:column;align-items:stretch;gap:10px}
  .stats-head .seg{width:100%}
  .btn.sm{min-height:42px;padding:10px 14px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{padding:12px}
  .stat b{font-size:18px;overflow-wrap:anywhere}
  .panel{padding:14px 12px;border-radius:16px}
  .form-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .who-row,.invite{flex-direction:column;align-items:stretch}
  .who-row>span,.invite .row-actions{justify-content:flex-start}
  .toolbar{gap:8px}
  .toolbar .btn,.toolbar a.btn,.toolbar label.btn{flex:1 1 calc(50% - 8px);min-width:min(100%,148px);text-align:center}
  .seg{flex-wrap:wrap;border-radius:16px;width:100%}
  .seg button{flex:1 1 auto;min-height:40px}
  .toggle:not(.page-sw){align-items:flex-start}
  .table-wrap{margin:0 -12px;padding:0 8px}
  table{min-width:420px}
  table.tight{min-width:0;width:100%}
  .hide-sm{display:none}
  th,td{padding:10px 6px;font-size:13px}
  .row-actions .btn{min-height:36px}
  input,select,textarea{font-size:16px;padding:12px 14px}
  .st-edit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-ov{padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .media-ov .box{width:100%;max-height:94dvh;border-radius:16px}
  .bar-h .nm{width:72px;flex-basis:72px}
  div.call-row,details.call-row summary{grid-template-columns:46px 58px minmax(0,1fr)}
  .call-meta{grid-column:2 / -1}
  .srv-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .kv{grid-template-columns:1fr}
  .st-edit{grid-template-columns:1fr}
  .toolbar .btn,.toolbar a.btn,.toolbar label.btn{flex-basis:100%}
  .card{padding:22px 16px;border-radius:22px}
  #login{padding:16px}
}
.auth-forgot{display:block;width:100%;margin:12px 0 0;padding:0;background:none;border:0;color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;text-align:center}
.rec-seg{margin:0 0 12px}
.rec-codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.rec-codes code{display:block;padding:8px 10px;border-radius:10px;background:var(--bg-3);font:700 13px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.04em;text-align:center}
.srv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.srv-line{display:flex;justify-content:space-between;gap:10px;margin:12px 0 6px;font-size:13px}
.srv-line span{color:var(--muted)}
.srv-line b{font-weight:700;text-align:right}
.load-meter{height:8px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.load-meter i{display:block;height:100%;background:var(--ok);border-radius:99px}
.load-meter.warn i{background:#e0a100}
.load-meter.bad i{background:var(--danger)}
.srv-key{margin-top:14px}
.srv-key-row{display:flex;gap:8px;align-items:center}
.srv-key-row input{flex:1;width:auto;min-width:0}
.srv-key-row .btn{width:auto;flex:0 0 auto}
.store-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.pair-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-bottom:14px}
.pair-row>.panel{margin-bottom:0;min-width:0}
@media(max-width:900px){
  .pair-row{grid-template-columns:1fr}
  .store-tools{flex-direction:column;align-items:stretch}
  .store-tools .btn,.store-tools a.btn{
    flex:1 1 auto;width:100%;max-width:none;
    justify-content:center;text-align:center;white-space:normal;
  }
}