/* Scope: full selected visual language, while the existing information architecture,
   main layout, forms, semantic statuses, right-bottom controls and business handlers
   remain in their original positions and keep their original behavior.
   Skin-settings UI and previous identity/date repair are independently approved. */
:root[data-skin] body{--skin-canvas:#e6fbf1;--skin-hit:#69e1b0;--skin-selection:#b9f7dd;--skin-spark:#ed1689;--skin-focus:#ba1269;background:var(--skin-canvas) url('skins/mint-chrome.webp') center/cover fixed no-repeat!important;}
:root[data-skin=ivory] body{--skin-canvas:#fffdf1;--skin-hit:#ffdc38;--skin-selection:#fffefa;--skin-spark:#ed1736;--skin-focus:#b51c36;background-image:url('skins/ivory-chrome.webp')!important;}
:root[data-skin=cobalt] body{--skin-canvas:#edf6ff;--skin-hit:#70c8ff;--skin-selection:#fff;--skin-spark:#ffdc30;--skin-focus:#1266ca;background-image:url('skins/cobalt-chrome.webp')!important;}
:root[data-skin] body[data-theme=opal_obsidian],:root[data-skin] body.wb-titanium.theme-opal-obsidian{--skin-canvas:#192922;background-blend-mode:soft-light!important;}
:root[data-skin=ivory] body[data-theme=opal_obsidian],:root[data-skin=ivory] body.wb-titanium.theme-opal-obsidian{--skin-canvas:#29271f;}
:root[data-skin=cobalt] body[data-theme=opal_obsidian],:root[data-skin=cobalt] body.wb-titanium.theme-opal-obsidian{--skin-canvas:#172537;}
:root[data-skin] body.site-touch-layout .desktop-side-nav{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;}
:root[data-skin] body.site-touch-layout .desktop-side-brand{position:relative;isolation:isolate;background:transparent!important;color:#fff!important;border:0!important;box-shadow:none!important;}
:root[data-skin] body.site-touch-layout .desktop-side-brand::before{content:'';position:absolute;inset:-3px -3px;z-index:-1;pointer-events:none;background:#101215;clip-path:polygon(2% 13%,83% 0,81% 12%,100% 3%,94% 90%,0 100%);}
:root[data-skin] body.site-touch-layout .desktop-side-links a{position:relative;isolation:isolate;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#fff!important;clip-path:none!important;overflow:visible!important;font-weight:900!important;transform:none!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a::before{content:'';position:absolute;inset:0;z-index:-1;background:#101215!important;pointer-events:none;}
:root[data-skin] body.site-touch-layout .desktop-side-links a::after{content:'';position:absolute;inset:5px -5px -5px 5px;z-index:-2;background:var(--skin-hit)!important;pointer-events:none;}
:root[data-skin] body.site-touch-layout .desktop-side-links a.active{color:#101215!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a.active img{filter:brightness(0)!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a:not(.active) img{filter:brightness(0) invert(1)!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a span{font-style:normal!important;text-shadow:none!important;filter:none!important;transform:none!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a:focus-visible{outline:3px solid var(--skin-focus)!important;outline-offset:8px!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a:not(.active):hover::before{background:#303137!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a:active{transform:none!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a:active::before{translate:1px 1px;}
:root[data-skin] body.site-touch-layout .desktop-side-links a.active::after{animation:skin-selection-arrive 180ms ease-out both;}
@keyframes skin-selection-arrive{from{opacity:.3;translate:-7px 0}to{opacity:1;translate:0 0}}
@media(min-width:1180px){
 :root[data-skin] body.site-touch-layout .desktop-side-brand{font-size:27px!important;line-height:1.25!important;min-height:70px!important;padding:12px 9px!important;margin-bottom:34px!important;border:0!important;box-shadow:5px 5px 0 var(--skin-hit)!important;}
 :root[data-skin] body.site-touch-layout .desktop-side-brand img{width:38px;height:38px;border-radius:8px;}
 :root[data-skin] body.site-touch-layout .desktop-side-links{gap:24px!important;padding:7px 4px!important;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a{grid-template-columns:30px minmax(0,1fr)!important;gap:10px!important;padding:16px 10px!important;min-height:88px!important;font-size:23px!important;line-height:1.25!important;letter-spacing:-.6px;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a img{width:29px!important;height:29px!important;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a span{font-weight:950!important;white-space:nowrap;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a::before{inset:-3px -4px!important;clip-path:polygon(5% 8%,72% 1%,69% 9%,100% 0,91% 83%,94% 89%,0 100%,3% 47%,0 41%)!important;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a:nth-child(2n)::before{clip-path:polygon(0 15%,96% 0,93% 19%,100% 16%,90% 89%,4% 100%,5% 79%,0 84%)!important;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a::after{inset:6px -7px -7px 1px!important;clip-path:polygon(0 7%,100% 0,89% 91%,96% 88%,90% 100%,2% 100%)!important;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a.active{outline:0!important;color:#111!important;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a.active::before{background:var(--skin-selection)!important;filter:drop-shadow(3px 0 #111) drop-shadow(-3px 0 #111) drop-shadow(0 3px #111) drop-shadow(0 -3px #111);}
 :root[data-skin] body.site-touch-layout .desktop-side-links a.active::after{background:var(--skin-spark)!important;inset:5px -10px -9px 0!important;clip-path:polygon(2% 6%,100% 0,94% 94%,0 100%)!important;}
 :root[data-skin] body.site-touch-layout .desktop-side-links a.active:hover::before{background:var(--skin-selection)!important;}
}
.skin-settings .section-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}.skin-settings h2{display:flex;align-items:center;gap:10px}.skin-settings h2 img{width:30px;height:30px;background:transparent;border:0;box-shadow:none}.skin-settings>p{line-height:1.65}
.skin-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0}.skin-choice{min-width:0;min-height:64px;text-align:left;display:flex;flex-direction:column;gap:9px;padding:10px!important;border:2px solid var(--st-line)!important;background:var(--st-surface)!important;color:var(--st-ink)!important;border-radius:4px;cursor:pointer;touch-action:manipulation}.skin-choice img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff}.skin-choice strong{font-size:19px}.skin-choice span{font-size:13px;color:var(--st-muted)!important}.skin-choice[aria-pressed=true]{outline:4px solid var(--skin-punch);outline-offset:3px}.skin-choice[aria-pressed=true] strong::after{content:' · 已选预览';font-size:13px}.skin-actions{display:flex;gap:14px;flex-wrap:wrap}.skin-actions button{min-height:56px!important;touch-action:manipulation}.skin-settings [hidden]{display:none!important}
:root[data-skin] body.theme-opal-obsidian .skin-settings h2 img{filter:brightness(0) invert(1)}

:root[data-skin] body .skin-settings :is(h2,strong){color:var(--st-ink)!important;}
:root[data-skin] body .skin-settings .muted{color:var(--st-muted)!important;}
.skin-choice[aria-pressed=true]{outline:4px solid var(--skin-focus)!important;outline-offset:3px!important;}
@media(max-width:760px){.skin-choice-grid{grid-template-columns:1fr}.skin-choice{display:grid;grid-template-columns:minmax(96px,35%) 1fr;align-items:center}.skin-choice img{grid-row:span 2}.skin-choice strong{font-size:17px}.skin-choice span{font-size:12px}}
@media(prefers-reduced-motion:reduce){:root[data-skin] body.site-touch-layout .desktop-side-links a,:root[data-skin] body.site-touch-layout .desktop-side-links a::before,:root[data-skin] body.site-touch-layout .desktop-side-links a::after{animation:none!important;transition:none!important;translate:none!important;}}
@media(forced-colors:active){:root[data-skin] body{background-image:none!important}:root[data-skin] body.site-touch-layout .desktop-side-links a{color:ButtonText!important;background:ButtonFace!important;border:2px solid ButtonText!important}:root[data-skin] body.site-touch-layout .desktop-side-links a::before,:root[data-skin] body.site-touch-layout .desktop-side-links a::after{display:none!important}:root[data-skin] body.site-touch-layout .desktop-side-links a.active,.skin-choice[aria-pressed=true]{outline:3px solid Highlight!important}}
@media print{:root[data-skin] body{background:#fff!important;background-image:none!important}.skin-settings{display:none}}
/* Full visual language on the existing controls, without moving/replacing them. */
:root[data-skin] body{--skin-action:#ffda38;--skin-action-ink:#101215;}
:root[data-skin=ivory] body{--skin-action:#ed1736;--skin-action-ink:#fff;}
:root[data-skin] body :is(.panel,.stat-card,.quick-card,.today-card,.home-context-card,.class-card){border-radius:4px!important;}
:root[data-skin] body :is(.topbar h1,.wb-heading h1){border-radius:0!important;box-shadow:5px 4px 0 var(--skin-hit)!important;text-shadow:none!important;filter:none!important;transform:none!important;}
:root[data-skin] body :is(.console-menu,.wb-sheet){border-radius:3px!important;box-shadow:6px 6px 0 var(--skin-spark)!important;}
:root[data-skin] body :is(.console-menu,.wb-sheet)::backdrop{backdrop-filter:none!important;}
:root[data-skin] body :is(.console-menu-grid,.wb-menu-grid) :is(.console-key,.wb-key){position:relative;isolation:isolate;background:transparent!important;color:#fff!important;border:0!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important;}
:root[data-skin] body :is(.console-menu-grid,.wb-menu-grid) :is(.console-key,.wb-key)::before{content:'';position:absolute;inset:0;z-index:-1;background:#101215;clip-path:polygon(4% 7%,82% 0,80% 9%,100% 3%,94% 90%,0 100%,2% 54%,0 51%);pointer-events:none;}
:root[data-skin] body :is(.console-menu-grid,.wb-menu-grid) :is(.console-key,.wb-key)::after{content:'';position:absolute;inset:4px -4px -4px 4px;z-index:-2;background:var(--skin-hit);clip-path:polygon(2% 5%,100% 0,93% 94%,0 100%);pointer-events:none;}
:root[data-skin] body :is(.console-menu-grid,.wb-menu-grid) :is(.console-key,.wb-key) :is(span,strong){color:#fff!important;filter:none!important;text-shadow:none!important;transform:none!important;}
:root[data-skin] body :is(.console-menu-grid,.wb-menu-grid) :is(.console-key,.wb-key) img{filter:brightness(0) invert(1)!important;background:transparent!important;}
:root[data-skin] body :is(.console-menu,.wb-sheet)[open] :is(.console-key,.wb-key)::after{animation:skin-selection-arrive 180ms ease-out both;}
/* Save's slanted silhouette is a separate layer. Rectangular target, label,
   disabled/pending state and original submit handler are preserved. */
:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn),:root[data-skin] body.wb-titanium .wb-dock .wb-primary{position:relative;isolation:isolate;background:transparent!important;color:var(--skin-action-ink)!important;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;}
:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn)::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--skin-action)!important;border:3px solid #101215;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);pointer-events:none;}
:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn)::after{content:'';position:absolute;inset:4px -5px -5px 4px;z-index:-2;background:#101215;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);pointer-events:none;}
:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn) :is(span,strong){color:var(--skin-action-ink)!important;}
:root[data-skin=ivory] body :is(.primary-btn,.wb-primary,.classroom-save-btn) img{filter:brightness(0) invert(1)!important;}
:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn):active:not(:disabled)::after{inset:1px -2px -2px 1px;}
:root[data-skin] body :is(.homework-status-subject-row label,.homework-custom-subject-tab):has(input:checked)>span{background:#ffda38!important;color:#101215!important;}
:root[data-skin] body .wb-heading strong{background:#101215!important;color:#fff!important;border-radius:0!important;box-shadow:4px 4px 0 var(--skin-hit)!important;}
@media(prefers-reduced-motion:reduce){:root[data-skin] body :is(.console-menu,.wb-sheet)[open] :is(.console-key,.wb-key)::after{animation:none!important;translate:none!important;}}
@media(forced-colors:active){:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn,.console-menu-grid .console-key,.wb-menu-grid .wb-key){background:ButtonFace!important;color:ButtonText!important;border:2px solid ButtonText!important}:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn,.console-menu-grid .console-key,.wb-menu-grid .wb-key)::before,:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn,.console-menu-grid .console-key,.wb-menu-grid .wb-key)::after{display:none!important}:root[data-skin] body :is(.primary-btn,.wb-primary,.classroom-save-btn,.console-menu-grid .console-key,.wb-menu-grid .wb-key) :is(span,strong){color:ButtonText!important;}}

/* Active navigation still exposes keyboard focus, independently of selection. */
:root[data-skin] body.site-touch-layout .desktop-side-links a.active:focus-visible{outline:3px solid var(--skin-focus)!important;outline-offset:8px!important;}
@media(forced-colors:active){:root[data-skin] body.site-touch-layout .desktop-side-links a.active:focus-visible{outline-color:Highlight!important;}}


/* Selected shape is the complete control silhouette, never a star beside the
   label. No geometry changes the anchor's box, layout slot or hit rectangle. */
:root[data-skin] body.site-touch-layout .desktop-side-links a{--skin-nav-face:polygon(3% 10%,96% 0,94% 22%,99% 18%,96% 40%,100% 48%,96% 62%,99% 82%,94% 78%,94% 96%,0 100%,2% 55%,0 29%);--skin-nav-cut:polygon(0 6%,95% 0,94% 12%,100% 8%,97% 32%,100% 43%,96% 57%,100% 80%,95% 75%,98% 98%,0 100%,2% 50%);}
:root[data-skin] body.site-touch-layout .desktop-side-links a > :is(span,img){position:relative!important;z-index:3!important;transform:none!important;translate:none!important;rotate:none!important;clip-path:none!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a > span{min-width:0;box-sizing:border-box;padding-inline:1px 8px;text-shadow:none!important;filter:none!important;}
:root[data-skin] body.site-touch-layout .desktop-side-links a.active::before{inset:-3px -4px!important;background:var(--skin-selection)!important;clip-path:var(--skin-nav-face)!important;z-index:1;pointer-events:none;filter:drop-shadow(2px 0 #101215) drop-shadow(-2px 0 #101215) drop-shadow(0 2px #101215) drop-shadow(0 -2px #101215);}
:root[data-skin] body.site-touch-layout .desktop-side-links a.active::after{inset:-5px -7px -7px -5px!important;background:#ed1736!important;clip-path:var(--skin-nav-cut)!important;z-index:0;pointer-events:none;filter:drop-shadow(3px 3px 0 var(--skin-hit));animation:none;}
:root[data-skin] body.site-touch-layout .desktop-side-links a.active.skin-nav-ack::before{animation:skin-nav-face-open 170ms ease-out both;}
:root[data-skin] body.site-touch-layout .desktop-side-links a.active.skin-nav-ack::after{animation:skin-nav-cut-open 210ms ease-out both;}
@keyframes skin-nav-face-open{0%{scale:.97 1;translate:-2px 0}55%{scale:1.025 1.02;translate:0 0}100%{scale:1;translate:0 0}}
@keyframes skin-nav-cut-open{0%{scale:.94 .92;translate:-4px 0;opacity:.6}55%{scale:1.035 1.06;translate:0 0;opacity:1}100%{scale:1;translate:0 0;opacity:1}}
@media(prefers-reduced-motion:reduce){:root[data-skin] body.site-touch-layout .desktop-side-links a.active.skin-nav-ack::before,:root[data-skin] body.site-touch-layout .desktop-side-links a.active.skin-nav-ack::after{animation:none!important;scale:1!important;translate:none!important;opacity:1!important;}}
/* Brand/title silhouettes are the backing of the text, not a rectangular badge
   plus an offset decoration. The text and its existing box never tilt or move. */
:root[data-skin] body :is(.desktop-side-brand,.wb-heading strong,.topbar h1,.wb-heading h1){position:relative!important;isolation:isolate;background:transparent!important;border-radius:0!important;box-shadow:none!important;color:#fff!important;clip-path:none!important;text-shadow:none!important;transform:none!important;}
:root[data-skin] body :is(.desktop-side-brand,.wb-heading strong,.topbar h1,.wb-heading h1)::before{content:'';position:absolute;inset:-2px -4px;z-index:-1;background:#101215!important;clip-path:polygon(2% 11%,23% 3%,24% 0,56% 5%,75% 0,73% 10%,100% 2%,96% 88%,73% 97%,55% 93%,24% 100%,0 94%);pointer-events:none;}
:root[data-skin] body :is(.desktop-side-brand,.wb-heading strong,.topbar h1,.wb-heading h1)::after{content:'';position:absolute;inset:3px -7px -5px 1px;z-index:-2;background:var(--skin-hit)!important;clip-path:polygon(3% 4%,100% 0,95% 94%,77% 100%,40% 94%,0 100%);pointer-events:none;}
:root[data-skin] body .desktop-side-brand > :is(span,img){position:relative!important;z-index:2!important;}
@media(forced-colors:active){:root[data-skin] body :is(.desktop-side-brand,.wb-heading strong,.topbar h1,.wb-heading h1){background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important}:root[data-skin] body :is(.desktop-side-brand,.wb-heading strong,.topbar h1,.wb-heading h1)::before,:root[data-skin] body :is(.desktop-side-brand,.wb-heading strong,.topbar h1,.wb-heading h1)::after{display:none!important}:root[data-skin] body.site-touch-layout .desktop-side-links a.active{background:ButtonFace!important;color:ButtonText!important;}}

/* HEADER CONTEXT PATCH START */
/* Unified header context only: preserve class/name/date values and business controls.
   Explicit foreground/backdrop pairs apply equally to mint, ivory and cobalt. */
:root[data-skin] body .wb-heading-context,
:root[data-skin] body.site-touch-layout .topbar-user-context{
 --header-context-bg:#fff;--header-context-ink:#101215;
 display:flex!important;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px!important;
 background:var(--header-context-bg)!important;color:var(--header-context-ink)!important;
 border:2px solid var(--header-context-ink)!important;border-radius:5px;padding:7px 12px;min-width:0;max-width:42%;flex:0 1 auto;
}
:root[data-skin] body.wb-titanium .wb-heading-context{margin-left:auto!important;}
:root[data-skin] body[data-theme=opal_obsidian] .wb-heading-context,
:root[data-skin] body.wb-titanium.theme-opal-obsidian .wb-heading-context,
:root[data-skin] body.site-touch-layout[data-theme=opal_obsidian] .topbar-user-context{
 --header-context-bg:#101215;--header-context-ink:#fff;
}
:root[data-skin] body.wb-titanium .wb-heading-context .wb-heading-class,
:root[data-skin] body.site-touch-layout .topbar-user-context .teacher-meta{
 display:block!important;border:0!important;margin:0!important;padding:0!important;
 background:transparent!important;color:var(--header-context-ink)!important;
 font-size:16px!important;line-height:1.25!important;font-weight:650!important;
 overflow-wrap:anywhere;text-align:right;letter-spacing:0!important;
}
:root[data-skin] body.wb-titanium .wb-heading-context time,
:root[data-skin] body.site-touch-layout .topbar-user-context .topbar-date{
 display:block!important;background:transparent!important;color:var(--header-context-ink)!important;
 font-size:18px!important;line-height:1.2!important;font-weight:800!important;
 font-variant-numeric:tabular-nums;white-space:nowrap;margin:0!important;max-width:none!important;
}
:root[data-skin] body.site-touch-layout .topbar{
 min-height:88px!important;padding:0 0 8px!important;margin-bottom:16px!important;align-items:center!important;gap:16px!important;
}
:root[data-skin] body.site-touch-layout .topbar>div:first-child{min-width:0;}
/* These desktop record forms already expose fixed, editable class/date controls.
   Keep the read-only context group out of their reserved top-right area. */
@media(min-width:1180px){
 :root[data-skin] body:has(.homework-paint-ready,.discipline-paint-ready) .wb-heading-context{display:none!important;}
 :root[data-skin] body.site-touch-layout:has(.homework-paint-ready,.discipline-paint-ready) .topbar-user-context{display:none!important;}
}
@media(max-width:760px){
 :root[data-skin] body.wb-titanium .wb-heading{gap:8px!important;}
 :root[data-skin] body.wb-titanium .wb-heading-context{padding:5px 7px;max-width:44%;}
 :root[data-skin] body.wb-titanium .wb-heading-context .wb-heading-class{font-size:12px!important;}
 :root[data-skin] body.wb-titanium .wb-heading-context time{font-size:12px!important;}
}
@media(max-width:600px){
 :root[data-skin] body.site-touch-layout .topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important;min-height:76px!important;}
 :root[data-skin] body.site-touch-layout .topbar h1{font-size:clamp(22px,6.2vw,30px)!important;padding:4px 6px!important;white-space:normal;}
 :root[data-skin] body.site-touch-layout .topbar-user-context{max-width:144px;padding:6px 8px;}
 :root[data-skin] body.site-touch-layout .topbar-user-context .teacher-meta{font-size:12px!important;}
 :root[data-skin] body.site-touch-layout .topbar-user-context .topbar-date{font-size:16px!important;}
}

@media(max-width:600px){
 :root[data-skin] body.wb-titanium .wb-heading-brand strong{width:clamp(66px,19vw,104px)!important;height:44px!important;font-size:20px!important;}
 :root[data-skin] body.wb-titanium .wb-heading h1{font-size:clamp(20px,5vw,30px)!important;}
}

/* HEADER CONTEXT PATCH END */