:root{
  --green:#2f8f57;--green-700:#226c43;--green-100:#eaf6ee;--green-50:#f5faf6;
  --ink:#17211b;--muted:#6f7a73;--line:#e2e9e4;--page:#f4f7f5;--white:#fff;
  --amber:#b87916;--amber-bg:#fff7e8;--danger:#b8464f;--danger-bg:#fff3f4;
  --radius:12px;--radius-sm:9px;--shadow:0 8px 24px rgba(25,65,38,.07);
}
*{box-sizing:border-box}html,body{margin:0;background:var(--page);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}body{letter-spacing:-.01em}.hidden{display:none!important}
.app{width:min(100%,430px);min-height:100dvh;margin:auto;background:var(--white);padding-bottom:78px;box-shadow:0 0 30px rgba(24,52,33,.08)}
header{position:sticky;top:0;z-index:30;padding:16px 18px 13px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}header h1{margin:0;font-size:21px;line-height:1.15}header p{margin:4px 0 0;color:var(--muted);font-size:12px}.brand-header,.row{display:flex;align-items:center;gap:10px}.space{justify-content:space-between}.sulit-wordmark{font-size:24px;font-weight:850;color:var(--green-700)}.sulit-wordmark small{display:block;font-size:10px;font-weight:600;color:var(--muted);margin-top:1px}.header-action{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;background:#fff}
main{padding:16px 18px 28px}.screen-heading{margin:0 0 14px}.screen-heading h2{font-size:21px;margin:0 0 3px}.screen-heading p{font-size:12px;color:var(--muted);margin:0}.muted{color:var(--muted)}h2{letter-spacing:-.025em}.price{font-weight:850;color:var(--green-700)}
.card,.product,.store-card,.plan-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}.card{padding:15px;margin-bottom:12px}.featured{background:#fff}.item{padding:12px 0;border-bottom:1px solid var(--line)}.item:last-child{border-bottom:0}.empty{padding:28px 18px;text-align:center}.empty-link{display:block;color:inherit;text-decoration:none}
button,.button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:11px 14px;border:0;border-radius:var(--radius-sm);background:var(--green);color:#fff;font:inherit;font-weight:760;text-decoration:none;cursor:pointer}button:active,.button:active{transform:scale(.985)}button.secondary,.button.secondary{background:#fff;color:var(--green-700);border:1px solid #a9cdb6}.danger,button.danger{background:var(--danger-bg);color:var(--danger);border:1px solid #eccdd0}.tiny-button{width:auto;min-height:30px;padding:5px 8px;font-size:11px;border-radius:7px}
input,select,textarea{width:100%;min-height:46px;border:1px solid #dce5df;border-radius:var(--radius-sm);padding:11px 13px;background:#fff;color:var(--ink);font:inherit;outline:0}input:focus,select:focus,textarea:focus{border-color:#82b797;box-shadow:0 0 0 4px rgba(47,143,87,.1)}label{display:block;margin:12px 0 6px;font-size:12px;font-weight:700}.badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:6px;background:var(--green-100);color:var(--green-700);font-size:10px;font-weight:800}.notice{background:var(--amber-bg);color:#8b5a12;border:1px solid #efd6aa;border-radius:8px;padding:10px 11px}.success{background:var(--green-100);color:var(--green-700);border:1px solid #c8e5d1;border-radius:8px;padding:10px 11px}.error{background:var(--danger-bg);color:var(--danger);border:1px solid #eccdd0;border-radius:8px;padding:10px 11px}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:50;width:min(100%,430px);height:70px;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 8px max(7px,env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#7a847d;text-decoration:none;font-size:10px;font-weight:650;border-radius:9px}.nav a span{font-size:18px;line-height:1}.nav a.active{color:var(--green-700)}.nav a.active span{background:var(--green);color:#fff;border-radius:8px;padding:3px 7px}
/* Home */
.home-welcome{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.home-welcome h1{font-size:23px;margin:0 0 3px}.home-welcome p{font-size:12px;margin:0;color:var(--muted)}.home-search-card{position:relative;margin-bottom:18px}.home-search-row{display:flex;gap:8px;position:relative}.home-search-row:before{content:'⌕';position:absolute;left:14px;top:9px;font-size:24px;color:#87918a;z-index:2}.home-search-row input{height:50px;padding-left:42px;background:#fbfcfb}.home-search-add{width:74px}.category-section{margin:6px 0 18px}.category-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.category-head h2{font-size:15px;margin:0}.category-head button{width:auto;min-height:0;padding:0;background:none;color:var(--green-700);font-size:11px}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.category-chip{min-height:70px;padding:8px 4px;background:#fafcfb;color:var(--ink);border:1px solid var(--line);border-radius:10px}.category-chip b{display:block;font-size:23px;margin-bottom:4px}.category-chip small{font-size:8.5px;font-weight:750}.category-chip.active{background:var(--green-100);color:var(--green-700);border-color:#8fc3a2}.home-promo{display:flex;align-items:center;justify-content:space-between;min-height:102px;padding:14px;border:1px solid #dcebe1;border-radius:10px;background:#f1f7f3;margin-bottom:16px;overflow:hidden}.home-promo h2{font-size:17px;margin:0 0 5px}.home-promo p{max-width:205px;font-size:11px;margin:0;color:var(--muted)}.home-promo img{width:88px;height:76px;object-fit:contain}.savings-summary{background:linear-gradient(145deg,#36a45e,#247f46);color:#fff;border:0;border-radius:10px}.savings-summary .muted,.savings-summary .price,.savings-summary .mini-trend{color:#fff}.savings-summary .price{font-size:29px}.list-summary{display:flex;align-items:center;justify-content:space-between;border-radius:10px}.list-summary a{color:var(--green-700);font-size:12px;font-weight:750;text-decoration:none}.home-simple-result{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;padding:10px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:9px}.home-result-main{display:flex;align-items:center;gap:10px}.home-result-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--green-50);border-radius:8px;font-size:24px}.home-simple-result b{color:var(--green-700)}.home-quantity-row{display:flex;align-items:center;gap:9px;margin-top:9px}.quantity-control{display:flex;align-items:center;gap:10px;padding:4px;border:1px solid var(--line);border-radius:9px}.quantity-control button{width:34px;min-height:34px;padding:0}.home-confirm-add{flex:1}
/* List */
#list .product{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;border-width:0 0 1px;border-radius:0;padding:13px 0;margin:0}.product-icon,.item-icon,.list-product-logo{width:44px;height:44px;display:grid;place-items:center;border-radius:8px;background:#f3f7f4;font-size:25px}.brand-options{grid-column:1/-1;background:#f8faf8;border-radius:8px;padding:8px}.brand-option{border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}.brand-option:last-child{border-bottom:0}
/* Stores */
#stores{display:grid;gap:12px}.store-card{padding:14px;margin:0;cursor:pointer}.store-card-top{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center}.store-logo{position:static;width:48px;height:48px;display:grid;place-items:center;border-radius:8px;overflow:hidden;background:#fff}.store-logo img{max-width:100%;max-height:100%;object-fit:contain}.store-copy{min-width:0}.store-copy strong{display:block;font-size:16px}.store-copy .muted{font-size:11px;margin-top:3px}.store-price{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:82px}.store-price .price{font-size:20px}.cheapest-badge{background:var(--green-100);color:var(--green-700);border:1px solid #c9e4d1}.store-card .badge:not(.cheapest-badge){display:none}
/* Plans */
.plan-card{padding:15px;margin-bottom:12px}.plan-card.selected{border-color:#8fc3a2;background:#fbfefc}.route-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px;padding:10px;background:#f7faf8;border-radius:8px}.route-metrics small{display:block;color:var(--muted);font-size:9px}.route-metrics b{font-size:12px}.route-radio input{accent-color:var(--green)}
/* Trip */
.trip-summary-card{border:0;padding:0}.trip-summary-head,.trip-stops,.trip-summary-card>.item,.trip-total{border:1px solid var(--line);border-radius:8px;padding:13px;margin-bottom:9px;background:#fff}.trip-summary-head h2{margin:5px 0 0}.trip-route-label{font-size:10px;font-weight:850;color:var(--green-700)}.trip-stops{padding:4px 13px}.trip-stop{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.trip-stop:last-child{border-bottom:0}.trip-stop-number{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:800}.trip-total{background:var(--green-100);border-color:#cee5d5}
/* Savings */
.savings-hero{min-height:118px;padding:17px;border-radius:10px;background:linear-gradient(145deg,#35a55d,#247f46);color:#fff;margin-bottom:13px}.savings-hero small{opacity:.85}.savings-hero strong{display:block;font-size:34px;margin-top:7px}.budget-overview{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center}.budget-ring{position:relative;width:98px;height:98px;border-radius:50%;background:conic-gradient(var(--green) var(--budget-angle,0%),#eaf0ec 0);display:grid;place-items:center}.budget-ring:before{content:'';position:absolute;width:72px;height:72px;border-radius:50%;background:#fff}.budget-ring>div{position:relative;z-index:2}.budget-list{display:grid}.budget-list>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}.budget-list>div:last-child{border-bottom:0}.receipt-dropzone{border:1px dashed #a9cdb6;border-radius:8px;padding:14px;background:#fbfdfb}.receipt-history-clean{margin-top:16px}.receipt-history-clean #receiptHistory{display:grid;gap:9px;margin-top:10px}.receipt-history-clean .item{border:1px solid var(--line);border-radius:8px;padding:12px 13px;background:#fff}.receipt-preview-compact,.receipt-review-summary{border-radius:8px}.receipt-preview-compact img{height:125px;object-fit:cover}.digital-receipt-row{padding:11px 0;border-bottom:1px solid var(--line)}.digital-receipt-row:last-child{border-bottom:0}
/* Profile */
.profile-compact{padding:6px 0 16px;border-bottom:1px solid var(--line)}.profile-compact h2{font-size:22px;margin:0 0 3px}.profile-compact p{font-size:12px;margin:0;color:var(--muted)}.settings-list{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}.setting-row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;width:100%;padding:13px;background:#fff;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:left}.setting-row:last-child{border-bottom:0}.setting-row small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.logout-button{margin-top:15px;background:#fff;color:var(--danger);border:1px solid #e8c9cc}
/* Admin */
.admin-shell,.admin-layout{background:#f5f8f6}.admin-sidebar{background:#173522}.admin-card,.admin-panel,.admin-stat,.admin-content .card{border:1px solid var(--line);border-radius:9px;box-shadow:none}.admin-table{border-collapse:collapse;width:100%}.admin-table th{background:#f4f8f5}.admin-table td,.admin-table th{padding:9px 8px;font-size:12px;border-bottom:1px solid var(--line);text-align:left}.admin-actions{display:flex;gap:5px;flex-wrap:wrap}.admin-actions button{width:auto;min-height:30px;padding:5px 8px}.admin-tab{border-radius:7px}.admin-tab.active{background:var(--green)}
@media(max-width:540px){.app{width:100%;box-shadow:none}.category-grid{grid-template-columns:repeat(4,1fr)}.store-card-top{grid-template-columns:44px minmax(0,1fr) auto}.store-logo{width:44px;height:44px}.budget-overview{grid-template-columns:92px 1fr}.budget-ring{width:86px;height:86px}.budget-ring:before{width:64px;height:64px}}