:root { --ink:#15231f; --muted:#69736f; --paper:#f7f6f1; --card:#fffefa; --line:#dedfd7; --lime:#d9f562; --forest:#205a45; } :root[data-theme="dark"] { --ink:#edf5ef; --muted:#aeb9b3; --paper:#101916; --card:#182722; --line:#30443c; --lime:#d9f562; --forest:#a9e6c5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; transition:background .25s ease,color .25s ease; } :root[data-theme="dark"] body { background:radial-gradient(circle at 12% 0%,#1c332b 0,transparent 30%),radial-gradient(circle at 90% 12%,#25382d 0,transparent 24%),var(--paper); }
button,input,select { font:inherit; }
button:disabled { cursor:not-allowed; opacity:.5; }
.page-shell { max-width:1120px; margin:auto; padding:28px 36px 72px; }
.topbar { display:flex; justify-content:space-between; align-items:center; }.topbar-actions { display:flex; align-items:center; gap:10px; }.theme-toggle,.auth-button,.sign-out-button { border:1px solid var(--ink); border-radius:20px; padding:8px 12px; background:var(--ink); color:#fff; cursor:pointer; font-size:12px; font-weight:700; }.theme-toggle { width:36px; padding:8px 0; font-size:16px; }.account-menu { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.sign-out-button { background:transparent; color:var(--ink); }
.brand { color:var(--ink); font-size:21px; font-weight:700; letter-spacing:-.8px; text-decoration:none; display:flex; gap:8px; align-items:center; }.brand-mark { background:var(--ink); color:var(--lime); width:27px; height:27px; display:grid; place-items:center; border-radius:50% 50% 50% 8%; font-size:15px; }
.bookmark-total,.eyebrow { color:var(--muted); font:500 11px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.bookmark-total { background:#ecece5; padding:8px 11px; border-radius:20px; }:root[data-theme="dark"] .bookmark-total { background:#273a32; color:#c9d8d0; }
.hero { padding:102px 0 75px; }.hero h1 { font-size:clamp(48px,7vw,82px); line-height:.98; letter-spacing:-.065em; margin:15px 0 22px; font-weight:600; }.hero em { font-family:Georgia,serif; font-weight:400; color:var(--forest); }.intro { color:var(--muted); font-size:17px; max-width:450px; line-height:1.55; }
.seo-content { display:grid; grid-template-columns:1fr 1.1fr; gap:52px; padding:0 0 76px; }.seo-content h2,.how-it-works h2 { font-size:clamp(27px,3vw,42px); line-height:1.04; letter-spacing:-.05em; margin:12px 0 0; max-width:440px; }.seo-copy { color:var(--muted); font-size:16px; line-height:1.7; }.seo-copy p { margin:0 0 16px; }.how-it-works { border-top:1px solid var(--line); padding:56px 0 74px; }.how-it-works h2 { margin-bottom:34px; }.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.steps-grid article { border:1px solid var(--line); border-radius:11px; background:var(--card); padding:22px; }.steps-grid span { color:var(--forest); font:500 11px "DM Mono",monospace; letter-spacing:.08em; }.steps-grid h3 { font-size:18px; letter-spacing:-.03em; margin:34px 0 7px; }.steps-grid p { color:var(--muted); font-size:14px; line-height:1.55; margin:0; }.site-footer { border-top:1px solid var(--line); color:var(--muted); font:11px "DM Mono",monospace; letter-spacing:.04em; padding:23px 36px; max-width:1120px; margin:auto; }
.workspace { border-top:1px solid var(--line); padding-top:28px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }.section-heading h2 { font-size:24px; letter-spacing:-.04em; margin:0 0 5px; }.section-heading p { color:var(--muted); margin:0; font-size:14px; }.collection-actions { display:flex; gap:9px; align-items:center; }.add-button,.save-button { border:0; background:var(--ink); color:#fff; cursor:pointer; border-radius:9px; padding:12px 16px; font-weight:600; }.add-button span { color:var(--lime); font-size:21px; line-height:0; margin-right:5px; }.import-button { border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; border-radius:9px; padding:11px 13px; font-weight:600; }
.controls { display:flex; gap:12px; margin:29px 0 20px; }.search-box { flex:1; display:flex; align-items:center; gap:9px; background:#fffefa; border:1px solid var(--line); border-radius:8px; padding:0 13px; color:#6d7772; }.search-box span { font-size:23px; transform:rotate(-20deg); }.search-box input { width:100%; border:0; outline:0; background:transparent; padding:12px 0; }.controls select { border:1px solid var(--line); background:transparent; border-radius:8px; padding:0 12px; color:var(--ink); }
.bookmark-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.bookmark-card { background:var(--card); border:1px solid var(--line); border-radius:11px; position:relative; min-height:132px; transition:transform .18s, box-shadow .18s,background .25s; }.bookmark-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px #18362a12; }:root[data-theme="dark"] .bookmark-card:hover { border-color:#61887a; box-shadow:0 16px 35px #0000004d; }.bookmark-card.is-dragging { opacity:.45; transform:scale(.97); }.reorder-hint { margin:-8px 0 16px; color:var(--muted); font-size:12px; }.card-link { height:100%; min-height:132px; padding:19px; display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }.symbol { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; position:relative; background:#eaf1e8; overflow:visible; font-size:17px; font-weight:700; color:var(--forest); }:root[data-theme="dark"] .symbol { background:#29453a; }.symbol img { width:100%; height:100%; object-fit:cover; border-radius:12px; }.initial-badge { width:28px; height:28px; display:grid; place-items:center; border:2px solid var(--card); border-radius:9px; background:var(--forest); color:#fff; font:700 13px "DM Sans",sans-serif; position:absolute; inset:7px; z-index:1; }:root[data-theme="dark"] .initial-badge { color:#14251e; }.symbol.has-logo .initial-badge { width:21px; height:21px; inset:auto -7px -7px auto; border-radius:7px; font-size:11px; box-shadow:0 2px 7px #19392b2e; }.card-copy { margin-top:auto; }.card-copy h3 { font-size:16px; margin:14px 0 3px; letter-spacing:-.02em; }.card-copy p { font:11px "DM Mono",monospace; margin:0; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }.visit-arrow { position:absolute; right:19px; bottom:18px; color:var(--forest); font-size:18px; }.card-actions { position:absolute; top:10px; right:10px; display:flex; gap:3px; opacity:0; transition:opacity .18s; }.bookmark-card:hover .card-actions { opacity:1; }.edit-button,.delete-button,.pin-button { border:0; cursor:pointer; color:var(--muted); background:transparent; }.pin-button { font-size:12px; font-weight:700; padding:4px 5px; border-radius:5px; }.pin-button.is-pinned,.pin-button:hover { background:#eaf1e8; color:var(--forest); }:root[data-theme="dark"] .pin-button.is-pinned,:root[data-theme="dark"] .pin-button:hover,:root[data-theme="dark"] .edit-button:hover { background:#29453a; }.edit-button { font-size:12px; font-weight:700; padding:4px 6px; border-radius:5px; }.edit-button:hover { background:#eaf1e8; color:var(--forest); }.delete-button { width:23px; height:23px; border-radius:50%; font-size:17px; line-height:1; }.delete-button:hover { background:#eee; color:#9b3329; }
.empty-state { border:1px dashed #cdd0c6; border-radius:11px; text-align:center; padding:60px 20px; background:#fbfaf6; }.empty-icon { color:var(--forest); font-size:26px; }.empty-state h3 { margin:12px 0 5px; font-size:18px; }.empty-state p { color:var(--muted); margin:0 0 16px; }.text-button { border:0; background:transparent; color:var(--forest); font-weight:700; cursor:pointer; }.text-button span { font-size:18px; margin-left:3px; }
.bookmark-dialog { border:0; padding:0; border-radius:14px; max-width:520px; width:calc(100% - 32px); background:transparent; box-shadow:0 22px 80px #142a2180; }.bookmark-dialog::backdrop { background:#1c332b66; backdrop-filter:blur(2px); }.modal-card { background:var(--card); padding:27px; }.modal-header { display:flex; justify-content:space-between; margin-bottom:26px; }.modal-header h2 { margin:7px 0 0; letter-spacing:-.04em; }.close-button { font-size:28px; border:0; background:none; color:var(--muted); cursor:pointer; }.modal-card label { display:block; font-size:14px; font-weight:600; margin-top:16px; }.modal-card input { width:100%; margin-top:7px; padding:12px; border:1px solid #d6d9d0; border-radius:7px; outline-color:var(--forest); font-size:14px; }.optional,.hint { color:var(--muted); font-weight:400; }.hint { margin:7px 0 0; font-size:12px; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:27px; }.cancel-button { border:0; background:transparent; cursor:pointer; padding:10px; color:var(--muted); }
.import-intro { color:var(--muted); line-height:1.5; margin:0 0 18px; }.file-picker { border:1px dashed var(--forest); border-radius:9px; padding:16px; cursor:pointer; color:var(--forest); text-align:center; }.file-picker input { display:none; }.checkbox-label { display:flex !important; align-items:center; gap:9px; font-weight:500 !important; color:var(--muted); }.checkbox-label input { width:auto !important; margin:0 !important; accent-color:var(--forest); }.import-preview { margin-top:16px; padding:12px; border-radius:8px; background:#eef5eb; color:var(--forest); font-size:13px; line-height:1.5; }:root[data-theme="dark"] .import-preview { background:#29453a; color:#d8f5e4; }:root[data-theme="dark"] .import-button { background:#20342c; border-color:#466257; }
.site-suggestions { border:1px solid #d6d9d0; border-radius:7px; margin-top:7px; overflow:hidden; background:#fff; }.suggestion-label { color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.05em; padding:8px 11px 3px; }.suggestion-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; border:0; border-top:1px solid #edf0e9; padding:9px 11px; background:transparent; text-align:left; cursor:pointer; color:var(--ink); font-size:13px; }.suggestion-button:hover { background:#eef6e8; }.suggestion-button span { color:var(--muted); font:11px "DM Mono",monospace; }.google-search-link { color:var(--forest); font-weight:600; text-decoration:none; }
.modal-card select { width:100%; height:43px; margin-top:7px; padding:0 12px; border:1px solid #d6d9d0; border-radius:7px; background:#fff; color:var(--ink); outline-color:var(--forest); }.category-tag { display:inline-block; padding:3px 7px; border-radius:10px; background:#eaf1e8; color:var(--forest); font:500 9px "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }.card-copy h3 { margin-top:8px; }
:root[data-theme="dark"] .add-button,:root[data-theme="dark"] .save-button { background:var(--lime); color:#14251e; box-shadow:0 8px 20px #0000003d; }:root[data-theme="dark"] .add-button span { color:#14251e; }:root[data-theme="dark"] .add-button:hover,:root[data-theme="dark"] .save-button:hover { background:#ecff9a; transform:translateY(-1px); }
@media (max-width:650px) { .page-shell { padding:22px 18px 45px; }.topbar { align-items:flex-start; gap:14px; }.topbar-actions { align-items:flex-end; flex-direction:column; }.account-menu { flex-direction:column; align-items:flex-end; }.hero { padding:70px 0 54px; }.seo-content { grid-template-columns:1fr; gap:20px; padding-bottom:56px; }.how-it-works { padding:45px 0 54px; }.steps-grid { grid-template-columns:1fr; }.site-footer { padding:22px 18px; }.section-heading { align-items:start; flex-direction:column; }.collection-actions { width:100%; }.collection-actions button { flex:1; }.controls { flex-direction:column; }.controls select { height:43px; }.bookmark-grid { grid-template-columns:1fr; }.card-actions { opacity:1; } }