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

:root{
  --paper:#FAF3E7;
  --paper-deep:#F0E4CE;
  --ink:#2F3B2A;
  --plum:#4B2E3D;
  --rose:#C97B86;
  --gold:#B98A4A;
  --sage:#8CA087;
  --sage-dark:#5C7457;
  --line: rgba(47,59,42,0.16);
  --focus: rgba(75,46,61,0.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(47,59,42,0.06) 1px, transparent 0);
  background-size:22px 22px;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
}

h1,h2,h3, .display{
  font-family:'Fraunces',serif;
  font-weight:500;
  margin:0;
}
.eyebrow{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--sage-dark);
  font-size:14px;
}

button{font-family:inherit;}
a{color:var(--plum);}

:focus-visible{outline:2px solid var(--plum); outline-offset:2px;}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 36px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces',serif; font-weight:600; font-size:22px;
  color:var(--plum);
  letter-spacing:-.01em;
}
.brand svg{flex:none;}
.topbar-actions{display:flex; align-items:center; gap:16px;}
.topbar-actions button{
  background:var(--paper);border:1px solid var(--line);
  padding:9px 18px; border-radius:999px; cursor:pointer;
  font-size:13.5px; color:var(--ink);
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.topbar-actions button:hover{border-color:var(--plum); color:var(--plum); background:rgba(75,46,61,0.05);}
.topbar-link{font-size:13.5px; color:var(--ink); opacity:.75; text-decoration:none;}
.topbar-link:hover{opacity:1; color:var(--plum);}

.lang-switch{
  display:flex; border:1px solid var(--line); border-radius:999px; padding:2px; flex:none;
}
.lang-btn{
  background:none; border:none; border-radius:999px; padding:5px 10px;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink); opacity:.55;
  cursor:pointer; transition:background-color .15s ease, color .15s ease, opacity .15s ease;
}
.lang-btn:hover{opacity:.85;}
.lang-btn.active{background:var(--plum); color:var(--paper); opacity:1;}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 36px 80px;}
.hero{
  padding:56px 0 36px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end;
}
.hero h1{font-size:44px; line-height:1.14; letter-spacing:-.015em; color:var(--ink);}
.hero p{font-size:16px; color:var(--ink); opacity:.72; max-width:46ch; margin-top:14px; line-height:1.65;}
.hero-stamp{
  justify-self:end;
  width:150px;height:150px;border-radius:50%;
  border:1.5px dashed var(--rose);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:'Fraunces',serif;font-style:italic;color:var(--rose);
  font-size:13.5px; line-height:1.5; padding:14px;
  transform:rotate(-8deg);
  background:rgba(201,123,134,0.04);
}

.builder{
  display:grid; grid-template-columns:1fr 1fr; gap:36px;
  align-items:start;
}
@media (max-width:880px){
  .builder{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr;}
  .hero-stamp{justify-self:start;margin-top:12px;}
}

.panel{
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 28px;
  box-shadow:0 1px 0 rgba(47,59,42,0.03);
  position:relative;
}
.panel + .panel{margin-top:18px;}
.panel::before{
  content:''; position:absolute; left:28px; top:0; width:34px; height:1px; background:var(--rose);
}
.panel-head{display:flex; align-items:baseline; gap:10px; margin-bottom:18px;}
.step-num{font-family:'Fraunces',serif; font-style:italic; color:var(--rose); font-size:13px;}
.panel-title{font-family:'Fraunces',serif; font-weight:500; font-size:17px; color:var(--ink);}
.panel-sub{font-size:12px; color:var(--ink); opacity:.55; margin-top:2px;}

.field-label{
  font-size:13px; font-weight:500; color:var(--ink);
  margin-bottom:10px; display:block;
}
.field-label .hint{font-weight:400; color:var(--ink); opacity:.55; font-size:12px; margin-left:6px;}

.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  border:1px solid var(--line); background:var(--paper);
  padding:8px 16px 8px 10px; border-radius:999px; cursor:pointer;
  font-size:13.5px; color:var(--ink); transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .1s ease;
  user-select:none; display:inline-flex; align-items:center; gap:7px;
}
.chip:hover{border-color:var(--plum); transform:translateY(-1px);}
.chip.active{background:var(--plum); border-color:var(--plum); color:var(--paper);}
.chip .chip-ic{width:16px;height:16px;flex:none;display:flex;align-items:center;justify-content:center;}

.vase-row{display:flex; gap:10px; flex-wrap:wrap;}
.vase-chip{
  border:1px solid var(--line); background:var(--paper); border-radius:12px;
  padding:10px 8px 8px; width:82px; cursor:pointer; text-align:center;
  transition:border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.vase-chip:hover{border-color:var(--plum); transform:translateY(-2px);}
.vase-chip.active{border-color:var(--sage-dark); background:var(--paper-deep); box-shadow:inset 0 0 0 1px var(--sage-dark);}
.vase-chip svg{display:block; margin:0 auto 6px;}
.vase-chip span{font-size:11.5px; color:var(--ink); opacity:.8;}

.flower-row{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.flower-item{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line); border-radius:12px; padding:9px 12px;
  background:var(--paper);
  transition:border-color .15s ease;
}
.flower-item.on{border-color:var(--sage-dark);}
.fi-thumb{
  width:46px; height:46px; border-radius:10px; flex:none;
  background:var(--paper-deep); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  position:relative;
}
.flower-item.on .fi-thumb{background:#FBF7ED; border-color:var(--sage-dark);}
.flower-item:not(.on) .fi-thumb svg{opacity:.35; filter:grayscale(60%);}
.fi-badge{
  position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%;
  background:var(--sage-dark); color:var(--paper); font-size:10px;
  display:flex; align-items:center; justify-content:center;
}
.fi-body{flex:1; min-width:0;}
.fi-name{font-size:14px; cursor:pointer; margin-bottom:6px;}
.swatches{display:flex; gap:6px;}
.swatch{
  width:18px;height:18px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(47,59,42,0.12);
}
.swatch.sel{border-color:var(--ink);}
.stepper{display:flex; align-items:center; gap:7px; flex:none;}
.stepper button{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper); cursor:pointer; font-size:14px; line-height:1;
  display:flex;align-items:center;justify-content:center; padding:0; color:var(--ink);
  transition:border-color .15s ease, color .15s ease;
}
.stepper button:hover{border-color:var(--plum); color:var(--plum);}
.stepper span{font-size:13px; min-width:14px; text-align:center;}
.scene-picker, .envelope-picker{
  width:100%; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
}

.bg-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.bg-chip{
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(47,59,42,0.15);
  transition:transform .15s ease, border-color .15s ease;
}
.bg-chip:hover{ transform:translateY(-2px); }
.bg-chip.active{ border-color:var(--plum); }

.envelope-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.envelope-chip{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  border:1px solid var(--line); border-radius:12px; padding:8px 8px 7px;
  cursor:pointer; background:var(--paper);
  transition:border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.envelope-chip:hover{ border-color:var(--plum); transform:translateY(-2px); }
.envelope-chip.active{ border-color:var(--sage-dark); background:var(--paper-deep); }
.envelope-chip span{ font-size:11px; color:var(--ink); opacity:.8; }

textarea, input[type=text], input[type=email], input[type=password]{
  width:100%; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); padding:12px 14px; font-family:inherit;
  font-size:14.5px; color:var(--ink); resize:vertical;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus{
  border-color:var(--plum); outline:none; box-shadow:0 0 0 3px var(--focus-ring, rgba(75,46,61,0.12));
}
textarea{min-height:110px; line-height:1.55;}
input[type=text], input[type=email], input[type=password]{height:42px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.toggle-line{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:16px;
}
.toggle-line + .toggle-line{border-top:1px solid var(--line);}
.switch{
  width:38px;height:22px;border-radius:999px;background:var(--line);
  position:relative; cursor:pointer; flex:none;
  transition:background-color .15s ease;
}
.switch.on{background:var(--sage-dark);}
.switch .dot{
  width:16px;height:16px;border-radius:50%;background:var(--paper);
  position:absolute; top:3px; left:3px; transition:left .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.switch.on .dot{left:19px;}

.date-inline{margin-top:10px; display:none;}
.date-inline.show{display:block;}
.sub-inline{margin-top:2px; margin-bottom:6px; display:none;}
.sub-inline.show{display:block;}
input[type=date], input[type=time]{
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  padding:9px 10px; font-family:inherit; font-size:13.5px; color:var(--ink);
}

.char-count{
  text-align:right; font-size:11.5px; color:var(--ink); opacity:.45; margin-top:6px;
}
.char-count.warn{color:var(--rose); opacity:.9;}

.pv-replay{
  margin-top:12px; background:none; border:1px solid var(--line); border-radius:999px;
  padding:7px 16px; font-size:12.5px; color:var(--plum); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.pv-replay:hover{border-color:var(--plum); background:rgba(75,46,61,0.05);}
.pv-bloom{animation:pvpulse .7s ease;}
@keyframes pvpulse{
  0%{transform:scale(.9); opacity:.4;}
  60%{transform:scale(1.03);}
  100%{transform:scale(1); opacity:1;}
}

.link-warn{
  margin-top:8px; font-size:11.5px; color:var(--rose); opacity:.9;
}

.share-channels{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px;
}
.share-channel-btn{
  display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  font-size:13.5px; text-decoration:none; color:var(--paper);
  transition:transform .12s ease, box-shadow .15s ease;
}
.share-channel-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(47,59,42,0.4); }
.share-channel-btn.wa{ background:#3FAE59; }
.share-channel-btn.tg{ background:#2AABEE; }
.share-channel-btn.vk{ background:#4C75A3; }

/* ---------- my cards ---------- */
.mine-wrap{max-width:720px; margin:0 auto; padding:40px 36px 80px;}
.mine-note{
  margin-top:10px; font-size:12.5px; color:var(--ink); opacity:.6;
  background:var(--paper-deep); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; line-height:1.5;
}
.mine-list{display:flex; flex-direction:column; gap:10px; margin-top:24px;}
.mine-row{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  background:var(--paper-deep);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mine-row:hover{ border-color:var(--rose); box-shadow:0 10px 24px -18px rgba(47,59,42,0.5); }
.mine-dot{width:12px;height:12px;border-radius:50%;flex:none;}
.mine-info{flex:1; min-width:0;}
.mine-info .mi-to{font-size:14px; color:var(--ink);}
.mine-info .mi-date{font-size:12px; color:var(--ink); opacity:.55; margin-top:2px;}
.mine-actions{display:flex; gap:8px; flex:none;}
.mine-actions button{
  border:1px solid var(--line); background:var(--paper); border-radius:999px;
  padding:7px 14px; font-size:12.5px; color:var(--ink); cursor:pointer;
}
.mine-actions button:hover{border-color:var(--plum); color:var(--plum);}
.mine-empty{text-align:center; padding:60px 20px; opacity:.6;}

.cta-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.btn{
  border-radius:999px; padding:13px 26px; font-size:14.5px; cursor:pointer;
  border:1px solid var(--plum); transition:background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--plum); color:var(--paper); border-color:var(--plum); box-shadow:0 6px 16px -6px rgba(75,46,61,0.5);}
.btn-primary:hover{background:var(--ink); transform:translateY(-1px); box-shadow:0 10px 20px -6px rgba(75,46,61,0.55);}
.btn-primary:active{transform:scale(.98); box-shadow:0 3px 10px -4px rgba(75,46,61,0.5);}
.btn-primary:disabled{opacity:.55; box-shadow:none; cursor:default; transform:none;}
.btn-ghost{background:none; color:var(--plum);}
.btn-ghost:hover{background:rgba(75,46,61,0.06); transform:translateY(-1px);}
.btn-ghost:disabled{opacity:.55; cursor:default; transform:none;}

/* ---------- preview ---------- */
.preview-stage{
  position:sticky; top:24px;
  background:linear-gradient(180deg,var(--paper-deep),var(--paper));
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 30px 60px -36px rgba(47,59,42,0.4);
  padding:26px; display:flex; flex-direction:column; align-items:center;
}
.preview-card{
  width:100%; max-width:360px; background:var(--paper);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(47,59,42,0.35);
}
.preview-occasion-band{
  padding:10px 18px; font-family:'Fraunces',serif; font-style:italic;
  font-size:13px; text-align:center; color:var(--paper);
}
.preview-bouquet{padding:6px 10px 0;}
.preview-msg{
  padding:14px 22px 22px; text-align:center;
}
.preview-msg .to{font-size:12px; color:var(--ink); opacity:.6; margin-bottom:6px;}
.preview-msg .text{
  font-family:'Fraunces',serif; font-size:16px; line-height:1.55; color:var(--ink);
  white-space:pre-wrap;
}
.preview-msg .from{
  margin-top:12px; font-size:12px; color:var(--ink); opacity:.6;
}
.preview-note{
  margin-top:16px; font-size:12.5px; color:var(--ink); opacity:.6; text-align:center; max-width:320px;
}

/* ---------- тёмные фоны сцены (например "Ночь") ----------
   .preview-card / .view-card всегда остаются на var(--paper) и не затрагиваются —
   светлеет только текст, который лежит прямо на градиенте фона сцены. */
.stage-dark .preview-note,
.stage-dark .field-label,
.stage-dark .field-label .hint,
.stage-dark .scene-picker,
.stage-dark .envelope-picker{ color:#F3EEE3; }
.stage-dark .scene-picker,
.stage-dark .envelope-picker{ border-top-color:rgba(243,238,227,0.25); }
.stage-dark .pv-replay{ color:#F3EEE3; border-color:rgba(243,238,227,0.35); }
.stage-dark .pv-replay:hover{ border-color:#F3EEE3; background:rgba(243,238,227,0.1); }
.stage-dark .bg-chip{ box-shadow:inset 0 0 0 1px rgba(243,238,227,0.3); }

/* ---------- share screen ---------- */
.share-wrap{max-width:560px; margin:80px auto; text-align:center;}
.link-box{
  display:flex; gap:8px; margin-top:22px; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:8px 8px 8px 16px;
  background:var(--paper-deep);
}
.link-box input{border:none; background:none; flex:1; font-size:13.5px; color:var(--ink); outline:none;}
.qr-box{
  margin:26px auto 0; width:150px; padding:14px; background:var(--paper);
  border:1px solid var(--line); border-radius:14px;
}
.qr-box img, .qr-box canvas{display:block; margin:0 auto;}
.qr-label{font-size:11px; color:var(--ink); opacity:.55; margin-top:8px;}
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--plum); color:var(--paper); padding:11px 20px; border-radius:999px;
  font-size:13.5px; opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none;
  max-width:86vw; text-align:center; box-shadow:0 14px 30px -10px rgba(47,59,42,0.45);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- viewer ---------- */
.view-stage{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.view-card{
  width:100%; max-width:460px; text-align:center;
}
.view-envelope{
  cursor:pointer; text-align:center; padding:60px 20px;
  border:none; background:none; width:100%;
}
.view-envelope .flap{
  width:180px;height:130px;margin:0 auto 22px; position:relative;
}
.view-open-hint{
  margin-top:18px; font-size:13px; color:var(--ink); opacity:.6; font-family:'Fraunces',serif; font-style:italic;
}
.view-content{display:none;}
.view-content.show{display:block; animation:fadein .6s ease both;}
@keyframes fadein{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.view-occasion-band{
  display:inline-block; padding:6px 18px; border-radius:999px;
  font-family:'Fraunces',serif; font-style:italic; font-size:13px; color:var(--paper);
  margin-bottom:18px;
}
.view-bouquet-wrap{opacity:0; transform:scale(.85); transition:opacity .9s cubic-bezier(.2,.9,.25,1.2), transform .9s cubic-bezier(.2,.9,.25,1.2);}
.view-bouquet-wrap.bloom{opacity:1; transform:scale(1);}
.view-msg{
  margin-top:18px; font-family:'Fraunces',serif; font-size:19px; line-height:1.6; color:var(--ink);
  white-space:pre-wrap; opacity:0; transition:opacity 1s ease;
}
.view-msg.show{opacity:1;}
.view-from{margin-top:16px; font-size:13px; color:var(--ink); opacity:0; transition:opacity 1s ease .3s;}
.view-from.show{opacity:.65;}
.view-footer{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink); opacity:.6;
}
.view-footer a{font-family:'Fraunces',serif; font-style:italic;}
.lock-screen{text-align:center; padding:60px 20px;}
.lock-screen .num{font-family:'Fraunces',serif; font-size:15px; color:var(--rose);}

.view-stage.stage-dark .view-open-hint,
.view-stage.stage-dark .view-msg,
.view-stage.stage-dark .view-from,
.view-stage.stage-dark .view-footer,
.view-stage.stage-dark .lock-screen h1,
.view-stage.stage-dark .lock-screen .eyebrow{ color:#F3EEE3; }
.view-stage.stage-dark .view-footer{ border-top-color:rgba(243,238,227,0.25); }
.view-stage.stage-dark .view-from.show{ opacity:.75; }

.hidden{display:none !important;}
.petal{position:fixed; top:-20px; pointer-events:none; z-index:5;}

/* screen-reader only text, used for aria labels that don't need a visible label */
.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;
}

footer.site-footer{
  text-align:center; padding:30px 20px; font-size:12.5px; color:var(--ink); opacity:.55;
}
footer.site-footer a{color:var(--ink); opacity:.85;}
footer.site-footer a:hover{color:var(--plum); opacity:1;}

/* ---------- boot loading ---------- */
.boot-loading{
  padding:120px 20px; text-align:center; opacity:.5;
  font-family:'Fraunces',serif; font-style:italic; font-size:15px;
}

/* ---------- auth forms (login / register) ---------- */
.auth-wrap{max-width:420px; margin:70px auto; padding:0 20px;}
.auth-form{display:flex; flex-direction:column; gap:12px; margin-top:22px;}
.auth-form input[type=email], .auth-form input[type=password], .auth-form input[type=text]{height:44px;}
.auth-error{color:var(--rose); font-size:13px; min-height:1px;}
.auth-note{
  color:var(--sage-dark); font-size:13.5px; background:var(--paper-deep);
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; line-height:1.5;
}
.auth-switch{margin-top:18px; font-size:13.5px; opacity:.75; text-align:center;}

/* ---------- ad slot (баннеры AdSense / Яндекс.Директ) ---------- */
.ad-slot{
  margin-top:26px; border:1px dashed var(--line); border-radius:14px;
  padding:18px 20px; text-align:center; background:rgba(47,59,42,0.02);
}
.ad-slot-label{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.45; margin-bottom:6px;
}
.ad-slot-body{font-size:12.5px; opacity:.5;}

/* ---------- legal pages ---------- */
.legal-wrap{max-width:680px; margin:0 auto; padding:40px 36px 90px; line-height:1.7;}
.legal-updated{font-size:12.5px; opacity:.55; margin-top:6px;}
.legal-wrap h2{font-family:'Fraunces',serif; font-weight:500; font-size:18px; margin-top:30px; margin-bottom:8px; color:var(--ink);}
.legal-wrap p{font-size:14px; opacity:.8; margin:0;}
.legal-wrap a{color:var(--plum);}