@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');:root{--bg:#070c11;--s:#0e151d;--s2:#111b24;--line:#1e2a34;--text:#f4f8fa;--muted:#71808e;--mint:#45dfbf;--red:#ff6878}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:radial-gradient(500px 280px at 50% -120px,#12372f,transparent),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}.app{max-width:650px;margin:auto;padding-bottom:96px;min-height:100vh}button,input,select{font:inherit}button{border:0;color:inherit;background:none}header{display:flex;justify-content:space-between;align-items:center;padding:24px 17px 14px}.overline,.title span,.head small,.sheetHead small{font-size:8px;letter-spacing:1.7px;font-weight:800;color:#647483}h1{font-size:24px;letter-spacing:-1px;margin:3px 0}h1 em{font-size:9px;font-style:normal;background:#42dcbc;color:#052018;border-radius:5px;padding:3px 5px;vertical-align:top}.round{width:42px;height:42px;background:#101922;border:1px solid #26343e;border-radius:14px}.page{display:none;padding:0 15px;animation:in .25s}.page.active{display:block}@keyframes in{from{opacity:0;transform:translateY(5px)}}.shift{display:grid;grid-template-columns:25px 1fr auto;align-items:center;background:#0d1719;border:1px solid #1c3b35;border-radius:15px;padding:11px 12px;margin-bottom:10px}.shift>span{color:#50645f}.shift small,.shift b{display:block}.shift small{font-size:7px;color:#5e7f77}.shift b{font-size:10px;margin-top:2px}.shift button{font-size:8px;font-weight:800;color:#45dfbf;background:#14332b;padding:8px 10px;border-radius:9px}.balance{background:linear-gradient(145deg,#14252b,#0b141b);border:1px solid #263840;border-radius:25px;padding:21px;box-shadow:0 18px 55px #0006}.balanceTop,.balanceFoot,.head,.sheetHead{display:flex;justify-content:space-between;align-items:center}.balanceTop{font-size:8px;color:#7f909b;font-weight:800}.balanceTop span:last-child{color:#4ce0c2}.balance>strong{display:block;font-size:37px;letter-spacing:-2px;margin:9px 0 14px}.progress{height:6px;background:#17262a;border-radius:10px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3bd8b8,#48e48d);transition:.5s}.balanceFoot{margin-top:10px;font-size:8px;color:#71818d}.balanceFoot b{color:#a8b6bd}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.metrics>div{background:var(--s);border:1px solid var(--line);border-radius:16px;padding:13px}.metrics small,.metrics b,.metrics span{display:block}.metrics small{font-size:7px;color:#687887;font-weight:800}.metrics b{font-size:14px;margin:6px 0}.metrics span{font-size:7px;color:#49d7b9}.metrics .red{color:#e36b77}.head{margin:24px 2px 10px}.head h2,.title h2{font-size:17px;margin:3px 0}.head button{font-size:9px;color:#4dd9c0}.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.actions button{height:90px;text-align:left;background:linear-gradient(145deg,#101820,#0a1118);border:1px solid var(--line);border-radius:18px;padding:12px}.actions i{float:right;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;font-style:normal;font-weight:900}.grab{background:#1269ed}.green{background:#06a85b}.purple{background:#6552d8}.rose{background:#a93f4d}.actions b,.actions span{display:block}.actions b{font-size:11px;margin-top:13px}.actions span{font-size:8px;color:#6c7b88;margin-top:3px}.walletStrip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--s);border:1px solid var(--line);border-radius:18px;overflow:hidden}.walletStrip>div{padding:13px 10px;border-right:1px solid var(--line)}.walletStrip>div:last-child{border:0}.walletStrip small,.walletStrip b{display:block}.walletStrip small{font-size:7px;color:#6e7d8a}.walletStrip b{font-size:10px;margin-top:7px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-bottom:5px}.blue{background:#438aff}.mint{background:#45dfbf}.lime{background:#65df70}.chart{height:135px;background:var(--s);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;align-items:flex-end;gap:7px}.barcol{flex:1;display:flex;height:100%;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}.barcol i{display:block;width:70%;min-height:2px;border-radius:5px 5px 2px 2px;background:linear-gradient(#4be0c2,#238c78)}.barcol small{font-size:6px;color:#657582}.list{display:grid;gap:7px}.item{display:grid;grid-template-columns:36px 1fr auto;align-items:center;background:var(--s);border:1px solid var(--line);border-radius:15px;padding:10px}.badge{width:32px;height:32px;border-radius:10px;background:#18232c;display:grid;place-items:center;font-size:9px;font-weight:800}.item b,.item small{display:block}.item b{font-size:10px}.item small{font-size:7px;color:#6b7a87;margin-top:3px}.amt{color:#48da98}.amt.out{color:#ff7582}.title{margin:10px 2px 17px}.period{display:flex;background:#0d151c;border:1px solid var(--line);border-radius:13px;padding:4px;margin-bottom:10px}.period button{flex:1;padding:9px;border-radius:9px;font-size:8px;color:#71808d}.period .on{background:#18252c;color:#50dec3}.bigcard,.card,.walletHero{background:var(--s);border:1px solid var(--line);border-radius:19px;padding:15px}.bigcard>small,.walletHero small{font-size:7px;color:#6f7f8c}.bigcard>strong,.walletHero strong{display:block;font-size:27px;margin:6px 0 15px}.tall{height:175px;border:0;padding:0;background:transparent}.row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:9px}.row:last-child{border:0}.walletHero{background:linear-gradient(145deg,#14252b,#0c151b)}.walletHero span{font-size:8px;color:#74838f}.primary,.secondary{width:100%;padding:14px;border-radius:13px;margin:9px 0;font-size:10px;font-weight:900}.primary{background:linear-gradient(90deg,#43dfc0,#34ce91);color:#04130e}.secondary{background:#141e27;border:1px solid #26333e}.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}input,select{width:100%;background:#091016;color:white;border:1px solid #25333e;border-radius:12px;padding:12px;outline:none}.settings{padding:0;overflow:hidden}.settings button,.settings label{width:100%;display:grid;grid-template-columns:30px 1fr 15px;align-items:center;text-align:left;padding:14px;border-bottom:1px solid var(--line);font-size:15px}.settings span b,.settings span small{display:block}.settings span b{font-size:10px}.settings span small{font-size:7px;color:#6e7d8a;margin-top:3px}.settings i{font-style:normal;color:#62717e}.settings input{display:none}.version{text-align:center;color:#4e5c68;font-size:8px;line-height:1.8;margin:30px}nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:min(650px,100%);height:78px;display:grid;grid-template-columns:1fr 1fr 68px 1fr 1fr;background:#090f15f2;border-top:1px solid #1c2731;backdrop-filter:blur(20px);padding-bottom:env(safe-area-inset-bottom)}nav button{color:#61707d;font-size:18px}nav button span{display:block;font-size:7px;margin-top:3px}.nav .on,nav .on{color:#48dcc1}.add{position:relative}.add i{position:absolute;left:8px;top:-17px;width:52px;height:52px;border-radius:17px;background:linear-gradient(145deg,#50e3c4,#28bf8f);color:#03100c;display:grid;place-items:center;font-size:25px;font-style:normal;box-shadow:0 8px 25px #27d3a642}.sheet{position:fixed;inset:0;z-index:20}.hidden{display:none}.shade{position:absolute;inset:0;background:#010408cc;backdrop-filter:blur(5px)}.panel{position:absolute;bottom:0;width:100%;max-height:92vh;overflow:auto;background:#101820;border:1px solid #293743;border-bottom:0;border-radius:27px 27px 0 0;padding:8px 17px 28px;animation:up .3s}@keyframes up{from{transform:translateY(100%)}}.handle{width:40px;height:4px;background:#3a4854;border-radius:5px;margin:2px auto 8px}.sheetHead h2{font-size:18px;margin:3px 0}.sheetHead button{font-size:25px}.panel label{display:block;font-size:9px;color:#82919e;margin:12px 0}.panel input,.panel select{margin-top:6px;font-size:15px}.formPart{display:none}.seg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px}.seg input{display:none}.seg label{margin:0;text-align:center;background:#151e27;border:1px solid #27343e;padding:11px;border-radius:11px}.seg input:checked+label{background:#14352d;border-color:#36cbaa;color:#4fe0c3}.preview{background:#0b211c;border:1px solid #1d493d;border-radius:13px;padding:11px;font-size:9px;line-height:1.7}.toast{position:fixed;z-index:50;top:18px;left:50%;transform:translate(-50%,-80px);background:#e8fff8;color:#052018;padding:10px 15px;border-radius:12px;font-size:9px;font-weight:800;transition:.3s}.toast.show{transform:translate(-50%,0)}@media(min-width:520px){.actions{grid-template-columns:repeat(4,1fr)}}
/* ===== v5.1 MOBILE-FIRST READABILITY OVERRIDE ===== */
body{font-size:16px}
.app{max-width:480px}
header{padding:22px 18px 15px}
.overline,.title span,.head small,.sheetHead small{font-size:11px;letter-spacing:1.25px}
h1{font-size:29px}
.round{width:48px;height:48px;font-size:20px}
.page{padding:0 16px}
.shift{grid-template-columns:28px 1fr auto;padding:14px}
.shift small{font-size:10px}.shift b{font-size:14px;margin-top:4px}.shift button{font-size:11px;padding:10px 12px}
.balance{padding:22px;border-radius:24px}
.balanceTop{font-size:11px}
.balance>strong{font-size:40px;margin:12px 0 16px}
.progress{height:8px}
.balanceFoot{font-size:11px;margin-top:12px}
.metrics{gap:10px}
.metrics>div{padding:15px;min-height:92px}
.metrics small{font-size:10px}.metrics b{font-size:17px;margin:8px 0}.metrics span{font-size:10px}
.head{margin:26px 2px 12px}.head h2,.title h2{font-size:20px}.head button{font-size:12px}
.actions{gap:10px}.actions button{height:112px;padding:15px;border-radius:20px}.actions i{width:38px;height:38px;font-size:18px}.actions b{font-size:15px;margin-top:17px}.actions span{font-size:11px;margin-top:5px}
.walletStrip{display:grid;grid-template-columns:1fr;border-radius:19px}
.walletStrip>div{padding:14px 15px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:6px}
.walletStrip>div:last-child{border-bottom:0}.walletStrip .dot{margin:0}.walletStrip small{font-size:12px}.walletStrip b{font-size:14px;margin:0}
.chart{height:160px;padding:16px;gap:8px}.barcol small{font-size:9px}
.item{grid-template-columns:44px 1fr auto;padding:13px}.badge{width:38px;height:38px;font-size:11px}.item b{font-size:13px}.item small{font-size:10px;margin-top:5px}.amt{font-size:13px}
.title{margin:12px 2px 20px}.period button{padding:12px;font-size:11px}
.bigcard,.card,.walletHero{padding:17px;border-radius:20px}.bigcard>small,.walletHero small{font-size:10px}.bigcard>strong,.walletHero strong{font-size:31px}.walletHero span{font-size:11px}
.row{padding:14px 0;font-size:12px;gap:15px}.row b{text-align:right}
.primary,.secondary{padding:16px;min-height:52px;font-size:12px}
.filters{gap:9px}input,select{font-size:16px;padding:14px;min-height:50px}
.settings button,.settings label{grid-template-columns:34px 1fr 18px;padding:17px;font-size:18px}.settings span b{font-size:13px}.settings span small{font-size:10px;margin-top:4px}
.version{font-size:10px}
nav{height:86px}.app{padding-bottom:105px}nav button{font-size:21px}nav button span{font-size:10px;margin-top:5px}.add i{width:56px;height:56px;left:6px;font-size:27px}
.panel{padding:9px 18px 32px}.sheetHead h2{font-size:22px}.sheetHead button{font-size:29px}.panel label{font-size:12px;margin:15px 0}.panel input,.panel select{font-size:18px;padding:15px}.seg label{font-size:13px;padding:14px}.preview{font-size:12px;padding:14px;line-height:1.8}
.toast{font-size:12px;padding:12px 16px}
@media(max-width:360px){
 .balance>strong{font-size:34px}
 .actions button{height:106px}
 .actions b{font-size:14px}
 .metrics b{font-size:15px}
}

.itemActions{display:flex;gap:7px;justify-content:flex-end;margin:-3px 7px 8px}.itemActions button{font-size:10px;padding:7px 10px;border:1px solid #26353f;border-radius:9px;background:#111b23;color:#9aabb5}.itemActions .delete{color:#ff818d;border-color:#493039}.danger{width:100%;padding:14px;border-radius:13px;margin:4px 0 9px;background:#241318;border:1px solid #56303a;color:#ff8390;font-size:11px;font-weight:800}.hidden{display:none!important}.paymentBadge{color:#53dfbf}.ledgerNote{font-size:10px;color:#71818d;margin-top:5px}
/* Component refinements */
.energyHero{display:grid!important;grid-template-columns:minmax(0,1fr) 58px!important;gap:16px!important;align-items:center!important;padding:20px!important;min-height:150px!important}
.energyHero>div:first-child{min-width:0!important}.energyHero small{display:block!important;font-size:10px!important;line-height:1.45!important;letter-spacing:.35px!important;margin-bottom:9px!important;white-space:normal!important}.energyHero strong{display:block!important;font-size:32px!important;line-height:1.08!important;letter-spacing:-1px!important;margin:0 0 8px!important;overflow-wrap:anywhere!important}.energyHero span{display:block!important;font-size:12px!important;line-height:1.4!important;color:#82928f!important}.bolt{width:54px!important;height:54px!important;align-self:center!important}
.energyStats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:11px!important}.energyStats>div{min-width:0!important;min-height:82px!important;padding:14px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}.energyStats small{font-size:9px!important;line-height:1.3!important;margin-bottom:7px!important}.energyStats b{font-size:17px!important;line-height:1.2!important;margin:0!important;overflow-wrap:anywhere!important}
.quotaCard{padding:17px!important}.quotaCard>div:first-child{align-items:center!important;font-size:13px!important;line-height:1.4!important}.quotaCard>div:first-child b{font-size:15px!important}.quotaCard .progress{margin-top:11px!important}.quotaCard small{font-size:11px!important;line-height:1.45!important}
.energyActions{grid-template-columns:1fr!important;gap:10px!important}.energyActions .primary,.energyActions .secondary{margin:0!important;min-height:58px!important;font-size:13px!important}
@media(max-width:380px){.energyHero{grid-template-columns:1fr!important}.energyHero .bolt{display:none!important}.energyHero strong{font-size:29px!important}.energyStats{grid-template-columns:1fr 1fr!important}.energyStats b{font-size:15px!important}}

/* ==========================================================
   v5.6 FULL MOBILE UI AUDIT / OVERRIDE
   UI-only: no accounting/business logic changed.
   ========================================================== */
:root{
 --pad:18px; --gap:12px; --radius:20px; --touch:52px;
 --card:#0e171f; --card2:#111d26; --stroke:#22313c;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:16px;line-height:1.42;overflow-x:hidden}
.app{width:100%;max-width:480px;overflow:hidden}
main{width:100%}
.page{padding-left:var(--pad);padding-right:var(--pad);overflow:visible}
header{padding:22px var(--pad) 16px;gap:12px}
header>div{min-width:0}
h1{font-size:30px;line-height:1.05;white-space:normal}
.overline,.title span,.head small,.sheetHead small{font-size:11px;line-height:1.25;letter-spacing:1.35px}
.title{margin:12px 0 20px}
.title h2,.head h2{font-size:22px;line-height:1.2;letter-spacing:-.35px}
.head{gap:12px;align-items:flex-end}
.head>div{min-width:0}
.head button{flex:0 0 auto;min-height:38px;padding:8px 4px;font-size:12px}

/* All cards: protect against glued text / overflow */
.balance,.metrics>div,.actions button,.walletStrip,.chart,.item,.bigcard,.card,.walletHero,.energyMini,.energyHero,.energyStats>div,.quotaCard{
 min-width:0; overflow:hidden;
}
b,strong,span,small{overflow-wrap:anywhere}
.balanceTop,.balanceFoot{gap:12px}
.balanceTop>*,.balanceFoot>*{min-width:0}
.balance>strong{font-size:39px;line-height:1.05;letter-spacing:-1.6px;overflow-wrap:normal;word-break:normal}
.balanceFoot{display:grid;grid-template-columns:1fr 1fr}
.balanceFoot>span:last-child{text-align:right}

/* Metrics */
.metrics{gap:10px}
.metrics>div{min-height:102px;padding:16px}
.metrics small{font-size:10px;line-height:1.25}
.metrics b{font-size:18px;line-height:1.25;margin:9px 0 7px}
.metrics span{font-size:10px;line-height:1.3}

/* Quick entry */
.actions{gap:10px}
.actions button{height:auto;min-height:118px;padding:15px;position:relative}
.actions i{float:none;position:absolute;right:14px;top:14px}
.actions b{font-size:16px;line-height:1.25;margin-top:47px}
.actions span{font-size:11px;line-height:1.35;margin-top:5px}

/* Wallet: always readable rows */
.walletStrip{grid-template-columns:1fr!important}
.walletStrip>div{
 min-height:58px;padding:14px 15px!important;border-right:0!important;border-bottom:1px solid var(--line);
 display:grid!important;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:9px
}
.walletStrip>div:last-child{border-bottom:0}
.walletStrip small{font-size:12px;line-height:1.25}
.walletStrip b{font-size:14px;line-height:1.25;text-align:right;white-space:nowrap}

/* Charts */
.chart{height:168px;padding:17px 12px;gap:5px}
.tall{height:190px;padding:8px 0}
.barcol{min-width:0}
.barcol small{font-size:9px;line-height:1;white-space:nowrap}

/* Transaction/activity list */
.list{gap:10px}
.item{grid-template-columns:42px minmax(0,1fr) auto;gap:11px;padding:13px}
.item>div:nth-child(2){min-width:0}
.item b{font-size:13px;line-height:1.3}
.item small{font-size:10px;line-height:1.45;margin-top:4px}
.item>.amt{font-size:13px;line-height:1.25;text-align:right;max-width:130px}
.itemActions{margin:0 7px 10px;gap:8px}
.itemActions button{min-height:38px;font-size:11px;padding:8px 13px}

/* Analytics */
.period{gap:4px}
.period button{min-height:44px;font-size:12px}
.bigcard>strong,.walletHero strong{font-size:32px;line-height:1.1}
.row{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,auto);
 align-items:start;gap:14px;padding:14px 0;font-size:12px;line-height:1.4
}
.row>span{min-width:0;color:#9aa8b1}
.row>b{min-width:0;text-align:right;overflow-wrap:anywhere}

/* Forms and controls */
input,select{font-size:16px!important;line-height:1.3;min-height:52px}
.primary,.secondary,.danger{min-height:54px;font-size:12px;line-height:1.25}
.panel{max-width:480px;left:50%;transform:translateX(-50%);padding:9px 18px calc(30px + env(safe-area-inset-bottom))}
.sheetHead{gap:12px}
.sheetHead>div{min-width:0}
.panel label{font-size:12px;line-height:1.35}
.preview{font-size:12px;line-height:1.65}
.seg label{min-height:48px;display:grid;place-items:center}

/* Settings */
.settings button,.settings label{
 grid-template-columns:34px minmax(0,1fr) 18px;gap:10px;min-height:68px;padding:15px
}
.settings span{min-width:0}
.settings span b{font-size:13px;line-height:1.3}
.settings span small{font-size:10px;line-height:1.4}

/* VinFast Energy */
.energyMini{grid-template-columns:48px minmax(0,1fr) auto;gap:12px}
.energyMini>div:nth-child(2){min-width:0}
.energyMini small{font-size:10px;line-height:1.25}
.energyMini b{font-size:16px;line-height:1.25}
.energyMini span{font-size:10px;line-height:1.35}
.energyMini>strong{max-width:115px;line-height:1.3}

.energyHero{
 display:grid!important;grid-template-columns:minmax(0,1fr) 58px!important;
 gap:16px!important;align-items:center!important;padding:20px!important
}
.energyHero>div:first-child{min-width:0}
.energyHero small{font-size:10px!important;line-height:1.35!important;display:block!important;margin-bottom:8px}
.energyHero strong{font-size:32px!important;line-height:1.08!important;letter-spacing:-1px!important;margin:0 0 8px!important;display:block!important}
.energyHero span{font-size:11px!important;line-height:1.4!important;display:block!important}
.bolt{width:54px;height:54px;font-size:25px}

.energyStats{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:10px!important;margin-top:10px!important
}
.energyStats>div{padding:15px!important;min-height:92px!important}
.energyStats small{font-size:10px!important;line-height:1.3!important;display:block!important;margin:0 0 9px!important}
.energyStats b{font-size:18px!important;line-height:1.2!important;display:block!important;margin:0!important}

.quotaCard{padding:16px}
.quotaCard>div:first-child{gap:12px;font-size:13px;line-height:1.3}
.quotaCard .progress{margin-top:10px}
.quotaCard small{font-size:11px;line-height:1.4}
.energyActions{grid-template-columns:1fr!important;gap:8px!important}
.energyActions .primary,.energyActions .secondary{margin:0}

/* Bottom nav */
nav{height:88px;padding-left:6px;padding-right:6px}
nav button{min-width:0;font-size:21px}
nav button span{font-size:10px;line-height:1.15;white-space:nowrap}
.add i{left:50%;transform:translateX(-50%);width:58px;height:58px}

/* Narrow phone safety */
@media(max-width:390px){
 :root{--pad:15px}
 .balance>strong{font-size:35px}
 .metrics b{font-size:16px}
 .actions b{font-size:15px}
 .energyHero strong{font-size:29px!important}
 .item{grid-template-columns:40px minmax(0,1fr)}
 .item>.amt{grid-column:2;text-align:left;max-width:none;margin-top:3px}
 .row{grid-template-columns:minmax(0,1fr) minmax(90px,auto)}
}
@media(max-width:340px){
 .metrics,.energyStats{grid-template-columns:1fr!important}
 .balanceFoot{grid-template-columns:1fr}
 .balanceFoot>span:last-child{text-align:left;margin-top:4px}
 nav button span{font-size:9px}
}

/* Component refinements */

/* Compact professional action icons */
.iconActions{
 display:flex!important;
 justify-content:flex-end!important;
 gap:8px!important;
 margin:7px 8px 13px!important;
}
.iconActions .iconBtn{
 width:42px!important;height:42px!important;min-height:42px!important;
 padding:0!important;border-radius:13px!important;
 display:grid!important;place-items:center!important;
 background:#111c24!important;border:1px solid #263743!important;
 position:relative!important;
}
.iconActions .iconBtn::before{
 content:"";width:18px;height:18px;display:block;
 background-repeat:no-repeat;background-position:center;background-size:18px 18px;
 opacity:.92;
}
.iconActions .editIcon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2398aab5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}
.iconActions .deleteIcon{
 background:#1b151a!important;border-color:#49313a!important;
}
.iconActions .deleteIcon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff8491' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E");
}

/* Home energy summary: never concatenate cycle / money / quota / debt */
.energyMiniHome{
 display:grid!important;
 grid-template-columns:48px minmax(0,1fr)!important;
 grid-template-areas:
   "icon cycle"
   "icon cost"
   "icon quota"
   "debt debt"!important;
 align-items:start!important;
 gap:3px 12px!important;
 padding:16px!important;
 border-radius:20px!important;
}
.energyMiniHome .energyIcon{
 grid-area:icon!important;
 margin-top:2px!important;
}
.energyMiniHome>div:nth-child(2){
 display:contents!important;
}
.energyMiniHome #energyCycleHome{
 grid-area:cycle!important;
 display:block!important;
 font-size:11px!important;
 line-height:1.35!important;
 color:#91a0a9!important;
 margin:0!important;
 white-space:normal!important;
}
.energyMiniHome #energyCostHome{
 grid-area:cost!important;
 display:block!important;
 font-size:24px!important;
 line-height:1.15!important;
 letter-spacing:-.5px!important;
 color:#f4f7f8!important;
 margin:5px 0 3px!important;
 white-space:normal!important;
 overflow-wrap:normal!important;
 word-break:normal!important;
}
.energyMiniHome #energyQuotaHome{
 grid-area:quota!important;
 display:block!important;
 font-size:11px!important;
 line-height:1.35!important;
 color:#7f909a!important;
 margin:0!important;
}
.energyMiniHome #energyDebtHome{
 grid-area:debt!important;
 display:block!important;
 max-width:none!important;
 width:100%!important;
 text-align:left!important;
 font-size:15px!important;
 line-height:1.35!important;
 color:#ff8994!important;
 margin-top:11px!important;
 padding-top:11px!important;
 border-top:1px solid #21323a!important;
}

/* Charging cards: actions belong to card visually, not floating far outside */
#chargeList>div,#energyPaymentList>div{
 background:var(--card)!important;
 border:1px solid var(--stroke)!important;
 border-radius:20px!important;
 overflow:hidden!important;
}
#chargeList>div>.item,#energyPaymentList>div>.item{
 background:transparent!important;border:0!important;border-radius:0!important;
 margin:0!important;
}
#chargeList .itemActions,#energyPaymentList .itemActions{
 border-top:1px solid #1b2932;
 padding-top:8px;
}

/* Existing textual buttons elsewhere remain untouched */
@media(max-width:390px){
 .energyMiniHome #energyCostHome{font-size:22px!important}
 .iconActions .iconBtn{width:40px!important;height:40px!important;min-height:40px!important}
}

/* Component refinements */
#chargeList>div>.item,
#energyPaymentList>div>.item{
 display:grid!important;
 grid-template-columns:52px minmax(0,1fr) auto 88px!important;
 align-items:center!important;
 column-gap:12px!important;
 padding:16px!important;
}
#chargeList .item>.amt,
#energyPaymentList .item>.amt{
 grid-column:3!important;
 text-align:right!important;
 max-width:120px!important;
 margin:0!important;
 white-space:nowrap!important;
}
#chargeList .inlineActions,
#energyPaymentList .inlineActions{
 grid-column:4!important;
 grid-row:1!important;
 display:flex!important;
 align-items:center!important;
 justify-content:flex-end!important;
 align-self:center!important;
 gap:7px!important;
 margin:0!important;
 padding:0!important;
 border:0!important;
}
#chargeList .inlineActions .iconBtn,
#energyPaymentList .inlineActions .iconBtn{
 width:40px!important;height:40px!important;min-height:40px!important;
 flex:0 0 40px!important;
}
@media(max-width:390px){
 #chargeList>div>.item,#energyPaymentList>div>.item{
   grid-template-columns:44px minmax(0,1fr) 82px!important;
   grid-template-rows:auto auto!important;
   column-gap:10px!important;row-gap:8px!important;
 }
 #chargeList .item>.amt,#energyPaymentList .item>.amt{
   grid-column:2!important;grid-row:2!important;text-align:left!important;max-width:none!important;
 }
 #chargeList .inlineActions,#energyPaymentList .inlineActions{
   grid-column:3!important;grid-row:1 / span 2!important;
 }
}
@media(max-width:340px){
 #chargeList>div>.item,#energyPaymentList>div>.item{
   grid-template-columns:40px minmax(0,1fr) 72px!important;
 }
 #chargeList .inlineActions,#energyPaymentList .inlineActions{gap:5px!important}
 #chargeList .inlineActions .iconBtn,#energyPaymentList .inlineActions .iconBtn{
   width:34px!important;height:34px!important;min-height:34px!important;flex-basis:34px!important;
 }
}

/* ===== GREEN SM WEEKLY SETTLEMENT ===== */
.gsmWeekNav{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:9px;align-items:stretch;margin-bottom:10px}
.weekArrow,.weekPicker{border:1px solid var(--stroke);background:var(--card);color:#eaf1f4;border-radius:16px;min-height:58px}
.weekArrow{font-size:28px}
.weekPicker{padding:10px 12px;text-align:center}.weekPicker small,.weekPicker b{display:block}.weekPicker small{font-size:9px;letter-spacing:1.2px;color:#6f818d}.weekPicker b{font-size:13px;margin-top:4px}
.gsmStatus{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--stroke);border-radius:16px;background:var(--card);margin-bottom:10px}.gsmStatus .statusDot{width:10px;height:10px;border-radius:50%;background:#f2b94b;box-shadow:0 0 14px rgba(242,185,75,.3)}.gsmStatus small,.gsmStatus b{display:block}.gsmStatus small{font-size:9px;color:#758691;letter-spacing:1px}.gsmStatus b{font-size:13px;margin-top:2px}.gsmStatus.done .statusDot{background:#51dca3}.gsmStatus.done b{color:#65e4b1}
.gsmHero{padding:20px;border-radius:22px;background:linear-gradient(145deg,#123129,#0e191c);border:1px solid #285046;margin-bottom:10px}.gsmHero small,.gsmHero strong,.gsmHero span{display:block}.gsmHero small{font-size:10px;color:#75a597;letter-spacing:1px}.gsmHero strong{font-size:32px;line-height:1.08;margin:8px 0}.gsmHero span{font-size:11px;color:#899a9f}
.gsmWeekStats{display:grid;grid-template-columns:1fr 1fr;gap:9px}.gsmWeekStats>div{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:14px;min-height:88px}.gsmWeekStats small,.gsmWeekStats b{display:block}.gsmWeekStats small{font-size:9px;line-height:1.3;color:#738590}.gsmWeekStats b{font-size:15px;line-height:1.25;margin-top:8px}
.gsmWeeklyHistory{display:grid;gap:9px}.gsmWeekCard{background:var(--card);border:1px solid var(--stroke);border-radius:17px;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.gsmWeekCard small,.gsmWeekCard b,.gsmWeekCard span{display:block}.gsmWeekCard small{font-size:9px;color:#738590}.gsmWeekCard b{font-size:13px;margin:4px 0}.gsmWeekCard span{font-size:10px;color:#91a0a8}.gsmWeekCard>strong{text-align:right;font-size:13px}.gsmWeekCard.current{border-color:#31594e}
@media(max-width:350px){.gsmWeekStats{grid-template-columns:1fr}.gsmHero strong{font-size:28px}}

/* ===== SMART SCAN ===== */
.smartScanCard{display:grid;grid-template-columns:50px minmax(0,1fr) 18px;gap:12px;align-items:center;background:linear-gradient(145deg,#11231f,#0d181b);border:1px solid #285046;border-radius:20px;padding:15px;margin-bottom:12px;cursor:pointer}
.smartScanCard .scanIcon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:#43d7b1;color:#07110e;font-size:24px;font-weight:900}.smartScanCard small,.smartScanCard b,.smartScanCard span{display:block}.smartScanCard small{font-size:9px;letter-spacing:1.3px;color:#65cdb3}.smartScanCard b{font-size:16px;margin:2px 0}.smartScanCard span{font-size:10px;color:#7f919a}.smartScanCard i{font-style:normal;font-size:24px;color:#65cdb3}
.scanFormBtn{width:100%;min-height:48px;border-radius:14px;border:1px dashed #3c7768;background:#10221e;color:#61dfbb;font-weight:800;font-size:11px;letter-spacing:.5px;margin-bottom:12px}
.scanProgress{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--stroke);font-size:13px;line-height:1.5;margin-bottom:10px}.scanProgress.working::before{content:"";display:inline-block;width:14px;height:14px;border:2px solid #36534c;border-top-color:#4cdbb6;border-radius:50%;margin-right:9px;vertical-align:-2px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.scanResult{display:grid;gap:8px;margin:10px 0}.scanDetected{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:13px}.scanDetected small,.scanDetected b{display:block}.scanDetected small{font-size:9px;color:#748690;letter-spacing:.8px}.scanDetected b{font-size:14px;margin-top:4px}.scanWarn{font-size:11px;line-height:1.5;color:#f0bf69;padding:10px 2px}.scanRaw{font-size:10px;line-height:1.45;color:#71818a;max-height:100px;overflow:auto;background:#091116;padding:10px;border-radius:12px}
.scanPanel{max-height:92vh;overflow:auto}

/* Component refinements */
.appHealth{margin:14px 0 4px;padding:12px 14px;border:1px solid #24453d;border-radius:14px;background:#0d1a17;color:#57d8b5;font-size:11px;line-height:1.4}

/* Component refinements */
.gsmWeekStats .statementBlue,#gsmWeekSummary .statementBlue{border-color:#315b7a;background:rgba(36,100,145,.12)}
.gsmWeekStats .statementRed,#gsmWeekSummary .statementRed{border-color:#714047;background:rgba(153,53,64,.10)}
#gsmWeekSummary .statementYellow{background:rgba(179,135,36,.09)}
#gsmWeekSummary .statementCyan{background:rgba(28,137,145,.10)}

.statementGreen{border-color:#285b49!important}.statementGreen b{color:#5de0ac!important}

/* ===== TAXI DAILY 7.0 MOBILE UI ===== */
.page{padding-bottom:112px}.homePrimaryActions{display:grid;grid-template-columns:1.25fr .75fr;gap:9px;margin:14px 0}.homePrimaryActions button{min-height:56px;border-radius:17px;border:1px solid #263940;font-size:12px;font-weight:850}.homePrimaryActions button:first-child{background:#45d7b1;color:#07110e;border-color:#45d7b1}.homePrimaryActions button:last-child{background:#111d23;color:#e7eff1}.actions{gap:9px}.actions button{border-color:#1e3037!important;border-radius:18px!important}.card,.item,.metrics>div{border-color:#1d2c33!important}.head{margin-top:28px!important}.quickAddGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quickAddGrid button{min-height:105px;border:1px solid #20323b;background:#101a20;color:#edf3f5;border-radius:18px;text-align:left;padding:15px}.quickAddGrid button span,.quickAddGrid button b,.quickAddGrid button small{display:block}.quickAddGrid button span{font-size:22px;color:#51dbb6}.quickAddGrid button b{font-size:14px;margin:8px 0 3px}.quickAddGrid button small{font-size:10px;color:#71838d}.quickAddGrid .scanQuick{grid-column:1/-1;min-height:78px;background:#10241f;border-color:#285447}.historyTxn{display:grid;grid-template-columns:46px minmax(0,1fr) 78px;gap:11px;align-items:center;background:var(--card);border:1px solid #1d2c33;border-radius:18px;padding:14px;margin-bottom:9px}.txnInfo{min-width:0}.txnInfo>b,.txnInfo>small,.txnInfo>strong{display:block}.txnInfo>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0 7px;color:#71818a;font-size:10px}.txnInfo>strong{font-size:15px;color:#58ddb2}.txnActions{display:flex;gap:6px;justify-content:flex-end}.miniIcon{width:36px;height:36px;min-height:36px;border-radius:11px;border:1px solid #2b3c44;background:#121d23;position:relative}.miniIcon.deleteIcon{border-color:#59323b;background:#21171c}.miniIcon.editIcon:before{content:'✎';font-size:17px;color:#dbe5e8}.miniIcon.deleteIcon:before{content:'⌫';font-size:17px;color:#ff8494}@media(max-width:360px){.homePrimaryActions{grid-template-columns:1fr}.historyTxn{grid-template-columns:42px minmax(0,1fr) 72px}.miniIcon{width:33px;height:33px;min-height:33px}}