:root {
  color-scheme: dark;
  --bg: #0b111b;
  --sidebar: #0d1420;
  --surface: #151e2b;
  --surface-raised: #1a2635;
  --surface-soft: #101925;
  --line: #293647;
  --line-strong: #3a4b60;
  --ink: #f3f5f8;
  --muted: #8e9cac;
  --quiet: #617388;
  --accent: #ff8a4b;
  --accent-dark: #e3743d;
  --teal: #57c7bf;
  --shadow: 0 18px 50px rgba(0, 0, 0, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 "Segoe UI", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 70% 0%, rgba(47, 90, 103, .12), transparent 45%), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px); background-size: auto, 36px 36px, 36px 36px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .72; }
img { display: block; }
h1, h2, h3, p { margin-top: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shell { min-height: 100vh; display: flex; }
.sidebar { width: 250px; min-width: 250px; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 27px 16px 18px; background: var(--sidebar); border-right: 1px solid #263346; z-index: 4; }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 10px 33px; }
.brand-mark, .login-brand-mark { display: grid; place-items: center; position: relative; width: 43px; height: 43px; flex: none; border: 1px solid #ffad74; border-radius: 12px; background: linear-gradient(135deg,#ff9c5d,#e86938); box-shadow: 0 0 27px rgba(255,138,75,.22); color: #131823; font-size: 25px; font-weight: 900; line-height: 1; }
.brand-spark { position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); border: 2px solid var(--sidebar); }
.brand-word strong { display: block; color: #fff; letter-spacing: .18em; font-size: 15px; line-height: 1.1; }
.brand-dot, .heading-accent { color: var(--accent); }
.brand-word small { display: block; color: #667f92; font-size: 8px; letter-spacing: .14em; margin-top: 6px; white-space: nowrap; }
.side-workspace { min-height: 66px; display: flex; align-items: center; gap: 11px; margin: 0 3px 32px; padding: 10px 11px; border: 1px solid #2b3a4d; border-radius: 10px; background: linear-gradient(120deg,#1b2938,#152130); }
.side-workspace-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 7px; color: var(--teal); background: #203b43; font-size: 19px; }
.side-workspace small, .side-workspace strong { display: block; }
.side-workspace small { color: #8799a9; font: 8px/1.4 Consolas, monospace; letter-spacing: .07em; white-space: nowrap; }
.side-workspace strong { font-size: 12px; margin-top: 3px; }
.side-workspace-chevron { margin-left: auto; color: #758b9e; }
.side-label { padding: 0 14px; margin-bottom: 11px; color: #6f8194; font: 10px/1.4 Consolas, monospace; letter-spacing: .1em; }
.side-categories-label { margin-top: 30px; }
.side-nav { display: grid; gap: 3px; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 7px 11px; color: #a5b1bf; border: 1px solid transparent; border-radius: 8px; transition: color .18s, background .18s, border-color .18s; }
.nav-link:hover, .nav-link.active { color: #fff; background: #202d3d; }
.nav-link.active { border-color: #394b60; box-shadow: inset 3px 0 var(--accent); }
.nav-icon { display: grid; place-items: center; width: 24px; color: #789db0; font-size: 18px; line-height: 1; }
.nav-link.active .nav-icon, .nav-link:hover .nav-icon { color: var(--accent); }
.nav-text { font-size: 12px; font-weight: 600; }
.nav-arrow { margin-left: auto; color: #61798e; opacity: 0; transition: opacity .18s; }
.nav-link:hover .nav-arrow, .nav-link.active .nav-arrow { opacity: 1; }
.category-link { min-height: 39px; }
.category-link .nav-icon { font-size: 17px; }
.category-link .nav-text { font-weight: 400; }
.side-spacer { flex: 1; min-height: 20px; }
.side-system { display: flex; align-items: center; gap: 9px; margin: 0 12px 13px; font: 9px Consolas, monospace; letter-spacing: .1em; color: #7899a8; }
.system-pulse, .topbar-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(87,199,191,.1), 0 0 12px rgba(87,199,191,.45); }
.side-user { display: flex; gap: 10px; align-items: center; padding: 14px 9px 10px; border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 8px; background: #30475b; color: #d9eef2; font-weight: 800; }
.side-user strong, .side-user small { display: block; }
.side-user strong { font-size: 11px; }
.side-user small { font-size: 10px; color: #75889a; }
.side-bottom { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; color: #7c8fa1; }
.logout button { padding: 5px 0; border: 0; background: none; color: inherit; font-size: 10px; }
.logout button span { margin-left: 7px; }
.side-bottom a:hover, .logout button:hover { color: #fff; }
.main { width: min(100%, 1640px); min-width: 0; margin: 0 auto; padding: 0 clamp(24px, 3.8vw, 68px) 28px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 31px; color: #8294a6; font: 10px Consolas, monospace; letter-spacing: .14em; }
.topbar-square { color: var(--accent); margin-right: 7px; font-size: 9px; }
.topbar-path span:not(:first-child) { color: #4b5e72; padding: 0 8px; }
.topbar-right { display: flex; gap: 24px; }
.topbar-live { display: flex; align-items: center; gap: 9px; color: #a4c5be; letter-spacing: 0; font-family: inherit; }
.topbar-index { color: #66798e; }
.page-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 76px; padding-top: 21px; border-top: 1px solid var(--line); color: #607388; font: 10px Consolas, monospace; letter-spacing: .12em; }
.page-footer span:last-child { font-family: inherit; letter-spacing: 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #ffad79; font: 11px Consolas, monospace; letter-spacing: .16em; font-weight: 700; }
.eyebrow-line { width: 20px; height: 1px; background: var(--accent); }
.eyebrow-index { color: #73899a; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 43px; padding: 10px 17px; border-radius: 7px; border: 1px solid transparent; font-weight: 700; font-size: 12px; white-space: nowrap; transition: transform .18s, background .18s, border-color .18s, box-shadow .18s; }
.primary { color: #141923; background: var(--accent); border-color: #ffad79; box-shadow: 0 8px 23px rgba(255,138,75,.15); }
.primary:hover { background: #ff9e66; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,138,75,.22); }
.secondary { color: #d8e2ed; background: #1b2938; border-color: #3b4d60; }
.secondary:hover { border-color: var(--accent); color: #fff; background: #263649; }
.hero-panel { min-height: 320px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 43px 48px 58px; border: 1px solid #35465b; border-radius: 14px; background: radial-gradient(circle at 74% 46%,rgba(81,158,164,.14),transparent 35%), radial-gradient(circle at 100% 100%,rgba(255,138,75,.1),transparent 32%), linear-gradient(120deg,#19283a,#152231 48%,#1a2b3b); box-shadow: var(--shadow); }
.hero-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background: linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px); background-size: 30px 30px; }
.hero-panel::after { content: ""; position: absolute; top: 0; left: 0; width: 90px; height: 3px; background: var(--accent); box-shadow: 0 0 22px rgba(255,138,75,.5); }
.hero-copy { position: relative; z-index: 1; max-width: 580px; }
.hero-copy h1 { font-size: clamp(32px, 3.5vw, 49px); letter-spacing: -.06em; line-height: 1.23; margin: 19px 0 13px; }
.hero-copy h1 em { font-style: normal; color: var(--accent); }
.hero-copy p { max-width: 440px; color: #a2b4c4; margin-bottom: 22px; }
.hero-actions { display: flex; align-items: center; gap: 26px; }
.hero-link { display: inline-flex; align-items: center; gap: 15px; color: #d7e4ec; font-size: 12px; font-weight: 700; }
.hero-link span { color: var(--teal); }
.hero-link:hover { color: var(--accent); }
.hero-art { position: absolute; right: 2%; top: 50%; width: 360px; height: 360px; transform: translateY(-50%); }
.hero-orbit { position: absolute; border: 1px solid rgba(101,190,194,.25); border-radius: 50%; }
.hero-orbit-outer { inset: 8px; box-shadow: 0 0 0 27px rgba(89,173,176,.035), inset 0 0 40px rgba(87,199,191,.04); }
.hero-orbit-inner { inset: 65px; border-color: rgba(255,138,75,.32); border-style: dashed; }
.hero-core { position: absolute; inset: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(255,170,104,.5); border-radius: 27px; background: linear-gradient(140deg,#35435b,#222f41); box-shadow: 0 0 45px rgba(255,138,75,.12), inset 0 1px rgba(255,255,255,.1); transform: rotate(-10deg); }
.hero-core span { color: var(--accent); font-size: 62px; font-weight: 900; line-height: 1; transform: rotate(10deg); }
.hero-core small { color: #97aebe; font: 8px/1.3 Consolas, monospace; letter-spacing: .18em; text-align: center; margin-top: 3px; transform: rotate(10deg); }
.hero-coordinate { position: absolute; padding: 4px 7px; color: #94adbb; background: #1b3140; border: 1px solid #345365; border-radius: 4px; font: 9px Consolas, monospace; letter-spacing: .08em; }
.c1 { top: 32px; right: 4px; }.c2 { left: -15px; top: 175px; }.c3 { right: 17px; bottom: 42px; }
.hero-cross { position: absolute; color: #6fa7ae; font-size: 21px; }.cross-one { right: 28px; top: 102px; }.cross-two { left: 62px; bottom: 36px; }
.hero-bottom { position: absolute; bottom: 16px; left: 48px; right: 48px; display: flex; justify-content: space-between; color: #7391a2; font: 9px Consolas, monospace; letter-spacing: .11em; }
.stat-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin: 17px 0 55px; }
.stat { min-height: 121px; padding: 17px 21px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg,#17212e,#131c28); }
.stat-top { display: flex; justify-content: space-between; align-items: start; color: #a5b3c2; font-size: 11px; }
.stat-symbol { color: #66869a; font-size: 20px; line-height: 1; }
.stat strong { display: block; font: 700 31px/1.1 Consolas, monospace; margin: 8px 0 3px; }
.stat small { color: #648094; font: 9px Consolas, monospace; letter-spacing: .12em; }
.browse-section { margin-bottom: 53px; scroll-margin-top: 24px; }
.section-overline { display: flex; justify-content: space-between; margin-bottom: 13px; padding-top: 10px; border-top: 1px solid var(--line); color: #6e889b; font: 10px Consolas, monospace; letter-spacing: .1em; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-title-row h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.04em; margin: 0 0 4px; }
.section-title-row p { color: var(--muted); font-size: 12px; margin: 0; }
.section-mono { color: #688094; font: 10px Consolas, monospace; letter-spacing: .08em; white-space: nowrap; }
.category-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; }
.category-tile { min-height: 131px; position: relative; display: flex; flex-direction: column; padding: 16px 12px 13px; overflow: hidden; background: #151f2b; border: 1px solid #2c3b4c; border-radius: 9px; transition: transform .18s,border-color .18s,background .18s; }
.category-tile::after { content: ""; position: absolute; right: -20px; top: -20px; width: 75px; height: 75px; border: 1px solid rgba(255,255,255,.045); border-radius: 50%; }
.category-tile:hover { transform: translateY(-3px); border-color: var(--accent); background: #1d2b3b; }
.category-tile.selected { border-color: var(--accent); background: linear-gradient(145deg,#312c30,#1c2632); box-shadow: inset 0 3px var(--accent); }
.category-tile-icon { color: var(--teal); font-size: 25px; line-height: 1; min-height: 36px; }
.category-image .category-tile-icon { color: #ffae78; }.category-audio .category-tile-icon { color: #77d2c4; }.category-motion .category-tile-icon { color: #8aa9f7; }.category-document .category-tile-icon { color: #cbafeb; }.category-engine .category-tile-icon { color: #efc989; }
.category-tile-copy { margin-top: auto; }
.category-tile-copy strong, .category-tile-copy small { display: block; white-space: nowrap; }
.category-tile-copy strong { font-size: 11px; }
.category-tile-copy small { color: #718598; font: 9px Consolas, monospace; letter-spacing: .07em; margin-top: 3px; }
.category-tile-count { position: absolute; right: 12px; top: 13px; color: #617a8b; font: 10px Consolas, monospace; }
.search-form { padding: 16px; background: #141e2a; border: 1px solid var(--line); border-radius: 10px; }
.search-input { display: flex; align-items: center; position: relative; min-height: 49px; border: 1px solid #405167; border-radius: 7px; background: #0e1723; }
.search-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,138,75,.1); }
.search-icon { color: var(--accent); font-size: 25px; padding-left: 15px; line-height: 1; }
.search-input input { width: 100%; min-width: 0; padding: 11px 12px; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 13px; }
.search-input kbd { min-width: 21px; margin-right: 12px; padding: 1px 6px; border: 1px solid #53667c; border-radius: 4px; color: #8398ab; font: 11px Consolas, monospace; text-align: center; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 12px; }
.filter-row label { flex: 1 1 125px; min-width: 0; }
.filter-row select, .form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 41px; padding: 9px 12px; color: #dce6f0; background: #1d2a39; border: 1px solid #34475b; border-radius: 6px; outline: 0; }
.filter-row select { cursor: pointer; }
.filter-row select:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,138,75,.1); }
input::placeholder, textarea::placeholder { color: #73879a; }
.filter-submit { min-height: 41px; padding: 9px 13px; }
.clear-filters { color: #91a8b8; font-size: 11px; padding: 8px 4px; }
.clear-filters:hover { color: var(--accent); }
.results-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 25px 0 14px; }
.results-toolbar > div:first-child { display: flex; align-items: center; gap: 10px; }
.results-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.results-toolbar strong { font-size: 13px; }
.results-count { padding-left: 12px; border-left: 1px solid var(--line-strong); color: #8295a7; font-size: 11px; }
.view-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid #34465a; border-radius: 7px; background: #121c29; }
.view-switch button { width: 28px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #8296a7; font-size: 17px; }
.view-switch button[aria-pressed="true"] { color: var(--accent); background: #2a3542; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(254px,1fr)); gap: 15px; }
.asset-card { min-width: 0; display: block; overflow: hidden; border: 1px solid #304154; border-radius: 10px; background: #172230; transition: transform .2s,box-shadow .2s,border-color .2s; }
.asset-card:hover { transform: translateY(-5px); border-color: #bd7955; box-shadow: 0 19px 35px rgba(0,0,0,.24); }
.card-preview { height: 190px; display: grid; place-items: center; position: relative; overflow: hidden; border-bottom: 1px solid #304154; background: radial-gradient(circle at 50% 40%,#314a55,#1b2a38 55%,#182635); }
.card-preview.has-image { background-color: #263441; background-image: linear-gradient(45deg,rgba(255,255,255,.045) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.045) 75%),linear-gradient(45deg,rgba(255,255,255,.045) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.045) 75%); background-position: 0 0,12px 12px; background-size: 24px 24px; }
.card-preview img { width: 100%; height: 100%; padding: 13px 18px; object-fit: contain; transition: transform .3s; }
.asset-card:hover .card-preview img { transform: scale(1.045); }
.category-audio .card-preview { background: radial-gradient(circle at 50% 50%,#315451,#1b343c 57%,#162934); }
.category-motion .card-preview { background: radial-gradient(circle at 50% 50%,#343b63,#252c47 57%,#1a2537); }
.category-document .card-preview { background: radial-gradient(circle at 50% 50%,#4a3959,#2c2a45 57%,#202439); }
.category-engine .card-preview { background: radial-gradient(circle at 50% 50%,#3b4959,#253341 57%,#1b2937); }
.preview-emblem { position: relative; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; }
.preview-ring { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.025),inset 0 0 23px rgba(255,255,255,.03); }
.preview-ring::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.file-glyph { color: #b6d3d5; font-size: 47px; line-height: 1; }
.category-motion .file-glyph { color: #a3aff0; }.category-document .file-glyph { color: #cab7e5; }.category-engine .file-glyph { color: #b5cad6; }
.category-chip { position: absolute; left: 11px; bottom: 11px; padding: 4px 8px; border: 1px solid rgba(151,188,198,.3); border-radius: 4px; background: rgba(13,25,37,.83); color: #d7e5e9; font-size: 10px; backdrop-filter: blur(8px); }
.card-open { position: absolute; top: 11px; right: 11px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: rgba(13,25,37,.55); color: #e4f1f4; opacity: 0; transform: translateY(4px); transition: opacity .18s,transform .18s; }
.asset-card:hover .card-open { opacity: 1; transform: translateY(0); }
.card-body { padding: 15px 15px 12px; }
.card-kicker { display: flex; justify-content: space-between; gap: 8px; color: var(--teal); font: 10px Consolas, monospace; letter-spacing: .05em; }
.card-kicker span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-kicker span:last-child { color: #637a8e; }
.card-body h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 10px 0 5px; font-size: 14px; }
.card-body p { height: 37px; overflow: hidden; color: #95a6b5; font-size: 11px; line-height: 1.6; margin: 0 0 10px; }
.tag-row { display: flex; height: 25px; gap: 4px; overflow: hidden; }
.tag { display: inline-block; flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 6px; margin: 0 4px 4px 0; border: 1px solid #3c5063; border-radius: 4px; color: #acc3cf; background: #253748; font-size: 10px; white-space: nowrap; }
.tag-row .tag { margin-right: 0; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; padding-top: 11px; border-top: 1px solid #2b3c4d; color: #758fa0; font: 10px Consolas, monospace; }
.file-count-icon { font-style: normal; color: var(--accent); }
.asset-grid.is-list { grid-template-columns: 1fr; }
.asset-grid.is-list .asset-card { display: grid; grid-template-columns: 164px minmax(0,1fr); min-height: 140px; }
.asset-grid.is-list .card-preview { height: 100%; min-height: 140px; border-bottom: 0; border-right: 1px solid #304154; }
.asset-grid.is-list .card-preview img { padding: 8px; }
.asset-grid.is-list .preview-emblem { transform: scale(.7); }
.asset-grid.is-list .card-body { display: flex; flex-direction: column; justify-content: center; }
.asset-grid.is-list .card-body p { height: auto; max-height: 36px; }
.asset-grid.is-list .card-foot { margin-top: auto; }
.empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 65px 20px; border: 1px dashed #405164; border-radius: 10px; background: #141f2c; }
.empty-icon { color: var(--teal); font-size: 50px; }.empty small { color: #6c879a; font: 10px Consolas, monospace; letter-spacing: .12em; }.empty h3 { margin: 12px 0 5px; }.empty p { color: var(--muted); }.empty .secondary { margin-top: 8px; }
.pagination { display: flex; gap: 18px; justify-content: center; align-items: center; margin: 30px 0; color: #8da3b4; font: 11px Consolas, monospace; }.pagination a { color: var(--accent); }.pagination a:hover { text-decoration: underline; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 21px; color: #8297a8; font-size: 11px; }.crumb a:hover { color: var(--accent); }.crumb-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dce7ef; }
.page-header, .detail-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 0 26px; }
.page-header h1, .detail-header h1 { font-size: clamp(29px,3vw,40px); letter-spacing: -.055em; line-height: 1.2; margin: 10px 0 8px; }
.page-header p { color: var(--muted); margin: 0; }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.pill { padding: 3px 9px; border: 1px solid #3d5765; border-radius: 4px; color: #c4dbe1; background: #253b47; font-size: 10px; }
.status-ready { color: #9fe6bd; border-color: #386b54; background: #213b33; }.status-deprecated { color: #dfa79f; border-color: #694441; background: #3b2b2e; }
.meta-date { margin-left: 6px; }
.header-actions { display: flex; flex: none; flex-wrap: nowrap; gap: 8px; }
.panel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(305px,350px); gap: 17px; }
.detail-main, .detail-side { display: grid; align-content: start; gap: 17px; min-width: 0; }
.feature-preview { overflow: hidden; background: #121e2b; }
.preview-top, .preview-bottom { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 16px; color: #7f9baa; font: 9px Consolas, monospace; letter-spacing: .08em; }
.preview-top { border-bottom: 1px solid #2a4050; }.preview-bottom { border-top: 1px solid #2a4050; }.preview-top span:first-child { color: var(--teal); }.preview-top i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--teal); }
.preview-bottom a { color: var(--accent); }.preview-bottom a:hover { text-decoration: underline; }
.preview-stage { min-height: 410px; display: grid; place-items: center; padding: 25px; background-color: #21303d; background-image: linear-gradient(45deg,rgba(255,255,255,.028) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.028) 75%),linear-gradient(45deg,rgba(255,255,255,.028) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.028) 75%); background-position: 0 0,18px 18px; background-size: 36px 36px; }
.preview-stage img { max-width: 100%; max-height: 450px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.17)); }
.large-emblem { position: relative; display: grid; place-items: center; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle,#314c59,#233745); }
.large-emblem-ring { position: absolute; inset: 0; border: 1px solid #50717d; border-radius: 50%; box-shadow: 0 0 0 28px rgba(120,183,191,.06); }.large-emblem>span:last-child { color: #b7d6da; font-size: 84px; }
.image-strip { display: flex; gap: 9px; overflow-x: auto; }.image-strip a { display: flex; align-items: center; gap: 8px; max-width: 240px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #1a2937; color: #b6c9d5; font-size: 10px; }.image-strip a:hover { border-color: var(--accent); }.image-strip img { width: 36px; height: 36px; object-fit: contain; }.image-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-panel, .files-panel, .byline { padding: 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 19px; }.panel-heading small { color: var(--teal); font: 9px Consolas, monospace; letter-spacing: .09em; }.panel-heading h2 { font-size: 19px; margin: 4px 0 0; }.panel-heading-mark { color: #52677b; font: 14px Consolas, monospace; }
.description { color: #bfd0db; line-height: 1.8; overflow-wrap: anywhere; }
.divider { height: 1px; background: var(--line); margin: 24px 0; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 19px; }.info-grid small, .rights-note small { display: block; color: #8094a5; font: 10px Consolas, monospace; letter-spacing: .05em; margin-bottom: 9px; }.info-grid>div>div { font-size: 12px; overflow-wrap: anywhere; }.rights-value { color: #c4e0cb; }
.rights-note { margin-top: 23px; padding: 15px; border-left: 2px solid var(--accent); background: #222b34; }.rights-note p { margin: 0; color: #b6c6d2; font-size: 12px; }
.muted { color: var(--muted); }
.detail-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.detail-summary>div { display: flex; align-items: baseline; gap: 10px; padding: 15px 18px; background: #1b2a39; border: 1px solid #344558; border-radius: 8px; }.detail-summary strong { color: var(--accent); font: 23px Consolas, monospace; }.detail-summary small { color: #99aebe; font-size: 10px; }
.files-panel { min-width: 0; }.version { padding: 18px 0 0 13px; margin: 17px 0 0 4px; border-top: 1px solid var(--line); border-left: 1px solid #3b5264; }.version-title { display: flex; justify-content: space-between; align-items: center; gap: 7px; }.version-title strong { color: #dcebf1; font: 11px Consolas, monospace; }.version-title span:last-child { color: #8196a8; font: 10px Consolas, monospace; }.version-dot { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px -17px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--surface); }.version-note { color: #96a8b6; font-size: 11px; margin: 7px 0 0; }
.file-row { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid #253646; }.file-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 5px; color: var(--teal); background: #233d46; font-size: 16px; }.file-text { min-width: 0; flex: 1; }.file-text strong, .file-text small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.file-text strong { font-size: 10px; }.file-text small { color: #7e95a6; font-size: 9px; }.file-row>a { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #465a69; border-radius: 5px; color: var(--accent); font-size: 17px; }.file-row>a:hover { border-color: var(--accent); background: #2e3a45; }
.version audio, .version video { width: 100%; margin-top: 8px; }.version video { max-height: 185px; }.preview-link { display: inline-block; color: var(--accent); margin: 8px 0; font-size: 11px; }
.byline>small { display: block; color: var(--teal); font: 9px Consolas, monospace; letter-spacing: .1em; margin-bottom: 12px; }.byline>div { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11px; }.byline>div span { color: #8094a5; }.byline strong { font-weight: 600; }
.upload-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(235px,285px); gap: 18px; align-items: start; }.form-panel { padding: 26px; }.upload-panel { max-width: none; }.form-section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }.form-section-title:not(:first-child) { padding-top: 24px; border-top: 1px solid var(--line); }.form-section-title>span { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid #4a5d68; border-radius: 7px; color: var(--accent); background: #26313b; font: 13px Consolas, monospace; }.form-section-title small { color: var(--teal); font: 9px Consolas, monospace; letter-spacing: .1em; }.form-section-title h2 { margin: 2px 0 0; font-size: 17px; }
.drop-zone { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 221px; margin-bottom: 24px; padding: 22px; border: 1px dashed #4b6578; border-radius: 8px; text-align: center; background: radial-gradient(circle at center,#1d3440,#162633 68%); transition: border-color .2s,background .2s,transform .2s; }.drop-zone:hover, .drop-zone.dragging, .drop-zone:focus-within { border-color: var(--accent); background: radial-gradient(circle at center,#2e3940,#1e2b37 70%); }.drop-zone.dragging { transform: scale(1.01); }.drop-zone.has-files { border-color: var(--teal); }.drop-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }.drop-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border: 1px solid #53818a; border-radius: 12px; color: var(--teal); background: #24434a; font-size: 29px; }.drop-zone strong { font-size: 15px; }.drop-zone p { margin: 4px 0 14px; color: #8ca8b5; font-size: 11px; }.drop-cta { padding: 5px 11px; border: 1px solid #567180; border-radius: 4px; color: #c6e3e1; font-size: 10px; }
.file-queue { display: grid; gap: 7px; margin: -5px 0 23px; }.queue-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border: 1px solid #344a59; border-radius: 5px; background: #1b2b38; }.queue-icon { color: var(--teal); font-size: 15px; }.queue-row strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.queue-row small { color: #8da5b4; white-space: nowrap; font: 10px Consolas, monospace; }.queue-state { min-width: 44px; color: #8fa9b8; font-size: 10px; white-space: nowrap; text-align: right; }.queue-row.uploading { border-color: var(--accent); }.queue-row.uploading .queue-state { color: var(--accent); }.queue-row.complete { border-color: #458378; }.queue-row.complete .queue-state { color: var(--teal); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }.form-field { min-width: 0; margin-bottom: 17px; }.form-field.span-2 { grid-column: 1/-1; }.form-field label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; color: #d6e2ea; }.field-hint { color: #7d95a6; font-size: 10px; font-weight: 400; }.form-field textarea { resize: vertical; }.form-field small { display: block; color: #8196a7; font-size: 10px; margin-top: 5px; }.field-error { color: #ffaaa0; font-size: 11px; }.checkbox-field label { display: flex; align-items: center; gap: 8px; }.checkbox-field input { width: auto; min-height: 0; accent-color: var(--accent); }
.progress-area { padding: 15px; margin: 0 0 14px; background: #1b2d39; border: 1px solid #365264; border-radius: 7px; }.progress-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; }.progress-head span { color: var(--teal); font-family: Consolas, monospace; }.progress-track { height: 7px; overflow: hidden; border-radius: 9px; background: #334758; }.progress-track>div { height: 100%; width: 0; background: linear-gradient(90deg,var(--teal),var(--accent)); transition: width .18s; }
.alert { padding: 10px 13px; margin-bottom: 14px; border: 1px solid #985a51; border-radius: 6px; color: #ffd0c6; background: #3a292b; font-size: 12px; }.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 20px; margin-top: 4px; border-top: 1px solid var(--line); }
.upload-guide { position: sticky; top: 22px; overflow: hidden; padding: 24px 22px; border: 1px solid #3b5261; border-radius: 10px; background: radial-gradient(circle at 100% 0%,#2c4b50,#1a2b38 50%,#182535); }.guide-top { display: flex; align-items: center; gap: 11px; color: var(--teal); font: 9px Consolas, monospace; letter-spacing: .09em; }.guide-icon { font-size: 25px; }.upload-guide h2 { font-size: 23px; line-height: 1.4; letter-spacing: -.04em; margin: 28px 0 10px; }.upload-guide>p { color: #a4b8c1; font-size: 11px; margin-bottom: 27px; }.guide-step { display: flex; gap: 10px; padding: 15px 0; border-top: 1px solid #38505e; }.guide-step>span { color: var(--accent); font: 11px Consolas, monospace; }.guide-step strong, .guide-step small { display: block; }.guide-step strong { font-size: 11px; }.guide-step small { color: #8da2ae; font-size: 10px; margin-top: 3px; }.guide-footer { margin-top: 25px; color: #6f91a1; font: 8px Consolas, monospace; letter-spacing: .08em; }
.login-page { background: #0e1722; }.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(380px,.85fr); }.login-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 37px clamp(30px,5vw,80px) 28px; overflow: hidden; background: radial-gradient(circle at 54% 42%,#294450,#1b2d3d 43%,#121e2b 82%); border-right: 1px solid #334957; }.login-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px); background-size: 34px 34px; }.login-hero-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; letter-spacing: .17em; }.login-hero-top small { display: block; margin-top: 2px; color: #7999a7; font: 9px Consolas, monospace; letter-spacing: .15em; }.login-brand-mark { width: 43px; height: 43px; }
.login-hero-art { position: absolute; left: 50%; top: 43%; width: min(65vw,500px); height: min(65vw,500px); transform: translate(-50%,-50%); }.login-orbit { position: absolute; border: 1px solid rgba(105,173,183,.24); border-radius: 50%; }.login-orbit-one { inset: 0; box-shadow: 0 0 0 42px rgba(92,164,179,.025); }.login-orbit-two { inset: 57px; border-style: dashed; border-color: rgba(255,165,98,.28); }.login-orbit-three { inset: 113px; border-color: rgba(108,183,186,.37); box-shadow: inset 0 0 40px rgba(102,190,191,.06); }.orbit-core { position: absolute; inset: 185px; display: grid; place-items: center; border-radius: 23px; border: 1px solid #d18863; background: linear-gradient(145deg,#3d4c5d,#263545); color: var(--accent); font-size: 65px; font-weight: 900; transform: rotate(-14deg); box-shadow: 0 20px 60px rgba(0,0,0,.25),0 0 45px rgba(255,138,75,.1); }.orbit-label { position: absolute; padding: 4px 9px; border: 1px solid #3c6571; border-radius: 4px; background: #1a3340; color: #a4d0d0; font: 10px Consolas, monospace; letter-spacing: .1em; }.label-one { top: 62px; right: 24px; }.label-two { left: -13px; top: 210px; }.label-three { bottom: 62px; right: 38px; }
.login-hero-copy { position: relative; z-index: 1; max-width: 570px; margin-top: auto; }.login-hero-copy h1 { font-size: clamp(38px,4.6vw,65px); line-height: 1.23; letter-spacing: -.065em; margin: 15px 0 17px; }.login-hero-copy h1 span { color: var(--accent); }.login-hero-copy p { max-width: 440px; color: #adc1cc; font-size: 13px; line-height: 1.8; }.login-hero-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; margin-top: 58px; padding-top: 15px; border-top: 1px solid #3f5665; color: #7793a1; font: 9px Consolas, monospace; letter-spacing: .1em; }
.login-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px clamp(30px,5vw,80px); background: radial-gradient(circle at 100% 0%,#1b2b39,#111b28 43%,#101824); }.login-card-inner { width: min(100%,370px); }.login-entry { display: flex; align-items: center; gap: 9px; color: #93a8b8; font: 10px Consolas, monospace; letter-spacing: .08em; margin-bottom: 55px; }.login-entry-line { width: 17px; height: 1px; background: var(--teal); }.login-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 25px; border: 1px solid #4b756e; border-radius: 13px; color: var(--teal); background: #213b40; font-size: 29px; }.login-card h2 { font-size: 34px; line-height: 1.25; margin: 0 0 8px; letter-spacing: -.04em; }.login-card p { color: #9aaebe; margin-bottom: 28px; }.login-card form label { display: block; margin: 16px 0 7px; color: #cbd9e3; font-size: 11px; font-weight: 700; }.login-card form input:not([type="hidden"]) { width: 100%; height: 47px; padding: 10px 13px; border: 1px solid #3c5265; border-radius: 6px; color: #f0f5f8; background: #1a2937; outline: 0; }.login-card form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,138,75,.12); }.password-field { position: relative; }.password-field input { padding-right: 60px !important; }.password-field button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border: 0; background: transparent; color: #92b7bb; font-size: 11px; }.password-field button:hover { color: var(--accent); }.login-card .full { width: 100%; margin-top: 26px; min-height: 48px; justify-content: space-between; }.login-security { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 20px; color: #768e9e; font-size: 10px; }.login-security span { color: var(--teal); }.login-card-footer { position: absolute; bottom: 28px; left: clamp(30px,5vw,80px); right: clamp(30px,5vw,80px); display: flex; justify-content: space-between; color: #607687; font: 9px Consolas, monospace; letter-spacing: .1em; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes signal { 50% { opacity: .45; box-shadow: 0 0 0 6px rgba(87,199,191,.06),0 0 16px rgba(87,199,191,.65); } }
.hero-orbit-inner, .login-orbit-two { animation: orbit 48s linear infinite; }
.system-pulse, .topbar-live i { animation: signal 3s ease-in-out infinite; }
.category-tile:active, .asset-card:active, .primary:active, .secondary:active { transform: scale(.985); }
@media (max-width: 1430px) { .category-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .hero-art { right: 0; opacity: .8; } }
@media (max-width: 1110px) { .detail-layout, .upload-layout { grid-template-columns: 1fr; }.detail-header { align-items: start; flex-direction: column; }.upload-guide { position: static; }.search-form .filter-row label { flex-basis: 170px; }.hero-art { right: -75px; opacity: .46; }.login-hero-art { transform: translate(-50%,-50%) scale(.82); } }
@media (max-width: 820px) { .sidebar { width: 68px; min-width: 68px; padding: 21px 8px; align-items: center; }.brand { margin: 0 0 35px; }.brand-word, .side-workspace, .side-label, .nav-text, .nav-arrow, .side-system, .side-user, .side-bottom { display: none; }.side-nav { width: 100%; }.nav-link { justify-content: center; padding: 8px; }.nav-icon { width: 28px; font-size: 21px; }.category-nav { margin-top: 31px; border-top: 1px solid var(--line); padding-top: 21px; }.main { padding: 0 21px 25px; }.hero-panel { padding-left: 30px; }.hero-bottom { left: 30px; right: 30px; }.login-wrap { grid-template-columns: 1fr; }.login-hero { display: none; }.login-card { min-height: 100vh; } }
@media (max-width: 620px) { .topbar { height: 62px; margin-bottom: 24px; }.topbar-right, .topbar-path span:not(:first-child), .section-mono { display: none; }.hero-panel { min-height: 300px; padding: 31px 22px 45px; }.hero-art { right: -170px; opacity: .24; }.hero-copy h1 { font-size: 34px; }.hero-copy p { font-size: 11px; }.hero-bottom { left: 22px; right: 22px; font-size: 8px; }.hero-bottom span:last-child { display: none; }.stat-row { gap: 7px; margin-bottom: 45px; }.stat { min-height: 102px; padding: 11px; }.stat-top { font-size: 9px; }.stat-symbol { display: none; }.stat strong { font-size: 23px; }.stat small { font-size: 8px; }.category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.category-tile { min-height: 118px; }.section-title-row h2 { font-size: 22px; }.section-title-row p { font-size: 11px; }.filter-row label { flex-basis: calc(50% - 6px) !important; }.filter-submit { flex: 1 1 100%; }.search-form { padding: 12px; }.asset-grid { grid-template-columns: 1fr; }.card-preview { height: 210px; }.asset-grid.is-list .asset-card { grid-template-columns: 100px minmax(0,1fr); }.asset-grid.is-list .card-preview { min-height: 155px; }.asset-grid.is-list .card-body { padding: 10px; }.asset-grid.is-list .card-body p { display: none; }.asset-grid.is-list .tag-row { display: none; }.asset-grid.is-list .card-foot { padding-top: 6px; }.page-header, .detail-header { align-items: start; flex-direction: column; }.page-header h1, .detail-header h1 { font-size: 28px; }.header-actions { width: 100%; }.header-actions .primary, .header-actions .secondary { flex: 1; }.preview-stage { min-height: 275px; }.preview-stage img { max-height: 310px; }.info-grid, .form-grid { grid-template-columns: 1fr; }.form-field.span-2 { grid-column: auto; }.form-panel { padding: 18px; }.page-footer { margin-top: 45px; font-size: 8px; } }
@media (max-width: 400px) { .sidebar { width: 54px; min-width: 54px; padding-inline: 5px; }.brand-mark { width: 37px; height: 37px; }.main { padding-inline: 13px; }.stat strong { font-size: 20px; }.category-tile-copy strong { font-size: 10px; }.header-actions .primary, .header-actions .secondary { font-size: 10px; padding-inline: 8px; }.meta-line { gap: 5px; }.meta-date { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Directory-first information architecture */
.explorer-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 24px; margin: 0 0 18px; color: #8196a7; font-size: 11px; }
.explorer-crumb a:hover { color: var(--accent); }
.explorer-crumb strong { color: #dce7ed; font-weight: 600; }
.explorer-crumb span { color: #587084; }
.explorer-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 19px; }
.explorer-kicker { display: flex; align-items: center; gap: 8px; color: var(--teal); font: 10px Consolas, monospace; letter-spacing: .11em; }
.explorer-kicker span:last-child { color: #728799; }
.explorer-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.explorer-header h1 { margin: 12px 0 7px; font-size: clamp(28px,3vw,40px); line-height: 1.2; letter-spacing: -.05em; }
.explorer-header p { margin: 0; color: #9aafbc; font-size: 12px; }
.explorer-meta { display: flex; gap: 24px; align-items: center; min-height: 45px; margin-bottom: 35px; padding: 0 14px; border: 1px solid #334558; border-radius: 7px; background: #162330; color: #8ca2b3; font-size: 11px; }
.explorer-meta strong { color: #e4eef3; font: 700 12px Consolas, monospace; }
.explorer-meta-path { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6f8e9f; font: 10px Consolas, monospace; }
.index-section { margin: 0 0 37px; }
.index-section-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.index-section-head small { color: #7193a3; font: 10px Consolas, monospace; letter-spacing: .09em; }
.index-section-head h2 { font-size: 18px; margin: 4px 0 0; }
.index-section-head>span { color: #8499a8; font-size: 10px; white-space: nowrap; }
.dimension-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.dimension-card { position: relative; display: flex; flex-direction: column; min-height: 165px; padding: 18px; overflow: hidden; border: 1px solid #30475b; border-radius: 8px; background: linear-gradient(145deg,#1a2a39,#15212f); transition: border-color .18s, transform .18s, background .18s; }
.dimension-card:hover { transform: translateY(-3px); border-color: #bc855d; background: linear-gradient(145deg,#233749,#1b2938); }
.dimension-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border: 1px solid #46667a; border-radius: 8px; background: #263e4c; color: var(--teal); font-size: 23px; line-height: 1; }
.dimension-project .dimension-icon { color: #e5c68b; }.dimension-type .dimension-icon { color: #ffa872; }.dimension-topic .dimension-icon { color: #bba7e6; }
.dimension-copy strong, .dimension-copy small { display: block; }
.dimension-copy strong { font-size: 15px; }.dimension-copy small { color: #8ea5b5; font-size: 10px; margin-top: 4px; }
.dimension-count { margin-top: auto; padding-top: 16px; color: #6c8a9a; font: 10px Consolas, monospace; }
.dimension-arrow { position: absolute; top: 14px; right: 15px; color: #809aa7; opacity: .8; }
.directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.directory-card { display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 79px; padding: 12px 14px; border: 1px solid #34495a; border-radius: 7px; background: #172432; transition: border-color .18s, background .18s, transform .18s; }
.directory-card:hover { transform: translateX(3px); border-color: var(--accent); background: #203244; }
.directory-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid #3b6370; border-radius: 7px; color: #8bcacb; background: #24404a; font-size: 21px; }
.directory-info { min-width: 0; flex: 1; }.directory-info strong, .directory-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.directory-info strong { font-size: 12px; }.directory-info small { color: #829bac; font-size: 10px; margin-top: 4px; }
.directory-arrow { color: #849cac; font-size: 17px; }.directory-card:hover .directory-arrow { color: var(--accent); }
.explorer-filter { padding: 14px; border: 1px solid #34495a; border-radius: 8px; background: #172331; }
.explorer-filter-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) auto auto; gap: 9px; align-items: end; margin-top: 11px; }
.explorer-filter-fields label { min-width: 0; }
.explorer-filter-fields label>span { display: block; margin: 0 0 5px; color: #8ea7b7; font-size: 10px; }
.explorer-filter-fields select { width: 100%; height: 39px; padding: 8px 10px; border: 1px solid #3c5266; border-radius: 5px; outline: 0; color: #d8e5ed; background: #203041; font-size: 11px; }
.explorer-filter-fields select:focus { border-color: var(--accent); }
.explorer-filter-fields .filter-submit { min-height: 39px; }
.active-indexes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; color: #8da2b1; font-size: 10px; }
.active-indexes a { padding: 4px 7px; border: 1px solid #466175; border-radius: 4px; color: #b7d2dd; background: #203747; }
.active-indexes a:hover { border-color: var(--accent); color: #fff; }
.asset-card .card-body h3 a:hover { color: var(--accent); }
.create-index { margin: -10px 0 35px; border: 1px dashed #3d5969; border-radius: 7px; background: #152431; }.create-index summary { display: flex; gap: 13px; align-items: center; padding: 11px 14px; cursor: pointer; color: #bcd5df; font-size: 11px; font-weight: 700; list-style: none; }.create-index summary::-webkit-details-marker { display: none; }.create-index summary:hover { color: var(--accent); }.create-index summary span { margin-left: auto; color: #7794a4; font-size: 10px; font-weight: 400; }.create-index form { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 0 14px 14px; }.create-index label { color: #9fb5c1; font-size: 10px; }.create-index input { flex: 1 1 220px; min-width: 0; height: 39px; padding: 7px 10px; border: 1px solid #40586b; border-radius: 5px; outline: 0; background: #203142; color: #e8f0f4; }.create-index input:focus { border-color: var(--accent); }.create-index .primary { min-height: 39px; }
.asset-card .tag { transition: color .15s,border-color .15s; }
.asset-card .tag:hover { color: #fff; border-color: var(--accent); }
.card-foot>a { color: #82aebe; }
.card-foot>a:hover { color: var(--accent); }
.index-panel { padding: 22px; }.asset-index-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.asset-index-groups h3 { margin: 0 0 9px; color: #94b3c2; font-size: 11px; }.asset-index-groups>div>div { display: flex; flex-wrap: wrap; gap: 5px; }.asset-index-groups a { max-width: 100%; padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #3e6170; border-radius: 4px; color: #d1e5eb; background: #203744; font-size: 10px; }.asset-index-groups a:hover { border-color: var(--accent); color: #fff; }.asset-index-groups .muted { font-size: 10px; }
.edit-panel { max-width: 880px; }.index-picker-help { margin: -4px 0 13px; color: #8fa5b4; font-size: 11px; }.index-picker { display: grid; gap: 8px; margin-bottom: 22px; }.index-picker-group { border: 1px solid #385064; border-radius: 6px; background: #1b2a38; }.index-picker-group summary { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; }.index-picker-group summary::-webkit-details-marker { display: none; }.index-picker-group summary::before { content: "▸"; color: var(--accent); margin-right: 6px; }.index-picker-group[open] summary::before { content: "▾"; }.index-picker-group summary span { flex: 1; }.index-picker-group summary small { color: #7992a5; font-weight: 400; }.index-picker-options { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 11px; max-height: 215px; overflow-y: auto; padding: 8px 13px 12px; border-top: 1px solid #34495a; }.index-picker-options label { display: flex; align-items: flex-start; gap: 7px; min-width: 0; padding: 5px 0; color: #becfda; font-size: 10px; cursor: pointer; }.index-picker-options label:hover { color: #fff; }.index-picker-options input { accent-color: var(--accent); margin: 1px 0 0; }.index-picker-options span { overflow-wrap: anywhere; }
@media (max-width: 1050px) { .dimension-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.explorer-filter-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }.explorer-filter-fields .filter-submit { grid-column: 1/-1; }.explorer-filter-fields .clear-filters { grid-column: 1/-1; } }
@media (max-width: 620px) { .explorer-header { align-items: start; flex-direction: column; }.explorer-meta { gap: 12px; }.explorer-meta-path { display: none; }.directory-grid { grid-template-columns: 1fr; }.dimension-card { min-height: 140px; padding: 13px; }.dimension-copy strong { font-size: 12px; }.dimension-copy small { font-size: 9px; }.dimension-count { font-size: 9px; }.dimension-icon { width: 31px; height: 31px; margin-bottom: 10px; font-size: 18px; }.asset-index-groups, .index-picker-options { grid-template-columns: 1fr; } }

/* Catalog and resource maintenance */
.notice-stack { display: grid; gap: 8px; margin: -10px 0 20px; }
.notice { padding: 11px 14px; border: 1px solid #416d63; border-radius: 7px; background: #1c3836; color: #b5e2d6; font-size: 12px; }
.notice-error { border-color: #8a5555; background: #3a272d; color: #ffd0c9; }
.manage-header { margin-bottom: 24px; }
.manage-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.manage-tabs a { padding: 9px 15px; border: 1px solid #374a5d; border-radius: 6px; color: #a9bbc9; background: #192635; font-size: 12px; }
.manage-tabs a:hover, .manage-tabs a.active { color: #fff; border-color: #bd7852; background: #273643; }
.manage-tabs a.active { box-shadow: inset 0 -2px var(--accent); }
.manage-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 24px; }
.manage-summary>div { padding: 13px 15px; border: 1px solid #33485a; border-radius: 7px; background: #182634; }
.manage-summary small, .manage-summary strong { display: block; }.manage-summary small { margin-bottom: 5px; color: #7c98a8; font: 9px Consolas,monospace; letter-spacing: .08em; }.manage-summary strong { color: #e5edf3; font-size: 16px; }
.manage-create { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 22px; padding: 20px; margin-bottom: 30px; }
.manage-create>div>small, .manage-linked .panel-heading small, .manage-operations .panel-heading small { color: #8bcac8; font: 10px Consolas,monospace; letter-spacing: .08em; }
.manage-create h2 { margin: 6px 0 8px; font-size: 18px; }.manage-create p { color: #839aaa; font-size: 11px; }
.manage-create form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; align-items: end; }
.manage-create form label, .manage-filter label { display: grid; gap: 6px; min-width: 0; color: #9bb0bf; font-size: 11px; }
.manage-create input, .manage-create select, .manage-search input, .manage-filter input, .manage-filter select, .manage-merge select, .manage-status select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #3e5366; border-radius: 5px; outline: 0; background: #203141; color: #e7eef3; font: inherit; }
.manage-create input:focus, .manage-create select:focus, .manage-search input:focus, .manage-filter input:focus, .manage-filter select:focus { border-color: var(--accent); }
.manage-create .manage-wide { grid-column: 1/-1; }.manage-create .primary { justify-self: start; }
.manage-search { display: flex; gap: 8px; margin-bottom: 14px; }.manage-search input { flex: 1; }
.manage-index-list { overflow: hidden; border: 1px solid #32485a; border-radius: 8px; background: #172432; }
.manage-index-row { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 15px; border-bottom: 1px solid #2a3c4d; }
.manage-index-row:last-child { border-bottom: 0; }.manage-index-row:hover { background: #233646; }
.manage-row-icon { display: grid; place-items: center; width: 35px; height: 35px; flex: none; border-radius: 6px; color: #84c6c3; background: #28414b; font-size: 18px; }
.manage-row-name { flex: 1; min-width: 0; }.manage-row-name strong, .manage-row-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.manage-row-name strong { font-size: 12px; }.manage-row-name small { margin-top: 4px; color: #7e99a8; font-size: 10px; }
.manage-row-count { flex: none; color: #86a2ae; font-size: 10px; }.manage-row-arrow { color: var(--accent); }
.manage-empty { padding: 28px; color: #8aa3b2; text-align: center; font-size: 12px; }
.manage-two-column { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,380px); gap: 15px; }.manage-linked, .manage-operations { min-width: 0; padding: 20px; }.manage-linked .panel-heading, .manage-operations .panel-heading { margin-bottom: 11px; }.manage-linked>a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #2c4051; font-size: 11px; }.manage-linked>a:hover { color: var(--accent); }.manage-linked>a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.manage-linked>a small { flex: none; color: #85a3b1; }
.manage-merge, .manage-delete { display: grid; gap: 9px; padding: 13px 0; border-top: 1px solid #2c4051; }.manage-merge strong, .manage-delete strong { font-size: 12px; }.manage-merge p, .manage-delete p { margin: 0; color: #8fa4b3; font-size: 10px; }.manage-merge button, .manage-delete button { justify-self: start; min-height: 36px; }.manage-delete button { color: #f4b6ad; border-color: #744b4c; }
.manage-filter { display: grid; grid-template-columns: minmax(180px,2fr) minmax(130px,1fr) minmax(130px,1fr) auto; gap: 9px; align-items: end; padding: 15px; margin-bottom: 27px; border: 1px solid #34495a; border-radius: 8px; background: #172432; }.manage-filter button { min-height: 40px; }
.manage-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #34495a; border-radius: 8px; }.manage-table { width: 100%; border-collapse: collapse; background: #172432; }.manage-table th { padding: 12px 14px; background: #1b2b3a; color: #849eaf; font-size: 10px; text-align: left; white-space: nowrap; }.manage-table td { padding: 13px 14px; border-top: 1px solid #2b4051; font-size: 11px; vertical-align: middle; }.manage-table td:first-child { min-width: 205px; }.manage-table td:nth-child(2) { min-width: 220px; }.manage-table td:last-child { min-width: 145px; }.manage-asset-name { color: #e4eff4; font-size: 12px; font-weight: 700; }.manage-asset-name:hover { color: var(--accent); }.manage-table td:first-child>small { display: block; margin-top: 5px; color: #7e98a9; font-size: 10px; }.manage-tagline { display: flex; flex-wrap: wrap; gap: 4px; max-height: 48px; overflow: hidden; }.manage-tagline span { padding: 3px 6px; border: 1px solid #3c5764; border-radius: 4px; color: #b1cdd5; background: #233b46; font-size: 9px; }.manage-tagline em { color: #748e9c; font-style: normal; }.manage-status { display: flex; gap: 5px; }.manage-status select { min-height: 32px; padding: 5px; font-size: 10px; }.manage-status button { padding: 5px 7px; border: 1px solid #4a6471; border-radius: 4px; background: #25414b; color: #cbe4e7; font-size: 10px; }.manage-actions { display: grid; gap: 6px; }.manage-actions a { color: #9ec8d0; font-size: 10px; }.manage-actions a:hover { color: var(--accent); }
.tag-library-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 13px; max-height: 230px; overflow-y: auto; padding: 11px 13px; margin: 0 0 25px; border: 1px solid #385064; border-radius: 6px; background: #1b2a38; }.tag-library-option { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 5px 0; color: #c0d3da; font-size: 11px; cursor: pointer; }.tag-library-option:hover { color: #fff; }.tag-library-option input { flex: none; margin: 2px 0 0; accent-color: var(--accent); }.tag-library-option span { overflow-wrap: anywhere; }.index-picker-help a { color: #ffc094; text-decoration: underline; text-underline-offset: 2px; }.field-label { display: block; margin-bottom: 6px; color: #dce8ee; font-size: 11px; }
@media (max-width: 1000px) { .manage-create { grid-template-columns: 1fr; }.manage-two-column { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .manage-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }.manage-summary>div { padding: 10px; }.manage-summary strong { font-size: 12px; }.manage-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }.manage-filter label:first-child { grid-column: 1/-1; }.manage-filter button { grid-column: 1/-1; }.manage-row-count { display: none; }.manage-create form, .tag-library-picker { grid-template-columns: 1fr; }.manage-tabs a { padding: 8px 10px; font-size: 10px; } }
.manage-table td:nth-child(4) { min-width: 150px; }
.manage-status button { white-space: nowrap; }