:root {
  --accent-1: #fcfdfe; --accent-2: #f6faff; --accent-3: #ebf3ff; --accent-4: #dcebff;
  --accent-5: #cae0ff; --accent-6: #b5d3ff; --accent-7: #9cc0ff; --accent-8: #79a7fb;
  --accent-9: #1b63f2; --accent-10: #1757d8; --accent-11: #1c5ddd; --accent-12: #122e65;
  --neutral-1: #fcfcfd; --neutral-2: #f8f9fb; --neutral-3: #f0f0f3; --neutral-4: #e7e8ec;
  --neutral-5: #e0e1e6; --neutral-6: #d8dae0; --neutral-7: #cdced7; --neutral-8: #b9bbc6;
  --neutral-9: #8b8d98; --neutral-10: #81828d; --neutral-11: #62636c; --neutral-12: #1e1f24;
  --color-bg-app: var(--neutral-1); --color-bg-surface: #fff; --color-bg-subtle: var(--neutral-2);
  --color-bg-inverse: var(--neutral-12); --color-text-primary: var(--neutral-12);
  --color-text-secondary: var(--neutral-11); --color-text-inverse: #fff;
  --color-border-subtle: var(--neutral-6); --color-border-default: var(--neutral-7);
  --color-border-strong: var(--neutral-8); --color-primary: var(--accent-9);
  --color-primary-hover: var(--accent-10); --color-link: var(--accent-11);
  --color-link-hover: var(--accent-12); --color-focus-ring: var(--accent-8);
  --color-admin-banner-start: #79a7fb; --color-admin-banner-end: #1b63f2;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;
  --shadow-md: 0 4px 12px rgba(30, 31, 36, .10);
  --duration-fast: 100ms; --duration-normal: 160ms; --duration-slow: 240ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}

@supports (color: oklch(50% 0.1 250)) {
  :root {
    --accent-1: oklch(99.4% .0021 262.1); --accent-2: oklch(98.3% .0096 262.1);
    --accent-3: oklch(96.1% .0204 262.1); --accent-4: oklch(93.6% .0398 262.1);
    --accent-5: oklch(90.4% .0598 262.1); --accent-6: oklch(86.3% .0819 262.1);
    --accent-7: oklch(80.7% .1009 262.1); --accent-8: #79a7fb;
    --accent-9: oklch(55% .2257 262.1); --accent-10: oklch(50.4% .207 262.1);
    --accent-11: oklch(52% .207 262.1); --accent-12: oklch(31.5% .1036 262.1);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg-app); color: var(--color-text-primary); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 14px; line-height: 22px; }
main, footer { width: min(100%, 1440px); margin-inline: auto; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { font: inherit; }
a, button { transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.site-header, .detail-nav { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 56px; padding: var(--space-2) var(--space-6); border-bottom: 1px solid var(--color-border-subtle); background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; font-size: 16px; line-height: 24px; font-weight: 600; }
.wordmark > img { width: 32px; height: auto; flex: 0 0 auto; }
.wordmark-text > span { color: var(--color-link); font-size: 12px; vertical-align: top; }
.site-header nav, .detail-nav nav { display: flex; gap: var(--space-8); font-size: 14px; line-height: 20px; font-weight: 500; }
.site-header nav a:hover, .detail-nav a:hover { color: var(--color-link-hover); }
.header-links { justify-self: end; display: flex; align-items: center; gap: var(--space-3); }
.mobile-works-link { display: none; }
.mobile-menu-toggle, .mobile-menu-close { display: none; }
.mobile-nav-drawer[hidden] { display: none; }
.language-switch { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 2px; margin-left: var(--space-2); white-space: nowrap; font-size: 16px; line-height: 24px; }
.language-switch button { border: 0; padding: 4px 1px; background: transparent; color: var(--neutral-6); font: inherit; cursor: pointer; }
.language-switch button[aria-pressed="true"] { color: var(--color-text-primary); font-weight: 600; }
.language-switch button:hover, .language-switch button:focus-visible { color: var(--color-link); }
.language-switch > span { color: var(--neutral-6); }
.zcool-link { justify-self: end; color: var(--color-link); font-size: 14px; line-height: 20px; font-weight: 500; }
.site-header, .detail-nav { min-height: 72px; padding-inline: max(var(--space-6), calc((100vw - 1440px) / 2 + var(--space-6))); background: rgba(255,255,255,.88); }
.site-header .wordmark > img, .detail-nav .wordmark > img { width: 36px; }
.site-header .zcool-link, .detail-back { justify-self: end; min-height: 38px; padding: 0 var(--space-4); display: inline-flex; align-items: center; border: 1px solid rgba(27,99,242,.2); border-radius: 20px; background: rgba(255,255,255,.68); color: var(--color-link); font-size: 13px; font-weight: 500; white-space: nowrap; }
.site-header .zcool-link:hover, .detail-back:hover { border-color: rgba(27,99,242,.4); background: var(--accent-3); color: var(--color-link-hover); }
.site-header .brand-icon-link { width: 36px; height: 36px; min-height: 36px; padding: 7px; justify-content: center; }
.site-header .brand-icon-link img { display: block; width: 20px; height: 20px; object-fit: contain; }

.hero { position: relative; width: 100vw; min-height: 680px; margin-left: calc(50% - 50vw); overflow: hidden; padding: 100px max(var(--space-6), calc((100vw - 1440px) / 2 + var(--space-6))) 40px; border-bottom: 1px solid rgba(98,99,108,.16); background-color: #f7faff; }
.hero-visual { position: absolute; z-index: 0; top: calc(50% + 60px); left: -100px; width: auto; height: calc(100% + 80px); max-width: none; transform: translateY(-50%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 44%); }
.hero-copy { position: relative; z-index: 1; display: flex; width: min(50%, 696px); min-height: 540px; flex-direction: column; align-items: flex-start; }
.kicker { max-width: 180px; margin: 0; color: var(--color-text-secondary); font-size: 12px; line-height: 18px; font-weight: 500; white-space: pre-line; }
.hero h1 { margin: 54px 0 0; max-width: 720px; color: var(--color-primary); font-size: clamp(52px, 4.45vw, 72px); line-height: 1.16; letter-spacing: 0; font-weight: 650; text-align: left; }
.hero h1::first-line { color: var(--color-text-primary); }
.hero-intro { max-width: 560px; margin: 28px 0 0; color: var(--color-text-secondary); font-size: 16px; line-height: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-actions a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 var(--space-6); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); font-size: 14px; line-height: 20px; font-weight: 600; }
.hero-actions .hero-secondary { gap: var(--space-4); background: rgba(255,255,255,.72); backdrop-filter: blur(10px); }
.hero-actions .hero-secondary:hover { border-color: var(--color-border-strong); background: rgba(255,255,255,.9); }
.hero-meta { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: clamp(24px, 3vw, 48px); margin-top: auto; color: var(--color-text-secondary); }
.hero-meta > div { display: grid; min-width: 120px; align-content: center; padding-right: clamp(20px, 2.5vw, 40px); border-right: 1px solid rgba(98,99,108,.24); }
.hero-meta > div:last-child { border-right: 0; padding-right: 0; }
.hero-meta > div:first-child { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }
.hero-meta strong { color: var(--color-primary); font-size: 44px; line-height: 1; font-weight: 650; }
.hero-meta b { color: var(--color-text-primary); font-size: 14px; line-height: 20px; font-weight: 600; }
.hero-meta span, .hero-meta small { display: block; font-size: 11px; line-height: 16px; font-weight: 500; }
.hero-meta small { color: var(--neutral-9); }
.hero-aside { position: absolute; z-index: 2; top: 108px; right: max(var(--space-6), calc((100vw - 1440px) / 2 + var(--space-6))); bottom: 54px; width: 124px; color: var(--neutral-9); font-size: 11px; line-height: 16px; font-weight: 500; text-align: right; pointer-events: none; }
.hero-plus { display: block; color: var(--color-text-secondary); font-size: 38px; line-height: 1; font-weight: 200; text-align: right; }
.hero-aside > p { margin: 38px 0 0; }
.hero-scroll { position: absolute; right: 0; bottom: 0; display: grid; width: 44px; justify-items: center; gap: 10px; }
.hero-scroll span { writing-mode: vertical-rl; }
.hero-scroll i { display: block; width: 1px; height: 56px; background: var(--color-text-secondary); opacity: .65; }
.hero-scroll b { color: var(--color-text-primary); font-size: 20px; line-height: 1; font-weight: 400; }

@media (min-width: 801px) {
  html:lang(en) .hero-visual { height: 760px; }
  html:lang(en) .hero-copy { width: min(58%, 800px); }
  html:lang(en) .hero h1 { max-width: 800px; font-size: clamp(46px, 3.6vw, 58px); white-space: pre-line; }
}

.works-section, .about, .attachments-section, .contact { width: 100vw; margin-left: calc(50% - 50vw); padding: var(--space-16) max(var(--space-6), calc((100vw - 1440px) / 2 + var(--space-6))); }
.works-section, .about, .attachments-section, .contact { scroll-margin-top: 58px; }
.home-features { background: #F3F4F4; }
.related { padding: var(--space-16) var(--space-6); }
.section-label { display: grid; grid-template-columns: var(--space-12) auto 1fr; align-items: end; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.section-label span, .section-label p, .detail-label { color: var(--color-text-secondary); font-size: 12px; line-height: 18px; font-weight: 500; margin: 0; }
.section-label p { text-align: right; }
.section-label h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.home-section-label { display: flex; justify-content: space-between; padding-bottom: 24px; border-bottom: 6px solid var(--neutral-12); }
.home-section-label h2 { font-size: 32px; line-height: 40px; }
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-6) 0 var(--space-10); }
.filters a { display:inline-flex;align-items:center;min-height:40px;padding:0 var(--space-4);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-primary);font-size:14px;line-height:20px;font-weight:500; }
.filters a:hover { background:var(--neutral-3);border-color:var(--color-border-strong); }
.filters a:active { background:var(--neutral-4); }
.filters a.active { background:var(--accent-3);border-color:transparent;color:var(--color-link); }
.filters a.active:hover { background:var(--accent-4);color:var(--color-link-hover); }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10) var(--space-5); }
.work-grid[hidden], .work-card[hidden], .work-filter-empty[hidden] { display: none; }
.capability-map{margin-bottom:var(--space-12);padding:var(--space-8);background:var(--color-bg-surface);border-radius:var(--radius-lg)}
.capability-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-8);padding-bottom:var(--space-6);border-bottom:6px solid var(--neutral-12)}
.capability-heading h2{margin:0;color:var(--color-text-primary);font-size:32px;line-height:40px;font-weight:600}
.capability-heading p{margin:0;color:var(--color-text-secondary);font-size:12px;line-height:18px;font-weight:500}
.capability-intro{margin:var(--space-6) 0 0;color:var(--color-text-secondary);font-size:16px;line-height:24px;text-align:left}
@media(min-width:1101px){.capability-intro:lang(zh-CN){white-space:nowrap}}
.capability-stages{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-5);padding:var(--space-6) 0}
.capability-stage{min-width:0}
.capability-stage-head{min-height:72px}
.capability-stage-head span{display:block;margin-bottom:var(--space-2);color:var(--color-link);font-size:24px;line-height:32px;font-weight:600;font-variant-numeric:tabular-nums}
.capability-stage h3{margin:0;color:var(--color-text-primary);font-size:16px;line-height:24px;font-weight:600}
.capability-stage ul{min-height:132px;margin:0;padding:0 0 0 var(--space-3);border-left:2px solid var(--accent-6);list-style:none}
.capability-stage:nth-child(2) ul{border-color:var(--accent-7)}
.capability-stage:nth-child(3) ul{border-color:var(--accent-8)}
.capability-stage:nth-child(4) ul{border-color:var(--accent-9)}
.capability-stage:nth-child(5) ul{border-color:var(--accent-10)}
.capability-stage:nth-child(6) ul{border-color:var(--accent-11)}
.capability-stage:nth-child(7) ul{border-color:var(--accent-12)}
.capability-stage li{color:var(--color-text-secondary);font-size:13px;line-height:20px;overflow-wrap:anywhere}
.capability-phases{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-5)}
.capability-phases div:first-child{grid-column:span 3}
.capability-phases div:nth-child(n+2){grid-column:span 2}
.capability-phases div{display:flex;flex-direction:column;gap:var(--space-1);padding-top:var(--space-6);border-top:1px solid var(--color-border-subtle)}
.capability-phases strong{color:var(--color-text-primary);font-size:14px;line-height:20px;font-weight:600}
.capability-phases span{color:var(--color-link);font-size:12px;line-height:18px;font-weight:500;font-variant-numeric:tabular-nums}
@media(max-width:1200px){.capability-stages{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}.capability-stage-head{min-height:0;margin-bottom:var(--space-3)}.capability-stage ul{min-height:0}.capability-phases{grid-template-columns:repeat(3,minmax(0,1fr))}.capability-phases div:first-child,.capability-phases div:nth-child(n+2){grid-column:auto}}
@media(max-width:768px){.capability-map{padding:var(--space-6)}.capability-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.capability-heading h2{font-size:24px;line-height:32px}.capability-heading p{font-size:14px;line-height:22px}}
@media(max-width:520px){.capability-map{padding:var(--space-4)}.capability-stages{grid-template-columns:1fr;gap:0;padding:0}.capability-stage{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-subtle)}.capability-stage-head{display:flex;gap:var(--space-2);margin:0}.capability-stage-head span{margin:0;font-size:16px;line-height:24px}.capability-stage ul{border-left:0;padding:0}.capability-phases{grid-template-columns:1fr;gap:var(--space-3)}.capability-phases div{flex-direction:row;gap:var(--space-4)}}
.feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.feature-row{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:stretch;gap:var(--space-5);padding:var(--space-6);background:#fff;border-radius:var(--radius-lg);transition:box-shadow var(--duration-normal) var(--ease-standard)}
.feature-row:hover{box-shadow:0 12px 32px rgba(31,48,70,.12)}
.feature-row:focus-within{box-shadow:0 0 0 2px var(--color-focus-ring)}
.feature-image{aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;background:var(--accent-3);border-radius:var(--radius-md);color:var(--color-text-secondary)}
.feature-image::before{grid-area:1/1;width:100%;padding-top:75%;content:""}
.feature-image img,.feature-image>span{grid-area:1/1}
.feature-image img{width:100%;height:100%;object-fit:cover}
.feature-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.feature-copy h3{margin:0 0 var(--space-2);font-size:22px;line-height:30px;font-weight:600}
.feature-copy p{margin:0;color:var(--color-text-secondary);font-size:14px;line-height:21px}
.feature-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:36px;margin-top:auto;padding:0 var(--space-3);border:1px solid var(--color-primary);border-radius:var(--radius-md);background:var(--color-primary);color:var(--color-text-inverse);font-size:13px;font-weight:500}
.feature-button:hover,.feature-button:active{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.feature-admin-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-6);padding:var(--space-6);border-top:1px solid var(--color-border-subtle)}
.feature-admin-row>img,.feature-admin-placeholder{width:240px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);background:var(--accent-3)}
.feature-admin-fields,.feature-admin-new{display:grid;gap:var(--space-4)}
.feature-admin-fields label,.feature-admin-new label{display:grid;gap:var(--space-2)}
.feature-admin-fields input,.feature-admin-fields select,.feature-admin-fields textarea,.feature-admin-new input,.feature-admin-new select,.feature-admin-new textarea{width:100%;max-width:720px;padding:var(--space-2);border:1px solid var(--color-border-default);border-radius:var(--radius-md);font:inherit}
.feature-admin-fields :is(input,select,textarea):focus-visible,.feature-admin-new :is(input,select,textarea):focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.feature-admin-actions{display:flex;align-items:end;gap:var(--space-6);flex-wrap:wrap}.feature-admin-actions input[type=number]{width:100px}.feature-admin-actions .check,.feature-admin-new .check{display:flex;align-items:center;gap:var(--space-2)}.feature-admin-actions .check input,.feature-admin-new .check input{width:auto}
.feature-admin-new{padding:var(--space-6)}
.works-page .works-section{padding-top:56px;min-height:80vh}
.works-intro{display:grid;width:100vw;min-height:360px;align-items:center;justify-items:center;margin-left:calc(50% - 50vw);padding:var(--space-8) var(--space-6);background:var(--color-bg-surface) url('/static/works-hero-banner.jpg') center/cover no-repeat}
.works-intro-copy{max-width:720px;text-align:center}
.works-intro h1{margin:0;color:var(--color-text-primary);font-size:32px;line-height:40px;font-weight:600}
.works-intro-description{max-width:560px;margin:var(--space-5) auto 0;color:var(--color-text-secondary);font-size:14px;line-height:22px}
.works-intro-count{display:flex;justify-content:center;margin:var(--space-6) 0 0}
.works-intro-count>div{padding-right:0}
.works-intro-count>div>span{text-align:left}
.works-intro .hero-meta>div:first-child{grid-template-columns:auto 1fr;gap:var(--space-3)}
.works-page .filters{position:relative;z-index:1;width:max-content;max-width:100%;justify-content:center;margin:calc(-1 * (var(--space-6) + var(--space-5))) auto var(--space-10);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-md)}
@media(max-width:800px){.works-intro{padding:var(--space-6)}.works-intro h1{font-size:24px;line-height:32px}.works-page .filters{margin-top:calc(-1 * var(--space-6))}}
@media(max-width:1000px){.feature-list{grid-template-columns:1fr}}
@media(max-width:800px){.feature-row{padding:var(--space-4)}.feature-admin-row{grid-template-columns:1fr}.feature-admin-row>img,.feature-admin-placeholder{width:min(100%,320px)}}
@media(max-width:520px){.feature-row{grid-template-columns:1fr}.feature-button{margin-top:var(--space-6)}}
.work-pagination{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-10)}.work-pagination[hidden]{display:none}.work-pagination button{display:grid;min-width:44px;height:44px;padding:0 8px;place-items:center;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-secondary);font-size:16px;cursor:pointer}.work-pagination button:hover:not(:disabled):not([aria-current]){border-color:var(--color-primary);color:var(--color-primary)}.work-pagination button[aria-current]{border-color:var(--color-primary);background:var(--color-primary);color:#fff;font-weight:600}.work-pagination button:disabled{color:var(--neutral-8);cursor:default}
.work-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-bg-surface); transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard); }
.work-card:hover { border-color: var(--color-border-default); box-shadow: 0 4px 12px rgba(30,31,36,.1); transform: translateY(-2px); }
.work-card:focus-within { border-color: var(--color-focus-ring); box-shadow: 0 0 0 3px var(--accent-3); }
.work-image { position: relative; display: block; overflow: hidden; background: var(--neutral-3); aspect-ratio: 4 / 3; }
.work-image > img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:calc(50% - var(--cover-x,0%)) calc(50% - var(--cover-y,0%));transform:translate(var(--cover-pan-x,0%),var(--cover-pan-y,0%)) scale(var(--cover-zoom,1));transition:transform var(--duration-slow) var(--ease-standard); }
.work-image:hover > img { transform:translate(var(--cover-pan-x,0%),var(--cover-pan-y,0%)) scale(calc(var(--cover-zoom,1) * 1.02)); }
.works-page .work-card-body{padding-right:20px;padding-left:20px}
.works-page .work-card-footer{padding-right:20px;padding-left:20px}
.work-cover-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#F0F0F3;color:#62636C;font-size:14px;font-weight:500;line-height:20px}.work-cover-placeholder img{width:56px;height:56px;opacity:.55}.admin-work-cover .work-cover-placeholder{gap:0;font-size:10px;line-height:14px}.admin-work-cover .work-cover-placeholder img{width:30px;height:30px}
.work-card-body { display: flex; min-height: 112px; flex: 1; flex-direction: column; padding: var(--space-5) var(--space-4) var(--space-4); }
.work-card-body h3 { display: -webkit-box; min-height: 48px; margin: 0; overflow: hidden; font-size: 16px; line-height: 24px; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.work-card-body h3 a:hover { color: var(--color-link-hover); }
.work-card-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); }
.work-category { min-width: 0; margin: 0; overflow: hidden; color: var(--color-text-tertiary); font-size: 13px; line-height: 20px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.work-card-footer { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: auto; padding: 0 var(--space-4); border-top: 1px solid var(--color-border-subtle); color: var(--color-text-tertiary); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.work-card-footer a, .contact-links a { color: var(--color-link); font-weight: 500; }
.work-card-footer a:hover, .contact-links a:hover { color: var(--color-link-hover); }
.about, .contact { background-position: center; background-repeat: no-repeat; background-size: cover; }
.about { min-height: 540px; background-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.about .section-label { border-color: rgb(185 187 198 / 60%); }
.about .home-section-label { border-color: var(--neutral-1); }
.about .section-label span, .about .section-label p { color: rgb(255 255 255 / 65%); }
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-16); padding-top: var(--space-12); }
.about-grid h2 { margin: 0; font-size: 48px; line-height: 60px; font-weight: 600; white-space: pre-line; }
.about-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.about-more { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: var(--space-4); padding: 0 var(--space-6); border: 1px solid var(--neutral-8); border-radius: var(--radius-xl); background: rgba(255,255,255,.06); color: var(--color-text-inverse); font-size: 14px; line-height: 20px; font-weight: 600; }
.about-more:hover { border-color: var(--neutral-6); background: rgba(255,255,255,.12); }
.about-grid p { margin-top: 0; color: rgb(255 255 255 / 78%); font-size: 16px; line-height: 24px; }
.about-highlights { padding-top: var(--space-8); }
.about-highlights details { border-bottom: 1px solid rgb(185 187 198 / 60%); }
.about-highlights summary { display: flex; align-items: center; gap: var(--space-4); min-height: 44px; padding: var(--space-3) 0; list-style: none; cursor: pointer; font-size: 14px; line-height: 22px; font-weight: 500; }
.about-highlights summary::-webkit-details-marker { display: none; }
.about-highlights summary::after { content: '+'; margin-left: auto; font-size: 20px; line-height: 24px; font-weight: 400; }
.about-highlights details[open] summary::after { content: '−'; }
.about-highlights summary:hover { color: var(--accent-6); }
.about-highlights summary:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.about-highlights details p { margin: 0; padding: 0 var(--space-8) var(--space-4) 0; color: rgb(255 255 255 / 78%); font-size: 14px; line-height: 22px; white-space: pre-line; }
.home-about-setting-item { padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.home-about-setting-item h4 { margin: 0 0 var(--space-4); font-size: 14px; line-height: 20px; }
.attachments-section { background: var(--color-bg-surface); }
.attachments-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; gap: var(--space-8); padding-top: var(--space-8); }
.attachment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0 var(--space-6); }
.attachments-scene { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: var(--radius-lg); background: var(--accent-3); }
.attachments-scene-preview { aspect-ratio: 4/3; }
.attachment-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; min-width: 0; min-height: 132px; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border-subtle); }
.attachment-icon { display: grid; width: 72px; height: 72px; place-items: center; overflow: hidden; border-radius: var(--radius-lg); background: var(--accent-3); color: var(--color-link); }
.attachment-icon.custom { object-fit: cover; }
.attachment-preview-icon{display:block;width:fit-content;border-radius:var(--radius-lg)}
.attachment-preview-icon:hover .attachment-icon{box-shadow:var(--shadow-md)}
.attachment-copy h3 a:hover{color:var(--color-link)}
.attachment-icon span { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0; }
.attachment-icon.type-ppt, .attachment-icon.type-pptx { background: #fff1e8; color: #c2410c; }
.attachment-copy { min-width: 0; }
.attachment-copy p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: 11px; line-height: 16px; font-weight: 500; }
.attachment-copy h3 { overflow: hidden; margin: 0; color: var(--color-text-primary); font-size: 16px; line-height: 24px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.attachment-copy > span { display: -webkit-box; margin-top: 2px; overflow: hidden; color: var(--color-text-secondary); font-size: 13px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.attachment-get { display: inline-flex; width: max-content; min-width: 64px; min-height: 36px; align-items: center; justify-content: center; padding: 0 var(--space-4); border-radius: 18px; background: var(--accent-3); color: var(--color-link); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.attachment-get:hover { background: var(--accent-4); color: var(--color-link-hover); }
.attachment-get.disabled { background: var(--neutral-3); color: var(--neutral-9); cursor: not-allowed; }
.attachment-empty { margin-top: var(--space-8); }
.contact { min-height: 400px; margin-block: var(--space-16); }
.attachments-section + .contact { margin-top: 0; }
.contact .section-label { border-color: rgba(98, 99, 108, .24); }
.contact .home-section-label { border-color: var(--neutral-12); }
.contact-content { padding-top: var(--space-10); }
.contact-kicker { margin: 0; color: var(--color-text-secondary); font-size: 12px; line-height: 18px; font-weight: 500; }
.contact-content h2 { margin: var(--space-8) 0; color: var(--color-primary); font-size: 48px; line-height: 60px; font-weight: 600; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); font-size: 16px; line-height: 24px; }
.contact-links a { display: inline-flex; align-items: center; gap: var(--space-2); }
.contact-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.contact:has(+ .wechat-section) { margin-bottom: 0; }
.wechat-section { width: 100vw; margin-left: calc(50% - 50vw); padding: var(--space-16) max(var(--space-6), calc((100vw - 1440px) / 2 + var(--space-6))); background: #fff; }
.wechat-card { display: grid; justify-items: center; }
.wechat-qr-frame { display: grid; width: 264px; padding: 32px; justify-items: center; gap: var(--space-5); overflow: hidden; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 12px 32px rgba(31, 48, 70, .08); }
.wechat-qr-frame img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.wechat-qr-frame p { margin: 0; color: var(--color-text-secondary); font-size: 16px; line-height: 24px; font-weight: 600; }
footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font-size: 12px; line-height: 18px; }
footer > :nth-child(2) { justify-self: center; text-align: center; }
footer > :last-child { justify-self: end; text-align: right; }
.footer-legal { display: grid; justify-items: center; gap: 2px; }
.icp-link { white-space: nowrap; }
.icp-link:hover { color: var(--color-link-hover); }

.about-page-main { padding-top: 72px; }
.profile-section, .history-section { padding: var(--space-16) var(--space-6); }
.profile-section { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.profile-layout { display: grid; grid-template-columns: 5.5fr 6.5fr; gap: var(--space-8); align-items: start; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg-surface); box-shadow: 0 12px 32px rgba(31, 48, 70, .08); }
.profile-layout > h1 { grid-column: 1 / -1; margin: 0; padding-bottom: var(--space-6); border-bottom: 6px solid var(--neutral-12); font-size: 32px; line-height: 40px; font-weight: 600; }
.profile-body { color: var(--color-text-secondary); font-size: 16px; line-height: 32px; }
.profile-photo { width: 97%; justify-self: end; align-self: start; margin: 0; overflow: hidden; border-radius: 0; background: var(--neutral-3); aspect-ratio: 16 / 10; }
.profile-photo img { height: 100%; object-fit: cover; }
.history-section { padding-top: var(--space-12); padding-bottom: var(--space-16); }
.history-section .section-label { position: relative; display: flex; justify-content: space-between; align-items: end; padding-bottom: 24px; border-bottom: 0; }
.history-section .section-label h2 { font-size: 32px; line-height: 40px; }
.history-section .section-label::before, .history-section .section-label::after { content: ""; position: absolute; bottom: -6px; height: 6px; background: var(--neutral-12); }
.history-section .section-label::before { left: 0; width: calc((100% - var(--space-12)) * .25); }
.history-section .section-label::after { right: 0; width: calc((100% - var(--space-12)) * .75); }
.history-list { margin-top: var(--space-12); }
.history-row { position: relative; display: grid; grid-template-columns: 1fr 3fr; gap: var(--space-12); min-height: 160px; padding: var(--space-8) 0; }
.history-row::before, .history-row::after { content: ""; position: absolute; bottom: 0; height: 1px; background: var(--color-border-subtle); }
.history-row::before { left: 0; width: calc((100% - var(--space-12)) * .25); }
.history-row::after { right: 0; width: calc((100% - var(--space-12)) * .75); }
.history-period { font-size: 16px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.history-duration { display: inline-block; margin-top: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); background: #1e1f24; color: #fff; font-size: 12px; line-height: 18px; }
.history-company { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.history-company .attachment-icon { flex: none; }
.history-company .history-initials { background: #122e65; color: #fff; font-size: 22px; font-weight: 600; }
.history-initials { white-space: pre-line; text-align: center; line-height: 1.2; }
.history-position { margin-left: 88px; margin-top: var(--space-5); }
.history-company-website { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.history-company-website a { color: var(--color-link); }
.history-company-website a:hover { text-decoration: underline; }
.history-company-no-website { color: var(--color-text-secondary); }
.history-admin-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: var(--radius-md); object-fit: cover; background: var(--accent-3); color: var(--color-link); font-size: 12px; }
.history-admin-icon.history-initials { background: #122e65; color: #fff; }
.history-detail h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.history-role { margin: 0; color: var(--color-text-secondary); font-size: 16px; line-height: 24px; }
.history-skills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.history-skills li { padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); background: var(--accent-3); color: var(--color-link); font-size: 12px; line-height: 18px; }
.history-empty { padding: var(--space-12) 0; border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); }
.history-empty p { margin: 0; }
.about-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);padding:0 var(--space-6) var(--space-12)}
.about-module{min-width:0;padding:var(--space-6);padding-bottom:var(--space-10);border-radius:var(--radius-lg);background:#fff;box-shadow:0 12px 32px rgba(31, 48, 70, .08)}
.about-software,.about-qualities{display:flex;flex-direction:column}
.about-qualities{justify-content:space-between}
.about-module h2{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-8);font-size:16px;line-height:24px;font-weight:600}.about-module-icon{width:20px;height:20px;flex:0 0 20px;color:var(--color-link)}
.education-entry+.education-entry{margin-top:var(--space-6)}
.education-heading{display:flex;align-items:flex-start;gap:var(--space-4)}.education-heading img{flex:0 0 48px;width:48px;height:48px;object-fit:contain}.education-heading>div{display:flex;min-width:0;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2)}.education-heading strong{font-size:16px;line-height:24px}.education-period{color:var(--color-text-secondary);font-size:13px;font-variant-numeric:tabular-nums}.education-badge{padding:0 var(--space-2);border-radius:var(--radius-md);background:var(--accent-3);color:var(--color-link);font-size:12px}.education-heading p{flex-basis:100%;margin:0;color:var(--color-text-secondary);font-size:13px;line-height:20px}.education-courses{margin:var(--space-4) 0 0 64px;padding-top:var(--space-3);border-top:1px solid var(--color-border-subtle);font-size:12px;line-height:18px}.education-courses>span{color:var(--color-text-secondary)}.education-courses ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-1) var(--space-2);margin:var(--space-2) 0 0;padding:0;list-style:none}.education-courses li{min-width:0;overflow-wrap:anywhere}.education-courses li::before{content:"✓ ";color:var(--color-link)}
.software-grid{display:grid;flex:1;grid-template-columns:repeat(4,minmax(0,1fr));align-content:space-evenly;gap:var(--space-4);row-gap:var(--space-8);margin:0;padding:0;list-style:none}.software-grid li{display:flex;min-width:0;min-height:96px;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2)}.software-grid img{width:100%;max-width:64px;aspect-ratio:1;object-fit:contain}.software-grid span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:12px;line-height:18px}
.quality-chart{display:block;width:100%;max-width:380px;margin:0 auto}.quality-grid{fill:none;stroke:var(--color-border-subtle);stroke-width:1.5}.quality-axis{stroke:var(--color-border-subtle);stroke-width:1.5}.quality-score{fill:var(--color-primary);fill-opacity:.1;stroke:var(--color-primary);stroke-width:2.5}.quality-chart text{fill:var(--color-text-secondary);font-size:13px}.quality-values{display:grid;width:max-content;max-width:100%;grid-template-columns:repeat(3,max-content);column-gap:var(--space-4);row-gap:var(--space-2);margin:var(--space-4) auto 0;padding:0;list-style:none;color:var(--color-text-secondary);font-size:12px}.quality-values li{display:flex;min-width:0;align-items:center;gap:var(--space-2)}.quality-values li:not(:nth-child(3n)){padding-right:var(--space-4);border-right:1px solid var(--color-border-subtle)}.quality-values span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quality-values strong{flex:0 0 auto;color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.about-settings{display:grid;gap:var(--space-6);margin-top:var(--space-6)}.about-settings .panel-head{margin:calc(var(--space-6)*-1) calc(var(--space-6)*-1) var(--space-4)}.about-settings-entry{border-bottom:1px solid var(--color-border-subtle)}.about-settings-entry summary{display:flex;min-height:56px;align-items:center;gap:var(--space-3);cursor:pointer;list-style:none}.about-settings-entry summary::-webkit-details-marker{display:none}.about-settings-entry summary::after{content:"⌄";margin-left:auto;color:var(--color-text-secondary)}.about-settings-entry[open] summary::after{transform:rotate(180deg)}.about-settings-entry summary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.about-settings-entry summary img{width:36px;height:36px;object-fit:contain}.about-settings-entry summary strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.about-settings-entry summary span{margin-left:auto;color:var(--color-text-secondary);font-size:12px;white-space:nowrap}.about-settings-entry summary span+span{margin-left:0}.about-settings-entry form{margin:0 0 var(--space-4)}.about-settings-entry form+form{margin-top:var(--space-2)}.about-tool-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-6)}.about-quality-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.about-quality-settings form{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:var(--space-3);align-items:end;padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-subtle)}.about-quality-settings label{margin:0}.about-quality-settings .button{margin-bottom:0}
@media(max-width:1000px){.about-modules{grid-template-columns:1fr}.about-module{max-width:720px;width:100%;margin:0 auto}}
@media(max-width:800px){.about-modules{padding:0 var(--space-4) var(--space-12)}.about-module{padding:var(--space-4);padding-bottom:var(--space-8)}.education-courses{margin-left:0}}
@media(max-width:800px){.about-tool-settings,.about-quality-settings{grid-template-columns:1fr}.about-quality-settings form{grid-template-columns:minmax(0,1fr) 100px auto}}

.detail-page { min-height: 100vh; }
.detail-nav { grid-template-columns: 1fr auto 1fr; }
.detail-hero { box-sizing: border-box; width: min(100%, 960px); margin: 0 auto; padding: 120px var(--space-6) var(--space-6); }
.detail-hero-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.detail-hero-meta p { margin: 0; color: var(--color-text-secondary); font-size: 12px; line-height: 18px; font-weight: 500; }
.detail-edit-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: #fff; color: var(--color-text-primary); font-size: 14px; font-weight: 500; }
.detail-edit-link:hover { border-color: var(--color-border-strong); background: var(--neutral-3); }
.detail-hero h1 { max-width: 1100px; margin: var(--space-6) 0; font-size: 32px; line-height: 40px; font-weight: 600; }
.detail-info { box-sizing: border-box; width: min(100%, 960px); margin: 0 auto; padding: var(--space-12) var(--space-6); }
.detail-info dl { width: 100%; margin: 0; }
.detail-info dl div { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-subtle); }
.detail-info dt { color: var(--color-text-secondary); font-size: 12px; line-height: 18px; }
.detail-info dd { margin: var(--space-1) 0 0; font-size: 14px; line-height: 22px; }
.detail-info dd.work-role { white-space: pre-wrap; overflow-wrap: anywhere; }
.original-entry { display: flex; justify-content: space-between; align-items: end; gap: var(--space-8); padding: var(--space-12) var(--space-6); background: var(--accent-3); color: var(--color-text-primary); }
.original-entry p { margin: 0; color: var(--color-text-secondary); font-size: 12px; line-height: 18px; font-weight: 500; }
.original-entry h2 { margin: var(--space-3) 0 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.original-entry > a { min-height: 40px; padding: 9px var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary); color: #fff; white-space: nowrap; font-weight: 500; }
.original-entry > a:hover { border-color: var(--color-primary-hover); background: var(--color-primary-hover); }
.related > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.related a { display: grid; gap: var(--space-3); color: var(--color-link); font-weight: 500; }
.related-cover{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:var(--radius-lg)}
.related-cover > img{display:block;width:100%;height:100%;object-fit:cover}
.related a > span:last-child { font-size: 16px; line-height: 24px; }
.detail-footer { margin-top: var(--space-8); }
.story{box-sizing:border-box;width:min(100%,960px);margin:0 auto;padding:var(--space-4) var(--space-6) var(--space-12)}.story>h2{font-size:20px;line-height:28px;margin:var(--space-12) 0 var(--space-4)}.story>p{max-width:none;font-size:16px;line-height:24px;color:var(--color-text-secondary);white-space:pre-wrap;overflow-wrap:anywhere}.story figure{margin:var(--space-10) 0}.story>figure:first-child{margin-top:0}.story figure img{border-radius:var(--radius-lg)}.story figcaption,.story-caption{margin-top:var(--space-3);font-size:13px;line-height:20px;color:var(--color-text-secondary)}.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}.image-pair figure{margin:0}.tag{display:inline-block;margin:0 var(--space-2) var(--space-2) 0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);background:var(--accent-3);color:var(--color-link);font-size:12px}.empty-state{padding:var(--space-12);border:1px dashed var(--color-border-default);border-radius:var(--radius-lg);text-align:center;color:var(--color-text-secondary)}.back-to-top{position:fixed;z-index:18;left:calc(50% + 480px + var(--space-4));right:auto;bottom:120px;display:grid;width:44px;height:44px;padding:0;place-items:center;border:1px solid var(--color-border-default);border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(30,31,36,.14);color:var(--color-text-primary);font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(12px)}.back-to-top:hover{border-color:var(--color-border-strong);color:var(--color-link)}.back-to-top[hidden]{display:none}

/* Admin */
.admin-sidebar nav a,.admin-sidebar-foot a,.link-button{gap:var(--space-3)}
.admin-nav-icon{width:18px;height:18px;flex:0 0 18px}
.admin-body{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:var(--color-bg-app)}.admin-sidebar{position:sticky;top:0;height:100vh;padding:var(--space-4);border-right:1px solid var(--color-border-subtle);background:var(--color-bg-subtle);display:flex;flex-direction:column}.admin-brand{display:flex;align-items:center;gap:var(--space-3);min-height:40px;padding:0 var(--space-2);font-size:16px;font-weight:600}.admin-brand img{width:32px}.admin-sidebar nav{display:grid;gap:var(--space-1);margin-top:var(--space-6)}.admin-sidebar nav a,.admin-sidebar-foot a,.link-button{display:flex;align-items:center;min-height:40px;padding:0 var(--space-3);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-secondary);font-size:14px;font-weight:500;cursor:pointer;text-align:left}.admin-sidebar nav a:hover,.admin-sidebar-foot a:hover,.link-button:hover{background:var(--neutral-3);color:var(--color-text-primary)}.admin-sidebar nav a.active{background:var(--accent-3);color:var(--color-link)}.admin-sidebar-foot{margin-top:auto;border-top:1px solid var(--color-border-subtle);padding-top:var(--space-3)}.admin-sidebar-foot form{margin:0}.admin-main{min-width:0;width:100%;max-width:none;margin:0}.admin-top{position:sticky;top:0;z-index:10;height:56px;display:flex;align-items:center;padding:0 var(--space-6);border-bottom:1px solid var(--color-border-subtle);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}.admin-top h1{font-size:20px;line-height:28px;margin:0}.admin-content{padding:var(--space-6);max-width:1440px}.notice{margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);border:1px solid;border-radius:var(--radius-md)}.notice.success{background:#e9f9ee;border-color:#9ad5aa;color:#176b39}.notice.error{background:#fff0f0;border-color:#f2a4a4;color:#b4232a}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);margin-bottom:var(--space-6)}.stats-grid>div{padding:var(--space-6);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-bg-surface)}.stats-grid span{display:block;color:var(--color-text-secondary)}.stats-grid strong{display:block;margin-top:var(--space-3);font-size:32px;line-height:40px;font-variant-numeric:tabular-nums}.panel{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-bg-surface)}.panel>h2,.panel-head{margin:0;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border-subtle)}.panel h2{font-size:16px;line-height:24px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.panel-head h2,.panel-head p{margin:0}.panel-head p{color:var(--color-text-secondary)}.page-actions,.form-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}.form-action-primary{display:flex;align-items:center;gap:var(--space-3)}.page-actions p{margin:0;color:var(--color-text-secondary)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 var(--space-4);border:1px solid;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer}.button.primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.button.primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.button.secondary{background:#fff;border-color:var(--color-border-default);color:var(--color-text-primary)}.button.secondary:hover{background:var(--neutral-3);border-color:var(--color-border-strong)}.button.danger{background:#fff0f0;border-color:#f2a4a4;color:#b4232a}.danger-text{color:#b4232a}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{position:sticky;top:0;padding:var(--space-3) var(--space-4);background:var(--neutral-2);color:var(--color-text-secondary);font-weight:500;text-align:left;white-space:nowrap}td{height:44px;padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border-subtle);vertical-align:middle}tbody tr:hover{background:var(--neutral-2)}td small{display:block;color:var(--color-text-secondary)}td a{color:var(--color-link);font-weight:500}.status{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-size:12px;font-weight:500;white-space:nowrap}.status.published{background:#e9f9ee;color:#176b39}.status.draft{background:var(--neutral-3);color:var(--color-text-secondary)}.form-layout{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:var(--space-6);align-items:start}.form-main,.form-side,.settings-form{display:grid;gap:var(--space-6)}.form-section{padding:var(--space-6)}.form-section>h2{padding:0 0 var(--space-4);border:0}.form-section .panel-head{margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);padding:var(--space-4) var(--space-6)}label,fieldset{display:grid;gap:var(--space-2);margin-bottom:var(--space-4);font-weight:500}fieldset{border:0;padding:0}legend{margin-bottom:var(--space-2)}input,textarea,select{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:#fff;color:var(--color-text-primary);font:inherit}textarea{resize:vertical}input:hover,textarea:hover,select:hover{border-color:var(--color-border-strong)}input:focus,textarea:focus,select:focus{border-color:var(--color-focus-ring);outline:3px solid var(--accent-3)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4)}.span-2{grid-column:span 2}.check{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-2);font-weight:400}.check input{width:16px;min-height:16px}.check-list{display:grid;gap:var(--space-2)}.danger-zone{padding:var(--space-6);border:1px solid #f2a4a4;border-radius:var(--radius-lg);background:#fff0f0}.danger-zone h2{font-size:16px}.split-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-6);align-items:start}.taxonomy-form{position:sticky;top:80px}.inline{display:inline}.inline .link-button{display:inline-flex;min-height:32px;padding:0 var(--space-2)}.muted{color:var(--color-text-secondary)}code{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;font-size:12px}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.media-card{overflow:hidden;border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:#fff}.media-card img{aspect-ratio:4/3;object-fit:cover}.media-card div{padding:var(--space-4)}.media-card p{color:var(--color-text-secondary)}.login-page{min-height:100vh;display:grid;place-items:center;padding:var(--space-4);background:var(--color-bg-subtle)}.login-panel{width:min(100%,400px);padding:var(--space-6);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);background:#fff;box-shadow:0 4px 12px rgba(30,31,36,.1)}.login-panel>img{width:48px}.login-panel h1{font-size:24px;line-height:32px}.login-panel>p,.login-panel>a{color:var(--color-text-secondary)}.login-panel form{margin:var(--space-6) 0}.block-item{margin-bottom:var(--space-3);padding:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--neutral-2)}.block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.block-actions{display:flex;gap:var(--space-1)}.block-actions button{min-width:32px;min-height:32px;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:#fff;cursor:pointer}

.media-admin-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-6);align-items:start}.media-folders{position:sticky;top:80px;max-height:calc(100vh - 104px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.folder-panel-head{position:relative}.folder-create-toggle{display:grid;width:32px;height:32px;padding:0;place-items:center;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-link);font-size:24px;line-height:1;cursor:pointer}.folder-create-toggle:hover,.folder-create-toggle[aria-expanded="true"]{background:var(--accent-3)}.folder-create-popover{position:absolute;z-index:12;top:calc(100% + 8px);right:8px;width:208px;padding:var(--space-4);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:#fff;box-shadow:0 12px 32px rgba(30,31,36,.16)}.folder-create-popover label,.folder-rename-form label{margin:0}.folder-create-popover>div,.folder-rename-form>div{display:flex;gap:var(--space-2);margin-top:var(--space-3)}.folder-create-popover .button,.folder-rename-form .button{min-height:34px;padding-inline:var(--space-3)}.media-folders nav{display:grid;padding:var(--space-2)}.media-folders nav a{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:14px;font-weight:500}.media-folders nav a>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-folders nav a:hover{background:var(--neutral-3);color:var(--color-text-primary)}.media-folders nav a.active{background:var(--accent-3);color:var(--color-link)}.media-folders nav strong{flex:0 0 auto;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}.folder-context-menu{position:fixed;z-index:40;width:220px;padding:var(--space-1);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:#fff;box-shadow:0 12px 32px rgba(30,31,36,.18)}.folder-context-actions>button,.folder-context-actions form>button{display:flex;width:100%;min-height:36px;align-items:center;padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-primary);font:inherit;cursor:pointer}.folder-context-actions>button:hover,.folder-context-actions form>button:hover{background:var(--neutral-3)}.folder-context-actions form{margin:0}.folder-context-actions form>button.danger-text{color:#b4232a}.folder-rename-form{padding:var(--space-2)}.media-main{min-width:0}.media-upload{margin-bottom:var(--space-6)}.media-upload>p{color:var(--color-text-secondary)}.media-result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.media-result-head h2{margin:0;font-size:20px;line-height:28px}.media-result-head span{color:var(--color-text-secondary);font-size:13px}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.media-card{min-width:0;overflow:hidden;border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:#fff}.media-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--neutral-3)}.media-card-body{padding:var(--space-4)}.media-card-body>strong,.media-card-body>code{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-card-body>p{margin:var(--space-2) 0;color:var(--color-text-secondary)}.media-folder-name{font-size:12px;font-weight:500}.media-move{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}.media-move label{margin:0}.media-card .link-button{min-height:32px;margin-top:var(--space-2);padding:0}.media-empty{grid-column:1/-1}

select{appearance:none;-webkit-appearance:none;padding-left:12px;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2362636C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
.cover-cropper{margin-bottom:var(--space-4)}.cover-crop-frame{position:relative;overflow:hidden;width:100%;aspect-ratio:4/3;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--neutral-3);cursor:grab;touch-action:none}.cover-crop-frame:active{cursor:grabbing}.cover-crop-frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform-origin:center;user-select:none;pointer-events:none}.cover-zoom-head{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--space-3);margin:var(--space-3) 0 var(--space-2)}.cover-zoom-head output{min-width:48px;color:var(--color-link);font-variant-numeric:tabular-nums;text-align:right}.cover-zoom-head button{min-height:32px;padding:0 var(--space-3);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:#fff;color:var(--color-text-secondary);cursor:pointer}.cover-zoom-head button:hover{border-color:var(--color-border-strong);color:var(--color-text-primary)}.cover-zoom{display:block;width:100%;min-height:auto;padding:0;margin:0 0 var(--space-3)}.cover-cropper p{margin:0;font-size:12px;line-height:18px}
.cover-editor>a{display:inline-flex;align-items:center;min-height:40px;padding:8px var(--space-3);border:1px solid var(--accent-7);border-radius:var(--radius-md);background:var(--accent-2);color:var(--color-link);font-weight:600;cursor:pointer}.cover-editor>a:hover{border-color:var(--color-primary);background:var(--accent-3);color:var(--color-link-hover)}.cover-editor>a:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}
.block-add-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:center;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}.block-add-bar .button{min-width:96px;white-space:nowrap}
.block-media-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-4);align-items:stretch}.block-previews{display:grid;height:220px;overflow:hidden;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--neutral-3)}.block-previews.pair{grid-template-columns:1fr 1fr;gap:1px;background:var(--color-border-default)}.block-preview{display:flex;min-width:0;min-height:0;padding:0;overflow:hidden;border:0;background:var(--neutral-3);align-items:center;justify-content:center;cursor:zoom-in}.block-preview img{width:100%;height:100%;object-fit:contain}.block-preview.empty{color:var(--color-text-tertiary);font-size:12px}.block-media-fields{min-width:0}.image-viewer{box-sizing:border-box;width:min(96vw,1400px);height:min(92vh,1000px);padding:48px 24px 24px;overflow:hidden;border:0;border-radius:var(--radius-lg);background:#111}.image-viewer::backdrop{background:rgba(0,0,0,.76)}.image-viewer>button{position:fixed;z-index:1;top:24px;right:32px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#111;font-size:24px;cursor:pointer}.image-viewer-stage{display:flex;width:100%;height:100%;overflow:auto;align-items:flex-start;justify-content:flex-start}.image-viewer img{display:block;flex:none;max-width:none;height:auto;max-height:none;margin:auto}

.login-page{position:relative;isolation:isolate;justify-items:start;padding:clamp(24px,8vw,144px);background-color:#dce9ff}.login-background{position:fixed;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.login-panel{position:relative;z-index:1}
.login-panel{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.9);box-shadow:0 20px 48px rgba(46,91,170,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.login-panel form .button{width:100%}
.home-banner-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-6)}.home-banner-picker{padding:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--neutral-2)}.home-banner-picker h3{margin:0 0 var(--space-4);font-size:14px}.home-banner-preview{overflow:hidden;aspect-ratio:5/1;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--neutral-3)}.home-banner-preview img{width:100%;height:100%;object-fit:cover}.home-banner-preview[hidden]{display:none}
.hero-background-picker{margin-top:var(--space-4)}.hero-background-preview{aspect-ratio:21/8}
.login-background-picker{max-width:960px}.login-background-preview{aspect-ratio:16/9}
.about-photo-picker{max-width:720px;margin-top:var(--space-4)}.about-photo-preview{aspect-ratio:16/10}.about-photo-preview img{object-fit:cover}
.wechat-qr-picker{max-width:720px}.wechat-qr-picker>a{color:var(--color-link);font-size:13px;font-weight:500}.wechat-qr-preview{width:240px;aspect-ratio:1}.wechat-qr-preview img{object-fit:contain;background:#fff}
.attachment-admin-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--space-6);align-items:start}.attachment-form .panel-head{margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6)}.attachment-form .panel-head a{color:var(--color-link);font-size:13px;font-weight:500}.attachment-file-note{margin:calc(var(--space-2) * -1) 0 var(--space-5);color:var(--color-text-secondary);font-size:12px;line-height:18px;overflow-wrap:anywhere}.attachment-icon-picker{margin:var(--space-6) 0;padding-top:var(--space-5);border-top:1px solid var(--color-border-subtle)}.attachment-icon-picker h3{margin:0;font-size:14px;line-height:22px}.attachment-icon-picker>p{margin:var(--space-1) 0 var(--space-4)}.attachment-icon-preview{width:88px;height:88px;overflow:hidden;border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--neutral-3)}.attachment-icon-preview img{width:100%;height:100%;object-fit:cover}.attachment-icon-preview[hidden]{display:none}
.admin-attachment-cell{display:flex;min-width:220px;align-items:center;gap:var(--space-3)}.admin-attachment-cell .attachment-icon{width:40px;height:40px;flex:none;border-radius:var(--radius-md)}.admin-attachment-cell .attachment-icon span{font-size:11px}.admin-attachment-copy{min-width:0}

@media (max-width: 1100px) {
  .back-to-top { left: auto; right: var(--space-6); bottom: 104px; }
  .attachment-grid { grid-template-columns: 1fr; }
  [data-home-links] .zcool-link:first-child { display: none; }
}

@media (max-width: 520px) {
  [data-home-links] .zcool-link { display: none; }
}

@media (max-width: 800px) {
  main, footer { width: 100%; }
  body.mobile-nav-open { overflow: hidden; }
  .site-header { grid-template-columns: 40px 1fr auto; padding-inline: var(--space-4); }
  .site-header .wordmark { position: absolute; left: 50%; justify-self: center; transform: translateX(-50%); }
  .wordmark > img { width: 28px; }
  .site-header nav, .detail-nav nav { display: none; }
  .site-header { min-height: 56px; padding-inline: var(--space-4); }
  .header-links { gap: var(--space-2); }
  .mobile-works-link, .site-header .brand-icon-link, .about-page .site-header .zcool-link { display: none; }
  .language-switch { margin-left: 0; font-size: 14px; }
  .mobile-menu-toggle, .mobile-menu-close { display: grid; width: 36px; height: 36px; padding: 8px; place-items: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); cursor: pointer; }
  .mobile-menu-toggle { grid-column: 1; justify-self: start; }
  .mobile-menu-toggle:hover, .mobile-menu-close:hover { background: var(--neutral-3); }
  .mobile-menu-toggle img, .mobile-menu-close img { width: 20px; height: 20px; }
  .mobile-nav-drawer { position: fixed; z-index: 40; inset: 0; background: rgba(30,31,36,.28); }
  .mobile-nav-drawer aside { width: min(82vw, 320px); height: 100%; padding: calc((56px - 36px) / 2) var(--space-4) var(--space-4); background: #fff; box-shadow: 12px 0 32px rgba(30,31,36,.14); }
  .mobile-menu-close { margin-bottom: var(--space-8); }
  .mobile-nav-drawer nav { display: grid; }
  .mobile-nav-drawer nav a { display: flex; min-height: 56px; align-items: center; padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-primary); font-size: 16px; line-height: 24px; font-weight: 500; }
  .mobile-nav-drawer nav a:hover, .mobile-nav-drawer nav a[aria-current="page"] { color: var(--color-link); background: var(--accent-2); }
  .hero { min-height: 720px; padding: 92px var(--space-4) var(--space-8); }
  .hero-visual { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
  .hero::after { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.86) 52%, rgba(255,255,255,0) 72%); }
  .hero-copy { width: 100%; min-height: 596px; }
  .hero h1 { margin-top: var(--space-8); max-width: 520px; font-size: 32px; line-height: 40px; }
  .hero-intro { max-width: 520px; margin-top: var(--space-5); font-size: 14px; line-height: 22px; }
  .hero-actions { margin-top: var(--space-6); }
  .hero-actions a { min-height: 42px; padding-inline: var(--space-4); }
  .hero-meta { width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); }
  .hero-meta > div { min-width: 0; padding-right: var(--space-2); }
  .hero-meta > div:first-child { grid-template-columns: auto; gap: 2px; }
  .hero-meta strong { font-size: 30px; }
  .hero-aside { display: none; }
  .works-section, .about, .attachments-section, .contact, .related { padding: var(--space-12) var(--space-4); }
  .wechat-section { padding: var(--space-12) var(--space-4); }
  .wechat-qr-frame { width: 220px; padding: 24px; }
  .contact { margin-block: var(--space-8); }
  .home-banner-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
  .section-label { grid-template-columns: var(--space-8) auto 1fr; }
  .home-section-label h2 { font-size: 24px; line-height: 32px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid h2, .contact-content h2 { font-size: 32px; line-height: 40px; }
  .about-page-main { padding-top: 56px; }
  .profile-section, .history-section { padding: var(--space-12) var(--space-4); }
  .profile-section { padding-top: var(--space-4); padding-bottom: var(--space-6); }
  .profile-layout { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-4); }
  .profile-layout > h1 { grid-column: auto; font-size: 24px; line-height: 32px; }
  .profile-photo { width: 100%; order: -1; margin-top: 0; }
  .history-row { grid-template-columns: 1fr; gap: var(--space-4); min-height: 0; }
  .history-section .section-label h2 { font-size: 24px; line-height: 32px; }
  .history-section .section-label::before, .history-row::before { display: none; }
  .history-section .section-label::after, .history-row::after { width: 100%; }
  .history-period { font-size: 16px; line-height: 24px; }
  .detail-nav { min-height: 56px; grid-template-columns: 1fr auto; padding-inline: var(--space-4); }
  .detail-back { min-height: 34px; padding-inline: var(--space-3); font-size: 12px; }
  .detail-hero { padding: 96px var(--space-4) var(--space-5); }
  .detail-info { padding: var(--space-10) var(--space-4); }
  .original-entry { align-items: flex-start; flex-direction: column; padding: var(--space-10) var(--space-4); }
  .related > div { grid-template-columns: 1fr; }
  .story{padding:var(--space-3) var(--space-4) var(--space-10)}.image-pair{grid-template-columns:1fr}.back-to-top{left:auto;right:var(--space-4);bottom:88px}
  footer { gap: var(--space-3); padding-inline: var(--space-4); }
  .admin-body{display:block}.admin-sidebar{position:sticky;top:0;z-index:20;width:100%;height:auto;padding:var(--space-2) var(--space-3);border-right:0;border-bottom:1px solid var(--color-border-subtle);flex-direction:row;align-items:center;gap:var(--space-3);overflow-x:auto}.admin-brand{flex:0 0 auto;padding:0}.admin-brand span,.admin-sidebar-foot{display:none}.admin-brand img{width:32px}.admin-sidebar nav{display:flex;flex:0 0 auto;gap:var(--space-1);margin:0}.admin-sidebar nav a{flex:0 0 auto;padding:0 var(--space-3);font-size:0}.admin-sidebar nav a::before{content:attr(data-short);font-size:12px}.admin-top{position:static}.admin-content{padding:var(--space-4)}.stats-grid{grid-template-columns:1fr 1fr;gap:var(--space-3)}.form-layout,.split-layout,.media-admin-layout,.attachment-admin-layout{grid-template-columns:1fr}.taxonomy-form,.media-folders{position:static}.media-folders{max-height:none;overflow:visible;scrollbar-gutter:auto}.field-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.media-grid{grid-template-columns:1fr 1fr}.form-actions{position:sticky;top:56px;z-index:5;padding:var(--space-2);background:var(--color-bg-app)}
}

@media(max-width:800px){.admin-sidebar nav a{gap:var(--space-2)}.admin-sidebar nav a::before{content:none}.admin-sidebar nav a span{font-size:12px}}

@media(max-width:800px){.attachments-layout{grid-template-columns:1fr}.attachments-scene{height:auto;min-height:0;aspect-ratio:4/3}}

@media(max-width:520px){.work-grid{grid-template-columns:1fr}.work-pagination{gap:4px}.work-pagination button{min-width:36px;height:40px}.work-card-body{min-height:112px}.attachment-item{grid-template-columns:56px minmax(0,1fr) auto;gap:var(--space-3)}.attachment-icon{width:56px;height:56px}.attachment-get{min-width:56px}.stats-grid,.media-grid{grid-template-columns:1fr}.admin-top{padding-inline:var(--space-4)}.admin-content{padding:var(--space-3)}.panel{border-radius:var(--radius-md)}.block-add-bar,.block-media-layout{grid-template-columns:1fr}.block-previews{height:180px}}
@media(max-width:520px){.history-company .attachment-icon{width:56px;height:56px}.history-position{margin-left:72px}}

@media(max-width:680px){.login-page{justify-items:center;padding:var(--space-4);background-position:62% center}.login-panel{background:rgba(255,255,255,.94)}}

.folder-context-actions form>button:disabled{background:transparent;color:var(--color-text-tertiary);cursor:not-allowed}
.folder-create-toggle{position:relative;font-size:0}.folder-create-toggle::before,.folder-create-toggle::after{position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:1px;background:currentColor;content:"";transform:translate(-50%,-50%)}.folder-create-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
.folder-head-actions{display:flex;align-items:center;gap:var(--space-1)}.group-create-toggle{display:grid;width:32px;height:32px;padding:0;place-items:center;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-link);cursor:pointer}.group-create-toggle:hover,.group-create-toggle[aria-expanded="true"]{background:var(--accent-3)}.folder-icon{width:16px;height:16px;flex:0 0 auto}.group-create-popover{position:absolute;z-index:12;top:calc(100% + 8px);right:8px;width:208px;padding:var(--space-4);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:#fff;box-shadow:0 12px 32px rgba(30,31,36,.14)}.group-create-popover label,.group-rename-form label,.folder-group-form label{margin:0}.group-create-popover>div,.group-rename-form>div,.folder-group-form>div{display:flex;gap:var(--space-2);margin-top:var(--space-3)}.group-create-popover .button,.group-rename-form .button,.folder-group-form .button{min-height:34px;padding-inline:var(--space-3)}.folder-create-popover label+label{margin-top:var(--space-3)}.media-folder-group{min-width:0}.media-group-row{display:flex;width:100%;min-width:0;min-height:40px;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0 var(--space-3);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-primary);font:inherit;font-weight:600;cursor:context-menu}.media-group-row>span{display:flex;min-width:0;align-items:center;gap:var(--space-2)}.media-group-row>span>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-group-row:hover{background:var(--neutral-3)}.media-group-row strong{flex:0 0 auto;color:var(--color-text-secondary);font-size:12px;font-weight:500}.media-group-items{display:grid}.media-group-items>a{padding-left:var(--space-8)!important}.media-group-empty,.media-ungrouped-label{margin:0;padding:var(--space-1) var(--space-3) var(--space-1) var(--space-8);color:var(--neutral-10);font-size:12px}.media-ungrouped-label{padding-top:var(--space-3);font-weight:500}.group-context-menu{position:fixed;z-index:40;width:220px;padding:var(--space-1);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:#fff;box-shadow:0 12px 32px rgba(30,31,36,.14)}.group-context-actions>button,.group-context-actions form>button{display:flex;width:100%;min-height:36px;align-items:center;padding:0 var(--space-3);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-primary);font:inherit;cursor:pointer}.group-context-actions>button:hover,.group-context-actions form>button:hover{background:var(--neutral-3)}.group-context-actions form{margin:0}.group-context-actions form>button.danger-text{color:#b4232a}.group-context-actions form>button:disabled{background:transparent;color:var(--neutral-10);cursor:not-allowed}.group-rename-form,.folder-group-form{padding:var(--space-2)}
.media-group-row{position:relative;padding-right:calc(var(--space-3) + 14px);cursor:pointer}.media-group-row::after{position:absolute;top:50%;right:var(--space-3);width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;content:"";transform:translateY(-70%) rotate(45deg)}.media-group-row[aria-expanded="false"]::after{transform:translateY(-50%) rotate(-45deg)}.media-group-items[hidden]{display:none}
.media-folders{display:flex;flex-direction:column;max-height:calc(100vh - 104px);padding-bottom:var(--space-2);overflow:visible;scrollbar-gutter:auto}.media-folders>.folder-panel-head{flex-shrink:0;z-index:1;background:var(--color-bg-surface)}.media-folders>nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:var(--neutral-8) transparent;scrollbar-width:thin}
.panel:has(> .table-wrap),.panel:has(> .work-filters){overflow:hidden}.media-folders>.folder-panel-head{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.edit-form .panel-head{flex-wrap:wrap}.block-bulk-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}.block-bulk-actions .button{white-space:nowrap}.block-head{gap:var(--space-2);flex-wrap:wrap}.block-actions{flex:0 0 auto}.block-actions button{width:32px;min-width:32px;padding:0;white-space:nowrap;font-size:12px}.block-actions button:hover{background:var(--accent-3);border-color:var(--color-primary);color:var(--color-link)}
.block-insert-bar{grid-template-columns:minmax(0,1fr) auto auto;margin:var(--space-3) 0;padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--neutral-2)}
.media-result-actions{display:flex;align-items:center;gap:var(--space-3)}.media-result-actions form{margin:0}.media-result-actions .button{min-height:32px;padding-inline:var(--space-3)}
.work-inline-year,.work-inline-status{margin:0}.work-inline-year input{width:100px;min-height:32px;padding:var(--space-1) var(--space-2);font-variant-numeric:tabular-nums}.work-status-toggle{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);margin:0;min-height:32px;white-space:nowrap;cursor:pointer;font-weight:500}.work-status-toggle input{position:absolute;width:36px;height:20px;min-height:20px;margin:0;opacity:0;cursor:pointer}.work-switch{position:relative;display:inline-block;width:36px;height:20px;border-radius:999px;background:var(--neutral-7);transition:background 100ms}.work-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:var(--color-bg-surface);transition:transform 100ms}.work-status-toggle input:checked+.work-switch{background:var(--color-primary)}.work-status-toggle input:checked+.work-switch::after{transform:translateX(16px)}.work-status-toggle:hover .work-switch{background:var(--neutral-8)}.work-status-toggle:hover input:checked+.work-switch{background:var(--color-primary-hover)}.work-status-toggle input:focus-visible+.work-switch{outline:2px solid var(--color-focus-ring);outline-offset:2px}.work-status-toggle input:disabled+.work-switch{opacity:.6}
@media(max-width:1350px){.edit-form .form-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.block-bulk-actions{width:100%;justify-content:flex-start}.block-actions{flex-wrap:wrap;justify-content:flex-end}.block-insert-bar{grid-template-columns:1fr 1fr}.block-insert-bar select{grid-column:1/-1}}
.media-dropzone{transition:background-color var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}.media-dropzone.is-dragover{border-color:var(--color-focus-ring);background:var(--accent-3)}.media-dropzone .button{margin-top:var(--space-4)}
.media-dropzone-icon{display:block;width:var(--space-10);height:var(--space-10);margin:0 auto var(--space-4);color:var(--neutral-9)}
.group-folder-create-form{padding:var(--space-2)}.group-folder-create-form label{margin:0}.group-folder-create-form>div{display:flex;gap:var(--space-2);margin-top:var(--space-3)}.group-folder-create-form .button{min-height:34px;padding-inline:var(--space-3)}
.admin-modal{width:min(calc(100vw - 32px),560px);max-height:min(86vh,760px);padding:0;overflow:hidden;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:#fff;box-shadow:0 24px 64px rgba(30,31,36,.24)}.admin-modal::backdrop{background:rgba(30,31,36,.46)}.admin-modal-card{display:flex;max-height:min(86vh,760px);flex-direction:column}.admin-modal-head{display:flex;min-height:64px;align-items:center;justify-content:space-between;padding:0 var(--space-6);border-bottom:1px solid var(--color-border-subtle)}.admin-modal-head h2{margin:0;font-size:18px;line-height:26px}.admin-modal-close{display:grid;width:32px;height:32px;padding:0;place-items:center;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-secondary);font-size:24px;line-height:1;cursor:pointer}.admin-modal-close:hover{background:var(--neutral-3);color:var(--color-text-primary)}.admin-modal-body{padding:var(--space-6);overflow-y:auto}.admin-modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border-subtle);background:var(--neutral-2)}
.page-actions .button{white-space:nowrap}
.works-banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,36%);align-items:center;gap:var(--space-6);min-height:184px;margin-bottom:var(--space-6);padding:var(--space-5) 32px;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(110deg,var(--color-admin-banner-start),var(--color-admin-banner-end));color:#fff}
.works-banner-copy{min-width:0}.works-banner h2{max-width:560px;margin:0;color:#fff;font-size:26px;line-height:34px}.works-banner-description{max-width:560px;margin:var(--space-2) 0 0;color:#eaf3ff;font-size:14px;line-height:22px}.works-banner-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}.works-banner-link{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:var(--space-2);padding:0 var(--space-4);border:1px solid #fff;border-radius:var(--radius-md);font-size:14px;font-weight:600;line-height:20px;white-space:nowrap}.works-banner-link-primary{background:#fff;color:#1749a5}.works-banner-link-primary:hover{background:#edf5ff;color:#1749a5}.works-banner-link svg{width:18px;height:18px;flex:none}
.works-banner-preview{position:relative;justify-self:end;width:min(100%,332px);height:146px}.works-banner-browser{position:absolute;top:10px;bottom:6px;left:50%;width:min(205px,calc(100% - 82px));transform:translateX(-50%);border:1px solid rgba(255,255,255,.8);border-radius:7px;background:#f7faff;box-shadow:0 10px 24px rgba(12,43,101,.22);overflow:hidden}.works-banner-browser-top{display:flex;height:21px;align-items:center;gap:10px;padding:0 9px;border-bottom:1px solid #dce7f6;background:#eaf1fc}.works-banner-browser-dots{width:5px;height:5px;border-radius:50%;background:#8ba9cf;box-shadow:8px 0 #8ba9cf,16px 0 #8ba9cf}.works-banner-browser-address{width:42%;height:6px;margin:auto;border-radius:3px;background:#d2e0f2}.works-banner-browser-body{height:calc(100% - 21px);padding:8px 10px}.works-banner-article-kicker,.works-banner-article-title,.works-banner-article-copy i{display:block;border-radius:3px;background:#c5d5eb}.works-banner-article-kicker{width:28%;height:4px;background:#4e82d1}.works-banner-article-title{width:76%;height:7px;margin-top:7px;background:#91b2de}.works-banner-article-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;margin-top:8px}.works-banner-article-cover{display:block;width:62px;height:58px;border-radius:3px;background:linear-gradient(90deg,#91b2de,#91b2de)}.works-banner-article-copy{display:grid;align-content:start;gap:7px;padding-top:3px}.works-banner-article-copy i{height:5px}.works-banner-article-copy i:nth-child(2){width:88%}.works-banner-article-copy i:nth-child(3){width:96%}.works-banner-article-copy i:nth-child(4){width:64%}.works-banner-preview-icon{position:absolute;z-index:1;display:grid;place-items:center;border:1px solid #dbeaff;border-radius:10px;background:#fff;box-shadow:0 5px 14px rgba(12,43,101,.18);color:#2463be}.works-banner-preview-icon svg{width:55%;height:55%}.works-banner-preview-icon.icon-mobile{top:34px;left:10px;width:48px;height:48px;transform:rotate(-7deg)}.works-banner-preview-icon.icon-desktop{top:0;right:54px;width:36px;height:36px;transform:rotate(7deg)}.works-banner-preview-icon.icon-visual{bottom:0;left:28px;width:38px;height:38px;transform:rotate(6deg)}.works-banner-preview-icon.icon-3d{right:1px;bottom:23px;width:44px;height:44px;transform:rotate(-6deg)}
.history-banner .works-banner-link{cursor:pointer}.history-banner-timeline{position:absolute;top:5px;left:50%;width:min(218px,calc(100% - 72px));height:136px;padding:13px 16px 12px 18px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.8);border-radius:7px;background:#f7faff;box-shadow:0 10px 24px rgba(12,43,101,.22)}.history-banner-timeline::before{position:absolute;top:43px;bottom:18px;left:23px;width:2px;background:#c5d5eb;content:""}.history-banner-timeline-heading{display:block;width:64px;height:6px;margin-left:28px;border-radius:3px;background:#91b2de}.history-banner-timeline-row{position:relative;display:block;height:28px;margin-top:10px}.history-banner-timeline-row i{position:absolute;z-index:1;top:3px;left:0;width:11px;height:11px;border:2px solid #6a9be5;border-radius:50%;background:#f7faff}.history-banner-timeline-row b,.history-banner-timeline-row em{display:block;height:5px;margin-left:28px;border-radius:3px;background:#c5d5eb}.history-banner-timeline-row b{width:72%;background:#91b2de}.history-banner-timeline-row em{width:52%;margin-top:6px}.history-banner-timeline-row:nth-child(3) b{width:61%}.history-banner-timeline-row:nth-child(4) b{width:82%}.history-banner-icon-calendar{top:12px;left:11px;width:42px;height:42px;transform:rotate(-7deg)}.history-banner-icon-briefcase{right:9px;bottom:14px;width:47px;height:47px;transform:rotate(6deg)}
:is(.history-banner,.category-banner,.tag-banner,.attachment-banner){border:1px solid color-mix(in srgb,var(--accent-12) 20%,transparent);background:linear-gradient(110deg,var(--neutral-3),var(--accent-4));color:var(--color-text-primary)}
:is(.history-banner,.category-banner,.tag-banner,.attachment-banner) h2{color:var(--accent-12)}
:is(.history-banner,.category-banner,.tag-banner,.attachment-banner) .works-banner-description{color:var(--color-text-secondary)}
:is(.history-banner,.category-banner,.tag-banner,.attachment-banner) .works-banner-link-primary{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-text-inverse)}
:is(.history-banner,.category-banner,.tag-banner,.attachment-banner) .works-banner-link-primary:hover{border-color:var(--color-primary-hover);background:var(--color-primary-hover);color:var(--color-text-inverse)}
.category-banner .works-banner-link,.tag-banner .works-banner-link,.attachment-banner .works-banner-link{cursor:pointer}
.category-banner,.tag-banner,.attachment-banner{min-height:208px}
.category-banner .manage-banner-preview,.tag-banner .manage-banner-preview,.attachment-banner .manage-banner-preview{height:164px}
.manage-banner-sheet{position:absolute;top:8px;left:50%;width:min(218px,calc(100% - 72px));height:148px;overflow:hidden;transform:translateX(-50%);border:1px solid rgba(255,255,255,.8);border-radius:7px;background:var(--accent-2);box-shadow:0 10px 24px rgba(12,43,101,.22)}.manage-banner-sheet-row{display:flex;height:32px;align-items:center;gap:var(--space-3);margin:3px 10px 0;padding:0 8px;border-radius:var(--radius-md);background:var(--color-bg-surface)}.manage-banner-sheet-row:nth-child(2){margin-top:14px}.manage-banner-sheet-row i{display:block;width:18px;height:16px;flex:none;border-radius:var(--radius-md);background:var(--accent-5)}.manage-banner-sheet-row b{display:block;width:68%;height:6px;border-radius:var(--radius-md);background:var(--accent-6)}.manage-banner-sheet-row:nth-child(3) b{width:53%}.manage-banner-sheet-row:nth-child(4) b{width:76%}.manage-banner-icon{top:12px;left:11px;width:42px;height:42px;transform:rotate(-7deg)}.manage-banner-icon-secondary{right:9px;bottom:14px;width:47px;height:47px;transform:rotate(6deg)}.tag-banner .manage-banner-sheet-row i{width:38px;height:15px;border-radius:var(--radius-lg);background:var(--accent-6)}.attachment-banner .manage-banner-sheet-row i{height:20px;border-radius:2px;background:var(--accent-6)}
.work-filters{display:grid;grid-template-columns:minmax(200px,1.3fr) repeat(3,minmax(120px,.7fr)) auto;align-items:end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border-subtle);background:var(--neutral-1)}.work-filters label{min-width:0;margin:0;font-size:13px}.work-filter-actions{display:flex;align-items:center;gap:var(--space-2)}.work-filter-actions .button{white-space:nowrap}
.admin-work-cell{display:flex;min-width:280px;align-items:center;gap:var(--space-4)}.admin-work-cover{position:relative;display:block;flex:0 0 96px;width:96px;overflow:hidden;aspect-ratio:4/3;border-radius:var(--radius-sm);background:var(--neutral-3)}.admin-work-cover > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:calc(50% - var(--cover-x,0%)) calc(50% - var(--cover-y,0%));transform:translate(var(--cover-pan-x,0%),var(--cover-pan-y,0%)) scale(var(--cover-zoom,1))}.admin-work-info{min-width:0}.admin-work-info strong,.admin-work-info small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-work-info strong{display:block}
.table-actions,.media-card-actions{display:flex;align-items:center;gap:16px;white-space:nowrap}.table-actions{min-width:88px;justify-content:flex-start}.table-actions form,.media-card-actions,.media-card-actions form{margin:0}.action-table th:last-child,.action-table td:last-child:not([colspan]){position:sticky;right:0;width:120px;min-width:120px;padding-right:var(--space-4);padding-left:var(--space-4);text-align:left;box-shadow:-1px 0 0 var(--color-border-subtle)}.action-table th:last-child{z-index:3;background:var(--neutral-2)}.action-table td:last-child:not([colspan]){z-index:2;background:var(--color-bg-surface)}.action-table tbody tr:hover td:last-child:not([colspan]){background:var(--neutral-2)}.action-icon{display:inline-grid;width:36px;height:36px;padding:0;place-items:center;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer}.action-icon.action-preview,.action-icon.action-edit,.action-icon.action-download{color:var(--color-link)}.action-icon.action-delete{color:#b4232a}.action-icon.action-preview:hover,.action-icon.action-edit:hover,.action-icon.action-download:hover{background:var(--accent-3)}.action-icon.action-delete:hover{background:#fff0f0}.action-icon:focus-visible{outline:3px solid var(--accent-3);outline-offset:1px}.action-icon-svg{width:20px;height:20px}.media-card .media-card-actions{justify-content:space-between;margin-top:var(--space-2);padding:0}

@media(max-width:1100px){.work-filters{grid-template-columns:1fr 1fr}.work-filter-query,.work-filter-actions{grid-column:1/-1}.work-filter-actions{justify-content:flex-end}}
@media(max-width:950px){.works-banner{grid-template-columns:1fr;min-height:0;padding:var(--space-6)}.works-banner-preview{display:none}}
@media(max-width:520px){.works-banner h2{font-size:21px;line-height:28px}.works-banner-actions{gap:var(--space-2)}.works-banner-link{padding-inline:var(--space-3)}}

@media(max-width:520px){.work-filters{grid-template-columns:1fr;padding:var(--space-4)}.work-filter-query,.work-filter-actions{grid-column:auto}.work-filter-actions{justify-content:stretch}.work-filter-actions .button{flex:1}}

.admin-settings-page .admin-content{max-width:none;padding-bottom:96px}
.settings-save-bar{position:fixed;right:0;bottom:0;left:240px;z-index:11;padding:12px var(--space-6) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--color-border-subtle);background:var(--color-bg-surface)}
.settings-save-bar[hidden]{display:none}
.settings-save { gap: 8px; }
.settings-save svg { width: 18px; height: 18px; flex: none; }
@media(max-width:800px){.settings-save-bar{left:0}}
@media(max-width:520px){.settings-save-bar{padding-inline:var(--space-3)}}
.admin-notices{position:fixed;top:calc(56px + var(--space-4));left:50%;z-index:30;display:grid;justify-items:center;gap:var(--space-3);width:max-content;max-width:min(560px,calc(100vw - 32px));transform:translateX(-50%);pointer-events:none}
.admin-notices .notice{display:flex;align-items:center;gap:var(--space-3);width:max-content;max-width:min(560px,calc(100vw - 32px));min-height:64px;margin:0;padding:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-bg-surface);color:var(--color-text-primary);box-shadow:0 12px 28px rgba(30,31,36,.16);pointer-events:auto;transition:opacity 350ms ease-out,transform 350ms ease-out}
.admin-notices .notice.is-exiting{opacity:0;transform:translateY(-8px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.admin-notices .notice{transition:none}}
.notice-icon{display:grid;flex:none;width:28px;height:28px;place-items:center;border-radius:50%;color:#fff;font-size:18px;font-weight:700;line-height:1}
.admin-notices .notice.success .notice-icon{background:#2aa173}
.admin-notices .notice.error .notice-icon{background:#d94841}
.notice-message{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere}
.admin-settings-page .about-settings{margin-top:0}
.about-settings-add summary{color:var(--color-link);font-weight:600}
.about-settings-add summary:hover{color:var(--color-link-hover)}
.about-settings-add summary svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.about-tool-settings .about-settings-entry summary strong{flex:1;min-width:0}
.about-tool-settings .about-settings-entry summary span{flex:0 0 72px;margin-left:0;text-align:left}
.about-tool-settings .about-settings-entry summary::after{flex:0 0 16px;margin-left:0;text-align:right}
.settings-tabs-shell{position:sticky;top:56px;z-index:9;display:flex;min-width:0;margin:calc(var(--space-6)*-1) calc(var(--space-6)*-1) var(--space-6);border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg-surface)}
.settings-tab-symbol{position:absolute;width:0;height:0;overflow:hidden}
.settings-tabs{display:flex;flex:1;gap:var(--space-1);overflow-x:auto;min-width:0;padding:0 var(--space-2);scrollbar-width:none}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tabs-arrow{position:relative;z-index:1;flex:none;width:40px;min-height:48px;border:0;background:var(--color-bg-surface);box-shadow:var(--shadow-md);color:var(--color-text-secondary);font-size:24px;line-height:1;cursor:pointer}
.settings-tabs-arrow[data-settings-scroll="previous"]{border-right:1px solid var(--color-border-subtle)}
.settings-tabs-arrow[data-settings-scroll="next"]{border-left:1px solid var(--color-border-subtle)}
.settings-tabs-arrow[data-english-scroll="previous"]{border-right:1px solid var(--color-border-subtle)}
.settings-tabs-arrow[data-english-scroll="next"]{border-left:1px solid var(--color-border-subtle)}
.settings-tabs-arrow:hover:not(:disabled){background:var(--neutral-3);color:var(--color-text-primary)}
.settings-tabs-arrow:active:not(:disabled){background:var(--neutral-4)}
.settings-tabs-arrow:disabled{color:var(--neutral-9);cursor:default}
.settings-tab{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-3);border-bottom:2px solid transparent;color:var(--color-text-secondary);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap}
.settings-tab svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-tab:hover{background:var(--neutral-3);color:var(--color-text-primary)}
.settings-tab:active{background:var(--neutral-4)}
.settings-tab[aria-selected="true"]{border-bottom-color:var(--accent-9);color:var(--accent-11)}
.settings-tab[aria-selected="true"]:hover{background:var(--accent-2)}
.settings-panel[hidden],.about-settings[hidden],.settings-save[hidden]{display:none}
@media(max-width:800px){.settings-tabs-shell{top:calc(56px + var(--space-4));margin-top:calc(var(--space-4)*-1);margin-inline:calc(var(--space-4)*-1)}}
@media(max-width:520px){.settings-tabs-shell{margin-top:calc(var(--space-3)*-1);margin-inline:calc(var(--space-3)*-1)}}

.dashboard-symbols{position:absolute;width:0;height:0;overflow:hidden}
.dashboard-metrics,.dashboard-panels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6);margin-bottom:var(--space-6)}
.dashboard-panels{--mobile-chart:#8b5cf6}
.dashboard-metric{position:relative;grid-column:span 2;display:flex;align-items:flex-start;gap:var(--space-3);min-width:0;padding:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-bg-surface)}
.dashboard-metric span:not(.metric-icon){display:block;color:var(--color-text-secondary);font-size:12px;line-height:18px;white-space:nowrap}
.dashboard-metric strong{display:block;margin-top:var(--space-2);font-size:24px;line-height:32px;font-weight:600;font-variant-numeric:tabular-nums}
.dashboard-metric span.metric-icon-box{display:grid;flex:none;width:40px;height:40px;place-items:center;border-radius:var(--radius-lg);background:var(--accent-3)}
.metric-icon{flex:none;width:24px;height:24px;fill:none;stroke:var(--color-link);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dashboard-metric.metric-published span.metric-icon-box{background:linear-gradient(180deg,#5bc781,#2ca75e)}
.dashboard-metric.metric-categories span.metric-icon-box{background:linear-gradient(180deg,#79a7fb,#3b7bff)}
.dashboard-metric.metric-media span.metric-icon-box{background:linear-gradient(180deg,#ffa04a,#f27912)}
.dashboard-metric.metric-attachments span.metric-icon-box{background:linear-gradient(180deg,#b990fa,#9b6cf5)}
.dashboard-metric:not(.visitor-metric) .metric-icon{stroke:#fff}
.visitor-metric{grid-column:span 4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start}
.metric-main{display:flex;align-items:flex-start;gap:var(--space-3);min-width:0}
.visitor-metric{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-text-inverse)}
.dashboard-metric.visitor-metric span.metric-icon-box{background:var(--color-bg-surface)}.visitor-metric .metric-icon{fill:var(--color-primary);stroke:none}
.visitor-metric span:not(.metric-icon){color:var(--color-text-inverse)}
.visitor-detail{min-width:0}
.metric-comparison{display:flex;flex-wrap:wrap;column-gap:var(--space-3);margin:0;color:var(--color-text-inverse);font-size:12px;line-height:18px;white-space:nowrap}
.metric-comparison span{display:block}
.visitor-sparkline{display:block;width:100%;height:32px;margin-top:var(--space-2);overflow:visible}
.visitor-sparkline path{fill:none;stroke:var(--color-text-inverse);stroke-width:2}
.dashboard-panels .panel{min-width:0;overflow:hidden}
.dashboard-traffic,.dashboard-categories{grid-column:span 8}.dashboard-device,.dashboard-ranking{grid-column:span 4}
.dashboard-traffic,.dashboard-device{display:flex;flex-direction:column}
.dashboard-panels .panel-head{min-height:var(--space-16);padding:var(--space-3) var(--space-4)}
.dashboard-panels .panel-head h2{display:flex;align-items:center;gap:var(--space-2)}
.dashboard-heading-icon{flex:none;width:20px;height:20px;fill:none;stroke:var(--color-link);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chart-content{display:flex;min-height:232px;flex-direction:column;justify-content:center;padding:var(--space-4)}
.dashboard-traffic .chart-content,.dashboard-device .chart-content{flex:1}
.chart-range{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--color-text-secondary);font-size:12px;white-space:nowrap}
.chart-range select{width:108px;min-height:32px;padding:4px 8px;font-size:12px}
.traffic-chart{display:block;width:100%;height:auto;min-height:160px}
.traffic-plot{position:relative}
.chart-gridline{fill:none;stroke:var(--color-border-subtle);stroke-dasharray:3 4}
.chart-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart-line.desktop{stroke:var(--color-primary)}.chart-line.mobile{stroke:var(--mobile-chart)}
.chart-dot.desktop{fill:var(--color-primary)}.chart-dot.mobile{fill:var(--mobile-chart)}
.traffic-chart text{fill:var(--color-text-secondary);font-size:12px}
.traffic-crosshair{fill:none;stroke:var(--neutral-7);stroke-width:1}
.traffic-focus[hidden]{display:none}
.traffic-focus-dot{fill:var(--color-bg-surface);stroke-width:3}
.traffic-focus-dot.desktop{stroke:var(--color-primary)}.traffic-focus-dot.mobile{stroke:var(--mobile-chart)}
.traffic-tooltip{position:absolute;z-index:2;min-width:160px;padding:var(--space-3);border-radius:var(--radius-md);background:#454e70;box-shadow:0 8px 20px #141b3833;color:#fff;font-size:12px;line-height:20px;pointer-events:none}
.traffic-tooltip[hidden]{display:none}
.traffic-tooltip-date{margin-bottom:var(--space-1);font-weight:600}
.traffic-tooltip .legend-swatch{margin-right:var(--space-2)}
.chart-legend{display:flex;justify-content:center;gap:var(--space-4);margin-top:var(--space-4);color:var(--color-text-secondary);font-size:12px;white-space:nowrap}
.dashboard-traffic .chart-legend,.dashboard-device .chart-legend{margin-top:auto;padding-top:var(--space-4)}
.legend-swatch{display:inline-block;width:8px;height:8px;margin-right:var(--space-2);border-radius:50%;vertical-align:middle}
.legend-swatch.desktop{background:var(--color-primary)}.legend-swatch.mobile{background:var(--mobile-chart)}
.device-donut{display:block;width:min(100%,160px);margin:auto}
.donut-track,.donut-desktop{fill:none;stroke-width:16}
.donut-track{stroke:var(--mobile-chart)}.donut-desktop{stroke:var(--color-primary)}
.donut-separator{fill:none;stroke:var(--color-bg-surface);stroke-width:18}
.device-donut text{fill:var(--color-text-primary);font-size:18px;font-weight:600}
.chart-empty{display:grid;min-height:152px;place-items:center;color:var(--color-text-secondary)}
.dashboard-categories{display:flex;flex-direction:column}
.dashboard-categories .chart-content{flex:1;justify-content:stretch;padding-bottom:var(--space-3)}
.category-chart{display:flex;flex:1;align-items:stretch;gap:var(--space-3);min-width:100%;overflow-x:auto;background:linear-gradient(var(--color-border-subtle),var(--color-border-subtle)) left bottom 26px/100% 1px no-repeat}
.category-bar{display:flex;flex:1 0 76px;max-width:92px;min-width:76px;flex-direction:column;align-items:center;text-align:center}
.bar-track{position:relative;flex:1;width:100%;min-height:140px;margin-bottom:var(--space-2)}
.bar-plot{position:absolute;inset:24px 0 0}
.bar-count{position:absolute;bottom:calc(var(--bar-height) + 6px);left:0;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.bar-plot i{position:absolute;bottom:0;left:50%;display:block;width:38%;height:var(--bar-height);transform:translateX(-50%);background:var(--color-primary)}
.bar-label{display:-webkit-box;max-width:100%;height:18px;overflow:hidden;color:var(--color-text-secondary);font-size:12px;line-height:18px;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.dashboard-ranking .table-wrap{max-width:100%;overflow:hidden}
.dashboard-ranking table{width:100%;min-width:0;table-layout:fixed}
.dashboard-ranking th,.dashboard-ranking td{padding-inline:var(--space-2)}
.dashboard-ranking th:first-child{width:52px}.dashboard-ranking th:last-child{width:96px}
.dashboard-ranking td:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-ranking td:nth-child(2) a{display:block;overflow:hidden;color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap}
.dashboard-ranking td:nth-child(2) a:hover{color:var(--color-link)}
.dashboard-ranking tbody{counter-reset:rank}
.rank-number::before{display:grid;width:24px;height:24px;place-items:center;border-radius:var(--radius-md);background:var(--neutral-3);color:var(--color-text-secondary);content:counter(rank);counter-increment:rank;font-variant-numeric:tabular-nums;font-weight:600}
.dashboard-ranking tbody tr:nth-child(1){background:#fff5f5}.dashboard-ranking tbody tr:nth-child(2){background:#fff8ef}.dashboard-ranking tbody tr:nth-child(3){background:#fffdf0}
.dashboard-ranking tbody tr:nth-child(1) .rank-number::before{background:#f53f3f;color:#fff}
.dashboard-ranking tbody tr:nth-child(2) .rank-number::before{background:#ff7d00;color:#fff}
.dashboard-ranking tbody tr:nth-child(3) .rank-number::before{background:#f7ba1e;color:#fff}
.rank-views{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--color-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-views .view-eye-icon{flex:none}
.work-views,.detail-views{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
.work-views{flex:none;margin:0}
.detail-views{margin:0}
.view-eye-icon{flex:none;width:16px;height:16px}
@media(max-width:1180px){.dashboard-metric{grid-column:span 4}.visitor-metric{grid-column:span 8}}
@media(max-width:1100px){.dashboard-panels .panel{grid-column:span 12}}
@media(max-width:800px){.dashboard-metrics,.dashboard-panels{gap:var(--space-4);margin-bottom:var(--space-4)}.dashboard-metric{grid-column:span 6}.visitor-metric{grid-column:span 12}}
@media(max-width:520px){.dashboard-metric{padding:var(--space-3);gap:var(--space-2)}.dashboard-metric span.metric-icon-box{width:32px;height:32px}.metric-icon{width:20px;height:20px}.dashboard-metric strong{font-size:24px}.visitor-metric .metric-main{gap:var(--space-2)}.dashboard-traffic .panel-head{align-items:flex-start;flex-direction:column}.chart-content{padding:var(--space-3)}.dashboard-ranking th,.dashboard-ranking td{padding-inline:var(--space-2)}}

@media(max-width:1180px){
  .works-list-wrap{overflow:hidden}
  .works-list-wrap table,.works-list-wrap tbody{display:block;width:100%;min-width:0}
  .works-list-wrap thead{display:none}
  .works-list-wrap tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-2);border-top:1px solid var(--color-border-subtle)}
  .works-list-wrap td{display:flex;min-width:0;height:auto;align-items:center;gap:var(--space-2);padding:var(--space-2);border:0;font-size:13px}
  .works-list-wrap td:first-child,.works-list-wrap td[colspan]{grid-column:1/-1}
  .works-list-wrap td:first-child{padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border-subtle)}
  .works-list-wrap td[data-label]::before{content:attr(data-label);flex:none;color:var(--color-text-secondary);font-size:12px}
  .works-list-wrap .admin-work-cell{min-width:0;width:100%}
  .works-list-wrap .admin-work-cover{flex-basis:64px;width:64px}
  .works-list-wrap .work-inline-year input{width:88px}
  .works-list-wrap .action-table td:last-child:not([colspan]){position:static;width:auto;min-width:0;padding:var(--space-2);box-shadow:none}
  .works-list-wrap .table-actions{min-width:0}
}

.story-image-open{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;text-align:left}
.story-image-open img{display:block;max-width:100%;height:auto}
.story-image-open:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:4px;border-radius:var(--radius-lg)}
.detail-image-viewer .image-viewer-stage img{cursor:zoom-in}
.detail-image-viewer[data-native-zoom="true"] .image-viewer-stage img{cursor:zoom-out}
.detail-image-viewer>.viewer-close{display:grid;place-items:center;padding:0;line-height:1}
.detail-image-viewer>.viewer-count{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:6px;background:#000;color:#fff;font-size:16px;line-height:20px;white-space:nowrap}
.detail-image-viewer>.viewer-prev,.detail-image-viewer>.viewer-next{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:38px;height:56px;padding:0;transform:translateY(-50%);border:0;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-size:38px;line-height:1;cursor:pointer}
.detail-image-viewer>.viewer-prev{left:8px}
.detail-image-viewer>.viewer-next{right:8px}
.detail-image-viewer>.viewer-prev:disabled,.detail-image-viewer>.viewer-next:disabled{opacity:.3;cursor:default}
.detail-image-viewer>.viewer-prev[hidden],.detail-image-viewer>.viewer-next[hidden]{display:none}
.detail-nav{grid-template-columns:1fr auto}
.detail-nav .detail-back{justify-self:start}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.english-form h3 { margin: 32px 0 12px; font-size: 18px; }
.english-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--color-border-subtle); }
.english-row small { display: block; margin-bottom: 8px; color: var(--color-text-secondary); }
.english-row p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.english-row textarea { width: 100%; min-height: 76px; box-sizing: border-box; }
.english-form > button { margin-top: 24px; }
@media (max-width: 700px) { .english-row { grid-template-columns: 1fr; } }
.hero h1[data-en]:lang(en), .about-heading h2[data-en], .profile-body[data-en]:lang(en) { white-space: pre-line; }
.media-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.media-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-meta > span:last-child { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }