@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #19151b;
  --pink: #e52aa9;
  --pink-deep: #ba197e;
  --pink-soft: #ffd4e9;
  --pink-wash: #fff2f9;
  --yellow: #ffd54f;
  --line: 2.5px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.9) 0 4%, transparent 25%),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.5) 0 5%, transparent 27%),
    linear-gradient(135deg, #f3accf 0%, #ffd8eb 54%, #d8f0de 100%);
  font-family: 'Figtree', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.page-noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

.app-shell { width: min(100% - 28px, 720px); margin: 34px auto; position: relative; z-index: 1; }

.browser-bar {
  height: 46px; display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: #e9e9e9; border: var(--line); border-bottom: 0; border-radius: 18px 18px 0 0;
}
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; background: var(--pink); border: 1px solid var(--ink); }
.window-dots i:nth-child(2) { background: var(--yellow); }
.window-dots i:nth-child(3) { background: #9fe09f; }
.tab-pill { height: 29px; min-width: 188px; padding: 5px 13px; background: white; border: 1.5px solid #7c777e; border-radius: 8px 8px 0 0; color: #5b5560; font-size: 12px; }
.tab-flower { color: var(--pink); margin-right: 7px; font-size: 15px; }
.bar-actions { margin-left: auto; display: flex; gap: 16px; color: #615b64; font-size: 20px; }

.app-stage { min-height: 780px; padding: 27px 30px 22px; overflow: hidden; background: rgba(255,239,249,.72); border: var(--line); border-radius: 0 0 22px 22px; }
.stage-topline { display: flex; align-items: baseline; gap: 10px; }
.brand-mark { color: var(--pink); font-size: 25px; line-height: 1; text-shadow: 1px 1px 0 var(--ink); }
.brand-name { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: .22em; font-weight: 700; }
.stage-caption { margin-left: auto; color: #736b76; font-size: 11px; }
.progress { display: flex; align-items: center; gap: 10px; margin: 28px 2px 23px; color: #756d76; font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: .08em; }
.progress-track { height: 5px; flex: 1; background: rgba(25,21,27,.13); border-radius: 8px; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 25%; background: var(--pink); border-radius: inherit; transition: width .45s ease; }
.progress-heart { color: var(--pink); font-size: 16px; }

.card-wrap { position: relative; max-width: 530px; margin: 0 auto; padding: 15px; }
.date-card { position: relative; min-height: 590px; padding: clamp(28px, 6vw, 57px) clamp(22px, 7vw, 68px); background: rgba(255,255,255,.93); border: var(--line); border-radius: 28px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; animation: card-in .45s ease both; }
.flower { position: absolute; z-index: 2; color: var(--pink); font-size: 28px; text-shadow: 1px 1px 0 var(--ink); animation: bob 3.4s ease-in-out infinite; }
.flower-a { top: -2px; left: 21%; }
.flower-b { right: -4px; top: 45%; font-size: 21px; animation-delay: .7s; }
.flower-c { bottom: -14px; left: 11%; font-size: 18px; animation-delay: 1.2s; }

.step { width: 100%; text-align: center; }
.eyebrow { margin-bottom: 11px; color: var(--pink-deep); font-size: 11px; font-weight: 800; letter-spacing: .19em; }
.step h1 { margin: 0 auto 15px; max-width: 395px; font-size: clamp(30px, 6vw, 49px); line-height: 1.02; letter-spacing: -.05em; font-weight: 800; }
.step h1 em { color: var(--pink); font-style: normal; }
.step-subtitle { margin: 0 auto 29px; color: #766d77; font-size: 13px; line-height: 1.55; }
.avatar-frame { width: 121px; height: 121px; margin: 2px auto 25px; padding: 6px; border: var(--line); border-radius: 27px; background: var(--pink); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-3deg); }
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; border: 2px solid var(--ink); border-radius: 19px; display: block; }
.avatar-fallback { display: none; place-items: center; width: 100%; height: 100%; background: #f8e7df; border: 2px solid var(--ink); border-radius: 19px; font-size: 55px; }

.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; max-width: 350px; margin: 31px auto 0; }
.btn { min-height: 52px; padding: 12px 18px; border: var(--line); border-radius: 999px; color: var(--ink); background: #fff; font-size: 14px; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-primary { background: var(--pink); }
.btn-primary:hover { background: #f149b8; }
.btn-secondary { background: #fff; }
.btn span { margin-left: 5px; }

.form-stack { text-align: left; margin: 23px auto 0; max-width: 370px; }
.field { display: block; margin: 14px 0; }
.field-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.field-label small { color: #9d8e9b; font-weight: 500; }
.input { width: 100%; height: 52px; padding: 0 15px; color: var(--ink); background: #fff; border: var(--line); border-radius: 14px; outline: none; box-shadow: 4px 4px 0 var(--ink); }
.input:focus { border-color: var(--pink); box-shadow: 4px 4px 0 var(--pink); }
.form-actions { margin-top: 24px; }
.form-actions .btn { width: 100%; }

.food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 370px; margin: 26px auto 0; }
.food-chip { min-height: 66px; padding: 8px 4px; border: var(--line); border-radius: 13px; background: #fff; box-shadow: 3px 3px 0 var(--ink); font-size: 12px; font-weight: 700; transition: transform .16s ease, background .16s ease; }
.food-chip:hover { transform: translateY(-2px); }
.food-chip.selected { background: var(--pink); }
.food-emoji { display: block; margin-bottom: 4px; font-size: 23px; }
.selection-hint { height: 16px; margin-top: 12px; color: #907e8c; font-size: 11px; }

.summary { margin: 23px auto 0; max-width: 370px; border-top: 1.5px dashed #b9aab5; border-bottom: 1.5px dashed #b9aab5; }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; font-size: 13px; }
.summary-row + .summary-row { border-top: 1px solid #f1e0eb; }
.summary-row span:first-child { color: #877986; }
.summary-row strong { text-align: right; font-size: 13px; }
.final-note { margin-top: 18px; color: #756a74; font-size: 12px; line-height: 1.55; }

.stage-footer { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 29px; color: #8f7e8d; font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.footer-heart { color: var(--pink); font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 5; max-width: calc(100% - 36px); padding: 12px 19px; color: white; background: var(--ink); border: 2px solid var(--pink); border-radius: 999px; box-shadow: 4px 4px 0 var(--pink); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: opacity .22s ease, transform .22s ease; font-size: 13px; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.btn:disabled { cursor: wait; opacity: .7; transform: none; box-shadow: none; }
.admin-card { min-height: 520px; align-items: stretch; }
.admin-view { width: 100%; }
.admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.admin-heading h1 { text-align: left; margin-bottom: 0; }
.admin-small-btn { min-height: 38px; padding: 8px 14px; font-size: 12px; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 12px; color: #877986; font-size: 12px; }
.admin-empty { padding: 34px 14px; color: #877986; background: var(--pink-wash); border: 1.5px dashed #c5aabb; border-radius: 15px; text-align: center; }
.table-wrap { overflow-x: auto; border: var(--line); border-radius: 15px; box-shadow: 4px 4px 0 var(--ink); }
table { width: 100%; min-width: 500px; border-collapse: collapse; background: #fff; font-size: 12px; }
th, td { padding: 13px 12px; text-align: left; vertical-align: top; }
th { color: #877986; background: var(--pink-wash); font-size: 11px; font-weight: 700; }
tr + tr { border-top: 1px solid #f1e0eb; }
.admin-error { min-height: 18px; margin: 12px 0 0; color: #b51e6f; font-size: 12px; text-align: center; }

@media (max-width: 560px) {
  .admin-card { min-height: 500px; }
  .admin-heading h1 { font-size: 32px; }
}

@keyframes card-in { from { opacity: 0; transform: translateY(16px) rotate(.6deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(6deg); } }

@media (max-width: 560px) {
  .app-shell { width: calc(100% - 18px); margin: 10px auto; }
  .app-stage { min-height: calc(100vh - 66px); padding: 22px 15px 17px; }
  .stage-caption { display: none; }
  .card-wrap { padding: 9px; }
  .date-card { min-height: 585px; padding: 32px 18px; border-radius: 24px; }
  .choice-row { gap: 9px; }
  .btn { padding-inline: 11px; }
}