/* Trenva Pay — clean design ported from the approved mockup. Default: Plain White. */
:root, [data-theme="light"]{
  --bg:#fbfbfc; --panel:#ffffff; --panel2:#f6f6f8; --line:#e7e7ec;
  --text:#141419; --muted:#6f6f7c; --accent:#ff9500; --accent2:#e07f00;
  --green:#12994f; --tint:#fff6e8; --track:#f0f0f3; --chip:#ffffff;
  --shadow:0 1px 3px rgba(20,20,30,.05); --herobg:linear-gradient(120deg,#fff7ea,#ffffff 60%);
}
[data-theme="dark"]{
  --bg:#0b0b10; --panel:#14141c; --panel2:#1a1a24; --line:#262633;
  --text:#f5f5f7; --muted:#9a9aad; --accent:#ff9500; --accent2:#ffb340;
  --green:#2ecc71; --tint:rgba(255,149,0,.13); --track:#1a1a24; --chip:#ffffff;
  --shadow:none; --herobg:linear-gradient(120deg,#14100a,#0b0b10 55%);
}
[data-theme="colored"]{
  --bg:#faf3e7; --panel:#ffffff; --panel2:#fdf8ef; --line:#eadfc8;
  --text:#2b1c08; --muted:#8a7452; --accent:#ff9500; --accent2:#e07f00;
  --green:#12994f; --tint:#ffefd6; --track:#f3e8d2; --chip:#ffffff;
  --shadow:0 1px 3px rgba(60,35,0,.06); --herobg:linear-gradient(120deg,#fff3da,#faf3e7 60%);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
header.site{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 0;position:relative}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.logo .mark,.fmark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#ff6a00);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;box-shadow:0 4px 14px rgba(255,149,0,.35)}
.logo .word em{font-style:normal;color:var(--accent)}
.nav .sp{flex:1}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:12px 22px;border-radius:14px;border:0;cursor:pointer;font-size:15px}
.btn:hover{background:var(--accent2)}
.btn.ghost{background:var(--panel);color:var(--text);border:1px solid var(--line)}
.btn.big{padding:16px 28px;font-size:17px;border-radius:16px}
.btn.sm{padding:9px 16px;border-radius:11px;font-size:14px}
.btn.block{display:block;width:100%;text-align:center}
.bell{position:relative;width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer}
.bell .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#e5484d;border:1.5px solid var(--panel)}
.avatar{width:44px;height:44px;border-radius:13px;background:#141419;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
[data-theme="dark"] .avatar{background:var(--accent);color:#171106}
.hambwrap{position:relative}
.hamb{width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);font-size:19px;cursor:pointer}
.menu{display:none;position:absolute;right:0;top:54px;width:250px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(10,10,20,.16);padding:8px;z-index:50}
.menu.open{display:block}
.menu a{display:block;padding:10px 12px;border-radius:10px;font-weight:600;font-size:15px}
.menu a:hover{background:var(--panel2)}
.menu .signout-link{color:var(--accent2)}
.menu-themes{border-top:1px solid var(--line);margin-top:6px;padding:10px 12px 6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.menu-themes span{font-size:12.5px;color:var(--muted);width:100%}
.menu-themes button{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:99px;padding:6px 12px;font-size:12.5px;cursor:pointer;font-weight:600}
.menu-themes button.on{border-color:var(--accent);color:var(--accent)}
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:var(--panel2)}
.ticker .track{display:flex;gap:44px;white-space:nowrap;padding:8px 0;font-size:13.5px;color:var(--muted);animation:tick 30s linear infinite;width:max-content}
.ticker b{color:var(--accent)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero{padding:54px 0 40px}
.hero h1{font-size:clamp(34px,6vw,56px);line-height:1.05;font-weight:900;letter-spacing:-.5px;max-width:720px}
.hero h1 .hl{color:var(--accent)}
.hero p{color:var(--muted);font-size:18px;max-width:580px;margin:16px 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:26px;margin-top:32px;flex-wrap:wrap}
.stats div b{display:block;font-size:22px}
.stats div span{color:var(--muted);font-size:13px}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
a.card:hover{border-color:var(--accent)}
section{padding:26px 0}
h2.sec{font-size:24px;font-weight:800;margin-bottom:6px}
p.sec-sub{color:var(--muted);margin-bottom:16px}
.logochip{display:flex;align-items:center;justify-content:center;background:var(--chip);border:1px solid var(--line);border-radius:14px;height:56px;padding:8px 12px;overflow:hidden}
.logochip img{max-height:38px;max-width:100%;object-fit:contain}
.logochip.sm{height:44px;border-radius:11px;padding:6px 9px}
.logochip.sm img{max-height:30px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 10px;border-radius:14px;background:var(--b,#333);color:var(--bt,#fff);font-weight:900;font-size:15px}
.badge.sm{min-width:40px;height:40px;border-radius:11px;font-size:12px}
.tile{display:flex;flex-direction:column;gap:10px}
.tile .tname{font-weight:700;font-size:16px}
.tile .tsub{color:var(--muted);font-size:13px}
.plan{display:flex;flex-direction:column;gap:6px}
.plan .size{font-size:23px;font-weight:900}
.plan .price{color:var(--accent2);font-weight:800;font-size:18px}
.plan .val{color:var(--muted);font-size:13px}
.pop{font-size:11px;background:var(--accent);color:#fff;font-weight:800;padding:3px 9px;border-radius:99px;align-self:flex-start}
.pkg{display:flex;gap:12px;align-items:center}
.pkg .pname{font-weight:800;font-size:16px}
.pkg .pprice{color:var(--accent2);font-weight:800}
.walletcard{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.walletcard .bal{font-size:38px;font-weight:900;letter-spacing:-.5px}
.walletcard .lbl{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:1.4px;font-weight:600}
.wsub{color:var(--muted);margin:4px 0 18px}
input,select{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:13px;color:var(--text);padding:13px 14px;font-size:16px;margin:6px 0 14px}
label{font-size:14.5px;font-weight:600}
.help{color:var(--muted);font-size:13.5px;margin:-8px 0 14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.chip{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:9px 14px;border-radius:99px;cursor:pointer;font-size:14px}
a.chip.sel{border-color:var(--accent);color:var(--accent2)}
.pickrow{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px;cursor:pointer}
.pickrow input{width:auto;margin:0}
.pickrow .pname{font-size:14.5px;font-weight:600}
.msg{padding:12px 16px;border-radius:12px;margin:14px 0;font-size:15px}
.msg.success{background:rgba(46,204,113,.13);border:1px solid rgba(46,204,113,.4)}
.msg.error{background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.4)}
.msg.info{background:var(--tint);border:1px solid var(--accent)}
table.tx{width:100%;border-collapse:collapse}
table.tx td,table.tx th{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:15px}
.amt-pos{color:var(--green);font-weight:800}.amt-neg{font-weight:800}
.receipt{text-align:center;padding:40px 20px}
.receipt .tick{width:84px;height:84px;border-radius:50%;background:rgba(46,204,113,.13);border:2px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:42px;color:var(--green);margin:0 auto 18px}
footer.site{border-top:1px solid var(--line);margin-top:36px;padding:30px 0 26px;background:var(--panel)}
.fmark{margin-bottom:14px}
.ftag{color:var(--muted);max-width:560px;font-size:15.5px}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 16px}
.pills a{border:1px solid var(--line);border-radius:99px;padding:9px 17px;font-weight:600;font-size:14.5px;background:var(--panel)}
.pills a:hover{border-color:var(--accent)}
.fnote{color:var(--muted);font-size:13px}
.demo-tag{font-size:11px;font-weight:800;letter-spacing:1px;background:var(--accent);color:#fff;padding:3px 8px;border-radius:6px}
.formcard{max-width:440px;margin:36px auto}
.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.kv span{color:var(--muted)}
.meterstrip{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-bottom:16px}
.meterstrip img{width:100%;height:130px;object-fit:cover;display:block}
.est{font-size:13.5px;color:var(--muted)}
.est b{color:var(--accent2)}
.qa .tile{align-items:flex-start;gap:12px}
.qa .ic,.txnrow .ic{width:52px;height:52px;border-radius:14px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:23px}
.txnrow{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.txnrow:last-child{border-bottom:0}
.txnrow .ic{width:46px;height:46px;font-size:20px;border-radius:13px;flex:none}
.txnrow .r{text-align:right}
.txnrow .st{color:var(--green);font-size:13px;font-weight:600}
.tile.dim{opacity:.55}
.soon{font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--accent2)}
.promo{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.bigcard{padding:26px}
.segmented{display:flex;background:var(--track);border-radius:13px;padding:4px;margin:6px 0 16px}
.segmented button{flex:1;border:0;background:transparent;padding:10px;border-radius:10px;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer}
.segmented button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 4px rgba(10,10,20,.12)}
.nettiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 18px}
@media(max-width:760px){.nettiles{grid-template-columns:repeat(2,1fr)}}
.nettile{border:1.5px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:9px;align-items:stretch;background:var(--panel)}
.nettile .nm{font-weight:700;text-align:center;font-size:14.5px}
.nettile.sel{border-color:var(--accent);background:var(--tint)}
.plangrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:6px 0 18px}
@media(max-width:560px){.plangrid{gap:9px}.plancard{padding:13px}.plancard .size{font-size:19px}}
.plancard{position:relative;border:1.5px solid var(--line);border-radius:16px;padding:16px;background:var(--panel);text-align:left;cursor:pointer;font-family:inherit;color:var(--text);width:100%}
.plancard .size{font-size:21px;font-weight:900;display:block}
.plancard .price{color:var(--accent2);font-weight:800;font-size:16.5px;display:block;margin-top:2px}
.plancard .days{color:var(--muted);font-size:13px;display:block}
.plancard .tagb{position:absolute;top:12px;right:12px;font-size:10.5px;background:var(--accent);color:#fff;font-weight:800;padding:3px 9px;border-radius:99px}
.plancard.sel{border-color:var(--accent);background:var(--tint)}
.summary{border:1.5px dashed var(--line);border-radius:16px;background:var(--panel2);padding:8px 18px;margin-bottom:18px}
.summary .kv:last-child{border-bottom:0}
.summary .kv b{font-weight:700}
.pkgtile{position:relative;border:1.5px solid var(--line);border-radius:16px;padding:16px;text-align:left;cursor:pointer;font-family:inherit;color:var(--text);width:100%}
.pkgtile .pname{font-size:18px;font-weight:800;display:block;margin-top:8px}
.pkgtile .pprice{color:var(--accent2);font-weight:800;font-size:16.5px;display:block}
.pkgtile .pdays{color:var(--muted);font-size:13px;display:block}
.pkgtile.sel{border-color:var(--accent)}
[data-theme="dark"] .pkgtile{background:var(--panel2)!important}
.radiotile{cursor:pointer}
.radiotile input{position:absolute;opacity:0;pointer-events:none}
.radiotile{position:relative}
button.chip.sel{border-color:var(--accent);background:var(--tint);color:var(--accent2);font-weight:700}
.billpanel{display:none}
.billpanel.on{display:block}