:root{
  --ink:#23311a;
  --line:#d6ddcd;
  --line-strong:#aab79a;
  --muted:#8a957f;
  --faint:#f3f6ee;
  --paper:#ffffff;
  --bg:#e7ebe0;
  --accent:#3B6D11;        /* deep brand green — primary */
  --accent-bright:#639922; /* bright brand green */
  --accent-deep:#275008;   /* deepest green */
  --accent-light:#C0DD97;  /* light green */
  --accent-soft:#eaf2dd;   /* soft green tint */
  --sans:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.4}
a{color:inherit}

/* placeholder thumbnail */
.ph{background:repeating-linear-gradient(45deg,#eef3e6 0 9px,#e6ecdb 9px 18px);display:grid;place-items:center;position:relative;color:#b3c19c;overflow:hidden}
.ph svg{width:34px;height:34px;opacity:.85}
.ph .phtag{position:absolute;bottom:6px;left:7px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#aab792}

/* badges */
.badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.badge.pub{background:var(--accent-soft);color:var(--accent-deep);border:1px solid #c4d8a6}
.badge.priv{background:#eef0ea;color:#8a957f;border:1px solid var(--line)}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor}

.menubtn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;color:#5f6a54;line-height:0;padding:0}
.menubtn:hover{border-color:var(--accent);color:var(--accent)}
.menubtn svg{width:16px;height:16px}

.wbtn{font:inherit;font-size:13px;border:1px solid var(--accent);background:var(--accent);color:#fff;padding:9px 16px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:500}
.wbtn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.wbtn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.wbtn.ghost:hover{background:var(--faint);border-color:var(--line-strong)}
.wbtn.danger{background:#fff;color:#b23b3b;border-color:#e3b4b4}
.wbtn.danger:hover{background:#fdf3f3;border-color:#e3b4b4}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.field .inp{border:1.5px solid var(--line-strong);border-radius:8px;padding:11px 13px;background:#fcfdfb;color:var(--ink);font-size:14px;font-family:var(--sans);width:100%}
.field .inp:focus{outline:none;border-color:var(--accent)}

.searchwire{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:9px;padding:8px 13px;color:var(--muted);background:#fcfdfb;font-size:13px}
.searchwire svg{width:15px;height:15px;flex:none}
.searchwire input{border:0;background:transparent;outline:none;font:inherit;font-size:13px;color:var(--ink);width:100%}

/* =========== LOGIN (centered card) =========== */
.login{min-height:100vh;display:grid;place-items:center;padding:44px;background:radial-gradient(120% 80% at 50% 0%, #f8fbf3 0%, #eaf0e0 100%)}
.login .card{width:392px;max-width:100%;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:34px 34px 30px;box-shadow:0 26px 56px -28px rgba(30,55,10,.38);display:flex;flex-direction:column;gap:17px}
.login .logo-full{width:188px;margin:2px auto 6px;display:block}
.login .seam{height:1px;background:var(--line);margin:2px 0}
.login .err{font-size:12.5px;color:#b23b3b;background:#fdf3f3;border:1px solid #e3b4b4;border-radius:8px;padding:8px 11px;text-align:center}

/* =========== DASHBOARD =========== */
.dhead{display:flex;align-items:center;gap:18px;padding:16px 26px;border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:30}
.logo-lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-lockup .logo-mark{width:34px;height:40px;display:block}
.logo-lockup .wm{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--accent);letter-spacing:-.01em}
.dhead .searchwire{flex:1;max-width:380px}
.dhead .spacer{flex:1}
.avatar{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--faint)}

.sectionrow{display:flex;align-items:baseline;justify-content:space-between;padding:22px 26px 8px;gap:16px;max-width:1240px;margin:0 auto;width:100%}
.sectionrow h2{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.filters{display:flex;gap:7px}
.chip{font-size:12px;border:1px solid var(--line);background:#fafcf7;border-radius:20px;padding:5px 13px;color:#6a7560;cursor:pointer}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}

.grid{display:grid;gap:22px;padding:14px 26px 36px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;max-width:1240px;margin:0 auto;width:100%}
@media(max-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}
.mcard{display:flex;flex-direction:column;gap:10px}
.mcard .thumb{position:relative;border:1px solid var(--line);border-radius:11px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;background:#fff}
.mcard .thumb .ph{position:absolute;inset:0}
.mcard .thumb .menubtn{position:absolute;top:9px;right:9px}
.mcard .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mcard .meta .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mcard .meta .t{font-size:14px;font-weight:500;letter-spacing:-.005em;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.mcard .meta .d{font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mcard .meta .badge{margin-top:1px}
.empty{max-width:1240px;margin:0 auto;padding:40px 26px;color:var(--muted);font-size:14px;text-align:center}
.empty code{font-family:var(--mono);font-size:12.5px;background:var(--faint);border:1px solid var(--line);border-radius:6px;padding:2px 6px}

/* =========== SETTINGS MODAL =========== */
.modal-overlay{position:fixed;inset:0;z-index:60;background:rgba(25,40,10,.42);display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(2px)}
.modal-overlay.on{display:flex}
.modal{width:420px;max-width:100%;background:var(--paper);border-radius:16px;box-shadow:0 30px 80px -20px rgba(20,40,5,.5);overflow:hidden;animation:pop .18s ease}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal .label{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.modal .mhead{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line)}
.modal .mhead .pthumb{width:50px;height:50px;border-radius:9px;border:1px solid var(--line);flex:none;overflow:hidden}
.modal .mhead .htxt h3{font-family:var(--serif);font-size:18px;font-weight:600}
.modal .mhead .htxt .label{margin-top:3px;display:block}
.modal .mhead .x{margin-left:auto;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;padding:0 2px}
.modal .mbody{padding:20px 22px;display:flex;flex-direction:column;gap:18px}
.field .hintline{font-size:11px;color:var(--muted)}
.vis-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--line);border-radius:11px}
.vis-row .vtxt strong{font-size:13.5px;display:block}
.vis-row .vtxt small{font-size:12px;color:var(--muted)}
.share-row{display:none;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--faint)}
.share-row.on{display:flex}
.share-row .label{display:block}
.share-row .sharewrap{display:flex;gap:8px}
.share-row input{flex:1;border:1.5px solid var(--line-strong);border-radius:8px;padding:8px 11px;background:#fff;color:var(--ink);font-family:var(--mono);font-size:12px}
.danger-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.danger-row strong{font-size:13.5px;color:#b23b3b}
.danger-row small{font-size:12px;color:var(--muted);max-width:230px;display:block;margin-top:3px}
.modal .mfoot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--line);background:var(--faint)}
.bigtoggle{appearance:none;width:46px;height:26px;border-radius:14px;background:#c6cdb9;border:1px solid var(--line);position:relative;cursor:pointer;flex:none;transition:background .15s}
.bigtoggle::after{content:"";position:absolute;top:1px;left:1px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.bigtoggle:checked{background:var(--accent)}
.bigtoggle:checked::after{transform:translateX(20px)}