/* TONEvintage skin on the shared sell layout */
:root{
  --paper:#F2F6FF;--ink:#10243E;--sand:#FFF3C2;--mute:#3D5270;--saffron:#08785A;
  --rule:rgba(16,36,62,.2);
  --state:'Lilita One','Arial Rounded MT Bold',system-ui,sans-serif;
  --name:'Lilita One','Arial Rounded MT Bold',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,sans-serif;
  --data:'Figtree',system-ui,sans-serif;
}
body{font-size:17px}
h1,h2,h3{font-weight:400;letter-spacing:0}
h2 em,h3 em,.acc{font-style:normal;font-weight:400;color:var(--saffron)}
.state{text-transform:none;line-height:1}
.state em{font-family:var(--name);font-style:normal;color:var(--saffron);font-size:.55em;margin-top:.25em}
.lab{letter-spacing:.04em;font-weight:800}
.data{font-weight:800}
/* header: green like the shop */
.hd{background:#08785A;border-bottom:2px solid var(--ink);color:#fff}
.hd a{color:#fff}
.hd .btn{background:#FFD21F;color:var(--ink)!important;border-color:var(--ink)}
.tvl{display:inline-flex;align-items:center;gap:8px}
.tvl-t{background:#FFD21F;color:var(--ink);font:400 26px/1 var(--name);padding:6px 12px;border:4px solid #fff;transform:rotate(-3deg);box-shadow:3px 3px 0 #064D3A}
.tvl-v{background:#D92B2B;color:#fff;font:800 11px/1 var(--body);letter-spacing:2px;padding:6px 8px;border:3px solid #fff;transform:rotate(4deg);box-shadow:3px 3px 0 #064D3A}
/* buttons: yellow pill like the shop */
.btn{background:#FFD21F;color:var(--ink);border:2px solid var(--ink);border-radius:999px;font-weight:800;box-shadow:0 3px 0 var(--ink)}
.btn:hover{background:#FFE15C}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:none}
.btn.sm{box-shadow:none}
/* panels */
.card,.total,.drop,.tile,.pay label,details,.box,.note{border-radius:14px}
.card{background:#fff;border:2px solid var(--ink)}
.band-sand{background:#FFF3C2}
.band-ink{background:var(--ink);color:#fff}
.tile{background:#fff;border:2px solid var(--ink)}
input,select,textarea{border-radius:10px}
.chip{border-radius:999px}
/* hero art: three sticker tiles */
.tv-hero-ill{position:relative;height:300px;margin:18px 0 8px}
.tv-stk{position:absolute;width:170px;height:150px;background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:6px 8px 0 #C8D3E6;display:flex;align-items:center;justify-content:center}
.tv-stk svg{width:130px;height:auto}
.tv-stk-a{left:4%;top:30px;transform:rotate(-6deg);background:#FFF3C2}
.tv-stk-b{left:36%;top:0;transform:rotate(3deg);background:#E4F5EF}
.tv-stk-c{left:66%;top:60px;transform:rotate(-2deg);background:#FFE1EC}
@media (max-width:640px){.tv-hero-ill{height:220px}.tv-stk{width:120px;height:108px}.tv-stk svg{width:92px}.tv-stk-b{left:34%}.tv-stk-c{left:64%}}
.ft{border-top:2px solid var(--ink)}
.ft-bot i{display:none}
.card{padding:28px 32px 32px}
.prog i{border-radius:4px}
.buy .tile{background:#fff;border-radius:14px}
.buy figure:nth-child(3n+1) .tile{background:#FFF3C2}
.buy figure:nth-child(3n+2) .tile{background:#E4F5EF}
.buy figure:nth-child(3n) .tile{background:#FFE1EC}
.drop{background:#FFF3C2;border:2px dashed var(--ink)}
@media (max-width:640px){.card{padding:20px 16px 24px}}