:root {
    --ink:#241a12; --muted:#6b5b4d; --line:#e7dcc9; --accent:#8f2d1e; --accent-dark:#6e2116;
    --bg:#faf3e8; --card:#fff; --ok:#2f7a3d; --warn:#8f2d1e;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); }
.wrap { max-width: 760px; margin:0 auto; padding: 28px 20px 64px; }
.wrap.narrow { max-width: 420px; padding-top: 60px; }
h1, h2 { line-height:1.25; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:18px; }
label { display:block; font-size:0.85rem; color:var(--muted); margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=url], textarea {
    width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit;
}
textarea { resize: vertical; }
button, .btn {
    display:inline-block; background:var(--accent); color:#fff; border:none; padding:10px 18px;
    border-radius:8px; cursor:pointer; font-weight:600; text-decoration:none; font:inherit;
}
button:hover, .btn:hover { background:var(--accent-dark); }
button.secondary, .btn.secondary { background:transparent; color:var(--ink); border:1px solid var(--line); }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:0.9rem; }
.flash.error { background:#fde8e4; color:var(--warn); }
.flash.ok { background:#e6f4e8; color:var(--ok); }
.top-nav { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.top-nav a { margin-left:16px; font-weight:600; text-decoration:none; color:var(--ink); }
.top-nav .save-btn { margin-left:16px; padding:8px 18px; }
.copy-link-btn.copied { background:var(--ok) !important; }
.thumb { width:120px; height:80px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block; margin-bottom:8px; }
.inline { display:flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--muted); margin-top:6px; }
.section-title { margin-top: 28px; }
hr.sep { border:none; border-top:1px solid var(--line); margin:20px 0; }

.side-nav {
    position:fixed; top:80px; right:16px; width:200px; max-height:calc(100vh - 100px);
    overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:10px;
    padding:14px; box-shadow:0 2px 10px rgba(0,0,0,.08); z-index:90;
}
.side-nav-head { font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:8px; font-weight:700; cursor:pointer; user-select:none; }
.side-nav-head .chev { display:none; }
.side-nav a { display:block; padding:5px 0; font-size:.83rem; text-decoration:none; color:var(--ink); border-left:2px solid transparent; padding-left:8px; }
.side-nav a:hover { color:var(--accent); }
.side-nav a.active { border-left-color:var(--accent); color:var(--accent); font-weight:600; }
/* On narrower windows (like a half-screen browser) the panel collapses to a small "Jump to" tab you click to open. */
@media (max-width: 1150px) {
    .side-nav { width:160px; padding:10px 12px; }
    .side-nav-head { margin-bottom:0; }
    .side-nav-head .chev { display:inline; }
    .side-nav a { display:none; }
    .side-nav.open a { display:block; }
    .side-nav.open .side-nav-head { margin-bottom:8px; }
}