:root { --ink:#1d2433; --muted:#687087; --line:#e8eaf0; --paper:#fffdf9; --accent:#5d5ef2; --accent-dark:#4849c7; --wash:#f1f1ff; --danger:#b32646; --card-blue:#337ab7; --card-blue-dark:#286090; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; } .site-header { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,82px); border-bottom:1px solid var(--line); background:rgba(255,253,249,.9); position:sticky; top:0; z-index:4; backdrop-filter:blur(10px); }
.brand { color:var(--ink); text-decoration:none; font-size:1.15rem; font-weight:800; letter-spacing:-.03em; display:flex; gap:9px; align-items:center; }.brand-mark { display:grid; place-items:center; background:var(--ink); color:#fff; border-radius:9px; width:28px; height:28px; font-size:.9rem; }.header-actions { display:flex; align-items:center; gap:8px; }.header-actions form { margin:0; }.button { border:0; border-radius:10px; padding:10px 15px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }.button-quiet { background:transparent; color:var(--muted); }.button-quiet:hover { color:var(--ink); background:#f1f1f5; }.button-primary { color:#fff; background:var(--accent); box-shadow:0 5px 13px rgba(93,94,242,.2); }.button-primary:hover { background:var(--accent-dark); }.button-danger { color:var(--danger); background:#fff0f3; }.owner-badge { color:var(--accent-dark); background:var(--wash); padding:5px 10px; border-radius:999px; font-weight:700; font-size:.78rem; }
.page-shell { max-width:1260px; margin:auto; padding:0 clamp(20px,5vw,82px) 70px; }.hero { padding:92px 0 64px; background:radial-gradient(circle at 66% 42%,#e4e4ff 0,transparent 26%); }.eyebrow { color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.13em; margin:0 0 13px; }.hero h1 { font-size:clamp(2.8rem,7vw,5.8rem); line-height:.96; letter-spacing:-.07em; margin:0; max-width:760px; }.hero-copy { color:var(--muted); font-size:1.1rem; max-width:455px; margin:24px 0 28px; }.flash { border-radius:12px; padding:13px 16px; margin:0 0 24px; font-weight:600; }.flash-success { background:#e8f8ee;color:#176637; }.flash-error { background:#fff0f3;color:#9c2541; }.toolbar { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; display:flex; justify-content:space-between; align-items:center; gap:18px; }.filter-form { display:flex; align-items:center; gap:10px; }.filter-form label,.link-count { color:var(--muted); font-size:.9rem; }.filter-form select { border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 30px 8px 10px; color:var(--ink); }.clear-filter { color:var(--accent-dark); font-size:.9rem; font-weight:700; }.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-top:28px; }.note-card { min-height:230px; position:relative; border:1px solid var(--card-blue-dark); border-radius:17px; background:linear-gradient(to bottom,var(--card-blue),var(--card-blue-dark)); color:#fff; padding:25px; display:flex; flex-direction:column; transition:transform .18s,box-shadow .18s; overflow-wrap:anywhere; }.note-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(40,96,144,.28); }.card-category { color:#d9edf7; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:800; margin:0 0 15px; }.note-card h2 { letter-spacing:-.035em; font-size:1.35rem; line-height:1.15; margin:0 0 13px; }.card-description { color:#eef7fc; font-size:.94rem; margin:0 0 22px; }.external-link { color:#fff; font-weight:750; text-decoration:none; margin-top:auto; }.external-link:hover { color:#d9edf7; }.select-card { position:absolute; right:16px; top:15px; }.select-card input { width:18px; height:18px; accent-color:#fff; }.bulk-actions { margin-top:22px; }.empty-state { grid-column:1/-1; text-align:center; border:1px dashed #cfd2df; padding:62px 20px; border-radius:17px; color:var(--muted); }.empty-state span { color:var(--accent); font-size:2rem; }.empty-state h2 { color:var(--ink); margin:7px 0 3px; }.dialog { border:0; padding:0; background:transparent; width:min(440px,calc(100% - 32px)); }.dialog::backdrop { background:rgba(20,25,42,.52); backdrop-filter:blur(3px); }.dialog-card { position:relative; display:grid; gap:12px; background:#fffdf9; padding:30px; border-radius:18px; box-shadow:0 22px 70px rgba(12,13,29,.27); }.dialog-card h2 { letter-spacing:-.04em; margin:-6px 0 8px; }.dialog-card label { display:grid; gap:6px; color:var(--muted); font-size:.88rem; font-weight:700; }.dialog-card label span { font-weight:500; }.dialog-card input,.dialog-card textarea { width:100%; border:1px solid #d9dce5; border-radius:9px; padding:10px 11px; color:var(--ink); background:#fff; }.dialog-card input:focus,.dialog-card textarea:focus { outline:3px solid #ddddff; border-color:var(--accent); }.dialog-card .button { margin-top:8px; }.close { position:absolute; top:12px; right:14px; border:0; background:transparent; color:var(--muted); font-size:1.7rem; line-height:1; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:800px) { .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero { padding:62px 0 46px; } }
@media (max-width:520px) { .site-header { height:auto; min-height:64px; padding:8px 14px; gap:6px; flex-wrap:wrap; }.brand { font-size:1rem; gap:6px; white-space:nowrap; }.brand-mark { width:25px; height:25px; }.header-actions { width:100%; margin-left:0; justify-content:flex-end; gap:4px; flex-shrink:0; flex-wrap:wrap; }.header-actions .button { display:inline-flex; padding:8px 10px; font-size:.82rem; }.header-actions form .button-quiet { color:var(--ink); background:#f1f1f5; }.owner-badge { display:none; }.toolbar { align-items:flex-start; flex-direction:column; }.card-grid { grid-template-columns:1fr; }.filter-form { width:100%; }.filter-form select { flex:1; }.link-count { display:none; } }
.card-actions { display:flex; gap:8px; margin-top:16px; }.button-card { padding:7px 10px; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.55); }.button-card:hover { background:rgba(255,255,255,.28); }.button-card-danger { color:#fff; background:rgba(113,9,9,.38); border-color:rgba(255,255,255,.42); }
.card-image { width:100%; max-height:220px; object-fit:cover; border-radius:10px; margin:0 0 16px; background:rgba(255,255,255,.15); }
.file-preview { min-height:132px; display:grid; place-content:center; justify-items:center; gap:8px; border:1px solid rgba(255,255,255,.42); border-radius:10px; margin:0 0 16px; background:rgba(255,255,255,.14); }.file-icon { font-size:3.1rem; line-height:1; }.file-type { color:#fff; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.link-preview { min-height:1px; margin:0; }.link-preview:has(img) { margin:0 0 16px; }.link-preview img { display:block; width:100%; max-height:190px; object-fit:cover; border-radius:10px; background:rgba(255,255,255,.14); }
.filter-form input[type="search"] { min-width:190px; border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px; color:var(--ink); }
.form-help { color:var(--muted); font-size:.88rem; margin:0; }
.saved-links,.public-links { margin-top:42px; }.saved-links h2,.public-links h2 { margin-bottom:5px; }
.account-nav { display:flex; gap:8px; margin:20px 0; flex-wrap:wrap; }.account-nav .button { background:#f1f1f5; color:var(--ink); }
.account-settings { display:grid; gap:18px; max-width:560px; }.account-settings .dialog-card { box-shadow:none; border:1px solid var(--line); }
.category-heading { grid-column:1/-1; margin:20px 0 -2px; padding-top:24px; border-top:1px solid var(--line); color:var(--ink); font-size:1.15rem; letter-spacing:-.02em; }.category-heading:first-child { margin-top:0; padding-top:0; border-top:0; }