@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --wax: #FBF0DC;
  --wax-soft: #F5E7CC;
  --wick: #2A1F17;
  --flame: #E29627;
  --flame-dark: #C67D18;
  --ember: #A83B2B;
  --sage: #6B7A4F;
  --smoke: #8A7A68;
  --card: #FFFDF8;
  --line: #E8D9BC;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--wax);
  color: var(--wick);
  padding-bottom: 90px;
  -webkit-font-smoothing: antialiased;
}

h1, .display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
}

/* ---------- Header + signature wax-drip divider ---------- */
header.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--wick); color: var(--wax);
  padding: 20px 20px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
header.top h1 { font-size: 20px; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
header.top a, header.top button {
  color: var(--flame); text-decoration: none; font-size: 13px; background: none; border: none;
  font-family: 'Inter', sans-serif; font-weight: 500; cursor: pointer;
}
.drip {
  height: 11px;
  background-image: radial-gradient(circle 9px at 11px 0px, var(--wick) 99%, transparent 100%);
  background-size: 22px 11px;
  background-repeat: repeat-x;
  margin-top: -1px;
}

main { padding: 18px 16px; max-width: 520px; margin: 0 auto; }

h2 {
  font-size: 12px; margin: 22px 0 9px; color: var(--smoke);
  text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
}

.card {
  background: var(--card); border-radius: 16px; padding: 16px; margin-bottom: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(42,31,23,.04);
}

/* ---------- Chips: wax-stamped tags ---------- */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 15px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--wax); font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
  transition: transform .08s ease;
}
.chip:active { transform: scale(.96); }
.chip.selected {
  background: var(--wick); color: var(--flame); border-color: var(--wick);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}

input[type=text], input[type=password], textarea {
  width: 100%; padding: 13px 14px; border-radius: 11px; border: 1.5px solid var(--line);
  font-size: 16px; margin-bottom: 10px; font-family: inherit; background: var(--card); color: var(--wick);
}
input:focus, textarea:focus { outline: 2px solid var(--flame); outline-offset: 1px; border-color: var(--flame); }

button.primary {
  width: 100%; padding: 15px; border-radius: 13px; border: none;
  background: var(--wick); color: var(--flame); font-size: 16px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; letter-spacing: -.01em;
  transition: transform .08s ease;
}
button.primary:active { transform: scale(.98); }
button.primary:disabled { opacity: .45; }

button.secondary {
  width: 100%; padding: 12px; border-radius: 13px; border: 1.5px solid var(--wick);
  background: transparent; color: var(--wick); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px;
  font-family: 'Inter', sans-serif;
}

.upload-box {
  border: 2px dashed var(--line); border-radius: 16px; padding: 34px 16px; text-align: center; color: var(--smoke);
  background: var(--wax-soft);
}

.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.thumb-grid img, .thumb-grid .thumb-wrap { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.thumb-wrap { position: relative; }
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.thumb-wrap .check {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(251,240,220,.92); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.thumb-wrap.selected .check { background: var(--wick); color: var(--flame); border-color: var(--wick); }
.thumb-wrap.selected { outline: 3px solid var(--flame); border-radius: 12px; }
.thumb-wrap .del-thumb {
  position: absolute; bottom: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(42,31,23,.75); border: none; color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}

.tag-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.tag-row:last-child { border-bottom: none; }
.tag-row .del { color: var(--ember); background: none; border: none; font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; }

nav.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--card);
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(42,31,23,.08);
  display: flex; gap: 8px; justify-content: center; border-top: 1px solid var(--line);
}
nav.bottom-bar a {
  flex: 1; text-align: center; text-decoration: none; color: var(--smoke); font-size: 11px; padding: 6px;
  font-weight: 600; font-family: 'Inter', sans-serif; position: relative;
}
nav.bottom-bar a.active { color: var(--wick); }
nav.bottom-bar a.active::before {
  content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 2px; background: var(--flame);
}

.empty { text-align: center; color: var(--smoke); padding: 34px 14px; font-size: 14px; line-height: 1.5; }
.empty .empty-icon { font-size: 26px; display: block; margin-bottom: 8px; opacity: .7; }

.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--wick); color: var(--flame); padding: 11px 20px; border-radius: 30px; font-size: 14px;
  font-weight: 500; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

.gallery-header { text-align: center; padding: 36px 18px 12px; }
.gallery-header h1 { font-size: 24px; margin: 0 0 8px; }
.gallery-header p { color: var(--smoke); font-size: 14px; margin: 0; line-height: 1.5; }
.public-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; padding: 16px; max-width: 520px; margin: 0 auto; }
.public-grid img { width: 100%; border-radius: 14px; object-fit: cover; aspect-ratio: 1; box-shadow: 0 2px 6px rgba(42,31,23,.08); }