/* wp-E0 design language v4 "朱金大殿" (2026-11-13). Contract for every later package: /home/ubuntu/wp/E0/V4.txt.
   Loaded on /me, / and /docs after skin.css (on /me after shell.css). Sections:
     1 tokens (--v4-*)            2 panel materials + three panel levels   3 layout primitives
     4 type, kpi, stat, tag, progress, hero   5 motion utilities   6 environment layer
     7 U0 ui-* theme               8 ops variant (admin)                    9 shell.css overrides (E1 deletes them)
   Rules: red = an action you can press (and errors), gold = identity (level, balance, hairlines), green = success only;
   the two never meet on one component. Six type sizes, 8px rhythm, four durations. Every transition / animation / hover
   transform lives inside prefers-reduced-motion:no-preference, so reduced motion means no motion by construction. */

/* ---------- 1 tokens ---------- */
html[data-skin^="game"],html[data-skin="ops"]{
  /* surfaces: canvas, then three steps up; --v4-well sits below the canvas (inputs, tracks) */
  --v4-s0:#0b0907;--v4-s1:#15110d;--v4-s2:#1c1712;--v4-s3:#261f18;--v4-well:#080605;
  --v4-fg:#efe6d3;--v4-fg2:#d0c4ac;--v4-muted:#9c907a;
  --v4-line:rgba(239,230,211,.08);--v4-line-2:rgba(239,230,211,.15);--v4-edge:#7a6a4e;
  /* gold: highlight, base, deep; hairlines for frames */
  --v4-gold-1:#f1d08a;--v4-gold-2:#d8a648;--v4-gold-3:#8a6a2c;--v4-gold-ink:#1a1205;
  --v4-hair:rgba(216,166,72,.18);--v4-hair-2:rgba(216,166,72,.4);--v4-gold-soft:rgba(216,166,72,.12);
  /* red: the action colour. fill = buttons (white text 4.66:1 or better), text = small red text on dark (6.2:1 on s1) */
  --v4-red:#d9343e;--v4-red-2:#c92a34;--v4-red-3:#a8222b;--v4-red-text:#f2666d;--v4-red-soft:rgba(217,52,62,.16);--v4-red-line:#5c1d22;
  --v4-on-red:#fff;
  --v4-red-fill:linear-gradient(180deg,var(--v4-red),var(--v4-red-2));
  --v4-red-fill-2:linear-gradient(180deg,#cf2f39,#b9242e);
  --v4-red-edge:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(0,0,0,.14),0 8px 18px -10px rgba(217,52,62,.7);
  /* status */
  --v4-ok:#5fc28a;--v4-ok-soft:rgba(95,194,138,.14);--v4-warn:#e8a04a;--v4-warn-soft:rgba(232,160,74,.14);--v4-err:#f2666d;--v4-err-soft:rgba(217,52,62,.16);
  /* shadow and glow */
  --v4-hi:inset 0 1px 0 rgba(255,236,200,.07);
  --v4-shadow-1:0 1px 0 rgba(0,0,0,.5),0 16px 32px -24px rgba(0,0,0,.9);
  --v4-shadow-2:0 1px 0 rgba(0,0,0,.5),0 22px 44px -22px rgba(0,0,0,.95);
  --v4-shadow-3:0 0 0 1px rgba(0,0,0,.6),0 30px 80px -20px rgba(0,0,0,.9);
  --v4-glow-gold:0 0 60px -28px rgba(216,166,72,.6);--v4-glow-red:0 0 26px -8px rgba(217,52,62,.65);
  --v4-ring:0 0 0 3px rgba(216,166,72,.22);
  /* radius, spacing (8px grid), type (six sizes), motion (four durations) */
  --v4-r-1:4px;--v4-r-2:6px;--v4-r-3:8px;--v4-r-pill:999px;
  --v4-sp-1:4px;--v4-sp-2:8px;--v4-sp-3:12px;--v4-sp-4:16px;--v4-sp-5:20px;--v4-sp-6:24px;--v4-sp-8:32px;--v4-sp-10:40px;--v4-sp-12:48px;
  --v4-page:1320px;--v4-gutter:clamp(16px,3vw,32px);--v4-gap:var(--v4-sp-6);--v4-pad:var(--v4-sp-5) var(--v4-sp-6);
  --v4-fs-12:12px;--v4-fs-14:14px;--v4-fs-16:16px;--v4-fs-20:20px;--v4-fs-28:28px;--v4-fs-40:40px;
  --v4-font:var(--sans);--v4-font-title:var(--cjk-display);--v4-font-num:var(--display);--v4-font-mono:var(--mono);
  --v4-t-1:120ms;--v4-t-2:200ms;--v4-t-3:320ms;--v4-t-4:600ms;--v4-stagger:40ms;
  --v4-ease:cubic-bezier(.2,.7,.2,1);--v4-ease-in:cubic-bezier(.5,0,.75,0);--v4-ease-io:cubic-bezier(.6,0,.4,1);
  /* panel materials. B "墨玉板": translucent dark plate, 1px gold hairline, one inner highlight on the top edge.
     A "主卡": the nine-slice gold frame (static/game/ui/panel.webp) as a real border --v4-a-w wide, around an ink plate
     with a gold inner glow. The frame is the border box, so content and hero art start inside it. */
  --v4-b-bg:rgba(21,17,13,.9);--v4-b-bd:1px solid var(--v4-hair);--v4-b-sh:var(--v4-hi),var(--v4-shadow-1);
  --v4-a-ink:#111013;--v4-a-w:30px;--v4-a-bd:var(--v4-a-w) solid transparent;
  --v4-a-bg:radial-gradient(70% 86% at 50% 44%,rgba(216,166,72,.085),transparent 72%) padding-box,var(--v4-a-ink) padding-box;
  --v4-a-frame:url(ui/panel.webp) 160 stretch;
  --v4-a-sh:0 0 0 1px rgba(0,0,0,.7),0 28px 60px -32px rgba(0,0,0,.95),var(--v4-glow-gold);
  /* environment: art opacity and the scrim on top of it. With these two numbers the brightest possible pixel behind
     the content is #272524 (white art pixel), where --v4-muted still reads 4.86:1. */
  --v4-env-art:.24;--v4-env-scrim:linear-gradient(180deg,rgba(11,9,7,.52) 0,rgba(11,9,7,.86) 46%,rgba(11,9,7,.96) 100%);
  --v4-env-base:radial-gradient(110% 60% at 50% -10%,rgba(217,52,62,.13),transparent 60%),linear-gradient(180deg,#120c0b 0,#0b0907 46%,#080605 100%);
  /* U0 scale tokens follow v4 (ui.css loads later and lazily; this selector outranks its :root) */
  --ui-r-1:var(--v4-r-1);--ui-r-2:var(--v4-r-2);--ui-r-3:var(--v4-r-3);
  --ui-fs-xs:12px;--ui-fs-sm:14px;--ui-fs-md:14px;--ui-fs-lg:16px;--ui-fs-xl:20px;--ui-fs-2xl:28px;--ui-fs-3xl:40px;
  --ui-dur-1:var(--v4-t-1);--ui-dur-2:var(--v4-t-2);--ui-dur-3:var(--v4-t-3);--ui-ease:var(--v4-ease);
  --ui-shadow-1:var(--v4-shadow-1);--ui-shadow-2:var(--v4-shadow-2);
}

/* ---------- 2 panels ---------- */
/* A material is five variables; whoever sets them gets the look. .v4-panel / .v4-panel--feature set and use them here,
   skin.css sets the same variables on the legacy class names. */
.v4-panel{--v4-p-bg:var(--v4-b-bg);--v4-p-bd:var(--v4-b-bd);--v4-p-r:var(--v4-r-3);--v4-p-frame:none;--v4-p-sh:var(--v4-b-sh);
  position:relative;min-width:0;padding:var(--v4-pad);border:var(--v4-p-bd);border-radius:var(--v4-p-r);background:var(--v4-p-bg);border-image:var(--v4-p-frame);box-shadow:var(--v4-p-sh);color:var(--v4-fg)}
.v4-panel--feature{--v4-p-bg:var(--v4-a-bg);--v4-p-bd:var(--v4-a-bd);--v4-p-r:0;--v4-p-frame:var(--v4-a-frame);--v4-p-sh:var(--v4-a-sh);
  padding:var(--v4-sp-1) var(--v4-sp-2)}
.v4-panel--flush{padding:0}
/* re-level an element that already has a material from skin.css (a legacy .card, the balance card): one class, no CSS */
html[data-skin] .v4-as-a.v4-as-a.v4-as-a{--v4-p-bg:var(--v4-a-bg);--v4-p-bd:var(--v4-a-bd);--v4-p-r:0;--v4-p-frame:var(--v4-a-frame);--v4-p-sh:var(--v4-a-sh);padding:var(--v4-sp-1) var(--v4-sp-2)}
html[data-skin] .v4-as-b.v4-as-b.v4-as-b{--v4-p-bg:var(--v4-b-bg);--v4-p-bd:var(--v4-b-bd);--v4-p-r:var(--v4-r-3);--v4-p-frame:none;--v4-p-sh:var(--v4-b-sh);padding:var(--v4-pad)}
.v4-panel--quiet{--v4-p-bg:transparent;--v4-p-sh:none}
.v4-panel .v4-panel:not(.v4-panel--feature){--v4-p-bg:rgba(239,230,211,.03);--v4-p-bd:1px solid var(--v4-line);--v4-p-sh:none}
.v4-panel-head{display:flex;align-items:center;gap:var(--v4-sp-3);min-width:0;margin:0 0 var(--v4-sp-4)}
.v4-panel-title{flex:1;min-width:0;margin:0;font:700 var(--v4-fs-16)/1.4 var(--v4-font);letter-spacing:.02em;color:var(--v4-fg)}
.v4-panel-title small{margin-left:var(--v4-sp-2);font:400 var(--v4-fs-12)/1.4 var(--v4-font);letter-spacing:0;color:var(--v4-muted)}
.v4-panel-acts{display:flex;align-items:center;gap:var(--v4-sp-2);flex:none}
.v4-panel-foot{display:flex;align-items:center;gap:var(--v4-sp-3);margin-top:var(--v4-sp-4);padding-top:var(--v4-sp-4);border-top:1px solid var(--v4-line)}
/* C level: no frame, only dividers */
.v4-list{margin:0;padding:0;list-style:none}
.v4-list>*{display:flex;align-items:center;gap:var(--v4-sp-3);min-width:0;padding:var(--v4-sp-3) 0;border-top:1px solid var(--v4-line)}
.v4-list>:first-child{border-top:0}
.v4-list--dense>*{padding:var(--v4-sp-2) 0}
.v4-list-main{flex:1;min-width:0;color:var(--v4-fg);font-size:var(--v4-fs-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-list-main small{display:block;color:var(--v4-muted);font-size:var(--v4-fs-12);overflow:hidden;text-overflow:ellipsis}
.v4-list-meta{flex:none;color:var(--v4-muted);font-size:var(--v4-fs-12);white-space:nowrap}
a.v4-list-row,button.v4-list-row{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.v4-list-row:hover{background:rgba(239,230,211,.035)}
.v4-list-row:focus-visible{outline:2px solid var(--v4-gold-2);outline-offset:-2px}
.v4-rule{height:1px;margin:var(--v4-sp-6) 0;border:0;background:var(--v4-line)}
.v4-rule--gold{background:linear-gradient(90deg,var(--v4-hair-2),transparent)}

/* ---------- 3 layout ---------- */
.v4-page{width:100%;max-width:calc(var(--v4-page) + 2 * var(--v4-gutter));margin-inline:auto;padding-inline:var(--v4-gutter)}
.v4-stack{display:flex;flex-direction:column;gap:var(--v4-gap);min-width:0}
.v4-stack--lg{gap:var(--v4-sp-8)}
.v4-stack--sm{gap:var(--v4-sp-3)}
.v4-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--v4-sp-3);min-width:0}
.v4-row--end{justify-content:flex-end}
.v4-row--between{justify-content:space-between}
.v4-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v4-gap);min-width:0;align-items:start}
.v4-grid>*{min-width:0}
.v4-grid--stretch{align-items:stretch}
.v4-grid--auto{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.v4-grid--tiles{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:var(--v4-sp-4)}
@media (min-width:761px){
  .v4-grid--6-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1025px){
  .v4-grid--8-4{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .v4-grid--4-8{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .v4-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.v4-section-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--v4-sp-1) var(--v4-sp-3);min-width:0;margin:0 0 var(--v4-sp-4)}
.v4-section-title{position:relative;margin:0;padding-left:var(--v4-sp-3);font:700 var(--v4-fs-20)/1.3 var(--v4-font);letter-spacing:.02em;color:var(--v4-fg)}
.v4-section-title::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:2px;background:var(--v4-gold-2)}
.v4-section-sub{flex:1;min-width:0;margin:0;color:var(--v4-muted);font-size:var(--v4-fs-14);line-height:1.5}
.v4-section-acts{display:flex;align-items:center;gap:var(--v4-sp-2);margin-left:auto}
.v4-section-more{color:var(--v4-fg2);font-size:var(--v4-fs-14);text-decoration:none}
.v4-section-more:hover{color:var(--v4-gold-1)}
.v4-section-more:focus-visible{outline:2px solid var(--v4-gold-2);outline-offset:2px;border-radius:var(--v4-r-1)}

/* ---------- 4 type and data ---------- */
.v4-h1,.v4-h2{margin:0;font-family:var(--v4-font);font-weight:800;letter-spacing:.03em;color:var(--v4-fg);text-wrap:balance}
.v4-h1{font-size:var(--v4-fs-40);line-height:1.2}
.v4-h2{font-size:var(--v4-fs-28);line-height:1.25}
.v4-h3{margin:0;font:700 var(--v4-fs-20)/1.35 var(--v4-font);color:var(--v4-fg)}
.v4-body{margin:0;font-size:var(--v4-fs-16);line-height:1.7;color:var(--v4-fg2)}
.v4-text{margin:0;font-size:var(--v4-fs-14);line-height:1.6;color:var(--v4-fg2)}
.v4-cap{margin:0;font-size:var(--v4-fs-12);line-height:1.5;color:var(--v4-muted)}
/* SD Serif is a 26 KB subset (brand glyphs only): use it for fixed brand strings whose glyphs you have checked, never for free text */
.v4-brand{font-family:var(--v4-font-title);font-weight:900;letter-spacing:.08em}
.v4-muted{color:var(--v4-muted)}
.v4-gold{color:var(--v4-gold-1)}
.v4-eyebrow{display:flex;align-items:center;gap:var(--v4-sp-2);margin:0;font:600 var(--v4-fs-12)/1.4 var(--v4-font);letter-spacing:.24em;color:var(--v4-fg2)}
.v4-eyebrow::before{content:"";width:20px;height:1px;background:var(--v4-gold-2)}
.v4-num{font-family:var(--v4-font-num);font-style:italic;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
@media (max-width:760px){
  .v4-h1{font-size:var(--v4-fs-28)}
  .v4-h2{font-size:var(--v4-fs-20)}
  .v4-section-sub{flex-basis:100%;order:3}
}
.v4-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));gap:var(--v4-sp-5) var(--v4-sp-6)}
.v4-kpi{display:flex;flex-direction:column;gap:var(--v4-sp-1);min-width:0}
.v4-kpi-k{color:var(--v4-muted);font-size:var(--v4-fs-12);line-height:1.4;letter-spacing:.06em}
.v4-kpi-v{display:block;min-width:0;color:var(--v4-fg);font:italic 700 var(--v4-fs-28)/1.15 var(--v4-font-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-kpi-v small{margin-left:var(--v4-sp-1);font:600 var(--v4-fs-12)/1 var(--v4-font);letter-spacing:0;color:var(--v4-muted)}
.v4-kpi-s{color:var(--v4-muted);font-size:var(--v4-fs-12);line-height:1.4}
.v4-kpi--gold .v4-kpi-v{color:var(--v4-gold-1)}
.v4-kpi--lg .v4-kpi-v{font-size:var(--v4-fs-40)}
.v4-up{color:var(--v4-ok)}
.v4-down{color:var(--v4-err)}
.v4-stat{display:flex;align-items:baseline;justify-content:space-between;gap:var(--v4-sp-3);min-width:0}
.v4-stat-k{color:var(--v4-muted);font-size:var(--v4-fs-14)}
.v4-stat-v{color:var(--v4-fg);font:italic 700 var(--v4-fs-20)/1.2 var(--v4-font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.v4-tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 var(--v4-sp-2);border-radius:var(--v4-r-1);background:rgba(239,230,211,.07);color:var(--v4-fg2);
  font:600 var(--v4-fs-12)/1 var(--v4-font);letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.v4-tag--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.v4-tag--gold{background:var(--v4-gold-soft);color:var(--v4-gold-1)}
.v4-tag--red{background:var(--v4-red-soft);color:var(--v4-red-text)}
.v4-tag--ok{background:var(--v4-ok-soft);color:var(--v4-ok)}
.v4-tag--warn{background:var(--v4-warn-soft);color:var(--v4-warn)}
.v4-tag--err{background:var(--v4-err-soft);color:var(--v4-err)}
.v4-tag--line{background:none;box-shadow:inset 0 0 0 1px var(--v4-line-2);color:var(--v4-muted)}
.v4-progress{--v4-p:0;position:relative;display:block;height:6px;border-radius:var(--v4-r-pill);background:rgba(239,230,211,.09);overflow:hidden}
.v4-progress>i{position:absolute;inset:0;border-radius:inherit;background:var(--v4-fg2);transform-origin:0 50%;transform:scaleX(var(--v4-p))}
.v4-progress--lg{height:10px}
.v4-progress--gold>i{background:linear-gradient(90deg,var(--v4-gold-3),var(--v4-gold-2) 60%,var(--v4-gold-1))}
.v4-progress--ok>i{background:var(--v4-ok)}
.v4-progress--warn>i{background:var(--v4-warn)}
.v4-progress--err>i{background:var(--v4-err)}
/* hero: text left, picture right. The ink gradient under the text is opaque where the text sits, so contrast never
   depends on the picture. With .v4-panel--feature the picture is matted inside the gold frame. */
.v4-hero{--v4-hero-ink:11,9,7;position:relative;display:grid;align-items:center;min-height:300px;overflow:hidden;isolation:isolate}
.v4-panel--feature.v4-hero{--v4-hero-ink:17,16,19;padding:0}
.v4-hero-art{position:absolute;inset:0;z-index:-2;margin:0;overflow:hidden}
.v4-hero-art img,.v4-hero-art video,img.v4-hero-art{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.v4-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgb(var(--v4-hero-ink)) 0,rgba(var(--v4-hero-ink),.94) 36%,rgba(var(--v4-hero-ink),.6) 58%,rgba(var(--v4-hero-ink),0) 84%)}
.v4-hero-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--v4-sp-4);width:min(580px,60%);padding:var(--v4-sp-10) var(--v4-sp-12)}
.v4-hero-title{margin:0;font:800 var(--v4-fs-40)/1.2 var(--v4-font);letter-spacing:.03em;color:var(--v4-fg);text-wrap:balance}
.v4-hero-text{margin:0;font-size:var(--v4-fs-16);line-height:1.7;color:var(--v4-fg2)}
.v4-hero-acts{display:flex;flex-wrap:wrap;gap:var(--v4-sp-3);margin-top:var(--v4-sp-2)}
@media (max-width:760px){
  .v4-hero{align-items:end;min-height:380px}
  .v4-hero-art img,.v4-hero-art video,img.v4-hero-art{object-position:70% top}
  .v4-hero::before{background:linear-gradient(0deg,rgb(var(--v4-hero-ink)) 0,rgba(var(--v4-hero-ink),.96) 50%,rgba(var(--v4-hero-ink),.62) 72%,rgba(var(--v4-hero-ink),0) 96%)}
  .v4-hero-body{width:auto;gap:var(--v4-sp-3);padding:var(--v4-sp-6) var(--v4-sp-5)}
  .v4-hero-title{font-size:var(--v4-fs-28)}
  .v4-hero-text{font-size:var(--v4-fs-14)}
  html[data-skin]{--v4-a-w:22px;--v4-pad:var(--v4-sp-4)}
}

/* ---------- 5 motion utilities (all inside no-preference) ---------- */
.v4-sheen{position:relative;overflow:hidden}
@keyframes v4-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes v4-roll{from{opacity:0;transform:translateY(40%)}}
@keyframes v4-fade{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  /* entrance: children rise one after another, 40ms apart (set --v4-i yourself past the 12th child) */
  .v4-in>*{animation:v4-rise var(--v4-t-3) var(--v4-ease) both;animation-delay:calc(var(--v4-i,0) * var(--v4-stagger))}
  .v4-in>:nth-child(2){--v4-i:1}.v4-in>:nth-child(3){--v4-i:2}.v4-in>:nth-child(4){--v4-i:3}.v4-in>:nth-child(5){--v4-i:4}.v4-in>:nth-child(6){--v4-i:5}
  .v4-in>:nth-child(7){--v4-i:6}.v4-in>:nth-child(8){--v4-i:7}.v4-in>:nth-child(9){--v4-i:8}.v4-in>:nth-child(10){--v4-i:9}.v4-in>:nth-child(11){--v4-i:10}.v4-in>:nth-child(n+12){--v4-i:11}
  .v4-fade{animation:v4-fade var(--v4-t-3) var(--v4-ease) both}
  /* one pass of light on hover */
  .v4-sheen::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
    background:linear-gradient(105deg,transparent 38%,rgba(255,236,200,.13) 50%,transparent 62%)}
  .v4-sheen:hover::after{transform:translateX(120%);transition:transform var(--v4-t-4) var(--v4-ease)}
  /* number roll: add .is-roll when the value changes (remove it on animationend) */
  .v4-num.is-roll,.v4-kpi-v.is-roll{animation:v4-roll var(--v4-t-3) var(--v4-ease)}
  /* press and lift for clickable cards */
  .v4-press{transition:transform var(--v4-t-1) var(--v4-ease),border-color var(--v4-t-2) var(--v4-ease),box-shadow var(--v4-t-2) var(--v4-ease)}
  .v4-press:hover{transform:translateY(-2px)}
  .v4-press:active{transform:translateY(1px) scale(.99)}
  .v4-progress>i{transition:transform var(--v4-t-4) var(--v4-ease)}
  .v4-list-row,.v4-section-more{transition:background-color var(--v4-t-1) var(--v4-ease),color var(--v4-t-1) var(--v4-ease)}
  .v4-env>video{transition:opacity var(--v4-t-4) var(--v4-ease)}
}
a.v4-press,button.v4-press{cursor:pointer}
.v4-press:hover{border-color:var(--v4-hair-2)}
.v4-press:focus-visible{outline:2px solid var(--v4-gold-2);outline-offset:2px}

/* ---------- 6 environment (L0) ---------- */
/* <div class="v4-env" aria-hidden="true"><img src=... alt="" loading="lazy" decoding="async"></div> as the first child of
   <body>. Phones get the gradient only. V4.env() (v4.js) may add a looping <video> on desktop. */
.v4-env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--v4-env-base)}
.v4-env>img,.v4-env>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:var(--v4-env-art)}
.v4-env>video{opacity:0}
.v4-env.is-live>video{opacity:var(--v4-env-art)}
.v4-env.is-live>img{opacity:0}
.v4-env::after{content:"";position:absolute;inset:0;background:var(--v4-env-scrim)}
@media (max-width:760px){.v4-env>img,.v4-env>video{display:none}}
@media (prefers-reduced-motion:reduce){.v4-env>video{display:none}.v4-env.is-live>img{opacity:var(--v4-env-art)}}

/* ---------- 7 U0 ui-* components in the v4 skin ---------- */
html[data-skin],html[data-skin] .ui-theme{--ui-focus:var(--v4-gold-2);--ui-line-input:var(--v4-edge);--ui-accent-fill-hover:#c42b35;--ui-accent-text:var(--v4-red-text);--ui-err-text:var(--v4-err);--ui-warn-text:var(--v4-warn)}
/* buttons: primary = vermilion solid, secondary = gold hairline, ghost = text only. Plain rounded rectangles. */
html[data-skin] .ui-btn{height:40px;padding:0 var(--v4-sp-5);border:1px solid var(--v4-hair-2);border-radius:var(--v4-r-2);background:rgba(239,230,211,.03);box-shadow:var(--v4-hi);color:var(--v4-fg);font-weight:700;letter-spacing:.04em}
html[data-skin] .ui-btn:hover{border-color:var(--v4-gold-2);background:rgba(216,166,72,.08);color:var(--v4-fg)}
html[data-skin] .ui-btn--primary,html[data-skin] .ui-btn--brush,html[data-skin] .ui-dialog-actions .ui-btn--danger{border-color:transparent;background:var(--v4-red-fill);box-shadow:var(--v4-red-edge);color:var(--v4-on-red)}
html[data-skin] .ui-btn--primary:hover,html[data-skin] .ui-btn--brush:hover,html[data-skin] .ui-dialog-actions .ui-btn--danger:hover{border-color:transparent;background:var(--v4-red-fill-2);color:var(--v4-on-red)}
html[data-skin] .ui-btn--primary:active,html[data-skin] .ui-btn--brush:active{background:var(--v4-red-3)}
html[data-skin] .ui-btn--brush::before{display:none}
html[data-skin] .ui-btn--ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--v4-fg2)}
html[data-skin] .ui-btn--ghost:hover{border-color:transparent;background:rgba(239,230,211,.07);color:var(--v4-fg)}
html[data-skin] .ui-btn--danger{border-color:var(--v4-red-line);background:transparent;box-shadow:none;color:var(--v4-red-text)}
html[data-skin] .ui-btn--danger:hover{border-color:transparent;background:var(--v4-red-fill);color:var(--v4-on-red)}
html[data-skin] .ui-btn--sm{height:32px;padding:0 var(--v4-sp-3);letter-spacing:.02em}
html[data-skin] .ui-btn--lg{height:48px;padding:0 var(--v4-sp-8);letter-spacing:.1em}
html[data-skin] .ui-btn--icon{width:40px;padding:0}
html[data-skin] .ui-btn--icon.ui-btn--sm{width:32px}
html[data-skin] .ui-btn--icon.ui-btn--lg{width:48px}
html[data-skin] .ui-btn-group .ui-btn,html[data-skin] .ui-input-group .ui-btn{border-radius:0}
html[data-skin] .ui-btn-group .ui-btn:first-child,html[data-skin] .ui-input-group>.ui-btn:first-child{border-radius:var(--v4-r-2) 0 0 var(--v4-r-2)}
html[data-skin] .ui-btn-group .ui-btn:last-child,html[data-skin] .ui-input-group>.ui-btn:last-child{border-radius:0 var(--v4-r-2) var(--v4-r-2) 0}
html[data-skin] .ui-input-group .ui-btn{height:auto}
html[data-skin] .ui-link{color:var(--v4-red-text)}
html[data-skin] .ui-link:hover{color:var(--v4-fg)}
/* fields: a well below the surface, an edge you can see (3:1), gold focus */
html[data-skin] input.ui-input,html[data-skin] select.ui-select,html[data-skin] textarea.ui-textarea{height:40px;border-color:var(--v4-edge);border-radius:var(--v4-r-2);background-color:var(--v4-well);color:var(--v4-fg)}
html[data-skin] textarea.ui-textarea{height:auto}
html[data-skin] input.ui-input--sm,html[data-skin] select.ui-select.ui-input--sm{height:32px}
html[data-skin] input.ui-input:hover,html[data-skin] select.ui-select:hover,html[data-skin] textarea.ui-textarea:hover{border-color:var(--v4-muted)}
html[data-skin] input.ui-input:focus,html[data-skin] select.ui-select:focus,html[data-skin] textarea.ui-textarea:focus{border-color:var(--v4-gold-2);box-shadow:var(--v4-ring)}
html[data-skin] input.ui-input[aria-invalid="true"],html[data-skin] select.ui-select[aria-invalid="true"],html[data-skin] textarea.ui-textarea[aria-invalid="true"]{border-color:var(--v4-err)}
html[data-skin] input.ui-input:disabled,html[data-skin] select.ui-select:disabled,html[data-skin] textarea.ui-textarea:disabled,html[data-skin] input.ui-input[readonly]{background-color:var(--v4-s1);border-color:var(--v4-line-2)}
html[data-skin] .ui-addon{border-color:var(--v4-edge);background:var(--v4-s2)}
html[data-skin] .ui-label{color:var(--v4-fg2)}
html[data-skin] .ui-check input,html[data-skin] .ui-radio input{border-color:var(--v4-edge);background:var(--v4-well)}
html[data-skin] .ui-check input:checked,html[data-skin] .ui-radio input:checked,html[data-skin] .ui-check input:indeterminate{border-color:var(--v4-red);background:var(--v4-red)}
html[data-skin] .ui-switch-track{border-color:var(--v4-edge);background:var(--v4-well)}
html[data-skin] .ui-switch input:checked+.ui-switch-track{border-color:var(--v4-red);background:var(--v4-red)}
/* tabs and segmented: the current place is marked in gold (a place, not an action) */
html[data-skin] .ui-tabs{gap:0 var(--v4-sp-6);box-shadow:inset 0 -1px 0 var(--v4-line-2)}
html[data-skin] .ui-tab{padding:var(--v4-sp-3) 0;color:var(--v4-muted)}
html[data-skin] .ui-tab:hover{color:var(--v4-fg2)}
html[data-skin] .ui-tab[aria-selected="true"]{color:var(--v4-fg)}
html[data-skin] .ui-tab::after{background:var(--v4-gold-2)}
html[data-skin] .ui-seg{padding:3px;border-color:var(--v4-line-2);border-radius:var(--v4-r-2);background:var(--v4-well)}
html[data-skin] .ui-seg-item{border-radius:var(--v4-r-1);color:var(--v4-muted)}
html[data-skin] .ui-seg-item:hover{color:var(--v4-fg)}
html[data-skin] .ui-seg-item[aria-checked="true"]{background:var(--v4-s3);box-shadow:inset 0 0 0 1px var(--v4-hair-2);color:var(--v4-fg)}
/* table: C level inside a B plate, rows split by one neutral line. Cell padding and the row hover stay U0's: its
   narrow-container card mode re-pads the cells, and a heavier selector here would break it. */
html[data-skin] .ui-table-wrap{border-color:var(--v4-hair);border-radius:var(--v4-r-3);background:var(--v4-b-bg);box-shadow:var(--v4-hi)}
html[data-skin] .ui-table-wrap--flush{border-color:var(--v4-line-2);border-radius:0;background:none;box-shadow:none}
html[data-skin] .ui-table th{border-bottom-color:var(--v4-line-2);background:var(--v4-s1);color:var(--v4-muted);letter-spacing:.08em}
html[data-skin] .ui-table td{border-bottom-color:var(--v4-line)}
html[data-skin] .ui-table td.ui-num{font:italic 700 var(--v4-fs-14)/1.5 var(--v4-font-num)}
html[data-skin] .ui-table tr.ui-row-on td{background:var(--v4-gold-soft)}
html[data-skin] .ui-table tr.ui-row-on td:first-child{box-shadow:inset 2px 0 var(--v4-gold-2)}
html[data-skin] .ui-pager{color:var(--v4-muted)}
html[data-skin] .ui-pager-btn{min-width:32px;height:32px;border-radius:var(--v4-r-1);color:var(--v4-fg2)}
html[data-skin] .ui-pager-btn:hover{border-color:var(--v4-line-2);background:rgba(239,230,211,.05);color:var(--v4-fg)}
html[data-skin] .ui-pager-btn[aria-current="page"]{border-color:var(--v4-hair-2);background:var(--v4-gold-soft);color:var(--v4-gold-1)}
/* overlays (L2): opaque, one step up, a stronger hairline */
html[data-skin] .modal.ui-dialog,html[data-skin] .ui-toast{border:1px solid var(--v4-hair-2);border-radius:var(--v4-r-3);background:var(--v4-s2);box-shadow:var(--v4-hi),var(--v4-shadow-3)}
html[data-skin] .modal.ui-dialog{padding:var(--v4-sp-6)}
html[data-skin] .modal h2.ui-dialog-title{font:700 var(--v4-fs-20)/1.35 var(--v4-font);letter-spacing:.02em;color:var(--v4-fg)}
html[data-skin] .ui-dialog-body{color:var(--v4-fg2)}
html[data-skin] .ui-toast{border-left:2px solid var(--v4-muted);padding:var(--v4-sp-3) var(--v4-sp-3) var(--v4-sp-3) var(--v4-sp-4);color:var(--v4-fg)}
html[data-skin] .ui-toast--ok{border-left-color:var(--v4-ok)}
html[data-skin] .ui-toast--warn{border-left-color:var(--v4-warn)}
html[data-skin] .ui-toast--err{border-left-color:var(--v4-err)}
html[data-skin] .ui-toast-act{color:var(--v4-gold-1)}
/* panel, error card, empty state, skeleton */
html[data-skin] .ui-panel,html[data-skin] .ui-errcard{border:var(--v4-b-bd);border-radius:var(--v4-r-3);background:var(--v4-b-bg);box-shadow:var(--v4-b-sh)}
html[data-skin] .ui-panel{padding:var(--v4-pad)}
html[data-skin] .ui-errcard{border-left:2px solid var(--v4-err)}
html[data-skin] .ui-empty{padding:var(--v4-sp-10) var(--v4-sp-4);color:var(--v4-muted)}
html[data-skin] .ui-empty--compact{padding:var(--v4-sp-6) var(--v4-sp-3)}
html[data-skin] .ui-empty-title{font-size:var(--v4-fs-16);color:var(--v4-fg)}
html[data-skin] .ui-empty-text{font-size:var(--v4-fs-14)}
html[data-skin] .ui-empty-ic{border-color:var(--v4-hair-2);color:var(--v4-gold-2)}
html[data-skin] .ui-skel-line,html[data-skin] .ui-skel-block,html[data-skin] .ui-skel-cell{border-radius:var(--v4-r-1);background:rgba(239,230,211,.07)}
html[data-skin] .ui-skel-row{border-bottom-color:var(--v4-line)}
/* progress, status, badge: red only where it is an action or an error */
html[data-skin] .ui-progress-track{height:6px;background:rgba(239,230,211,.09)}
html[data-skin] .ui-progress--lg .ui-progress-track{height:10px}
html[data-skin] .ui-progress-bar{background:var(--v4-fg2)}
html[data-skin] .ui-progress--ok .ui-progress-bar{background:var(--v4-ok)}
html[data-skin] .ui-progress--warn .ui-progress-bar{background:var(--v4-warn)}
html[data-skin] .ui-progress--err .ui-progress-bar{background:var(--v4-err)}
html[data-skin] .ui-status{border-radius:var(--v4-r-1);background:rgba(239,230,211,.07);color:var(--v4-fg2)}
html[data-skin] .ui-status--ok{background:var(--v4-ok-soft);color:var(--v4-ok)}
html[data-skin] .ui-status--delay{background:var(--v4-warn-soft);color:var(--v4-warn)}
html[data-skin] .ui-status--down{background:var(--v4-err-soft);color:var(--v4-err)}
html[data-skin] .ui-status--idle{background:none;color:var(--v4-muted)}
html[data-skin] .ui-status--run::before{background:var(--v4-gold-2)}
html[data-skin] .ui-badge--gold{background:var(--v4-gold-soft);color:var(--v4-gold-1)}
html[data-skin] .ui-divider{background:var(--v4-line)}
html[data-skin] .ui-kbd{border-color:var(--v4-line-2);border-radius:var(--v4-r-1);background:var(--v4-s2);color:var(--v4-fg2)}
html[data-skin] .ui-code{border-radius:var(--v4-r-2);background:var(--v4-well)}
html[data-skin] :is(.ui-btn,.ui-tab,.ui-seg-item,.ui-pager-btn,.ui-link,.ui-toast-act,.ui-toast-x):focus-visible{outline:2px solid var(--v4-gold-2);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  html[data-skin] .ui-btn{transition:background-color var(--v4-t-1) var(--v4-ease),border-color var(--v4-t-1) var(--v4-ease),color var(--v4-t-1) var(--v4-ease),box-shadow var(--v4-t-2) var(--v4-ease),transform var(--v4-t-1) var(--v4-ease)}
  html[data-skin] .ui-btn--primary:hover,html[data-skin] .ui-btn--brush:hover{box-shadow:var(--v4-red-edge),var(--v4-glow-red)}
  html[data-skin] .ui-btn:active{transform:translateY(1px) scale(.985)}
}
@media (prefers-reduced-motion:reduce){
  html[data-skin] .ui-btn{transition:none}
  html[data-skin] .ui-btn:active{transform:none}
}

/* ---------- 8 ops variant: the admin "command centre" ----------
   <html data-skin="ops"> on admin.html (wp-E6 applies it; today the admin has no data-skin). Same palette, type and
   components; no environment, no gold-framed feature card, tighter rhythm. v4.css is enough on its own there. */
html[data-skin="ops"]{
  color-scheme:dark;
  --bg:#0b0907;--bg2:#100d0a;--panel:#15110d;--card:var(--panel);--card2:#1c1712;--line:#2e261b;--line-strong:#4c3e29;--line2:var(--line-strong);
  --fg:#efe6d3;--fg2:#d0c4ac;--muted:#9c907a;--info:#9c907a;--ink:#070605;
  --red:#d9343e;--red-hover:#e8464f;--red-press:#a8222b;--red-ink:#2b1013;--red-line:#5c1d22;--gold:#d8a648;--gold-ink:#2a2112;
  --ok:#5fc28a;--ok-ink:#10261a;--warn:#d8a648;--warn-ink:#2a2112;--err:#e2606a;--err-ink:#2b1013;
  --v4-gap:var(--v4-sp-4);--v4-pad:var(--v4-sp-4);--v4-b-bg:var(--v4-s1);
  --v4-a-bg:var(--v4-s1);--v4-a-bd:1px solid var(--v4-hair-2);--v4-a-frame:none;--v4-a-sh:var(--v4-hi),var(--v4-shadow-1);--v4-a-w:1px;
}
html[data-skin="ops"] .v4-env{display:none}
html[data-skin="ops"] .v4-panel--feature{--v4-p-r:var(--v4-r-3);padding:var(--v4-pad)}
html[data-skin="ops"] .v4-panel--feature.v4-hero{padding:0}
html[data-skin="ops"] .v4-kpi-v{font-size:var(--v4-fs-20)}
html[data-skin="ops"] .v4-section-title{font-size:var(--v4-fs-16)}
html[data-skin="ops"] .ui-btn{height:32px;padding:0 var(--v4-sp-3)}
html[data-skin="ops"] .ui-btn--lg{height:40px;padding:0 var(--v4-sp-5)}

/* ---------- 9 legacy class mapping that still does work (wp-E5) ----------
   wp-E0 wrote six E1-DEL-n overrides of the old wp-G1 shell.css here. wp-E5 diffed the computed style of every /me tab, the
   sign-in page, home, docs, status and admin with and without each block: three were dead (the slanted HUD chip, the
   chamfered lobby tiles, the .gs-bg background - wp-E1 replaced all three) and are gone; these three still decide what you
   see and stay, unchanged, so the cascade order is the same:
   1. #root .card / .quota-big take their panel material with ID weight: without it the tab sheets' own borders win (the
      gold-hairline cards of the mall and keys tabs turn brown, the A-frame of the creation forms disappears);
   2. the button plate must beat front.css's per-variant ::before rules, and buttons keep the v4 side padding (the HUD sound
      button would lose its 12px);
   3. the sign-in card material, the seal's glow and the title shadow. */
/* (1) panel material */
html[data-skin="game"] :is(.quota-big,#root .card){border:var(--v4-p-bd);border-radius:var(--v4-p-r);background:var(--v4-p-bg);border-image:var(--v4-p-frame);box-shadow:var(--v4-p-sh)}
html[data-skin="game"] .quota-big{padding:var(--v4-sp-1) var(--v4-sp-2)}
html[data-skin="game"] .pool-strip{background:var(--v4-p-bg);border:var(--v4-p-bd);box-shadow:var(--v4-p-sh)}
/* (2) button plate and side padding */
html[data-skin="game"] .btn.btn.btn.btn.btn:not(.enter)::before{border:0;border-image:none;border-radius:inherit;background:var(--v4-btn-bg);box-shadow:var(--v4-btn-edge);filter:none}
html[data-skin="game"] .btn:not(.enter){padding-left:var(--v4-sp-5);padding-right:var(--v4-sp-5)}
html[data-skin="game"] .btn.sm:not(.enter){padding-left:var(--v4-sp-3);padding-right:var(--v4-sp-3)}
/* (3) sign-in card */
html[data-skin="game"] .auth .auth-form form{border:var(--v4-p-bd);border-radius:var(--v4-p-r);background:var(--v4-p-bg);border-image:var(--v4-p-frame);box-shadow:var(--v4-p-sh);padding:var(--v4-sp-3) var(--v4-sp-3) var(--v4-sp-1)}
html[data-skin="game"] .auth .auth-form input{background:var(--v4-well)}
html[data-skin="game"] .auth-art::before{filter:drop-shadow(0 0 24px rgba(216,166,72,.25))}
html[data-skin="game"] .auth-art h1{text-shadow:0 2px 0 rgba(0,0,0,.6)}
/* wp-Z7 pool card and strip: night ink art */
html[data-skin="game"] :is(.pool-crest,.pool-crest-sm){background-image:url(../ink4/pool-crest-n.webp)}
html[data-skin="game"] .pool-ic.vault{background-image:url(../ink4/ic-pool-vault-n.webp)}
html[data-skin="game"] .pool-ic.pulse{background-image:url(../ink4/ic-pool-pulse-n.webp)}
html[data-skin="game"] .pool-bar-fill{background-image:url(../ink4/pool-bar-n.webp)}
html[data-skin="game"] .pool-chop{display:none}