:root{--bg:#eaf0ff;--surface:rgba(255,255,255,.76);--surface-2:rgba(239,243,252,.72);--text:#17213c;--muted:#68748f;--faint:#8f9ab3;--line:rgba(255,255,255,.8);--accent:#6171e8;--accent-strong:#29345c;--accent-soft:rgba(103,113,230,.12);--danger:#c74d65;--shadow:0 24px 70px rgba(68,82,136,.18);--card-shadow:0 22px 55px rgba(77,92,151,.18)}
html[data-theme=dark]{--bg:#101326;--surface:rgba(28,33,62,.78);--surface-2:rgba(39,45,79,.72);--text:#f4f5ff;--muted:#a7aec7;--faint:#777f9d;--line:rgba(255,255,255,.1);--accent:#9ea7ff;--accent-strong:#717ce9;--accent-soft:rgba(126,137,255,.14);--danger:#ff899e;--shadow:0 24px 70px rgba(0,0,0,.4);--card-shadow:0 22px 55px rgba(0,0,0,.28)}
body{background-color:var(--bg);background-image:radial-gradient(circle at 91% 1%,rgba(150,91,239,.28),transparent 31%),radial-gradient(circle at 2% 92%,rgba(67,164,255,.28),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.24),transparent 48%);background-attachment:fixed}
.topbar{width:min(1320px,calc(100% - 48px));height:66px;margin:20px auto 0;padding:0 16px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:0 15px 45px rgba(71,85,139,.12);backdrop-filter:blur(24px) saturate(145%);top:14px;gap:34px}
.brand-mark{background:linear-gradient(135deg,#526cff,#9864ec);box-shadow:0 8px 20px rgba(103,91,245,.38);border-radius:11px}.brand small{color:var(--faint)}
.categories{gap:6px;align-items:center}.cat-btn{height:auto;padding:9px 11px;border-radius:10px;color:var(--muted);font-size:12px}.cat-btn:hover{background:rgba(255,255,255,.38)}.cat-btn.active{background:color-mix(in srgb,var(--surface) 85%,#fff);color:var(--accent);box-shadow:0 5px 14px rgba(65,78,130,.12)}.cat-btn.active:after{display:none}.cat-btn em{border:0;background:transparent;padding:0;color:var(--faint)}
.search{background:color-mix(in srgb,var(--surface-2) 80%,transparent);border-color:transparent;width:230px}.search:focus-within{width:270px;background:var(--surface);border-color:rgba(108,116,229,.35);box-shadow:0 0 0 4px rgba(96,107,226,.11)}.icon-btn{background:var(--surface);border-color:var(--line)}
.primary-btn{background:#242e52;border-color:#242e52;color:#fff;box-shadow:0 8px 20px rgba(36,46,82,.22)}html[data-theme=dark] .primary-btn{background:linear-gradient(135deg,#6672e9,#8d65de);border-color:transparent}.primary-btn:hover{box-shadow:0 11px 24px rgba(64,74,160,.3)}
.container{max-width:1260px;padding-top:70px}.intro{padding:5px 12px 58px;align-items:flex-end}.welcome-pill{background:rgba(255,255,255,.48);border-color:rgba(255,255,255,.75);box-shadow:0 6px 18px rgba(77,92,151,.08);color:var(--accent)}.eyebrow{color:var(--accent)!important;font-weight:700}.intro h1{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;font-size:clamp(38px,5vw,58px);font-weight:750;letter-spacing:-.065em}.intro h1 span{font-style:normal;background:linear-gradient(90deg,#506bfa,#a24ed5);color:transparent;background-clip:text;-webkit-background-clip:text}.intro-copy>p:last-child{color:var(--muted)}
.overview-card{width:335px;min-height:175px;border-color:rgba(255,255,255,.82);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.38));backdrop-filter:blur(22px) saturate(140%);box-shadow:0 17px 45px rgba(77,92,151,.13);border-radius:21px}.overview-card:before{border-color:rgba(102,111,225,.14)}html[data-theme=dark] .overview-card{background:linear-gradient(145deg,rgba(41,47,84,.76),rgba(30,35,66,.62))}.overview-label i{color:#4b9968;background:rgba(79,180,114,.12)}
.section-head{border-bottom-color:rgba(114,127,166,.16)}.section-head h2{color:var(--text);font-size:14px;text-transform:none;letter-spacing:0}.grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px}
.card{min-height:230px;border-color:rgba(255,255,255,.85);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.43));backdrop-filter:blur(20px) saturate(135%);border-radius:20px;box-shadow:0 14px 42px rgba(77,92,151,.1)}html[data-theme=dark] .card{background:linear-gradient(145deg,rgba(38,44,78,.76),rgba(25,30,58,.63));border-color:rgba(255,255,255,.1)}
.card:hover{background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(255,255,255,.62));transform:translateY(-6px) scale(1.008);border-color:rgba(255,255,255,.95);box-shadow:var(--card-shadow)}html[data-theme=dark] .card:hover{background:linear-gradient(145deg,rgba(49,56,96,.9),rgba(31,37,70,.78));border-color:rgba(158,167,255,.28)}
.card-accent{height:100%;width:3px;right:auto;background:linear-gradient(#5d72f2,#a15bd8);border-radius:3px;opacity:0}.card-icon{width:47px;height:47px;background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.88);box-shadow:0 8px 22px rgba(78,91,146,.13);border-radius:14px}html[data-theme=dark] .card-icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
.category-label{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.72);color:var(--muted)}html[data-theme=dark] .category-label{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}.pin-btn:hover,.pin-btn.active{background:rgba(105,115,230,.12);color:var(--accent)}.card h3{font-size:15px}.open-arrow{color:var(--accent)}
.tag{background:rgba(255,255,255,.48);border-color:rgba(255,255,255,.7);color:var(--muted)}html[data-theme=dark] .tag{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07)}.env.online:before{box-shadow:0 0 0 3px rgba(74,184,112,.12)}.env-local:before,.env:not(.online):before{box-shadow:0 0 0 3px rgba(94,179,247,.11)}
.card-actions{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:var(--line);backdrop-filter:blur(12px)}.card-actions button:hover{background:var(--accent-soft);color:var(--accent)}
.empty{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.35);backdrop-filter:blur(18px)}.modal .backdrop{background:rgba(23,28,57,.48);backdrop-filter:blur(10px)}.preview-panel,.form-panel{background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(28px);border-color:rgba(255,255,255,.42)}.form-head{background:linear-gradient(130deg,rgba(255,255,255,.38),var(--accent-soft))}.field input,.field select,.field textarea{background:color-mix(in srgb,var(--surface-2) 82%,transparent)}
@media(max-width:980px){.topbar{width:calc(100% - 28px);margin-top:14px;top:8px}.container{padding-top:50px}.categories{order:3}.search:focus-within{width:220px}}
@media(max-width:760px){.intro{padding-left:0;padding-right:0}.overview-card{width:100%}.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}
@media(max-width:480px){.topbar{width:calc(100% - 20px);margin-top:10px;border-radius:15px}.container{padding-top:38px}.intro h1{font-size:36px}.grid{grid-template-columns:1fr}.overview-card{min-height:165px}}