:root{--ink:#000;--ivory:#FAF7F2;--ink80:rgba(0,0,0,.8);--ink60:rgba(0,0,0,.6);--ink45:rgba(0,0,0,.45);--ink12:#E6DCCB;--ink06:#F1EBE0;--ink03:#F6F1E8;
--iv70:rgba(250,247,242,.7);--iv20:rgba(250,247,242,.2);--blue:#1F5BFF;
--serif:"Times New Roman",Times,Georgia,serif;--sans:"Raleway",Arial,sans-serif;--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ivory);color:var(--ink);font:15px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
#app{max-width:520px;margin:0 auto;min-height:100vh;position:relative}
.top{position:sticky;top:0;z-index:20;height:calc(56px + var(--st));padding:var(--st) 12px 0;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;
  background:rgba(250,247,242,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ink06)}
.ib{width:38px;height:38px;border:0;background:transparent;font-size:1.7rem;line-height:1;border-radius:50%;cursor:pointer}
.ib:active{background:var(--ink06)}
.brand{justify-self:center;display:flex;align-items:center;gap:8px;text-decoration:none;grid-column:2}
.brand img{width:28px;height:28px}
.brand span{font-family:var(--serif);font-size:1.45rem;letter-spacing:.32em;margin-right:-.32em}
main{padding:16px 18px calc(96px + var(--sb));outline:none}
.no-tabs main{padding-bottom:40px}
h1{font-family:var(--serif);font-weight:400;font-size:2.1rem;line-height:1.05;margin:10px 0 6px}
h2{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin:24px 0 10px}
.lead{color:var(--ink60);margin:0 0 16px}
.eyebrow{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink45)}
.card{background:#FFFDF9;border:1px solid var(--ink06);border-radius:18px;padding:16px;box-shadow:0 1px 2px var(--ink06)}
.card + .card{margin-top:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:999px;padding:14px 18px;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none}
.btn-black{background:var(--ink);color:var(--ivory)}
.btn-line{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);text-decoration:underline;font-weight:600;padding:10px}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.35}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;font-size:.9rem}
.row span{color:var(--ink60)}.row b{font-weight:600;text-align:right}
.hr{border:0;border-top:1px solid var(--ink06);margin:10px 0}
/* Blue lockup — the only non black/ivory color */
.blue{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--blue);letter-spacing:.01em}
.blue img{width:18px;height:18px;border-radius:5px}
.blue.lg img{width:24px;height:24px;border-radius:7px}.blue.lg{font-size:1.1rem}
.plan{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.82rem}
/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.chip.solid{background:var(--ink);color:var(--ivory)}
.chip.line{border:1px solid var(--ink);color:var(--ink)}
.chip.dash{border:1px dashed var(--ink45);color:var(--ink80)}
.chip.soft{background:var(--ink06);color:var(--ink80)}
.chip.strike{border:1px solid var(--ink45);color:var(--ink45);text-decoration:line-through}
/* access */
.sms{background:#FFFDF9;border:1px solid var(--ink06);border-radius:18px 18px 18px 4px;padding:12px 14px;font-size:.9rem;margin:6px 0 22px;max-width:92%}
.sms small{display:block;color:var(--ink45);font-size:.72rem;margin-bottom:4px}
.sms u{word-break:break-all}
.field{display:block;margin:0 0 14px}
.field > span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink60);margin-bottom:6px}
.input{width:100%;background:#FFFDF9;border:1px solid var(--ink12);border-radius:14px;padding:13px 14px;font-size:1rem;outline:none}
.input:focus{border-color:var(--ink)}
.otp{font-family:var(--serif);font-size:2rem;letter-spacing:.5em;text-align:center;padding:12px 0 12px .5em}
.demo{border:1px dashed var(--ink45);border-radius:12px;padding:10px 12px;font-size:.85rem;color:var(--ink80);margin:0 0 16px}
.err{color:var(--ink);font-weight:700;font-size:.85rem;margin:-6px 0 12px}
/* next payment hero */
.hero{background:var(--ink);color:var(--ivory);border-radius:22px;padding:18px 18px 16px}
.hero .eyebrow{color:var(--iv70)}
.hero .amt{font-family:var(--serif);font-weight:700;font-size:3rem;line-height:1;margin:8px 0 6px}
.hero .sub{color:var(--iv70);font-size:.9rem}
.hero .btn-ivory{background:var(--ivory);color:var(--ink);margin-top:14px}
.hero .blue{background:var(--ivory);padding:3px 8px 3px 4px;border-radius:999px}
.actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.alert{display:flex;gap:12px;align-items:flex-start;background:#FFFDF9;border:1px solid var(--ink12);border-radius:16px;padding:13px 14px;text-decoration:none}
.alert + .alert{margin-top:8px}
.alert .ico{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem}
.alert.hard{border:1.5px solid var(--ink)}
.alert.hard .ico{background:var(--ink);color:var(--ivory)}
.alert.soft .ico{border:1.5px dashed var(--ink45)}
.alert b{display:block;font-size:.95rem}.alert p{margin:2px 0 0;font-size:.84rem;color:var(--ink60)}
.alert .go{margin-left:auto;align-self:center;font-size:1.3rem;color:var(--ink45)}
/* orders */
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink06);border-radius:999px;padding:4px;margin:4px 0 14px}
.seg button{border:0;background:transparent;border-radius:999px;padding:9px 6px;font-weight:700;font-size:.85rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ivory)}
.order{display:flex;gap:14px;text-decoration:none;background:#FFFDF9;border:1px solid var(--ink06);border-radius:18px;padding:12px;box-shadow:0 1px 2px var(--ink06)}
.order + .order{margin-top:10px}
.pbox{flex:none;width:92px;border-radius:12px;background:var(--ink);color:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 4px;text-align:center}
.pbox span{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.65}
.pbox b{font-family:var(--serif);font-weight:700;font-size:1.65rem;line-height:1;white-space:nowrap}
.pbox.muted{background:var(--ink06);color:var(--ink45)}
.oinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.oname{font-family:var(--serif);font-size:1.2rem;line-height:1.15}
.ometa{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem;color:var(--ink60)}
.ship{font-size:.8rem;color:var(--ink80);display:flex;gap:6px;align-items:center}
.ship:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.empty{color:var(--ink60);text-align:center;padding:30px 0}
/* order detail */
.piece{display:flex;gap:14px;align-items:center}
.piece img{width:104px;height:104px;border-radius:14px;object-fit:cover;background:var(--ivory);flex:none}
.progress{height:10px;border-radius:99px;background:var(--ink06);overflow:hidden;margin:10px 0 6px}
.progress i{display:block;height:100%;background:var(--ink);border-radius:99px}
.pnums{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink60)}
.pnums b{color:var(--ink)}
.steps{list-style:none;margin:6px 0 0;padding:0}
.steps li{position:relative;padding:0 0 14px 24px;font-size:.88rem;color:var(--ink45)}
.steps li:before{content:"";position:absolute;left:4px;top:5px;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink45);background:var(--ivory)}
.steps li:after{content:"";position:absolute;left:9px;top:17px;bottom:0;border-left:1.5px solid var(--ink12)}
.steps li:last-child:after{display:none}
.steps li.done{color:var(--ink)}.steps li.done:before{background:var(--ink);border-color:var(--ink)}
.steps li.now{color:var(--ink);font-weight:700}.steps li.now:before{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink12)}
.steps small{display:block;font-weight:500;color:var(--ink60)}
/* payments */
.filters{display:flex;gap:8px;overflow-x:auto;margin:4px -18px 12px;padding:0 18px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;border:1px solid var(--ink12);background:#FFFDF9;border-radius:999px;padding:7px 13px;font-weight:600;font-size:.85rem;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.pay{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--ink06)}
.pay:last-child{border-bottom:0}
.pay .d{font-weight:700;font-size:.92rem}
.pay .a{font-family:var(--serif);font-weight:700;font-size:1.25rem;text-align:right}
.pay .m{font-size:.8rem;color:var(--ink60)}
.pay .s{text-align:right}
.list{background:#FFFDF9;border:1px solid var(--ink06);border-radius:18px;padding:2px 16px}
/* upload */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.opt{border:1px solid var(--ink12);background:#FFFDF9;border-radius:14px;padding:12px;text-align:left;font-weight:700;cursor:pointer}
.opt small{display:block;font-weight:500;color:var(--ink60);font-size:.75rem}
.opt[aria-pressed="true"]{border:1.5px solid var(--ink);box-shadow:0 0 0 3px var(--ink06)}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--ink45);border-radius:16px;padding:22px 12px;background:#FFFDF9;text-align:center;cursor:pointer;margin-bottom:16px}
.drop b{font-size:.95rem}.drop small{color:var(--ink60)}
.drop.has{border-style:solid;border-color:var(--ink)}
.done-card{text-align:center;padding:26px 18px}
.done-card .big{width:62px;height:62px;border-radius:50%;margin:0 auto 12px;border:2px dashed var(--ink);display:grid;place-items:center;font-size:1.6rem}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#000 50%),linear-gradient(135deg,#000 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
/* account */
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--ink12);border-radius:99px;transition:.2s}
.switch i:before{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#FFFDF9;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.switch input:checked + i{background:var(--ink)}
.switch input:checked + i:before{transform:translateX(20px)}
.pref{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ink06)}
.pref:last-child{border-bottom:0}
.pref b{display:block;font-size:.92rem}.pref small{color:var(--ink60);font-size:.8rem}
.foot{text-align:center;color:var(--ink45);font-size:.75rem;margin:28px 0 0}
/* tab bar */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(250,247,242,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--ink12);padding:6px 0 calc(6px + var(--sb))}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--ink45);font-size:.7rem;font-weight:700;padding:4px 0}
.tabs svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs a.on{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--sb));transform:translate(-50%,16px);max-width:calc(100% - 32px);background:var(--ink);color:var(--ivory);
  border-radius:14px;padding:11px 16px;font-size:.88rem;font-weight:600;text-align:center;opacity:0;pointer-events:none;transition:.22s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* documents (print-styled) */
.doc{background:#FFFDF9;border:1px solid var(--ink12);border-radius:16px;padding:20px 18px;margin-top:6px}
.doc-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.doc-brand{font-family:var(--serif);letter-spacing:.24em;font-size:1rem;margin-top:6px}
.doc-co{font-size:.74rem;color:var(--ink60);text-align:right;line-height:1.45}
.doc-title{font-family:var(--serif);font-size:1.8rem;margin:18px 0 10px}
.doc-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:10px 0;border-top:1px solid var(--ink12);border-bottom:1px solid var(--ink12);margin-bottom:12px}
.doc-meta span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink45);font-weight:700}
.doc-meta b{font-size:.9rem}
.doc-t{width:100%;border-collapse:collapse;font-size:.86rem}
.doc-t th{text-align:left;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink45);padding:6px 0;border-bottom:1px solid var(--ink12)}
.doc-t th:last-child,.doc-t td:last-child{text-align:right}
.doc-t td{padding:8px 0;border-bottom:1px solid var(--ink06);vertical-align:top}
.doc-t td small{color:var(--ink60)}
.doc-t tr.tot td{font-weight:800;border-bottom:1.5px solid var(--ink)}
.doc-t.cal td:nth-child(3){text-align:right;font-weight:600}.doc-t.cal th:nth-child(3){text-align:right}
.doc-t.cal td:last-child{text-align:right}
.doc-note{font-size:.78rem;color:var(--ink60);margin:12px 0 0}
.doc h3{font-size:.9rem;margin:14px 0 4px}.doc p{font-size:.86rem;margin:0 0 6px}
.draft{border:1.5px dashed var(--ink);border-radius:10px;padding:8px 10px;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;margin:6px 0 10px}
.sig{border-top:1px solid var(--ink12);margin-top:18px;padding-top:12px}
.sig-name{font-family:var(--serif);font-style:italic;font-size:2rem;margin:4px 0}
.doc-actions{display:grid;gap:8px;margin-top:14px}
@media print{
  .top,.tabs,.doc-actions,.toast,.foot{display:none!important}
  html,body{background:#FFFDF9}
  main{padding:0}
  .doc{border:0;padding:0}
}
/* bottom sheet + Telegram preview */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;background:var(--ivory);border-radius:22px 22px 0 0;padding:10px 20px calc(22px + var(--sb));box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--ink12);margin:0 auto 8px}
.sheet-x{position:absolute;right:10px;top:8px;font-size:1.6rem}
body.sheet-open{overflow:hidden}
.radios{display:grid;gap:8px;margin-bottom:14px}
.radio{display:flex;align-items:center;gap:10px;background:#FFFDF9;border:1px solid var(--ink12);border-radius:14px;padding:12px 14px;font-weight:600;cursor:pointer}
.radio input{accent-color:#000;width:18px;height:18px}
.radio:has(input:checked){border:1.5px solid var(--ink)}
textarea.input{resize:vertical;font:inherit}
.opt:disabled{cursor:not-allowed}
.tg{margin-top:16px;background:#F1EBE0;border-radius:16px;padding:12px;font-family:-apple-system,"Segoe UI",Roboto,sans-serif}
.tg-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.tg-h small{color:#6b7682;font-size:.72rem}
.tg-logo{width:26px;height:26px;border-radius:50%;background:#2AABEE;color:#FFFDF9;display:grid;place-items:center;font-size:.8rem}
.tg-b{background:#FFFDF9;border-radius:4px 14px 14px 14px;padding:10px 12px;font-size:.88rem;line-height:1.4;color:#111}
.tg-f{font-size:.7rem;color:#6b7682;margin-top:8px;text-align:center}
.keybox{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1rem;background:#FFFDF9;border:1.5px dashed var(--ink);border-radius:12px;padding:14px;word-break:break-all;text-align:center;letter-spacing:.02em}