:root {
  --bg:#f7f2e8; --bg2:#efe7d7; --panel:#fffdf8; --panel2:#f3ecdd;
  --ink:#2a2017; --ink-soft:#4a3c2c; --muted:#8a7860;
  --gold:#b8863a; --gold-2:#8a5e20; --gold-soft:#e3c486; --rose:#b5705a;
  --line:#e6dcc7; --line-2:#d8c8ac;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow:0 16px 44px rgba(80,55,20,.14);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--ink); font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  background:radial-gradient(150% 90% at 50% -10%, #fffdf6 0%, var(--bg) 60%), var(--bg);
  background-attachment:fixed;
}
::selection { background:var(--gold); color:#fffdf8; }
a { color:var(--gold-2); text-decoration:none; }

.display { font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:.2px; color:var(--ink); }
.eyebrow { font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-2); margin:0 0 14px; }

/* ---------- top nav ---------- */
.topnav {
  position:sticky; top:0; z-index:15; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 28px; background:rgba(247,242,232,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand { font-family:var(--serif); font-weight:600; letter-spacing:.02em; color:var(--ink); }
.topnav .brand.sm { font-size:24px; cursor:pointer; }
.nav-right { display:flex; align-items:center; gap:18px; }
.navlinks { display:flex; align-items:center; gap:20px; }
.link { background:none; border:none; color:var(--muted); cursor:pointer; font-family:var(--sans);
  font-size:13px; letter-spacing:.06em; padding:6px 2px; position:relative; transition:color .2s; }
.link:hover { color:var(--ink); }
.link.active { color:var(--gold-2); }
.link.active::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--gold); }
.who { color:var(--gold-2); font-size:13px; letter-spacing:.05em; }
.upload-btn { padding:8px 16px; border:1px solid var(--line-2); border-radius:30px; color:var(--ink);
  cursor:pointer; font-size:13px; letter-spacing:.05em; transition:all .2s; }
.upload-btn:hover { border-color:var(--gold); color:var(--gold-2); background:#fff; }

.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px;
  background:none; border:1px solid var(--line-2); border-radius:10px; cursor:pointer; padding:0 11px; }
.hamburger span { display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .25s,opacity .2s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.shuffle { padding:0 22px; height:52px; border-radius:40px; border:1px solid var(--gold);
  background:transparent; color:var(--gold-2); cursor:pointer; font-family:var(--sans); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; transition:all .2s; }
.shuffle:hover { background:var(--gold); color:#fffdf8; }
.shuffle:active { transform:scale(.97); }

/* ---------- search toolbar (compact) ---------- */
#hero { padding:14px 22px 6px; max-width:1600px; margin:0 auto; }
.searchbar { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
#q { flex:1; min-width:220px; padding:12px 18px; border-radius:40px; border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink); font-family:var(--sans); font-size:14.5px; transition:border-color .2s,box-shadow .2s; }
#q::placeholder { color:#a89a82; }
#q:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(184,134,58,.14); }
select { padding:0 14px; height:44px; border-radius:40px; border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink); font-family:var(--sans); font-size:13.5px; cursor:pointer; }
select:focus { outline:none; border-color:var(--gold); }
.shuffle { height:44px; }
.stat { color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:8px 2px 0; }

/* ---------- grid ---------- */
main { max-width:1600px; margin:0 auto; padding:6px 22px 70px; }
.status { color:var(--muted); min-height:18px; font-size:12px; letter-spacing:.05em; margin:10px 2px 14px; text-transform:uppercase; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  cursor:pointer; transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s; position:relative; }
.card:hover { transform:translateY(-5px); border-color:var(--gold); box-shadow:var(--shadow); }
.card .ph { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#ece2cf; transition:transform .5s ease; }
.card:hover .ph { transform:scale(1.05); }
.card .ph.broken { display:flex; align-items:center; justify-content:center; color:#b0a085; font-size:11px; }
.card .b { padding:13px 15px 15px; }
.card h3 { font-family:var(--serif); font-weight:600; font-size:18px; line-height:1.25; margin:0 0 5px; }
.card p { font-size:11px; color:var(--muted); margin:0; letter-spacing:.06em; text-transform:uppercase; }
.more { display:block; margin:40px auto; padding:13px 38px; border-radius:40px; border:1px solid var(--gold);
  background:transparent; color:var(--gold-2); cursor:pointer; font-family:var(--sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase; transition:all .2s; }
.more:hover { background:var(--gold); color:#fffdf8; }

/* ---------- saved-design cards ---------- */
.card.saved .pair { display:grid; grid-template-columns:1fr 1.4fr; gap:2px; background:#ece2cf; }
.card.saved .pair img { width:100%; height:150px; object-fit:cover; display:block; cursor:zoom-in; }
.card.saved .pair .ref { border-right:1px solid var(--line); position:relative; }
.card.saved .pair .ref::after { content:"SOURCE"; position:absolute; left:6px; top:6px; font-size:8px; letter-spacing:.15em;
  background:rgba(42,32,23,.72); color:#f3e4c4; padding:2px 6px; border-radius:4px; }
.card .del { position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; border-radius:50%;
  border:none; background:rgba(42,32,23,.66); color:#fff; font-size:19px; cursor:pointer; line-height:1;
  opacity:0; transition:opacity .2s,background .2s; }
.card:hover .del { opacity:1; }
.card .del:hover { background:var(--rose); }

/* ---------- login ---------- */
.login { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 90% at 50% 0%, #fffdf6, var(--bg) 60%); }
.login-card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:44px 38px;
  width:360px; max-width:100%; display:flex; flex-direction:column; gap:14px; text-align:center; box-shadow:var(--shadow); }
.login-card .brand { font-size:38px; }
.login-card .hint { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--muted); margin:-6px 0 10px; }
.login-card input { padding:13px 16px; border-radius:10px; border:1px solid var(--line-2); background:#fff;
  color:var(--ink); font-family:var(--sans); font-size:15px; }
.login-card input:focus { outline:none; border-color:var(--gold); }
.login-card button { padding:14px; border:none; border-radius:10px; background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#3a2a12; font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:filter .2s; }
.login-card button:hover { filter:brightness(1.05); }
.login-card .err { color:#c0533f; font-size:13px; min-height:16px; margin:0; }

/* ---------- modal ---------- */
.modal { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(40,30,18,.42); backdrop-filter:blur(6px); }
.modal-card { background:var(--panel); border:1px solid var(--line); border-radius:18px; max-width:1080px; width:100%;
  max-height:92vh; overflow:auto; position:relative; box-shadow:var(--shadow); }
.close { position:absolute; top:12px; right:16px; z-index:3; background:rgba(42,32,23,.6); border:none; color:#fff;
  width:40px; height:40px; border-radius:50%; font-size:24px; line-height:1; cursor:pointer; transition:background .2s; }
.close:hover { background:var(--rose); }
.modal-body { display:grid; grid-template-columns:1fr 1fr; }
.src { padding:30px; border-right:1px solid var(--line); }
.src-img-wrap { border-radius:12px; overflow:hidden; background:#ece2cf; border:1px solid var(--line); cursor:zoom-in; }
.src img { width:100%; max-height:380px; object-fit:contain; display:block; }
.src img.broken { min-height:200px; }
.src h2 { font-family:var(--serif); font-weight:600; font-size:26px; margin:18px 0 8px; line-height:1.15; }
.meta { color:var(--gold-2); margin:0 0 6px; font-size:13px; letter-spacing:.04em; }
.medium { color:var(--muted); font-size:13px; margin:3px 0; }
.studio { padding:30px; }
.studio .display { font-size:30px; margin:2px 0 6px; }
.hint { color:var(--muted); font-size:13.5px; margin:0 0 18px; }
.studio label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--gold-2); margin:18px 0 9px; }
.studio select { width:100%; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip { padding:8px 16px; border:1px solid var(--line-2); border-radius:30px; cursor:pointer; font-size:13px;
  letter-spacing:.03em; user-select:none; transition:all .2s; text-transform:capitalize; color:var(--ink-soft); }
.chip:hover { border-color:var(--gold); }
.chip.on { background:var(--gold); color:#fffdf8; border-color:var(--gold); }
input[type=range] { width:100%; accent-color:var(--gold); margin-top:4px; }
#g-cw-val { color:var(--gold-2); font-weight:500; }
#g-go { margin-top:24px; width:100%; padding:15px; border:none; border-radius:12px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#3a2a12; font-family:var(--sans);
  font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:filter .2s; }
#g-go:hover { filter:brightness(1.05); }
#g-go:disabled { opacity:.5; cursor:default; filter:none; }
.result { margin-top:18px; }
.result img { width:100%; border-radius:12px; border:1px solid var(--line); cursor:zoom-in; }
.result .spin { color:var(--muted); padding:26px 0; text-align:center; font-family:var(--serif); font-style:italic; font-size:18px; }
.result a.dl { display:inline-block; margin-top:10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.danger-btn { display:block; width:100%; margin-top:18px; padding:12px; border:1px solid var(--rose);
  border-radius:10px; background:transparent; color:var(--rose); font-family:var(--sans); font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.danger-btn:hover { background:var(--rose); color:#fff; }
#s-sheet { cursor:zoom-in; }

/* ---------- lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:40; background:rgba(24,18,10,.94);
  display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.lightbox img { max-width:100vw; max-height:100vh; transform-origin:center center; will-change:transform;
  user-select:none; -webkit-user-drag:none; cursor:zoom-in; }
.lightbox.zoomed img { cursor:grab; }
.lb-close { position:fixed; top:16px; right:18px; z-index:2; width:48px; height:48px; border-radius:50%;
  border:none; background:rgba(255,255,255,.14); color:#fff; font-size:28px; line-height:1; cursor:pointer; transition:background .2s; }
.lb-close:hover { background:var(--rose); }
.lb-hint { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); color:#e9ddc4;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,.35); padding:7px 16px; border-radius:30px; pointer-events:none; }

/* ---------- install banner ---------- */
.install { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:35;
  display:flex; align-items:center; gap:14px; width:min(440px,calc(100% - 28px));
  background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow); }
.install-ic { width:46px; height:46px; border-radius:12px; flex:none; }
.install-txt { display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; }
.install-txt strong { font-family:var(--serif); font-weight:600; font-size:17px; }
.install-txt span { font-size:12.5px; color:var(--muted); }
.install-btn { flex:none; padding:10px 18px; border:none; border-radius:24px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#3a2a12; font-family:var(--sans);
  font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.install-x { flex:none; background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; line-height:1; padding:0 4px; }

/* ---------- mobile ---------- */
@media (max-width:760px) {
  .topnav { padding:11px 13px; }
  .topnav .brand.sm { font-size:20px; }
  .nav-right { gap:11px; }
  .nav-main { font-size:13px; }
  .hamburger { display:flex; width:38px; height:38px; padding:0 9px; }
  .navlinks {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:16;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:6px 18px 16px;
  }
  .navlinks.open { display:flex; }
  .navlinks .link { padding:16px 2px; font-size:16px; text-align:left; border-bottom:1px solid var(--line); letter-spacing:.04em; }
  .navlinks .link.active::after { display:none; }
  .navlinks .upload-btn { margin:14px 0 4px; text-align:center; padding:14px; font-size:15px; }
  .who { display:block; padding:14px 2px 4px; border-bottom:1px solid var(--line); }
  .upload-btn { padding:7px 12px; font-size:12px; }       /* always-visible CTA, compact */
  #hero { padding:10px 14px 4px; }
  .searchbar { gap:7px; }
  #q { min-width:100%; flex-basis:100%; padding:11px 16px; }
  select { flex:1 1 calc(50% - 4px); min-width:0; height:42px; font-size:13px; }   /* two filters per row */
  .shuffle { flex-basis:100%; height:42px; }
  .stat { font-size:11px; margin:6px 2px 0; }
  main { padding:2px 12px 60px; }
  .grid { gap:10px; grid-template-columns:repeat(2,1fr); }
  .card .b { padding:10px 11px 12px; }
  .card h3 { font-size:15px; }
  .card .del { opacity:1; width:36px; height:36px; font-size:22px; }
  .modal { padding:0; }
  .modal-card { border-radius:0; max-height:100vh; height:100vh; }
  .modal-body { grid-template-columns:1fr; }
  .src { border-right:none; border-bottom:1px solid var(--line); padding:24px 20px; }
  .studio { padding:24px 20px; }
  /* bigger tap-friendly close buttons */
  .close { width:54px; height:54px; font-size:32px; top:10px; right:10px; }
  .lb-close { width:56px; height:56px; font-size:32px; top:12px; right:12px; }
}
@media (max-width:420px){
  .navlinks .link{ font-size:15px; }
  .topnav { padding:10px 11px; }
  .topnav .brand.sm { font-size:18px; }
  .nav-right { gap:9px; }
  .nav-main { font-size:12px; }
  .upload-btn { padding:6px 9px; }
  .upload-btn .ub-txt { display:none; }   /* collapse to "＋" on very narrow screens */
}