/* routes/queue.css — #/queue THE QUEUE (mockup v1 01_queue, drawn in mockup px: calc(1 * var(--m)) = 1.1483 css px at 1920; x = mockup x - 56 container gutter) */
/* USER FIX (DESIGN.md §9 #2): route body type reduced from the mockup's 1.62x density; panel geometry kept */
.queue{--m:calc(1.1483px * var(--u));--fs:calc(1px * var(--u));color:var(--ink);font-family:var(--font-body)}
.queue *{box-sizing:border-box}
.queue button{background:none;color:inherit;cursor:pointer;padding:0;font:inherit;text-align:left}
.queue .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.queue .g{color:#3AF1BE}
.queue svg{display:block}

/* ---------- first screen: ladder + opened cut ---------- */
.q-hero{position:relative;height:calc(713 * var(--m))}
.q-hero + .q-lower{margin-top:calc(40 * var(--m))}
.q-title{position:absolute;left:calc(33 * var(--m));top:calc(26 * var(--m));margin:0;font:400 calc(70 * var(--fs))/1 var(--font-display);color:#fbf6ff;white-space:nowrap;letter-spacing:0}
.q-seg{position:absolute;top:calc(34 * var(--m));height:calc(68 * var(--m));display:flex;gap:calc(2 * var(--m));padding:calc(6 * var(--m));background:#230292}
.q-seg.box{left:calc(469 * var(--m));width:calc(358 * var(--m))}
.q-seg.win{left:calc(885 * var(--m));width:calc(272 * var(--m))}
.q-seg button{flex:1;display:flex;align-items:center;justify-content:center;border-radius:calc(8 * var(--m));font:500 calc(18 * var(--fs))/1 var(--font-body);color:#efe6ff;transition:background-color .22s var(--ease-settle),box-shadow .15s var(--ease-settle)}
.q-seg button[aria-pressed="true"]{background:linear-gradient(#8b3df2,#6d24e6);box-shadow:inset 0 0 0 max(1px, calc(2px * var(--u))) #3AF1BE,0 0 calc(10px * var(--u)) rgba(58,241,190,.55);color:#fff}
.q-seg button:hover{box-shadow:inset 0 0 0 max(1px, calc(2px * var(--u))) rgba(217,179,255,.6),0 0 calc(12px * var(--u)) rgba(58,241,190,.5)}
.q-vbar{position:absolute;left:calc(855 * var(--m));top:calc(51 * var(--m));width:max(1px, calc(3px * var(--u)));height:calc(37 * var(--m));background:#c9a2ff}

.q-stats{position:absolute;left:calc(43 * var(--m));top:calc(116 * var(--m));height:calc(48 * var(--m));display:flex;align-items:center;white-space:nowrap}
.q-stats .n{font:400 calc(36 * var(--fs))/1 var(--font-mono);color:#B4F66C}
.q-stats .n.g{color:#3AF1BE}
.q-stats .n.w{color:#fff;font-size:calc(30 * var(--fs))}
.q-stats .l{font:400 calc(24 * var(--fs))/1 var(--font-body);color:#f1e9ff;margin-left:calc(16 * var(--m))}
.q-stats .sep{width:max(1px, calc(3px * var(--u)));height:calc(40 * var(--m));background:#c9a2ff;margin:0 calc(37 * var(--m)) 0 calc(38 * var(--m))}
.q-stats .blk .l{margin:0 calc(12 * var(--m)) 0 0}

.q-ladder{position:absolute;left:calc(33 * var(--m));top:calc(181 * var(--m));width:calc(1129 * var(--m));height:calc(520 * var(--m));margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;border-radius:calc(10px * var(--u));overflow:hidden}
.q-ladder > li{margin:0;padding:0;flex:56 1 0;min-height:0;display:flex}
.q-ladder > li:first-child{flex-grow:72}
.q-ladder > li:not(:last-child) .q-row{border-bottom:var(--rule-hair) solid var(--violet)}
.q-row{position:relative;display:flex;align-items:center;width:calc(100% - 13 * var(--m));min-width:0;margin-left:calc(13 * var(--m));height:auto;background:#190276;transition:background-color .22s var(--ease-settle),box-shadow .15s var(--ease-settle),transform .22s var(--ease-settle)}
.q-row:hover{box-shadow:0 0 calc(14px * var(--u)) rgba(58,241,190,.55)}
.q-ladder > li:first-child .q-row{width:100%;margin-left:0;background:linear-gradient(90deg,#5304dc,#4a01cf)}
.q-row[data-open="true"]{background:#2a0294;box-shadow:inset 0 0 0 max(1px, calc(2px * var(--u))) #f1dcff,0 0 calc(14px * var(--u)) rgba(220,170,255,.7)}

.q-row .rk{width:calc(92 * var(--m));padding-left:calc(23 * var(--m));font:400 calc(34 * var(--fs))/1 var(--font-mono);color:#e7b6ff}
.q-row .cd{width:calc(61 * var(--m));height:calc(45 * var(--m));display:flex;align-items:center;justify-content:center;font:400 calc(21 * var(--fs))/1 var(--font-mono);color:#e7b6ff;background:#0e0158}
.q-row .nm{flex:0 0 calc(383 * var(--m));padding-left:calc(25 * var(--m));font:500 calc(17 * var(--fs))/1.15 var(--font-body);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-row .nm small{display:block;font:400 max(12px, calc(14 * var(--fs)))/1.2 var(--font-body);color:#e4d4ff}
.q-row .wl{width:calc(26 * var(--m));height:calc(24 * var(--m))}
.q-row .py{width:calc(184 * var(--m));padding-left:calc(14 * var(--m));font:400 calc(16 * var(--fs))/1 var(--font-body);color:#f0e8ff;letter-spacing:.02em}
.q-row .tm{width:calc(135 * var(--m));font:400 calc(16 * var(--fs))/1 var(--font-body);color:#f0e8ff}
.q-row .am{width:calc(112 * var(--m));text-align:right;font:400 calc(22 * var(--fs))/1 var(--font-mono);color:#3AF1BE}
.q-row .pl{width:calc(38 * var(--m));height:calc(38 * var(--m));margin-left:calc(45 * var(--m))}
.q-jump{position:absolute;left:calc(8 * var(--m));top:calc(181 * var(--m));width:calc(40 * var(--m));height:calc(520 * var(--m));overflow:visible;pointer-events:none}
.q-jump path{fill:none;stroke:#3AF1BE;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.q-cut{position:absolute;left:calc(1181 * var(--m));top:calc(33 * var(--m));width:calc(368 * var(--m));height:calc(668 * var(--m));background:#1b017a;box-shadow:0 0 calc(18px * var(--u)) rgba(58,241,190,.45);padding:calc(24 * var(--m)) calc(26 * var(--m)) 0 calc(26 * var(--m))}
.q-cut h2{margin:0;height:calc(50 * var(--m));font:400 calc(54 * var(--fs))/1 var(--font-display);color:#fbf6ff;white-space:nowrap}
.q-cut .x{position:absolute;right:calc(26 * var(--m));top:calc(26 * var(--m));width:calc(28 * var(--m));height:calc(28 * var(--m))}
.q-cut .x svg{width:100%;height:100%}
.q-cut .it{display:flex;align-items:center;gap:calc(22 * var(--m));min-height:calc(72 * var(--m));font:400 calc(21 * var(--fs))/1.2 var(--font-body);color:#fff}
.q-cut .it:first-of-type{margin-top:calc(22 * var(--m))}
.q-cut .it.tall{min-height:calc(108 * var(--m))}
.q-cut .it .cpl{flex:0 0 auto;width:calc(34 * var(--m));height:calc(34 * var(--m))}
.q-cut .it svg{flex:0 0 auto;width:calc(34 * var(--m));height:calc(34 * var(--m))}
.q-cut .it .v{margin-left:auto;font:400 calc(22 * var(--fs))/1 var(--font-mono);color:#3AF1BE}
.q-cut .it .v.w{color:#fff}
.q-cut .it .cp{margin-left:auto;width:calc(30 * var(--m));height:calc(30 * var(--m))}
.q-cut .it .cp svg{width:100%;height:100%}
.q-cut .big{width:calc(72 * var(--m));height:calc(56 * var(--m));display:flex;align-items:center;justify-content:center;font:400 calc(26 * var(--fs))/1 var(--font-mono);color:#e7b6ff;background:#1d0480}
.q-cut .it .ttl{line-height:1.3}
.q-cut .empty{display:none;margin-top:calc(40 * var(--m));font:400 calc(18 * var(--fs))/1.4 var(--font-body);color:var(--muted)}
.q-cut[data-open="false"] .it{visibility:hidden}
.q-cut[data-open="false"] .empty{display:block}

/* ---------- second screen ---------- */
/* the shell draws the dock above the page; the lower screen keeps the mockup's y (dock 111 + 31.5 gap minus the 61 dock already above) */
.q-lower{position:relative;height:calc(826 * var(--m));margin-top:calc(82 * var(--m))}
.clone-dock + .q-lower{margin-top:calc(31.5 * var(--m))}
.q-climb{position:absolute;left:calc(34 * var(--m));top:0;width:calc(1492 * var(--m));height:calc(393 * var(--m));background:#1c029a}
.q-pillar{position:absolute;top:calc(10 * var(--m));width:calc(50 * var(--m));height:calc(385 * var(--m));overflow:visible}
.q-pillar.l{left:calc(6 * var(--m))}.q-pillar.r{right:calc(0 * var(--m))}
.q-climb h2{position:absolute;left:calc(85 * var(--m));top:calc(8 * var(--m));margin:0;font:400 calc(54 * var(--fs))/1 var(--font-display);color:#fbf6ff;white-space:nowrap}
.q-climb .sub{position:absolute;left:calc(640 * var(--m));top:calc(12 * var(--m));margin:0;font:400 calc(17 * var(--fs))/1.35 var(--font-body);color:#f1e9ff}
.q-badge{position:absolute;left:calc(1193 * var(--m));top:calc(15 * var(--m));width:calc(234 * var(--m));height:calc(45 * var(--m));display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--m));background:#190276;font:400 calc(19 * var(--fs))/1 var(--font-body);color:#fff}
.q-badge .mono{font-size:calc(26 * var(--fs));color:#B4F66C}
.q-ba{position:absolute;left:calc(60 * var(--m));top:calc(67 * var(--m));width:calc(1373 * var(--m));height:calc(321 * var(--m));background:#190193;display:grid;grid-template-columns:calc(600 * var(--m)) calc(137 * var(--m)) calc(616 * var(--m));column-gap:0;padding:calc(6 * var(--m)) 0 0 calc(12 * var(--m))}
.q-col .hd{display:flex;align-items:baseline;gap:calc(26 * var(--m));height:calc(28 * var(--m));padding-left:calc(11 * var(--m));white-space:nowrap}
.q-col .hd b{font:600 calc(22 * var(--fs))/1 var(--font-body);color:#fff}
.q-col .hd span{font:400 calc(16 * var(--fs))/1 var(--font-body);color:#efe6ff}
.q-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(3.2 * var(--m))}
.q-mini li{display:flex;align-items:center;height:calc(32 * var(--m));background:#160278;transition:transform .22s var(--ease-settle),background-color .22s var(--ease-settle)}
.q-mini li.is-on{background:linear-gradient(90deg,#6b1fea,#5a12e0);box-shadow:inset 0 0 0 max(1px, calc(2px * var(--u))) #f1dcff,0 0 calc(10px * var(--u)) rgba(220,170,255,.6)}
.q-mini .rk{width:calc(64 * var(--m));padding-left:calc(15 * var(--m));font:400 calc(19 * var(--fs))/1 var(--font-mono);color:#e7b6ff}
.q-mini .cd{width:calc(46 * var(--m));height:calc(26 * var(--m));display:flex;align-items:center;justify-content:center;font:400 max(12px, calc(15 * var(--fs)))/1 var(--font-mono);color:#e7b6ff;background:#1d0480}
.q-mini .nm{flex:1;padding-left:calc(19 * var(--m));font:400 max(12px, calc(15 * var(--fs)))/1 var(--font-body);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-mini .am{padding-right:calc(28 * var(--m));font:400 calc(16 * var(--fs))/1 var(--font-mono);color:#fff}
.q-arrows{position:relative;margin-top:calc(28 * var(--m))}
.q-arrows svg{width:100%;height:calc(285 * var(--m));overflow:visible}
.q-arrows .dash{stroke:#c77dff;stroke-width:2;stroke-dasharray:9 7;fill:none}
.q-arrows .climb{stroke:#3AF1BE;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.q-win{position:absolute;left:calc(34 * var(--m));top:calc(410 * var(--m));width:calc(892 * var(--m));height:calc(278 * var(--m));background:#1c029a}
.q-win h2,.q-stub h2,.q-state h2{position:absolute;margin:0;font:400 calc(48 * var(--fs))/1 var(--font-display);color:#fbf6ff;white-space:nowrap}
.q-win h2{left:calc(14 * var(--m));top:calc(12 * var(--m));font-size:calc(42 * var(--fs))}
.q-win .sub{position:absolute;left:calc(500 * var(--m));top:calc(16 * var(--m));margin:0;font:400 calc(17 * var(--fs))/1.3 var(--font-body);color:#f1e9ff}
.q-wcol{position:absolute;top:calc(58 * var(--m));width:calc(429 * var(--m));height:calc(214 * var(--m));background:#1a0288;padding:calc(6 * var(--m)) calc(6 * var(--m)) 0}
.q-wcol.a{left:calc(8 * var(--m))}.q-wcol.b{left:calc(448 * var(--m));width:calc(434 * var(--m))}
.q-wcol .hd{display:flex;align-items:center;gap:calc(6 * var(--m));min-width:0;height:calc(36 * var(--m));margin-bottom:calc(8 * var(--m));white-space:nowrap;font:400 max(11px, calc(13 * var(--fs)))/1 var(--font-body);color:#efe6ff}
.q-wcol .hd button{flex:none;height:calc(34 * var(--m));min-width:calc(52 * var(--m));padding:0 calc(10 * var(--m));display:flex;align-items:center;justify-content:center;font:600 calc(16 * var(--fs))/1 var(--font-body);color:#fff;background:linear-gradient(#8b3df2,#6d24e6);box-shadow:0 0 calc(8px * var(--u)) rgba(58,241,190,.5);transition:box-shadow .15s var(--ease-settle)}
.q-wcol .hd button:hover{box-shadow:0 0 calc(16px * var(--u)) rgba(210,150,255,.85)}
.q-wcol .hd b{font:400 max(11px, calc(14 * var(--fs)))/1 var(--font-body);color:#fff;margin-left:calc(2 * var(--m))}
.q-wcol .hd b.g{color:#3AF1BE}
.q-wcol .q-mini{gap:calc(4 * var(--m))}
.q-wcol .q-mini li{height:calc(28 * var(--m))}
.q-wcol .q-mini .rk{width:calc(50 * var(--m));padding-left:calc(12 * var(--m));font-size:calc(18 * var(--fs))}
.q-wcol .q-mini .cd{height:calc(22 * var(--m));width:calc(40 * var(--m));font-size:max(12px, calc(13 * var(--fs)))}
.q-wcol .q-mini .nm{font-size:max(12px, calc(13 * var(--fs)));padding-left:calc(16 * var(--m))}
.q-wcol .q-mini .am{padding-right:calc(18 * var(--m));font-size:max(12px, calc(14 * var(--fs)));color:#3AF1BE}

.q-stub{position:absolute;left:calc(941 * var(--m));top:calc(410 * var(--m));width:calc(586 * var(--m));height:calc(282 * var(--m));background:#1c029a;box-shadow:inset 0 0 0 round(max(6px, calc(5 * var(--m))), 1px) #1c029a,inset 0 0 0 calc(round(max(6px, calc(5 * var(--m))), 1px) + 3px) var(--green)}
.q-stub h2{left:calc(18 * var(--m));top:calc(14 * var(--m));font-size:calc(34 * var(--fs))}
.q-stub .cap{position:absolute;right:calc(22 * var(--m));top:calc(20 * var(--m));margin:0;font:400 max(12px, calc(14 * var(--fs)))/1 var(--font-body);color:#f1e9ff}
.q-stub .in{position:absolute;left:calc(11 * var(--m));top:calc(60 * var(--m));width:calc(565 * var(--m));height:calc(214 * var(--m));background:#1b017a;padding:calc(8 * var(--m)) calc(12 * var(--m)) 0 calc(14 * var(--m))}
.q-stub .top{display:flex;align-items:center;gap:calc(14 * var(--m));height:calc(40 * var(--m));margin-bottom:calc(4 * var(--m))}
.q-stub .top .cd{width:calc(61 * var(--m));height:calc(36 * var(--m));display:flex;align-items:center;justify-content:center;font:400 calc(20 * var(--fs))/1 var(--font-mono);color:#3AF1BE;background:#1d0480}
.q-stub .top b{font:500 calc(18 * var(--fs))/1 var(--font-body);color:#fff}
.q-stub .top .am{margin-left:auto;font:400 calc(21 * var(--fs))/1 var(--font-mono);color:#3AF1BE}
.q-stub dl{margin:0;display:grid;grid-template-columns:1fr auto;row-gap:0}
.q-stub dt,.q-stub dd{margin:0;height:calc(26 * var(--m));display:flex;align-items:center;font:400 max(12px, calc(14 * var(--fs)))/1 var(--font-body);color:#fff}
.q-stub dt svg{width:calc(20 * var(--m));height:calc(20 * var(--m));margin-right:calc(30 * var(--m))}
.q-stub dd{justify-content:flex-end;font-family:var(--font-body)}

.q-state{position:absolute;left:calc(34 * var(--m));top:calc(698 * var(--m));width:calc(1493 * var(--m));height:calc(127 * var(--m));background:#1c029a}
.q-state h2{left:calc(14 * var(--m));top:calc(4 * var(--m));font-size:calc(34 * var(--fs))}
.q-state .cap{position:absolute;left:calc(330 * var(--m));top:calc(14 * var(--m));margin:0;font:400 max(12px, calc(13 * var(--fs)))/1 var(--font-body);color:#f1e9ff}
.q-sgrid{position:absolute;left:calc(8 * var(--m));top:calc(38 * var(--m));width:calc(100% - 16 * var(--m));height:calc(83 * var(--m));background:#09016a;display:grid;grid-template-columns:calc(387 * var(--m)) calc(340 * var(--m)) calc(376 * var(--m)) 1fr}
.q-sgrid > div{position:relative;padding:calc(4 * var(--m)) calc(10 * var(--m)) 0 calc(18 * var(--m))}
.q-sgrid > div + div::before{content:"";position:absolute;left:0;top:calc(6 * var(--m));bottom:calc(8 * var(--m));width:max(1px, calc(2px * var(--u)));background:#c9a2ff}
.q-sgrid h3{margin:0 0 calc(4 * var(--m));font:600 max(12px, calc(14 * var(--fs)))/1.2 var(--font-body);color:#fff}
.q-sgrid h3 small{font-weight:400;font-size:max(12px, calc(12 * var(--fs)));color:#e4d4ff;margin-left:calc(4 * var(--m))}
.q-skel{display:flex;align-items:center;height:calc(17 * var(--m));margin-bottom:calc(3 * var(--m));background:#2b0aa6;font:400 max(12px, calc(12 * var(--fs)))/1 var(--font-mono);color:#e7b6ff;padding-left:calc(10 * var(--m))}
.q-skel i{flex:1;margin:0 calc(24 * var(--m)) 0 calc(22 * var(--m));height:max(1px, calc(2px * var(--u)));background:repeating-linear-gradient(90deg,#e7b6ff 0 calc(9 * var(--m)),transparent 0 calc(16 * var(--m)));max-width:calc(115 * var(--m))}
.q-skel em{margin-left:auto;margin-right:calc(14 * var(--m));font-style:normal;letter-spacing:.2em}
.q-emptybox{position:relative;height:calc(50 * var(--m));margin-top:calc(2 * var(--m));width:calc(308 * var(--m));display:flex;align-items:center;justify-content:center;font:600 max(12px, calc(15 * var(--fs)))/1 var(--font-body);color:#fff}
.q-emptybox svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.q-emptybox rect{fill:none;stroke:#c9a2ff;stroke-width:1.5;stroke-dasharray:4 3}
.q-ex{display:flex;align-items:center;height:calc(34 * var(--m));margin-top:calc(8 * var(--m));width:calc(338 * var(--m));background:#2b0aa6;font:400 max(12px, calc(11 * var(--fs)))/1 var(--font-body);color:#fff;padding:0 calc(12 * var(--m)) 0 calc(8 * var(--m))}
.q-ex.on{background:#3812bd;box-shadow:inset 0 0 0 max(1px, calc(2px * var(--u))) #f1dcff,0 0 calc(10px * var(--u)) rgba(220,170,255,.5)}
.q-ex.off{opacity:.6;width:calc(345 * var(--m))}
.q-ex .rk{font:400 max(12px, calc(14 * var(--fs)))/1 var(--font-mono);color:#e7b6ff;width:calc(30 * var(--m))}
.q-ex .cd{width:calc(34 * var(--m));height:calc(22 * var(--m));display:flex;align-items:center;justify-content:center;font:400 max(12px, calc(12 * var(--fs)))/1 var(--font-mono);color:#e7b6ff;margin-right:calc(12 * var(--m))}
.q-ex .am{margin-left:auto;font:400 max(12px, calc(14 * var(--fs)))/1 var(--font-mono);color:#3AF1BE}

/* motion: rows grow in, climb arrow traces (neon settle); reduced motion = instant final state */
@media (prefers-reduced-motion: no-preference){
  .q-ladder.is-grow > li{animation:qGrow .5s var(--ease-settle) both}
  .q-ladder.is-grow > li:nth-child(2){animation-delay:60ms}.q-ladder.is-grow > li:nth-child(3){animation-delay:120ms}.q-ladder.is-grow > li:nth-child(4){animation-delay:180ms}
  .q-ladder.is-grow > li:nth-child(5){animation-delay:240ms}.q-ladder.is-grow > li:nth-child(6){animation-delay:300ms}.q-ladder.is-grow > li:nth-child(7){animation-delay:360ms}.q-ladder.is-grow > li:nth-child(8){animation-delay:420ms}
  [data-q-reveal].q-in{animation:qRise .5s var(--ease-settle) both}
  [data-q-reveal].q-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 calc(22px * var(--u)) rgba(199,125,255,.9);animation:qGlow .9s var(--ease-settle) both}
  .q-trace{stroke-dasharray:var(--len,600);stroke-dashoffset:0;animation:qTrace .5s var(--ease-settle) both}
}
@keyframes qRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes qGlow{from{opacity:1}to{opacity:0}}
@keyframes qGrow{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes qTrace{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:0}}

/* ---------- below 1024: one column, labeled cards (390 no horizontal scroll) ---------- */
@media (max-width:1023px){
  .queue{--m:1px;--fs:1px;padding-bottom:24px}
  .q-hero,.q-lower{height:auto;margin-top:0;display:flex;flex-direction:column;gap:16px;padding-top:16px}
  .q-hero > *,.q-lower > *,.q-climb > *,.q-win > *,.q-stub > *,.q-state > *,.q-stub .in{position:static!important;width:auto!important;height:auto!important;left:auto;top:auto}
  .q-title{font-size:44px;white-space:normal}
  .q-seg{height:48px;width:100%!important}
  .q-vbar,.q-jump,.q-pillar,.q-arrows{display:none!important}
  .q-stats{flex-wrap:wrap;gap:8px;white-space:normal;height:auto}
  .q-stats .sep{display:none}
  .q-stats .n{font-size:24px}.q-stats .l{font-size:15px}
  .q-ladder{gap:8px}
  .q-row,.q-ladder > li:first-child .q-row{width:100%;margin-left:0;height:auto!important;flex-wrap:wrap;padding:10px;gap:8px}
  .q-row .rk{width:auto;padding-left:0;font-size:22px}
  .q-row .cd{width:44px;height:32px;font-size:16px}
  .q-row .nm{flex:1 1 60%;padding-left:0;font-size:15px}
  .q-row .py,.q-row .tm{width:auto;padding-left:0;font-size:13px}
  .q-row .wl{width:18px;height:18px}
  .q-row .am{width:auto;margin-left:auto;font-size:16px}
  .q-row .pl{width:28px;height:28px;margin-left:0}
  .q-cut{padding:16px;min-height:0}
  .q-cut h2{font-size:36px;height:auto}
  .q-cut .it{font-size:16px;min-height:52px}
  .q-cut .it.tall{min-height:72px}
  .q-cut .it .v{font-size:17px}
  .q-cut .big{width:56px;height:44px;font-size:20px}
  .q-climb,.q-win,.q-stub,.q-state{padding:14px;display:flex;flex-direction:column;gap:12px}
  .q-climb h2,.q-win h2,.q-stub h2,.q-state h2{font-size:30px;white-space:normal}
  .q-climb .sub,.q-win .sub,.q-stub .cap,.q-state .cap{font-size:14px}
  .q-badge{font-size:15px;padding:8px}
  .q-ba{display:flex;flex-direction:column;gap:14px;padding:10px}
  .q-col .hd b{font-size:18px}.q-col .hd span{font-size:13px}
  .q-mini li,.q-wcol .q-mini li{height:30px}
  .q-mini .rk,.q-wcol .q-mini .rk{width:36px;padding-left:6px;font-size:14px}
  .q-mini .cd,.q-wcol .q-mini .cd{width:34px;height:22px;font-size:12px}
  .q-mini .nm,.q-wcol .q-mini .nm{font-size:13px;padding-left:8px}
  .q-mini .am,.q-wcol .q-mini .am{font-size:13px;padding-right:8px}
  .q-wcol{position:static!important;width:auto!important;height:auto!important;padding:8px}
  .q-wcol .hd{flex-wrap:wrap;height:auto;font-size:12px}
  .q-wcol .hd b{font-size:12px}
  .q-wcol .hd button{height:30px;font-size:14px}
  .q-stub dt,.q-stub dd{height:28px;font-size:13px}
  .q-stub .top b{font-size:15px}
  .q-sgrid{position:static!important;width:auto!important;height:auto!important;display:flex;flex-direction:column;gap:10px;padding:8px 0}
  .q-sgrid > div + div::before{display:none}
  .q-sgrid h3{font-size:14px}
  .q-skel{height:20px;font-size:12px}
  .q-emptybox,.q-ex,.q-ex.off{width:100%;height:40px;font-size:12px}
  .q-ex .rk,.q-ex .am{font-size:12px}
}