:root,
:root[data-theme="dark"] {
  /* 表面层 */
  --bg: #07080f;
  --bg-2: #0c0d18;
  --bg-3: #131525;
  --surface: rgba(0, 0, 0, 0.13);
  --surface-2: rgba(0, 0, 0, 0.24);
  --surface-3: rgba(0, 0, 0, 0.36);

  /* 文字 */
  --fg: #e8eaf2;
  --fg-2: #b4b8cc;
  --fg-3: #7a7e95;
  --fg-mute: rgba(232, 234, 242, 0.4);

  /* 边框 */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);

  /* 玻璃 */
  --glass: rgba(0, 0, 0, 0.10);
  --glass-2: rgba(0, 0, 0, 0.34);
  --glass-border: rgba(255, 255, 255, 0.08);
  --drawer-bg: rgba(18, 20, 34, 0.72);
  --drawer-bg-image:
    radial-gradient(circle at 18% 12%, rgba(129, 140, 248, 0.18), transparent 34%),
    radial-gradient(circle at 88% 80%, rgba(103, 232, 249, 0.10), transparent 38%),
    linear-gradient(160deg, rgba(15, 17, 31, 0.82), rgba(7, 8, 15, 0.68));
  --drawer-mask: rgba(0, 0, 0, 0.42);

  /* 品牌色 — 偏冷的蓝紫, 高克制的金作点缀 */
  --primary: #818cf8;          /* indigo-400 */
  --primary-2: #c084fc;        /* purple-400 */
  --accent: #67e8f9;           /* cyan-300 */
  --accent-2: #fde68a;         /* amber-200 暖金点缀 */
  --success: #6ee7b7;
  --warn: #fcd34d;
  --danger: #fca5a5;

  /* 渐变(背景 hero 用) */
  --grad-primary: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #67e8f9 100%);
  --grad-soft: linear-gradient(135deg, rgba(129, 140, 248, 0.4) 0%, rgba(192, 132, 252, 0.3) 50%, rgba(103, 232, 249, 0.4) 100%);

  /* 阴影 */
  --shadow-1: 0 4px 30px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 20px 60px rgba(129, 140, 248, 0.18);
  --shadow-glow: 0 0 40px rgba(129, 140, 248, 0.25);

  /* 形状 */
  --radius: 18px;
  --radius-sm: 12px;

  /* 动效 */
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="light"] {
  --bg: #f5f5f7;
  --bg-2: #fafafc;
  --bg-3: #ffffff;
  --surface: rgba(255, 255, 255, 0.20);
  --surface-2: rgba(255, 255, 255, 0.34);
  --surface-3: rgba(255, 255, 255, 0.48);
  --glass-2: rgba(255, 255, 255, 0.82);

  --fg: #0c0e1a;
  --fg-2: #3b3f54;
  --fg-3: #6b7088;
  --fg-mute: rgba(12, 14, 26, 0.4);

  --line: rgba(0, 0, 0, 0.07);
  --line-2: rgba(0, 0, 0, 0.12);

  --glass: rgba(255, 255, 255, 0.16);
  --glass-2: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(0, 0, 0, 0.08);
  --drawer-bg: rgba(250, 250, 252, 0.92);
  --drawer-bg-image:
    radial-gradient(circle at 16% 12%, rgba(79, 70, 229, 0.08), transparent 36%),
    radial-gradient(circle at 88% 82%, rgba(8, 145, 178, 0.06), transparent 38%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 252, 0.88));
  --drawer-mask: rgba(12, 14, 26, 0.28);

  --primary: #4f46e5;
  --primary-2: #7c3aed;
  --accent: #0891b2;
  --accent-2: #d97706;
  --success: #059669;
  --warn: #d97706;
  --danger: #dc2626;

  --grad-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #0891b2 100%);
  --grad-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.15) 0%, rgba(124, 58, 237, 0.12) 50%, rgba(8, 145, 178, 0.15) 100%);

  --shadow-1: 0 4px 30px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 20px 60px rgba(79, 70, 229, 0.12);
  --shadow-glow: 0 0 40px rgba(79, 70, 229, 0.15);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:'Inter','PingFang SC',system-ui,-apple-system,sans-serif;overflow-x:hidden;min-height:100vh}
#app{min-height:100vh;display:block}
body{font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;position:relative;z-index:1;background:var(--bg);color:var(--fg)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:0}

/* ============ 动态背景 ============ */
/* ============ 银河系背景 ============ */
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden;isolation:isolate;pointer-events:none;background:var(--bg)}

/* 银河星云: 多层 radial-gradient 叠加 */
.bg-nebula{position:absolute;inset:-20%;pointer-events:none}
.bg-nebula::before,
.bg-nebula::after{content:"";position:absolute;inset:0}

/* 主银河带: 沿对角线的紫粉色云气 */
.bg-nebula::before{
  background:
    radial-gradient(ellipse 60% 45% at 25% 25%, rgba(129, 140, 248, 0.40), transparent 65%),
    radial-gradient(ellipse 50% 35% at 75% 15%, rgba(192, 132, 252, 0.35), transparent 60%),
    radial-gradient(ellipse 55% 40% at 35% 75%, rgba(103, 232, 249, 0.25), transparent 60%),
    radial-gradient(ellipse 45% 30% at 80% 65%, rgba(129, 140, 248, 0.30), transparent 60%),
    radial-gradient(ellipse 35% 25% at 50% 90%, rgba(192, 132, 252, 0.20), transparent 60%);
  filter: blur(50px);
  animation: nebulaDrift 60s ease-in-out infinite alternate;
}

/* 银河带核心: 对角线亮带 */
.bg-nebula::after{
  background: linear-gradient(125deg, transparent 0%, transparent 25%, rgba(192, 132, 252, 0.08) 40%, rgba(129, 140, 248, 0.12) 50%, rgba(103, 232, 249, 0.08) 60%, transparent 75%, transparent 100%);
  filter: blur(30px);
}

:root[data-theme="light"] .bg-nebula::before{
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(79, 70, 229, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 30% at 70% 20%, rgba(124, 58, 237, 0.06), transparent 60%),
    radial-gradient(ellipse 55% 35% at 30% 70%, rgba(8, 145, 178, 0.04), transparent 60%),
    radial-gradient(ellipse 40% 25% at 80% 60%, rgba(79, 70, 229, 0.06), transparent 60%);
}

@keyframes nebulaDrift{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-3%,-2%) rotate(2deg)}}

/* 银河带亮纹: 对角线一束光 */

/* 深空中心点亮: 银河系中心有微弱"核" */
.bg-nebula-core{position:absolute;left:50%;top:40%;width:600px;height:200px;transform:translate(-50%,-50%) rotate(-12deg);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,255,255,0.10) 0%,rgba(192,132,252,0.06) 30%,transparent 60%);filter:blur(20px);pointer-events:none;mix-blend-mode:screen}
:root[data-theme="light"] .bg-nebula-core{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,255,255,0.5) 0%,rgba(124,58,237,0.06) 30%,transparent 60%)}

.bg-galaxy-band{position:absolute;left:-10%;top:30%;width:130%;height:30%;background:linear-gradient(125deg,transparent 0%,transparent 30%,rgba(255,255,255,0.06) 45%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0.06) 55%,transparent 70%,transparent 100%);transform:rotate(-12deg);filter:blur(1px);pointer-events:none;mix-blend-mode:screen}
:root[data-theme="light"] .bg-galaxy-band{background:linear-gradient(125deg,transparent 0%,transparent 30%,rgba(192,132,252,0.10) 45%,rgba(129,140,248,0.16) 50%,rgba(192,132,252,0.10) 55%,transparent 70%,transparent 100%);mix-blend-mode:multiply}

/* 银河尘埃: 大量微粒(box-shadow 散布) */
.bg-stars{position:absolute;inset:0;pointer-events:none}
.bg-stars span{position:absolute;display:block;border-radius:50%}

/* 远景星: 小 + 暗 + 多 */
.bg-stars .s1{width:1px;height:1px;background:rgba(255,255,255,.6);box-shadow:
  120px 80px 0 rgba(255,255,255,.5),
  340px 220px 0 rgba(255,255,255,.4),
  560px 130px 0 rgba(255,255,255,.5),
  780px 340px 0 rgba(255,255,255,.4),
  980px 90px 0 rgba(255,255,255,.5),
  1180px 220px 0 rgba(255,255,255,.4),
  200px 480px 0 rgba(255,255,255,.5),
  640px 580px 0 rgba(255,255,255,.4),
  1080px 480px 0 rgba(255,255,255,.5),
  1300px 380px 0 rgba(255,255,255,.4),
  80px 700px 0 rgba(255,255,255,.5),
  460px 760px 0 rgba(255,255,255,.4),
  840px 700px 0 rgba(255,255,255,.5),
  1180px 800px 0 rgba(255,255,255,.4),
  200px 200px 0 rgba(255,255,255,.5),
  720px 50px 0 rgba(255,255,255,.4);
animation: twinkleA 4s ease-in-out infinite}

/* 中景星: 中 + 亮 + 带颜色 */
.bg-stars .s2{width:1.5px;height:1.5px;background:rgba(192,132,252,.8);box-shadow:
  180px 320px 0 rgba(129,140,248,.7),
  420px 60px 0 rgba(192,132,252,.7),
  680px 260px 0 rgba(103,232,249,.6),
  900px 420px 0 rgba(192,132,252,.7),
  1140px 160px 0 rgba(129,140,248,.6),
  60px 540px 0 rgba(192,132,252,.7),
  380px 620px 0 rgba(103,232,249,.6),
  720px 720px 0 rgba(192,132,252,.7),
  1060px 660px 0 rgba(129,140,248,.6),
  1300px 360px 0 rgba(192,132,252,.7),
  240px 100px 0 rgba(103,232,249,.6);
animation: twinkleB 6s ease-in-out infinite}

/* 亮星: 少数大 + 强 + 暖金点缀 */
.bg-stars .s3{width:2px;height:2px;background:rgba(253,230,138,.9);box-shadow:
  280px 180px 0 0 rgba(253,230,138,.5),
  620px 320px 0 0 rgba(255,255,255,.4),
  940px 240px 0 0 rgba(253,230,138,.4),
  1240px 540px 0 0 rgba(255,255,255,.4),
  320px 660px 0 0 rgba(253,230,138,.4);
animation: twinkleC 8s ease-in-out infinite}

@keyframes twinkleA{0%,100%{opacity:.4}50%{opacity:.9}}


/* ============ 主题切换按钮 ============ */
#btn-theme,#btn-theme-g{position:relative}
#btn-theme,#btn-theme-g,#login-theme-btn{overflow:hidden}
#btn-theme svg,#btn-theme-g svg,#login-theme-btn svg{position:absolute;top:50%;left:50%;transition:transform .4s var(--ease-spring),opacity .3s}
:root[data-theme="dark"] #btn-theme .theme-icon-dark,:root[data-theme="dark"] #btn-theme-g .theme-icon-dark,:root[data-theme="dark"] #login-theme-btn .theme-icon-dark{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}
:root[data-theme="dark"] #btn-theme .theme-icon-light,:root[data-theme="dark"] #btn-theme-g .theme-icon-light,:root[data-theme="dark"] #login-theme-btn .theme-icon-light{transform:translate(-50%,-50%) rotate(90deg) scale(.5);opacity:0}
:root[data-theme="light"] #btn-theme .theme-icon-dark,:root[data-theme="light"] #btn-theme-g .theme-icon-dark,:root[data-theme="light"] #login-theme-btn .theme-icon-dark{transform:translate(-50%,-50%) rotate(-90deg) scale(.5);opacity:0}
:root[data-theme="light"] #btn-theme .theme-icon-light,:root[data-theme="light"] #btn-theme-g .theme-icon-light,:root[data-theme="light"] #login-theme-btn .theme-icon-light{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}

/* ============ 全局过渡 (主题切换) ============ */
body, .topbar, .sidebar, .side-section, .stream, .stream-head, .hero, .card, .empty,
.nav, .nav-item, .icon-btn, .btn, .lb-meta, .lb-tag, .hero-search, .hero-pill, .lightbox,
.drawer-panel, .dropzone, .upload-form input, .upload-form textarea, .group-chip, .tag-pill,
.queue-item, .toast {
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}

@keyframes twinkleB{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}
@keyframes twinkleC{0%,100%{opacity:.6}50%{opacity:1;transform:scale(1.4)}}

/* light 主题: 星是深色 (不是白色) */
:root[data-theme="light"] .bg-stars .s1{background:rgba(12,14,26,.45);box-shadow:
  120px 80px 0 rgba(12,14,26,.35),
  340px 220px 0 rgba(12,14,26,.3),
  560px 130px 0 rgba(12,14,26,.4),
  780px 340px 0 rgba(12,14,26,.3),
  980px 90px 0 rgba(12,14,26,.4),
  1180px 220px 0 rgba(12,14,26,.3),
  200px 480px 0 rgba(12,14,26,.4),
  640px 580px 0 rgba(12,14,26,.3),
  1080px 480px 0 rgba(12,14,26,.4),
  1300px 380px 0 rgba(12,14,26,.3),
  80px 700px 0 rgba(12,14,26,.4),
  460px 760px 0 rgba(12,14,26,.3),
  840px 700px 0 rgba(12,14,26,.4),
  1180px 800px 0 rgba(12,14,26,.3),
  200px 200px 0 rgba(12,14,26,.4),
  720px 50px 0 rgba(12,14,26,.3)}
:root[data-theme="light"] .bg-stars .s2{background:rgba(79,70,229,.7);box-shadow:
  180px 320px 0 rgba(79,70,229,.6),
  420px 60px 0 rgba(124,58,237,.6),
  680px 260px 0 rgba(8,145,178,.5),
  900px 420px 0 rgba(79,70,229,.6),
  1140px 160px 0 rgba(124,58,237,.5),
  60px 540px 0 rgba(79,70,229,.6),
  380px 620px 0 rgba(8,145,178,.5),
  720px 720px 0 rgba(79,70,229,.6),
  1060px 660px 0 rgba(124,58,237,.5),
  1300px 360px 0 rgba(79,70,229,.6),
  240px 100px 0 rgba(8,145,178,.5)}
:root[data-theme="light"] .bg-stars .s3{background:rgba(217,119,6,.85);box-shadow:
  280px 180px 0 rgba(217,119,6,.45),
  620px 320px 0 rgba(12,14,26,.35),
  940px 240px 0 rgba(217,119,6,.35),
  1240px 540px 0 rgba(12,14,26,.35),
  320px 660px 0 rgba(217,119,6,.35)}

/* 流星: 斜向下划 */
.bg-meteor{position:absolute;width:1px;height:1px;background:#fff;border-radius:50%;box-shadow:0 0 4px #fff,0 0 8px rgba(255,255,255,.5);pointer-events:none}
.bg-meteor::after{content:"";position:absolute;top:0;right:0;width:90px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9));transform:translateX(100%) translateY(.5px);transform-origin:right}
.bg-meteor.m1{top:12%;left:20%;animation:meteor 8s linear infinite}
.bg-meteor.m2{top:35%;left:50%;animation:meteor 12s linear infinite 3s}
.bg-meteor.m3{top:62%;left:15%;animation:meteor 10s linear infinite 6s}
.bg-meteor.m4{top:78%;left:65%;animation:meteor 14s linear infinite 2s}
@keyframes meteor{0%{transform:translate(0,0) rotate(40deg);opacity:0}3%{opacity:1}40%{opacity:.9}100%{transform:translate(450px,380px) rotate(40deg);opacity:0}}

/* canvas: 动态粒子 */
#bg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:1;z-index:1}

/* 渐变(整页) */
.bg-gradient{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 20% 20%,var(--primary),transparent 60%),
  radial-gradient(50% 50% at 80% 30%,var(--primary-2),transparent 60%),
  radial-gradient(60% 60% at 50% 90%,var(--accent),transparent 60%);
opacity:.04}

/* 网格遮罩 */
.bg-grid{position:absolute;inset:0;background-image:
  linear-gradient(var(--line) 1px,transparent 1px),
  linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 60% 50% at 50% 30%,#000 40%,transparent 100%);
-webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 30%,#000 40%,transparent 100%)}

@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.1)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-100px,40px) scale(1.05)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-80px) scale(1.08)}}

/* ============ 磁性光标 ============ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);will-change:transform}
.cursor{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.6);transition:width .25s var(--ease-out),height .25s var(--ease-out),background .25s,border-color .25s,opacity .25s;mix-blend-mode:difference}
.cursor-dot{width:6px;height:6px;background:#fff;mix-blend-mode:difference}
.cursor.is-hover{width:60px;height:60px;background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.8)}
@media (hover:none){.cursor,.cursor-dot{display:none}}

/* ============ 主体内容 ============ */
.topbar,.hero,.layout,.drawer,.lightbox,.toasts{position:relative;z-index:2}

.topbar{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:18px 32px;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background:var(--surface-2);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.brand-mark{position:relative;width:36px;height:36px;border-radius:12px;background:transparent;padding:0;animation:spin 6s linear infinite}
.brand-mark::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;padding:2px;background:conic-gradient(from 0deg,#a78bfa,#ec4899,#22d3ee,#a78bfa);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.brand-mark span{position:absolute;z-index:1;width:18px;height:15px;border-radius:4px;background:linear-gradient(135deg,#818cf8,#c084fc 52%,#67e8f9);top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(129,140,248,.34)}
.brand-mark span::before{content:"";position:absolute;inset:3px;border:1.5px solid rgba(255,255,255,.92);border-radius:2.4px}
.brand-mark span::after{content:"";position:absolute;left:5px;right:4px;bottom:4px;height:5px;background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.78));clip-path:polygon(0 100%,30% 35%,52% 70%,78% 22%,100% 58%,100% 100%)}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-name{font-family:'Space Grotesk';font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1}
.brand-sub{font-size:10.5px;color:var(--fg-3);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}

.nav{display:flex;align-items:center;gap:6px;justify-self:center;background:var(--surface);border:1px solid var(--line);padding:6px;border-radius:999px;backdrop-filter:blur(10px)}
.nav-item{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--fg-2);transition:all .3s var(--ease-out);position:relative}
.nav-item:hover{color:var(--fg)}
.nav-item.is-active{color:#fff;background:linear-gradient(135deg,rgba(167,139,250,.4),rgba(236,72,153,.3));box-shadow:0 4px 20px rgba(167,139,250,.3)}
.nav-item .count{font-size:10.5px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--fg-3);min-width:18px;text-align:center}

.topbar-actions{display:flex;align-items:center;gap:10px}
.route-home .topbar-actions{grid-column:3;justify-self:end}
.icon-btn{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--fg-2);display:inline-flex;align-items:center;justify-content:center;transition:all .25s var(--ease-out)}
.icon-btn:hover{color:#fff;background:var(--surface-2);transform:translateY(-1px)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;font-weight:600;font-size:13.5px;letter-spacing:-.005em;transition:all .25s var(--ease-out);border:1px solid transparent;position:relative;overflow:hidden}
.btn.primary{color:#fff;background:linear-gradient(135deg,#a78bfa,#ec4899);box-shadow:0 8px 24px rgba(167,139,250,.35)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(167,139,250,.5)}
.btn.ghost{color:var(--fg-2);background:var(--surface);border-color:var(--line)}
.btn.ghost:hover{color:#fff;background:var(--surface-2)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.3),transparent 70%);transform:translateX(-100%);transition:transform .8s}
.btn:hover::after{transform:translateX(100%)}
.btn:disabled{cursor:default;opacity:.72;transform:none;box-shadow:none}
.btn:disabled::after{display:none}

/* ============ 英雄区 ============ */
.hero{padding:32px 32px 20px;max-width:1200px;margin:0 auto;text-align:center;position:relative;z-index:2}
.hero::before{content:"";position:absolute;top:30%;left:50%;width:480px;height:480px;background:radial-gradient(circle,rgba(167,139,250,.10),transparent 60%);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;animation:hbeat 8s ease-in-out infinite;opacity:.7}
@keyframes hbeat{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}}
.hero-meta{display:flex;justify-content:center;margin-bottom:20px}
.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;color:var(--fg-2);backdrop-filter:blur(10px)}
.pulse{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.hero-title{font-family:'Space Grotesk','PingFang SC','Microsoft YaHei',sans-serif;font-size:clamp(40px,6.2vw,76px);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin:0 0 16px}
.hero-title .line{display:block;overflow:hidden;line-height:1.08;white-space:nowrap}
.hero-title .line>*{display:inline-block;transform:none;opacity:1;will-change:transform}
.hero-title .line i{font-style:italic;font-weight:300;font-family:'Inter','PingFang SC',serif}
.hero-title em.grad{font-style:italic;font-weight:400;background:linear-gradient(135deg,#a78bfa 0%,#ec4899 50%,#22d3ee 100%);-webkit-background-clip:text;background-clip:text;color:#a78bfa;-webkit-text-fill-color:transparent;display:inline-block;padding:0 .04em;text-shadow:0 0 24px rgba(167,139,250,.4);transition:text-shadow .3s}.hero-title em.grad:hover{text-shadow:0 0 36px rgba(236,72,153,.6)}
.hero-title .italic{font-style:italic}

.hero-desc{font-size:15px;color:var(--fg-2);max-width:520px;margin:0 auto 24px;line-height:1.7;letter-spacing:.01em}

.hero-search{display:flex;align-items:center;gap:12px;max-width:480px;margin:0 auto;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(20px);transition:all .3s var(--ease-out)}
.hero-search:focus-within{background:var(--surface-2);border-color:rgba(167,139,250,.5);box-shadow:0 0 0 4px rgba(167,139,250,.1)}
.hero-search input{flex:1;background:none;border:0;color:var(--fg);font-size:14px}
.hero-search input::placeholder{color:var(--fg-3)}
.hero-search kbd{padding:3px 8px;background:rgba(255,255,255,.08);border-radius:6px;font-size:11px;color:var(--fg-3);font-family:'Space Grotesk'}

/* ============ 布局 ============ */
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;max-width:1400px;margin:0 auto;padding:16px 32px 80px;align-items:start;position:relative;z-index:2}
@media (max-width:900px){.layout{grid-template-columns:1fr}}

.sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px;height:fit-content}
.side-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;backdrop-filter:blur(10px)}
.side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);font-weight:600}
.ghost-btn{font-size:11.5px;color:var(--fg-3);padding:4px 8px;border-radius:6px;transition:all .2s}
.ghost-btn:hover{color:var(--primary);background:rgba(167,139,250,.1)}

.group-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.group-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;transition:all .2s var(--ease-out);font-size:13.5px;color:var(--fg-2);position:relative}
.group-item:hover{background:var(--surface-2);color:var(--fg)}
.group-item.is-active{background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(236,72,153,.12));color:#fff}
.group-item.is-active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:linear-gradient(180deg,#a78bfa,#ec4899);border-radius:0 2px 2px 0}
.group-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.group-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-count{font-size:11px;color:var(--fg-3);background:rgba(255,255,255,.05);padding:1px 6px;border-radius:4px}
.group-empty{font-size:12px;color:var(--fg-3);padding:12px;text-align:center;font-style:italic}

.view-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.view-btn{padding:10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--fg-3);display:flex;align-items:center;justify-content:center;transition:all .2s}
.view-btn:hover{color:var(--fg);background:var(--surface-2)}
.view-btn.is-active{color:#fff;background:linear-gradient(135deg,rgba(167,139,250,.3),rgba(236,72,153,.2));border-color:rgba(167,139,250,.4)}

.side-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 8px}
.stat{text-align:center}
.stat-num{font-family:'Space Grotesk';font-size:18px;font-weight:700;background:linear-gradient(135deg,#a78bfa,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat-label{font-size:10.5px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}

/* ============ 相册流 ============ */
.stream-wrap{min-width:0;min-height:200px}
.stream-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 4px}
.stream-title{font-family:'Space Grotesk';font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0}
.stream-tools{display:flex;align-items:center;gap:14px}
.sort{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-3)}
.sort select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--fg);font-size:12.5px;cursor:pointer}

.stream{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-flow:dense;min-height:200px}
.stream[data-view="masonry"]{display:flex;align-items:flex-start;grid-template-columns:none}
.stream[data-view="masonry"] .masonry-col{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:inherit}
.stream[data-view="list"]{grid-template-columns:1fr;gap:12px}
.stream[data-view="grid"] .card .card-img-wrap{aspect-ratio:1/1 !important}

/* ============ 卡片 ============ */
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);cursor:pointer;transform-style:preserve-3d;will-change:transform}
.card:hover{box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card.starred::after{content:"★";position:absolute;top:10px;right:10px;z-index:3;color:#fbbf24;font-size:18px;text-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none}
.card .card-img-wrap{position:relative;overflow:hidden;background:rgba(255,255,255,.03)}
.card .card-img-wrap.aspect-portrait{aspect-ratio:3/4}
.card .card-img-wrap.aspect-landscape{aspect-ratio:4/3}
.card .card-img-wrap.aspect-square{aspect-ratio:1/1}
.card .card-img-wrap.aspect-tall{aspect-ratio:2/3}
.card .card-img-wrap.aspect-wide{aspect-ratio:16/10}
.card .card-img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),filter .5s}
.card:hover .card-img{transform:scale(1.08);filter:brightness(1.1) saturate(1.1)}
.card .card-shine{position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);transform:translateX(-100%);transition:transform .8s;pointer-events:none}
.card:hover .card-shine{transform:translateX(100%)}
.card .card-info{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));color:#fff;transform:translateY(20%);opacity:0;transition:all .4s var(--ease-out)}
.card:hover .card-info,.card:focus-within .card-info{transform:translateY(0);opacity:1}
.card .card-title{font-size:13.5px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.card .card-meta{font-size:11.5px;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:8px}
.card .card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.card .card-tag{font-size:10px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(4px)}
.card .card-actions{position:absolute;top:clamp(10px,.75vw,16px);left:clamp(10px,.75vw,16px);display:flex;gap:clamp(6px,.5vw,10px);opacity:0;transform:translateY(-6px);transition:all .35s var(--ease-out);z-index:2}
.card:hover .card-actions{opacity:1;transform:translateY(0)}
.card-action{width:clamp(34px,2.2vw,46px);height:clamp(34px,2.2vw,46px);border-radius:clamp(9px,.7vw,14px);background:rgba(0,0,0,.58);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);box-shadow:0 clamp(6px,.5vw,10px) clamp(18px,1.4vw,30px) rgba(0,0,0,.22);color:#fff;display:flex;align-items:center;justify-content:center;font-size:clamp(15px,1vw,21px);line-height:1;transition:all .2s}
.card-action:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}
.card-action.is-on{color:#fbbf24}

/* 列表视图 */
.stream[data-view="list"] .card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:stretch}
.stream[data-view="list"] .card .card-img-wrap{aspect-ratio:1/1 !important;height:100%}
.stream[data-view="list"] .card .card-info{position:absolute;left:120px;right:0;bottom:0;transform:translateY(20%);opacity:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));padding:16px;color:#fff;align-self:auto}

/* 3D 倾斜 */
.card.tilt-active{transition:transform .15s ease-out}

/* ============ 空状态 ============ */
.empty{text-align:center;padding:48px 32px;display:none;flex-direction:column;align-items:center;background:linear-gradient(135deg,rgba(167,139,250,.06),rgba(236,72,153,.04));border:1px dashed rgba(255,255,255,.12);border-radius:20px;margin:12px 0 0;min-height:0;justify-content:center}
.empty.is-on{display:flex}
.empty-art{position:relative;width:120px;height:120px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.empty-svg{filter:drop-shadow(0 8px 24px rgba(167,139,250,.3));animation:floatY 4s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ring{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.empty h3{font-family:'Space Grotesk','PingFang SC','Microsoft YaHei',sans-serif;font-size:18px;margin:0 0 6px;font-weight:600}
.empty>p{color:var(--fg-2);margin:0 0 16px;font-size:13.5px}

/* ============ 抽屉 ============ */
.drawer{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .4s}
.drawer.is-on{pointer-events:auto;opacity:1}
.drawer-mask{position:absolute;inset:0;background:var(--drawer-mask);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s,background-color .5s var(--ease-out)}
.drawer.is-on .drawer-mask{opacity:1}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(480px,100%);background-color:var(--drawer-bg);background-image:var(--drawer-bg-image);color:var(--fg);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .5s var(--ease-out),background-color .5s var(--ease-out),color .5s var(--ease-out),border-color .5s var(--ease-out),box-shadow .5s var(--ease-out);box-shadow:-20px 0 60px rgba(0,0,0,.5)}
.drawer.is-on .drawer-panel{transform:translateX(0)}
.drawer-handle{display:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:'Space Grotesk';font-size:20px;font-weight:600;margin:0}
.drawer-body,.dropzone,.upload-form{flex-shrink:0}
.dropzone{margin:20px 24px;padding:26px 20px;border:1.5px dashed var(--line-2);border-radius:var(--radius);text-align:center;cursor:pointer;transition:all .3s var(--ease-out);background:var(--glass);display:flex;flex-direction:column;gap:14px;max-height:340px}
.dropzone:hover,.dropzone.is-over{border-color:rgba(167,139,250,.6);background:rgba(167,139,250,.05);transform:scale(1.01)}
.dropzone.is-over{transform:scale(1.02)}
.dropzone-icon{color:var(--primary);margin-bottom:12px;display:flex;justify-content:center}
.dropzone-title{font-size:14px;font-weight:500;margin-bottom:4px}
.dropzone-sub{font-size:12px;color:var(--fg-3)}
.dropzone:has(.upload-queue:not(:empty)){padding:18px 16px;text-align:left}
.dropzone:has(.upload-queue:not(:empty)) .dropzone-inner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}
.dropzone:has(.upload-queue:not(:empty)) .dropzone-icon{margin:0}
.dropzone:has(.upload-queue:not(:empty)) .dropzone-icon svg{width:36px;height:36px}
.dropzone:has(.upload-queue:not(:empty)) .dropzone-title{margin:0 0 2px}

.upload-form{padding:0 24px 16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.upload-form label{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);margin-top:8px;font-weight:600}
.upload-form .muted{color:var(--fg-3);text-transform:none;letter-spacing:0}
.upload-form textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--fg);font-size:13.5px;resize:vertical;min-height:60px;transition:all .2s}
.upload-form textarea:focus{border-color:rgba(167,139,250,.5);background:var(--surface-2)}
.group-chips{display:flex;flex-wrap:wrap;gap:6px}
.group-chip{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--fg-2);transition:all .2s}
.group-chip:hover{color:#fff}
.group-chip.is-on{background:linear-gradient(135deg,rgba(167,139,250,.3),rgba(236,72,153,.2));color:#fff;border-color:rgba(167,139,250,.5)}

.tag-input{display:flex;flex-wrap:wrap;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;min-height:42px;transition:all .2s}
.tag-input:focus-within{border-color:rgba(167,139,250,.5);background:var(--surface-2)}
.tag-input input{flex:1;min-width:120px;background:none;color:var(--fg);font-size:13px;padding:4px 6px}
.tag-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 6px 4px 10px;border-radius:999px;background:linear-gradient(135deg,rgba(167,139,250,.3),rgba(236,72,153,.2));color:#fff;border:1px solid rgba(167,139,250,.4);animation:pop .3s var(--ease-spring)}
.tag-pill button{font-size:14px;line-height:1;opacity:.6;padding:0 4px}
.tag-pill button:hover{opacity:1}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

.upload-queue{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px 2px 0;cursor:default}
.upload-queue:empty{display:none}
.queue-item{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;animation:slideIn .3s var(--ease-out)}
.queue-item.is-uploading{border-color:rgba(129,140,248,.55);background:linear-gradient(135deg,rgba(129,140,248,.16),var(--surface))}
.queue-item.is-uploading .queue-thumb{filter:saturate(1.08);box-shadow:0 0 0 2px rgba(129,140,248,.28)}
.queue-item.is-done{border-color:rgba(34,197,94,.5);background:linear-gradient(135deg,rgba(34,197,94,.16),var(--surface))}
.queue-item.is-done .queue-meta{color:#22c55e}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.queue-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.05)}
.queue-info{font-size:12.5px;min-width:0}
.queue-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-meta{font-size:10.5px;color:var(--fg-3);margin-top:2px}
.queue-remove{width:24px;height:24px;border-radius:6px;color:var(--fg-3);transition:all .2s}
.queue-remove:hover{color:#ef4444;background:rgba(239,68,68,.1)}
.queue-remove:disabled{cursor:default;opacity:.85;color:var(--fg-2)}
.queue-item.is-done .queue-remove:disabled{color:#22c55e;opacity:1}

.drawer-foot{display:flex;align-items:center;gap:10px;padding:16px 24px;border-top:1px solid var(--line);background:rgba(0,0,0,.2)}
.drawer-foot .muted{color:var(--fg-3);font-size:12.5px;margin-right:auto}

/* ============ 灯箱 ============ */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.68);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center}
.lightbox.is-on{display:flex;animation:lbIn .4s var(--ease-out)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-stage{flex:1;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 100px;position:relative}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.48);transition:transform .4s var(--ease-out),opacity .3s;animation:lbImgIn .5s var(--ease-out)}
@keyframes lbImgIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.lb-stage img.is-swiping{transition:transform .2s}
.lb-info{position:absolute;bottom:clamp(30px,2.4vw,54px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,.8vw,16px);max-width:80%}
.lb-meta{display:flex;align-items:center;gap:clamp(14px,1vw,24px);padding:clamp(10px,.78vw,16px) clamp(18px,1.35vw,30px);background:rgba(8,10,18,.72);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.16);border-radius:999px;box-shadow:0 clamp(10px,1vw,20px) clamp(28px,2.2vw,48px) rgba(0,0,0,.34)}
.lb-meta #lb-counter{font-size:clamp(12.5px,.82vw,16px);color:rgba(255,255,255,.9);font-family:'Space Grotesk'}
.lb-meta button{font-size:clamp(13px,.86vw,17px);min-height:clamp(28px,2vw,38px);padding:clamp(5px,.45vw,9px) clamp(12px,.95vw,22px);border-radius:999px;transition:all .2s;color:rgba(255,255,255,.86)}
.lb-star{width:clamp(34px,2.35vw,46px);min-width:clamp(34px,2.35vw,46px);padding:0 !important;color:rgba(255,255,255,.86);font-size:clamp(18px,1.25vw,24px) !important;display:inline-flex;align-items:center;justify-content:center}
.lb-star.is-on{color:#fbbf24}
.lb-del{color:rgba(255,255,255,.86)}
.lb-del:hover{color:#ef4444;background:rgba(239,68,68,.1)}
.lb-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.lb-tag{font-size:clamp(11px,.72vw,14px);padding:clamp(3px,.3vw,6px) clamp(10px,.8vw,16px);border-radius:999px;background:rgba(255,255,255,.08);color:var(--fg-2);backdrop-filter:blur(4px)}
.lb-note{font-size:clamp(12.5px,.82vw,16px);color:rgba(255,255,255,.82);text-align:center;max-width:min(640px,80vw);font-style:italic;text-shadow:0 2px 12px rgba(0,0,0,.55)}

.lb-close,.lb-nav{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);border:1px solid var(--line);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .25s var(--ease-out);z-index:5}
.lb-close{top:24px;right:24px;font-size:28px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-prev{left:24px}
.lb-next{right:24px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.15);transform:translateY(-50%) scale(1.1)}
.lb-close:hover{transform:scale(1.1)}

/* ============ Toast ============ */
.toasts{position:fixed;top:90px;right:24px;z-index:300;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{padding:12px 18px;border-radius:12px;background:rgba(20,20,32,.95);backdrop-filter:blur(20px);border:1px solid var(--line);color:#fff;font-size:13px;display:flex;align-items:center;gap:10px;min-width:200px;box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:auto;animation:toastIn .4s var(--ease-spring)}
.toast.is-out{animation:toastOut .3s var(--ease-out) forwards}
.toast-icon{font-size:16px}
.toast.success .toast-icon{color:#34d399}
.toast.error .toast-icon{color:#ef4444}
.toast.info .toast-icon{color:#22d3ee}
@keyframes toastIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(120%);opacity:0}}

/* ============ 滚动条 ============ */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* ============ 响应式 ============ */
@media (max-width:720px){
  .topbar{grid-template-columns:1fr auto;padding:14px 16px}
  .route-home .topbar-actions{grid-column:2}
  .nav{display:none}
  .hero{padding:48px 20px 32px}
  .layout{padding:16px 16px 60px;gap:16px}
  .sidebar{position:static}
  .lb-stage{padding:60px 20px}
  .lb-info{bottom:18px;max-width:92%;gap:8px}
  .lb-meta{gap:10px;padding:8px 12px}
  .lb-meta button{min-height:30px;padding:5px 10px}
  .lb-star{width:34px;min-width:34px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
}


/* ============ 路由切换 ============ */
.route{position:absolute;inset:0;display:none;overflow:hidden;z-index:1}
.route.is-on{animation:routeIn .55s cubic-bezier(.2,.9,.3,1) both}
.route-login.is-on,.route-home.is-on,.route-gallery.is-on{display:flex}
@keyframes routeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============ 登录页 ============ */
.route-login{display:flex;align-items:center;justify-content:center;padding:40px 20px}
.route-login .login-theme{position:absolute;top:14px;right:28px}
.login-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px 28px;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--shadow-2);animation:loginIn .8s cubic-bezier(.2,.9,.3,1)}
@keyframes loginIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:32px}
.login-brand .brand-mark{width:56px;height:56px;border-radius:16px;padding:0;animation:spin 8s linear infinite}
.login-brand .brand-mark::before{padding:2.5px}
.login-brand .brand-mark span{width:28px;height:23px;border-radius:6px}
.login-brand .brand-mark span::before{inset:5px;border-width:2px;border-radius:3px}
.login-brand .brand-mark span::after{left:8px;right:6px;bottom:6px;height:8px}
.login-title{font-family:'Space Grotesk';font-size:32px;font-weight:700;letter-spacing:-.02em;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:12px}
.login-sub{font-size:11px;color:var(--fg-3);letter-spacing:.18em;text-transform:uppercase}
.login-form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);font-weight:600}
.field>input{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--fg);font-size:14px;transition:all .2s;outline:0}
.field>input:focus{border-color:rgba(129,140,248,.5);background:var(--surface-3);box-shadow:0 0 0 4px rgba(129,140,248,.10)}
.login-btn{width:100%;justify-content:center;padding:14px 18px;margin-top:8px}
.login-hint{text-align:center;font-size:11.5px;color:var(--fg-3);margin-top:4px;font-family:'Space Grotesk','PingFang SC',sans-serif;letter-spacing:.02em}

/* ============ 首页 (home) ============ */
.route-home{display:flex;flex-direction:column}
.hero-home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(72px,10vh,108px) 32px 40px;max-width:900px;margin:0 auto;width:100%;text-align:center;position:relative}
.hero-home .hero-pill{margin-bottom:18px}
.hero-home .hero-title{font-size:clamp(36px,5.6vw,66px);line-height:1;margin:0 0 14px}
.hero-home .hero-title .line{line-height:1}
.hero-home .hero-desc{margin:0 0 34px}
.hero-home .hero-search{max-width:560px}
body:not(.home-booted) .route-home .hero-pill,
body:not(.home-booted) .route-home .hero-title .line>*,
body:not(.home-booted) .route-home .hero-desc,
body:not(.home-booted) .route-home .hero-search,
body:not(.home-booted) .route-home .shortcut{opacity:0;transform:translateY(24px)}

/* 快捷入口卡片 */
.hero-shortcuts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px;width:100%;max-width:560px}
.shortcut{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-align:left;cursor:pointer;transition:all .3s var(--ease-out);backdrop-filter:blur(10px);width:100%}
.shortcut:hover{background:var(--surface-2);border-color:rgba(129,140,248,.4);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.shortcut-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(129,140,248,.15),rgba(192,132,252,.1));color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.shortcut-text{flex:1;min-width:0}
.shortcut-title{font-size:14px;font-weight:600;color:var(--fg)}
.shortcut-sub{font-size:11.5px;color:var(--fg-3);margin-top:2px}
.shortcut-arrow{color:var(--fg-3);flex-shrink:0;transition:transform .3s var(--ease-spring)}
.shortcut:hover .shortcut-arrow{color:var(--primary);transform:translateX(3px)}

/* ============ 顶栏(共享) ============ */
.route-home .topbar,.route-gallery .topbar{padding:14px 28px}

/* ============ 照片库(gallery) ============ */
.route-gallery{display:flex;flex-direction:column;overflow:hidden}
.gallery-topbar{padding:14px 24px;gap:16px}
.route-gallery .topbar-actions{--gallery-tool-h:40px}
.route-gallery .topbar-actions>.icon-btn{width:var(--gallery-tool-h);height:var(--gallery-tool-h)}
.gallery-crumbs{display:inline-flex;align-items:center;justify-self:start;width:max-content;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 10px;backdrop-filter:blur(10px);flex:0 0 auto;max-width:58%;overflow-x:auto;scrollbar-width:none}
.gallery-crumbs::-webkit-scrollbar{display:none}
.crumb-crumb{width:32px;height:32px;border-radius:50%;background:transparent;border:0;color:var(--fg-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}
.crumb-crumb:hover{background:var(--surface-2);color:var(--fg)}
.crumb{display:inline-flex;align-items:center;font-size:14px;padding:7px 14px;border-radius:999px;background:transparent;border:0;color:var(--fg-2);cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.crumb-icon{display:none;flex:0 0 auto}
.crumb:hover{color:var(--fg);background:var(--surface-2)}
.crumb.is-on{color:#fff;background:linear-gradient(135deg,rgba(129,140,248,.3),rgba(192,132,252,.2));box-shadow:0 2px 8px rgba(129,140,248,.2)}
.crumb-sep{color:var(--fg-3);font-size:13px;opacity:.5}
:root[data-theme="light"] .route-gallery #btn-theme-g,
:root[data-theme="light"] .route-gallery .gallery-crumbs .crumb,
:root[data-theme="light"] .route-gallery .crumb-crumb{background:rgba(255,255,255,.82);border-color:rgba(12,14,26,.13);color:#1f2433;box-shadow:0 6px 18px rgba(12,14,26,.08)}
:root[data-theme="light"] .route-gallery #btn-theme-g:hover,
:root[data-theme="light"] .route-gallery .gallery-crumbs .crumb:hover,
:root[data-theme="light"] .route-gallery .crumb-crumb:hover{background:#fff;border-color:rgba(79,70,229,.28);color:#111827}
:root[data-theme="light"] .route-gallery .gallery-crumbs .crumb.is-on{background:rgba(79,70,229,.16);border-color:rgba(79,70,229,.52);color:#312e81;box-shadow:0 0 0 3px rgba(79,70,229,.14),0 8px 22px rgba(79,70,229,.16)}

/* 搜索框(画廊, 头部) */
.search-mini{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 8px 0 10px;width:clamp(200px,14vw,240px);height:var(--gallery-tool-h,40px);color:var(--fg-2);overflow:hidden}
.search-mini>svg,.search-mini kbd,.search-panel-btn{flex:0 0 auto}
.search-mini input{flex:1 1 auto;background:0;border:0;outline:0;color:var(--fg);font-size:12.5px;min-width:0}
.search-mini input::placeholder{color:var(--fg-3)}
.search-mini kbd{display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;padding:1px 6px;border-radius:4px;background:var(--surface-2);color:var(--fg-3);font-family:'Space Grotesk'}
.search-panel-btn{width:clamp(26px,1.65vw,32px);height:clamp(26px,1.65vw,32px);border-radius:clamp(8px,.6vw,10px);background:var(--surface-2);border:0;color:var(--fg-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.search-panel-btn:hover{background:var(--surface-3);color:var(--fg)}

/* 密度控制 */
.density-control{display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px;height:var(--gallery-tool-h,40px)}
.density-btn{width:30px;height:30px;border-radius:50%;background:transparent;border:0;color:var(--fg-2);font-size:18px;font-weight:400;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.density-btn:hover{background:var(--surface-2);color:var(--fg)}
.density-dots{display:flex;align-items:center;gap:2px;padding:0 4px}
.density-dots span{width:4px;height:4px;border-radius:50%;background:var(--fg-3);opacity:.4;transition:all .2s}
.density-dots span.is-on{background:var(--primary);opacity:1;width:5px;height:5px}

/* 密度档位: 改列数 */
.gallery-stage{padding:24px 24px 60px;flex:1;overflow-y:auto}
.stream{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(var(--gallery-card-md,220px),1fr));grid-auto-flow:dense;transition:all .4s var(--ease-out)}
.gallery-stage[data-density="xs"] .stream{grid-template-columns:repeat(auto-fill,minmax(var(--gallery-card-xs,110px),1fr));gap:6px}
.gallery-stage[data-density="sm"] .stream{grid-template-columns:repeat(auto-fill,minmax(var(--gallery-card-sm,160px),1fr));gap:10px}
.gallery-stage[data-density="md"] .stream{grid-template-columns:repeat(auto-fill,minmax(var(--gallery-card-md,220px),1fr));gap:14px}
.gallery-stage[data-density="lg"] .stream{grid-template-columns:repeat(auto-fill,minmax(var(--gallery-card-lg,320px),1fr));gap:20px}
.gallery-stage .stream[data-view="masonry"]{grid-template-columns:none}

/* 密度档位: 改卡片信息层透明度(密度大, 信息更克制) */
.gallery-stage[data-density="xs"] .card .card-info{padding:8px}
.gallery-stage[data-density="xs"] .card .card-title{font-size:11px}
.gallery-stage[data-density="xs"] .card .card-meta{font-size:10px;display:none}
.gallery-stage[data-density="xs"] .card .card-tags{display:none}
.gallery-stage[data-density="xs"] .card .card-actions{opacity:0}
.gallery-stage[data-density="sm"] .card .card-title{font-size:12px}
.gallery-stage[data-density="sm"] .card .card-meta{font-size:10.5px}

/* 列表视图 */
.stream[data-view="list"]{grid-template-columns:1fr;gap:10px}
.stream[data-view="list"] .card{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:stretch}
.stream[data-view="list"] .card .card-img-wrap{aspect-ratio:1/1 !important;height:100%}
.stream[data-view="list"] .card .card-info{position:absolute;left:120px;right:0;bottom:0;transform:translateY(20%);opacity:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));padding:14px;color:#fff;align-self:auto}
.stream[data-view="list"] .card .card-actions{top:auto;bottom:clamp(8px,.65vw,14px);right:clamp(8px,.65vw,14px)}

/* 方格视图 */
.stream[data-view="grid"] .card .card-img-wrap{aspect-ratio:1/1 !important}

/* 空状态 */
.empty{text-align:center;padding:64px 32px;display:none;flex-direction:column;align-items:center;background:linear-gradient(135deg,rgba(129,140,248,.05),rgba(192,132,252,.03));border:1px dashed var(--line);border-radius:20px;margin:24px 0;color:var(--fg)}
.empty.is-on{display:flex}
.empty h3{font-family:'Space Grotesk','PingFang SC',sans-serif;font-size:18px;margin:12px 0 6px;font-weight:600}
.empty p{color:var(--fg-3);margin:0 0 18px;font-size:13.5px}

/* ============ 辅助面板 ============ */
#panel-drawer .drawer-panel{width:min(420px,100%);padding:0;display:flex;flex-direction:column}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--line)}
.panel-head h3{font-family:'Space Grotesk','PingFang SC',sans-serif;font-size:18px;font-weight:600;margin:0}
.panel-tabs{display:flex;gap:4px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.panel-tab{flex:1;padding:9px 12px;border-radius:10px;background:transparent;border:0;color:var(--fg-2);font-size:12.5px;font-weight:500;cursor:pointer;transition:all .2s}
.panel-tab:hover{background:var(--surface-2);color:var(--fg)}
.panel-tab.is-on{background:var(--surface-3);color:var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.panel-body{flex:1;overflow-y:auto;padding:16px}
.panel-pane{display:none}
.panel-pane.is-on{display:block}

.panel-group-list{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:2px}
.panel-group-list .group-empty{font-size:12.5px;color:var(--fg-3);padding:14px;text-align:center;font-style:italic}
.panel-group-list .group-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .2s;font-size:13.5px;color:var(--fg-2)}
.panel-group-list .group-item:hover{background:var(--surface-2);color:var(--fg)}
.panel-group-list .group-item.is-active{background:linear-gradient(135deg,rgba(129,140,248,.18),rgba(192,132,252,.12));color:var(--fg)}
.panel-group-list .group-item.is-active::before{content:"";position:absolute;left:0;width:3px;height:60%;background:var(--primary);border-radius:0 2px 2px 0}

#panel-new-group{width:100%;padding:10px;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;color:var(--fg-2);font-size:12.5px;cursor:pointer;transition:all .2s}
#panel-new-group:hover{background:var(--surface-3);color:var(--fg);border-color:rgba(129,140,248,.4)}

.view-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);gap:12px}
.view-row:last-child{border-bottom:0}
.view-row-label{font-size:12.5px;color:var(--fg-2);font-weight:500}
.view-row-control{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.view-opt{width:36px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--fg-2);font-size:12px;cursor:pointer;transition:all .2s}
.view-opt svg{width:18px;height:18px;display:block;fill:currentColor;stroke:none}
.view-opt .density-icon{width:19px;height:19px}
.view-opt .density-icon-xs{width:18px;height:18px}
.view-opt .density-icon-lg{width:18px;height:18px}
.view-opt[data-vmode="list"] svg,.view-opt .view-icon path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.view-opt:hover{background:var(--surface-3);color:var(--fg)}
.view-opt.is-on{background:linear-gradient(135deg,rgba(129,140,248,.25),rgba(192,132,252,.15));color:var(--fg);border-color:rgba(129,140,248,.4)}
.panel-select{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--fg);font-size:12px;cursor:pointer}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
.stat-card{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.stat-card .stat-num{font-family:'Space Grotesk';font-size:22px;font-weight:700;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat-card .stat-label{font-size:10.5px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.stat-section-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);font-weight:600;margin-bottom:8px}
.recent-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.recent-list li{display:flex;align-items:center;gap:10px;padding:8px;background:var(--surface-2);border-radius:10px;font-size:12.5px}
.recent-thumb{width:32px;height:32px;border-radius:6px;background-size:cover;background-position:center;flex-shrink:0}
.recent-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.recent-time{font-size:11px;color:var(--fg-3);flex-shrink:0}
.recent-empty{font-size:12.5px;color:var(--fg-3);padding:14px;text-align:center;font-style:italic;background:var(--surface-2);border-radius:10px}

/* ============ 移动端 ============ */
@media (max-width:720px){
  .route-home .topbar,.route-gallery .topbar{padding:10px 16px;gap:8px}
  .route-gallery .topbar{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .route-gallery .brand{min-width:0}
  .route-gallery .topbar-actions{grid-column:1 / -1;width:100%;min-width:0;justify-content:flex-start;gap:8px;overflow-x:auto;scrollbar-width:none}
  .route-gallery .topbar-actions::-webkit-scrollbar{display:none}
  .route-gallery .topbar-actions>.icon-btn,.density-control{flex:0 0 auto}
  .gallery-crumbs{max-width:50%;padding:5px 8px;gap:6px}
  .route-gallery .gallery-crumbs{grid-column:2;grid-row:1;justify-self:end;width:auto;max-width:min(52vw,220px);min-width:0;padding:0;background:transparent;border:0;gap:6px}
  .route-gallery .gallery-crumbs .crumb-sep{display:none}
  .route-gallery .gallery-crumbs .crumb-label{display:none}
  .route-gallery .gallery-crumbs .crumb-icon{display:block}
  .route-gallery .gallery-crumbs .crumb,
  .crumb-crumb{width:30px;height:30px;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
  .route-gallery .gallery-crumbs .crumb.is-on{border-color:rgba(129,140,248,.55);box-shadow:0 0 0 3px rgba(129,140,248,.12),0 6px 18px rgba(129,140,248,.18)}
  .route-gallery .topbar-actions{--gallery-tool-h:36px}
  .route-gallery .search-mini{flex:1 1 auto;width:auto;min-width:0;padding:0 7px}
  .search-mini input{font-size:12px}
  .search-mini kbd{display:none}
  .density-control{height:var(--gallery-tool-h)}
  .density-btn{width:26px;height:26px;font-size:16px}
  .gallery-stage{padding:16px 12px 40px}
  .stream{gap:8px}
  .gallery-stage[data-density="md"] .stream{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .gallery-stage[data-density="lg"] .stream{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .hero-home{padding:clamp(48px,8vh,72px) 20px 30px}
  .hero-home .hero-title{font-size:clamp(32px,10vw,46px);margin-bottom:12px}
  .hero-home .hero-desc{margin-bottom:28px}
  .hero-shortcuts{margin-top:34px}
  .login-card{padding:32px 24px}
  .route-login .login-theme{top:10px;right:16px}
}

@media (max-width:720px),(hover:none),(pointer:coarse),(prefers-reduced-motion: reduce){
  #bg-canvas{display:none}
  .bg-nebula::before{animation:none;filter:none;opacity:.48}
  .bg-nebula::after{filter:none;opacity:.5}
  .bg-stars{opacity:.72}
  .bg-stars .s1{animation:mobileTwinkle 9s ease-in-out infinite}
  .bg-stars .s2{animation:mobileTwinkle 12s ease-in-out infinite 1.8s}
  .bg-stars .s3{animation:mobileTwinkleBright 15s ease-in-out infinite 3s}
  .bg-meteor{display:none}
  .bg-meteor.m1,.bg-meteor.m3{display:block;animation:mobileMeteor 18s linear infinite;opacity:0}
  .bg-meteor.m1{top:16%;left:8%;animation-delay:2s}
  .bg-meteor.m3{top:46%;left:0;animation-delay:11s}
  .bg-meteor::after{width:64px}
  .pulse{animation:none;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
  .hero::before,.empty-svg{animation:none}
}

@keyframes mobileTwinkle{0%,100%{opacity:.38}45%{opacity:.78}70%{opacity:.5}}
@keyframes mobileTwinkleBright{0%,100%{opacity:.44;transform:scale(1)}50%{opacity:.92;transform:scale(1.18)}}
@keyframes mobileMeteor{0%,70%{transform:translate(0,0) rotate(40deg);opacity:0}73%{opacity:.7}88%{opacity:.55}100%{transform:translate(260px,210px) rotate(40deg);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .brand-mark{animation:none}
  .bg-stars .s1,.bg-stars .s2,.bg-stars .s3{animation:none}
  .bg-meteor,.bg-meteor.m1,.bg-meteor.m3{display:none;animation:none}
}

@media (min-width:1440px){
  :root{
    --gallery-card-xs: clamp(120px,7vw,170px);
    --gallery-card-sm: clamp(170px,11vw,250px);
    --gallery-card-md: clamp(240px,16vw,340px);
    --gallery-card-lg: clamp(340px,22vw,520px);
  }

  .topbar{gap:clamp(24px,1.7vw,36px);padding:clamp(18px,1.3vw,26px) clamp(32px,2.4vw,52px)}
  .route-home .topbar,.route-gallery .topbar{padding:clamp(14px,1.1vw,22px) clamp(28px,2vw,48px)}
  .brand{gap:clamp(12px,.9vw,18px)}
  .brand-mark{width:clamp(36px,2.8vw,48px);height:clamp(36px,2.8vw,48px);border-radius:clamp(12px,.9vw,16px)}
  .brand-name{font-size:clamp(18px,1.15vw,22px)}
  .brand-sub{font-size:clamp(10.5px,.7vw,13px)}
  .icon-btn{width:clamp(40px,2.8vw,50px);height:clamp(40px,2.8vw,50px);border-radius:clamp(12px,.9vw,16px)}
  .btn{font-size:clamp(13.5px,.88vw,16px);padding:clamp(11px,.85vw,16px) clamp(18px,1.3vw,26px)}

  .login-card{width:min(480px,100%);padding:clamp(32px,2.4vw,46px) clamp(28px,2.1vw,42px)}
  .route-login .login-theme{top:clamp(14px,1.1vw,22px);right:clamp(28px,2vw,48px)}
  .login-title{font-size:clamp(32px,2.2vw,42px)}
  .field>input{font-size:clamp(14px,.9vw,16px);padding:clamp(13px,.9vw,17px) clamp(14px,1vw,18px)}
  .login-btn{padding:clamp(14px,1vw,18px) clamp(18px,1.3vw,26px)}

  .hero-home{max-width:min(1040px,82vw);padding:clamp(88px,10vh,132px) clamp(32px,3vw,64px) clamp(44px,4vh,68px)}
  .hero-home .hero-title{font-size:clamp(52px,4.2vw,82px)}
  .hero-desc{font-size:clamp(15px,.95vw,18px)}
  .hero-home .hero-search{max-width:clamp(560px,36vw,720px)}
  .hero-search{padding:clamp(12px,.95vw,18px) clamp(16px,1.2vw,24px);gap:clamp(12px,.9vw,18px)}
  .hero-search input{font-size:clamp(14px,.9vw,17px)}
  .hero-shortcuts{max-width:clamp(560px,36vw,720px)}
  .shortcut{gap:clamp(14px,1vw,20px);padding:clamp(14px,1vw,20px) clamp(18px,1.35vw,28px)}
  .shortcut-icon{width:clamp(44px,3vw,56px);height:clamp(44px,3vw,56px)}
  .shortcut-title{font-size:clamp(14px,.95vw,17px)}
  .shortcut-sub{font-size:clamp(11.5px,.8vw,14px)}

  .gallery-stage{padding:clamp(24px,1.8vw,44px) clamp(24px,2vw,56px) 72px}
  .gallery-topbar{gap:clamp(16px,1.2vw,28px)}
  .gallery-crumbs{padding:clamp(6px,.5vw,9px) clamp(10px,.8vw,16px);gap:clamp(8px,.55vw,12px);max-width:62%}
  .gallery-crumbs .crumb{font-size:clamp(14px,.86vw,16px);padding:clamp(7px,.55vw,10px) clamp(14px,.9vw,18px)}
  .crumb-crumb{width:clamp(32px,2vw,38px);height:clamp(32px,2vw,38px)}
  .route-gallery .topbar-actions{--gallery-tool-h:clamp(40px,2.7vw,48px)}
  .search-mini{width:clamp(200px,13vw,260px);padding:0 clamp(8px,.6vw,12px) 0 clamp(10px,.75vw,14px)}
  .search-mini input{font-size:clamp(12.5px,.78vw,14px)}
  .density-control{height:var(--gallery-tool-h)}
  .density-btn{width:clamp(30px,2vw,38px);height:clamp(30px,2vw,38px);font-size:clamp(18px,1.2vw,22px)}
  .panel-head h3{font-size:clamp(18px,1.2vw,22px)}
  .panel-tab,.panel-group-list .group-item,.view-row-label,.panel-select{font-size:clamp(12.5px,.82vw,15px)}
  #panel-drawer .drawer-panel{width:min(clamp(420px,28vw,560px),100%)}
  .drawer-panel{width:min(clamp(480px,32vw,640px),100%)}
}