*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --cyan-rgb:255,90,18;--purple-rgb:255,122,38;--pink-rgb:232,38,74;--accent-rgb:255,210,30;
  --bg:#071426;--bg2:#0B1B33;--bg3:#10233F;
  --cyan:#FF5A12;--cbg:rgba(var(--cyan-rgb),0.12);--cb:rgba(var(--cyan-rgb),0.34);
  --pink:#E8264A;--purple:#FF7A26;--green:#10B981;--amber:#F5B01E;
  --accent:#FFD21E;--primary:#FF5A12;--primary-rgb:255,90,18;--success:#10B981;--warning:#F5B01E;--danger:#E8264A;
  --text:#FFFFFF;--text-soft:#E8EEF6;--muted:#9EABC0;--border:rgba(255,255,255,0.10);
  --card:#0F213D;--cardb:rgba(255,255,255,0.08);
  --shadow:0 10px 28px rgba(0,0,0,0.36);--shadow-sm:0 2px 10px rgba(0,0,0,0.28);--shadow-md:0 10px 28px rgba(0,0,0,0.36);--shadow-lg:0 22px 60px rgba(0,0,0,0.48);
  --inp:rgba(255,255,255,0.06);--inpb:rgba(255,255,255,0.16);
  --grad:linear-gradient(135deg,#FF5A12,#FF7A1A);--grad2:linear-gradient(135deg,#0B1B33,#10233F);--grad3:linear-gradient(135deg,#FF5A12,#FFD21E);
  --r:14px;
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;overflow-wrap:break-word;}
body:not(.light-theme){background:radial-gradient(1150px 640px at 50% -8%,rgba(var(--cyan-rgb),0.13),transparent 62%),radial-gradient(820px 560px at 50% 108%,rgba(var(--purple-rgb),0.08),transparent 60%),var(--bg);background-attachment:fixed;}
/* HEADER */
.hdr{background:var(--bg2);border-bottom:1px solid var(--border);padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
.hdr-logo{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease;}
.hdr-logo:active{transform:scale(0.93);}
.hdr-logo:hover .logo-circle{box-shadow:0 0 18px rgba(180,255,80,0.85),0 0 8px rgba(16,185,129,1);}
.logo-circle{width:38px;height:38px;border-radius:50%;background:#000;border:2.5px solid var(--cyan);box-shadow:0 0 0 1px rgba(var(--cyan-rgb),0.2),0 0 12px rgba(var(--cyan-rgb),0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden;}
.logo-circle svg{width:34px;height:34px;}
.hdr-name{line-height:1;}
.hdr-name b{font-size:16px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hdr-name small{display:block;font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.5px;margin-top:1px;}
.hdr-actions{display:flex;gap:8px;align-items:center;}
.hbtn{background:var(--cbg);border:1px solid var(--cb);border-radius:9px;color:var(--cyan);cursor:pointer;padding:6px 10px;font-size:11px;font-weight:700;font-family:inherit;}
.ham-btn{background:var(--bg3);border:1px solid var(--border);border-radius:10px;cursor:pointer;padding:8px 10px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;}
.ham-l{display:block;height:2px;width:18px;background:var(--text);border-radius:2px;transition:all .25s;}
/* SIDE NAV */
.snav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:400;backdrop-filter:blur(3px);}
.snav-overlay.open{display:block;}
.snav{position:fixed;top:0;left:-290px;width:270px;height:100%;background:var(--bg2);border-right:1px solid rgba(var(--cyan-rgb),0.12);z-index:401;transition:left .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;box-shadow:4px 0 30px rgba(0,0,0,0.5);}
.snav.open{left:0;}
.snav-head{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.snav-close{background:var(--bg3);border:1px solid var(--border);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:14px;}
.snav-user{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
.snav-list{flex:1;overflow-y:auto;padding:6px 0;}
.snav-item{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text);transition:background .15s;}
.snav-item:hover,.snav-item:active{background:var(--cbg);}
.snav-item.active{color:var(--cyan);}
.snav-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:0 0 10px rgba(var(--cyan-rgb),0.22),0 0 4px rgba(var(--purple-rgb),0.18);transition:box-shadow .2s,transform .2s;}
.snav-item:hover .snav-ico{box-shadow:0 0 16px rgba(var(--cyan-rgb),0.55),0 0 10px rgba(var(--pink-rgb),0.32);transform:translateY(-1px);}
.snav-divider{height:1px;background:var(--border);margin:6px 16px;}
.snav-section{padding:5px 16px 3px;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;}
.snav-foot{padding:10px 16px 24px;border-top:1px solid var(--border);}
/* LOGIN MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:500;align-items:center;justify-content:center;padding:20px;}
.modal-bg.open{display:flex;}
.modal-box{background:var(--bg2);border:1px solid rgba(var(--cyan-rgb),0.18);border-radius:20px;padding:28px 22px;width:100%;max-width:360px;max-height:90dvh;overflow-y:auto;}
.modal-title{font-size:20px;font-weight:800;text-align:center;margin-bottom:4px;}
.modal-sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:20px;}
.finput{width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:14px;outline:none;box-sizing:border-box;font-family:inherit;margin-bottom:12px;}
.finput:focus{border-color:var(--cyan);}
.fbtn{width:100%;background:linear-gradient(90deg,var(--cyan),var(--purple));border:none;border-radius:12px;color:#000;font-size:15px;font-weight:800;padding:14px;cursor:pointer;font-family:inherit;margin-bottom:8px;}
.fbtn-ghost{width:100%;background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--muted);font-size:13px;padding:11px;cursor:pointer;font-family:inherit;}
/* ADMIN */
.adm-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:16px;}
@media(max-width:600px){
  .adm-grid4{grid-template-columns:repeat(2,1fr);}
  .cats{grid-template-columns:repeat(3,1fr);}
  .adm-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  .adm-table th,.adm-table td{padding:8px 9px;}
  .adm-stat{padding:14px 12px 12px;}
  .adm-stat-n{font-size:22px;}
  .adm-stat-l{font-size:9px;letter-spacing:.4px;}
  .adm-charts{gap:10px;}
  .adm-tab-bar{gap:5px;}
  .adm-sidebar{gap:5px;}
}
.adm-stat{background:linear-gradient(155deg,var(--bg2),var(--card));border:1px solid var(--border);border-radius:16px;padding:18px 16px 16px;text-align:left;position:relative;overflow:hidden;transition:transform .15s,box-shadow .2s;}
.adm-stat:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.45);}
.adm-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cyan);}
.adm-stat::after{content:"";position:absolute;right:-28px;top:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(var(--cyan-rgb),0.10),transparent 70%);pointer-events:none;}
.adm-stat-n{font-size:30px;font-weight:900;color:var(--cyan);letter-spacing:-0.5px;line-height:1.1;}
.adm-stat-l{font-size:10px;color:var(--muted);font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:0.8px;}
.adm-stat:nth-child(3n+2)::before{background:var(--purple);}
.adm-stat:nth-child(3n+2)::after{background:radial-gradient(circle,rgba(var(--purple-rgb),0.12),transparent 70%);}
.adm-stat:nth-child(3n+2) .adm-stat-n{color:#b794ff;}
.adm-stat:nth-child(3n+3)::before{background:var(--pink);}
.adm-stat:nth-child(3n+3)::after{background:radial-gradient(circle,rgba(var(--pink-rgb),0.12),transparent 70%);}
.adm-stat:nth-child(3n+3) .adm-stat-n{color:#ff6f95;}
.adm-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:12px;}
.adm-table th{background:var(--bg3);color:var(--muted);font-weight:700;text-align:left;padding:8px 10px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;}
.adm-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.05);vertical-align:middle;}
.adm-table tbody tr{transition:background .15s;}
.adm-table tbody tr:hover td{background:rgba(var(--cyan-rgb),0.045);}
.badge-admin{background:rgba(var(--pink-rgb),0.15);color:var(--pink);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700;}
.badge-seller{background:rgba(var(--cyan-rgb),0.1);color:var(--cyan);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700;}
.badge-buyer{background:rgba(16,185,129,0.1);color:var(--green);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700;}
.badge-business{background:rgba(16,185,129,0.15);color:var(--green);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700;}
.badge-approved{background:rgba(16,185,129,0.12);color:var(--green);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700;}
.badge-pending{background:rgba(245,158,11,0.12);color:var(--amber);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700;}
.adm-tab-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;}
.adm-tab{padding:7px 14px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;border:1px solid var(--border);color:var(--muted);background:transparent;font-family:inherit;}
.adm-tab.active{background:linear-gradient(135deg,var(--cyan),var(--purple));color:#001018;border-color:transparent;box-shadow:0 4px 14px rgba(var(--cyan-rgb),0.3);}
.adm-layout{display:block;}
.adm-sidebar{display:flex;flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;}
.adm-side-item{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:11px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;border:1px solid var(--border);background:transparent;transition:all .15s;flex-shrink:0;font-family:inherit;text-align:left;}
.adm-side-item:hover{color:var(--text);border-color:rgba(var(--cyan-rgb),0.3);}
.adm-side-item.active{background:linear-gradient(135deg,rgba(var(--cyan-rgb),0.16),rgba(var(--purple-rgb),0.12));color:var(--text);border-color:rgba(var(--cyan-rgb),0.4);}
.adm-main{flex:1;min-width:0;}
.adm-charts{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px;}
@media (min-width:1024px){
  .adm-layout{display:flex;gap:16px;align-items:flex-start;}
  .adm-sidebar{flex-direction:column;width:218px;flex-shrink:0;overflow-x:visible;overflow-y:auto;padding:8px;margin-bottom:0;background:var(--bg2);border:1px solid var(--border);border-radius:16px;position:sticky;top:72px;max-height:calc(100vh - 92px);}
  .adm-side-item{width:100%;border:1px solid transparent;font-size:13px;padding:10px 12px;}
  .adm-side-item.active{box-shadow:inset 3px 0 0 var(--cyan);}
  .adm-charts{grid-template-columns:1fr 1fr;}
  .adm-charts .span2{grid-column:1 / -1;}
}

.hbtn-icon{background:var(--bg3);border:1px solid var(--border);border-radius:9px;cursor:pointer;padding:7px 9px;font-size:15px;}
/* CONTENT */
.content{flex:1;padding:14px;overflow-y:auto;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));min-width:0;}
/* NAV */
.nav{background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px));position:sticky;bottom:0;z-index:100;}
.nav-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:5px 12px;border-radius:11px;position:relative;transition:background .2s;}
.nav-item.active{background:var(--cbg);}
.nav-item .ni{font-size:21px;transition:filter .2s,transform .2s;}
.nav-item:hover .ni{filter:drop-shadow(0 0 4px rgba(var(--cyan-rgb),0.35));}
.nav-item.active .ni{filter:drop-shadow(0 0 5px rgba(var(--cyan-rgb),0.45));transform:translateY(-1px);}
.nav-item span{font-size:10px;color:var(--muted);font-weight:500;margin-top:2px;}
.ai-fab{width:56px;height:56px;border-radius:50%;background:var(--grad);border:none;box-shadow:var(--shadow-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.ai-fab:hover{transform:scale(1.06);}
#ai-fab-root{position:fixed;right:16px;bottom:84px;z-index:590;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.ai-hint{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);padding:10px 12px;font-size:12.5px;font-weight:600;color:var(--text);max-width:210px;display:flex;align-items:flex-start;gap:8px;animation:aiHintIn .3s ease;}
.ai-hint-x{background:none;border:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0;}
@keyframes aiHintIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
#ai-overlay{position:fixed;inset:0;z-index:9990;}
#doc-viewer{position:fixed;inset:0;z-index:10000;}
.doc-ov-backdrop{position:absolute;inset:0;background:rgba(3,10,22,0.72);}
.doc-ov-panel{position:fixed;inset:24px;max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);}
.doc-ov-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;}
.doc-ov-close{background:var(--bg3);border:none;border-radius:8px;width:30px;height:30px;font-size:18px;color:var(--muted);cursor:pointer;line-height:1;}
.doc-ov-body{flex:1;overflow:auto;padding:14px;background:var(--bg2);}
@media(max-width:640px){.doc-ov-panel{inset:10px;}}
.ai-ov-backdrop{position:absolute;inset:0;background:rgba(3,10,22,0.45);}
.ai-ov-panel{position:fixed;right:14px;bottom:14px;width:380px;max-width:calc(100vw - 28px);height:560px;max-height:calc(100vh - 90px);background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:14px;overflow:hidden;}
.ai-ov-panel > div{height:100% !important;}
@media(max-width:640px){.ai-ov-panel{inset:10px;width:auto;height:auto;max-height:none;bottom:10px;right:10px;}#ai-fab-root{bottom:80px;}}
.rcpt-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:9px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;}
.rcpt-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.rcpt-row-body{flex:1;min-width:0;}
.rcpt-row-title{font-size:13px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rcpt-row-sub{font-size:11px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rcpt-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.rcpt-row-amt{font-size:14px;font-weight:800;color:var(--cyan);}
.rcpt-row-status{font-size:9.5px;font-weight:800;border-radius:6px;padding:2px 7px;white-space:nowrap;}
.rcpt-row-chev{color:var(--muted);font-size:18px;flex-shrink:0;}
.nav-item.active span{color:var(--cyan);font-weight:700;}
.nav-center{display:flex;flex-direction:column;align-items:center;cursor:pointer;}
.nav-plus{width:28px;height:28px;border-radius:8px;background:var(--grad3);display:flex;align-items:center;justify-content:center;font-size:16px;margin-top:0;box-shadow:0 0 14px rgba(var(--cyan-rgb),0.5),0 0 9px rgba(var(--pink-rgb),0.4);}
.nav-center:hover .nav-plus{box-shadow:0 0 20px rgba(var(--cyan-rgb),0.7),0 0 12px rgba(var(--pink-rgb),0.55);}
.badge{position:absolute;top:0;right:2px;background:var(--pink);color:#fff;border-radius:8px;font-size:9px;font-weight:800;padding:1px 5px;min-width:14px;text-align:center;}
/* CARDS */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--cardb);box-shadow:var(--shadow);}
.card-p{padding:14px;}
/* PRODUCT GRID */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
/* ===== DESKTOP RESPONSIVE + VIEW TOGGLE (Phase 3) — phone layout unchanged ===== */
.view-toggle{display:none;align-items:center;gap:2px;background:var(--inp);border:1px solid var(--border);border-radius:10px;padding:3px;margin-right:4px;}
.view-toggle button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:5px 9px;border-radius:7px;transition:all .15s;}
.view-toggle button:hover{color:var(--text);}
.view-toggle button.active{background:var(--cyan);color:#001018;}
@media (min-width:1024px){
  body{max-width:1180px;}
  .view-toggle{display:inline-flex;}
  body .grid2{grid-template-columns:repeat(3,1fr);gap:16px;}
  body .grid2 .prod-img{height:auto;}
  body.view-list .grid2{grid-template-columns:1fr;gap:10px;}
  @media(min-width:768px){body.view-list .grid2{grid-template-columns:1fr 1fr;}}
  body.view-list .grid2 .prod-card{display:flex;align-items:center;gap:12px;padding:10px;}
  body.view-list .grid2 .prod-img{width:110px;min-width:110px;height:96px;border-radius:10px;flex-shrink:0;}
  body.view-list .grid2 .prod-card .share-btn,body.view-list .grid2 .prod-card .ship-tag,body.view-list .grid2 .prod-card .prod-img-overlay{display:none;}
  body.view-list .grid2 .prod-info{flex:1;min-width:0;align-self:center;padding:0;text-align:left;}
  body.view-list .grid2 .prod-title{font-size:14px;-webkit-line-clamp:2;}
  body.view-list .grid2 .prod-price{font-size:16px;}
}
.prod-card{background:var(--card);border-radius:var(--r);border:1px solid var(--cardb);overflow:hidden;cursor:pointer;transition:transform .15s;}
.prod-card:hover{transform:translateY(-2px);}
.prod-img{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--bg3);}
.prod-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.prod-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.4));}
.ship-tag{position:absolute;bottom:7px;right:7px;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);border:1px solid var(--cyan);color:var(--cyan);font-size:8px;font-weight:800;border-radius:20px;padding:3px 8px;letter-spacing:0.3px;}
.fav-btn{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,0.55);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;}
.share-btn{position:absolute;top:6px;right:38px;width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,0.55);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:background .2s;}
.share-btn:hover{background:rgba(var(--cyan-rgb),0.75);}
.fav-btn.active{background:rgba(232,38,74,0.85);}
.prod-info{padding:9px 11px 12px;}
.prod-cond{font-size:10px;color:var(--muted);font-weight:600;margin-bottom:2px;}
.prod-title{font-size:12px;font-weight:700;margin-bottom:4px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.prod-price{font-size:14px;font-weight:900;color:var(--cyan);margin-bottom:3px;}
.prod-loc{font-size:10px;color:var(--muted);}
/* SECTION HEADER */
.sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;}
.sh h3{font-size:14px;font-weight:800;}
.sh-action{font-size:12px;color:var(--cyan);cursor:pointer;}
/* CATEGORIES */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px;}
.cat{background:var(--card);border:1px solid var(--cardb);border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .15s;}
.cat.active,.cat:hover{border-color:var(--cyan);}
.cat .ce{font-size:20px;}
.cat .cl{font-size:11px;color:var(--text);font-weight:700;text-align:center;line-height:1.2;}
.cat.active .cl{color:var(--cyan);}
/* ===== Stage 2: light home cards ===== */
.home-light .cat{background:#fff;border:1px solid #E6EEF6;box-shadow:0 2px 8px rgba(20,80,140,0.05);}
.home-light .cat.active,.home-light .cat:hover{border-color:var(--cyan);box-shadow:0 0 0 1.5px var(--cyan);}
.home-light .cat .cl{color:#26364D;font-size:11px;}
.home-light .cat.active .cl{color:var(--cyan);}
.home-light .prod-card{background:#fff;border:1px solid #E9EFF5;box-shadow:0 3px 14px rgba(20,80,140,0.07);}
.home-light .prod-cond{color:#8A98A8;}
.home-light .prod-title{color:#0F1B2D;}
.home-light .prod-price{color:var(--cyan);}
.home-light .prod-loc{color:var(--muted);}
/* ===== promo banner animations ===== */
@keyframes promoIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes promoShine{0%{transform:translateX(-130%) skewX(-18deg)}55%,100%{transform:translateX(340%) skewX(-18deg)}}
@keyframes promoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes promoRocket{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(5px,-8px) rotate(-7deg)}100%{transform:translate(0,0) rotate(0)}}
.dt-promo{animation:promoIn .5s ease both;transition:transform .2s ease,box-shadow .2s ease;}
.dt-promo:hover{transform:translateY(-2px);}
.dt-promo::after{content:'';position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.28),transparent);transform:translateX(-130%) skewX(-18deg);animation:promoShine 4.8s ease-in-out infinite;pointer-events:none;z-index:1;}
.dt-promo-sell::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent);}
.dt-promo-emoji{animation:promoFloat 3s ease-in-out infinite;}
.dt-promo-rocket{animation:promoRocket 2.6s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.dt-promo,.dt-promo::after,.dt-promo-emoji,.dt-promo-rocket{animation:none!important;}}
/* ===== Stage 4: light home page ===== */
/* ===== ALERTS PAGE LIGHT REDESIGN ===== */
body.alerts-active .content{background:#F4F8FC;}
  body:not(.light-theme).alerts-active .content{background:var(--bg);}
.alerts-grid{display:block;}
.alerts-side{margin-top:14px;}
@media(min-width:1024px){
  .alerts-light{max-width:1180px;margin:0 auto;}
  .alerts-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:start;}
  .alerts-side{margin-top:0;}
}
/* ===== PRODUCT DETAIL LIGHT REDESIGN ===== */
body.prod-active .content{background:#F4F8FC;}
  body:not(.light-theme).prod-active .content{background:var(--bg);}
.prod-light .gallery{background:#fff;}
.prod-light .gallery-slide{background:#fff;}
.prod-light .gallery-slide img{object-fit:contain;}
.prod-light .dt-hscroll::-webkit-scrollbar{display:none;}
@media(min-width:1024px){
  .prod-light{max-width:1180px;margin:0 auto;}
}
body.home-active .content{background:#F4F8FC;}
.home-light .sh h3{color:#0F1B2D;}
.home-light .sh-action{color:var(--cyan);}
.home-light .empty{color:var(--muted);}
.dt-hscroll{max-width:100%;scroll-snap-type:x proximity;scrollbar-width:thin !important;scrollbar-color:#c4d2e2 transparent;}
.dt-hscroll::-webkit-scrollbar{height:8px;display:block !important;}
.dt-hscroll::-webkit-scrollbar-thumb{background:#c4d2e2;border-radius:8px;}
.dt-hscroll::-webkit-scrollbar-track{background:transparent;}
.dt-hscroll>*{scroll-snap-align:start;}
@media(min-width:1024px){.home-light .grid2{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}}
/* SEARCH BAR */
.sbar{display:flex;gap:8px;margin-bottom:16px;}
.sinp{flex:1;background:var(--inp);border:1px solid var(--inpb);border-radius:11px;padding:10px 12px;display:flex;align-items:center;gap:8px;}
.sinp input{background:none;border:none;color:var(--text);font-size:13px;outline:none;flex:1;font-family:inherit;width:100%;}
/* CHIPS */
.chip{display:inline-block;border-radius:8px;font-size:11px;font-weight:700;padding:3px 8px;}
/* GLOW BTN */
.gbtn{background:var(--grad3);border:none;border-radius:12px;color:#fff;font-weight:700;cursor:pointer;padding:12px 22px;font-size:14px;font-family:inherit;width:100%;}
.gbtn:disabled{opacity:.5;cursor:not-allowed;}
/* BACK BTN */
.back{background:var(--cbg);border:1px solid var(--cb);border-radius:9px;color:var(--cyan);cursor:pointer;padding:7px 13px;font-size:13px;font-weight:600;font-family:inherit;margin-bottom:14px;display:inline-block;}
/* TOGGLE */
.tog{width:44px;height:24px;border-radius:12px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
.tog .thumb{position:absolute;top:2px;width:20px;height:20px;border-radius:10px;background:#fff;transition:left .2s;}
/* INPUT */
.finp{margin-bottom:13px;}
.finp label{display:block;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:1px;margin-bottom:5px;}
.finp input,.finp textarea,.finp select{width:100%;background:var(--inp);border:1px solid var(--inpb);border-radius:11px;color:var(--text);padding:11px 13px;font-size:14px;outline:none;font-family:inherit;resize:none;}
.finp select option{background:#151206;}
/* MSG BUBBLES */
.bubble{max-width:75%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.4;}
.bubble-me{background:var(--grad);color:#fff;border-radius:14px 14px 4px 14px;align-self:flex-end;}
.bubble-them{background:var(--card);border:1px solid var(--cardb);border-radius:14px 14px 14px 4px;align-self:flex-start;}
/* AVATAR */
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0;}
.pf-cover{width:100%;aspect-ratio:4/1;min-height:100px;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg3);}
.pf-avatar{width:76px;height:76px;border-radius:18px;object-fit:cover;display:block;border:3px solid var(--bg);background:var(--bg3);}
.pf-avatar-sm{width:64px;height:64px;border-radius:16px;object-fit:cover;display:block;background:var(--bg3);}
.pf-avatar-fallback{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:var(--grad);font-size:24px;}
.wal-top{display:grid;grid-template-columns:1fr;gap:14px;}
.wal-hero{position:relative;overflow:hidden;border-radius:20px;padding:17px 17px 8px;background:radial-gradient(130% 150% at 85% -10%,rgba(16,185,129,0.20),transparent 55%),linear-gradient(160deg,#0c1f1a,#0b1622 72%);border:1px solid rgba(16,185,129,0.22);}
.wal-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.wal-split{display:grid;grid-template-columns:1fr;gap:14px;}
.wal-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.wal-card{background:var(--card);border:1px solid var(--border);border-radius:16px;}
.wal-bank{position:relative;overflow:hidden;border-radius:18px;padding:17px;min-height:172px;background:linear-gradient(135deg,#13243b 0%,#1b1640 60%,#241640 100%);border:1px solid var(--cb);}
.vcard{position:relative;border-radius:18px;padding:17px;min-height:185px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#3b1d6e 0%,#6d28d9 48%,#2563eb 100%);box-shadow:0 0 0 1px rgba(var(--purple-rgb),.35),0 14px 40px -10px rgba(123,79,232,.6),0 0 55px -12px rgba(37,99,235,.5);}
.vcard::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.18),transparent 52%);pointer-events:none;}
.vcard>*{position:relative;z-index:1;}
.vcard-glow{box-shadow:0 0 0 1px rgba(16,185,129,.45),0 14px 40px -10px rgba(16,185,129,.4),0 0 50px -12px rgba(var(--cyan-rgb),.5);}
.vcard-num{font-size:16px;letter-spacing:3px;font-weight:700;}
.send-hero{position:relative;overflow:hidden;border-radius:18px;padding:18px;color:#fff;background:radial-gradient(130% 130% at 90% -10%,rgba(var(--purple-rgb),.5),transparent 55%),linear-gradient(140deg,#1b1040,#2563eb 130%);box-shadow:0 0 40px -10px rgba(123,79,232,.6),inset 0 0 30px -18px rgba(255,255,255,.4);}
.glow-btn{box-shadow:0 0 20px -4px rgba(var(--purple-rgb),.7);}
.pay-ava{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.pay-ava-sel{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--cyan),0 0 16px -2px var(--cyan);}
.pay-method{border-radius:14px;padding:13px;cursor:pointer;border:1px solid var(--cardb);background:var(--card);transition:border-color .15s,box-shadow .15s;}
.pay-method-sel{border-color:var(--purple);background:linear-gradient(135deg,rgba(var(--purple-rgb),.12),rgba(37,99,235,.08));box-shadow:0 0 20px -5px rgba(var(--purple-rgb),.6);}
.gw-badge{font-size:9px;font-weight:800;border-radius:5px;padding:2px 6px;display:inline-block;}
.src-chip{border-radius:11px;padding:9px 12px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--cardb);background:var(--bg3);white-space:nowrap;flex-shrink:0;}
.src-chip-sel{border-color:var(--cyan);color:var(--cyan);background:var(--cbg);box-shadow:0 0 14px -3px rgba(var(--cyan-rgb),.5);}
@media(min-width:1024px){.wal-top{grid-template-columns:1.5fr 1fr;align-items:stretch;}.wal-split{grid-template-columns:1fr 1fr;}.wal-stats{grid-template-columns:repeat(4,1fr);}}
/* PROGRESS */
.pbar{height:5px;border-radius:3px;background:var(--bg3);}
.pbar-fill{height:100%;border-radius:3px;transition:width .6s;}
/* NOTIF ITEM */
.notif-item{display:flex;align-items:flex-start;gap:11px;padding:13px;border-radius:var(--r);margin-bottom:9px;cursor:pointer;border:1px solid var(--cardb);background:var(--card);}
/* HERO CARD */
.hero{background:linear-gradient(135deg,rgba(var(--cyan-rgb),0.06),rgba(var(--purple-rgb),0.06));border-radius:var(--r);padding:16px;margin-bottom:16px;border:1px solid var(--cardb);}
/* ===== Desktop hero DT256 Pay banner ===== */
.hero-inner{display:flex;gap:11px;align-items:center;}
.hero-left{min-width:0;flex:1;}
.hero-pay{display:none;}
.hero-chip{display:inline-flex;align-items:center;gap:7px;margin-top:13px;background:linear-gradient(135deg,rgba(var(--cyan-rgb),.14),rgba(var(--purple-rgb),.14));border:1px solid rgba(var(--cyan-rgb),.32);border-radius:20px;padding:8px 14px;cursor:pointer;font-size:11.5px;font-weight:800;color:var(--cyan);}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes heroPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes heroArrow{0%{transform:translateX(-4px);opacity:.35}50%{opacity:1}100%{transform:translateX(4px);opacity:.35}}
.hero-momo-ic{animation:heroPulse 2.4s ease-in-out infinite;}
.hero-flow-arrow{animation:heroArrow 1.5s ease-in-out infinite;}
.hero-right{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:0;flex-shrink:0;}
.hero-trade{width:90px;height:60px;overflow:visible;filter:drop-shadow(0 4px 10px rgba(var(--cyan-rgb),.18));}
.tp-left{animation:bobL 2.6s ease-in-out infinite;}
.tp-right{animation:bobR 2.6s ease-in-out infinite .35s;}
.trade-box{animation:boxSwap 3s ease-in-out infinite;}
.trade-coin{animation:coinSwap 3s ease-in-out infinite;}
.hero-slogan{display:flex;gap:4px;font-size:9px;font-weight:900;white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;}
.slog-w{display:inline-block;opacity:0;animation:wordReveal 5s ease-in-out infinite;}
.slog-w:nth-child(1){animation-delay:0s;}
.slog-w:nth-child(2){animation-delay:.5s;}
.slog-w:nth-child(3){animation-delay:1s;}
@keyframes boxSwap{0%{transform:translate(0,0);opacity:0;}6%{opacity:1;}44%{transform:translate(62px,-11px);opacity:1;}50%{transform:translate(62px,0);opacity:0;}100%{transform:translate(0,0);opacity:0;}}
@keyframes coinSwap{0%,50%{transform:translate(0,0);opacity:0;}56%{opacity:1;}94%{transform:translate(-58px,-11px);opacity:1;}100%{transform:translate(-58px,0);opacity:0;}}
@keyframes bobL{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.5px);}}
@keyframes bobR{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.5px);}}
@keyframes wordReveal{0%{opacity:0;transform:translateY(11px) scale(.94);}8%{opacity:1;transform:translateY(0) scale(1);}80%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(8px) scale(.94);}}
@media(prefers-reduced-motion:reduce){.trade-box,.trade-coin,.tp-left,.tp-right{animation:none;}.trade-box,.trade-coin{opacity:1;}.slog-w{animation:none;opacity:1;}}
@media (min-width:1024px){
  .hero-inner{display:flex;gap:28px;align-items:center;}
  .hero-left{flex:1;}
  .hero-right{margin-top:0;min-width:152px;}
  .hero-trade{width:138px;height:92px;}
  .hero-slogan{font-size:14.5px;white-space:nowrap;gap:7px;}
  .hero-chip{display:none;}
  .hero-pay{display:flex;flex-direction:column;width:316px;flex-shrink:0;}
  .hp-eyebrow{font-size:13px !important;letter-spacing:2.5px !important;}
  .hp-headline{font-size:34px !important;line-height:1.2 !important;}
  .hp-sub{font-size:16px !important;}
  .hero-pay-card{position:relative;border-radius:18px;padding:18px;color:#fff;overflow:hidden;background:radial-gradient(130% 130% at 85% -10%,rgba(var(--purple-rgb),.55),transparent 55%),linear-gradient(140deg,#1B1305,var(--cyan) 260%);box-shadow:0 16px 44px -12px rgba(var(--cyan-rgb),.6),inset 0 0 30px -18px rgba(255,255,255,.5);animation:heroFloat 4.6s ease-in-out infinite;}
  .hero-pay-card::after{content:'';position:absolute;top:-45%;right:-32%;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(var(--pink-rgb),.5),transparent 70%);}
}
/* STEP BAR */
.steps{display:flex;gap:4px;margin-bottom:6px;}
.step-seg{flex:1;height:5px;border-radius:3px;background:var(--bg3);transition:background .3s;}
.step-seg.done{background:var(--cyan);}
/* LOCATION PICKER */
.locpicker{background:var(--bg2);border-radius:var(--r);padding:14px;border:1px solid var(--cb);margin-bottom:14px;max-height:220px;overflow-y:auto;}
.locopt{padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);}
.locopt:hover,.locopt.sel{background:var(--cbg);color:var(--cyan);font-weight:700;}
/* OTP BOXES */
.otp-boxes{display:flex;gap:7px;justify-content:center;margin-bottom:14px;}
.otp-box{width:42px;height:52px;border-radius:11px;background:var(--inp);border:1px solid var(--inpb);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;}
.otp-box.filled{border-color:var(--cyan);}
/* UTIL */
.flex{display:flex;align-items:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap8{gap:8px;}
.gap11{gap:11px;}
.mt8{margin-top:8px;}
.mt14{margin-top:14px;}
.mb14{margin-bottom:14px;}
.light-theme{
  --cyan-rgb:255,90,18;--purple-rgb:255,122,38;--pink-rgb:232,38,74;--accent-rgb:255,210,30;
  --bg:#F4F7FB;--bg2:#FFFFFF;--bg3:#EEF3F8;
  --cyan:#FF5A12;--cbg:rgba(var(--cyan-rgb),0.10);--cb:rgba(var(--cyan-rgb),0.26);
  --pink:#E8264A;--purple:#FF7A26;--green:#10B981;--amber:#F59E0B;
  --accent:#FFD21E;--primary:#FF5A12;--primary-rgb:255,90,18;--success:#10B981;--warning:#F59E0B;--danger:#E8264A;
  --text:#0F1B2D;--text-soft:#26364D;--muted:#66758A;--border:rgba(15,27,45,0.10);
  --card:#FFFFFF;--cardb:rgba(15,27,45,0.08);
  --shadow:0 8px 24px rgba(15,27,45,0.10);--shadow-sm:0 2px 8px rgba(15,27,45,0.06);--shadow-md:0 8px 24px rgba(15,27,45,0.10);--shadow-lg:0 18px 48px rgba(15,27,45,0.18);
  --inp:#F7FAFD;--inpb:rgba(15,27,45,0.16);
  --grad:linear-gradient(135deg,#FF5A12,#FF7A1A);--grad2:linear-gradient(135deg,#0B1B33,#10233F);--grad3:linear-gradient(135deg,#FF5A12,#FFD21E);
  --r:14px;
}
/* IMAGE GALLERY */
.gallery{position:relative;border-radius:16px;overflow:hidden;margin-bottom:14px;height:260px;background:var(--bg3);}
.gallery-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.gallery-track::-webkit-scrollbar{display:none;}
.gallery-slide{min-width:100%;width:100%;height:100%;scroll-snap-align:center;flex-shrink:0;}
.gallery-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;cursor:zoom-in;}
.gallery-counter{position:absolute;top:12px;left:12px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);color:#fff;font-size:12px;font-weight:700;border-radius:20px;padding:4px 11px;z-index:4;}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);border:none;color:#fff;font-size:21px;cursor:pointer;z-index:4;display:flex;align-items:center;justify-content:center;line-height:1;padding-bottom:2px;}
.gallery-arrow.left{left:10px;}
.gallery-arrow.right{right:10px;}
.gallery-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:4;}
.gdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.55);transition:all .25s;}
.gdot.active{background:#fff;width:20px;border-radius:4px;}
/* FULLSCREEN VIEWER */
.fs-viewer{display:none;position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:rgba(0,0,0,0.82);z-index:600;}
.fs-viewer.open{display:flex;align-items:center;justify-content:center;}
.fs-track{display:flex;height:auto;max-height:100%;width:100%;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.fs-track::-webkit-scrollbar{display:none;}
.fs-slide{min-width:100%;width:100%;height:auto;scroll-snap-align:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.fs-slide img{width:100%;max-height:86vh;object-fit:contain;transition:transform .25s;cursor:zoom-in;}
.fs-slide img.zoomed{transform:scale(2.3);cursor:zoom-out;}
.fs-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.16);border:none;color:#fff;font-size:17px;cursor:pointer;z-index:5;}
.fs-counter{position:absolute;top:22px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-weight:700;z-index:5;}
.fs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,0.13);border:none;color:#fff;font-size:27px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;line-height:1;padding-bottom:3px;}
.fs-arrow.left{left:12px;}
.fs-arrow.right{right:12px;}
/* SELECT OPTIONS readable in both themes */
select option{background:#151206;color:#fff;}
.light-theme select option{background:#FFFFFF;color:#0D1B2A;}
.empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:14px;}
@keyframes dtTyping{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.typing-dot{width:6px;height:6px;border-radius:3px;background:var(--muted);display:inline-block;animation:dtTyping 1.2s infinite}
.chat-overlay{position:fixed;inset:0;height:100dvh;background:var(--bg);z-index:300;display:flex;justify-content:center;}
.chat-panel{display:flex;flex-direction:column;width:100%;max-width:480px;height:100%;background:var(--bg);}
@media(min-width:1024px){.chat-panel{max-width:640px;border-left:1px solid var(--border);border-right:1px solid var(--border);}}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 14px 16px;display:flex;flex-direction:column;}
.chat-msgs{margin-top:auto;display:flex;flex-direction:column;gap:9px;}
.chat-scroll img{max-width:70%;border-radius:12px;display:block;}
.bubble{overflow-wrap:anywhere;word-break:break-word;}
.dt-stars{display:inline-flex;align-items:center;gap:7px;line-height:1;vertical-align:middle}
.dt-stars-num{font-weight:900;font-size:15px;color:var(--cyan)}
.dt-stars-wrap{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:2px}
.dt-stars-bg{color:rgba(150,162,186,0.30)}
.dt-stars-fg{position:absolute;left:0;top:0;color:var(--purple);overflow:hidden;white-space:nowrap}
.dt-stars-count{font-size:12px;color:var(--muted);font-weight:700}
.dt-stars-none{font-size:12px;color:var(--muted);font-weight:600}

/* ===== DT256 — 3D animated feature banners (homepage) — additive, isolated ===== */
.dt-fbanners{ padding-top:8px; margin-top:-8px; }              /* headroom for float/lift, layout-neutral */
.dt-fcard{ position:relative; transform-style:preserve-3d; will-change:transform;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
  animation:dtFloat 6s ease-in-out infinite; }
.dt-hscroll > .dt-fcard:nth-child(2){ animation-delay:-1.5s; }
.dt-hscroll > .dt-fcard:nth-child(3){ animation-delay:-3s; }
.dt-hscroll > .dt-fcard:nth-child(4){ animation-delay:-4.5s; }
@keyframes dtFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
/* glass light reflection (stays within the rounded card, no overflow clipping needed) */
.dt-fcard::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(130px 80px at 28% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%);
  opacity:0; transition:opacity .3s ease; }
/* icon = first child circle */
.dt-fcard > div:first-child{ transition:transform .3s ease, box-shadow .3s ease; }
.dt-hscroll > .dt-fcard:nth-child(1) > div:first-child{ animation:dtGlowBlue 2.8s ease-in-out infinite; }
.dt-hscroll > .dt-fcard:nth-child(2) > div:first-child{ animation:dtGlowGreen 2.8s ease-in-out infinite; }
.dt-hscroll > .dt-fcard:nth-child(3) > div:first-child{ animation:dtTruck 3s ease-in-out infinite; }
.dt-hscroll > .dt-fcard:nth-child(4) > div:first-child{ animation:dtGlowOrange 2.8s ease-in-out infinite; }
@keyframes dtGlowBlue{ 0%,100%{ box-shadow:0 0 0 0 rgba(46,125,245,0);} 50%{ box-shadow:0 0 12px 1px rgba(46,125,245,.5);} }
@keyframes dtGlowGreen{ 0%,100%{ box-shadow:0 0 0 0 rgba(22,179,100,0);} 50%{ box-shadow:0 0 12px 1px rgba(22,179,100,.5);} }
@keyframes dtGlowOrange{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,0);} 50%{ box-shadow:0 0 12px 1px rgba(245,158,11,.5);} }
@keyframes dtTruck{ 0%,100%{ transform:translateX(0); box-shadow:0 0 0 0 rgba(var(--purple-rgb),0);} 50%{ transform:translateX(3px); box-shadow:0 0 12px 1px rgba(var(--purple-rgb),.5);} }
@media (hover:hover){
  .dt-fcard:hover{ box-shadow:0 16px 32px rgba(20,80,140,.18); z-index:2; }
  .dt-fcard:hover::after{ opacity:1; }
  .dt-fcard:hover > div:first-child{ animation:none; transform:scale(1.12); }
}
.dt-fcard:active{ transform:scale(.985); }                    /* tap feedback (mobile) */
.dt-fcard:focus-visible{ outline:2px solid #2E7DF5; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .dt-fcard, .dt-fcard > div:first-child{ animation:none !important; }
  .dt-fcard{ transition:box-shadow .2s ease; }
  .dt-fcard::after{ display:none; }
  .dt-hscroll{ padding-top:0; margin-top:0; }
}

/* ===== DT256 — feature banners: mobile auto-slide carousel (desktop untouched) ===== */
@media (max-width:640px){
  .dt-fbanners{ scroll-snap-type:x mandatory; }
  .dt-fbanners > .dt-fcard{ flex:0 0 100% !important; min-width:0 !important; scroll-snap-align:center; }
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .dt-fbanners{ scroll-snap-type:none; }
}

/* ================================================================
   DT256 v116 — unified typography and robust responsive foundation
   ================================================================ */
:root{
  --dt-font-sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,button,input,select,textarea{font-family:var(--dt-font-sans)!important}
body{width:100%;min-width:0}
img,video,canvas,svg{max-width:100%}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea{font-size:16px}
.content,#main-content{min-width:0;width:100%}
.card,.prod-card,.modal-box{min-width:0}
@media(max-width:820px){
  body{max-width:none!important;width:100%!important;margin:0!important}
  .hdr{width:100%;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .content{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important}
  .nav{width:100%;padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right));padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
  .nav-item{min-width:0;padding-left:8px;padding-right:8px}
  .modal-bg{padding:max(12px,env(safe-area-inset-left))}
  .modal-box{max-width:100%;width:100%}
  .grid2{min-width:0}
  .prod-card{min-width:0}
}
@media(max-width:390px){
  .hdr-name small{display:none}
  .hdr-actions{gap:5px}
  .hbtn-icon,.ham-btn{padding:7px 8px}
  .nav-item span,.nav-center span{font-size:9px!important}
}