:root{--bg:#f5f4f1;--panel:#fff;--ink:#17161c;--muted:#77747e;--line:#e6e3de;--purple:#7767e8;--purple-dark:#5e50c6;--sidebar:#111019;--danger:#c64c4c;--shadow:0 16px 50px rgba(26,22,48,.09)}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-height:100vh}button,input,textarea,select{font:inherit}.hidden{display:none!important}.eyebrow{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.17em;color:var(--purple)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,43%) 1fr;background:#111019}.login-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,8vw,120px);background:#f7f5f0;position:relative}.brand-mark{position:absolute;top:42px;left:clamp(40px,8vw,120px);display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--ink);color:#fff;font-weight:900;letter-spacing:-.08em}.login-panel h1{font-family:Georgia,serif;font-weight:500;letter-spacing:-.05em;font-size:clamp(44px,5vw,72px);line-height:.98;margin:0}.login-panel h1 span{color:var(--purple);font-style:italic}.login-copy{max-width:430px;color:var(--muted);font-size:16px;line-height:1.6;margin:25px 0 32px}.login-form{display:grid;gap:18px;max-width:430px}.login-form label,.dialog-form>label,.form-row>label{display:grid;gap:8px;font-size:12px;font-weight:700;color:#55515b}.login-form input,.dialog-form input,.dialog-form textarea,.dialog-form select{width:100%;border:1px solid #ddd9d2;background:#fff;border-radius:12px;padding:14px 15px;outline:none;transition:.2s}.login-form input:focus,.dialog-form input:focus,.dialog-form textarea:focus,.dialog-form select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(119,103,232,.12)}.primary{border:0;border-radius:12px;background:var(--purple);color:#fff;padding:13px 18px;font-weight:800;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary:hover{background:var(--purple-dark);transform:translateY(-1px)}.wide{width:100%;justify-content:space-between;padding:15px 18px}.form-error{color:var(--danger);font-size:13px;min-height:18px;margin:0}.secure-note{font-size:12px;color:#8d8992;margin:25px 0 0}.secure-note span{color:#5cbf83}.login-art{overflow:hidden;position:relative;background:radial-gradient(circle at 65% 48%,#292641 0,#161521 45%,#0f0e15 75%)}.login-art:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,transparent,#000,transparent)}.orbit{position:absolute;border:1px solid rgba(145,128,255,.17);border-radius:50%}.orbit-one{width:620px;height:620px;top:7%;left:10%}.orbit-two{width:390px;height:390px;top:23%;left:27%}.art-card{position:absolute;z-index:1;width:245px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(34,32,51,.77);backdrop-filter:blur(15px);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.3)}.art-card i{display:block;font-style:normal;color:#8f7ff5;font-size:11px;letter-spacing:.14em;margin-bottom:34px}.art-card b,.art-card small{display:block}.art-card b{font:500 22px/1.2 Georgia,serif}.art-card small{color:#918d9c;margin-top:9px}.card-a{top:23%;left:18%;transform:rotate(-5deg)}.card-b{top:46%;left:48%;transform:rotate(4deg)}.card-c{top:67%;left:16%;transform:rotate(-2deg)}
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--sidebar);color:#fff;padding:28px 18px;display:flex;flex-direction:column;z-index:20}.logo{display:flex;align-items:center;gap:12px;padding:0 8px 28px;border-bottom:1px solid rgba(255,255,255,.08)}.logo span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--purple);font-weight:900;letter-spacing:-.08em}.logo b{font-family:Georgia,serif;font-size:18px;font-weight:500}.sidebar nav{display:grid;gap:5px;margin-top:24px}.nav-item{width:100%;display:flex;align-items:center;gap:11px;border:0;background:none;color:#97939f;border-radius:10px;padding:11px 12px;text-align:left;cursor:pointer;transition:.2s}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.08);color:#fff}.nav-item .dot{width:8px;height:8px;border-radius:50%;background:var(--dot,#777)}.nav-item .count{margin-left:auto;font-size:11px;color:#6f6b76}.nav-item .edit-cat{opacity:0;margin-left:1px}.nav-item:hover .edit-cat{opacity:1}.text-button{border:0;background:none;color:#77737f;padding:15px 12px;text-align:left;cursor:pointer}.text-button:hover{color:#fff}.sidebar-footer{margin-top:auto}.export-link{display:block;color:#77737f;text-decoration:none;font-size:12px;padding:15px 10px;border-bottom:1px solid rgba(255,255,255,.08)}.export-link:hover{color:#fff}.account{display:grid;grid-template-columns:36px 1fr 28px;align-items:center;gap:10px;padding:18px 8px 0}.account>div:first-child{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2d2a3a;color:#b8affb;font-weight:800}.account b,.account small{display:block}.account b{font-size:12px}.account small{font-size:10px;color:#716d79;margin-top:3px}.account button{border:0;background:none;color:#77737f;cursor:pointer}.content{grid-column:2;padding:0 clamp(26px,4vw,64px) 60px}.topbar{height:94px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line)}.search{position:relative;max-width:530px;flex:1}.search>span{position:absolute;left:15px;top:10px;font-size:24px;color:#8c8991}.search input{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 62px 13px 45px;outline:none}.search input:focus{border-color:#aaa0ed}.search kbd{position:absolute;right:10px;top:10px;border:1px solid var(--line);border-radius:6px;background:#f7f6f3;padding:3px 7px;font-size:10px;color:#888}.topbar>.primary{margin-left:auto}.menu-btn{display:none;border:0;background:none;font-size:20px}.hero{padding:50px 0 30px;display:flex;align-items:end;justify-content:space-between}.hero h1{font:500 clamp(35px,4vw,54px)/1.1 Georgia,serif;letter-spacing:-.035em;margin:0}.hero>div>p:last-child{color:var(--muted);margin:11px 0 0}.result-count{color:#99959e;font-size:12px}.bookmark-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}.bookmark-card{position:relative;display:flex;flex-direction:column;min-height:205px;border:1px solid var(--line);border-radius:17px;background:var(--panel);padding:20px;text-decoration:none;color:inherit;transition:.22s;overflow:hidden}.bookmark-card:hover{transform:translateY(-3px);border-color:#d4cef6;box-shadow:var(--shadow)}.card-top{display:flex;align-items:center;gap:12px}.site-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:900;background:var(--accent,#777);text-transform:uppercase}.card-title{min-width:0}.card-title b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-title small{display:block;color:#9a969f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.card-description{color:#6d6973;font-size:13px;line-height:1.55;margin:18px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-bottom{display:flex;align-items:center;margin-top:auto}.category-pill{font-size:10px;font-weight:800;letter-spacing:.05em;padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent)}.card-actions{display:flex;margin-left:auto;gap:3px}.card-actions button{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#aaa6ae;cursor:pointer}.card-actions button:hover{background:#f1eff9;color:var(--purple)}.card-actions .star.active{color:#d69e2e}.empty-state{text-align:center;padding:80px 20px}.empty-state>div{margin:auto;width:58px;height:58px;border-radius:18px;background:#ebe8fb;color:var(--purple);display:grid;place-items:center;font-size:30px}.empty-state h2{font:500 28px Georgia,serif;margin:20px 0 8px}.empty-state p{color:var(--muted);margin:0 0 24px}
dialog{border:0;border-radius:20px;padding:0;box-shadow:0 30px 100px rgba(20,18,30,.27);width:min(560px,calc(100% - 30px));background:#fff}dialog::backdrop{background:rgba(12,11,17,.62);backdrop-filter:blur(4px)}.dialog-form{padding:28px;display:grid;gap:18px}.dialog-form.compact{max-width:430px}.dialog-head{display:flex;align-items:start;justify-content:space-between}.dialog-head h2{font:500 30px Georgia,serif;margin:0}.icon-button{border:0;background:#f3f1ee;border-radius:10px;width:36px;height:36px;font-size:22px;cursor:pointer}.dialog-form textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.favorite-check{display:flex!important;align-items:center;justify-content:center;flex-direction:row!important;border:1px solid var(--line);border-radius:12px;margin-top:22px;cursor:pointer}.favorite-check input{width:auto}.favorite-check span{color:#d69e2e}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.action-spacer{flex:1}.secondary,.danger-button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer}.danger-button{color:var(--danger);border-color:#f0d1d1}.danger-button:hover{background:#fff3f3}.toast{position:fixed;z-index:100;right:24px;bottom:24px;background:#1d1b25;color:#fff;border-radius:12px;padding:13px 17px;box-shadow:var(--shadow);transform:translateY(80px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}
@media(max-width:800px){.login-shell{grid-template-columns:1fr}.login-art{display:none}.login-panel{padding:95px 30px 45px}.brand-mark{top:28px;left:30px}.app-shell{display:block}.sidebar{transform:translateX(-100%);transition:.25s;box-shadow:20px 0 60px rgba(0,0,0,.25)}.sidebar.open{transform:none}.content{padding:0 20px 45px}.topbar{height:auto;padding:16px 0;flex-wrap:wrap}.menu-btn{display:block}.search{order:3;max-width:none;flex-basis:100%}.topbar>.primary{font-size:0;padding:12px}.topbar>.primary span{font-size:18px}.hero{padding:34px 0 24px}.bookmark-grid{grid-template-columns:1fr}.result-count{display:none}}@media(max-width:420px){.login-panel h1{font-size:42px}.form-row{grid-template-columns:1fr}.favorite-check{margin-top:0;padding:14px}.dialog-form{padding:22px}}