/* 2026-10-30 科技风 skin. Loaded last and scoped to html[data-skin="tech"] (set on <html> in index.html).
   Dark console surfaces, a faint grid and accent glows behind the page, neon accent text and buttons, HUD corners on the hero.
   Layout, sizes and copy are untouched, so the first-screen and ≥12px rules still hold.
   The admin accent still drives every glow and tint (four palettes and custom colours keep their own hue);
   the admin background colour is not used by this skin. Remove data-skin from <html> to get the light design back. */

/* 1. Source colours, computed on <html> where space-theme.js writes the palette accent inline */
html[data-skin="tech"]{
 color-scheme:dark;
 --t-base:color-mix(in srgb,var(--space-accent,#327f9b) 9%,#060b10);
 --t-deep:color-mix(in srgb,var(--space-accent,#327f9b) 12%,#050a0e);
 --t-panel:color-mix(in srgb,var(--space-accent,#327f9b) 13%,#0b141c);
 --t-raise:color-mix(in srgb,var(--space-accent,#327f9b) 19%,#0f1a24);
 --t-glow:color-mix(in srgb,var(--space-accent,#327f9b) 50%,#eafcff);
 --t-ink:#e8f0f5;
 --t-muted:color-mix(in srgb,#e8f0f5 66%,var(--space-accent,#327f9b));
 --t-line:color-mix(in srgb,var(--t-glow),transparent 84%);
 --t-line-strong:color-mix(in srgb,var(--t-glow),transparent 58%);
 --t-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
 scrollbar-color:color-mix(in srgb,var(--t-glow),transparent 55%) transparent;
}
/* where supported, a bright and more saturated version of the accent hue reads as neon on the dark surfaces */
@supports (color:oklch(from red l c h)){html[data-skin="tech"]{--t-glow:oklch(from var(--space-accent,#327f9b) .84 calc(c * 1.35) h)}}

/* 2. Remap the variables every existing rule already uses. Set on <body> so <html> keeps the original accent for step 1. */
html[data-skin="tech"] body{
 --space-accent:var(--t-glow);
 --space-bg:var(--t-base);
 --space-panel:var(--t-panel);
 --space-ink:var(--t-ink);
 --space-muted:var(--t-muted);
 --space-on-accent:#06141a;
 --polish-strong:var(--t-glow);
 --polish-muted:var(--t-muted);
 --h-line:var(--t-line);
 --h-line-strong:var(--t-line-strong);
 --h-tint:color-mix(in srgb,var(--t-glow),transparent 94%);
 --h-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 36px -24px #000;
 --h-shadow-hover:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px color-mix(in srgb,var(--t-glow),transparent 82%),0 18px 44px -22px color-mix(in srgb,var(--t-glow),transparent 55%);
 --bg:var(--t-base);--panel:var(--t-panel);--line:var(--t-line);--text:var(--t-ink);--muted:var(--t-muted);--green:var(--t-glow);
 background:var(--t-base);
}

/* 3. Page backdrop: soft accent glows plus a grid that fades out, fixed behind everything */
html[data-skin="tech"] body::before,html[data-skin="tech"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
html[data-skin="tech"] body::before{background:radial-gradient(1000px 560px at 82% -12%,color-mix(in srgb,var(--t-glow),transparent 86%),transparent 70%),radial-gradient(760px 620px at -8% 108%,color-mix(in srgb,var(--t-glow),transparent 92%),transparent 70%)}
html[data-skin="tech"] body::after{background-image:linear-gradient(var(--t-line) 1px,transparent 1px),linear-gradient(90deg,var(--t-line) 1px,transparent 1px);background-size:44px 44px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 65% 0,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 90% 70% at 65% 0,#000 10%,transparent 75%)}
html[data-skin="tech"] ::selection{background:color-mix(in srgb,var(--t-glow),transparent 20%);color:#06141a}

/* 4. Sidebar and top bar */
html[data-skin="tech"] .sidebar{background:color-mix(in srgb,var(--t-deep),transparent 12%);border-color:var(--t-line);box-shadow:1px 0 0 color-mix(in srgb,var(--t-glow),transparent 93%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-skin="tech"] .brand-mark{border-color:var(--t-line-strong);background:linear-gradient(145deg,var(--t-raise),var(--t-deep));color:var(--t-glow);box-shadow:0 0 20px -6px color-mix(in srgb,var(--t-glow),transparent 30%)}
html[data-skin="tech"] .brand-name{color:var(--t-ink)}
html[data-skin="tech"] .nav-link:hover{background:color-mix(in srgb,var(--t-glow),transparent 93%);color:var(--t-ink)}
html[data-skin="tech"] .nav-link.is-active{position:relative;color:var(--t-glow);background:linear-gradient(90deg,color-mix(in srgb,var(--t-glow),transparent 86%),color-mix(in srgb,var(--t-glow),transparent 97%));border-color:color-mix(in srgb,var(--t-glow),transparent 72%)}
html[data-skin="tech"] .nav-link.is-active::before{content:"";position:absolute;left:-1px;top:11px;bottom:11px;width:2px;border-radius:2px;background:var(--t-glow);box-shadow:0 0 10px var(--t-glow)}
html[data-skin="tech"] :is(.nav-count,.top-date){font-family:var(--t-mono)}
html[data-skin="tech"] :is(.sidebar-note,.footer-sub){color:var(--t-muted)}
html[data-skin="tech"] .sidebar-chat:hover{color:var(--t-glow)}
html[data-skin="tech"] .topbar{background:transparent;border-bottom-color:var(--t-line)}
html[data-skin="tech"] .small-square{border-color:var(--t-glow)}
html[data-skin="tech"] .slash{color:color-mix(in srgb,var(--t-muted),transparent 25%)}
html[data-skin="tech"] :is(.search-button,.motion-button,.top-weather){background:color-mix(in srgb,var(--t-panel),transparent 20%);border-color:var(--t-line)}
html[data-skin="tech"] :is(.search-button,.motion-button,.top-weather):hover{border-color:var(--t-line-strong);color:var(--t-ink)}

/* 5. Hero: console panel with HUD corner marks, accent grid and a glowing ring */
html[data-skin="tech"] .hero{border-color:var(--t-line-strong);background:
 linear-gradient(var(--t-glow),var(--t-glow)) 12px 12px/16px 1.5px no-repeat,linear-gradient(var(--t-glow),var(--t-glow)) 12px 12px/1.5px 16px no-repeat,
 linear-gradient(var(--t-glow),var(--t-glow)) right 12px top 12px/16px 1.5px no-repeat,linear-gradient(var(--t-glow),var(--t-glow)) right 12px top 12px/1.5px 16px no-repeat,
 linear-gradient(var(--t-glow),var(--t-glow)) left 12px bottom 12px/16px 1.5px no-repeat,linear-gradient(var(--t-glow),var(--t-glow)) left 12px bottom 12px/1.5px 16px no-repeat,
 linear-gradient(var(--t-glow),var(--t-glow)) right 12px bottom 12px/16px 1.5px no-repeat,linear-gradient(var(--t-glow),var(--t-glow)) right 12px bottom 12px/1.5px 16px no-repeat,
 radial-gradient(ellipse at 76% 45%,color-mix(in srgb,var(--t-glow),transparent 84%),transparent 62%),
 linear-gradient(118deg,var(--t-panel),var(--t-deep));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -38px color-mix(in srgb,var(--t-glow),transparent 35%)}
html[data-skin="tech"] .hero-grid{background-image:linear-gradient(var(--t-line) 1px,transparent 1px),linear-gradient(90deg,var(--t-line) 1px,transparent 1px)}
html[data-skin="tech"] .art-glow{background:radial-gradient(ellipse,color-mix(in srgb,var(--t-glow),transparent 74%),transparent 70%)}
html[data-skin="tech"] .orbital-letter{color:var(--t-glow);text-shadow:0 0 28px color-mix(in srgb,var(--t-glow),transparent 45%)}
html[data-skin="tech"] .orbital-tag{color:var(--t-muted);background:color-mix(in srgb,var(--t-deep),transparent 30%);border-color:var(--t-line-strong);font-family:var(--t-mono)}
html[data-skin="tech"] .eyebrow{color:var(--t-glow)}
html[data-skin="tech"] .eyebrow-line{background:var(--t-line-strong)}
/* second title line as a glow gradient; the period keeps its solid colour */
html[data-skin="tech"] h1>span:not(.title-first){background:linear-gradient(100deg,var(--t-glow) 10%,color-mix(in srgb,var(--t-glow),#fff 45%) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-skin="tech"] .button-primary{background:var(--t-glow);color:#06141a;box-shadow:0 0 0 1px color-mix(in srgb,var(--t-glow),transparent 45%),0 10px 26px -10px var(--t-glow)}
html[data-skin="tech"] .button-primary:hover{background:color-mix(in srgb,var(--t-glow),#fff 22%)}
html[data-skin="tech"] .status-dot{background:var(--t-glow);box-shadow:0 0 10px var(--t-glow);animation:t-pulse 2.4s ease-out infinite}

/* 6. Section headings: HUD index with a short trace line */
html[data-skin="tech"] .section-index{color:color-mix(in srgb,var(--t-glow),transparent 22%)}
html[data-skin="tech"] .section-index::after{content:"";display:inline-block;width:44px;height:1px;margin-left:10px;vertical-align:middle;background:linear-gradient(90deg,var(--t-glow),transparent)}
html[data-skin="tech"] .section-header h2{color:var(--t-ink)}

/* 7. Work cards: glass panels; each card keeps its own colour on the icon, top edge and hover glow */
html[data-skin="tech"] .work-card{background:linear-gradient(160deg,color-mix(in srgb,var(--t-raise),transparent 8%),color-mix(in srgb,var(--t-panel),transparent 8%));border-color:var(--t-line);box-shadow:inset 0 1px 0 rgba(var(--accent-rgb),.3),0 16px 36px -26px #000}
html[data-skin="tech"] .work-card:hover{background:linear-gradient(160deg,var(--t-raise),var(--t-panel));border-color:rgba(var(--accent-rgb),.55);box-shadow:inset 0 1px 0 rgba(var(--accent-rgb),.6),0 0 0 1px rgba(var(--accent-rgb),.16),0 18px 40px -20px rgba(var(--accent-rgb),.42)}
html[data-skin="tech"] .work-card::before{background:radial-gradient(260px circle at var(--pointer-x,50%) var(--pointer-y,30%),rgba(var(--accent-rgb),.16),transparent 70%)}
html[data-skin="tech"] .work-card .card-icon{color:var(--accent);background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.32);box-shadow:0 0 16px -6px rgba(var(--accent-rgb),.7)}
html[data-skin="tech"] .work-card .card-arrow{color:var(--accent)}
html[data-skin="tech"] .work-card h3{color:var(--t-ink)}
html[data-skin="tech"] .work-card p{color:var(--t-muted)}

/* 8. Little things: weather, study, transfer, chat, about */
html[data-skin="tech"] :is(.weather-card,.study-strip,.chat-card,.about-card,.guest-compose,.message-card){border-color:var(--t-line)}
html[data-skin="tech"] :is(.weather-card,.study-strip,.about-card,.guest-compose,.message-card){background:linear-gradient(160deg,var(--t-raise),var(--t-panel))}
html[data-skin="tech"] .wx-day{background:color-mix(in srgb,var(--t-deep),transparent 15%);border:1px solid var(--t-line)}
html[data-skin="tech"] .wx-day:first-child{background:color-mix(in srgb,var(--t-glow),transparent 88%);border-color:var(--t-line-strong);box-shadow:0 0 18px -8px var(--t-glow)}
html[data-skin="tech"] :is(.wx-temp,.wx-range i,.wx-when small){font-family:var(--t-mono)}
html[data-skin="tech"] .wx-temp{letter-spacing:-2px}
html[data-skin="tech"] .wx-change{color:var(--t-glow);background:color-mix(in srgb,var(--t-glow),transparent 92%);border-color:var(--t-line-strong)}
html[data-skin="tech"] .wx-rain{color:#8cc8f2}
html[data-skin="tech"] :is(.wx-status,.guest-status.is-error){color:#ff9d92}
html[data-skin="tech"] .wx-bar{background:rgba(255,255,255,.08)}
html[data-skin="tech"] .wx-picker{background:var(--t-raise);border-color:var(--t-line-strong);box-shadow:0 18px 40px -10px rgba(0,0,0,.7)}
html[data-skin="tech"] .wx-picker input{background:var(--t-deep);border-color:var(--t-line-strong)}
html[data-skin="tech"] .study-mark{background:var(--t-glow);color:#06141a;box-shadow:0 0 18px -6px var(--t-glow)}
html[data-skin="tech"] .study-cta{color:var(--t-glow)}
html[data-skin="tech"] .transfer-strip{--tx-base:var(--t-deep);--tx-glow:var(--t-glow);--tx-line:color-mix(in srgb,var(--t-glow),transparent 76%);border-color:var(--tx-line);background:radial-gradient(120% 170% at 0 0,color-mix(in srgb,var(--t-glow),transparent 86%),transparent 60%),linear-gradient(115deg,var(--t-deep),color-mix(in srgb,var(--t-deep),#000 30%))}
html[data-skin="tech"] .chat-card{background:radial-gradient(ellipse at 88% 55%,color-mix(in srgb,var(--t-glow),transparent 84%),transparent 62%),linear-gradient(160deg,var(--t-raise),var(--t-panel))}
html[data-skin="tech"] .chat-card h3,html[data-skin="tech"] .about-card h2{color:var(--t-ink)}
html[data-skin="tech"] :is(.chat-card p,.chat-label,.about-card p){color:var(--t-muted)}
html[data-skin="tech"] .chat-cta{color:var(--t-glow)}
/* the green 3D bubbles turn to the palette hue, like the ring */
html[data-skin="tech"] .chat-illustration{filter:hue-rotate(var(--orbit-hue,0deg)) drop-shadow(0 14px 26px rgba(0,0,0,.45))}
html[data-skin="tech"] .about-art{filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
html[data-skin="tech"] .about-tags>span{color:var(--t-glow);background:color-mix(in srgb,var(--t-glow),transparent 92%);border-color:var(--t-line-strong)}

/* 9. Guestbook */
html[data-skin="tech"] .guest-compose :is(input,textarea){background:color-mix(in srgb,var(--t-deep),transparent 10%);border-color:var(--t-line-strong);color:var(--t-ink)}
html[data-skin="tech"] .guest-compose :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--t-muted),transparent 30%)}
html[data-skin="tech"] .guest-compose :is(input,textarea):focus{border-color:var(--t-glow);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-glow),transparent 82%),0 0 18px -6px var(--t-glow)}
html[data-skin="tech"] .guest-submit{background:var(--t-glow);color:#06141a}
html[data-skin="tech"] .guest-submit:hover{background:color-mix(in srgb,var(--t-glow),#fff 22%)}
html[data-skin="tech"] .compose-star{color:var(--t-glow);text-shadow:0 0 16px var(--t-glow)}
html[data-skin="tech"] .guestbook-grid>div:last-child{background:color-mix(in srgb,var(--t-deep),transparent 25%);border-color:var(--t-line)}
html[data-skin="tech"] .guestbook-count{border-color:var(--t-line-strong);color:var(--t-glow)}
html[data-skin="tech"] :is(.guestbook-count,.message-head time,.message-length){font-family:var(--t-mono)}

/* 10. Footer and search dialog */
html[data-skin="tech"] .footer{border-top-color:var(--t-line)}
html[data-skin="tech"] .command-dialog{background:var(--t-panel);border-color:var(--t-line-strong);box-shadow:0 0 0 1px color-mix(in srgb,var(--t-glow),transparent 88%),0 30px 120px -20px #000}
html[data-skin="tech"] .command-dialog::backdrop{background:rgba(3,7,11,.72)}
html[data-skin="tech"] :is(.command-result:hover,.command-result:focus){background:color-mix(in srgb,var(--t-glow),transparent 90%);border-color:var(--t-line-strong)}
html[data-skin="tech"] :is(.command-search>svg,.command-result svg){color:var(--t-glow)}
html[data-skin="tech"] :is(.command-hint,.command-result small,.command-bottom,.command-empty){color:var(--t-muted)}
html[data-skin="tech"] .command-search input{color:var(--t-ink)}
html[data-skin="tech"] .command-search input::placeholder{color:color-mix(in srgb,var(--t-muted),transparent 25%)}

/* 11. Motion: status dots breathe; off when decorative motion is paused or the system asks for less motion */
@keyframes t-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--t-glow),transparent 40%)}70%,100%{box-shadow:0 0 0 7px transparent}}
html[data-skin="tech"] body.motion-paused .status-dot{animation:none}
@media(prefers-reduced-motion:reduce){html[data-skin="tech"] .status-dot{animation:none}}