/* ===== layout wiring for the SPA shell ===== */
#view{flex:1;min-width:0}
.home-grid{display:flex;width:100%}

/* ===== sidebar: collapsible groups ===== */
.group-head{cursor:pointer;user-select:none}
.nav-subs{display:none;overflow:hidden}
.nav-group.open .nav-subs{display:block}
.nav-group .group-head .chev{transition:transform .2s;margin-left:auto}
.nav-group.open .group-head .chev{transform:rotate(-135deg)}
.sub.active{color:var(--cj-orange);font-weight:600;background:rgba(255,255,255,.65)}
.sub.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--cj-orange)}
.sub{position:relative}
.nav-item[data-route].active{color:var(--cj-orange);font-weight:600}
.nav-item[data-route].active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 3px 3px 0;background:var(--cj-orange)}
.nav-item[data-route].active svg{color:var(--cj-orange)}

/* ===== generic page ===== */
.page{padding:20px 22px;max-width:1200px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:22px;font-weight:600}
.page-head p{color:var(--text3);font-size:13px;margin-top:5px}
.page .card{margin-bottom:16px}
.muted{color:var(--text3)}
h3+.data-table,.card h3{margin-bottom:14px}

/* buttons */
.btn-primary{background:var(--cj-orange);color:#fff;border:none;height:38px;padding:0 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.btn-primary:hover{background:#ff6a00}
.btn-primary.wide{width:100%;margin-top:8px}
.btn-ghost{background:#fff;border:1px solid #e3e5e8;color:#3d4148;height:34px;padding:0 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer}
.btn-ghost:hover{border-color:var(--cj-orange);color:var(--cj-orange)}
.btn-ghost.installed{color:#22b07d;border-color:#bfe8d5}
.btn-white{background:#fff;color:var(--cj-orange);border:none;height:36px;padding:0 16px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}
.btn-white.ghost{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.5)}
.link{color:var(--cj-orange);cursor:pointer;font-size:13px}
.link.danger{color:#f24724}
.danger-btn{color:#f24724;border-color:#f7c9c1}
.tag{background:#fff1e6;color:var(--cj-orange);font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;margin-left:6px;vertical-align:middle}

/* ===== toolbar / filters ===== */
.toolbar{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.search-inline{flex:1;min-width:220px;display:flex;align-items:center;border:1.5px solid #e3e5e8;border-radius:8px;height:40px;padding:0 12px;gap:8px}
.search-inline:focus-within{border-color:var(--cj-orange)}
.search-inline input{flex:1;border:none;outline:none;font-size:13px;background:transparent}
.select{border:1.5px solid #e3e5e8;border-radius:8px;height:40px;padding:0 12px;font-size:13px;color:#3d4148;background:#fff;cursor:pointer}
.fchips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.fchip{background:#f4f5f7;color:#5b6069;font-size:12.5px;padding:7px 14px;border-radius:16px;cursor:pointer;transition:.15s}
.fchip:hover{background:#fff1e6;color:var(--cj-orange)}
.fchip.on{background:var(--cj-orange);color:#fff}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:20px}
.pg{min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #e8eaed;border-radius:6px;font-size:13px;color:#5b6069;cursor:pointer;padding:0 8px}
.pg.on{background:var(--cj-orange);color:#fff;border-color:var(--cj-orange)}
.pg:hover:not(.on){border-color:var(--cj-orange);color:var(--cj-orange)}
.empty{padding:40px;text-align:center;color:var(--text3)}

/* ===== tile grid (factories/brands/people/services) ===== */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:#fff;border-radius:10px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:6px}
.tile h4{font-size:15px;font-weight:600}
.tile-top{display:flex;align-items:center;justify-content:space-between}
.tile-emo{font-size:30px}
.verified{background:#e7f7ee;color:#22b07d;font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px}
.tile-meta{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#5b6069;margin:4px 0}
.tile-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}
.tile-foot small{color:var(--text3)}
.stars{color:#ffb020;letter-spacing:1px}
/* brand */
.brand-banner{height:80px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:6px}
/* person */
.person-top{display:flex;align-items:center;justify-content:space-between}
.person-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ffd9b3,#ffb877);display:flex;align-items:center;justify-content:center;font-size:26px}
.person-tags{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.person-tags span{background:#f4f5f7;color:#5b6069;font-size:11.5px;padding:4px 10px;border-radius:12px}
.tier{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px}
.tier-VIP{background:#fdeede;color:#e08a00}
.tier-Pro{background:#e8f2fe;color:#2b7fef}
.tier-Elite{background:#f0edfd;color:#7b5cf5}
/* services */
.tile.service{gap:10px}
.svc-ic{font-size:30px}
.tile.service .btn-ghost{align-self:flex-start;margin-top:6px}
/* apps */
.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tile.app{flex-direction:row;align-items:center;gap:14px}
.app-ic{width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--c) 14%,#fff);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.app-info{flex:1}
.tile.app .btn-primary,.tile.app .btn-ghost{flex-shrink:0}

/* ===== tables ===== */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{text-align:left;color:var(--text3);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:12px;border-bottom:1px solid #f4f5f7;color:#2d3138}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:#fafbfc}
.mono{font-family:ui-monospace,Menlo,monospace;color:#5b6069}
.cell-prod{display:flex;align-items:center;gap:10px;max-width:320px}
.mini-thumb{width:38px;height:38px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.amt-in{color:#22b07d;font-weight:600}
.amt-out{color:#f24724;font-weight:600}
/* status badges */
.sbadge{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:12px;white-space:nowrap}
.s-paid,.s-processing{background:#e8f2fe;color:#2b7fef}
.s-shipped{background:#fdeede;color:#e08a00}
.s-completed{background:#e7f7ee;color:#22b07d}
.s-unpaid{background:#fff3e0;color:#e08a00}
.s-cancelled{background:#f2f3f5;color:#8a8f97}

/* sub tabs */
.tabs2{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs2 a{padding:7px 16px;border-radius:20px;font-size:13px;color:#5b6069;cursor:pointer;background:#fff}
.tabs2 a:hover{color:var(--cj-orange)}
.tabs2 a.on{background:var(--cj-orange);color:#fff}

/* ===== split (form + list) ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.form-card form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.form-card label,.card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#3d4148;font-weight:500}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card input,.card textarea,.card select{border:1.5px solid #e3e5e8;border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;outline:none}
.card input:focus,.card textarea:focus{border-color:var(--cj-orange)}
.card input:disabled{background:#f7f8fa;color:#9aa0a8}
.upload{border:1.5px dashed #d3d7dd;border-radius:8px;padding:14px;text-align:center;color:#8a8f97;cursor:pointer;font-weight:400!important}
.upload span{color:#b6bbc2}
/* switches */
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f4f5f7;font-size:13.5px}
.switch{position:relative;width:40px;height:22px;cursor:pointer}
.switch input{display:none}
.switch i{position:absolute;inset:0;background:#d3d7dd;border-radius:20px;transition:.2s}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+i{background:var(--cj-orange)}
.switch input:checked+i::after{transform:translateX(18px)}
.card h3.mt{margin-top:22px}

/* ===== cart ===== */
.cart-split{grid-template-columns:1fr 320px}
.cart-row{display:grid;grid-template-columns:56px 1fr auto auto auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #f4f5f7}
.cart-row:last-child{border-bottom:none}
.cart-thumb{width:56px;height:56px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:26px}
.cart-info b{font-size:13.5px;display:block;margin-bottom:4px}
.cart-info small{color:var(--text3)}
.cart-price,.cart-sub{font-weight:600;font-size:14px;min-width:60px;text-align:right}
.cart-sub{color:var(--cj-orange)}
.stepper{display:flex;align-items:center;border:1px solid #e3e5e8;border-radius:7px;overflow:hidden}
.stepper button{width:28px;height:30px;border:none;background:#f7f8fa;cursor:pointer;font-size:15px;color:#5b6069}
.stepper button:hover{background:#fff1e6;color:var(--cj-orange)}
.stepper span{width:34px;text-align:center;font-size:13px}
.cart-x{border:none;background:none;color:#c0c4ca;cursor:pointer;font-size:14px}
.cart-x:hover{color:#f24724}
.summary h3{margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;padding:9px 0;font-size:13.5px;color:#5b6069}
.sum-row.total{border-top:1px solid var(--border);margin-top:6px;padding-top:14px;color:var(--text);font-size:16px}
.sum-row.total b{color:var(--cj-orange);font-size:19px}
.center{text-align:center}
.empty-state{text-align:center;padding:50px}
.empty-emo{font-size:44px;margin-bottom:12px}
.empty-state p{color:var(--text3);margin-bottom:16px}

/* ===== stat cards / wallet ===== */
.stat-cards,.wallet-top{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.mini-stat{background:#fff;border-radius:10px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.mini-stat small{color:var(--text3);font-size:12px;display:block;margin-bottom:8px}
.mini-stat b{font-size:22px}
.mini-stat b.warn{color:#f24724}
.wallet-top{grid-template-columns:1.6fr 1fr 1fr 1fr}
.wallet-card{background:linear-gradient(135deg,#ff9a3d,#ff6a00);border-radius:12px;padding:18px 20px;color:#fff;display:flex;flex-direction:column}
.wallet-card small{opacity:.9;font-size:12px}
.wallet-card b{font-size:30px;margin:4px 0 14px}
.wallet-actions{display:flex;gap:10px;margin-top:auto}

/* ===== toast ===== */
.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:#2f333b;color:#fff;padding:12px 22px;border-radius:10px;font-size:13.5px;font-weight:500;z-index:200;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== login ===== */
body.login-mode{background:linear-gradient(135deg,#fff1e6,#ffe3c9 45%,#ffd4a8)}
body.login-mode .float-alpha,body.login-mode .float-ai{display:none}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border-radius:16px;padding:36px 38px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(255,120,0,.18)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.login-brand b{color:var(--cj-blue);font-size:22px;display:block;line-height:1}
.login-brand em{color:#9aa0a8;font-size:10px;font-style:normal;display:block;margin-top:4px}
.login-card h2{font-size:19px;margin-bottom:18px}
.login-card form{display:flex;flex-direction:column;gap:14px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:#3d4148}
.login-card input{border:1.5px solid #e3e5e8;border-radius:8px;padding:11px 13px;font-size:14px;outline:none}
.login-card input:focus{border-color:var(--cj-orange)}
.login-err{color:#f24724;font-size:12.5px;min-height:16px;margin:-6px 0}
.login-demo{display:flex;align-items:center;gap:8px;margin:18px 0 12px;flex-wrap:wrap}
.login-demo small{color:var(--text3)}
.login-demo .btn-ghost{height:30px;padding:0 12px;font-size:12px}
/* Google sign-in button */
.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border:1.5px solid #e3e5e8;border-radius:10px;background:#fff;font-size:15px;font-weight:600;color:#3d4148;cursor:pointer;transition:.15s}
.google-btn:hover{background:#f7f8fa;border-color:#c7ccd2;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.google-btn .g-ic{width:24px;height:24px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
/* pending / suspended screens */
.pending-emo{font-size:46px;text-align:center;margin:4px 0 6px}
.redeem-box{background:#f7f8fa;border-radius:10px;padding:14px 16px;margin-top:18px}
.redeem-box>.muted{font-size:12.5px}
.redeem-row{display:flex;gap:8px;margin:10px 0 4px}
.redeem-row input{flex:1;border:1.5px solid #e3e5e8;border-radius:8px;padding:10px 12px;font-size:14px;outline:none;font-family:ui-monospace,Menlo,monospace}
.redeem-row input:focus{border-color:var(--cj-orange)}
.redeem-row .btn-primary{white-space:nowrap}

/* ===== public site: header sign-in, auth gate views, landing hero ===== */
.header-signin{height:36px;padding:0 18px}
.auth-view{display:flex;justify-content:center;padding:36px 16px}
.auth-card{background:#fff;border-radius:16px;padding:30px 32px;width:100%;max-width:430px;box-shadow:0 8px 30px rgba(0,0,0,.06);border:1px solid var(--border)}
.auth-card .login-brand{justify-content:center;margin-bottom:18px}
.auth-card h2{font-size:20px}
.gate-emo{font-size:46px;text-align:center;margin:2px 0 4px}
.auth-form{display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:6px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:#3d4148}
.auth-form input{border:1.5px solid #e3e5e8;border-radius:8px;padding:11px 13px;font-size:14px;outline:none}
.auth-form input:focus{border-color:var(--cj-orange)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0 14px;color:#b0b5bc;font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:#eef0f2}
.ts-widget{display:flex;justify-content:center}
.home-public{max-width:1200px}
.hero{display:flex;align-items:center;gap:24px;background:linear-gradient(135deg,#fff1e6,#ffe0c7);border-radius:16px;padding:38px 44px;margin-bottom:16px;overflow:hidden}
.hero-txt{flex:1;min-width:0}
.hero-badge{display:inline-block;background:#fff;color:var(--cj-orange);font-size:12px;font-weight:700;padding:5px 12px;border-radius:14px;margin-bottom:14px}
.hero-txt h1{font-size:34px;line-height:1.15;font-weight:800;color:#2d2013}
.hero-txt p{color:#6b5b48;font-size:15px;margin:14px 0 20px;max-width:460px;line-height:1.5}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-cta .btn-primary,.hero-cta .btn-ghost{height:44px}
.hero-cta .btn-primary{padding:0 22px}
.hero-art{display:flex;gap:6px;font-size:58px;flex-shrink:0}
@media(max-width:820px){.hero{flex-direction:column;text-align:center;padding:30px}.hero-art{display:none}.hero-cta{justify-content:center}.hero-txt h1{font-size:27px}}

/* ===== support chatbot ===== */
.float-ai.active{transform:scale(.9)}
.chat-panel{position:fixed;right:22px;bottom:96px;width:360px;max-width:calc(100vw - 28px);height:520px;max-height:calc(100vh - 130px);background:#fff;border-radius:16px;box-shadow:0 16px 50px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;z-index:120;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:.2s}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
.chat-header{background:linear-gradient(135deg,#ff9a3d,#ff6a00);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.chat-id{display:flex;align-items:center;gap:10px}
.chat-av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.chat-id b{font-size:14px;display:block}
.chat-id small{font-size:11px;opacity:.9}
.chat-close{background:none;border:none;color:#fff;font-size:15px;cursor:pointer;opacity:.9}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f7f8fa}
.chat-msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;word-wrap:break-word}
.chat-msg.bot{background:#fff;border:1px solid #eef0f2;border-bottom-left-radius:4px;align-self:flex-start;color:#2d3138}
.chat-msg.me{background:var(--cj-orange);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.chat-msg b{font-weight:700}
.chat-cta{display:inline-block;margin-top:8px;background:var(--cj-orange);color:#fff;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;text-decoration:none}
.chat-typing{display:inline-flex;gap:4px;padding:2px 0}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:#c0c4ca;animation:chatblink 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.2s}.chat-typing i:nth-child(3){animation-delay:.4s}
@keyframes chatblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chat-quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 8px;background:#f7f8fa}
.chat-chip{background:#fff;border:1px solid #e3e5e8;border-radius:16px;padding:6px 11px;font-size:12px;cursor:pointer;color:#3d4148;white-space:nowrap}
.chat-chip:hover{border-color:var(--cj-orange);color:var(--cj-orange)}
.chat-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #eef0f2;background:#fff}
.chat-input input{flex:1;border:1.5px solid #e3e5e8;border-radius:20px;padding:9px 14px;font-size:13.5px;outline:none}
.chat-input input:focus{border-color:var(--cj-orange)}
.chat-input button{width:38px;height:38px;border-radius:50%;border:none;background:var(--cj-orange);color:#fff;cursor:pointer;font-size:14px;flex-shrink:0}

/* ===== refer & earn ===== */
.refer-hero{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.refer-stat{background:linear-gradient(135deg,#ff9a3d,#ff6a00);color:#fff;border-radius:12px;padding:20px 26px;text-align:center;min-width:130px}
.refer-stat b{font-size:32px;display:block;line-height:1}
.refer-stat small{opacity:.9;font-size:12px}
.refer-link-wrap{flex:1;min-width:240px}
.refer-link{display:flex;gap:8px;margin-top:6px}
.refer-link input{flex:1;border:1.5px solid #e3e5e8;border-radius:8px;padding:10px 12px;font-size:13px;background:#f7f8fa;font-family:ui-monospace,Menlo,monospace}
.refer-link .btn-primary{white-space:nowrap}
.refer-link .btn-primary[disabled]{opacity:.5;cursor:not-allowed}

/* ===== header role tag / logout ===== */
.role-tag{background:#e8f2fe;color:#2b7fef;font-size:11px;font-weight:700;padding:4px 10px;border-radius:12px}
.role-tag.admin{background:#fff1e6;color:var(--cj-orange)}
.ic-btn.logout{font-size:17px;color:#8a8f97}
.ic-btn.logout:hover{color:#f24724}

/* ===== access management ===== */
.wide-page{max-width:1400px}
.select.sm{height:32px;font-size:12.5px;padding:0 8px}
.invite-gen{display:flex;gap:8px;align-items:center}
.invite-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.invite-row{display:flex;align-items:center;gap:14px;background:#f9fafb;border:1px solid #eef0f2;border-radius:8px;padding:10px 14px}
.invite-code{font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:700;letter-spacing:1px;color:#2d3138}
.invite-row small{margin-left:auto}
.stu-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ffd9b3,#ffb877);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perms{display:flex;gap:6px}
.perm{font-size:11px;font-weight:600;padding:4px 10px;border-radius:12px;background:#f2f3f5;color:#9aa0a8;cursor:pointer;user-select:none;border:1px solid transparent}
.perm:hover{border-color:#d3d7dd}
.perm.on{background:#e7f7ee;color:#22b07d}
.nowrap{white-space:nowrap}

/* ===== 1688 import ===== */
.import-hero{text-align:center;padding:34px}
.import-brand{font-size:34px;font-weight:800;color:#ff5000;margin-bottom:18px}
.import-brand span{color:#9aa0a8;font-weight:600;font-size:20px}
.import-form{display:flex;gap:10px;max-width:640px;margin:0 auto 12px}
.import-form input{flex:1;border:1.5px solid #e3e5e8;border-radius:8px;padding:12px 14px;font-size:13.5px;outline:none}
.import-form input:focus{border-color:#ff5000}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.step{background:#fff;border-radius:10px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.step-n{width:30px;height:30px;border-radius:50%;background:var(--cj-orange);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.step b{display:block;margin-bottom:6px;font-size:14px}
.step p{font-size:12.5px;line-height:1.5}

/* ===== modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(20,22,26,.55);z-index:220;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:.18s}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-overlay .pm{background:#fff;border-radius:16px;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.3);transform:translateY(10px);transition:.18s}
.modal-overlay.show .pm{transform:none}
.modal-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.85);color:#5b6069;font-size:13px;cursor:pointer;z-index:2;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.pm-hero{height:150px;display:flex;align-items:center;justify-content:center;font-size:64px;border-radius:16px 16px 0 0}
.pm-body{padding:20px 22px 24px}
.pm-body h3{font-size:17px;line-height:1.35}
.pm-meta{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.pm-desc{font-size:13px;line-height:1.55;margin-bottom:14px}
.pm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f4f5f7}
.pm-row .select{min-width:130px}
.pm-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.pm-actions .btn-primary,.pm-actions .btn-ghost{flex:1;white-space:nowrap;height:42px}
.pm .auth-form textarea{border:1.5px solid #e3e5e8;border-radius:8px;padding:10px 12px;font-size:13.5px;font-family:inherit;outline:none;resize:vertical}
.pm .auth-form textarea:focus{border-color:var(--cj-orange)}

/* ===== order timeline ===== */
.timeline{display:flex;align-items:center;gap:4px;margin-top:8px}
.tl-step{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:64px}
.tl-dot{width:26px;height:26px;border-radius:50%;background:#eef0f2;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.tl-step.done .tl-dot{background:#22b07d}
.tl-step small{font-size:11px;color:#8a8f97;white-space:nowrap}
.tl-step.done small{color:#22b07d;font-weight:600}
.tl-line{flex:1;height:2px;background:#eef0f2;min-width:14px}

/* ===== header: cart + bell dropdown ===== */
.ic-btn.cart-hdr{position:relative;font-size:17px}
.ic-btn.cart-hdr .badge,.bell-wrap .badge{position:absolute;top:-7px;right:-9px}
.bell-wrap{position:relative}
.bell-wrap .ic-btn{position:relative;font-size:17px}
.bell-drop{position:absolute;top:40px;right:-10px;width:300px;background:#fff;border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.18);border:1px solid var(--border);z-index:210;display:none;max-height:380px;overflow-y:auto}
.bell-drop.show{display:block}
.bell-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.notif{padding:11px 14px;border-bottom:1px solid #f4f5f7}
.notif:last-child{border-bottom:none}
.notif b{font-size:13px;display:block}
.notif p{font-size:12.5px;color:#5b6069;margin:3px 0}
.notif small{font-size:11px}

/* new order status badges */
.s-pending{background:#fff3e0;color:#e08a00}
.s-delivered{background:#e7f7ee;color:#22b07d}

@media(max-width:700px){
  .bell-drop{position:fixed;top:60px;left:10px;right:10px;width:auto}
  .timeline{flex-wrap:wrap}
}

/* ===== responsive ===== */
@media(max-width:1240px){.tile-grid{grid-template-columns:repeat(2,1fr)}.rightcol{display:none}}
@media(max-width:1000px){.split,.app-grid,.stat-cards,.wallet-top,.steps{grid-template-columns:1fr}.cart-split{grid-template-columns:1fr}.import-form{flex-direction:column}}
@media(max-width:820px){.tile-grid{grid-template-columns:1fr}}

/* =====================================================================
   MOBILE  — off-canvas nav drawer + compact header + fluid content
   ===================================================================== */
.nav-backdrop{display:none}

@media(max-width:900px){
  /* ---- header ---- */
  .topbar{height:58px;padding:0 12px;gap:10px}
  .promo{display:none}
  .logo-text em{display:none}
  .logo-mark{width:34px;height:34px;font-size:19px}
  .logo-text b{font-size:17px}
  .menu-btn{order:-1;background:transparent;padding:0 4px}
  .menu-btn .caret{display:none}
  .ic-btn.lang span{display:none}
  .topbar-right{gap:12px}
  .header-signin{height:34px;padding:0 14px;font-size:13px}

  /* ---- sidebar becomes a drawer (overrides styles.css display:none) ---- */
  .sidebar{
    display:block;position:fixed;top:58px;left:0;bottom:0;width:272px;
    z-index:160;transform:translateX(-100%);transition:transform .25s ease;
    overflow-y:auto;min-height:0;padding:10px 0 30px;
    box-shadow:2px 0 22px rgba(0,0,0,.16);
  }
  body.nav-open .sidebar{transform:none}
  body.nav-open{overflow:hidden}
  .sidebar-collapse{display:none}
  .nav-backdrop{display:block;position:fixed;inset:58px 0 0 0;background:rgba(0,0,0,.45);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}

  /* ---- layout / content ---- */
  .layout{max-width:100%}
  .home-grid{flex-direction:column}
  .content,.page,.wide-page{padding:12px;max-width:100%}
  .card{padding:16px}
  .page-head h1{font-size:20px}
  .check-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .stat-grid{grid-template-columns:1fr}
  .strategy-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr;padding:30px 20px;gap:20px}
  .tabs,.tabs2{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar,.tabs2::-webkit-scrollbar{display:none}
}

@media(max-width:700px){
  .topbar-search{display:none}          /* search lives on the Products page on phones */
  .data-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .prod-img{height:124px;font-size:34px}
  .prod-title{font-size:12.5px;height:34px}
  .stat-cards,.wallet-top{grid-template-columns:1fr 1fr}
  .wallet-card{grid-column:1 / -1}

  /* cart rows stack instead of overflowing */
  .cart-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;position:relative;padding-right:24px}
  .cart-thumb{width:52px;height:52px}
  .cart-info{flex:1 1 55%;min-width:0}
  .cart-price{display:none}
  .stepper{margin-left:62px}
  .cart-sub{margin-left:auto}
  .cart-x{position:absolute;top:12px;right:0}

  /* auth + hero */
  .auth-view{padding:18px 8px}
  .auth-card{padding:24px 20px}
  .hero{padding:26px 20px}
  .hero-txt h1{font-size:24px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{width:100%}

  /* refer & earn */
  .refer-stat{width:100%}
  .refer-link{flex-direction:column}
  .refer-link .btn-primary{width:100%}

  /* chatbot as a bottom sheet */
  .chat-panel{right:8px;left:8px;bottom:78px;width:auto;max-width:none;height:min(72vh,520px)}
  .float-ai{right:14px;bottom:16px;width:48px;height:48px}
  .float-alpha{display:none}
}

@media(max-width:400px){
  .check-row{grid-template-columns:1fr}
  .stat-cards,.wallet-top{grid-template-columns:1fr}
  .invite-row{flex-wrap:wrap}
  .invite-row small{margin-left:0}
}

/* ===== desktop sidebar collapse ===== */
@media(min-width:901px){
  body.sidebar-collapsed .sidebar{width:22px;min-width:22px;overflow:visible}
  body.sidebar-collapsed .sidebar nav{display:none}
}