:root{--violet:#3B1A6B;--violet2:#5a2a94;--magenta:#A0348C;--gold:#F2B61C;--gold2:#C9A227;--ivory:#FBF8F1;--navy:#14213D;--mute:#6b6b80;--line:#e6dfd0;--err:#b3261e;--ok:#1d7a4d}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--navy);background:var(--ivory);font-size:16px;line-height:1.45}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.hero{background:linear-gradient(135deg,var(--violet) 0%,#4b1f84 55%,var(--magenta) 140%);color:#fff;display:flex;gap:20px;align-items:center;padding:22px 20px;border-bottom:3px solid var(--gold);position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 -3px 0;height:3px;background:linear-gradient(90deg,var(--gold2),var(--gold),var(--gold2))}
.logo{width:112px;height:112px;border-radius:50%;box-shadow:0 0 0 3px var(--gold),0 8px 24px rgba(0,0,0,.35);flex:none;background:#fff}
.hero-text{min-width:0}
.eyebrow{margin:0 0 2px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-size:44px;line-height:1;margin:0;font-weight:700;letter-spacing:.01em}
.sub{margin:4px 0 2px;font-size:17px;opacity:.95}
.meta{margin:0;font-size:14px;color:#e9dcff}
main{max-width:760px;margin:-14px auto 0;padding:0 14px 28px;position:relative}
form,.done{background:#fff;border-radius:18px;box-shadow:0 10px 40px rgba(59,26,107,.14);padding:0 0 18px;overflow:hidden}
.tabs{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--line);background:#fff;scrollbar-width:none;position:sticky;top:0;z-index:5}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;border:0;background:none;padding:14px 16px;font:500 14px Inter,sans-serif;color:var(--mute);cursor:pointer;border-bottom:3px solid transparent;display:flex;align-items:center;gap:8px;justify-content:center;white-space:nowrap}
.tabs button span{width:22px;height:22px;border-radius:50%;background:#efe9f8;color:var(--violet);display:inline-grid;place-items:center;font-size:12px;font-weight:600}
.tabs button.on{color:var(--violet);border-bottom-color:var(--gold)}
.tabs button.on span,.tabs button.ok span{background:var(--violet);color:#fff}
.bar{height:3px;background:#f0eadb}
.bar i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--violet),var(--magenta),var(--gold));transition:width .3s}
.pane{display:none;padding:20px 20px 4px;animation:fade .25s}
.pane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;color:var(--violet);margin:0 0 14px;font-weight:700}
.field{margin-bottom:14px;position:relative}
.field>label,.field>.dm-row+label{display:block}
label{font-size:13px;font-weight:600;color:var(--navy);display:block;margin-bottom:5px}
label i{color:var(--magenta);font-style:normal}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font:400 16px Inter,sans-serif;color:var(--navy);background:#fdfcf9;border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;outline:0;transition:border .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233B1A6B' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
input:focus,select:focus,textarea:focus{border-color:var(--violet2);box-shadow:0 0 0 3px rgba(90,42,148,.15)}
.field.bad input,.field.bad select,.field.bad textarea,.field.bad .drop,.field.bad .types{border-color:var(--err)}
.err{display:none;color:var(--err);font-size:12.5px;margin-top:4px}
.field.bad .err{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.dm-row{display:grid;grid-template-columns:90px 1fr;gap:8px}
.hint{font-size:13px;color:var(--mute);margin:-4px 0 14px}
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-radius:12px}
.type input{position:absolute;opacity:0}
.type span{display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;transition:.15s;height:100%;background:#fdfcf9}
.type b{font-family:"Cormorant Garamond",serif;font-size:22px;color:var(--violet);line-height:1.1}
.type em{font-style:normal;font-size:11.5px;color:var(--mute);font-weight:400}
.type input:checked+span{background:linear-gradient(160deg,var(--violet),var(--magenta));border-color:var(--violet)}
.type input:checked+span b,.type input:checked+span em{color:#fff}
.type input:focus-visible+span{box-shadow:0 0 0 3px rgba(242,182,28,.5)}
.combo{position:relative}
.list{position:absolute;z-index:20;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1.5px solid var(--line);border-radius:10px;max-height:260px;overflow:auto;box-shadow:0 12px 30px rgba(20,33,61,.15)}
.list li{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:15px}
.list li:hover,.list li.hl{background:#f3ecfb;color:var(--violet)}
.list li small{color:var(--mute);margin-left:6px}
.list li.none{color:var(--mute);cursor:default}
.check{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:14px;margin-top:10px;cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--violet);flex:none}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.seg input{position:absolute;opacity:0}
.seg span{display:block;padding:10px 28px;cursor:pointer;font-weight:600;font-size:14px;color:var(--mute)}
.seg input:checked+span{background:var(--violet);color:#fff}
.drop{position:relative;display:grid;place-items:center;min-height:118px;border:1.5px dashed #cdbfe6;border-radius:12px;background:#faf7ff;cursor:pointer;overflow:hidden;text-align:center;padding:8px;margin:0}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-t{font-size:13.5px;color:var(--violet);font-weight:500;word-break:break-all}
.drop.has{border-style:solid;border-color:var(--gold2);background:#fffaf0}
.prev{max-width:100%;max-height:96px;border-radius:6px;margin-top:6px;object-fit:contain}
.paybox{border:1.5px solid var(--gold2);border-radius:14px;background:linear-gradient(180deg,#fffdf6,#fff8e6);padding:16px;margin:6px 0 16px}
.total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.total span{font-size:13px;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.total b{font-family:"Cormorant Garamond",serif;font-size:34px;color:var(--violet)}
.total em{font-style:normal;font-size:12.5px;color:var(--mute)}
.pay-grid{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:center}
.qr{width:170px;height:auto;border-radius:12px;border:1px solid var(--line);background:#14213D}
dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
dt{color:var(--mute)}
dd{margin:0;font-weight:600;word-break:break-word}
.alert{margin:6px 20px 0;padding:12px 14px;border-radius:10px;background:#fdecea;color:var(--err);font-size:14px}
.nav{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px 0}
.btn{font:600 15px Inter,sans-serif;border:0;border-radius:999px;padding:13px 30px;cursor:pointer;background:var(--violet);color:#fff;transition:.15s;min-width:120px}
.btn:hover{background:var(--violet2);transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--violet);border:1.5px solid var(--violet)}
.btn.gold{background:linear-gradient(90deg,var(--gold2),var(--gold));color:var(--navy)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.done{text-align:center;padding:36px 22px}
.tick{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;background:var(--ok);color:#fff;font-size:34px;display:grid;place-items:center}
footer{text-align:center;color:var(--mute);font-size:12.5px;padding:6px 0 24px;letter-spacing:.04em}
@media(max-width:640px){
  h1{font-size:36px}
  .hero{padding:18px 16px;gap:14px}
  .logo{width:84px;height:84px}
  .grid2{grid-template-columns:1fr}
  .types{grid-template-columns:1fr 1fr}
  .pay-grid{grid-template-columns:1fr;justify-items:center}
  dl{width:100%}
  .nav{position:sticky;bottom:0;background:linear-gradient(0deg,#fff 70%,rgba(255,255,255,0));padding-bottom:calc(12px + env(safe-area-inset-bottom));z-index:6}
  .btn{flex:1}
  .pane{padding:16px 14px 4px}
  .tabs button{padding:12px 11px;font-size:13px}
}