/* ═══════════════════════════════════════════════════════════════
   ЭКРАН СТОРИПЛЕЯ — ЕДИНСТВЕННЫЙ ИСТОЧНИК ВИДА ДЛЯ ЛОББИ.
   Собран НЕ РУКАМИ. Правила вынуты из «ПРОТОТИПЫ-ОКОН-Сториплей.html»
   скриптом и переименованы на классы, которые уже стоят в разметке
   боевого. Переменные (--gold, --m-pane, --sp-*) сохранены: цвет
   числом ломает все шесть видов площадки разом.

   ⚠ ПРАВИТЬ ЭТОТ ФАЙЛ РУКАМИ НЕЛЬЗЯ. Правится прототип, потом
   пересобирается этот файл. Иначе через месяц у вида снова будет
   два источника — ровно то, из-за чего лобби не сходилось с макетом
   четыре подхода подряд.

   Собрано: 2026-09-24
   Правил: 592
   ═══════════════════════════════════════════════════════════════ */

.sp-syspick-rows .lrowd.on{ background:var(--fill-2); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 12px; background:var(--fill-1); color:var(--text-body); font:inherit; font-size:12.5px; font-weight:500; border:0; cursor:pointer; position:relative; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), translate var(--dur-press) var(--ease); }
.btn:hover{ background:var(--fill-2); color:var(--text-strong); }
.btn:active{ scale:var(--press-s); }
.btn:active::after{ content:''; position:absolute; inset:calc(-1 * var(--press-pad)); }
.btn.gold{ background:var(--gold); color:var(--text-on-gold); font-weight:600; }
.btn.gold:hover{ background:var(--gold-hi); color:var(--text-on-gold); }
.btn.ghost{ background:transparent; color:var(--text-muted); }
.btn.ghost:hover{ background:var(--fill-2); color:var(--text-strong); }
.btn.danger{ background:var(--bad-dim); color:var(--bad); }
.btn.danger:hover{ background:var(--bad); color:var(--text-on-danger); }
.btn.on{ background:var(--gold-dim); color:var(--gold); }
.btn[disabled]{ opacity:.42; pointer-events:none; }
.btn.ic{ width:32px; padding:0; background:transparent; color:var(--text-body); }
.lrowd{ display:flex; align-items:center; gap:10px; padding:7px 12px; width:100%; background:transparent; border:0; color:var(--text-body); font:inherit; text-align:left; cursor:pointer; }
.lrowd:hover{ background:var(--surface-card-head); }
.lrowd .bd{ flex:1; min-width:0; }
.lrowd .t{ font-size:13px; color:var(--text-strong); }
.lrowd .t{ display:block; }
.lrowd .s{ display:block; font-size:11.5px; color:var(--text-faint); }
.f-area{ width:100%; min-height:64px; padding:8px 10px; background:var(--fill-1); color:var(--text-strong); border:0; font:inherit; font-size:13px; resize:vertical; }
.f-area:focus{ outline:none; background:var(--fill-2); }
.ch{ display:inline-flex; flex-direction:row; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; text-align:left; color:var(--text-body); user-select:none; font-weight:400; text-transform:none; letter-spacing:0; }
.ch input{ position:absolute; opacity:0; width:1px; height:1px; }
.ch .bx{ width:18px; height:18px; flex:none; background:var(--fill-1); display:flex; align-items:center; justify-content:center; color:transparent; }
.ch input:checked ~ .bx{ background:var(--gold); color:var(--text-on-gold); }
.ch input:focus-visible ~ .bx{ box-shadow:0 0 0 2px var(--gold); }
.ch .bx svg{ width:12px; height:12px; }
.ch .rd{ width:18px; height:18px; flex:none; background:var(--fill-1); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ch .rd i{ width:8px; height:8px; border-radius:50%; background:transparent; display:block; }
.ch input:checked ~ .rd i{ background:var(--gold); }
.ch input:focus-visible ~ .rd{ box-shadow:0 0 0 2px var(--gold); }
.tg{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; color:var(--text-body); user-select:none; }
.tg input{ position:absolute; opacity:0; width:1px; height:1px; }
.tg .tr{ width:38px; height:20px; flex:none; background:var(--fill-1); position:relative; transition:background 120ms cubic-bezier(.2,0,.2,1); }
.tg .tr i{ position:absolute; top:3px; left:3px; width:14px; height:14px; background:var(--text-muted); display:block; transition:translate 140ms cubic-bezier(.2,0,.2,1), background 140ms; }
.tg input:checked ~ .tr{ background:var(--gold-dim); }
.tg input:checked ~ .tr i{ translate:18px 0; background:var(--gold); }
.tg input:focus-visible ~ .tr{ box-shadow:0 0 0 2px var(--gold); }
.seg{ display:inline-flex; background:var(--fill-1); padding:2px; gap:2px; }
.seg label{ padding:5px 12px; font-size:12.5px; font-weight:500; color:var(--text-muted); cursor:pointer; white-space:nowrap; }
.seg label:hover{ color:var(--text-strong); }
.seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.seg input:checked + label{ background:var(--surface-card); color:var(--text-strong); font-weight:500; border-radius:var(--r-btn); }
.ibtn{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--text-muted); }
.ibtn:hover{ background:var(--fill-2); color:var(--text-strong); }
.ibtn svg{ width:14px; height:14px; }
.ibtn.big{ width:32px; height:32px; }
.ibtn.big svg{ width:18px; height:18px; }
.chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 4px 0 9px; background:var(--fill-1); color:var(--text-body); font-size:12.5px; }
.chip button{ width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.chip button:hover{ color:var(--bad); }
.chip svg{ width:11px; height:11px; }
.cnt{ min-width:18px; height:18px; padding:0 5px; background:var(--gold); color:var(--text-on-gold); font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.bar{ width:180px; height:8px; background:var(--fill-1); position:relative; }
.bar i{ position:absolute; inset:0 auto 0 0; display:block; background:var(--gold); }
.bar.ok i{ background:var(--ok); }
.bar.bad i{ background:var(--bad); }
.bar-row{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ctx{ width:190px; background:var(--m-pop); backdrop-filter:var(--m-blur-pop); box-shadow:var(--sh-2); padding:3px; }
.ctx button{ display:flex; align-items:center; gap:9px; width:100%; padding:6px 9px; font-size:13px; color:var(--text-body); text-align:left; }
.ctx button:hover{ background:var(--m-hover); color:var(--text-strong); }
.ctx button.bad:hover{ background:var(--bad-dim); color:var(--bad); }
.ctx button svg{ width:15px; height:15px; flex:none; opacity:.75; }
.ctx .sp{ height:4px; }
.n-frow{ display:flex; flex-direction:column; gap:5px; max-width:260px; }
.n-frow .cap{ font-size:11.5px; color:var(--text-faint); }
.n-frow .hint{ font-size:11.5px; color:var(--text-faint); }
.n-inp{ height:30px; padding:0 10px; background:var(--fill-1); color:var(--text-strong); border:0; font:inherit; font-size:13px; width:100%; }
.n-inp:focus{ outline:none; background:var(--fill-2); }
.n-inp::placeholder{ color:var(--text-faint); }
.n-wrap{ position:relative; display:inline-flex; align-items:center; width:220px; }
.n-wrap .n-inp{ padding-right:34px; }
.n-wrap .in-btn{ position:absolute; right:2px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.n-wrap .in-btn:hover{ color:var(--text-strong); background:var(--fill-2); }
.n-wrap .in-btn svg{ width:15px; height:15px; }
.n-wrap .unit{ position:absolute; right:10px; font-size:12px; color:var(--text-faint); pointer-events:none; }
.n-multi{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:32px; padding:4px 6px; background:var(--fill-1); width:250px; }
.n-multi .ch2{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 3px 0 8px; background:var(--fill-2); color:var(--text-body); font-size:12px; }
.n-multi .ch2 button{ width:16px; height:16px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.n-multi .ch2 button:hover{ color:var(--bad); }
.n-multi .ch2 svg{ width:10px; height:10px; }
.n-multi .more{ font-size:12px; color:var(--text-faint); padding:0 4px; }
.n-swatch{ width:26px; height:26px; flex:none; background-image:linear-gradient(45deg,var(--fill-2) 25%,transparent 25%,transparent 75%,var(--fill-2) 75%), linear-gradient(45deg,var(--fill-2) 25%,transparent 25%,transparent 75%,var(--fill-2) 75%); background-size:8px 8px; background-position:0 0,4px 4px; position:relative; }
.n-swatch i{ position:absolute; inset:0; background:var(--c, var(--gold)); display:block; }
.n-colpop{ width:186px; background:var(--m-pop); backdrop-filter:var(--m-blur-pop); box-shadow:var(--sh-2); padding:8px; display:flex; flex-direction:column; gap:8px; }
.n-colgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:3px; }
.n-colgrid i{ padding-top:100%; display:block; cursor:pointer; }
.n-colgrid i:hover{ outline:2px solid var(--text-strong); outline-offset:-2px; }
.n-colbot{ display:flex; align-items:center; gap:6px; }
.pp-pop.n-colpop{ min-width:0; padding:var(--sp-4); gap:var(--sp-4); }
.n-colbot .hex{ flex:1; height:24px; padding:0 7px; background:var(--fill-1); color:var(--text-strong); font-size:12px; border:0; }
.n-alpha{ height:12px; position:relative; background-image:linear-gradient(to right, transparent, var(--c, var(--gold))), linear-gradient(45deg,var(--fill-2) 25%,transparent 25%,transparent 75%,var(--fill-2) 75%); background-size:100% 100%,8px 8px; cursor:pointer; }
.n-alpha b{ position:absolute; top:-2px; left:62%; width:4px; height:16px; background:var(--text-strong); display:block; }
.n-drop{ width:100%; min-height:96px; background:var(--fill-1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--text-muted); font-size:12.5px; cursor:pointer; }
.n-drop svg{ width:26px; height:26px; color:var(--text-faint); }
.n-drop:hover{ background:var(--fill-2); color:var(--text-strong); }
.n-drop.hot{ background:var(--gold-dim); color:var(--gold); }
.n-drop.hot svg{ color:var(--gold); }
.n-tabsin{ display:flex; gap:2px; padding:6px var(--sp-6) 0; }
.n-tabsin span{ padding:5px 11px; font-size:12.5px; color:var(--text-muted); cursor:pointer; }
.n-tabsin span.on{ background:var(--m-hover); color:var(--text-strong); font-weight:500; }
.n-ghead{ padding:5px 10px; background:var(--fill-1); font-size:11.5px; color:var(--text-faint); display:flex; }
.n-ghead .n{ margin-left:auto; font-variant-numeric:tabular-nums; }
.n-cells{ display:flex; gap:3px; }
.n-cells i{ width:14px; height:14px; background:var(--fill-1); display:block; }
.n-cells i.on{ background:var(--gold); }
.n-cells i.hurt{ background:var(--bad); }
.n-cal{ width:216px; }
.n-cal .hd{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-strong); margin-bottom:6px; }
.n-cal .hd button{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.n-cal .hd button:hover{ background:var(--fill-1); color:var(--text-strong); }
.n-cal .hd svg{ width:12px; height:12px; }
.n-cal .g{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.n-cal .w{ font-size:10.5px; color:var(--text-faint); text-align:center; padding:2px 0; }
.n-cal .d{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-body); background:var(--fill-1); cursor:pointer; }
.n-cal .d:hover{ background:var(--fill-2); color:var(--text-strong); }
.n-cal .d.out{ color:var(--text-faint); background:transparent; }
.n-cal .d.free{ background:var(--ok-dim); color:var(--ok); }
.n-cal .d.busy{ background:var(--bad-dim); color:var(--bad); }
.n-cal .d.now{ box-shadow:inset 0 0 0 2px var(--gold); color:var(--text-strong); }
.n-cal .d.free:hover, .n-cal .d.busy:hover{ box-shadow:inset 0 0 0 2px var(--text-strong); }
.hlp-host{ position:relative; }
.hlp-fab{ position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:1350; width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--m-pop); backdrop-filter:var(--m-blur-pop); box-shadow:var(--sh-2); color:var(--gold); cursor:pointer; }
.hlp-fab svg{ width:24px; height:24px; filter:var(--m-icsh); }
.hlp-fab:not(:disabled):hover{ background:var(--gold); color:var(--text-on-gold); }
.hlp-fab.up{ bottom:var(--hlp-up, 252px); }
.hlp-dim{ position:fixed; inset:0; z-index:1400; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; padding:var(--sp-6); }
.sp-win.hlp-win{ width:420px; max-width:100%; max-height:100%; display:flex; flex-direction:column; }
.hlp-win .sp-win-body{ overflow:auto; min-height:0; }
.hlp-ft{ flex:none; display:flex; justify-content:flex-end; gap:var(--sp-4); padding:0 12px 12px; }
.hlp-shots{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-4); }
.hlp-shot{ position:relative; width:112px; height:70px; flex:none; background:var(--fill-1) center/cover no-repeat; }
.hlp-shot button{ position:absolute; right:0; top:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:var(--surface-app); color:var(--text-muted); cursor:pointer; }
.hlp-shot button:not(:disabled):hover{ background:var(--bad); color:var(--text-on-danger); }
.hlp-shot svg{ width:11px; height:11px; }
.hlp-meta{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5); }
.hlp-meta span{ background:var(--fill-1); padding:3px 8px; font-size:11.5px; color:var(--text-muted); }
.hlp-meta b{ color:var(--text-muted); font-weight:400; }
.hlp-list{ display:flex; flex-direction:column; gap:var(--sp-4); }
.hlp-item{ display:flex; gap:var(--sp-5); width:100%; padding:var(--sp-5); background:var(--on-photo-bg); text-align:left; cursor:pointer; }
.hlp-item:not(:disabled):hover{ background:linear-gradient(var(--m-hover),var(--m-hover)), var(--on-photo-bg); color:var(--text-body); }
.hlp-item.on{ background:linear-gradient(var(--gold-dim),var(--gold-dim)), var(--on-photo-bg); }
.hlp-item .bd{ flex:1; min-width:0; }
.hlp-item .hd{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:5px; }
.hlp-item .nm{ font-size:13px; color:var(--text-strong); font-weight:500; }
.hlp-item .when{ font-size:11.5px; color:var(--text-faint); margin-left:auto; font-variant-numeric:tabular-nums; }
.hlp-item .txt{ font-size:13px; color:var(--text-body); }
.hlp-item .th{ width:84px; height:52px; flex:none; background:var(--fill-1) center/cover no-repeat; }
.hlp-item .tags{ display:flex; gap:var(--sp-2); margin-top:7px; }
.hlp-open{ background:var(--on-photo-bg); padding:var(--sp-6); }
.hlp-open .shot{ width:100%; height:180px; background:var(--fill-1) center/cover no-repeat; margin:var(--sp-5) 0; }
.hlp-open .ans{ display:flex; gap:var(--sp-4); align-items:flex-end; margin-top:var(--sp-5); }
.t-rail{ width:64px; flex:none; background:var(--m-rail); backdrop-filter:var(--m-blur-rail); display:flex; flex-direction:column; align-items:center; padding:6px 0; }
.t-rail-top, .t-rail-sys, .t-rail-srv{ flex:none; display:flex; flex-direction:column; gap:2px; }
.t-rail-sys{ padding-bottom:10px; }
.t-rail-mid{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:2px; overflow-y:auto; overflow-x:hidden; }
.t-rail-mid::-webkit-scrollbar{ width:0; }
.t-rail-srv{ margin-top:6px; }
.t-hot{ position:absolute; left:50%; bottom:14px; translate:-50% 0; }
.c-app{ display:flex; flex-direction:column; height:100%; background:var(--surface-root); }
.c-keys{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:5px 6px 5px 12px; flex:none; background:var(--surface-panel); font-size:10.5px; color:var(--text-faint); }
.c-keys b{ background:var(--fill-1); color:var(--text-muted); padding:1px 5px; font-weight:500; }
.c-keys .ibtn{ margin-left:auto; }
.c-body{ flex:1; min-height:0; display:flex; }
.c-pane{ width:214px; flex:none; background:var(--surface-panel); display:flex; flex-direction:column; }
.c-pane-body{ padding:0 8px 12px; overflow:auto; }
.c-right{ width:300px; flex:none; background:var(--surface-panel); padding:var(--sp-4); overflow:auto; display:flex; flex-direction:column; gap:8px; }
.c-right-head{ display:flex; align-items:center; gap:6px; }
.c-right-head .t{ flex:1; font-size:13px; font-weight:600; color:var(--text-strong); }
.c-prop{ display:flex; align-items:center; gap:0; min-width:0; }
.c-prop > i{ width:24px; flex:none; display:flex; justify-content:center; color:var(--text-faint); cursor:help; }
.c-prop > i svg{ width:14px; height:14px; }
.c-prop .n-inp{ flex:1; }
.c-prop:has(> .n-inp), .c-prop:has(> .n-wrap){ min-height:26px; background:var(--fill-1); }
.c-prop:has(> .n-inp):focus-within, .c-prop:has(> .n-wrap):focus-within{ background:var(--fill-2); }
.c-prop > .n-inp, .c-prop > .n-wrap .n-inp{ height:26px; padding:0 var(--sp-2) 0 0; background:none; font-size:12px; }
.c-prop > .n-wrap .n-inp{ padding-right:44px; }
.c-prop > .n-inp:focus, .c-prop > .n-wrap .n-inp:focus{ background:none; }
.c-prop > textarea.n-inp{ height:auto; min-height:64px; padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; resize:vertical; }
.c-prop:has(> textarea){ align-items:flex-start; }
.c-prop:has(> textarea) > i{ padding-top:var(--sp-3); }
.c-prop > .lbl{ font-size:11px; color:var(--text-faint); padding:0 var(--sp-3) 0 var(--sp-4); white-space:nowrap; }
.c-prop > .n-wrap{ flex:1; width:auto; }
.c-prop > .n-wrap .unit{ right:var(--sp-3); }
.c-prop:has(> .seg){ flex-direction:column; align-items:stretch; gap:var(--sp-2); }
.c-prop:has(> .seg) > .lbl{ font-size:11.5px; padding:0; }
.c-right .seg{ display:flex; padding:2px; gap:2px; }
.c-right .seg label{ flex:1 1 auto; text-align:center; padding:var(--sp-2) var(--sp-3); font-size:12px; white-space:nowrap; }
.c-right .seg input:checked + label{ background:var(--fill-3); color:var(--text-strong); }
.c-right .btn{ height:26px; padding:0 var(--sp-4); font-size:12px; }
.c-right > .pp-sh{ cursor:default; margin-top:var(--sp-5); }
.c-canvas{ flex:1; min-width:0; position:relative; overflow:hidden; background:var(--surface-inset); background-image:radial-gradient(var(--fill-1) 1px, transparent 1px); background-size:22px 22px; }
.cv-app.full{ position:fixed; inset:0; z-index:1300; }
html:has(.cv-app.full){ overflow:hidden; }
.cv-canvas.link, .cv-canvas.link .cv-node{ cursor:crosshair; }
.cv-world{ position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; }
.cv-wires{ position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; z-index:1; }
.cv-wires.top{ z-index:5; }
.cv-wire{ fill:none; stroke:var(--text-faint); stroke-width:2; vector-effect:non-scaling-stroke; }
.cv-wire.rel{ stroke-dasharray:6 4; }
.cv-wire.on{ stroke:var(--gold); }
.cv-arr{ fill:var(--text-faint); }
.cv-arr.on{ fill:var(--gold); }
.cv-lbl{ position:absolute; translate:-50% -50%; pointer-events:none; white-space:nowrap; z-index:5; }
.cv-lbl.tag.grey{ background:var(--surface-card); color:var(--text-muted); }
.cv-frame{ position:absolute; background:var(--fill-1); }
.cv-ft{ position:absolute; left:12px; top:8px; display:flex; align-items:baseline; gap:8px; white-space:nowrap; transform-origin:0 0; font-size:13px; font-weight:600; color:var(--text-strong); }
.cv-ft .m{ font-size:11.5px; font-weight:400; color:var(--text-faint); }
.cv-frame .cv-empty{ position:absolute; left:0; top:32px; }
.cv-node{ position:absolute; width:220px; background:var(--surface-card); box-shadow:var(--sh-1); z-index:2; cursor:pointer; }
.cv-node:hover{ background:var(--surface-card-head); }
.cv-node.on{ box-shadow:0 0 0 2px var(--gold), var(--sh-1); z-index:4; }
.cv-node.src{ box-shadow:0 0 0 2px var(--gold-dim), var(--sh-1); }
.cv-node.drag{ box-shadow:var(--sh-2); z-index:6; }
.cv-node.cv-soon{ cursor:default; }
.cv-node.cv-soon:hover{ background:var(--surface-card); }
.cv-node.cv-soon > :not(.cv-lock){ opacity:.5; }
.cv-node.cv-soon .cv-hd{ padding-right:34px; }
.cv-lock{ position:absolute; top:8px; right:12px; display:flex; color:var(--text-muted); }
.cv-lock svg{ width:16px; height:16px; }
.cv-add button:disabled:hover{ background:transparent; color:var(--text-body); }
.cv-add .cv-lock-m{ margin-left:auto; }
.cv-node.cv-sys-open .cv-sysbtn svg{ rotate:180deg; }
.cv-node .cv-sys{ display:none; }
.cv-node.cv-sys-open .cv-sys{ display:block; }
.cv-app.cv-wide .cv-canvas{ display:none; }
.cv-app.cv-wide .cv-props{ flex:1; width:auto; max-width:none; }
.cv-app.cv-wide .cv-art-body{ max-width:760px; }
.cv-app.cv-wide .cv-art-pic{ height:240px; }
.cv-app.cv-wide .cv-grip{ display:none; }
.cv-hd{ display:flex; align-items:center; gap:6px; padding:8px 12px 6px; }
.cv-hd > i{ display:flex; flex:none; color:var(--text-faint); }
.cv-hd > i svg{ width:16px; height:16px; }
.cv-t{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--text-strong); line-height:1.3; }
.cv-x{ padding:0 12px 12px; font-size:12.5px; line-height:1.45; color:var(--text-muted); }
.cv-note.bare .cv-x{ padding-top:12px; color:var(--text-body); }
.cv-tags{ display:flex; flex-wrap:wrap; gap:4px; padding:0 12px 12px; }
.cv-pad{ height:6px; }
.cv-s{ margin:0 8px 8px; padding:6px 8px; background:var(--m-inset); font-size:12px; line-height:1.4; color:var(--text-body); }
.cv-s .k{ display:block; font-size:11px; color:var(--text-faint); }
.cv-s.hid{ display:flex; gap:6px; align-items:flex-start; color:var(--text-muted); }
.cv-s.hid > i{ display:flex; flex:none; color:var(--text-faint); }
.cv-s.hid svg{ width:16px; height:16px; }
.cv-node > .cv-cover + .cv-s{ margin-top:8px; }
.cv-cover{ position:relative; height:124px; background:center/cover no-repeat var(--m-inset); }
.cv-cover.none{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.cv-cover.none > i{ display:flex; opacity:.45; }
.cv-cover.none > i svg{ width:32px; height:32px; }
.cv-cover .nv-pin{ pointer-events:none; }
.cv-photo{ background:var(--on-photo-bg); color:var(--on-photo-tx); }
.cv-photo + .cv-photo{ margin-left:auto; }
.cv-novella:hover .nv-act{ opacity:1; }
.cv-novella .nv-act{ height:24px; font-size:11.5px; padding:0 9px; }
.cv-foot{ display:flex; align-items:center; gap:6px; padding:8px 8px 8px 12px; }
.cv-foot .sp{ flex:1; }
.cv-person .cv-cover{ height:140px; background-position:center 25%; }
.cv-ava{ display:flex; align-items:center; gap:8px; padding:12px 12px 8px; }
.cv-ava .av{ flex:none; }
.cv-ava .n{ display:block; font-size:12.5px; font-weight:600; color:var(--text-strong); }
.cv-ava .r{ display:block; font-size:11px; color:var(--text-faint); }
.cv-row{ display:flex; align-items:center; gap:8px; padding:0 12px 8px; font-size:12px; color:var(--text-muted); }
.cv-thing{ display:flex; gap:8px; align-items:center; padding:8px 12px; }
.cv-thing .ph{ width:48px; height:48px; flex:none; background:center/cover no-repeat var(--m-inset); display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.cv-thing .ph svg{ width:24px; height:24px; }
.cv-thing .m{ display:block; font-size:11px; font-weight:400; color:var(--text-faint); }
.cv-app.eyes .cv-s.hid, .cv-app.eyes .cv-cmt, .cv-app.no-cmt .cv-cmt{ display:none; }
.cv-world.far .cv-lbl, .cv-world.far .cv-cmt{ display:none; }
.cv-mini{ position:absolute; right:12px; bottom:12px; width:168px; height:104px; z-index:8; background:var(--m-pop); backdrop-filter:var(--m-blur-pop); box-shadow:var(--sh-2); cursor:pointer; overflow:hidden; }
.cv-mini *{ pointer-events:none; }
.cv-mini i{ position:absolute; display:block; background:var(--fill-3); }
.cv-mini i.f{ background:var(--fill-2); }
.cv-mini b{ position:absolute; display:block; background:var(--gold-dim); }
.cv-canvas .t-hot{ z-index:8; }
.cv-add{ position:absolute; left:50%; bottom:72px; translate:-50% 0; z-index:9; }
.cv-add i{ display:flex; color:var(--text-muted); }
.cv-add svg{ width:15px; height:15px; }
.t-scene .th.none{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.t-scene .th.none svg{ width:24px; height:24px; }
.c-pane .t-scene + .t-scene{ margin-top:2px; }
.c-pane .cv-pane-b{ width:100%; margin-top:8px; }
.cv-props .c-right-head > i{ display:flex; color:var(--text-faint); }
.cv-props .c-right-head > i svg{ width:24px; height:24px; }
.cv-props .acts .btn{ width:100%; }
.cv-demo .cv-node{ position:relative; left:auto; top:auto; }
.pp-pane{ width:300px; flex:none; display:flex; flex-direction:column; background:var(--m-pane); font-size:12px; color:var(--text-body); padding-bottom:var(--sp-4); }
.pp-hd{ display:flex; align-items:center; gap:2px; padding:var(--sp-4) var(--sp-3) var(--sp-2) var(--sp-5); }
.pp-nm{ flex:1; min-width:0; height:26px; padding:0 var(--sp-3); margin-left:calc(-1 * var(--sp-3)); background:none; border:0; outline:none; font:inherit; font-size:13px; font-weight:600; color:var(--text-strong); }
.pp-nm:hover{ background:var(--fill-1); }
.pp-nm:focus{ background:var(--fill-2); }
span.pp-nm{ display:block; line-height:26px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
span.pp-nm:hover{ background:none; }
.pp-sub{ padding:0 var(--sp-5) var(--sp-4); font-size:11px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-sub b{ font-weight:500; color:var(--text-muted); }
.pp-pane .n-tabsin{ padding:0 var(--sp-4) var(--sp-4); }
.pp-sec{ margin:0 var(--sp-4) var(--sp-6); }
.pp-sh{ display:flex; align-items:center; gap:var(--sp-2); min-height:26px; padding:0 2px 0 10px; background:var(--fill-2); font-size:11.5px; font-weight:600; color:var(--text-muted); cursor:pointer; user-select:none; }
.pp-sh .pp-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-sh .pp-cnt{ font-weight:400; color:var(--text-faint); }
.pp-sh .pp-fold{ width:26px; display:flex; justify-content:center; color:var(--text-faint); }
.pp-sh .pp-fold svg{ width:14px; height:14px; transition:rotate .15s; }
.pp-sec.pp-shut .pp-fold svg{ rotate:-90deg; }
.pp-sec.pp-shut .pp-bd, .pp-sec.pp-empty .pp-bd{ display:none; }
.pp-sec.pp-empty{ margin-bottom:var(--sp-2); }
.pp-sec.pp-empty + .pp-sec:not(.pp-empty){ margin-top:var(--sp-5); }
.pp-sec.pp-empty .pp-sh{ background:none; color:var(--text-faint); font-weight:500; }
.pp-sec.pp-empty .pp-sh .pp-fold{ visibility:hidden; }
.pp-bd{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) 2px var(--sp-3); }
.pp-r{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.pp-grow{ flex:1; min-width:0; }
.pp-col{ display:flex; flex-direction:column; gap:var(--sp-3); flex:1; min-width:0; }
.pp-g2, .pp-g3, .pp-g4{ display:grid; gap:var(--sp-3); }
.pp-g2{ grid-template-columns:1fr 1fr; }
.pp-g3{ grid-template-columns:1fr 1fr 1fr; }
.pp-g4{ grid-template-columns:repeat(4, 1fr); }
.pp-n{ display:flex; align-items:center; height:26px; min-width:0; background:var(--fill-1); }
.pp-n:focus-within{ background:var(--fill-2); }
.pp-n > b{ width:24px; flex:none; align-self:stretch; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--text-faint); cursor:ew-resize; user-select:none; }
.pp-n > b:hover{ color:var(--gold); }
.pp-n > b svg{ width:14px; height:14px; }
.pp-n > b.pp-word{ width:auto; padding:0 var(--sp-3) 0 var(--sp-4); }
.pp-n input{ flex:1; min-width:0; width:100%; height:100%; padding:0 var(--sp-2) 0 0; background:none; border:0; outline:none; color:var(--text-strong); font:inherit; font-size:12px; font-variant-numeric:tabular-nums; }
.pp-n input::placeholder{ color:var(--text-faint); }
.pp-n input::-webkit-outer-spin-button, .pp-n input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pp-n > u{ text-decoration:none; font-size:12px; color:var(--text-faint); padding-right:var(--sp-3); }
.pp-n.pp-mode input{ color:var(--text-faint); }
.pp-n > button{ width:22px; flex:none; align-self:stretch; display:flex; align-items:center; justify-content:center; padding:0; background:none; border:0; color:var(--text-faint); }
.pp-n > button svg{ width:14px; height:14px; }
.pp-n > button:not(:disabled):hover, .pp-n > button.pp-on:not(:disabled){ background:var(--fill-2); color:var(--text-strong); }
.pp-f{ width:100%; min-width:0; height:26px; padding:0 var(--sp-4); background:var(--fill-1); border:0; outline:none; color:var(--text-strong); font:inherit; font-size:12px; }
.pp-f:focus{ background:var(--fill-2); }
.pp-area{ width:100%; min-height:64px; padding:var(--sp-3) var(--sp-4); background:var(--fill-1); border:0; outline:none; resize:vertical; color:var(--text-strong); font:inherit; font-size:12px; }
.pp-area:focus{ background:var(--fill-2); }
.pp-seg{ display:flex; gap:2px; height:26px; min-width:0; padding:2px; background:var(--fill-1); }
.pp-seg button{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:var(--sp-2); padding:0 var(--sp-3); background:none; border:0; color:var(--text-muted); font:inherit; font-size:12px; white-space:nowrap; }
.pp-seg button svg{ width:14px; height:14px; }
.pp-seg button.pp-on:not(:disabled), .pp-seg button.pp-on:not(:disabled):hover{ background:var(--fill-3); color:var(--text-strong); font-weight:500; }
.pp-seg button:not(.pp-on):not(:disabled):hover{ background:var(--fill-2); color:var(--text-strong); }
.ibtn.pp-fill{ background:var(--fill-1); flex:none; }
.ibtn.pp-fill:not(:disabled):hover{ background:var(--fill-2); color:var(--text-strong); }
.ibtn.pp-on:not(:disabled), .ibtn.pp-on:not(:disabled):hover{ background:var(--gold-dim); color:var(--gold); }
.ibtn.pp-txt{ font-size:12px; font-weight:600; }
.pp-a9{ display:grid; grid-template-columns:repeat(3, 18px); grid-auto-rows:18px; gap:2px; padding:2px; flex:none; align-self:flex-start; background:var(--fill-1); }
.pp-a9 button{ display:flex; align-items:center; justify-content:center; padding:0; background:none; border:0; }
.pp-a9 button::before{ content:''; width:4px; height:4px; background:var(--text-faint); }
.pp-a9 button.pp-on::before{ width:10px; height:4px; background:var(--gold); }
.pp-a9 button:not(:disabled):hover{ background:var(--fill-2); }
.pp-a9.pp-stretch button::before{ width:14px; height:3px; background:var(--gold); }
.pp-c{ display:flex; align-items:center; gap:var(--sp-3); height:26px; min-width:0; padding-left:var(--sp-2); background:var(--fill-1); cursor:pointer; }
.pp-c:hover{ background:var(--fill-2); }
.pp-c > i{ width:18px; height:18px; flex:none; display:block; background:var(--c, transparent); }
.pp-c > i.pp-none{ background:conic-gradient(var(--fill-3) 25%, var(--fill-1) 0 50%, var(--fill-3) 0 75%, var(--fill-1) 0) 0 0/8px 8px; }
.pp-c > span{ flex:1; min-width:0; font-size:12px; color:var(--text-strong); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-c > span.pp-dim{ color:var(--text-faint); }
.pp-c > em{ font-style:normal; font-size:12px; color:var(--text-faint); padding-right:var(--sp-4); font-variant-numeric:tabular-nums; }
.pp-marks{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.pp-marks > *{ width:18px; height:18px; display:block; background:var(--mark, var(--fill-1)); cursor:pointer; }
.pp-marks > .pp-on{ box-shadow:0 0 0 2px var(--gold); }
.pp-lay{ display:flex; align-items:center; gap:var(--sp-3); height:26px; padding-left:var(--sp-2); background:var(--fill-1); }
.pp-lay > i{ width:18px; height:18px; flex:none; display:block; background:var(--c, var(--fill-2)); }
.pp-lay > span{ flex:1; min-width:0; font-size:12px; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-link{ display:flex; align-items:center; gap:var(--sp-3); height:26px; min-width:0; padding-left:var(--sp-4); background:var(--gold-dim); color:var(--gold); }
.pp-link > span{ flex:1; min-width:0; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-sock{ display:flex; align-items:center; gap:var(--sp-3); }
.pp-sock > span{ width:74px; flex:none; font-size:11.5px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-pane .ch{ font-size:12px; gap:var(--sp-3); }
.pp-hint{ font-size:12px; color:var(--text-faint); }
.pp-pane .btn, .pp-bd .btn{ height:26px; padding:0 var(--sp-4); font-size:12px; }
.pp-cap{ font-size:11.5px; color:var(--text-faint); margin-bottom:calc(-1 * var(--sp-2)); }
.pp-pop{ position:fixed; z-index:1450; min-width:180px; padding:var(--sp-2); display:flex; flex-direction:column; background:var(--m-pop); backdrop-filter:var(--m-blur-pop); box-shadow:var(--sh-1); }
.pp-pop > button{ display:flex; align-items:center; gap:var(--sp-4); padding:6px 9px; background:none; border:0; font:inherit; font-size:12.5px; color:var(--text-body); text-align:left; }
.pp-pop > button:not(:disabled):hover{ background:var(--fill-2); color:var(--text-strong); }
.pp-pop > button.pp-on:not(:disabled){ color:var(--gold); }
.pp-pop > button.pp-bad:not(:disabled){ color:var(--bad); }
.pp-qbar{ position:absolute; z-index:5; display:flex; gap:2px; padding:var(--sp-2); background:var(--m-pop); backdrop-filter:var(--m-blur-pop); box-shadow:var(--sh-1); opacity:0; translate:0 4px; pointer-events:none; transition:opacity .16s ease-out, translate .16s ease-out; }
.pp-qbar.pp-on{ opacity:1; translate:0 0; pointer-events:auto; }
.pp-qbar .ibtn:disabled{ opacity:.35; }
.tg.pp-tg{ gap:var(--sp-3); font-size:12px; font-weight:400; color:var(--text-body); }
.tg.pp-tg .tr{ width:26px; height:14px; }
.tg.pp-tg .tr i{ top:2px; left:2px; width:10px; height:10px; }
.tg.pp-tg input:checked ~ .tr i{ translate:12px 0; }
.pp-sh .tg.pp-tg{ margin-left:auto; }
.pp-sl{ display:grid; grid-template-columns:92px minmax(0, 1fr) auto; align-items:center; gap:var(--sp-3); min-height:26px; }
.pp-sl > span{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-sl > input[type=range]{ width:100%; min-width:0; }
.pp-sl > b{ min-width:36px; font-size:12px; font-weight:500; color:var(--text-strong); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-row{ display:flex; flex-wrap:wrap; gap:var(--sp-5); align-items:flex-start; }
.rbtn{ width:46px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:var(--r-btn); background:transparent; border:0; color:var(--text-faint); cursor:pointer; position:relative; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.rbtn:hover{ background:var(--m-hover); color:var(--text-strong); }
.rbtn.on{ background:var(--gold-dim); color:var(--gold); }
.rbtn:active{ scale:var(--press-s); }
.rbtn:active::after{ content:''; position:absolute; inset:calc(-1 * var(--press-pad)); }
.rbtn svg{ width:30px; height:30px; display:block; filter:var(--m-icsh); }
.pitem{ display:flex; align-items:center; gap:8px; min-height:30px; padding:5px 8px; width:100%; border:0; border-radius:var(--r-btn); background:transparent; cursor:pointer; color:var(--text-body); font:inherit; font-size:13px; text-align:left; position:relative; transition:background .1s ease, color .1s ease; }
.pitem:hover{ background:var(--m-hover); color:var(--text-strong); }
.pitem.on{ background:var(--m-hover2); color:var(--text-strong); font-weight:500; }
.pitem .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pitem .n{ font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.pitem:hover .n, .pitem.on .n{ color:var(--text-muted); }
.pitem.sub{ padding-left:14px; font-size:12.5px; color:var(--text-muted); }
.pitem.sub:hover, .pitem.sub.on{ color:var(--text-strong); }
.pane-none{ padding:6px 8px 10px; font-size:12px; line-height:1.45; color:var(--text-faint); }
.grp{ padding:10px 6px 4px; font-size:11.5px; color:var(--text-faint); display:flex; align-items:center; gap:6px; }
.grp .c{ margin-left:auto; }
.grp-blk{ background:var(--m-inset); padding:2px 6px 6px; margin-bottom:10px; display:flex; flex-direction:column; gap:2px; }
.grp-blk:last-child{ margin-bottom:0; }
.grp-blk .grp{ padding-top:8px; }
.rail{ width:64px; flex:none; background:var(--m-rail); backdrop-filter:var(--m-blur-rail); padding:8px 0 10px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.rail .rail-foot{ margin-top:auto; padding-top:18px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.pane{ width:214px; flex:none; background:var(--m-pane); backdrop-filter:var(--m-blur-pane); display:flex; flex-direction:column; }
.pane-head{ height:44px; flex:none; display:flex; align-items:center; padding:0 8px 0 14px; font-size:13px; font-weight:600; color:var(--text-strong); }
.pane-body{ padding:2px 8px 14px; display:flex; flex-direction:column; gap:2px; }
.work{ flex:1; min-width:0; background:var(--m-inset); backdrop-filter:blur(3px); display:flex; flex-direction:column; }
.work-head{ height:52px; flex:none; display:flex; align-items:center; gap:10px; padding:0 16px; }
.work-h1{ font-size:23px; font-weight:500; color:var(--text-strong); line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.sp-hotbar{ display:inline-flex; background:var(--m-rail); backdrop-filter:var(--m-blur-rail); border-radius:var(--r-box); padding:4px; gap:2px; }
.sp-hotbar .sp-hot{ width:44px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:var(--r-btn); background:transparent; border:0; color:var(--text-faint); cursor:pointer; position:relative; }
.sp-hotbar .sp-hot svg{ width:24px; height:24px; display:block; filter:var(--m-icsh); }
.sp-hotbar .sp-hot:hover{ background:var(--m-hover); color:var(--text-strong); }
.sp-hotbar .sp-hot.on{ background:var(--gold-dim); color:var(--gold); }
.sp-hotbar .sp-hot:active{ scale:var(--press-s, .97); }
.sp-hotbar .sp-hot:active::after{ content:''; position:absolute; inset:calc(-1 * var(--press-pad, 2%)); }
.sp-hotbar .sp-hot-key{ position:absolute; right:4px; bottom:2px; font-size:9px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.nv-card{ --k-cover:254px; width:390px; flex:none; position:relative; }
.nv-cover{ height:var(--k-cover); position:relative; border-radius:var(--r-box); overflow:hidden; background:center/cover no-repeat var(--m-inset); background-image:var(--k-ob1); }
.nv-cover.c2{ background-image:var(--k-ob2); }
.nv-cover.c3{ background-image:var(--k-ob3); }
.nv-cover.c4{ background-image:var(--k-ob4); }
.nv-cover.none{ background-image:none; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.nv-cover.none > svg{ width:32px; height:32px; opacity:.45; }
.nv-over{ position:absolute; left:0; right:0; bottom:0; padding:38px 10px 9px; background:linear-gradient(transparent, var(--on-photo-shade)); }
.nv-title{ font-size:14.5px; font-weight:600; color:var(--on-photo-tx); line-height:1.2; }
.nv-meta{ font-size:11.5px; color:var(--on-photo-tx); opacity:.78; margin-top:2px; }
.nv-pins{ position:absolute; left:8px; top:8px; right:8px; display:flex; align-items:center; gap:4px; }
.nv-pin{ height:24px; min-width:24px; padding:0 4px; display:inline-flex; align-items:center; gap:4px; border-radius:var(--r-btn); background:transparent; color:var(--on-photo-tx); font-size:11px; border:0; cursor:pointer; text-shadow:0 1px 2px var(--on-photo-shade); }
.nv-pin svg{ width:16px; height:16px; filter:drop-shadow(0 1px 2px var(--on-photo-shade)); }
.nv-pin:hover{ background:var(--gold); color:var(--text-on-gold); text-shadow:none; }
.nv-pin:hover svg{ filter:none; }
.nv-pin.sp{ margin-left:auto; }
.nv-pin.off{ opacity:.5; }
.nv-act{ position:absolute; right:9px; bottom:9px; opacity:0; transition:opacity 120ms; }
.nv-card:hover .nv-act{ opacity:1; }
.nv-cols{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.hl{ color:var(--gold); font-weight:600; }
.find-row{ display:flex; align-items:center; gap:10px; padding:7px 8px; width:100%; border:0; border-radius:var(--r-box); background:var(--m-pop); backdrop-filter:var(--m-blur-pop); color:var(--text-body); font:inherit; text-align:left; cursor:pointer; }
.find-row:hover{ background:var(--m-hover2); }
.find-th{ width:84px; height:48px; flex:none; border-radius:var(--r-btn); background:center/cover no-repeat var(--m-inset); background-image:var(--k-ob1); }
.find-th.t2{ background-image:var(--k-ob5); }
.find-th.t3{ background-image:var(--k-ob6); }
.find-th.none{ background-image:none; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.find-th.none svg{ width:18px; height:18px; }
.find-t{ display:block; font-size:13px; color:var(--text-strong); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.find-s{ display:block; font-size:11.5px; color:var(--text-faint); }
.sp-win{ width:330px; background:var(--m-pop); backdrop-filter:var(--m-blur-pop); box-shadow:var(--sh-2); border-radius:var(--r-box); overflow:hidden; }
.sp-win-head{ display:flex; align-items:center; gap:8px; background:var(--m-inset); padding:7px 8px 7px 12px; }
.sp-win-title{ font-size:14px; font-weight:600; color:var(--gold); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-x{ width:24px; height:24px; flex:none; border:0; background:transparent; padding:0; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; border-radius:var(--r-btn); }
.sp-x:hover{ background:var(--m-hover2); color:var(--text-strong); }
.sp-x:active{ scale:var(--press-s); }
.sp-x:active::after{ content:''; position:absolute; inset:calc(-1 * var(--press-pad)); }
.sp-x svg{ width:14px; height:14px; display:block; }
.sp-win-body{ padding:14px 12px 12px; display:flex; flex-direction:column; gap:10px; font-size:13px; }
.seth{ font-size:11.5px; font-weight:600; color:var(--text-faint); margin:0 0 8px; }
.side{ width:180px; flex:none; background:var(--m-pane); backdrop-filter:var(--m-blur-pane); padding:12px 10px; }
.prow{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12.5px; }
.av{ width:32px; height:32px; flex:none; border-radius:50%; background:var(--role-player); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--on-photo-tx); }
.av.m{ background:var(--gold); color:var(--text-on-gold); }
.prow .rl{ font-size:11px; color:var(--text-faint); }
.d-brand .g-lg{ width:64px; flex:none; color:var(--gold); display:block; }
.d-brand .g-lg svg{ display:block; width:100%; height:auto; }
.tag{ display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px; font-size:12px; font-weight:600; }
.tag.gold{ background:color-mix(in srgb, var(--gold) 14%, transparent); color:color-mix(in srgb, var(--gold) 50%, var(--text-strong)); }
.tag.ok{ background:color-mix(in srgb, var(--ok) 15%, transparent); color:color-mix(in srgb, var(--ok) 50%, var(--text-strong)); }
.tag.bad{ background:color-mix(in srgb, var(--bad) 15%, transparent); color:color-mix(in srgb, var(--bad) 50%, var(--text-strong)); }
.tag.info{ background:color-mix(in srgb, var(--info) 15%, transparent); color:color-mix(in srgb, var(--info) 50%, var(--text-strong)); }
.tag.grey{ background:var(--fill-1); color:var(--text-muted); }
.g-card{ width:300px; background:var(--gate-card); backdrop-filter:blur(10px) brightness(.6); padding:26px 24px 22px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.g-card .g-lg{ display:block; color:var(--gold); }
.g-card .g-lg svg{ display:block; width:100%; height:auto; }
.g-lg-96{ width:96px; }
.g-lg-24{ width:24px; }
.g-nm{ font-size:26px; font-weight:600; color:var(--text-strong); line-height:1; }
.g-sub{ font-size:12px; color:var(--text-faint); margin-bottom:8px; text-align:center; }
.g-foot{ font-size:12px; color:var(--text-faint); margin-top:4px; }
.g-foot a{ color:var(--gold); cursor:pointer; }
.g-card .n-frow .cap{ align-self:flex-start; }
.g-card .ch{ font-size:12px; }
.ch-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; width:100%; }
.ch-col{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; margin-top:2px; }
.ch-col .ch{ align-items:flex-start; }
.ch-col .ch .bx{ margin-top:1px; }
.ch-legal{ margin:-2px 0 0 26px; }
.search{ position:relative; display:flex; align-items:center; width:220px; }
.search .lup{ position:absolute; left:8px; width:16px; height:16px; display:flex; color:var(--text-faint); pointer-events:none; }
.search .lup svg{ position:static; width:16px; height:16px; }
.search input{ width:100%; height:34px; padding:0 10px 0 30px; background:var(--m-inset); color:var(--text-strong); border:0; font:inherit; font-size:13px; }
.search input::placeholder{ color:var(--text-faint); }
.search input:focus{ outline:none; background:var(--m-hover2); }
.in-btn svg{ width:14px; height:14px; }
.keys{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; padding:10px 10px 12px; font-size:10.5px; color:var(--text-faint); }
.keys b{ background:var(--fill-1); color:var(--text-muted); padding:1px 5px; font-weight:500; }
.lb-next{ background:var(--m-inset); padding:8px 10px; }
.lb-next .t{ font-size:12.5px; color:var(--text-strong); }
.lb-next .s{ font-size:11px; color:var(--text-faint); margin-top:2px; }
.nv-add{ height:var(--k-cover); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--surface-inset); border:0; color:var(--text-faint); font-size:12.5px; cursor:pointer; }
.nv-add svg{ width:22px; height:22px; }
.nv-add:not(:disabled):hover{ color:var(--text-body); background:var(--surface-card); }
.nv-pin.sp2{ margin-left:auto; }
.find-th.none{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.find-th.none svg{ width:24px; height:24px; }
.pitem svg, .rbtn svg, .ibtn svg, .in-btn svg{ display:block; }
.btn svg{ display:block; }
.ch .bx svg{ width:12px; height:12px; }
.ch input:checked ~ .bx svg{ color:var(--text-on-gold); }
.lb-req{ background:var(--m-inset); padding:8px; margin-bottom:6px; }
.th-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.th{ background:transparent; border:0; padding:6px; cursor:pointer; display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.th:hover{ background:var(--fill-1); }
.th.on{ background:var(--gold-dim); }
.th-face{ height:64px; background:var(--f); display:flex; align-items:flex-end; gap:6px; padding:8px; }
.th-face i{ width:26px; height:8px; background:var(--a); display:block; }
.th-face b{ flex:1; height:8px; background:var(--t); display:block; opacity:.7; }
.th-nm{ font-size:12px; color:var(--text-muted); text-align:left; }
.th.on .th-nm{ color:var(--gold); font-weight:500; }
.fon-row{ display:flex; gap:8px; flex-wrap:wrap; }
.fon{ background:transparent; border:0; padding:6px; cursor:pointer; width:170px; display:flex; flex-direction:column; gap:6px; }
.fon:hover{ background:var(--fill-1); }
.fon.on{ background:var(--gold-dim); }
.fon-face{ height:74px; background:center/cover no-repeat var(--surface-inset); display:block; }
.fon-face.plain{ background:linear-gradient(180deg,var(--surface-rail),var(--surface-app)); }
.fon-nm{ font-size:12px; color:var(--text-muted); text-align:left; }
.fon.on .fon-nm{ color:var(--gold); font-weight:500; }
.gen-kinds .btn{ height:26px; padding:0 10px; font-size:12px; }
.lrowd .ic-b{ width:24px; flex:none; display:flex; color:var(--text-muted); }
.lrowd .ic-b svg{ width:24px; height:24px; }
.lrowd svg{ flex:none; }
.lrowd[disabled]{ cursor:default; }
.n-drop span{ display:flex; }
.n-drop svg{ width:26px; height:26px; }
.chip i{ display:flex; }
.chip i svg{ width:24px; height:24px; }
.n-cal .hd button svg{ width:24px; height:24px; }
.n-cal .hd button{ width:26px; height:26px; }
.n-multi .ch2 button svg{ width:16px; height:16px; }
.nv-pin i{ display:flex; }
.nv-pin i svg{ width:14px; height:14px; }
.nv-pin.no{ color:var(--bad); font-weight:600; }
.pane{ width:var(--pane-w, 248px); }
.side{ width:var(--side-w, 268px); }
.t-scene .th{ width:56px; height:34px; flex:none; background:center/cover no-repeat var(--m-inset); }
.ctx i{ display:flex; }
.ctx i svg{ width:15px; height:15px; opacity:.75; }
.t-chat .hl{ color:var(--gold); }
.v-ptop .tag{ flex:none; }
.v-live .tag, .v-live .btn{ flex:none; white-space:nowrap; }
.rbtn .dot{ position:absolute; right:6px; top:6px; width:6px; height:6px; background:var(--bad); display:block; }
.sys-shots{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.sys-shots::-webkit-scrollbar{ height:0; }
.sys-shot{ width:84px; height:54px; flex:none; border:0; cursor:pointer; padding:0; background:center/cover no-repeat var(--m-inset); }
.sys-shot:hover{ outline:2px solid var(--fill-3); outline-offset:-2px; }
.sys-shot.on{ outline:2px solid var(--gold); outline-offset:-2px; }
.sys-shot.more{ display:flex; align-items:center; justify-content:center; background:var(--fill-1); color:var(--text-muted); font:inherit; font-size:12.5px; }
.sys-facts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.sys-facts .f{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; background:var(--fill-1); font-size:12px; color:var(--text-muted); }
.sys-facts i{ display:flex; }
.sys-facts svg{ width:24px; height:24px; }
.sys-card{ width:230px; flex:none; display:flex; flex-direction:column; gap:6px; }
.sys-card .cover{ height:120px; position:relative; background:center/cover no-repeat var(--m-inset); }
.sys-card .row2{ display:flex; align-items:center; gap:6px; }
.sys-card.add{ height:150px; background:var(--m-pane); backdrop-filter:var(--m-blur-pane); align-items:center; justify-content:center; color:var(--text-muted); font-size:12.5px; cursor:pointer; }
.sys-card.add:hover{ background:var(--m-hover2); color:var(--text-strong); }
.sys-card.add span{ display:flex; }
.sys-card.add svg{ width:24px; height:24px; }
.camp-pick .th{ width:44px; height:26px; flex:none; background:center/cover no-repeat var(--surface-inset); }
.cv-app{ height:680px; }
.cv-app.full{ position:fixed; inset:0; z-index:1300; height:auto; }
html:has(.cv-app.full){ overflow:hidden; }
.cv-kind .cv-node{ position:relative; left:auto; top:auto; }
.bm-cell .th{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:46%; height:46%; display:block; background:var(--gold-hi); }
.bm-slot .ibtn{ flex:none; }
.bm-data .r .n-wrap{ flex:1; }
.w-card{ background:var(--m-pane); backdrop-filter:var(--m-blur-pane); padding:16px; }
.tag i{ display:flex; }
.tag svg{ width:12px; height:12px; }
.lrowd.off{ opacity:.55; }
.lrowd.off .t{ color:var(--text-faint); }
.cm-foot .btn{ width:100%; justify-content:center; gap:6px; }
.cm-card .sp-win-body{ padding-top:10px; }
.cm-new .sp-win-body > div:not(.sp-row){ display:flex; flex-direction:column; }
.cm-card-foot .btn{ white-space:nowrap; }
.pane-head .cm-head-btns{ margin-left:auto; display:flex; gap:2px; }
.cmp-slot .th{ width:54px; height:36px; flex:none; background:center/cover no-repeat var(--m-hover2); }

/* ═══ СТЫКОВКА С РАЗМЕТКОЙ БОЕВОГО ═══   Здесь и только здесь правила, написанные руками. Их немного, и каждое   объяснено: это места, где разметка боевого отличается от прототипа —   обычно потому, что прототип задаёт что-то инлайном в самой вкладке.   Всё остальное в файле вынуто из прототипа механически. *//* ⚠ ЗНАК ПЛОЩАДКИ — БЕЗ ПЛИТЫ И ШИРИНОЙ 40. В полосе стоит ПАРАДНЫЙ знак (свеча на солнце) — решение 13 сентября 2026. Он почти квадратный, поэтому ему 40, а не 24: на 24 солнца вокруг свечи не разобрать.   Дизайн-система, раздел 8: знак — свеча, у неё два вида одного знака.   Рабочий вид (голая свеча) стоит в полосе разделов, цветом --gold через   currentColor, плиты под ним нет. Число 24 — это ШИРИНА: так в макетах   логотипа (.rail-mark{ width:24px }). Задавать высоту 24 нельзя — свеча   вытянутая, и по высоте она сжимается в полоску шириной 11. */.rail-logo{ width:auto; height:auto; background:transparent; color:var(--gold);  box-shadow:none; margin-bottom:10px; display:flex; align-items:center;  justify-content:center; }.rail-logo svg, .rail-logo .sp-mark{ display:block; width:40px; height:auto; }

/* ⚠ ПОИСК В ПАНЕЛИ ТЯНЕТСЯ ПО ПАНЕЛИ.   У прототипа ширина задана инлайном прямо во вкладке (width:100%),   и в вынутое правило она не попала — там осталась ширина образца 220.   На боевом инлайна нет, поэтому поле сузилось с 248 до 220. */.pane .search{ width:auto; }

/* ⚠ РАЗМЫТИЕ — ТОЛЬКО НА ПСЕВДОЭЛЕМЕНТЕ, И ОНО ТАМ УЖЕ ЕСТЬ.   Дизайн-система, раздел 10: backdrop-filter делает узел точкой отсчёта   для position:fixed внутри него, поэтому у ленты и панели стекло висит   на ::before. В разметке боевого оно так и сделано. Вынутое из прототипа   правило вешает стекло ещё и на сам узел — выходит двойное размытие.   Снимаем своё; чужое на ::before работает.   ⚠ Когда lobby-proto.css уйдёт, эту стыковку надо будет заменить на   перенос стекла на ::before сюда же — иначе стекло исчезнет вовсе. */.rail, .pane, .side, .work{ background:transparent; backdrop-filter:none; }

/* ⚠ УЗКИЙ ЭКРАН: КОЛОНКИ УБИРАЮТСЯ, А НЕ СЖИМАЮТСЯ.   В прототипе этого нет — он рисует один размер окна. На боевом правило   было и работало, но лежало в другом файле: тогда у «.pane» два адреса,   и следующий агент правит ширину не там. Держим здесь, рядом с самой   шириной. Числа прежние, боевые. */@media (max-width:1180px){ .side{ width:0; }
}@media (max-width:900px){ .pane{ width:0; }
}

/* ⚠ В ШАПКЕ РАБОТЫ КНОПКИ-ЗНАЧКИ КРУПНЫЕ.   Каталог, «Навигация и действия»: «кнопка-значок | 26×26 со значком 14;   крупная 32×32 со значком 18 | один размер на все шапки». В прототипе   у них стоит класс «big», в разметке боевого его нет — даём по месту. */.work-head .ibtn{ width:32px; height:32px; }.work-head .ibtn svg{ width:18px; height:18px; }

/* ⚠ ЗОЛОТАЯ КНОПКА В ШАПКЕ — 34, А НЕ 30.   Ступень 1 набора блоков: «Поле 30 и кнопки 30 и 34 в одном ряду».   Рядом с полем поиска 34 стоит кнопка 34. В прототипе этот размер задан   инлайном во вкладке и в вынутое правило не попал. */.work-head .btn.gold{ height:34px; padding:0 16px; }

/* ⚠ ЗАЯВКА НА ДОСКЕ: РЯД КНОПОК ПОД ИМЕНЕМ.   В прототипе он задан инлайном прямо во вкладке (display:flex, gap:4,   кнопки 26 и первая тянется), поэтому в вынутое правило не попал.   Кнопка 26 — из каталога: «кнопка в карточке 24…26», ниже обычной 30,   потому что стоит внутри плашки, а не в шапке. */.lb-req-act{ display:flex; gap:4px; margin-top:6px; }.lb-req-act .btn{ height:26px; font-size:12px; }.lb-req-act .btn:first-child{ flex:1; }

/* ⚠ ЛЕНТЫ СПРАВА НЕТ У МАСТЕРСКОЙ И ПОИСКА.   В прототипе на этих вкладках колонки «кто в лобби» просто нет — рабочее   поле идёт до края. На боевом колонка одна на все разделы и прячется   атрибутом hidden; у «.side» стоит своя ширина, и без этой строки hidden   проигрывал бы ей. */.side[hidden]{ display:none; }

/* ⚠ КАРТОЧКА ИНСТРУМЕНТОВ МАСТЕРСКОЙ — СТОЛБИК СТРОК С ЗАЗОРОМ 4.   В прототипе это задано инлайном на «.w-card» прямо во вкладке   (display:flex, column, gap:4); в вынутое правило карточки не попало. */.lb-tools{ display:flex; flex-direction:column; gap:4px; }

/* ⚠ ЧИП ТОКЕНОВ В ШАПКЕ — ТИХИМ ЗОЛОТОМ.   В прототипе цвет задан инлайном на чипе (gold-dim / gold). */.work-head .chip{ background:var(--gold-dim); color:var(--gold); }.work-head .chip svg{ width:16px; height:16px; }

/* ═══ КАБИНЕТ · КТО Я. В прототипе раскладка карточек задана инлайном во вкладке:   ряд «портрет · имя · кнопка» и сетка строк формы auto-fit 260. ═══ */.cab-hero{ display:flex; gap:16px; align-items:center; }.cab-hero .prof-av-preview{ width:64px; height:64px; flex:none; border-radius:50%;  overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; }.cab-hero .prof-av-preview svg{ width:40px; height:40px; }.cab-hero-info{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ⚠ ИМЯ — ЗАГОЛОВОК 19/600, КАК В ПРОТОТИПЕ, НО ПРАВИТСЯ НА МЕСТЕ: коробка поля   появляется под курсором. Имя тега в селекторе — ради силы 0,1,1: общее правило   полей «input.fld» иначе делало из имени тёмную плитку. */input.cab-name{ width:100%; height:auto; padding:0 4px; margin:0 -4px; background:transparent;  border:0; font:inherit; font-size:19px; font-weight:600; color:var(--text-strong); }input.cab-name:hover, input.cab-name:focus{ background:var(--fill-1); outline:0; }.cab-sub{ font-size:12.5px; color:var(--text-faint); }.cab-card{ display:flex; flex-direction:column; gap:8px; }.cab-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }.cab-form .n-frow{ max-width:none; }.cab-form .n-multi, .cab-form .sp-dd{ width:100%; }.cab-form .n-frow[hidden]{ display:none; }.cab-form .prof-link-editor{ grid-column:1 / -1; }

/* чип ссылки — нажимаемый: по нему открывается правка */.n-multi .ch2{ cursor:pointer; }.n-multi .ch2.on{ background:var(--gold-dim); color:var(--gold); }.n-multi .more{ cursor:pointer; background:transparent; border:0; font:inherit; }.n-multi .more:hover{ color:var(--text-strong); }

/* ═══ КАБИНЕТ · ВИД ПЛОЩАДКИ ═══ *//* ⚠ ВСЕ ПЛИТЫ КАБИНЕТА ОДНОЙ ШИРИНЫ. Своя «до 860» осталась от той поры, когда   вид площадки был отдельной вкладкой и стоял в рабочем поле один. После сведения   вкладок она превратилась в уступ: две плиты во всю ширину и одна короче. */.cab-look{ display:block; }

/* ═══ КАЛЕНДАРЬ. Легенда — ряд плашек (в прототипе инлайном: gap 8, воздух 10).   Клетка с игрой: в легенде прототипа «игра» есть, а клетки нет — даём ей тот же   тихий золотой, что у плашки. Стрелки месяца — кнопки витрины, без плиты пака. ═══ */.cal-legend{ display:flex; gap:8px; margin-top:10px; font-size:11.5px; }.n-cal .d.booked{ background:var(--gold-dim); color:var(--gold); }.n-cal .hd .spc-nav{ padding:0; background:transparent; border:0; }.n-cal .spc-today, .n-cal .spc-clock{ display:none; }

/* ═══ ВХОД И РЕГИСТРАЦИЯ. Страница — сцена прототипа: заставка площадки во весь экран,   карточка по центру. Форма внутри карточки — столбик с воздухом 10 (в прототипе   поля лежат прямо в карточке с её gap; у нас между ними тег form). ═══ */body.gate{ min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center;  padding:24px; background:var(--surface-app) url('wall/1.jpg') center/cover no-repeat fixed; }.g-card form{ display:flex; flex-direction:column; gap:10px; width:100%; }.g-card .g-nm{ text-align:center; }.g-card .error{ font-size:12px; color:var(--bad); margin:0; min-height:1em; }.g-card .error:empty{ display:none; }.g-card .ok-msg{ font-size:12.5px; color:var(--gold); text-align:center; margin:0; }.g-card .ok-msg[hidden], .g-card [hidden]{ display:none; }.g-card .ch-row{ max-width:none; }

/* ═══ ИНСТРУМЕНТЫ В СЕРЕДИНЕ (вкладки прототипа «Генератор картинок» и «Библиотека   картинок»). Содержимое не лежит прямо на обоях: колонка настроек — плёнка панели   (0,66, размытие), результат — карточка рабочего поля. В прототипе это задано инлайном   на самих колонках; у боевого колонки строит lobby-tools.js. ═══ */.modal-overlay.in-work .tool-left{ background:var(--m-pane); backdrop-filter:var(--m-blur-pane); padding:14px; gap:14px; }.modal-overlay.in-work .tool-right{ flex:1; background:var(--m-pane); backdrop-filter:var(--m-blur-pane); padding:16px; gap:10px; }

/* ⚠ Главный столбец генератора держал нижний предел 400 с тех пор, как стоял рядом с   референсами; в колонке 320 он вылезал на результат. В колонке ширину задаёт колонка. */.modal-overlay.in-work .tool-left .imggen-main{ flex:none; width:100%; min-width:0; }.modal-overlay.in-work .tool-left .imggen-tabs{ flex-wrap:wrap; }.modal-overlay.in-work .tool-left textarea, .modal-overlay.in-work .tool-left input{ max-width:100%; }/* подпись блока — «k-lab» прототипа: 11,5 тихим, без веса */.modal-overlay.in-work .set-h{ font-size:11.5px; font-weight:400; color:var(--text-faint); margin:0 0 4px; }.modal-overlay.in-work .cab-form .set-h{ font-size:inherit; }

/* библиотека: дерево папок слева на плёнке 240, верхняя полоса на плёнке (крошки ·   поиск), полоса действий тихим золотом, сетка 150 с зазором 8, клетка 4:3 без подписи */.modal-overlay.in-work .imglib-bar{ display:none; }.modal-overlay.in-work .imglib-main{ gap:0; align-items:stretch; background:var(--m-inset); backdrop-filter:blur(3px); }.modal-overlay.in-work .imglib-side{ width:240px; background:var(--m-pane); backdrop-filter:var(--m-blur-pane); padding:10px 6px; }.modal-overlay.in-work .imglib-side-h{ display:none; }.modal-overlay.in-work .imglib-work{ gap:0; }.modal-overlay.in-work .imglib-toolrow{ background:var(--m-pane); backdrop-filter:var(--m-blur-pane); padding:10px 14px; gap:10px; }.modal-overlay.in-work .imglib-path{ flex:1; min-width:0; font-size:12.5px; }.modal-overlay.in-work .imglib-toolrow .imglib-find{ flex:none; width:220px; height:34px; }.modal-overlay.in-work .imglib-selbar{ display:flex; align-items:center; gap:12px; padding:7px 10px; background:var(--gold-dim); color:var(--gold); font-size:12.5px; }.modal-overlay.in-work .imglib-selbar[hidden]{ display:none; }.modal-overlay.in-work .imglib-grid{ max-height:none; overflow-y:visible; padding:12px 14px; gap:8px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }.modal-overlay.in-work .imglib-grid:not(.rows) .imglib-card{ background:transparent; padding:0; gap:0; }.modal-overlay.in-work .imglib-grid:not(.rows) .imglib-thumb-wrap{ aspect-ratio:4/3; background:var(--m-inset); }.modal-overlay.in-work .imglib-grid:not(.rows) .imglib-meta{ display:none; }
/* ⚠ КНОПКИ КАРТОЧКИ СТОЯТ У НИЖНЕГО КРАЯ КАРТИНКИ. Полоса была привязана к низу
   карточки с запасом на подпись (top:100%-62), а подписи в этом виде нет — и она
   висела в двух десятках точек над краем (жалоба 10 сентября 2026). */
.modal-overlay.in-work .imglib-grid:not(.rows) .imglib-actions{ top:auto; bottom:0; }.modal-overlay.in-work .imglib-thumb-wrap:hover{ outline:2px solid var(--fill-3); outline-offset:-2px; }.modal-overlay.in-work .imglib-card:has(.imglib-selbox input:checked) .imglib-thumb-wrap{ outline:2px solid var(--gold); outline-offset:-2px; }.modal-overlay.in-work .imglib-error:empty, .modal-overlay.in-work .imglib-work > .error:empty{ display:none; }

/* ═══ ИНСТРУМЕНТ — ЭТО РАЗДЕЛ НА ПЛЁНКЕ РАБОЧЕГО ПОЛЯ.
   Вкладки прототипа «Генератор картинок» и «Библиотека картинок»: снаружи плёнка
   0,30 с размытием 3, внутри колонки со своими плёнками. Без внешней плёнки
   содержимое лежало прямо на обоях (жалоба 10 сентября 2026). ═══ */
.modal-overlay.in-work .modal-box{ width:100%; max-width:none; max-height:none; height:auto;
  box-shadow:none; padding:14px; gap:14px; background:var(--m-inset); backdrop-filter:blur(3px); }
/* Колонки одной высоты: короткая правая обрывалась, и ниже неё шли голые обои */
.modal-overlay.in-work .tool-two{ display:flex; gap:16px; align-items:stretch; }

/* ⚠ ДЕЙСТВИЯ НАД КАРТИНКОЙ СТОЯТ В ШАПКЕ ПРАВОЙ КОЛОНКИ, НАД САМОЙ КАРТИНКОЙ
   (вкладка прототипа «Генератор картинок»: ряд «Что получилось · В библиотеку ·
   Убрать фон»). Под картинкой они уезжали за нижний край экрана, и чтобы нажать,
   надо было прокручивать. Кнопка в этом ряду 26 — она внутри карточки, а не в шапке раздела. */
.modal-overlay.in-work .tool-right{ flex-direction:column; }
.modal-overlay.in-work .tool-right > .set-h{ order:-2; }
.modal-overlay.in-work .tool-right > .imggen-actions{ order:-1; display:flex; flex-wrap:wrap; gap:8px; }
.modal-overlay.in-work .tool-right > .imggen-actions .btn{ height:26px; font-size:12px; padding:0 9px; }
/* ⚠ ПУСТОЙ РЯД ДЕЙСТВИЙ НЕ ЗАНИМАЕТ МЕСТО. Пока картинки нет, все кнопки в нём
   спрятаны, но сам ряд оставался серой полосой под заголовком — и читался как
   поле, которое чем-то не заполнилось. «:has» проверяет, есть ли внутри хоть
   один невидимый-по-атрибуту ребёнок. */
.modal-overlay.in-work .tool-right > .imggen-actions:not(:has(> :not([hidden]))){ display:none; }
/* Ожидание — три квадрата по очереди, как в каталоге: крутящегося круга в проекте нет. */
.imggen-preview-hint.imggen-busy{ animation:none; display:inline-flex; align-items:center; gap:6px; }
.imggen-preview-hint.imggen-busy::after{ content:''; display:inline-flex; width:23px; height:5px;
  background:linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 9px, var(--fill-2) 9px 14px,
  transparent 14px 18px, var(--fill-2) 18px 23px); }
/* Галочка фильтра в панели: тот же воздух, что у пункта панели */
/* ⚠ ГАЛОЧКА — СТРОКА, А НЕ СТОЛБИК. Общее правило «label» в style.css ставит
   подписи столбиком по центру (оно для полей формы), и квадратик уезжал
   НАД текстом. Имя тега в селекторе даёт силу 0,1,1 и перебивает его. */
label.lb-pane-ch{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
  gap:8px; text-align:left; padding:4px 8px; font-size:12.5px; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--text-body); }

/* ⚠ ТУМБЛЕРУ НУЖНО СВОЁ НАПРАВЛЕНИЕ. В style.css живёт общее
   «label{ display:flex; flex-direction:column }», и оно старше всего
   нового вида. Правило каталога «.tg» перебивает у него display —
   у класса силы больше, — а вот flex-direction не задаёт вовсе, и
   колонка остаётся: подпись уезжает ПОД переключатель. На экране это
   читается как «подписи не на своих местах» (окно «Интерфейс системы»,
   замер живого стола: «.tg» 38×20, flex-direction column).
   Та же мина уже ловилась на галочках — лечим её и у тумблера. */
.tg{ flex-direction:row; }

/* ═══ МАКЕТНЫЕ РАЗДЕЛЫ (библиотека, карты, кампании, системы) — тоже на плёнке.
   Мелкий текст карточек лежал прямо на фотографии и терялся. ═══ */
/* ⚠ СЕЛЕКТОР С ДВУМЯ ИМЕНАМИ, И ЭТО НЕ ПРИДИРКА. Отступ раздела гасит правило
   «#lbMain .lb-sec{ padding:0 }» силой (1,1,0): простой «#secSoon» (1,0,0) ему
   проигрывает, и плёнка выходила БЕЗ ВОЗДУХА — содержимое липло к краям
   (жалоба 10 сентября 2026, замер: padding 0/0/0/0 при заявленных 16). */
#lbMain #secSoon{ background:var(--m-pane); backdrop-filter:var(--m-blur-pane);
  padding:16px; min-height:100%; }
#secSoon .lb-ghost{ display:flex; flex-direction:column; gap:12px; }
/* ⚠ ПЛЁНКА ИДЁТ ДО НИЗА РАБОЧЕГО ПОЛЯ. Короткое содержимое обрывало её на
   середине экрана, и ниже шли голые обои — жалоба 10 сентября 2026. */
#lbMain #secShop{ min-height:100%; }
.modal-overlay.in-work{ position:static; inset:auto; background:none; z-index:auto; padding:0;
  display:flex; flex:1; min-height:0;
  /* ⚠ Окно центрировалось по вертикали — общее правило «.modal-overlay» ставит
     align-items:center. Инструмент не окно, а раздел: он тянется на всю высоту,
     иначе сверху и снизу от плёнки остаются полосы голых обоев. */
  align-items:stretch; justify-content:flex-start; }
.modal-overlay.in-work > .modal-box{ flex:1; }
/* Окно создания новеллы — те же 560, что у окна настроек: в 330 подписи полей
   «Жанр» и «Система» обрезались на полуслове. */
.nv-create{ width:560px; max-width:94vw; }
.nv-create .lb2-create-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.nv-create .lb2-create-fields > label{ min-width:0; }
.nv-create .lb2-create-fields > label:nth-child(-n+3){ grid-column:1 / -1; }

/* ═══ СВОЁ ОКНО ВОПРОСА (spAlert · spConfirm · spPrompt).
   Всплывашка в проекте одна: плита 0,66 с размытием 16 (вкладка прототипа
   «Всплывашки стола»). Кнопки — из каталога: тихая «Отмена» и главная золотая,
   высота 30, слово помещается целиком. ═══ */
/* ⚠ ЗАТЕМНЕНИЯ ПОД ВОПРОСОМ НЕТ. Вопрос короткий и про то, на что нажали:
   гасить ради него весь экран незачем, а место нажатия он и так называет
   собой. Слой ловит нажатие мимо и закрывает окно — этого достаточно. */
.sp-ask{ position:fixed; inset:0; z-index:1500; background:transparent; }
.sp-ask-box{ position:absolute; width:420px; max-width:calc(100vw - 16px);
  background:var(--m-pop); backdrop-filter:var(--m-blur-pop);
  box-shadow:var(--sh-2); padding:16px; display:flex; flex-direction:column; gap:14px; }
.sp-ask-txt{ margin:0; font-size:13px; line-height:1.55; color:var(--text-body); white-space:pre-line; }
/* ⚠ ОПАСНОЕ ПОДТВЕРЖДАЕТСЯ РУКОЙ: под текстом стоит строка «набери УДАЛИТЬ»,   и пока в поле не это слово, красная кнопка не нажимается. Слово золотом —   его надо прочитать, а не проскочить. */.sp-ask-word{ margin:-6px 0 0; font-size:12.5px; line-height:1.5; color:var(--text-faint); }.sp-ask-word b{ color:var(--gold); font-weight:600; letter-spacing:.04em; }.sp-ask-act{ display:flex; justify-content:flex-end; gap:8px; }
.sp-ask-act .btn{ white-space:nowrap; }
.sp-ask .n-inp{ width:100%; }
/* ⚠ ВЫБОР ИЗ НАБОРА — КРУЖКАМИ СТОЛБИКОМ, А НЕ СТРОКОЙ. Дизайн-система, раздел 5:   до четырёх вариантов — кружки, дальше выпадающий список. В окне подписи идут   с пояснением («мастерам и выше»), а в строку такие слипаются — поэтому столбик.   Сам кружок берётся из каталога («.ch» + «.rd»), своего вида тут нет. */
.sp-ask-pick{ display:flex; flex-direction:column; gap:10px; }
.sp-ask .sp-dd{ width:100%; }

/* ═══ ОКНО «О НОВЕЛЛЕ» (лобби). Окно 840 и обложка-шапка 195 — в прототипе инлайном   («Окно „о новелле“»); ширина образца окна 330 из витрины его перебивала. ═══ */.nv-detail{ width:840px; max-width:94vw; max-height:94vh; overflow-y:auto; }
/* ⚠ ПОД ОКНОМ НЕТ ЗАТЕМНЕНИЯ. В прототипе окно лежит прямо на сцене, и сквозь плёнку
   0,66 видно лобби; на боевом под ним стоял общий слой 0,55 — вместе с плёнкой выходила
   почти глухая плита. Замер: фон окна rgba(18,17,15,.66) сходился, а картинка под ним нет. */
.lb2-overlay.nv-detail-wrap{ background:transparent; }
/* ⚠ ПОДЛОЖКА ОКНА НЕ ЗАБИРАЕТ МЫШЬ. Она растянута на весь экран, и пока окно открыто,
   наведение на людей в ленте справа до ленты не доходило — карточка человека не всплывала.
   Мышь ловит только само окно; щелчок мимо окна его закрывает (lobby.js, openNovDetail). */
.lb2-overlay.nv-detail-wrap{ pointer-events:none; }
.lb2-overlay.nv-detail-wrap .nv-detail{ pointer-events:auto; }
/* ⚠ СВОЕГО СТЕКЛА У ОКНА НЕТ. Прозрачность площадки одна и сквозная   (решение 13 сентября 2026): окно берёт то же стекло, что и панель,   через общее правило всплывающего. Своё размытие у этого окна и было   второй прозрачностью. */

/* ═══ НАСТРОЙКИ НОВЕЛЛЫ (стол). Окно 560 — в прототипе задано инлайном; вкладки   переключают панели атрибутом hidden; сетка полей 1fr 1fr — тоже инлайн прототипа. ═══ */.nset-win{ width:560px; max-width:94vw; max-height:90vh; overflow:auto; }.nset-win .sp-win-body{ gap:0; }.nset-win [data-nset-panel]{ display:flex; flex-direction:column; gap:10px; }.nset-win [data-nset-panel][hidden]{ display:none; }.nset-win .cover-pick-btns .btn{ white-space:nowrap; }

/* ⚠ Галочка — строка: у стола общее правило «label» ставит подписи столбиком по центру   (поля старых окон), и квадратик уезжал над текст. Сила 0,1,1 и порядок файлов. */.nset-win label.ch{ display:inline-flex; flex-direction:row; align-items:center; justify-content:flex-start;  align-self:flex-start; gap:8px; text-align:left; margin:0; }.nset-win .nset-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }.nset-win .n-frow{ max-width:none; }.nset-win .nset-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }.nset-win .nset-sub{ margin-top:16px; }.nset-win .nset-sub:first-child{ margin-top:0; }.nset-win .cover-pick{ display:flex; align-items:flex-start; gap:10px; }.nset-win .cover-preview{ width:120px; height:68px; flex:none; background:var(--fill-1) center/cover no-repeat; }.nset-win .cover-pick-btns{ display:flex; flex-direction:column; gap:6px; }.nset-win .sp-win-body .ch{ font-size:13px; }.nset-win .nset-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* тихая строка под полосой и под списком: тот же голос, что у пояснений */.lb-side-note{ font-size:12px; color:var(--text-muted); }

/* ⚠ В ЗАГОЛОВКЕ ГРУППЫ СЧЁТЧИК ТИХИЙ, А НЕ ЗОЛОТОЙ.   Каталог зовёт «счётчиком» золотую плиту с тёмной цифрой — она про то,   на что надо посмотреть: остаток токенов, непрочитанное. А число рядом   с заголовком группы отвечает «сколько там лежит» и кричать не должно:   в прототипе это «.c», тихая цифра справа.   ⚠ Разметка боевого зовёт оба одним именем «cnt», поэтому тихий вид   даётся по МЕСТУ — внутри заголовка группы и шапки правой колонки. */.grp .cnt, .side-head .cnt{ min-width:0; height:auto; padding:0;  background:transparent; color:var(--text-faint); font-weight:400; margin-left:auto; }

/* ⚠ КНОПКА «СМЕНИТЬ ПОРТРЕТ» — 34 И НЕ ТЯНЕТСЯ.   Шапка кабинета — ряд по центру: портрет, имя с подписью (тянется),   кнопка справа. Без flex:none кнопка растянулась бы вместе с рядом. */.cab-av-btn{ height:34px; flex:none; }

/* ⚠ ПОИСК: СТОЛБЕЦ 720 ПО ЦЕНТРУ, А НЕ ВО ВЕСЬ ЭКРАН.   В прототипе это задано инлайном во вкладке. Растянуть поле на всю   рабочую зону нельзя: длинная строка не читается, а глазу негде   остановиться между полем и находками. *//* ⚠ ОДНОГО max-width МАЛО: РАЗДЕЛ — FLEX-КОНТЕЙНЕР.   «#secSearch» имеет display:flex, поэтому столбец стал flex-элементом и   сжался по содержимому до 376 при заявленном пределе 720. Замер на живой   странице: ш=363, max=720px. Ширину надо ЗАДАТЬ, а не ограничить. */.lb-find-col{ width:100%; max-width:720px; margin:0 auto; flex:none; }.lb-find-col .lb-find-big{ width:100%; }

/* Панель выдачи: одно стекло на все находки. */.lb-find-res{ margin-top:12px; background:var(--m-pane);  backdrop-filter:var(--m-blur-pane); }

/* ⚠ Строка находки лежит НА этой панели, и своей плиты у неё быть не должно:   стекло поверх стекла даёт вторую ступень плотности, которой нет в лестнице. */.lb-find-res .find-row{ background:transparent; backdrop-filter:none; }.lb-find-res .find-row:hover{ background:var(--m-hover); }.lb-find-res .lb-side-note{ padding:10px; }.find-bd{ flex:1; min-width:0; }

/* ⚠ У МИНИАТЮРЫ НЕТ КАРТИНКИ ПО УМОЛЧАНИЮ. В витрине у образца стоит   демонстрационная обложка (--k-ob1), и без этой строки она встала бы   на КАЖДОЙ находке, включая людей и правила. */.find-th{ background-image:none; }

/* ⚠ МЕСЯЦ ШИРИНОЙ 260, А НЕ ВО ВСЮ РАБОЧУЮ ЗОНУ.   Прежнее правило тянуло календарь (flex:1 1 0) — это было верно, пока   месяцев было три. Месяц остался один и растёкся на всю зону огромными   клетками. В прототипе «.n-cal» ровно 260, и рядом с ним карточка с играми.   ⚠ Пишем тем же весом, что и прежнее правило: побеждает порядок файлов,   а усиливать селектор идентификатором нельзя — так и заводится второй   источник вида. */.lb-cal-row > *{ flex:none; width:260px; }

/* Месяц и список игр — рядом, каждый на своей плёнке.   ⚠ Ряд держит «.cal-wrap», а не «.cal-box»: в коробке лежит только сам   месяц, список игр — её сосед. Проверено на живой странице, а не по памяти. */.cal-wrap{ display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }.cal-box{ flex:none; background:var(--m-pane); backdrop-filter:var(--m-blur-pane);  padding:16px; }.cal-side{ background:var(--m-pane); backdrop-filter:var(--m-blur-pane);  padding:16px; min-width:280px; }

/* ═══ СТОЛ · ЛЕНТА И ПОЛКА (вкладки прототипа «Стол целиком» и «Полки ленты») ═══ */
/* ⚠ ЛЕНТА И ПАНЕЛЬ РАЗДЕЛА — СТЕКЛО, А НЕ ЗАЛИВКА: сквозь них видно сцену.
   Цвет у боевого верный (0,46 и 0,66), а размытия не стояло вовсе — замер
   живого стола вернул «backdrop-filter: none» у обеих. */
.np-shelf-tabs{ backdrop-filter:var(--m-blur-rail); }
/* Шапка полки 44 и во всю ширину панели, как шапка панели в лобби; содержимое
   раздела держит свои 8. Отрицательное поле выводит шапку за поля полки — иначе
   имя раздела висит островом посреди панели, а не сидит в её углу.
   ⚠ ВОЗДУХ ЖИВЁТ У ПОЛКИ, А НЕ У РАЗДЕЛА: разделу отступы запрещены
   правилом «padding:0 !important» — переехавшее окно теряет всё своё. */
.np-shelf-body{ backdrop-filter:var(--m-blur-pane); padding:0 8px 8px; gap:0; }
.np-shelf-body .sp-fly-head{ height:44px; flex:none; margin:0 -8px; padding:0 8px 0 14px;
  display:flex; align-items:center; gap:8px; }
.np-shelf-body .sp-fly-title{ margin:0; flex:1; min-width:0; font-size:13px; font-weight:600; }
.np-shelf-body > .nv-dropdown > .nv-title{ height:44px; margin:0 -8px 8px; padding:0 8px 0 14px;
  display:flex; align-items:center; }
/* Поиск и главное действие полки — ряд под шапкой: поле тянется, кнопка 32 у края */
.sc-tools{ display:flex; align-items:center; gap:6px; }
.sc-tools .search{ flex:1; width:auto; }