/* ========== Reset ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{min-height:100vh;font-family:var(--ff);color:var(--text);background:var(--bg);overflow-x:hidden;transition:background .5s,color .4s}
a{color:inherit;text-decoration:none}button{border:none;background:none;cursor:pointer;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit;border:none;outline:none;background:none}
table{width:100%;border-collapse:collapse}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:var(--radius-sm)}

/* ========== Colors ========== */
:root,[data-color="purple"]{
    --accent:#7c3aed;--accent-hover:#6d28d9;--accent-glow:rgba(124,58,237,.35);--accent-rgb:124,58,237;
    --orb-1:#7c3aed;--orb-2:#3b82f6;--orb-3:#ec4899;--orb-opacity:.45;
    --danger:#ef4444;--success:#22c55e;
    --bg:#0a0e27;--text:#f0f0f8;--text-secondary:rgba(240,240,248,.55);
    --glass-bg:rgba(255,255,255,.06);--glass-border:rgba(255,255,255,.1);--glass-hover:rgba(255,255,255,.12);
    --input-bg:rgba(255,255,255,.08);--modal-bg:rgba(10,14,39,.92);--card-shadow:0 8px 32px rgba(0,0,0,.25);
}
[data-color="blue"]{
    --accent:#3b82f6;--accent-hover:#2563eb;--accent-glow:rgba(59,130,246,.35);--accent-rgb:59,130,246;
    --orb-1:#3b82f6;--orb-2:#6366f1;--orb-3:#06b6d4;--orb-opacity:.4;
    --bg:#0b1120;--text:#e0f2fe;--text-secondary:rgba(224,242,254,.5);
    --glass-bg:rgba(255,255,255,.06);--glass-border:rgba(255,255,255,.1);--glass-hover:rgba(255,255,255,.12);
    --input-bg:rgba(255,255,255,.08);--modal-bg:rgba(11,17,32,.92);--card-shadow:0 8px 32px rgba(0,0,0,.25);
}
[data-color="orange"]{
    --accent:#f97316;--accent-hover:#ea580c;--accent-glow:rgba(249,115,22,.35);--accent-rgb:249,115,22;
    --orb-1:#f97316;--orb-2:#e11d48;--orb-3:#f59e0b;--orb-opacity:.38;
    --bg:#1a0a0f;--text:#fef2f2;--text-secondary:rgba(254,242,242,.5);
    --glass-bg:rgba(255,255,255,.06);--glass-border:rgba(255,255,255,.1);--glass-hover:rgba(255,255,255,.12);
    --input-bg:rgba(255,255,255,.08);--modal-bg:rgba(26,10,15,.92);--card-shadow:0 8px 32px rgba(0,0,0,.3);
}
[data-color="green"]{
    --accent:#22c55e;--accent-hover:#16a34a;--accent-glow:rgba(34,197,94,.35);--accent-rgb:34,197,94;
    --orb-1:#22c55e;--orb-2:#10b981;--orb-3:#84cc16;--orb-opacity:.35;
    --bg:#071a10;--text:#ecfdf5;--text-secondary:rgba(236,253,245,.5);
    --glass-bg:rgba(255,255,255,.06);--glass-border:rgba(255,255,255,.1);--glass-hover:rgba(255,255,255,.12);
    --input-bg:rgba(255,255,255,.08);--modal-bg:rgba(7,26,16,.92);--card-shadow:0 8px 32px rgba(0,0,0,.3);
}
[data-color="rose"]{
    --accent:#ec4899;--accent-hover:#db2777;--accent-glow:rgba(236,72,153,.35);--accent-rgb:236,72,153;
    --orb-1:#ec4899;--orb-2:#a855f7;--orb-3:#f43f5e;--orb-opacity:.38;
    --bg:#12060e;--text:#fdf2f8;--text-secondary:rgba(253,242,248,.5);
    --glass-bg:rgba(255,255,255,.06);--glass-border:rgba(255,255,255,.1);--glass-hover:rgba(255,255,255,.12);
    --input-bg:rgba(255,255,255,.08);--modal-bg:rgba(18,6,14,.92);--card-shadow:0 8px 32px rgba(0,0,0,.3);
}
[data-color="silver"]{
    --accent:#6366f1;--accent-hover:#4f46e5;--accent-glow:rgba(99,102,241,.2);--accent-rgb:99,102,241;
    --orb-1:#c7d2fe;--orb-2:#ddd6fe;--orb-3:#fbcfe8;--orb-opacity:.55;
    --bg:#f0f2f5;--text:#1a1a2e;--text-secondary:rgba(26,26,46,.5);
    --glass-bg:rgba(255,255,255,.72);--glass-border:rgba(0,0,0,.07);--glass-hover:rgba(255,255,255,.88);
    --input-bg:rgba(0,0,0,.04);--modal-bg:rgba(240,242,245,.96);--card-shadow:0 4px 20px rgba(0,0,0,.07);
    --danger:#dc2626;--success:#16a34a;
}

/* ========== Background ========== */
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:var(--orb-opacity);will-change:transform;transition:background .6s,opacity .6s}
.bg-orb-1{width:min(600px,80vw);height:min(600px,80vw);background:var(--orb-1);top:-15%;left:-10%;animation:orb-float 22s ease-in-out infinite}
.bg-orb-2{width:min(500px,70vw);height:min(500px,70vw);background:var(--orb-2);bottom:-10%;right:-10%;animation:orb-float 26s ease-in-out infinite reverse}
.bg-orb-3{width:min(400px,60vw);height:min(400px,60vw);background:var(--orb-3);top:40%;left:50%;animation:orb-float 30s ease-in-out infinite -10s}
@keyframes orb-float{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(12vw,-6vh) scale(1.12)}50%{transform:translate(-6vw,10vh) scale(.92)}75%{transform:translate(6vw,5vh) scale(1.06)}}
.bg-particles{position:absolute;inset:0;overflow:hidden}
.bg-particles span{position:absolute;display:block;width:var(--sz,3px);height:var(--sz,3px);background:rgba(var(--accent-rgb),.45);border-radius:50%;bottom:-10%;animation:particle-rise var(--dur,22s) linear infinite;animation-delay:var(--dly,0s)}
.bg-particles span:nth-child(1){left:8%;--sz:3px;--dur:24s;--dly:0s}
.bg-particles span:nth-child(2){left:18%;--sz:2px;--dur:19s;--dly:3s}
.bg-particles span:nth-child(3){left:30%;--sz:4px;--dur:28s;--dly:1s}
.bg-particles span:nth-child(4){left:42%;--sz:2px;--dur:22s;--dly:5s}
.bg-particles span:nth-child(5){left:55%;--sz:3px;--dur:26s;--dly:2s}
.bg-particles span:nth-child(6){left:65%;--sz:2px;--dur:20s;--dly:7s}
.bg-particles span:nth-child(7){left:75%;--sz:4px;--dur:30s;--dly:4s}
.bg-particles span:nth-child(8){left:85%;--sz:2px;--dur:18s;--dly:6s}
.bg-particles span:nth-child(9){left:92%;--sz:3px;--dur:25s;--dly:1s}
.bg-particles span:nth-child(10){left:50%;--sz:2px;--dur:21s;--dly:8s}
.bg-particles span:nth-child(11){left:12%;--sz:3px;--dur:27s;--dly:4s}
.bg-particles span:nth-child(12){left:38%;--sz:2px;--dur:23s;--dly:9s}
@keyframes particle-rise{0%{transform:translateY(0) scale(0);opacity:0}8%{opacity:.6}85%{opacity:.4}100%{transform:translateY(-110vh) scale(1);opacity:0}}

/* ================================================================
   STYLE 1: GLASS — 毛玻璃 (default)
   Font: system sans-serif, thin · Shape: rounded 14-16px
   Surface: frosted blur · Motion: smooth float
   ================================================================ */
[data-style="glass"],body{
    --ff:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
    --radius:14px;--radius-sm:8px;--radius-lg:20px;
    --transition:all .3s cubic-bezier(.4,0,.2,1);
}
[data-color="silver"] .bg-orb{filter:blur(150px)}

/* ================================================================
   STYLE 2: SOFT — 柔光拟物
   Font: rounded sans · Shape: very round 22-28px
   Surface: solid neumorphic shadows · Motion: soft bounce
   ================================================================ */
[data-style="soft"]{
    --ff:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
    --radius:22px;--radius-sm:14px;--radius-lg:28px;
    --transition:all .35s cubic-bezier(.34,1.56,.64,1);
    --neu-light:rgba(255,255,255,.07);--neu-dark:rgba(0,0,0,.35);
}
[data-color="silver"][data-style="soft"]{--neu-light:rgba(255,255,255,.85);--neu-dark:rgba(0,0,0,.1)}
[data-style="soft"] .bg-orb{opacity:0!important}
[data-style="soft"] .bg-particles{opacity:0}
[data-style="soft"] .bg-layer::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(var(--accent-rgb),.08) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(var(--accent-rgb),.06) 0%,transparent 60%)}
[data-style="soft"] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);border-bottom:none;box-shadow:0 4px 12px var(--neu-dark)}
[data-style="soft"] .search-box{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);border:none;box-shadow:8px 8px 18px var(--neu-dark),-8px -8px 18px var(--neu-light);border-radius:var(--radius-lg)}
[data-style="soft"] .search-box:focus-within{box-shadow:inset 4px 4px 10px var(--neu-dark),inset -4px -4px 10px var(--neu-light);width:min(660px,94vw)}
[data-style="soft"] .bookmark-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);border:none;box-shadow:6px 6px 14px var(--neu-dark),-6px -6px 14px var(--neu-light);border-radius:var(--radius)}
[data-style="soft"] .bookmark-card:hover{transform:translateY(-3px);box-shadow:8px 8px 20px var(--neu-dark),-8px -8px 20px var(--neu-light)}
[data-style="soft"] .bookmark-add{box-shadow:inset 4px 4px 10px var(--neu-dark),inset -4px -4px 10px var(--neu-light);border:none}
[data-style="soft"] .bookmark-add:hover{box-shadow:6px 6px 14px var(--neu-dark),-6px -6px 14px var(--neu-light)}
[data-style="soft"] .bookmark-icon{box-shadow:inset 3px 3px 6px rgba(0,0,0,.2),inset -2px -2px 6px rgba(255,255,255,.05);border-radius:var(--radius-sm)}
[data-style="soft"] .clock-time{font-weight:300;letter-spacing:.06em}
[data-style="soft"] .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);border:none;box-shadow:12px 12px 30px var(--neu-dark),-12px -12px 30px var(--neu-light);border-radius:var(--radius-lg)}
[data-style="soft"] .settings-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);border:none;box-shadow:-10px 0 30px var(--neu-dark)}
[data-style="soft"] .btn-primary{box-shadow:4px 4px 10px var(--neu-dark),-4px -4px 10px var(--neu-light);border-radius:var(--radius)}
[data-style="soft"] .btn-primary:hover{box-shadow:inset 3px 3px 8px rgba(0,0,0,.2)}
[data-style="soft"] .dir-card{backdrop-filter:none;background:var(--bg);border:none;box-shadow:5px 5px 12px var(--neu-dark),-5px -5px 12px var(--neu-light);border-radius:var(--radius)}
[data-style="soft"] .dir-card:hover{transform:translateY(-3px);box-shadow:7px 7px 16px var(--neu-dark),-7px -7px 16px var(--neu-light)}
[data-style="soft"] .cat-tab{border:none;box-shadow:3px 3px 8px var(--neu-dark),-3px -3px 8px var(--neu-light);border-radius:20px}
[data-style="soft"] .cat-tab.active{box-shadow:inset 3px 3px 8px rgba(0,0,0,.15)}
[data-style="soft"] .form-input{background:var(--bg);border:none;box-shadow:inset 3px 3px 8px var(--neu-dark),inset -3px -3px 8px var(--neu-light);border-radius:var(--radius-sm)}
[data-style="soft"] .form-input:focus{box-shadow:inset 3px 3px 8px var(--neu-dark),inset -3px -3px 8px var(--neu-light),0 0 0 2px var(--accent-glow)}

/* ================================================================
   STYLE 3: RETRO — 复古终端
   Font: monospace · Shape: square 2px
   Surface: flat + hard border · Motion: instant/mechanical
   ================================================================ */
[data-style="retro"]{
    --ff:'Cascadia Code','Fira Code',Consolas,'Courier New',monospace;
    --radius:2px;--radius-sm:1px;--radius-lg:4px;
    --transition:all .1s linear;
    --bg:#0a0a0a;--glass-bg:rgba(var(--accent-rgb),.04);
    --glass-border:rgba(var(--accent-rgb),.25);--glass-hover:rgba(var(--accent-rgb),.1);
    --modal-bg:rgba(10,10,10,.97);--card-shadow:none;
    --text:#e8e8e8;--text-secondary:rgba(var(--accent-rgb),.5);
}
[data-style="retro"]::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.035) 3px,rgba(0,0,0,.035) 4px);pointer-events:none;z-index:9998}
[data-style="retro"] .bg-orb{opacity:0!important}
[data-style="retro"] .bg-particles{opacity:.2}
[data-style="retro"] .bg-particles span{background:var(--accent);border-radius:0;width:2px!important;height:12px!important}
[data-style="retro"] .bg-layer::after{content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 80px,rgba(var(--accent-rgb),.02) 80px,rgba(var(--accent-rgb),.02) 81px),
               repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(var(--accent-rgb),.02) 80px,rgba(var(--accent-rgb),.02) 81px);z-index:1}
[data-style="retro"] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.7);border-bottom:1px solid var(--glass-border);border-radius:0}
[data-style="retro"] .clock-time{font-weight:400;letter-spacing:.18em;color:var(--accent);text-shadow:0 0 20px rgba(var(--accent-rgb),.5),0 0 60px rgba(var(--accent-rgb),.15)}
[data-style="retro"] .clock-date{font-size:.85rem;color:rgba(var(--accent-rgb),.45);letter-spacing:.12em}
[data-style="retro"] .search-box{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.5);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:0 0 12px rgba(var(--accent-rgb),.08)}
[data-style="retro"] .search-box:focus-within{border-color:var(--accent);box-shadow:0 0 20px rgba(var(--accent-rgb),.2);width:min(660px,94vw)}
[data-style="retro"] .search-engine-btn{font-family:var(--ff);color:var(--accent);border-radius:0}
[data-style="retro"] .search-input{color:var(--accent)}
[data-style="retro"] .search-input::placeholder{color:rgba(var(--accent-rgb),.3)}
[data-style="retro"] .search-submit{color:rgba(var(--accent-rgb),.4)}
[data-style="retro"] .search-submit:hover{color:var(--accent);background:rgba(var(--accent-rgb),.1)}
[data-style="retro"] .bookmark-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.4);border:1px solid rgba(var(--accent-rgb),.2);border-radius:var(--radius)}
[data-style="retro"] .bookmark-card:hover{transform:none;background:rgba(var(--accent-rgb),.08);border-color:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),.15)}
[data-style="retro"] .bookmark-icon{border-radius:var(--radius);box-shadow:0 0 10px rgba(var(--accent-rgb),.3)}
[data-style="retro"] .bookmark-title{color:rgba(var(--accent-rgb),.55);font-size:.72rem;letter-spacing:.04em}
[data-style="retro"] .bookmark-add{border:1px dashed rgba(var(--accent-rgb),.25);background:transparent}
[data-style="retro"] .bookmark-add:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06)}
[data-style="retro"] .bookmark-add-icon{color:rgba(var(--accent-rgb),.4)}
[data-style="retro"] .modal{backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--glass-border);border-radius:var(--radius);background:rgba(10,10,10,.97)}
[data-style="retro"] .settings-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0c0c0c;border-left:1px solid var(--glass-border)}
[data-style="retro"] .btn-primary{border-radius:var(--radius);box-shadow:0 0 10px rgba(var(--accent-rgb),.2)}
[data-style="retro"] .dir-card{backdrop-filter:none;border:1px solid rgba(var(--accent-rgb),.15);border-radius:var(--radius);background:rgba(0,0,0,.4)}
[data-style="retro"] .dir-card:hover{border-color:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.15);transform:none}
[data-style="retro"] .cat-tab{border-radius:var(--radius);border:1px solid transparent}
[data-style="retro"] .cat-tab.active{border:1px solid var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.2)}
[data-style="retro"] .form-input{background:rgba(0,0,0,.4);border:1px solid rgba(var(--accent-rgb),.2);border-radius:var(--radius);color:var(--accent)}
[data-style="retro"] .form-input:focus{border-color:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.2)}

/* ================================================================
   STYLE 4: VIVID — 缤纷渐变
   Font: bold sans · Shape: very round 20px
   Surface: gradient fills · Motion: energetic scale
   ================================================================ */
[data-style="vivid"]{
    --ff:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
    --radius:20px;--radius-sm:12px;--radius-lg:28px;
    --transition:all .3s cubic-bezier(.34,1.2,.64,1);
}
[data-style="vivid"] .bg-orb{filter:blur(80px);opacity:calc(var(--orb-opacity) + .12)}
[data-style="vivid"] .bg-particles span{width:4px!important;height:4px!important;background:rgba(var(--accent-rgb),.6)}
[data-style="vivid"] .topbar{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:linear-gradient(135deg,rgba(var(--accent-rgb),.06),var(--glass-bg))}
[data-style="vivid"] .clock-time{font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--orb-1),var(--orb-2),var(--orb-3));background-size:200% 200%;animation:vivid-gradient 5s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@keyframes vivid-gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
[data-style="vivid"] .search-box{
    border:none;border-radius:var(--radius-lg);
    background:linear-gradient(135deg,rgba(var(--accent-rgb),.12),var(--glass-bg));
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:0 6px 24px rgba(var(--accent-rgb),.12)}
[data-style="vivid"] .search-box:focus-within{background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),var(--glass-bg));box-shadow:0 8px 36px rgba(var(--accent-rgb),.2);width:min(660px,94vw)}
[data-style="vivid"] .bookmark-card{
    border:none;border-radius:var(--radius);
    background:linear-gradient(145deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.03));
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 16px rgba(var(--accent-rgb),.08)}
[data-style="vivid"] .bookmark-card:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 16px 44px rgba(var(--accent-rgb),.22)}
[data-style="vivid"] .bookmark-icon{border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),var(--orb-2));box-shadow:0 4px 14px rgba(var(--accent-rgb),.3)}
[data-style="vivid"] .bookmark-card:hover .bookmark-icon{transform:scale(1.12) rotate(-3deg)}
[data-style="vivid"] .bookmark-add{background:transparent;border:2.5px dashed rgba(var(--accent-rgb),.25);border-radius:var(--radius)}
[data-style="vivid"] .bookmark-add:hover{border-color:var(--accent);background:linear-gradient(145deg,rgba(var(--accent-rgb),.1),transparent)}
[data-style="vivid"] .btn-primary{border-radius:var(--radius);background:linear-gradient(135deg,var(--accent),var(--orb-2));box-shadow:0 4px 18px rgba(var(--accent-rgb),.3)}
[data-style="vivid"] .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--accent-rgb),.35)}
[data-style="vivid"] .modal{border:none;border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.4)}
[data-style="vivid"] .settings-panel{border:none;box-shadow:-12px 0 40px rgba(0,0,0,.3)}
[data-style="vivid"] .dir-card{border:none;border-radius:var(--radius);background:linear-gradient(145deg,rgba(var(--accent-rgb),.1),rgba(var(--accent-rgb),.02));box-shadow:0 3px 12px rgba(var(--accent-rgb),.06)}
[data-style="vivid"] .dir-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 36px rgba(var(--accent-rgb),.15)}
[data-style="vivid"] .cat-tab{border:none;border-radius:20px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),transparent)}
[data-style="vivid"] .cat-tab.active{background:linear-gradient(135deg,var(--accent),var(--orb-2));color:#fff;box-shadow:0 3px 14px rgba(var(--accent-rgb),.3)}
[data-style="vivid"] .form-input{border:none;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(var(--accent-rgb),.06),var(--input-bg));box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}
[data-style="vivid"] .form-input:focus{box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 0 0 2px var(--accent-glow)}

/* ================================================================
   STYLE 5: CYBER — 赛博朋克
   Pure black + neon grid + scanlines + glitch + zero radius
   Everything glows in neon. HUD-style angular interface.
   ================================================================ */
[data-style="cyber"]{
    --ff:'Cascadia Code','Fira Code',Consolas,'Courier New',monospace;
    --radius:0;--radius-sm:0;--radius-lg:0;
    --transition:all .08s linear;
    --bg:#000008;--text:#e0ffe0;--text-secondary:rgba(var(--accent-rgb),.45);
    --glass-bg:rgba(var(--accent-rgb),.02);--glass-border:rgba(var(--accent-rgb),.35);--glass-hover:rgba(var(--accent-rgb),.06);
    --modal-bg:rgba(0,0,8,.97);--card-shadow:none;--input-bg:rgba(var(--accent-rgb),.03);
}
[data-style="cyber"]::after{content:'';position:fixed;inset:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);
    pointer-events:none;z-index:9998}
[data-style="cyber"] .bg-orb{opacity:0!important}
[data-style="cyber"] .bg-particles span{background:var(--accent)!important;border-radius:0;width:1px!important;height:50px!important;opacity:.5!important}
[data-style="cyber"] .bg-layer::after{content:'';position:absolute;inset:0;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 80px,rgba(var(--accent-rgb),.07) 80px,rgba(var(--accent-rgb),.07) 81px),
        repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(var(--accent-rgb),.07) 80px,rgba(var(--accent-rgb),.07) 81px);z-index:1}
[data-style="cyber"] .bg-layer::before{content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 50% 50%,rgba(var(--accent-rgb),.06) 0%,transparent 70%);z-index:2}
[data-style="cyber"] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,8,.92);
    border-bottom:2px solid var(--accent);box-shadow:0 2px 30px rgba(var(--accent-rgb),.25);border-radius:0}
[data-style="cyber"] .topbar-btn{text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}
[data-style="cyber"] .clock{margin-bottom:48px}
[data-style="cyber"] .clock-time{font-weight:700;letter-spacing:.35em;color:var(--accent);
    font-size:clamp(4.5rem,14vw,8rem);
    text-shadow:0 0 7px var(--accent),0 0 20px var(--accent),0 0 50px rgba(var(--accent-rgb),.6),0 0 100px rgba(var(--accent-rgb),.3),0 0 180px rgba(var(--accent-rgb),.1);
    animation:cyber-flicker 6s infinite}
@keyframes cyber-flicker{0%,100%{opacity:1}92%{opacity:1}92.5%{opacity:.3}93%{opacity:1}95%{opacity:1}95.5%{opacity:.5}96%{opacity:1}97.5%{opacity:.7}98%{opacity:1}}
[data-style="cyber"] .clock-date{color:rgba(var(--accent-rgb),.3);letter-spacing:.25em;text-transform:uppercase;font-size:.7rem;font-weight:400}
[data-style="cyber"] .search-box{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(0,0,8,.85);border:2px solid rgba(var(--accent-rgb),.4);border-radius:0;
    box-shadow:0 0 20px rgba(var(--accent-rgb),.06),inset 0 0 40px rgba(var(--accent-rgb),.02);overflow:hidden}
[data-style="cyber"] .search-box::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.07),transparent);
    animation:cyber-scan 3.5s linear infinite}
@keyframes cyber-scan{0%{left:-60%}100%{left:160%}}
[data-style="cyber"] .search-box:focus-within{border-color:var(--accent);
    box-shadow:0 0 40px rgba(var(--accent-rgb),.2),0 0 80px rgba(var(--accent-rgb),.06),inset 0 0 40px rgba(var(--accent-rgb),.03);width:min(660px,94vw)}
[data-style="cyber"] .search-engine-btn{color:var(--accent);border-radius:0;text-shadow:0 0 8px rgba(var(--accent-rgb),.5)}
[data-style="cyber"] .search-input{color:var(--accent);letter-spacing:.06em}
[data-style="cyber"] .search-input::placeholder{color:rgba(var(--accent-rgb),.18)}
[data-style="cyber"] .search-submit{color:rgba(var(--accent-rgb),.3)}
[data-style="cyber"] .search-submit:hover{color:var(--accent);text-shadow:0 0 8px var(--accent)}
[data-style="cyber"] .bookmarks-grid{gap:12px}
[data-style="cyber"] .bookmark-card{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(var(--accent-rgb),.02);border:1px solid rgba(var(--accent-rgb),.18);border-radius:0;overflow:hidden;position:relative}
[data-style="cyber"] .bookmark-card::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;
    background:linear-gradient(180deg,rgba(var(--accent-rgb),.1),transparent 40%,transparent 80%,rgba(var(--accent-rgb),.05));
    opacity:0;transition:opacity .1s}
[data-style="cyber"] .bookmark-card::after{content:'';position:absolute;bottom:0;left:-100%;width:100%;height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);transition:left .3s}
[data-style="cyber"] .bookmark-card:hover{transform:none;border-color:var(--accent);
    box-shadow:0 0 30px rgba(var(--accent-rgb),.15),0 0 60px rgba(var(--accent-rgb),.05);background:rgba(var(--accent-rgb),.04)}
[data-style="cyber"] .bookmark-card:hover::before{opacity:1}
[data-style="cyber"] .bookmark-card:hover::after{left:0}
[data-style="cyber"] .bookmark-icon{border-radius:0;box-shadow:0 0 14px rgba(var(--accent-rgb),.4);
    border:1px solid rgba(var(--accent-rgb),.3)}
[data-style="cyber"] .bookmark-title{color:rgba(var(--accent-rgb),.4);letter-spacing:.08em;text-transform:uppercase;font-size:.62rem}
[data-style="cyber"] .bookmark-add{border:1px dashed rgba(var(--accent-rgb),.2);background:transparent;border-radius:0}
[data-style="cyber"] .bookmark-add:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(var(--accent-rgb),.1)}
[data-style="cyber"] .bookmark-add-icon{color:var(--accent);text-shadow:0 0 10px rgba(var(--accent-rgb),.4)}
[data-style="cyber"] .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,8,.97);
    border:1px solid rgba(var(--accent-rgb),.3);border-radius:0;box-shadow:0 0 60px rgba(var(--accent-rgb),.1),0 0 120px rgba(var(--accent-rgb),.03)}
[data-style="cyber"] .modal-header{border-bottom:1px solid rgba(var(--accent-rgb),.25)}
[data-style="cyber"] .modal-header h2{text-transform:uppercase;letter-spacing:.1em;font-size:1rem;color:var(--accent);text-shadow:0 0 10px rgba(var(--accent-rgb),.4)}
[data-style="cyber"] .settings-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,8,.97);
    border-left:2px solid rgba(var(--accent-rgb),.3);box-shadow:-10px 0 40px rgba(var(--accent-rgb),.05)}
[data-style="cyber"] .settings-header{border-bottom:1px solid rgba(var(--accent-rgb),.25)}
[data-style="cyber"] .settings-header h2{text-transform:uppercase;letter-spacing:.15em;color:var(--accent);text-shadow:0 0 10px rgba(var(--accent-rgb),.3)}
[data-style="cyber"] .settings-label{color:rgba(var(--accent-rgb),.4);letter-spacing:.15em}
[data-style="cyber"] .btn-primary{border-radius:0;box-shadow:0 0 20px rgba(var(--accent-rgb),.3),inset 0 0 20px rgba(var(--accent-rgb),.05);
    text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;border:1px solid rgba(var(--accent-rgb),.4)}
[data-style="cyber"] .btn-primary:hover{box-shadow:0 0 35px rgba(var(--accent-rgb),.5),inset 0 0 30px rgba(var(--accent-rgb),.08)}
[data-style="cyber"] .btn-ghost{border-radius:0;border:1px solid rgba(var(--accent-rgb),.25);color:rgba(var(--accent-rgb),.5)}
[data-style="cyber"] .dir-card{backdrop-filter:none;background:rgba(var(--accent-rgb),.02);border:1px solid rgba(var(--accent-rgb),.15);border-radius:0}
[data-style="cyber"] .dir-card:hover{border-color:var(--accent);box-shadow:0 0 25px rgba(var(--accent-rgb),.12);transform:none}
[data-style="cyber"] .dir-card-title{text-transform:uppercase;letter-spacing:.04em;font-size:.85rem}
[data-style="cyber"] .cat-tab{border-radius:0;border:1px solid transparent;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}
[data-style="cyber"] .cat-tab.active{border:1px solid var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.2);color:var(--accent);text-shadow:0 0 10px rgba(var(--accent-rgb),.5)}
[data-style="cyber"] .form-input{background:rgba(var(--accent-rgb),.03);border:1px solid rgba(var(--accent-rgb),.2);border-radius:0;color:var(--accent)}
[data-style="cyber"] .form-input:focus{border-color:var(--accent);box-shadow:0 0 15px rgba(var(--accent-rgb),.15)}
[data-style="cyber"] .engine-dropdown{border-radius:0;border:1px solid rgba(var(--accent-rgb),.3);background:rgba(0,0,8,.97)}
[data-style="cyber"] .toast{border-radius:0;border:1px solid rgba(var(--accent-rgb),.3)}

/* ================================================================
   STYLE 6: AURORA — 极光幻彩
   Massive flowing aurora curtains, ethereal glass, pill shapes
   Everything floats, shimmers, and breathes slowly.
   ================================================================ */
[data-style="aurora"]{
    --ff:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif;
    --radius:50px;--radius-sm:24px;--radius-lg:50px;
    --transition:all .7s cubic-bezier(.25,.8,.25,1);
}
[data-style="aurora"] .bg-orb{filter:blur(200px)!important;opacity:.6!important}
[data-style="aurora"] .bg-orb-1{width:min(1000px,140vw)!important;height:min(500px,50vh)!important;top:-5%!important;left:-20%!important;
    animation:aurora-curtain-1 18s ease-in-out infinite!important}
[data-style="aurora"] .bg-orb-2{width:min(900px,120vw)!important;height:min(400px,40vh)!important;top:20%!important;right:-20%!important;
    animation:aurora-curtain-2 22s ease-in-out infinite!important}
[data-style="aurora"] .bg-orb-3{width:min(800px,110vw)!important;height:min(350px,35vh)!important;top:50%!important;left:-10%!important;
    animation:aurora-curtain-3 26s ease-in-out infinite!important}
@keyframes aurora-curtain-1{0%,100%{transform:translateX(0) scaleX(2) scaleY(.4);opacity:.6}
    33%{transform:translateX(20vw) scaleX(2.5) scaleY(.3);opacity:.4}
    66%{transform:translateX(-10vw) scaleX(1.8) scaleY(.5);opacity:.7}}
@keyframes aurora-curtain-2{0%,100%{transform:translateX(0) scaleX(2.2) scaleY(.35);opacity:.5}
    33%{transform:translateX(-15vw) scaleX(1.6) scaleY(.5);opacity:.65}
    66%{transform:translateX(10vw) scaleX(2.8) scaleY(.25);opacity:.35}}
@keyframes aurora-curtain-3{0%,100%{transform:translateX(0) scaleX(1.8) scaleY(.45);opacity:.5}
    33%{transform:translateX(10vw) scaleX(2.4) scaleY(.3);opacity:.35}
    66%{transform:translateX(-20vw) scaleX(2) scaleY(.55);opacity:.65}}
[data-style="aurora"] .bg-layer::before{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 0%,rgba(var(--accent-rgb),.06) 30%,rgba(var(--accent-rgb),.1) 50%,rgba(var(--accent-rgb),.04) 70%,transparent 100%);
    animation:aurora-pulse 10s ease-in-out infinite;z-index:1}
@keyframes aurora-pulse{0%,100%{opacity:.4;transform:translateY(0) scaleY(1)}50%{opacity:1;transform:translateY(-8vh) scaleY(1.1)}}
[data-style="aurora"] .bg-particles span{border-radius:50%;width:2px!important;height:2px!important;background:rgba(255,255,255,.5)!important;
    box-shadow:0 0 6px 2px rgba(255,255,255,.2);animation-duration:40s!important}
[data-style="aurora"] .topbar{backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);background:rgba(255,255,255,.03);border-bottom:none}
[data-style="aurora"] .clock{margin-bottom:40px}
[data-style="aurora"] .clock-time{font-weight:100;letter-spacing:.12em;
    font-size:clamp(4rem,12vw,7.5rem);
    text-shadow:0 0 40px rgba(var(--accent-rgb),.25),0 0 100px rgba(var(--accent-rgb),.1)}
[data-style="aurora"] .clock-date{font-weight:200;letter-spacing:.08em;opacity:.5}
[data-style="aurora"] .search-box{backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:50px;
    box-shadow:0 12px 48px rgba(0,0,0,.1),inset 0 0 0 1px rgba(255,255,255,.04)}
[data-style="aurora"] .search-box:focus-within{background:rgba(255,255,255,.07);border-color:rgba(var(--accent-rgb),.2);
    box-shadow:0 16px 64px rgba(var(--accent-rgb),.12),inset 0 0 0 1px rgba(var(--accent-rgb),.1);width:min(660px,94vw)}
[data-style="aurora"] .search-engine-btn{border-radius:50px 0 0 50px}
[data-style="aurora"] .search-submit{border-radius:0 50px 50px 0}
[data-style="aurora"] .bookmarks-grid{gap:18px}
[data-style="aurora"] .bookmark-card{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:28px;
    transition:all .7s cubic-bezier(.25,.8,.25,1)}
[data-style="aurora"] .bookmark-card:hover{transform:translateY(-8px) scale(1.02);
    background:rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.12)}
[data-style="aurora"] .bookmark-icon{border-radius:50%;
    background:linear-gradient(135deg,rgba(var(--accent-rgb),.3),rgba(var(--accent-rgb),.1));
    box-shadow:0 0 24px rgba(var(--accent-rgb),.15),inset 0 0 12px rgba(255,255,255,.05);
    transition:all .7s cubic-bezier(.25,.8,.25,1)}
[data-style="aurora"] .bookmark-card:hover .bookmark-icon{transform:scale(1.15) rotate(-5deg);
    box-shadow:0 0 36px rgba(var(--accent-rgb),.3),inset 0 0 12px rgba(255,255,255,.08)}
[data-style="aurora"] .bookmark-title{opacity:.5;transition:opacity .5s}
[data-style="aurora"] .bookmark-card:hover .bookmark-title{opacity:1}
[data-style="aurora"] .bookmark-add{border:1.5px dashed rgba(255,255,255,.07);background:transparent;border-radius:28px}
[data-style="aurora"] .bookmark-add:hover{border-color:rgba(var(--accent-rgb),.2);background:rgba(var(--accent-rgb),.03)}
[data-style="aurora"] .modal{backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);
    background:rgba(var(--accent-rgb),.04);border:1px solid rgba(255,255,255,.06);
    border-radius:32px;box-shadow:0 30px 100px rgba(0,0,0,.25)}
[data-style="aurora"] .modal-header{border-bottom:1px solid rgba(255,255,255,.05)}
[data-style="aurora"] .settings-panel{backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);
    background:rgba(var(--accent-rgb),.03);border-left:none;box-shadow:-20px 0 60px rgba(0,0,0,.15)}
[data-style="aurora"] .settings-header{border-bottom:1px solid rgba(255,255,255,.05)}
[data-style="aurora"] .btn-primary{border-radius:50px;
    background:linear-gradient(135deg,rgba(var(--accent-rgb),.5),rgba(var(--accent-rgb),.2));
    box-shadow:0 4px 24px rgba(var(--accent-rgb),.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08)}
[data-style="aurora"] .btn-primary:hover{box-shadow:0 8px 36px rgba(var(--accent-rgb),.3);transform:translateY(-2px)}
[data-style="aurora"] .btn-ghost{border-radius:50px;border:1px solid rgba(255,255,255,.08)}
[data-style="aurora"] .dir-card{backdrop-filter:blur(24px);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:24px}
[data-style="aurora"] .dir-card:hover{transform:translateY(-5px);box-shadow:0 16px 50px rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.1)}
[data-style="aurora"] .dir-card-icon{border-radius:50%}
[data-style="aurora"] .cat-tab{border-radius:50px;border:1px solid transparent}
[data-style="aurora"] .cat-tab.active{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.12);
    box-shadow:0 0 24px rgba(var(--accent-rgb),.08)}
[data-style="aurora"] .form-input{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:50px;padding:10px 20px}
[data-style="aurora"] .form-input:focus{border-color:rgba(var(--accent-rgb),.2);box-shadow:0 0 24px rgba(var(--accent-rgb),.08)}
[data-style="aurora"] .engine-dropdown{border-radius:24px;border:1px solid rgba(255,255,255,.06);
    background:rgba(var(--accent-rgb),.03);backdrop-filter:blur(40px)}
[data-style="aurora"] .toast{border-radius:50px}

/* ================================================================
   STYLE 7: MINIMAL — 极简主义
   Zero decoration. Huge serif clock. Line-only search.
   Cards are barely there. Pure editorial elegance.
   ================================================================ */
[data-style="minimal"]{
    --ff:'Georgia','Noto Serif SC','Source Han Serif SC','SimSun',serif;
    --radius:0;--radius-sm:0;--radius-lg:0;
    --transition:all .2s ease;
    --glass-bg:transparent;--glass-border:rgba(var(--accent-rgb),.06);--glass-hover:rgba(var(--accent-rgb),.03);
    --card-shadow:none;
}
[data-style="minimal"] .bg-layer{display:none}
[data-style="minimal"] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border-bottom:none}
[data-style="minimal"] .topbar-btn{font-family:var(--ff);font-style:italic;font-size:.85rem;letter-spacing:.03em}
[data-style="minimal"] .login-btn{border-radius:0!important;font-style:normal}
[data-style="minimal"] .clock{margin-bottom:32px}
[data-style="minimal"] .clock-time{font-weight:100;letter-spacing:.08em;font-family:var(--ff);
    font-size:clamp(6rem,22vw,14rem);line-height:.9}
[data-style="minimal"] .clock-date{font-size:.9rem;letter-spacing:.1em;font-style:italic;margin-top:12px;opacity:.35}
[data-style="minimal"] .search-box{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:transparent;border:none;border-bottom:1px solid rgba(var(--accent-rgb),.15);border-radius:0;box-shadow:none;
    width:min(500px,80vw)}
[data-style="minimal"] .search-box:focus-within{border-bottom-color:var(--accent);box-shadow:none;width:min(560px,85vw)}
[data-style="minimal"] .search-engine-btn{border-radius:0;opacity:.4}
[data-style="minimal"] .search-input{font-family:var(--ff);font-style:italic}
[data-style="minimal"] .search-input::placeholder{font-style:italic;opacity:.25}
[data-style="minimal"] .search-submit{opacity:.3}
[data-style="minimal"] .search-submit:hover{opacity:.7;background:transparent}
[data-style="minimal"] .bookmarks-section{margin-top:56px;width:min(660px,85vw)}
[data-style="minimal"] .bookmarks-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:20px}
[data-style="minimal"] .bookmark-card{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:transparent;border:none;border-radius:0;padding:16px 8px 12px}
[data-style="minimal"] .bookmark-card::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:1px;
    background:var(--accent);transition:all .3s;transform:translateX(-50%)}
[data-style="minimal"] .bookmark-card:hover{transform:none;background:transparent;box-shadow:none}
[data-style="minimal"] .bookmark-card:hover::after{width:60%}
[data-style="minimal"] .bookmark-icon{border-radius:0;background:transparent;color:var(--accent);
    border:1.5px solid rgba(var(--accent-rgb),.12);width:38px;height:38px;font-size:1rem;font-family:var(--ff);font-style:italic}
[data-style="minimal"] .bookmark-card:hover .bookmark-icon{border-color:var(--accent);transform:none}
[data-style="minimal"] .bookmark-title{font-style:italic;font-size:.72rem;opacity:.4;transition:opacity .3s}
[data-style="minimal"] .bookmark-card:hover .bookmark-title{opacity:.8}
[data-style="minimal"] .bookmark-add{border:none;background:transparent;border-radius:0}
[data-style="minimal"] .bookmark-add::after{content:'';position:absolute;bottom:0;left:50%;width:20%;height:1px;
    background:rgba(var(--accent-rgb),.1);transform:translateX(-50%)}
[data-style="minimal"] .bookmark-add:hover{background:transparent}
[data-style="minimal"] .bookmark-add-icon{font-weight:100;font-size:2rem;opacity:.2}
[data-style="minimal"] .bookmark-add:hover .bookmark-add-icon{opacity:.5}
[data-style="minimal"] .bookmark-actions{top:2px;right:2px}
[data-style="minimal"] .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);
    border:none;border-radius:0;box-shadow:0 40px 80px rgba(0,0,0,.12)}
[data-style="minimal"] .modal-header{border-bottom:1px solid rgba(var(--accent-rgb),.06)}
[data-style="minimal"] .modal-header h2{font-family:var(--ff);font-weight:400;font-style:italic;letter-spacing:.03em}
[data-style="minimal"] .modal-footer{border-top:1px solid rgba(var(--accent-rgb),.06)}
[data-style="minimal"] .settings-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);border-left:none;
    box-shadow:-20px 0 50px rgba(0,0,0,.06)}
[data-style="minimal"] .settings-header{border-bottom:1px solid rgba(var(--accent-rgb),.06)}
[data-style="minimal"] .settings-header h2{font-family:var(--ff);font-weight:400;font-style:italic}
[data-style="minimal"] .settings-label{font-family:var(--ff);font-style:italic;text-transform:none;letter-spacing:.03em;font-weight:400;opacity:.4}
[data-style="minimal"] .btn-primary{border-radius:0;box-shadow:none;text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;
    font-family:var(--ff);font-style:normal}
[data-style="minimal"] .btn-primary:hover{box-shadow:none;opacity:.8}
[data-style="minimal"] .btn-ghost{border-radius:0;border:none;text-decoration:underline;text-underline-offset:4px}
[data-style="minimal"] .dir-card{backdrop-filter:none;background:transparent;border:none;border-bottom:1px solid rgba(var(--accent-rgb),.06);
    border-radius:0;padding:20px 0}
[data-style="minimal"] .dir-card:hover{border-bottom-color:var(--accent);transform:none;background:transparent;box-shadow:none}
[data-style="minimal"] .dir-card-icon{border-radius:0;background:transparent;border:1px solid rgba(var(--accent-rgb),.12);
    color:var(--accent);font-style:italic;font-family:var(--ff)}
[data-style="minimal"] .dir-card-title{font-family:var(--ff);font-style:italic}
[data-style="minimal"] .cat-tab{border-radius:0;border:none;border-bottom:2px solid transparent;background:transparent;
    padding:8px 16px;font-family:var(--ff);font-style:italic}
[data-style="minimal"] .cat-tab:hover{background:transparent}
[data-style="minimal"] .cat-tab.active{background:transparent;border-bottom-color:var(--accent);color:var(--text);font-style:normal}
[data-style="minimal"] .form-input{background:transparent;border:none;border-bottom:1px solid rgba(var(--accent-rgb),.1);
    border-radius:0;padding:10px 2px;font-family:var(--ff)}
[data-style="minimal"] .form-input:focus{border-bottom-color:var(--accent);box-shadow:none}
[data-style="minimal"] .form-input::placeholder{font-style:italic;opacity:.2}
[data-style="minimal"] .engine-dropdown{border-radius:0;border:none;box-shadow:0 8px 24px rgba(0,0,0,.08);background:var(--bg)}
[data-style="minimal"] .engine-option{border-radius:0}
[data-style="minimal"] .toast{border-radius:0;border:none;box-shadow:0 4px 16px rgba(0,0,0,.06);
    font-family:var(--ff);font-style:italic}
[data-style="minimal"] .style-card{border-radius:0}
[data-style="minimal"] .style-preview{border-radius:0}
[data-style="minimal"] .color-dot{border-radius:0}
[data-style="minimal"] .color-dot span{border-radius:0}
[data-style="minimal"] .page-btn{border-radius:0}
[data-color="silver"][data-style="minimal"]{--glass-border:rgba(0,0,0,.05);--glass-hover:rgba(0,0,0,.02)}
[data-color="silver"][data-style="minimal"] .bookmark-icon{color:var(--accent);border-color:rgba(var(--accent-rgb),.1)}
[data-color="silver"][data-style="minimal"] .settings-panel{box-shadow:-20px 0 50px rgba(0,0,0,.03)}

/* ================================================================
   STYLE 8: VAPOR — 蒸汽波
   Dark purple + retrowave sun + perspective grid + pink/cyan
   80s synthwave nostalgia. Bold gradients. Chrome text.
   ================================================================ */
[data-style="vapor"]{
    --ff:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
    --radius:16px;--radius-sm:10px;--radius-lg:24px;
    --transition:all .5s cubic-bezier(.25,.46,.45,.94);
    --bg:#0a0118;--text:#ffe8f8;--text-secondary:rgba(255,200,230,.35);
    --glass-bg:rgba(255,80,180,.04);--glass-border:rgba(255,80,180,.12);--glass-hover:rgba(255,80,180,.08);
    --modal-bg:rgba(10,1,24,.96);--card-shadow:0 8px 32px rgba(255,0,128,.06);--input-bg:rgba(255,80,180,.04);
    --accent:#ff6ec7;--accent-hover:#ff4eb7;--accent-glow:rgba(255,110,199,.3);--accent-rgb:255,110,199;
    --danger:#ff4444;--success:#44ffaa;
}
[data-style="vapor"] .bg-orb{filter:blur(120px);mix-blend-mode:screen}
[data-style="vapor"] .bg-orb-1{background:linear-gradient(180deg,#ff6ec7,#ff00aa)!important;opacity:.3!important;
    width:min(700px,90vw)!important;height:min(400px,50vh)!important}
[data-style="vapor"] .bg-orb-2{background:linear-gradient(180deg,#7b2ff7,#00d4ff)!important;opacity:.2!important}
[data-style="vapor"] .bg-orb-3{background:linear-gradient(180deg,#ff9a00,#ff006e)!important;opacity:.15!important}
[data-style="vapor"] .bg-layer::before{content:'';position:absolute;bottom:25%;left:50%;transform:translateX(-50%);
    width:min(350px,50vw);height:min(175px,25vw);border-radius:350px 350px 0 0;
    background:linear-gradient(180deg,#ff6ec7 0%,#ff9a00 40%,#ffdd00 100%);
    -webkit-mask-image:repeating-linear-gradient(180deg,#000 0px,#000 6px,transparent 6px,transparent 14px);
    mask-image:repeating-linear-gradient(180deg,#000 0px,#000 6px,transparent 6px,transparent 14px);
    opacity:.25;z-index:1;filter:blur(2px)}
[data-style="vapor"] .bg-layer::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
    background:
        linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 100%),
        repeating-linear-gradient(90deg,rgba(255,110,199,.06) 0px,rgba(255,110,199,.06) 1px,transparent 1px,transparent 40px),
        repeating-linear-gradient(0deg,rgba(255,110,199,.04) 0px,rgba(255,110,199,.04) 1px,transparent 1px,transparent 40px);
    transform:perspective(300px) rotateX(50deg);transform-origin:bottom center;z-index:1;opacity:.8}
[data-style="vapor"] .bg-particles span{background:rgba(255,110,199,.4)!important;border-radius:50%;width:3px!important;height:3px!important;
    box-shadow:0 0 6px rgba(255,110,199,.3)}
[data-style="vapor"] .topbar{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    background:rgba(10,1,24,.7);border-bottom:1px solid rgba(255,110,199,.1)}
[data-style="vapor"] .topbar-btn:hover{background:rgba(255,110,199,.08)}
[data-style="vapor"] .clock{margin-bottom:44px}
[data-style="vapor"] .clock-time{font-weight:800;letter-spacing:-.03em;
    font-size:clamp(4rem,12vw,7rem);
    background:linear-gradient(180deg,#ffdd00 0%,#ff6ec7 30%,#ff00aa 50%,#7b2ff7 75%,#00d4ff 100%);
    background-size:100% 300%;animation:vapor-text 5s ease infinite;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    filter:drop-shadow(0 0 30px rgba(255,110,199,.3))}
@keyframes vapor-text{0%,100%{background-position:0% 0%}50%{background-position:0% 100%}}
[data-style="vapor"] .clock-date{color:rgba(255,110,199,.3);letter-spacing:.06em;font-weight:300}
[data-style="vapor"] .search-box{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    background:rgba(255,80,180,.05);border:1.5px solid rgba(255,110,199,.18);
    box-shadow:0 6px 24px rgba(255,0,128,.06),0 0 0 1px rgba(255,110,199,.05) inset}
[data-style="vapor"] .search-box:focus-within{border-color:rgba(255,110,199,.35);
    box-shadow:0 10px 40px rgba(255,0,128,.12),0 0 40px rgba(255,110,199,.06);width:min(660px,94vw)}
[data-style="vapor"] .search-input{color:#ffe8f8}
[data-style="vapor"] .search-input::placeholder{color:rgba(255,110,199,.2)}
[data-style="vapor"] .search-engine-btn{color:#ff6ec7;text-shadow:0 0 8px rgba(255,110,199,.3)}
[data-style="vapor"] .bookmarks-grid{gap:16px}
[data-style="vapor"] .bookmark-card{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    background:linear-gradient(135deg,rgba(255,80,180,.07),rgba(120,47,247,.05));
    border:1px solid rgba(255,110,199,.1);
    box-shadow:0 4px 16px rgba(255,0,128,.04)}
[data-style="vapor"] .bookmark-card:hover{transform:translateY(-6px) scale(1.03);
    box-shadow:0 16px 48px rgba(255,0,128,.15);border-color:rgba(255,110,199,.25);
    background:linear-gradient(135deg,rgba(255,80,180,.12),rgba(120,47,247,.08))}
[data-style="vapor"] .bookmark-icon{background:linear-gradient(135deg,#ff6ec7,#7b2ff7);
    box-shadow:0 4px 16px rgba(255,0,128,.3);border-radius:var(--radius-sm)}
[data-style="vapor"] .bookmark-card:hover .bookmark-icon{transform:scale(1.12) rotate(-3deg);
    box-shadow:0 6px 24px rgba(255,0,128,.4)}
[data-style="vapor"] .bookmark-title{color:rgba(255,200,230,.4)}
[data-style="vapor"] .bookmark-add{border:2px dashed rgba(255,110,199,.12);background:transparent}
[data-style="vapor"] .bookmark-add:hover{border-color:rgba(255,110,199,.3);background:rgba(255,80,180,.04)}
[data-style="vapor"] .bookmark-add-icon{color:rgba(255,110,199,.3)}
[data-style="vapor"] .modal{backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    background:rgba(10,1,24,.95);border:1px solid rgba(255,110,199,.12);
    box-shadow:0 24px 80px rgba(0,0,0,.4),0 0 60px rgba(255,0,128,.05)}
[data-style="vapor"] .modal-header{border-bottom:1px solid rgba(255,110,199,.1)}
[data-style="vapor"] .modal-header h2{color:#ff6ec7}
[data-style="vapor"] .settings-panel{backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    background:rgba(10,1,24,.96);border-left:1px solid rgba(255,110,199,.1)}
[data-style="vapor"] .settings-header{border-bottom:1px solid rgba(255,110,199,.1)}
[data-style="vapor"] .settings-header h2{color:#ff6ec7}
[data-style="vapor"] .btn-primary{background:linear-gradient(135deg,#ff6ec7,#7b2ff7)!important;
    box-shadow:0 4px 20px rgba(255,0,128,.25);border-radius:var(--radius)}
[data-style="vapor"] .btn-primary:hover{box-shadow:0 8px 32px rgba(255,0,128,.35);transform:translateY(-2px)}
[data-style="vapor"] .btn-ghost{border-color:rgba(255,110,199,.15);color:rgba(255,200,230,.5)}
[data-style="vapor"] .dir-card{backdrop-filter:blur(16px);background:rgba(255,80,180,.04);border:1px solid rgba(255,110,199,.08)}
[data-style="vapor"] .dir-card:hover{border-color:rgba(255,110,199,.2);box-shadow:0 12px 36px rgba(255,0,128,.1);transform:translateY(-4px)}
[data-style="vapor"] .dir-card-icon{background:linear-gradient(135deg,#ff6ec7,#7b2ff7);border-radius:var(--radius-sm)}
[data-style="vapor"] .cat-tab{border-radius:var(--radius);border:1px solid transparent}
[data-style="vapor"] .cat-tab.active{background:linear-gradient(135deg,rgba(255,110,199,.15),rgba(120,47,247,.1));
    border-color:rgba(255,110,199,.2);color:#ff6ec7;box-shadow:0 0 16px rgba(255,0,128,.08)}
[data-style="vapor"] .form-input{background:rgba(255,80,180,.04);border:1px solid rgba(255,110,199,.12);color:#ffe8f8}
[data-style="vapor"] .form-input:focus{border-color:rgba(255,110,199,.3);box-shadow:0 0 16px rgba(255,0,128,.08)}
[data-style="vapor"] .engine-dropdown{background:rgba(10,1,24,.96);border:1px solid rgba(255,110,199,.12)}
[data-style="vapor"] .toast{border:1px solid rgba(255,110,199,.12)}

/* ========== Search Position ========== */
[data-search-pos="top"] .hero{justify-content:flex-start;padding-top:100px}
[data-search-pos="top"] .clock{margin-bottom:16px}
[data-search-pos="top"] .clock-time{font-size:clamp(2.2rem,5vw,3.2rem)}
[data-search-pos="top"] .bookmarks-section{margin-top:28px}

/* ========== Topbar ========== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);border-radius:0;transition:var(--transition)}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);font-size:.875rem;color:var(--text-secondary);transition:var(--transition)}
.topbar-btn:hover{color:var(--text);background:var(--glass-hover)}
.login-btn{background:var(--accent)!important;color:#fff!important;border-radius:var(--radius-sm)}
.login-btn:hover{background:var(--accent-hover)!important}

/* ========== User ========== */
.user-area{position:relative}
.user-avatar-wrap{cursor:pointer;width:36px;height:36px}
.user-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--glass-border)}
.user-avatar-letter{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--accent);color:#fff;border-radius:50%}
.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--modal-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:var(--transition);z-index:200}
.user-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.user-dropdown-info{padding:10px 12px}
.user-dropdown-name{display:block;font-weight:600;font-size:.9rem}
.user-dropdown-email{display:block;font-size:.78rem;color:var(--text-secondary);margin-top:2px}
.user-dropdown-divider{height:1px;background:var(--glass-border);margin:4px 0}
.user-dropdown-item{display:block;padding:10px 12px;border-radius:var(--radius-sm);font-size:.875rem;transition:background .2s}
.user-dropdown-item:hover{background:var(--glass-hover)}

/* ========== Hero ========== */
.hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:80px 24px 40px;transition:var(--transition)}
.clock{text-align:center;margin-bottom:36px;transition:var(--transition)}
.clock-time{font-size:clamp(3.5rem,10vw,6rem);font-weight:200;letter-spacing:.04em;line-height:1.1;transition:var(--transition)}
.clock-date{font-size:1rem;color:var(--text-secondary);margin-top:4px;letter-spacing:.02em}

/* ========== Search ========== */
.search-box{position:relative;z-index:10;display:flex;align-items:center;width:min(600px,90vw);background:color-mix(in srgb,var(--bg) 65%,transparent);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);border:1px solid var(--glass-border);border-radius:var(--radius);transition:var(--transition);box-shadow:var(--card-shadow)}
.search-box:focus-within{width:min(660px,94vw);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow),var(--card-shadow)}
.search-engine-btn{flex-shrink:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:var(--accent);border-radius:var(--radius) 0 0 var(--radius)}
.search-engine-btn:hover{background:var(--glass-hover)}
.search-input{flex:1;height:50px;padding:0 4px;font-size:1rem;background:transparent;color:var(--text)}
.search-input::placeholder{color:var(--text-secondary)}
.search-submit{flex-shrink:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);border-radius:0 var(--radius) var(--radius) 0;transition:color .2s,background .2s}
.search-submit:hover{color:var(--accent);background:var(--glass-hover)}
.engine-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:210px;max-height:min(420px,60vh);overflow-y:auto;background:var(--modal-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .25s;z-index:50;scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent}
.engine-dropdown::-webkit-scrollbar{width:4px}
.engine-dropdown::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:4px}
.engine-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.engine-group-label{padding:6px 12px 4px;font-size:.7rem;font-weight:600;color:var(--text-secondary);opacity:.6;text-transform:uppercase;letter-spacing:.5px;pointer-events:none;user-select:none}
.engine-group-label:not(:first-child){margin-top:4px;border-top:1px solid var(--glass-border);padding-top:8px}
.engine-option{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);font-size:.88rem;cursor:pointer;transition:background .15s,color .15s;color:var(--text)}
.engine-option:hover{background:var(--glass-hover);color:var(--accent)}
.engine-option.active{background:var(--accent-glow);color:var(--accent)}
.engine-letter{font-weight:700;font-size:1.05rem;width:22px;text-align:center;flex-shrink:0}

/* ========== Search Suggestions ========== */
.search-suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--modal-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:5px;max-height:360px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,visibility .2s,transform .2s;z-index:50}
.search-suggestions.show{opacity:1;visibility:visible;transform:translateY(0)}
.suggest-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);font-size:.9rem;cursor:pointer;transition:background .15s,color .15s;color:var(--text)}
.suggest-item:hover,.suggest-item.active{background:var(--glass-hover);color:var(--accent)}
.suggest-item b{font-weight:700;color:var(--accent)}
.suggest-item svg{flex-shrink:0;opacity:.35}
.suggest-item.active svg{opacity:.7}
.suggest-separator{height:1px;margin:3px 8px;background:var(--glass-border);opacity:.5}
.suggest-hint{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 4px;font-size:.72rem;color:var(--text-secondary);opacity:.6}
.suggest-hint kbd{display:inline-flex;align-items:center;padding:1px 5px;border:1px solid var(--glass-border);border-radius:4px;font-size:.68rem;font-family:inherit;background:var(--glass-bg)}

/* ========== Bookmarks ========== */
.bookmarks-section{position:relative;z-index:1;margin-top:40px;width:min(760px,90vw);transition:var(--transition)}
.bookmarks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:16px}
.bookmark-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 8px 16px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius);cursor:pointer;transition:var(--transition);text-align:center;animation:card-enter .5s ease both;animation-delay:calc(var(--i,0)*.06s)}
.bookmark-card:hover{transform:translateY(-4px);background:var(--glass-hover);box-shadow:var(--card-shadow)}
.bookmark-icon{width:42px;height:42px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:600;background:var(--accent);color:#fff;overflow:hidden;flex-shrink:0;transition:var(--transition)}
.bookmark-card:hover .bookmark-icon{transform:scale(1.08)}
.bookmark-icon img{width:100%;height:100%;object-fit:cover}
.bookmark-title{font-size:.78rem;color:var(--text-secondary);line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bookmark-actions{position:absolute;top:4px;right:4px;display:flex;gap:2px;opacity:0;transition:opacity .2s}
.bookmark-card:hover .bookmark-actions{opacity:1}
.bookmark-action-btn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:.7rem;color:var(--text-secondary);transition:all .2s}
.bookmark-action-btn:hover{background:var(--glass-hover);color:var(--text)}
.bookmark-action-btn.del:hover{color:var(--danger)}
.bookmark-add{border:2px dashed var(--glass-border);background:transparent;animation:none}
.bookmark-add:hover{border-color:var(--accent);background:var(--glass-bg)}
.bookmark-add-icon{font-size:1.6rem;color:var(--text-secondary);font-weight:300}
@keyframes card-enter{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ========== Modals ========== */
.modal-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .3s;padding:24px}
.modal-overlay.show{opacity:1;visibility:visible}
.modal{background:var(--modal-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);width:100%;max-height:90vh;display:flex;flex-direction:column;transform:scale(.94) translateY(12px);transition:transform .4s cubic-bezier(.4,0,.2,1);overflow:hidden}
.modal-overlay.show .modal{transform:scale(1) translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--glass-border);gap:16px;flex-shrink:0}
.modal-header h2{font-size:1.15rem;font-weight:600;white-space:nowrap}
.modal-body{padding:24px;overflow-y:auto;flex:1}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--glass-border);flex-shrink:0}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;opacity:0;visibility:hidden;transition:all .3s}
.overlay.show{opacity:1;visibility:visible}

/* ========== Settings ========== */
.settings-panel{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:201;background:var(--modal-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid var(--glass-border);transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column}
.settings-panel.show{transform:translateX(0)}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--glass-border)}
.settings-header h2{font-size:1.15rem;font-weight:600}
.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-secondary);transition:all .2s}
.close-btn:hover{background:var(--glass-hover);color:var(--text)}
.settings-body{padding:24px;flex:1}
.settings-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em}
.settings-label:not(:first-child){margin-top:24px}
.style-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.style-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;border:2px solid var(--glass-border);border-radius:var(--radius);transition:all .25s;font-size:.8rem;color:var(--text-secondary)}
.style-card:hover{border-color:var(--text-secondary);background:var(--glass-bg)}
.style-card.active{border-color:var(--accent);color:var(--text);background:rgba(var(--accent-rgb),.08)}
.style-preview{width:100%;height:54px;border-radius:var(--radius-sm);overflow:hidden;position:relative;border:1px solid var(--glass-border)}

.glass-sp{background:linear-gradient(135deg,#0a0e27 30%,rgba(124,58,237,.25))}
.glass-sp::after{content:'';position:absolute;inset:14px 16px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(2px)}
.soft-sp{background:#1a1a3a}
.soft-sp::after{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:60%;height:24px;border-radius:14px;background:#1a1a3a;box-shadow:4px 4px 10px rgba(0,0,0,.4),-4px -4px 10px rgba(255,255,255,.05)}
.retro-sp{background:#0a0a0a;background-image:repeating-linear-gradient(0deg,transparent,transparent 10px,rgba(34,197,94,.04) 10px,rgba(34,197,94,.04) 11px),repeating-linear-gradient(90deg,transparent,transparent 10px,rgba(34,197,94,.04) 10px,rgba(34,197,94,.04) 11px)}
.retro-sp::before{content:'>';position:absolute;top:10px;left:10px;font-family:monospace;font-size:.7rem;color:rgba(34,197,94,.6)}
.retro-sp::after{content:'';position:absolute;top:24px;left:10px;right:10px;height:16px;border:1px solid rgba(34,197,94,.25);border-radius:1px}
.vivid-sp{background:linear-gradient(135deg,#1a0a2e,#0a0e27)}
.vivid-sp::after{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:55%;height:26px;border-radius:16px;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(236,72,153,.2));box-shadow:0 4px 16px rgba(124,58,237,.2)}

.cyber-sp{background:#000008;background-image:
    repeating-linear-gradient(0deg,transparent,transparent 10px,rgba(0,255,255,.06) 10px,rgba(0,255,255,.06) 11px),
    repeating-linear-gradient(90deg,transparent,transparent 10px,rgba(0,255,255,.06) 10px,rgba(0,255,255,.06) 11px)}
.cyber-sp::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px)}
.cyber-sp::after{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:55%;height:22px;
    border:2px solid rgba(0,255,255,.4);box-shadow:0 0 12px rgba(0,255,255,.3),inset 0 0 12px rgba(0,255,255,.05)}
.aurora-sp{background:linear-gradient(180deg,#0a0e27 0%,rgba(124,58,237,.25) 35%,rgba(59,130,246,.2) 55%,rgba(236,72,153,.12) 75%,#0a0e27 100%)}
.aurora-sp::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(124,58,237,.15),transparent 70%)}
.aurora-sp::after{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:50%;height:28px;border-radius:50px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 16px rgba(124,58,237,.1)}
.minimal-sp{background:#0a0e27}
.minimal-sp::before{content:'12:00';position:absolute;top:6px;left:50%;transform:translateX(-50%);
    font-family:Georgia,serif;font-size:.9rem;font-weight:100;color:rgba(240,240,248,.3);letter-spacing:.05em}
.minimal-sp::after{content:'';position:absolute;top:30px;left:50%;transform:translateX(-50%);width:50%;height:0;
    border-bottom:1px solid rgba(124,58,237,.15)}
.vapor-sp{background:linear-gradient(180deg,#0a0118 15%,#1a0530 45%,rgba(255,0,128,.08) 100%)}
.vapor-sp::before{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
    background:repeating-linear-gradient(90deg,rgba(255,110,199,.06) 0px,rgba(255,110,199,.06) 1px,transparent 1px,transparent 8px);
    transform:perspective(100px) rotateX(30deg);transform-origin:bottom;opacity:.7}
.vapor-sp::after{content:'';position:absolute;bottom:45%;left:50%;transform:translateX(-50%);width:30px;height:15px;
    border-radius:30px 30px 0 0;background:linear-gradient(180deg,#ff6ec7,#ff9a00);opacity:.4;
    -webkit-mask-image:repeating-linear-gradient(180deg,#000 0px,#000 2px,transparent 2px,transparent 4px);
    mask-image:repeating-linear-gradient(180deg,#000 0px,#000 2px,transparent 2px,transparent 4px)}

.color-grid{display:flex;gap:10px;flex-wrap:wrap}
.color-dot{width:40px;height:40px;border-radius:50%;border:3px solid var(--glass-border);padding:3px;transition:all .25s;position:relative}
.color-dot span{display:block;width:100%;height:100%;border-radius:50%}
.color-dot:hover{border-color:var(--text-secondary);transform:scale(1.1)}
.color-dot.active{border-color:var(--accent);transform:scale(1.1)}
.color-dot.active::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pos-toggle{display:flex;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);overflow:hidden}
.pos-btn{flex:1;padding:10px 16px;font-size:.85rem;text-align:center;color:var(--text-secondary);transition:all .25s;display:flex;align-items:center;justify-content:center;gap:6px}
.pos-btn+.pos-btn{border-left:1px solid var(--glass-border)}
.pos-btn:hover{color:var(--text);background:var(--glass-hover)}
.pos-btn.active{background:var(--accent);color:#fff}
.setting-engines{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.radio-card{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;font-size:.9rem}
.radio-card:hover{background:var(--glass-hover)}
.radio-card input{accent-color:var(--accent)}
.radio-card input:checked ~ span{color:var(--text);font-weight:500}

/* ========== Directory Panel (Left Slide) ========== */
.directory-panel{position:fixed;top:0;left:0;bottom:0;width:min(860px,calc(100vw - 60px));z-index:201;background:var(--modal-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-right:1px solid var(--glass-border);transform:translateX(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
.directory-panel.show{transform:translateX(0)}
.directory-panel-header{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--glass-border);flex-shrink:0}
.directory-panel-header h2{font-size:1.15rem;font-weight:700;margin:0;white-space:nowrap}
.directory-search-wrap{flex:1;max-width:360px;position:relative}
.directory-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}
.directory-search{width:100%;padding:9px 14px 9px 36px;background:var(--input-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);font-size:.875rem;color:var(--text);transition:border-color .2s}
.directory-search:focus{border-color:var(--accent)}
.directory-panel-header .close-btn{margin-left:auto}
.category-tabs-wrap{display:flex;align-items:flex-start;flex-shrink:0;border-bottom:1px solid var(--glass-border)}
.category-tabs{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;padding:12px 12px 12px 24px;max-height:46px;overflow:hidden;transition:max-height .35s ease}
.category-tabs-wrap.expanded .category-tabs{max-height:500px}
.cat-tab{padding:6px 16px;border-radius:20px;font-size:.82rem;white-space:nowrap;background:var(--glass-bg);border:1px solid transparent;transition:all .25s;color:var(--text-secondary);cursor:pointer}
.cat-tab:hover{background:var(--glass-hover);color:var(--text)}
.cat-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cat-expand-btn{flex-shrink:0;width:36px;height:36px;margin:8px 10px 0 0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass-hover);border:1px solid var(--glass-border);color:var(--text);cursor:pointer;transition:all .25s}
.cat-expand-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.cat-expand-btn svg{transition:transform .3s}
.category-tabs-wrap.expanded .cat-expand-btn svg{transform:rotate(180deg)}
.directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:20px 24px;overflow-y:auto;flex:1;align-content:start}
.directory-empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--text-secondary);font-size:.95rem}
.dir-card{display:flex;align-items:flex-start;gap:14px;padding:16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);cursor:pointer;transition:var(--transition)}
.dir-card:hover{transform:translateY(-3px);background:var(--glass-hover);box-shadow:var(--card-shadow)}
.dir-card-icon{flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:600;background:var(--accent);color:#fff;overflow:hidden}
.dir-card-icon img{width:100%;height:100%;object-fit:cover}
.dir-card-info{flex:1;min-width:0}
.dir-card-title{font-size:.92rem;font-weight:600;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dir-card-desc{font-size:.78rem;color:var(--text-secondary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dir-card-cat{display:inline-block;font-size:.7rem;padding:2px 8px;background:var(--glass-bg);border-radius:6px;color:var(--text-secondary);margin-top:6px}
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 24px;flex-shrink:0}
.page-btn{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:.85rem;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-secondary);transition:all .2s}
.page-btn:hover{background:var(--glass-hover);color:var(--text)}.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.page-btn:disabled{opacity:.4;cursor:not-allowed}

/* ========== Forms & Buttons ========== */
.bookmark-modal{max-width:440px}
.bm-icon-options{display:flex;gap:8px;margin-bottom:8px}
.bm-icon-radio{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);font-size:.8rem;color:var(--text-secondary);cursor:pointer;transition:all .2s}
.bm-icon-radio:has(input:checked){border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.bm-icon-radio input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.bm-icon-input{margin-top:0}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.82rem;font-weight:500;color:var(--text-secondary);margin-bottom:6px}
.form-input{display:block;width:100%;padding:10px 14px;background:var(--input-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text);transition:border-color .2s,box-shadow .2s}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-textarea{display:block;width:100%;padding:12px 14px;background:var(--input-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);font-size:.85rem;color:var(--text);resize:vertical;font-family:'Cascadia Code','Fira Code',Consolas,monospace;transition:border-color .2s}
.form-textarea:focus{border-color:var(--accent)}
.form-row{display:flex;gap:14px}.form-row .form-group{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;transition:var(--transition);cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 4px 16px var(--accent-glow)}
.btn-ghost{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-secondary)}
.btn-ghost:hover{background:var(--glass-hover);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{opacity:.85}
.btn-sm{padding:6px 14px;font-size:.8rem;border-radius:var(--radius-sm)}

/* ========== Wallpaper ========== */
#bg-wallpaper{position:fixed;inset:-30px;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;
    opacity:0;pointer-events:none;transition:opacity .6s}
#bg-wallpaper.active{opacity:1}
#bg-wallpaper::after{content:'';position:absolute;inset:0;background:var(--bg);opacity:var(--wp-overlay,.3);transition:opacity .4s}

body.has-wp .bg-orb{opacity:0!important;transition:opacity .6s}
body.has-wp .bg-particles{opacity:0!important;transition:opacity .6s}
body.has-wp .bg-layer::before{opacity:0!important;transition:opacity .6s}
body.has-wp .bg-layer::after{opacity:0!important;transition:opacity .6s}
body.wp-topbar-clear .topbar{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border-bottom-color:transparent!important;box-shadow:none!important}

.wp-mode-toggle{display:flex;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:14px}
.wp-mode-btn{flex:1;padding:8px 0;font-size:.82rem;text-align:center;color:var(--text-secondary);transition:all .25s}
.wp-mode-btn+.wp-mode-btn{border-left:1px solid var(--glass-border)}
.wp-mode-btn:hover{color:var(--text);background:var(--glass-hover)}
.wp-mode-btn.active{background:var(--accent);color:#fff}
.wp-section{margin-bottom:8px}
.wp-file-label{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1.5px dashed var(--glass-border);
    border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);font-size:.85rem;transition:all .25s}
.wp-file-label:hover{border-color:var(--accent);color:var(--text);background:var(--glass-bg)}
.wp-preview{border-radius:var(--radius-sm);overflow:hidden;max-height:0;margin-top:0;transition:max-height .3s,margin-top .3s}
.wp-preview.has-image{max-height:140px;margin-top:10px}
.wp-preview img{width:100%;height:120px;object-fit:cover;border-radius:var(--radius-sm);display:block}
.wp-hint{font-size:.7rem;color:var(--text-secondary);margin-top:8px;opacity:.5;line-height:1.4}
.wp-clear-btn{width:100%;padding:8px;margin-top:8px;font-size:.78rem;color:var(--danger);background:var(--glass-bg);border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}
.wp-clear-btn:hover{background:rgba(239,68,68,.08);border-color:var(--danger)}
.wp-range-wrap{display:flex;align-items:center;gap:10px}
.wp-range{flex:1;accent-color:var(--accent);height:4px}
.wp-range-val{font-size:.78rem;color:var(--text-secondary);min-width:32px;text-align:right}
.wp-toggle-label{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer;font-size:.85rem;color:var(--text-secondary);transition:color .2s}
.wp-toggle-label:hover{color:var(--text)}
.wp-toggle-label input{accent-color:var(--accent);width:16px;height:16px}

/* ========== Settings Cloud Sync ========== */
.settings-cloud-section{padding-top:8px}
.settings-cloud-divider{height:1px;background:var(--glass-border);margin:16px 0}
.settings-cloud-btns{display:flex;gap:10px}
.settings-cloud-btn{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 12px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:#fff;border:none;cursor:pointer;transition:all .25s;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.settings-cloud-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.25);filter:brightness(1.08)}
.settings-cloud-btn:active{transform:translateY(0)}
.settings-cloud-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.settings-cloud-btn svg{flex-shrink:0}
.cloud-save-btn{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#fff))}
.cloud-load-btn{background:linear-gradient(135deg,#43a047,#66bb6a)}
.settings-cloud-hint{font-size:.73rem;color:var(--text-secondary);text-align:center;margin-top:8px;opacity:.7}
.settings-footer{margin-top:auto;padding-top:8px}
.settings-footer-links{display:flex;flex-direction:column;gap:8px;padding:4px 0 8px}
.settings-footer-link{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-secondary);text-decoration:none;transition:color .2s;padding:6px 0}
.settings-footer-link:hover{color:var(--accent)}
.settings-footer-link svg{flex-shrink:0;opacity:.6}

/* ========== Sync Dialog ========== */
.sync-modal{max-width:420px;width:90vw;padding:0;overflow:hidden}
.sync-header{text-align:center;padding:32px 28px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.sync-header h2{font-size:1.2rem;font-weight:700;margin:4px 0 0}
.sync-header p{font-size:.85rem;color:var(--text-secondary);margin:0}
.sync-choices{padding:0 20px;display:flex;flex-direction:column;gap:10px}
.sync-choice{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass-bg);cursor:pointer;text-align:left;transition:all .2s;width:100%}
.sync-choice:hover{border-color:var(--accent);background:var(--glass-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.sync-choice-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.05));color:var(--accent)}
.sync-choice-text{display:flex;flex-direction:column;gap:3px}
.sync-choice-text strong{font-size:.92rem;color:var(--text)}
.sync-choice-text span{font-size:.76rem;color:var(--text-secondary);line-height:1.3}
.sync-skip{display:block;width:100%;padding:14px;text-align:center;font-size:.82rem;color:var(--text-secondary);background:none;border:none;cursor:pointer;transition:color .2s;margin-top:4px}
.sync-skip:hover{color:var(--text)}

/* ========== Toast ========== */
.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:var(--radius);font-size:.875rem;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);pointer-events:auto;animation:toast-in .35s ease;max-width:420px}
.toast-success{background:rgba(34,197,94,.15);color:var(--success);border-color:rgba(34,197,94,.3)}
.toast-error{background:rgba(239,68,68,.15);color:var(--danger);border-color:rgba(239,68,68,.3)}
.toast-info{background:var(--glass-bg);color:var(--text)}
.toast-out{animation:toast-out .3s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{to{opacity:0;transform:translateX(40px)}}

/* ========== Admin ========== */
.admin-page .hero{display:none}
.admin-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:var(--glass-bg);border-bottom:1px solid var(--glass-border)}
.admin-back{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--text-secondary);transition:color .2s}.admin-back:hover{color:var(--text)}
.admin-title{font-weight:600;font-size:1.05rem;position:absolute;left:50%;transform:translateX(-50%)}
.admin-user{font-size:.875rem;color:var(--text-secondary)}
.admin-container{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:80px 24px 40px}
.admin-tabs{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap}
.admin-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:var(--radius-sm);font-size:.875rem;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-secondary);transition:all .25s}
.admin-tab:hover{background:var(--glass-hover);color:var(--text)}
.admin-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab-pane{display:none}.tab-pane.active{display:block}
.glass-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px}
.glass-card h3{font-size:1rem;font-weight:600;margin-bottom:18px}
.admin-list-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-list-header h3{margin-bottom:0}
.admin-search-wrap{position:relative;width:280px}
.admin-search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}
.admin-search-input{width:100%;padding:8px 12px 8px 34px;background:var(--input-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);font-size:.84rem;color:var(--text);transition:border-color .2s}
.admin-search-input:focus{border-color:var(--accent);outline:none}
.admin-table-wrap{overflow-x:auto;margin-top:12px}
.admin-table th{text-align:left;padding:10px 12px;font-size:.8rem;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--glass-border);text-transform:uppercase;letter-spacing:.04em}
.admin-table td{padding:10px 12px;font-size:.85rem;border-bottom:1px solid var(--glass-border)}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--glass-bg)}
.admin-table td a{color:var(--accent)}.admin-table td a:hover{text-decoration:underline}
.help-text{font-size:.82rem;color:var(--text-secondary);margin-bottom:14px}
.link{color:var(--accent)}.link:hover{text-decoration:underline}
.categories-list{display:flex;flex-direction:column;gap:8px}
.cat-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm)}
.cat-item-icon{font-size:1.2rem;width:24px;text-align:center}
.cat-item-name{flex:1;font-size:.9rem}
.cat-item-sort{font-size:.8rem;color:var(--text-secondary);min-width:50px}
.cat-item-actions{display:flex;gap:4px}

/* ========== Animations ========== */
.anim-fade-in{opacity:0;transform:translateY(20px);animation:fadeInUp .7s ease forwards}
.anim-delay-1{animation-delay:.12s}.anim-delay-2{animation-delay:.24s}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}

/* ========== Responsive ========== */
@media(max-width:768px){
    .topbar{padding:10px 16px}.topbar-btn span{display:none}
    .hero{padding:70px 16px 30px}
    .clock-time{font-size:3rem}
    .bookmarks-section{width:100%}
    .bookmarks-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
    .bookmark-card{padding:14px 6px 12px}
    .bookmark-icon{width:36px;height:36px;font-size:1rem}
    .directory-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:14px 16px}
    .modal-header{padding:16px}
    .admin-container{padding:70px 12px 30px}
    .admin-title{position:static;transform:none}
    .form-row{flex-direction:column;gap:0}
    [data-search-pos="top"] .hero{padding-top:80px}
}
@media(max-width:480px){.directory-grid{grid-template-columns:1fr}}