@charset "UTF-8";
:root { --ink:#29242b; --accent:#b3264b; --accent-dark:#8e1939; --paper:#fffaf6; --muted:#756a70; --line:#eadedc; --pink:#fae9ec; --white:#fff; --radius:20px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.6 "Segoe UI",Arial,sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
button,input,select,textarea { font:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:12px; padding:12px 21px; background:var(--accent); color:white; font-weight:600; cursor:pointer; transition:background .15s,transform .15s; text-decoration:none; }
button:hover,.button:hover { background:var(--accent-dark); text-decoration:none; }
button:disabled { opacity:.6; cursor:wait; }
button.secondary,.button.secondary { background:white; color:var(--accent); border-color:var(--line); }
button.secondary:hover,.button.secondary:hover { background:var(--pink); }
.text-button { border:0; padding:3px 0; border-radius:0; background:none; color:var(--accent); font-size:14px; }
.text-button:hover { background:none; text-decoration:underline; }
.small { padding:8px 14px; font-size:14px; }
.danger { color:#a32121; }
:focus-visible { outline:3px solid #7b5bc4; outline-offset:4px; }
.skip { position:absolute; top:-80px; left:20px; z-index:20; padding:12px; background:white; }
.skip:focus { top:10px; }
.site-header { min-height:92px; padding:20px 4%; display:flex; gap:28px; align-items:center; border-bottom:1px solid var(--line); background:#fffdfa; }
.brand { color:var(--ink); font-weight:800; font-size:30px; letter-spacing:-1.6px; white-space:nowrap; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand .accent { color:var(--accent); }
.brand i { color:var(--accent); font-size:19px; margin-left:5px; vertical-align:top; font-style:normal; }
.site-header nav { display:flex; align-items:center; gap:20px; flex:1; flex-wrap:wrap; justify-content:flex-end; }
.site-header nav a { font-size:14px; font-weight:600; color:var(--ink); }
.site-header nav a.button { color:white; }
.site-header form { margin:0; }
.container { width:min(1200px,92%); margin:0 auto; min-height:calc(100vh - 190px); padding:36px 0 70px; }
h1,h2,h3,p { margin:0 0 16px; }
h1 { font-size:clamp(30px,4vw,46px); line-height:1.17; letter-spacing:-1.4px; font-weight:650; }
h2 { font-size:23px; line-height:1.3; letter-spacing:-.5px; }
em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
small,.hint { color:var(--muted); font-size:13px; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:2.2px; font-weight:700; margin-bottom:22px; }
.hero { background:#f6eae6; border:1px solid #f0dfd9; border-radius:28px; min-height:370px; padding:48px 54px; display:grid; grid-template-columns:1.2fr 1fr; gap:25px; overflow:hidden; position:relative; }
.hero h1 { font-size:54px; margin-bottom:20px; }
.hero p:not(.eyebrow) { color:var(--muted); }
.hero .button { margin-top:12px; }
.hero-art { min-height:290px; align-self:center; position:relative; background:radial-gradient(ellipse at center,#fbe8ce 0,transparent 68%); display:grid; place-items:center; }
.present { width:170px; height:145px; background:#cc536c; border-radius:12px; position:relative; transform:rotate(-9deg); box-shadow:15px 22px 0 #c6969620; }
.present::before { content:""; position:absolute; top:0; left:66px; height:100%; width:30px; background:#f5c381; }
.present::after { content:""; position:absolute; top:-15px; left:-7px; width:184px; height:38px; border-radius:8px; background:linear-gradient(90deg,#b3264b 40%,#f5c381 40%,#f5c381 58%,#b3264b 58%); }
.present i,.present b { width:62px; height:42px; position:absolute; top:-56px; left:29px; border:11px solid #f5c381; border-radius:60% 60% 10% 60%; transform:rotate(10deg); }
.present b { left:80px; transform:rotate(75deg); }
.spark { position:absolute; top:8px; left:50px; color:#bc884b; font-size:46px; }
.heart { position:absolute; right:22px; top:40px; font-size:62px; color:var(--accent); transform:rotate(15deg); }
.hero-art p { position:absolute; bottom:4px; transform:rotate(-7deg); font:italic 24px Georgia,serif; }
.section-heading,.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:40px 0 24px; }
.page-heading { margin-top:8px; }
.section-heading span { font-size:14px; color:var(--muted); }
.section-heading h2 { margin:0; }
.list-grid,.gift-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.list-card { padding:28px; background:white; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:210px; position:relative; }
.list-card h2 { margin-top:22px; }
.list-card h2 a { color:var(--ink); }
.list-card p { color:var(--muted); overflow-wrap:anywhere; white-space:pre-line; }
.list-symbol { color:var(--accent); font:34px Georgia,serif; }
.tag { align-self:flex-start; border-radius:20px; padding:4px 10px; font-size:12px; background:var(--pink); color:var(--accent); }
.list-symbol + .tag { position:absolute; right:22px; top:30px; }
.card-footer { display:flex; justify-content:space-between; gap:12px; font-size:12px; padding-top:18px; margin-top:auto; }
.card-footer span { color:var(--muted); }
.gift-card { background:white; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.gift-image { position:relative; aspect-ratio:1.2; background:#f4efec; padding:18px; }
.gift-image img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.badge { position:absolute; bottom:14px; left:14px; max-width:90%; background:var(--ink); color:white; padding:5px 12px; border-radius:20px; font-size:12px; }
.badge.muted { top:14px; bottom:auto; background:#fffdf9; color:var(--muted); border:1px solid var(--line); }
.gift-content { padding:24px; display:flex; flex-direction:column; flex:1; }
.gift-content h2 { font-size:20px; overflow-wrap:anywhere; }
.description { white-space:pre-line; overflow-wrap:anywhere; color:var(--muted); }
.price { font-size:20px; font-weight:700; }
.store-link { font-size:14px; margin-top:auto; }
.gift-actions { margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.gift-actions button,.gift-actions .button { font-size:14px; padding:10px 14px; }
details { width:100%; }
summary { cursor:pointer; color:var(--muted); font-size:13px; }
.management { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding-top:14px; font-size:14px; }
.toolbar,.tabs { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding:18px 0; border-block:1px solid var(--line); margin-bottom:24px; font-size:14px; }
.sort-form { display:flex; gap:12px; align-items:center; justify-content:flex-end; margin:24px 0; }
.sort-form label { margin:0; }
.sort-form select { width:auto; }
.empty { text-align:center; padding:55px 24px; background:#fffdf9; border:1px dashed #e6d3d0; border-radius:var(--radius); }
.empty > span { font-size:46px; color:var(--accent); display:block; margin-bottom:10px; }
.empty p { color:var(--muted); }
.form-panel { width:min(100%,570px); margin:24px auto; padding:36px; background:white; border:1px solid var(--line); border-radius:var(--radius); }
.form-panel.wide { width:min(100%,1000px); }
.form-panel h1 { font-size:34px; margin-bottom:26px; }
label { display:block; font-size:14px; font-weight:600; margin:18px 0 7px; }
label small { font-weight:400; margin-left:4px; }
input:not([type=checkbox]):not([type=hidden]),textarea,select { width:100%; border:1px solid #d9ccce; border-radius:10px; padding:12px 14px; background:#fffefd; color:var(--ink); }
input[readonly],input:disabled { background:#f5f1ef!important; color:var(--muted)!important; }
textarea { resize:vertical; min-height:90px; }
input[type=file] { font-size:12px; border:0!important; }
.input-action { display:flex; align-items:stretch; gap:10px; }
.input-action input { min-width:0; }
.input-action button { flex-shrink:0; font-size:13px; }
.full-width { width:100%; margin:24px 0 12px; }
.form-actions { margin-top:28px; display:flex; align-items:center; gap:24px; }
.edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.image-drop { min-height:205px; border:2px dashed #e0c9ce; border-radius:16px; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; background:#fdf7f7; text-align:center; }
.image-drop.dragging { border-color:var(--accent); background:var(--pink); }
.image-drop img { width:100%; height:180px; object-fit:contain; }
.image-drop span { font-size:14px; color:var(--muted); }
.image-drop img:not([hidden]) ~ span { display:none; }
[hidden] { display:none!important; }
.checkbox { display:flex; align-items:center; gap:10px; font-weight:400; }
.checkbox input { width:18px; height:18px; accent-color:var(--accent); }
.suggestions { margin-top:24px; padding:24px; border-radius:12px; background:var(--pink); }
.suggestion-image { width:64px; height:64px; object-fit:contain; }
#fetch-status,#image-status { font-size:13px; color:var(--muted); margin-top:10px; }
.loading::before { content:""; display:inline-block; width:14px; height:14px; border:2px solid #e4c0cb; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin-right:8px; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.notice { padding:16px 20px; border:1px solid #e9cbd3; background:var(--pink); border-radius:12px; margin-bottom:24px; }
.validation { color:#9e1d35; font-size:14px; }
.validation ul { padding-left:20px; }
.validation:empty,.validation-summary-valid { display:none; }
.auth-shell { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; min-height:630px; padding:20px 40px; }
.auth-story { position:relative; padding:30px 0 150px; }
.auth-story h1 { font-size:58px; }
.auth-story > p:not(.eyebrow) { color:var(--muted); }
.auth-flower { position:absolute; font-size:155px; color:#dfa4ac; bottom:-15px; left:40px; line-height:1; transform:rotate(-16deg); }
.auth-form { margin:0; box-shadow:0 16px 60px #59202c08; }
.auth-form .brand { display:inline-block; margin-bottom:22px; }
.auth-links { display:flex; flex-direction:column; gap:12px; font-size:13px; margin-top:20px; }
.search { max-width:560px; margin-bottom:25px; }
.person-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px; background:white; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; }
.person-row p { margin:3px 0; font-size:14px; color:var(--muted); }
.person-row.unread { border-left:4px solid var(--accent); }
.row-actions form { display:flex; flex-wrap:wrap; gap:10px; }
.pager { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:36px; font-size:13px; color:var(--muted); }
hr { border:0; border-top:1px solid var(--line); margin:28px 0; }
footer { border-top:1px solid var(--line); padding:24px 4%; color:var(--muted); font-size:13px; display:flex; justify-content:space-between; }
@media(max-width:1000px) {
  .site-header { flex-wrap:wrap; gap:12px 22px; }
  .site-header nav { gap:14px; }
  .gift-grid,.list-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero { padding:36px; }
  .hero h1 { font-size:44px; }
  .auth-shell { gap:28px; padding:10px; }
  .auth-story h1 { font-size:44px; }
}
@media(max-width:650px) {
  .container { width:91%; padding-top:24px; }
  .site-header { padding:14px 4.5%; }
  .site-header nav { order:3; flex-basis:100%; justify-content:flex-start; gap:10px 16px; }
  .site-header > form { margin-left:auto; }
  .brand { font-size:28px; }
  .hero { grid-template-columns:1fr; padding:30px 26px; min-height:0; }
  .hero h1 { font-size:40px; }
  .hero-art { display:none; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:5px; margin-top:30px; }
  .gift-grid,.list-grid { grid-template-columns:1fr; gap:20px; }
  .list-card { min-height:170px; }
  .gift-image { aspect-ratio:1.35; }
  .page-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .form-panel { padding:24px; margin:8px auto; }
  .form-panel h1 { font-size:29px; }
  .edit-grid { grid-template-columns:1fr; gap:12px; }
  .input-action { flex-wrap:wrap; }
  .input-action input { flex-basis:100%; }
  .auth-shell { display:block; min-height:0; padding:0; }
  .auth-story { display:none; }
  .sort-form { flex-wrap:wrap; justify-content:flex-start; }
  .person-row { align-items:flex-start; flex-wrap:wrap; }
  .toolbar { gap:15px; }
  footer { gap:10px; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }