/* Zhige Canvas — deep blue glass, illuminated edges and spatial layers. */
:root {
  --zg-bg: #0b1018;
  --zg-panel: #121c29;
  --zg-raised: #182536;
  --zg-border: #2a3b50;
  --zg-text: #e8eef6;
  --zg-muted: #a0b0c4;
  --zg-accent: #7eaff2;
  --zg-primary: #2d65ad;
  color-scheme: dark;
}
body[data-page] { background: radial-gradient(ellipse at 85% 0%, #15396360, transparent 42%), var(--zg-bg) !important; color: var(--zg-text); font-family: "Inter", "Segoe UI", "Microsoft YaHei", sans-serif; }
body[data-page] h1, body[data-page] h2, body[data-page] h3 { letter-spacing: -.025em; font-weight: 600; }
body[data-page] button, body[data-page] [role=button] { text-shadow: none !important; }
button:focus-visible, [role=button]:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--zg-accent) !important; outline-offset: 4px; }
::selection { background: #315b8d; color: white; }

/* Shared navigation and brand controls. */
[data-header] { background: linear-gradient(110deg,#101e32ee,#0a1220dd) !important; backdrop-filter: blur(24px) !important; border-bottom: 1px solid #5797d04d !important; box-shadow: 0 1px 0 #c8e5ff0d inset, 0 8px 35px #02081766; height: 94px !important; }
nav[data-site-nav] { max-width: 1800px; margin-inline: auto; }
nav[data-site-nav] span { font-size: 19px; letter-spacing: .06em; }
nav[data-site-nav] [data-action] { transition: color .2s, background-color .2s; }
nav[data-site-nav] [data-action]:hover { color: #a5c8ff !important; }
nav[data-site-nav] button[data-action=orders] { border: 1px solid #5485b4; border-radius: 7px !important; background: linear-gradient(145deg,#294b6f,#12263f) !important; box-shadow: inset 0 1px 0 #bde7ff55, inset 0 -4px 10px #040f284d, 0 0 20px #378cc122 !important; }
nav[data-site-nav] button[data-action=orders]>span { border-radius: 4px !important; background: transparent !important; box-shadow: none !important; }
nav[data-site-nav] [data-brand-logo] { width: 48px; height: auto; }
nav[data-site-nav] [data-brand-home] { width: 48px; flex-shrink: 0; }
[data-theme-accent] { background-image: linear-gradient(135deg,#285477,#173253) !important; background-color: #203d60 !important; box-shadow: inset 0 1px 0 #b8e9ff33 !important; }
[data-theme-accent].text-transparent { background: none !important; color: #94bbf3 !important; -webkit-text-fill-color: #94bbf3 !important; }
[data-theme-accent][class*=absolute][class*="h-[2px]"] { background: var(--zg-accent) !important; }
[data-sidebar] { background: linear-gradient(150deg,#21334cdd,#0c192cdd); backdrop-filter: blur(20px); border: 1px solid #57779a80; border-radius: 12px; padding: 14px 9px; box-shadow: inset 1px 1px 0 #c2e3ff1f, 8px 15px 30px #0005; }
[data-sidebar]>div>div { opacity: .8; transition: opacity .2s; }
[data-sidebar]>div>div:hover { opacity: 1; }

/* A layered light field and perspective grid give the hero spatial depth. */
body[data-page=home] main>div:first-child { background: radial-gradient(ellipse at 73% 37%,#1b5c9166 0%,transparent 36%), radial-gradient(ellipse at 16% 15%,#214a7b88 0%,transparent 38%), linear-gradient(125deg,#08101e,#0c1d34 58%,#08101b); height: 950px !important; border-bottom: 0; }
body[data-page=home] main>div:first-child>video, body[data-page=home] main>div:first-child>div { display: none !important; }
body[data-page=home] main>div:first-child::before { content:""; position:absolute; inset:25% -30% -55%; background-image:linear-gradient(#4b9ed52e 1px,transparent 1px),linear-gradient(90deg,#4b9ed52e 1px,transparent 1px); background-size:76px 76px; transform:perspective(650px) rotateX(57deg); transform-origin:center 25%; mask-image:radial-gradient(ellipse at 60% 35%,#0009,transparent 62%); pointer-events:none; }
body[data-page=home] main>div:first-child::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 42%,#5dbaff0c 43%,transparent 48%),radial-gradient(ellipse at 72% 48%,#258edd25,transparent 42%),linear-gradient(0deg,var(--zg-bg),transparent 55%); pointer-events:none; }
body[data-page=materials] main>img, body[data-page=inspiration] main>img, body[data-page=orders] main>img { display: none !important; }
[data-hero-wrapper] { padding-top: 225px !important; padding-bottom: 115px !important; }
[data-hero-row] { align-items: center !important; gap: 64px !important; }
[data-hero-copy] { min-width: 0 !important; width: 52%; }
[data-hero-copy] h1 { font-size: 76px !important; line-height: 1.1 !important; font-weight: 600 !important; letter-spacing: -.045em !important; background:linear-gradient(115deg,#fff 8%,#d0e5ff 50%,#77c9f4 100%); background-clip:text; -webkit-background-clip:text; color:transparent !important; filter:drop-shadow(0 4px 22px #489deb36); }
body[data-page=home] [data-hero-copy]>p { font-size: 29px !important; line-height: 1.6 !important; color: #afbed1 !important; width: auto !important; margin-top: 24px !important; white-space: normal; letter-spacing: .1em; }
[data-hero-copy]>div { width: 700px !important; max-width: 100% !important; margin-top: 52px !important; border: 1px solid #5586b282 !important; border-radius: 9px !important; background: linear-gradient(125deg,#2c486344,#11243ee6) !important; backdrop-filter:blur(20px); box-shadow: inset 0 1px 0 #c5e9ff33,0 18px 40px #020a2055,0 0 24px #3694b815 !important; }
[data-hero-copy]>div p { color: #b5c4d8 !important; font-size: 18px !important; }
[data-hero-copy]>div>button { background: linear-gradient(135deg,#3589c6,#2858a5 80%) !important; border: 1px solid #93d9ffb3 !important; border-radius: 8px !important; box-shadow: inset 0 1px 1px #e2f7ff88,inset 0 -4px 12px #0a2a664d,0 6px 22px #197bcc44 !important; animation: none !important; }
[data-hero-copy]>div>button:hover { background: linear-gradient(135deg,#4ba9e2,#386dbe) !important; box-shadow:inset 0 1px 1px #fff9,0 0 30px #39a7f566 !important; }
[data-hero-carousel] { --hero-card-width: 440px !important; width: 650px !important; margin-top: 0 !important; }
[data-hero-carousel] { isolation:isolate; }
[data-hero-carousel]::before { content:""; position:absolute; z-index:-1; inset:-75px -30px -40px; border:1px solid #5ba7e340; border-radius:50%; transform:rotate(-18deg); background:radial-gradient(ellipse,#347fae24,transparent 65%); box-shadow:0 0 65px #2588d72b,inset 0 0 40px #1873be17; pointer-events:none; }
[data-hero-carousel]::after { content:""; position:absolute; z-index:-1; inset:-45px 12px -70px; border:1px solid #77cff020; border-radius:50%; transform:rotate(16deg); pointer-events:none; }
[data-hero-carousel]>button { border-radius: 12px !important; border-color: #7dbee09c !important; box-shadow: 0 26px 50px #0009,0 0 28px #358ccc33,inset 0 1px 0 #e4f4ff66 !important; }
[data-hero-carousel]>button::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid #d4f2ff29; background:linear-gradient(130deg,#dcf5ff15,transparent 45%); pointer-events:none; }
[data-hero-carousel]>button img { filter: saturate(.95) contrast(1.03); }
[data-hero-carousel]>div>button { border-radius: 1px !important; height: 4px !important; }

/* Catalog surfaces and home sections share the same panel treatment. */
[data-order-section] { padding-top: 28px; }
body[data-page=home] h2 { letter-spacing: .025em; }
[data-order-section]>div:first-child, #projects-section>div:first-child { padding-bottom: 20px; border-bottom: 1px solid var(--zg-border); margin-bottom: 26px; }
[data-card], .project-tile { border: 1px solid #52749370 !important; border-radius: 10px !important; background: linear-gradient(140deg,#20364ddd,#101d30f5) !important; box-shadow: inset 0 1px 0 #c6e9ff22,0 12px 28px #0005 !important; transition: border-color .2s, box-shadow .2s, transform .2s; }
[data-card]:hover, .project-tile:hover { border-color: #86bde5 !important; box-shadow: inset 0 1px 0 #c6e9ff44,0 18px 35px #0007,0 0 22px #2685b52b !important; transform:translateY(-3px); }
[data-card] img, .project-tile img { border-radius: 4px !important; }
.project-tile .plus { color: var(--zg-accent); }
.project-tile small, .static-empty, .static-note, .static-filter-count { color: var(--zg-muted) !important; }
body[data-page=home] section:not(:has([data-hero-copy])) button[data-action=create], body[data-page=home] button[data-action=membership] { background: linear-gradient(135deg,#347ea8,#233e75) !important; border: 1px solid #71afcf !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 #d4f3ff66,0 8px 24px #1c639344 !important; }
body[data-page=home] section:not(:first-child) button[data-action=create] span { background: transparent !important; box-shadow: none !important; }
body[data-page=home] section .pointer-events-none[class*="blur-"]:not([class*="backdrop-blur-"]) { opacity: .15 !important; }
body[data-page=home] section:last-child { border-top: 1px solid var(--zg-border); padding-top: 65px; }

/* Forms, dialogs, plan cards and the creation workspace. */
input:not([type=range]):not([type=file]), select, .static-dialog textarea { background: #0c1726 !important; border-color: #3a4f6b !important; color: var(--zg-text) !important; border-radius: 5px !important; }
input::placeholder, textarea::placeholder { color: #8498b2; }
.static-dialog { background: linear-gradient(145deg,#253c53f5,#0e1b2cf5); backdrop-filter:blur(24px); border-color: #6596b580; border-radius: 12px; box-shadow: inset 0 1px 0 #d2eeff33,0 30px 100px #000a,0 0 60px #3279a622; }
.static-dialog p { color: #abbdd2; }
.static-dialog::backdrop { background: #030b16b8; backdrop-filter: blur(5px); }
.ui-button { background: #1a2a40; border-color: #405878; border-radius: 5px; }
.ui-button.primary { background: linear-gradient(135deg,#388bba,#2954a1); color: #f4f8ff; border-color: #7ac4f0; box-shadow:inset 0 1px 0 #d7f4ff55,0 5px 15px #2476b233; }
.static-toast { background: #17273c; border-color: #638ec4; border-radius: 5px; }
.static-selected { color: #a2c8ff !important; border-color: #7eaff2 !important; }
.static-plan { outline-color: var(--zg-accent); }
body[data-page=membership] [role=dialog] { background: #111b29 !important; border: 1px solid #344b69 !important; border-radius: 10px !important; }
body[data-page=workspace] [role=application] { background-color: #0b1320 !important; }
.editor-toolbar, .local-node { background: linear-gradient(145deg,#233950,#111f33); border-color: #507b9a; border-radius: 9px; box-shadow:inset 0 1px 0 #c9e9ff29,0 12px 35px #0006; }
.local-node header, .local-node footer { border-color: #2e415a; }
.node-image { background: #0c1725; color: #9fb1c9; }
.node-run { border-color: #557fab; color: #b0d2ff; }
body[data-page=workspace] input[type=range] { accent-color: #7eaff2; }
.canvas-light [role=application] { background-color: #e7edf5 !important; }
.canvas-light .local-node { color: #17283e; background: #f7faff; }
.canvas-light .node-image { color: #425774; background: #e7edf5; }

/* Editorial order cards: clean covers, readable budgets, separate timelines. */
.commission-card, .commission-card[data-card] { display:block; height:100%; overflow:hidden; border:1px solid #59728b55!important; border-radius:14px!important; background:linear-gradient(135deg,#17283c,#101c2c 70%)!important; color:#e9f1fa; text-decoration:none; box-shadow:0 12px 30px #0003,inset 0 1px 0 #dcefff0a!important; transition:border-color .25s,box-shadow .25s,transform .25s; }
.commission-card:hover, .commission-card[data-card]:hover { transform:translateY(-3px); border-color:#78bad5a6!important; background:linear-gradient(135deg,#1c3046,#132136 70%)!important; box-shadow:0 18px 35px #0005,0 0 22px #289acb14!important; }
.commission-cover { position:relative; aspect-ratio:16/8.5; overflow:hidden; background:#0c1522; }
.commission-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#06101f22,transparent 42%,#0b192d55); pointer-events:none; }
.commission-cover>img, .commission-card[data-card] .commission-cover>img { display:block; width:100%; height:100%; object-fit:cover; border-radius:0!important; transition:transform .55s; }
.commission-card:hover .commission-cover>img { transform:scale(1.035); }
.commission-status { position:absolute; z-index:1; top:18px; right:18px; display:flex; align-items:center; gap:9px; padding:10px 16px; font-size:18px; font-weight:700; line-height:23px; letter-spacing:.04em; color:#e0fff4; background:linear-gradient(135deg,#248c716b,#0b493d80); border:1px solid #a2ffe09c; border-radius:7px; backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%); box-shadow:0 5px 18px #001d2766,0 0 16px #47e2c026,inset 0 1px 0 #d2fff333; animation:commission-status-glow 3.6s ease-in-out infinite; }
.commission-status i { position:relative; width:7px; height:7px; flex-shrink:0; border-radius:50%; background:#a0ffdd; box-shadow:0 0 7px #8affd880; }
.commission-status i::after { content:""; position:absolute; inset:-4px; border:1px solid #a0ffddaa; border-radius:50%; animation:commission-status-pulse 2.4s ease-out infinite; }
@keyframes commission-status-glow { 0%,100% { box-shadow:0 5px 18px #001d2766,0 0 12px #47e2c026,inset 0 1px 0 #d2fff333; } 50% { box-shadow:0 5px 18px #001d2766,0 0 24px #47e2c05c,inset 0 1px 0 #d2fff355; } }
@keyframes commission-status-pulse { 0% { transform:scale(.55); opacity:.85; } 80%,100% { transform:scale(1.4); opacity:0; } }
.commission-cover-hint { position:absolute; z-index:1; bottom:18px; right:18px; font-size:13px; color:#fff; opacity:0; transform:translateY(4px); transition:opacity .2s,transform .2s; }
.commission-card:hover .commission-cover-hint,.commission-card:focus-visible .commission-cover-hint { opacity:1; transform:none; }
.commission-info { padding:22px 24px 18px; border-top:1px solid #90b9dd1f; }
.commission-category { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:15px; line-height:20px; letter-spacing:.08em; color:#8ba5bf; }
.commission-quality { padding:1px 8px; border:1px solid #8ab9da3b; border-radius:4px; color:#a7c8e1; background:#64a9de0d; font-size:13px; }
.commission-info h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:58px; margin:0 0 20px!important; font-size:21px!important; line-height:29px!important; font-weight:600; letter-spacing:0!important; color:#e4edf7; }
.commission-budget { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:20px; padding:18px 20px; border:1px solid #e7b65f5e; border-left:3px solid #f6c567; border-radius:9px; background:radial-gradient(ellipse at 0% 100%,#d79d3c21,transparent 75%),linear-gradient(110deg,#3c322344,#101c2d99); box-shadow:inset 0 1px 0 #ffe3a611,0 5px 16px #0002; }
.commission-budget>div { min-width:0; }
.commission-label { font-size:16px; font-weight:500; letter-spacing:.04em; color:#e5c795; }
.commission-budget p { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; margin:6px 0 0; line-height:1.1; }
.commission-currency { font-size:26px; font-weight:600; color:#ffce75; }
.commission-budget strong { font-size:56px; font-weight:750; letter-spacing:-.035em; color:#ffdc8b; text-shadow:0 2px 16px #efae3333; font-variant-numeric:tabular-nums; }
.commission-unit { font-size:16px; color:#c6b593; margin-left:4px; white-space:nowrap; }
.commission-arrow { display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex-shrink:0; font-size:25px; border:1px solid #f4ca7866; border-radius:50%; color:#ffdd9b; background:linear-gradient(140deg,#ca963d33,#44371933); transition:background .2s,border-color .2s; }
.commission-card:hover .commission-arrow { background:#be8a3e55; border-color:#ffe1a3; }
.commission-card:hover .commission-budget { border-color:#f1c879a6; box-shadow:inset 0 1px 0 #ffe3a622,0 0 24px #e8ad3212; }
.commission-period { display:flex; align-items:center; gap:8px; border-top:1px solid #839bb326; padding-top:14px; color:#9fb5cc; font-size:15px; line-height:20px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.commission-period>span:first-child { margin-right:auto; color:#7f98b3; }
.commission-date-separator { color:#5e7791; }
[data-order-track] { padding-top:4px; padding-bottom:14px; }
@media(max-width:700px) {
 .commission-info { padding:16px; }
 .commission-info h3 { font-size:16px!important; line-height:24px!important; min-height:48px; margin-bottom:16px!important; }
 .commission-budget { padding:14px 12px; gap:8px; }
 .commission-budget strong { font-size:40px; }
 .commission-currency { font-size:21px; }
 .commission-label { font-size:13px; }
 .commission-unit { font-size:12px; }
 .commission-period { flex-wrap:wrap; gap:5px; font-size:11px; }
 .commission-period>span:first-child { flex-basis:100%; margin-bottom:2px; }
 .commission-status { top:12px; right:12px; padding:6px 10px; font-size:13px; line-height:18px; }
 .commission-category { font-size:10px; }
 .commission-arrow { width:30px; height:30px; font-size:18px; }
 .commission-card[data-card] .commission-info { padding:12px; }
 .commission-card[data-card] .commission-budget { flex-wrap:wrap; padding:12px 8px; }
 .commission-card[data-card] .commission-budget strong { font-size:32px; }
 .commission-card[data-card] .commission-currency { font-size:17px; }
 .commission-card[data-card] .commission-arrow { display:none; }
}

@media(max-width:700px) {
  [data-header] { height: 116px !important; padding: 12px 20px !important; background: #0b121efa !important; }
  nav[data-site-nav] [data-brand-logo], nav[data-site-nav] [data-brand-home] { width: 40px !important; }
  nav[data-site-nav] span { letter-spacing: .02em; }
  [data-hero-wrapper] { padding-top: 165px !important; padding-bottom: 50px !important; }
  [data-hero-row] { gap: 45px !important; }
  [data-hero-copy] { width: 100% !important; }
  [data-hero-copy] h1 { font-size: 43px !important; }
  body[data-page=home] [data-hero-copy]>p { font-size: 18px !important; letter-spacing: .04em; margin-top: 18px !important; }
  [data-hero-copy]>div { width: 100% !important; margin-top: 28px !important; }
  [data-hero-copy]>div p { font-size: 11px !important; }
  [data-hero-copy]>div>div { padding-right: 105px !important; }
  [data-hero-carousel] { --hero-card-width: 250px !important; width: 100% !important; height: 180px !important; }
  [data-hero-carousel]::before { inset:-25px 2px -12px; }
  [data-hero-carousel]::after { inset:-12px 12px -30px; }
  body[data-page=home] main>div:first-child { height: 640px !important; }
  [data-order-section]>div:first-child, #projects-section>div:first-child { padding-bottom: 12px; margin-bottom: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}