:root {
  --bg:#F8F6F3; --bg-soft:#FDFCFB; --ink:#1C1A18; --ink-soft:#7A7572;
  --line:#D0CAC5; --accent:#C98B87; --ok:#7a9e7e; --err:#b85c5c;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.5; min-height:100vh; }
a { color:var(--ink); }

.topbar { display:flex; justify-content:space-between; align-items:center; padding:18px 28px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.logo { display:flex; align-items:baseline; gap:2px; text-decoration:none; }
.logo-name { font-family:'Playfair Display',serif; font-style:italic; font-weight:600; font-size:22px; color:var(--ink); letter-spacing:-0.01em; }
.logo:hover .logo-name { opacity:0.8; }
.logo-tld { font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
#topnav a, #topnav button { font-size:11px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); margin-left:18px; background:none; border:none; cursor:pointer; }
#topnav a:hover, #topnav button:hover { color:var(--ink); }

.container { max-width:860px; margin:0 auto; padding:48px 24px 80px; }
.loading { text-align:center; padding:80px 0; color:var(--ink-soft); font-size:13px; letter-spacing:.2em; text-transform:uppercase; }

h1 { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:36px; margin-bottom:24px; }
h2 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:24px; margin-bottom:16px; }

.card { background:var(--bg-soft); border:1px solid var(--line); padding:32px; margin-bottom:24px; }
.card h2 { margin-bottom:8px; }
.muted { color:var(--ink-soft); font-size:13px; }

.field { display:flex; flex-direction:column; margin-bottom:16px; }
.field label { font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:6px; color:var(--ink-soft); }
.field input, .field textarea, .field select {
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:8px 0; font-family:inherit; font-size:14px; color:var(--ink);
}
.field input:focus, .field textarea:focus { outline:none; border-bottom-color:var(--ink); }
.field textarea { resize:vertical; min-height:60px; }
.field-hint { font-size:11px; color:var(--ink-soft); margin-top:4px; }

.btn { display:inline-block; padding:12px 22px; background:var(--ink); color:var(--bg); border:1px solid var(--ink); font-size:11px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; text-decoration:none; font-family:inherit; }
.btn:hover { background:transparent; color:var(--ink); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--bg); }
.btn-small { padding:8px 14px; font-size:10px; }
.btn-row { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }

/* ---- Template Gallery (Stitch design) ---- */
.gallery-header { margin-bottom:40px; }
.gallery-title { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:40px; font-weight:500; color:var(--ink); margin-bottom:8px; }
.gallery-subtitle { font-size:14px; color:var(--ink-soft); max-width:480px; line-height:1.6; }

.tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:24px; margin-bottom:40px; }
.container:has(.tpl-grid) { max-width:1100px; }

.tpl-card { cursor:pointer; display:flex; flex-direction:column; gap:10px; outline:none; }
.tpl-card:focus-visible .tpl-preview { box-shadow:0 0 0 2px var(--accent); }

.tpl-preview {
  position:relative; aspect-ratio:3/4; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.4s ease;
}
.tpl-card:hover .tpl-preview { transform:scale(1.01); }
.tpl-preview--0 { background:#F5EEE4; }
.tpl-preview--1 { background:#F0F0EE; border:1px solid #E0DEDA; }
.tpl-preview--2 { background:#F5ECE9; }
.tpl-preview--3 { background:#EEE8DF; }

.tpl-preview-name {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:20px; font-weight:500; color:var(--ink);
  text-align:center; padding:0 20px; line-height:1.4;
}
.tpl-preview-hover {
  position:absolute; inset:0;
  background:rgba(248,246,243,0.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.2s ease;
}
.tpl-card:hover .tpl-preview-hover { opacity:1; }
.tpl-card.selected .tpl-preview { outline:2px solid var(--ink); outline-offset:-2px; }
.tpl-card.selected .tpl-preview-hover { opacity:1; }

.tpl-select-hint {
  background:var(--ink); color:var(--bg);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 28px;
}
.tpl-card.selected .tpl-select-hint {
  background:var(--accent);
}
.tpl-card.selected .tpl-select-hint::before { content:"✓  "; }

.tpl-meta { display:flex; justify-content:space-between; align-items:center; }
.tpl-name { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:500; color:var(--ink); }
.tpl-tag { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }

.gallery-actions { padding-top:8px; border-top:1px solid var(--line); margin-top:0; }

.invite-row { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); gap:12px; }
.invite-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.btn-danger { background:transparent; color:var(--err); border-color:var(--err); }
.btn-danger:hover { background:var(--err); color:#fff; }
.invite-row:last-child { border-bottom:none; }
.invite-id { font-family:monospace; font-size:13px; }
.invite-names { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; }
.invite-meta { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px; }
.badge { display:inline-block; padding:2px 8px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--line); color:var(--ink-soft); margin-left:8px; }
.badge.ok { color:var(--ok); border-color:var(--ok); }
.badge.warn { color:var(--err); border-color:var(--err); }

.share-link { background:var(--bg); padding:12px 16px; border:1px dashed var(--line); font-family:monospace; font-size:13px; word-break:break-all; }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:12px 24px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:0; transition:all 0.2s; pointer-events:none; z-index:100; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--err); }

.auth-card { max-width:380px; margin:64px auto 0; }

/* ---- Edit view: split layout ---- */
.edit-layout { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:24px; align-items:start; }
.edit-form-col, .edit-preview-col { min-width:0; }
.edit-preview-col { position:sticky; top:24px; }

.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-header h2 { margin-bottom:0; }
.save-status { font-size:11px; letter-spacing:.16em; text-transform:uppercase; }

.preview-toolbar { display:flex; gap:8px; align-items:center; padding:10px 12px; background:var(--bg-soft); border:1px solid var(--line); border-bottom:none; }
.btn-tab { background:transparent; border:1px solid transparent; padding:6px 12px; font-family:inherit; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; }
.btn-tab:hover { color:var(--ink); }
.btn-tab.active { color:var(--ink); border-color:var(--line); background:var(--bg); }
.preview-frame-wrap { background:var(--bg); border:1px solid var(--line); height:calc(100vh - 200px); min-height:560px; }
#preview-frame { width:100%; height:100%; border:none; display:block; background:var(--bg); }

/* Override container width for the edit view to give the preview room */
.container:has(.edit-layout) { max-width:1280px; }

@media (max-width: 900px) {
  .edit-layout { grid-template-columns: 1fr; }
  .edit-preview-col { position:static; }
  .preview-frame-wrap { height:560px; }
}