:root{
  --bg: oklch(0.984 0.003 270);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.968 0.004 275);
  --ink: oklch(0.23 0.012 278);
  --ink-soft: oklch(0.44 0.012 278);
  --ink-faint: oklch(0.52 0.012 278);
  --line: oklch(0.912 0.005 278);
  --line-strong: oklch(0.84 0.006 278);
  --header: oklch(0.205 0.014 280);
  --header-soft: oklch(0.72 0.010 280);
  --accent: oklch(0.62 0.062 150);
  --accent-ink: oklch(0.44 0.052 152);
  --accent-wash: oklch(0.62 0.062 150 / 0.12);
  --accent-line: oklch(0.62 0.062 150 / 0.34);
  --leaf: oklch(0.66 0.07 150);
  --leaf-soft: oklch(0.78 0.05 150);
  --blush: oklch(0.88 0.035 14);
  --cream: oklch(0.978 0.012 92);
  --danger: oklch(0.52 0.14 27);
  --danger-wash: oklch(0.55 0.13 27 / 0.10);

  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;
  --r-xs: 7px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --nav-w: 252px;
  --maxw: 1080px;

  --z-sticky: 100;
  --z-toast: 600;

  --shadow-soft: 0 1px 2px oklch(0.2 0.02 280 / 0.04), 0 8px 24px oklch(0.2 0.02 280 / 0.05);

  /* elegant kalligrafi til header (Ø/å/æ dekkes; faller tilbake til serif) */
  --script: "Pinyon Script", "Great Vibes", "Cormorant", Georgia, serif;
  /* enkel, ren tallskrift */
  --num: "Inter", system-ui, -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; font-weight:400; }
button{ font-family: inherit; color: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }
a{ color: var(--accent-ink); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 2px; }
::placeholder{ color: var(--ink-faint); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.serif{ font-family: "Cormorant", Georgia, serif; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Header ---------- */
.site-header{
  width: 100%;
  background:
    radial-gradient(130% 100% at 50% -10%, var(--cream), transparent 62%),
    var(--surface);
  color: var(--ink);
  padding: clamp(26px, 4.4vw, 44px) 20px clamp(22px, 3.8vw, 34px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.site-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
/* eukalyptuskvister i hjørnene */
.hdr-sprig{
  position:absolute; top:-6px; width: clamp(96px, 19vw, 188px); height:auto;
  color: var(--leaf); opacity:0.9; pointer-events:none; z-index:0;
}
.hdr-sprig svg{ width:100%; height:auto; display:block; }
.hdr-sprig-l{ left:-10px; }
.hdr-sprig-r{ right:-10px; transform: scaleX(-1); }
.site-header > .monogram,
.site-header > .header-sub,
.site-header > .header-names{ position:relative; z-index:1; }
@media (max-width: 520px){ .hdr-sprig{ opacity:0.7; width: 96px; } }
.monogram{
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 5.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  gap: clamp(12px, 3.4vw, 26px);
}
.monogram .heart{ width: clamp(20px, 5vw, 30px); height: auto; color: var(--accent); flex: none; transform: translateY(2px); }
.monogram .heart svg{ width:100%; height:100%; display:block; }
.header-sub{
  margin-top: 12px;
  font-weight: 400;
  font-size: clamp(0.72rem, 2.6vw, 0.86rem);
  letter-spacing: 0.34em;
  color: var(--accent-ink);
  padding-left: 0.34em;
}
.header-names{
  margin-top: 8px;
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.5rem, 4.6vw, 2.3rem);
  line-height: 1.1;
  color: var(--accent-ink);
  letter-spacing: 0.01em;
}

/* ---------- Tab navigation ---------- */
.navwrap{
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: oklch(0.984 0.003 270 / 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.tabbar{
  display:flex; gap: 2px; align-items: stretch;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(8px, 3vw, 24px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar{ display:none; }
.tab{
  display:inline-flex; align-items:center; gap: 8px;
  flex: 0 0 auto;
  background: transparent; border: 0;
  padding: 15px 14px 13px;
  color: var(--ink-soft);
  font-size: 0.92rem; font-weight: 400; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease-soft), border-color .2s var(--ease-soft);
}
.tab i{ width: 16px; height: 16px; flex:none; }
.tab:hover{ color: var(--ink); }
.tab.active{ color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.tab.active i{ color: var(--accent-ink); }

.subbar{
  display:flex; gap: 7px; align-items:center;
  max-width: var(--maxw); margin: 0 auto;
  padding: 10px clamp(8px, 3vw, 24px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
  background: oklch(0.968 0.004 275 / 0.6);
}
.subbar::-webkit-scrollbar{ display:none; }
.subtab{
  flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap;
  transition: background .15s var(--ease-soft), color .15s, border-color .15s;
}
.subtab:hover{ border-color: var(--ink-faint); color: var(--ink); }
.subtab.active{ background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); font-weight: 500; }

.content{
  min-width: 0;
  padding: clamp(20px, 3.4vw, 40px) clamp(16px, 3.2vw, 44px) 120px;
}
.page{ max-width: var(--maxw); margin: 0 auto; }

/* ---------- Section heads ---------- */
.page-head{ margin-bottom: 26px; }
.page-head h2{
  font-family:"Cormorant", serif;
  font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.page-head p{ margin: 8px 0 0; color: var(--ink-soft); font-weight: 300; max-width: 64ch; }

.subhead{
  display:flex; align-items:center; gap:10px;
  margin: 34px 0 14px;
  color: var(--ink);
}
.subhead:first-of-type{ margin-top: 4px; }
.subhead i{ width:17px; height:17px; color: var(--accent-ink); }
.subhead h3{ font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em; }
.subhead .rule{ flex:1; height:1px; background: var(--line); }
.subhead .count{ font-size: 0.78rem; color: var(--ink-faint); }

/* ---------- Panels & rows ---------- */
.panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.row{
  display:flex; align-items:center; gap: 14px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.row:first-child{ border-top: 0; }
.row .grow{ flex:1; min-width:0; }
.row .title{ font-weight: 400; }
.row .sub{ font-size: 0.8rem; color: var(--ink-soft); }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Status pill (visning, ikke redigering) ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-size: 0.8rem;
  white-space:nowrap;
}
.pill i{ width:14px; height:14px; }
.pill.is-done{ background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); }
.pill.is-prog{ background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.pill.is-yes{ background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); }
.pill.is-no{ background: var(--danger-wash); border-color: oklch(0.55 0.13 27 / 0.3); color: var(--danger); }
.pill.is-maybe{ background: var(--surface-2); color: var(--ink); }

/* ---------- Status-velger (rask redigering) ---------- */
.status-sel{
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--line-strong); border-radius:999px;
  padding: 6px 30px 6px 13px; font-size: 0.8rem; font-weight: 500; color: var(--ink);
  outline:none; cursor:pointer; white-space:nowrap;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23808492' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 10px center;
  transition: border-color .15s, background-color .15s, color .15s;
}
.status-sel:hover{ border-color: var(--ink-faint); }
.status-sel:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.status-sel[data-tone="yes"]{ background-color: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); }
.status-sel[data-tone="no"]{ background-color: var(--danger-wash); border-color: oklch(0.55 0.13 27 / 0.32); color: var(--danger); }
.status-sel[data-tone="prog"]{ background-color: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.status-sel[data-tone="muted"]{ background-color: var(--surface); border-color: var(--line-strong); color: var(--ink-soft); }

/* ---------- Progress ---------- */
.progress{ height: 6px; border-radius: 999px; background: var(--surface-2); overflow:hidden; }
.progress > span{ display:block; height:100%; background: var(--accent); border-radius:999px; transition: width .6s var(--ease); }

/* ---------- Hero (forside) ---------- */
.hero{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 5vw, 46px) clamp(20px, 4vw, 40px);
  text-align: center;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.hero::before{
  content:""; position:absolute; inset:0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
.hero-eyebrow{
  font-size: 0.74rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 500; padding-left: 0.32em;
}
.hero-count{
  display:flex; align-items: baseline; justify-content:center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px;
}
.hero-count .num{
  font-family:"Cormorant", serif; font-weight: 300;
  font-size: clamp(3.6rem, 13vw, 6.4rem); line-height: 0.84; letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-count .lbl{ font-weight: 300; color: var(--ink-soft); font-size: 1.05rem; }
.hero-div{ width: 54px; height:1px; background: var(--line-strong); margin: 20px auto 16px; }
.hero-meta{
  display:flex; align-items:center; justify-content:center; gap: 10px 22px; flex-wrap: wrap;
  color: var(--ink-soft); font-size: 0.92rem;
}
.hero-meta span{ display:inline-flex; align-items:center; gap: 8px; }
.hero-meta i{ width:15px; height:15px; color: var(--accent-ink); flex:none; }
.hero-meta b{ font-weight: 500; color: var(--ink); }
.hero-sprig{
  position:absolute; top:10px; width: clamp(70px, 12vw, 116px); height:auto;
  color: var(--leaf-soft); opacity:0.85; pointer-events:none;
}
.hero-sprig svg{ width:100%; height:auto; display:block; }
.hero-sprig.l{ left:10px; }
.hero-sprig.r{ right:10px; transform: scaleX(-1); }
.hero > *{ position:relative; z-index:1; }
@media (max-width: 560px){ .hero-sprig{ display:none; } }

/* line-art motiver (skåler, ringer, hjerte, due) */
.motif{ color: var(--accent-ink); display:inline-flex; }
.motif svg{ display:block; }
.divider-motif{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color: var(--accent-line); margin: 22px auto 6px; max-width: 320px;
}
.divider-motif .rule{ height:1px; flex:1; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.divider-motif .ico{ color: var(--accent-ink); flex:none; }
.divider-motif .ico svg{ display:block; }
.section-motif{ display:flex; justify-content:center; margin: 2px auto 20px; color: var(--accent-ink); }
.section-motif svg{ display:block; }

/* ---------- Stat band (home) ---------- */
.stat-strip{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow:hidden; margin-top: 24px;
}
.stat{ background: var(--surface); padding: 16px 18px; }
.stat .k{ font-size: 0.76rem; color: var(--ink-faint); letter-spacing: 0.02em; }
.stat .v{ font-family:"Cormorant", serif; font-weight: 400; font-size: 1.9rem; line-height: 1.1; margin-top: 2px; }
.stat .v small{ font-family:"Inter"; font-size: 0.82rem; color: var(--ink-soft); font-weight: 400; }

.rsvp-bar{ display:flex; height: 12px; border-radius: 999px; overflow:hidden; margin-top: 12px; background: var(--surface-2); }
.rsvp-bar > span{ display:block; height:100%; }
.rsvp-bar .s-yes{ background: var(--accent); }
.rsvp-bar .s-no{ background: var(--danger); }
.rsvp-bar .s-maybe{ background: var(--line-strong); }
.rsvp-legend{ display:flex; flex-wrap:wrap; gap: 16px; margin-top: 12px; font-size: 0.82rem; color: var(--ink-soft); }
.rsvp-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; vertical-align: middle; }

.home-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-top: 28px; align-items: start; }
@media (max-width: 760px){ .home-grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px;
}
.card h3{ font-family:"Cormorant", serif; font-weight: 400; font-size: 1.45rem; margin-bottom: 6px; }
.mini-list{ list-style:none; margin: 10px 0 0; padding:0; }
.mini-list li{ display:flex; align-items:center; gap: 12px; padding: 10px 0; border-top:1px solid var(--line); }
.mini-list li:first-child{ border-top:0; }
.mini-list .when{ font-size: 0.78rem; color: var(--ink-soft); margin-left:auto; white-space:nowrap; }
.mini-list .when.over{ color: var(--danger); }
.dot{ width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none; }

/* timeline */
.tl-toggle{
  display:flex; align-items:center; gap:10px; width:100%;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 18px; margin-top: 22px; font-size:0.95rem;
}
.tl-toggle i.chev{ margin-left:auto; transition: transform .25s var(--ease); width:18px;height:18px; }
.tl-toggle[aria-expanded="true"] i.chev{ transform: rotate(90deg); }
.timeline{ margin-top: 14px; display:none; }
.timeline.open{ display:block; }
.tl-row{ display:flex; gap: 16px; padding: 11px 4px; border-top:1px solid var(--line); }
.tl-row:first-child{ border-top:0; }
.tl-time{ width: 58px; flex:none; font-weight: 500; font-variant-numeric: tabular-nums; }
.tl-time.empty{ color: var(--ink-faint); font-weight:400; }
.tl-dur{ width: 56px; flex:none; font-size:0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tl-item{ flex:1; color: var(--ink); }

/* ---------- Controls / inputs ---------- */
.toolbar{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; margin-bottom: 16px; }
.search{
  display:flex; align-items:center; gap:8px; flex:1; min-width: 180px;
  background: var(--surface); border:1px solid var(--line); border-radius: 999px; padding: 8px 14px;
}
.search i{ width:16px;height:16px;color:var(--ink-faint); }
.search input{ border:0; background:transparent; outline:none; width:100%; }
.seg{ display:flex; background: var(--surface); border:1px solid var(--line); border-radius: 999px; padding: 3px; gap:2px; }
.seg button{ border:0; background:transparent; padding: 6px 13px; border-radius: 999px; font-size:0.82rem; color: var(--ink-soft); transition: background .15s, color .15s; }
.seg button.on{ background: var(--ink); color: #fff; }

.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size: 0.74rem; color: var(--ink-faint); letter-spacing: 0.02em; display:flex; align-items:center; gap:6px; }
.field label i{ width:13px;height:13px; }
.inp{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-xs);
  padding: 9px 11px; outline: none; width:100%;
  transition: border-color .15s, background .15s;
}
.inp:focus{ border-color: var(--accent-line); background: var(--surface); }
textarea.inp{ resize: vertical; min-height: 60px; line-height:1.5; }

/* select (status & table) */
.sel{
  -webkit-appearance:none; appearance:none;
  background: var(--surface) ;
  border:1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 30px 6px 13px; font-size: 0.82rem; color: var(--ink); outline:none; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23808492' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 10px center;
  transition: border-color .15s;
}
.sel:focus{ border-color: var(--accent-line); }

/* ---------- Legg til / fjern ---------- */
.addbar{
  display:flex; gap: 10px; flex-wrap:wrap; align-items:flex-end;
  background: var(--surface); border:1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 18px;
}
.addbar .field{ flex: 1 1 160px; min-width: 130px; }
.addbar .grow2{ flex: 2 1 220px; }
.del-btn{
  width: 30px; height: 30px; flex:none; border-radius: 50%;
  border:1px solid var(--line); background: var(--surface); color: var(--ink-faint);
  display:grid; place-items:center; transition: all .15s var(--ease-soft);
}
.del-btn i{ width:15px; height:15px; }
.del-btn:hover{ border-color: oklch(0.55 0.13 27 / 0.4); color: var(--danger); background: var(--danger-wash); }
.guest-edit-fields{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.guest-edit-fields .inp{ flex:1 1 140px; min-width:120px; border-radius: var(--r-xs); }
.guest-edit-fields .sel{ flex:0 0 auto; }
.cl-edit-fields{ display:flex; flex-direction:column; gap:8px; }
.cl-edit-fields .inp{ border-radius: var(--r-xs); }
.cl-edit-2{ display:flex; gap:8px; flex-wrap:wrap; }
.cl-edit-2 .inp{ flex:1 1 140px; min-width:120px; }
.cl-edit-2 input[type="date"]{ flex:0 0 auto; }

/* gjeste-redigering: navn+side på én linje, allergi under */
.guest-edit-row{ align-items:flex-end; }
.guest-edit-col{ display:flex; flex-direction:column; gap:10px; }

/* allergi: indikator i gjesteraden + oversikt på Meny */
.allergi-tag{ display:inline-flex; align-items:center; gap:4px; color: var(--accent-ink); }
.allergi-tag i{ width:12px; height:12px; }
.allergi-list{ display:flex; flex-direction:column; }
.allergi-item{ display:flex; gap:14px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line); }
.allergi-item:first-child{ border-top:0; }
.allergi-item .an{ font-weight:500; flex:0 0 170px; }
.allergi-item .aa{ color: var(--ink-soft); flex:1; }
@media (max-width:480px){ .allergi-item{ flex-direction:column; gap:2px; } .allergi-item .an{ flex:none; } }

/* antrekk: visning/redigering med ⋮ */
.look.editing{ border-color: var(--accent-line); box-shadow: var(--shadow-soft); }
.look-meta{ font-size:0.82rem; color: var(--ink-soft); }
.look-note{ font-size:0.82rem; color: var(--ink-soft); line-height:1.45; }
.look-foot{ display:flex; justify-content:flex-end; margin-top:4px; }

/* leverandører som bildekort */
.vendor-grid{ align-items:start; }
.vendor-card .deco-img{ aspect-ratio: 16 / 10; }
.vendor-card .deco-img .ph{ gap:10px; font-weight:500; color: var(--ink-soft); }
.vendor-card .v-sub{ font-size:0.84rem; color: var(--ink-soft); margin-top:-2px; }
.vendor-card .v-statusrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
.vendor-card .v-contact{ display:flex; gap:7px; flex-wrap:wrap; margin-top:2px; }
.vendor-card .v-contact .qbtn{ padding:5px 11px; font-size:0.78rem; }

/* ---------- Vendors ---------- */
.vendor{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: 14px; overflow:hidden;
}
.vendor-head{ display:flex; align-items:center; gap: 13px; width:100%; background:transparent; border:0; padding: 16px 18px; text-align:left; }
.vendor-ico{ width: 38px; height:38px; border-radius: 50%; background: var(--surface-2); display:grid; place-items:center; flex:none; }
.vendor-ico i{ width:18px;height:18px;color: var(--ink); }
.vendor-head .nm{ font-size: 1.02rem; font-weight: 500; }
.vendor-head .role{ font-size: 0.8rem; color: var(--ink-soft); }
.vendor-head .right{ margin-left:auto; display:flex; align-items:center; gap: 12px; }
.vendor-head .chev{ width:18px;height:18px;color:var(--ink-faint); transition: transform .25s var(--ease); }
.vendor.open .vendor-head .chev{ transform: rotate(90deg); }
.vendor-body{ display:none; padding: 4px 18px 20px; border-top: 1px solid var(--line); }
.vendor.open .vendor-body{ display:block; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.form-grid .full{ grid-column: 1 / -1; }
@media (max-width:560px){ .form-grid{ grid-template-columns: 1fr; } }

.price-tag{ font-variant-numeric: tabular-nums; font-weight:500; color: var(--ink); white-space:nowrap; }
.contact-quick{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 4px; }
.qbtn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background: var(--surface); border-radius:999px; padding: 6px 12px; font-size:0.8rem; color: var(--ink-soft); }
.qbtn i{ width:14px;height:14px; }
.qbtn:hover{ border-color: var(--ink-faint); color: var(--ink); text-decoration:none; }
.vendor-foot{ display:flex; justify-content:flex-end; margin-top: 14px; }
.del-link{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 13px; font-size:0.8rem; color: var(--ink-soft); }
.del-link i{ width:14px;height:14px; }
.del-link:hover{ border-color: oklch(0.55 0.13 27 / 0.4); color: var(--danger); background: var(--danger-wash); }

.total-box{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; background: var(--ink); color:#fff; border-radius: var(--r-lg); padding: 18px 22px; margin-top: 22px; }
.total-box .t{ font-size:0.82rem; color: oklch(0.85 0 0); letter-spacing:0.02em; }
.total-box .v{ font-family:"Cormorant",serif; font-weight:400; font-size: 2rem; }

/* ---------- Menu planner ---------- */
.menu-block{ background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 14px; }
.menu-block .mh{ display:flex; align-items:center; gap:10px; margin-bottom: 12px; }
.menu-block .mh i{ width:17px;height:17px;color:var(--accent-ink); }
.menu-block .mh h4{ font-family:"Cormorant",serif; font-weight:400; font-size: 1.35rem; }
.course{ display:grid; grid-template-columns: 90px 1fr; gap: 12px; align-items:center; padding: 8px 0; border-top:1px solid var(--line); }
.course:first-of-type{ border-top:0; }
.course .ckey{ font-size:0.8rem; color: var(--ink-soft); }

/* ---------- Wishlist ---------- */
.wish-row{ display:flex; align-items:center; gap: 14px; padding: 13px 16px; border-top:1px solid var(--line); }
.wish-row:first-child{ border-top:0; }
.wish-thumb{ width: 50px; height:50px; border-radius: var(--r-sm); background: var(--surface-2); display:grid; place-items:center; flex:none; overflow:hidden; border:1px solid var(--line); }
.wish-thumb i{ width:18px;height:18px;color: var(--ink-faint); }
.wish-thumb img.wt-img{ width:100%; height:100%; object-fit:cover; display:block; }
.wish-row .nm{ font-weight:400; }
.wish-row .meta{ font-size:0.78rem; color: var(--ink-soft); display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tag{ font-size: 0.68rem; padding: 2px 8px; border-radius:999px; background: var(--surface-2); color: var(--ink-soft); border:1px solid var(--line); }
.tag.used{ background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); }
.wish-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }
.linkbtn{ display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color: var(--accent-ink); border:1px solid var(--accent-line); border-radius:999px; padding:6px 12px; }
.linkbtn:hover{ background: var(--accent-wash); text-decoration:none; }
.linkbtn i{ width:14px;height:14px; }
.check{
  width: 24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong);
  background: var(--surface); display:grid; place-items:center; flex:none; transition: all .16s var(--ease-soft);
}
.check i{ width:14px;height:14px; color:#fff; opacity:0; transition: opacity .15s; }
.check.on{ background: var(--accent); border-color: var(--accent); }
.check.on i{ opacity:1; }

/* ---------- Attire gallery ---------- */
.gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.look{ background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column; }
.look-img{ aspect-ratio: 3 / 4; background: var(--surface-2); position:relative; display:grid; place-items:center; overflow:hidden; }
.look-img img{ width:100%; height:100%; object-fit: cover; display:block; }
.look-img .ph{ display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--ink-faint); font-size:0.8rem; }
.look-img .ph i{ width:26px;height:26px; }
.look-body{ padding: 14px 15px 16px; display:flex; flex-direction:column; gap: 10px; }
.look-body .lt{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.look-body .lt .nm{ font-family:"Cormorant",serif; font-size: 1.3rem; font-weight:400; }
.look-fields{ display:flex; flex-direction:column; gap: 8px; }

/* ---------- Venue ---------- */
.venue-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items:start; }
@media (max-width: 760px){ .venue-grid{ grid-template-columns: 1fr; } }
.idea{ display:flex; align-items:flex-start; gap: 12px; padding: 12px 0; border-top:1px solid var(--line); }
.idea:first-child{ border-top:0; }
.idea .check{ margin-top:1px; }
.idea .it{ flex:1; }
.idea .it .h{ font-weight: 400; }
.idea .it .d{ font-size: 0.82rem; color: var(--ink-soft); }
.cap-num{ font-family:"Cormorant",serif; font-weight:300; font-size: 3.2rem; line-height:1; }

.add-row{ display:flex; gap: 10px; margin-top: 14px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1;
  border:1px solid var(--line-strong);
  background: var(--surface); border-radius: 999px; padding: 9px 16px; font-size:0.86rem; color: var(--ink);
  transition: background .15s, border-color .15s;
}
.btn:hover{ background: var(--surface-2); }
.btn.primary{ background: var(--ink); color:#fff; border-color: var(--ink); }
.btn.primary:hover{ background: oklch(0.32 0.014 280); text-decoration:none; }
.btn i{ width:15px;height:15px; }

/* ---------- Toast ---------- */
.toast{
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); left: 50%; transform: translate(-50%, 14px);
  background: var(--ink); color:#fff; padding: 9px 16px; border-radius: 999px; font-size: 0.84rem;
  display:flex; align-items:center; gap:8px; opacity:0; pointer-events:none;
  transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: var(--z-toast);
  box-shadow: var(--shadow-soft);
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }
.toast i{ width:15px;height:15px; color: var(--accent); }

.empty-note{ color: var(--ink-faint); font-size: 0.86rem; font-style: italic; padding: 4px 2px; }

/* ---------- Reveal motion ---------- */
.reveal{ opacity:0; transform: translateY(10px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .5s var(--ease), transform .5s var(--ease); }

/* ---------- Responsive nav ---------- */
@media (max-width: 880px){
  .tab{ padding: 13px 12px 11px; font-size: 0.88rem; }
  .tab span{ display:inline; }
}
@media (max-width: 560px){
  .tab i{ display:none; }
}

/* ---------- Pynteideer: bildekort ---------- */
.deco-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; margin-bottom:18px; }
.deco-chips{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.deco-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.deco-actions .deco-catinp{ width: 150px; border-radius: 999px; padding:7px 14px; }
.deco-actions .btn .lucide, .deco-actions .btn i{ margin:0; }
/* Ny kategori: grønn bekreft-knapp (mørkere grønn hake) + rød avbryt-knapp (mørkere rødt x) */
.deco-ok, .deco-cancel{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center; border:1px solid; transition: filter .15s;
}
.deco-ok i, .deco-cancel i{ width:16px; height:16px; }
.deco-ok{ background: var(--accent-wash); border-color: var(--accent-line); }
.deco-ok i{ color: var(--accent-ink); }
.deco-cancel{ background: var(--danger-wash); border-color: oklch(0.55 0.13 27 / 0.4); }
.deco-cancel i{ color: var(--danger); }
.deco-ok:hover, .deco-cancel:hover{ filter: brightness(0.97); }

.deco-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
.deco-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition: border-color .15s, box-shadow .2s var(--ease);
}
.deco-card:hover{ box-shadow: var(--shadow-soft); }
.deco-card.editing{ border-color: var(--accent-line); box-shadow: var(--shadow-soft); }
.deco-img{ aspect-ratio: 4 / 3; background: var(--surface-2); position:relative; display:grid; place-items:center; overflow:hidden; }
.deco-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.deco-img .ph{ display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--ink-faint); font-size:0.8rem; text-align:center; padding:0 14px; }
.deco-img .ph i{ width:24px; height:24px; }
.deco-tools, .look-tools{ position:absolute; top:8px; right:8px; display:flex; gap:6px; opacity:0; transition: opacity .15s; }
.deco-card:hover .deco-tools, .deco-card:focus-within .deco-tools,
.look:hover .look-tools, .look:focus-within .look-tools{ opacity:1; }
.deco-tool{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background: oklch(1 0 0 / 0.92); backdrop-filter: blur(4px);
  display:grid; place-items:center; color: var(--ink-soft); transition: all .15s var(--ease-soft);
}
.deco-tool i{ width:15px; height:15px; }
.deco-tool:hover{ color: var(--ink); border-color: var(--ink-faint); }
.deco-tool.deco-del:hover{ color: var(--danger); border-color: oklch(0.55 0.13 27 / 0.4); background: var(--danger-wash); }
.deco-body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:7px; }
.deco-tag{ align-self:flex-start; font-size:0.68rem; padding:2px 9px; border-radius:999px; background: var(--accent-wash); border:1px solid var(--accent-line); color: var(--accent-ink); }
.deco-title{ font-size:1.22rem; font-weight:400; line-height:1.15; }
.deco-desc{ font-size:0.84rem; color: var(--ink-soft); }
.deco-form{ gap:11px; }
.deco-form .field label{ font-size:0.72rem; }
.deco-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }

/* ---------- Pynte-sjekkliste: inline redigering ---------- */
.idea .it{ display:flex; flex-direction:column; gap:2px; }
.idea-h, .idea-d{
  border:1px solid transparent; background:transparent; border-radius: var(--r-xs);
  padding:4px 7px; margin:-4px -7px; width:100%; outline:none;
  transition: border-color .15s, background .15s;
}
.idea-h{ font-weight:400; color: var(--ink); }
.idea-d{ font-size:0.82rem; color: var(--ink-soft); }
.idea-h:hover, .idea-d:hover{ border-color: var(--line); }
.idea-h:focus, .idea-d:focus{ border-color: var(--accent-line); background: var(--surface); }

/* ---------- Sidepanel (drawer) ---------- */
.side-overlay{
  position: fixed; inset:0; z-index: 700; background: oklch(0.2 0.02 280 / 0.34);
  opacity:0; transition: opacity .26s var(--ease); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.side-overlay.in{ opacity:1; }
.side-panel{
  position: fixed; top:0; right:0; bottom:0; z-index: 701;
  width: min(560px, 96vw); background: var(--surface);
  border-left:1px solid var(--line); box-shadow: -12px 0 40px oklch(0.2 0.02 280 / 0.16);
  display:flex; flex-direction:column;
  transform: translateX(100%); transition: transform .3s var(--ease);
}
.side-panel.in{ transform: translateX(0); }
.side-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.side-title{ font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-open{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--accent-line);
  background: var(--accent-wash); color: var(--accent-ink); border-radius:999px; padding:6px 12px; font-size:0.82rem;
}
.side-open i{ width:14px; height:14px; }
.side-close{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background: var(--surface); display:grid; place-items:center; color: var(--ink-soft); }
.side-close:hover{ color: var(--ink); border-color: var(--ink-faint); }
.side-body{ position:relative; flex:1; min-height:0; background: var(--surface-2); }
.side-frame{ width:100%; height:100%; border:0; display:block; background:#fff; }
.side-load{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; color: var(--ink-soft); font-size:0.9rem; }
.side-spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line-strong); border-top-color: var(--accent); animation: side-spin .8s linear infinite; }
@keyframes side-spin{ to{ transform: rotate(360deg); } }
.side-blocked{ position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:14px; text-align:center; padding:0 32px; color: var(--ink-soft); }
.side-blocked i{ width:34px; height:34px; color: var(--accent-ink); }
.side-blocked p{ max-width:36ch; margin:0; }
body.side-open-active{ overflow:hidden; }
@media (max-width: 560px){
  .side-open span{ display:none; }
  .side-open{ padding:7px; }
}

/* ---------- Tall: enklere skrift (Inter, rene siffer) ---------- */
.stat .v, .hero-count .num, .cap-num, .total-box .v{
  font-family: var(--num);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
}
.hero-count .num{ font-weight: 300; }
.stat .v{ font-weight: 600; font-size: 1.7rem; }
.stat .v small{ font-weight: 400; letter-spacing: 0; }
.cap-num{ font-weight: 300; }
.total-box .v{ font-weight: 600; }

/* ---------- Ønske: rediger-knapp + redigeringsform ---------- */
.wish-edit-btn{
  width:30px; height:30px; flex:none; border-radius:50%;
  border:1px solid var(--line); background: var(--surface); color: var(--ink-faint);
  display:grid; place-items:center; transition: all .15s var(--ease-soft);
}
.wish-edit-btn i{ width:14px; height:14px; }
.wish-edit-btn:hover{ color: var(--ink); border-color: var(--ink-faint); }
.wish-edit{
  display:flex; flex-direction:column; gap:11px;
  padding:16px; border-top:1px solid var(--line); background: var(--surface-2);
}
.wish-edit:first-child{ border-top:0; }
.wish-edit .field label{ font-size:0.72rem; }
.wish-edit-2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media (max-width:520px){ .wish-edit-2{ grid-template-columns:1fr; } }
.wish-check-lbl{ display:flex; align-items:center; gap:9px; font-size:0.86rem; color: var(--ink-soft); cursor:pointer; }
.wish-check-lbl input{ width:16px; height:16px; accent-color: var(--accent); }

/* ---------- Handlingsmeny (tre prikker ⋮) ---------- */
.ovf{ position:relative; display:inline-flex; flex:none; }
.ovf-btn{
  width:30px; height:30px; flex:none; border-radius:50%;
  border:1px solid var(--line); background: var(--surface); color: var(--ink-faint);
  display:grid; place-items:center; transition: all .15s var(--ease-soft);
}
.ovf-btn i{ width:15px; height:15px; }
.ovf-btn .ovf-dots{ width:16px; height:16px; display:block; fill: currentColor; }
.ovf-btn:hover{ color: var(--ink); border-color: var(--ink-faint); }
.ovf-btn[aria-expanded="true"]{ color: var(--ink); border-color: var(--ink-faint); background: var(--surface-2); }
/* over et bilde (på kort): halvgjennomsiktig hvit som de gamle verktøyene */
.deco-tools .ovf-btn, .look-tools .ovf-btn{ background: oklch(1 0 0 / 0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.ovf-pop{
  position:absolute; z-index: 650; min-width: 188px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-soft); padding:6px; display:flex; flex-direction:column; gap:2px;
  animation: ovf-in .14s var(--ease);
}
@keyframes ovf-in{ from{ opacity:0; transform: translateY(-4px); } to{ opacity:1; transform:none; } }
.ovf-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:0; border-radius: var(--r-xs); padding:9px 11px;
  font-size:0.86rem; color: var(--ink); transition: background .12s;
}
.ovf-item i{ width:16px; height:16px; color: var(--ink-soft); flex:none; }
.ovf-item:hover{ background: var(--surface-2); }
.ovf-item.danger{ color: var(--danger); }
.ovf-item.danger i{ color: var(--danger); }
.ovf-item.danger:hover{ background: var(--danger-wash); }

/* ---------- Bildekort: «valgt/bestilt»-tilstand ---------- */
.deco-card.chosen .deco-img img{ filter: saturate(0.82) brightness(0.99); }
.deco-card.chosen .deco-body{ opacity: 0.66; }
.deco-chosen-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background: var(--accent); color:#fff; border-radius:999px;
  padding:4px 10px 4px 8px; font-size:0.72rem; font-weight:500;
  box-shadow: var(--shadow-soft);
}
.deco-chosen-badge i{ width:13px; height:13px; }

/* ---------- Notater (under Ønskeliste) ---------- */
.notes-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; align-items:start; }
.note-card{
  background: var(--cream); border:1px solid var(--line); border-radius: var(--r-lg);
  padding:14px 15px 16px; display:flex; flex-direction:column; gap:8px;
  box-shadow: var(--shadow-soft);
}
.note-card .note-top{ display:flex; align-items:flex-start; gap:8px; }
.note-title{
  flex:1; min-width:0; border:1px solid transparent; background:transparent;
  font-family:"Cormorant", serif; font-size:1.32rem; font-weight:500; color: var(--ink);
  border-radius: var(--r-xs); padding:4px 7px; margin:-2px -7px 0; outline:none;
  transition: border-color .15s, background .15s;
}
.note-title:hover{ border-color: var(--line); }
.note-title:focus{ border-color: var(--accent-line); background: var(--surface); }
.note-body{
  border:1px solid transparent; background:transparent; resize:vertical; min-height:96px;
  width:100%; border-radius: var(--r-xs); padding:6px 7px; margin:0 -7px; outline:none;
  font-size:0.9rem; line-height:1.55; color: var(--ink-soft);
  transition: border-color .15s, background .15s;
}
.note-body:hover{ border-color: var(--line); }
.note-body:focus{ border-color: var(--accent-line); background: var(--surface); color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Sky-synk: status-knapp + innloggingskort ---------- */
.sync-wrap{ position: fixed; left: 16px; bottom: 16px; z-index: 90; }
.sync-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius:999px; padding:7px 13px 7px 11px; font-size:0.8rem; font-weight:500;
  box-shadow: var(--shadow-soft); transition: all .15s var(--ease-soft);
}
.sync-chip:hover{ color: var(--ink); border-color: var(--ink-faint); }
.sync-chip i{ width:15px; height:15px; }
.sync-chip.on{ color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-wash); }

.sync-overlay{
  position: fixed; inset:0; z-index: 720; display:grid; place-items:center; padding:20px;
  background: oklch(0.2 0.02 280 / 0.34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: sync-fade .18s var(--ease);
}
@keyframes sync-fade{ from{ opacity:0; } to{ opacity:1; } }
.sync-card{
  width: min(440px, 100%); background: var(--surface);
  border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  padding:22px; display:flex; flex-direction:column; gap:12px;
}
.sync-head{ display:flex; align-items:center; gap:10px; font-family:"Cormorant", serif; font-size:1.4rem; color: var(--ink); }
.sync-head i{ width:20px; height:20px; color: var(--accent-ink); }
.sync-note{ margin:0; font-size:0.88rem; line-height:1.5; color: var(--ink-soft); }
.sync-label{ font-size:0.74rem; font-weight:500; color: var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; }
.sync-input{
  width:100%; border:1px solid var(--line); border-radius: var(--r-sm); padding:10px 12px;
  font-size:0.92rem; color: var(--ink); background: var(--surface); outline:none;
  transition: border-color .15s;
}
.sync-input:focus{ border-color: var(--accent-line); }
.sync-msg{ font-size:0.82rem; color: var(--ink-soft); min-height:1.1em; }
.sync-msg.err{ color: var(--danger); }
.sync-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:4px; }
@media (max-width: 480px){ .sync-wrap{ left:12px; bottom:12px; } }

/* ---------- Web: fullskjerm innloggingsport (privat til man er innlogget) ---------- */
/* Mens vi ikke vet at vi er innlogget skjules HELE appen. Porten dekker alt. */
html.pre-auth{ overflow:hidden; }
html.pre-auth .site-header,
html.pre-auth .navwrap,
html.pre-auth .content,
html.pre-auth .sync-wrap,
html.pre-auth .toast{ display:none !important; }

.auth-screen{
  position: fixed; inset: 0; z-index: 800;
  display: grid; place-items: center; padding: 24px; overflow:auto;
  background:
    radial-gradient(125% 80% at 50% -12%, var(--accent-wash), transparent 62%),
    var(--bg);
  animation: sync-fade .2s var(--ease);
}
.auth-screen.hidden{ display:none; }
.auth-inner{ width: min(460px, 100%); display:flex; flex-direction:column; align-items:center; gap:22px; }
.auth-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.auth-screen .monogram{ font-size: clamp(2.6rem, 12vw, 4.2rem); }
.auth-sub{ margin-top:10px; font-size:0.78rem; letter-spacing:0.34em; color:var(--accent-ink); padding-left:0.34em; }
.auth-names{ margin-top:6px; font-family:var(--script); font-weight:400; font-size: clamp(1.4rem,6vw,2rem); color:var(--accent-ink); letter-spacing:0.01em; }
.auth-card{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-soft);
  padding:24px; display:flex; flex-direction:column; gap:12px;
}
.auth-step{ display:flex; flex-direction:column; gap:12px; }
.auth-step.hidden{ display:none; }
.auth-full{ width:100%; justify-content:center; margin-top:4px; }
.auth-row{ display:flex; justify-content:space-between; gap:9px; margin-top:4px; }
.auth-foot{ font-size:0.76rem; color:var(--ink-faint); text-align:center; }
@media (max-width:480px){ .auth-card{ padding:18px; } .auth-inner{ gap:18px; } }
.sync-link{
  background:none; border:none; padding:4px 0 0; margin:0; cursor:pointer;
  color: var(--accent-ink); font-size:0.82rem; text-align:left; align-self:flex-start;
  text-decoration:underline; text-underline-offset:2px;
}
.sync-link:hover{ color: var(--ink); }