/* Dashboard (merchant + admin) - muundo wa poster: sidebar nyeusi, machungwa, kadi nyeupe */
body.app{background:#F4F6F9;color:var(--ink);font-size:14px}
.layout{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--navy);color:#CBD5E1;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:50;transition:transform .25s}
.sidebar .brand{padding:20px 20px 14px}
.sidebar .brandmark{color:#fff;font-size:18px}.sidebar .brandmark b{color:#FB923C}
.sidebar nav{flex:1;overflow-y:auto;padding:6px 12px 14px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;margin:2px 0;border-radius:10px;color:#CBD5E1;text-decoration:none;font-weight:500;font-size:14px;transition:.15s}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(249,115,22,.35)}
.nav-sep{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#64748B;padding:14px 14px 4px}
.sidebar .foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.main{margin-left:248px;flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--line);height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40}
.topbar h1{font-size:18px;margin:0}
.topbar .who{display:flex;align-items:center;gap:12px}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#FB923C,var(--primary-600));color:#fff;display:grid;place-items:center;font-weight:700}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--navy)}
.content{padding:24px;max-width:1280px;width:100%}
.scrim{display:none}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px}
.card h2{font-size:16px;margin:0 0 4px}.card .sub{color:var(--muted);font-size:13px;margin:0 0 16px}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.stat{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.stat .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.stat .lbl{color:var(--muted);font-size:12.5px}.stat .val{font-size:22px;font-weight:700;line-height:1.2}
.ico-green{background:#DCFCE7;color:#16A34A}.ico-red{background:#FEE2E2;color:#DC2626}.ico-orange{background:#FFEDD5;color:#EA580C}.ico-purple{background:#EDE9FE;color:#7C3AED}.ico-blue{background:#DBEAFE;color:#2563EB}
.chart{width:100%;height:auto}

table.t{width:100%;border-collapse:collapse}
.t th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:12px;border-bottom:1px solid #F1F5F9;vertical-align:middle}
.t tr:last-child td{border-bottom:0}.t .num{text-align:right;white-space:nowrap}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#F1F5F9}

.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600}
.badge-ok{background:#DCFCE7;color:#15803D}.badge-warn{background:#FEF3C7;color:#B45309}.badge-bad{background:#FEE2E2;color:#B91C1C}.badge-info{background:#DBEAFE;color:#1D4ED8}

label.f{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.field{margin-bottom:16px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=search],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink);transition:.15s}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}
.hint{font-size:12px;color:var(--muted);margin-top:5px}
.row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
input[type=color]{width:46px;height:38px;border:1.5px solid var(--line);border-radius:8px;padding:2px;background:#fff;cursor:pointer}
.check{display:flex;gap:10px;align-items:flex-start;margin:8px 0;font-size:14px}.check input{margin-top:3px;accent-color:var(--primary)}

.btn-sm{min-height:34px;padding:0 14px;font-size:13px;border-radius:8px}
.btn-danger{background:#fff;color:var(--danger);border-color:#FECACA}.btn-danger:hover{background:var(--danger);color:#fff}
.btn-block{width:100%}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.alert{padding:12px 16px;border-radius:12px;margin-bottom:18px;font-weight:500;display:block;line-height:1.5}
.alert-success{background:#DCFCE7;color:#166534}.alert-error{background:#FEE2E2;color:#991B1B}
.alert-warn{background:#FEF3C7;color:#92400E}.alert-info{background:#DBEAFE;color:#1E40AF}
.alert a{color:inherit;font-weight:700}

.upload{border:2px dashed #FDBA74;border-radius:12px;padding:18px;text-align:center;background:#FFF7ED;cursor:pointer;transition:.15s}
.upload:hover{background:#FFEDD5}
.upload img{max-height:120px;border-radius:8px;margin:0 auto 8px;display:block}
.upload input[type=file]{display:none}
.upload-progress{display:none;margin-top:14px}.upload-progress.on{display:block}
.upload-progress .pct{font-size:12px;color:var(--muted);margin-top:6px;display:flex;justify-content:space-between;align-items:center}
.busy{pointer-events:none;opacity:.7}

.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:10px 16px;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--primary-600);border-color:var(--primary)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:16px}
.pager a,.pager span{padding:7px 13px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:#fff}
.pager .on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{background:#fff;border:2px solid var(--line);border-radius:16px;padding:22px;position:relative;cursor:pointer;transition:.15s}
.plan.sel{border-color:var(--primary);box-shadow:0 10px 26px rgba(249,115,22,.18)}
.plan .tag{position:absolute;top:-11px;left:20px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}
.plan h3{margin:0 0 6px}.plan .price{font-size:28px;font-weight:800;color:var(--navy)}.plan .price small{font-size:13px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:14px 0 0}.plan li{padding:5px 0 5px 24px;position:relative;font-size:13.5px}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}
.dur{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.dur label{border:2px solid var(--line);border-radius:12px;padding:10px 16px;cursor:pointer;font-weight:600;background:#fff;text-align:center}
.dur input{display:none}.dur label.sel{border-color:var(--primary);background:var(--primary-50)}
.dur .off{display:block;font-size:11px;color:var(--success);font-weight:700}
.total-box{background:var(--primary-50);border:1px solid var(--primary-100);border-radius:12px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;margin:14px 0}
.total-box .amt{font-size:24px;font-weight:800;color:var(--primary-600)}
.paywait{text-align:center;padding:40px 20px}
.paywait .dots-loader{margin:10px 0 18px}

/* Auth (poster 1) */
body.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.auth-hero{background:linear-gradient(160deg,#F97316,#EA580C);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.auth-hero .brandmark{color:#fff}.auth-hero .brandmark i{background:#fff;color:var(--primary)}.auth-hero .brandmark b{color:#fff}
.auth-hero h2{font-size:clamp(26px,3.2vw,38px);line-height:1.2;margin:0}
.auth-hero ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.auth-hero li{display:flex;gap:12px;align-items:center;font-weight:500}.auth-hero li i{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-card{width:100%;max-width:440px}
.auth-card h1{font-size:26px;margin:0 0 6px}.auth-card .sub{color:var(--muted);margin:0 0 22px}
.slug-box{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.slug-box span{padding:0 12px;background:#F8FAFC;color:var(--muted);font-size:13px;white-space:nowrap;align-self:stretch;display:flex;align-items:center}
.slug-box input{border:0;border-radius:0;box-shadow:none!important}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* Preview ya theme */
.preview{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.preview .ph{padding:12px 16px;color:#fff;font-weight:700;display:flex;justify-content:space-between}
.preview .pb{padding:16px}.preview .pbtn{display:inline-block;padding:8px 16px;border-radius:8px;color:#fff;font-weight:600;font-size:13px}
.preview.dark{background:#0F172A;color:#E2E8F0}
.swatch-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.lockbox{background:linear-gradient(135deg,#FFF7ED,#fff);border:1px dashed #FDBA74;border-radius:14px;padding:22px;text-align:center}
.qr-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.qr-box{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.qr-box svg{max-width:100%;height:auto}
canvas.sharecard{width:100%;max-width:360px;height:auto;border-radius:16px;box-shadow:var(--shadow);display:block;margin:0 auto 14px}

@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.plans{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .sidebar{transform:translateX(-100%)}.sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:45}
  .main{margin-left:0}.menu-btn{display:block}.content{padding:16px}.topbar{padding:0 14px}
  .g2,.g3,.row,.qr-wrap,.split{grid-template-columns:1fr}
  body.auth{grid-template-columns:1fr}.auth-hero{padding:28px 22px;gap:14px}.auth-hero ul{display:none}
  .t th,.t td{padding:10px 8px}
}
@media (max-width:520px){.g4{grid-template-columns:1fr}.who .name{display:none}}
.preview .ph{background:var(--ph,#1B2433)}
.preview .pbtn{background:var(--pp,#F97316)}.preview .pbtn.s{background:var(--ps,#2563EB)}
.preview.dark .pb{background:#0F172A}

/* Theme editor */
.theme-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.theme-prev{position:sticky;top:80px}
.font-group{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.font-opt{cursor:pointer;display:block}.font-opt input{position:absolute;opacity:0;pointer-events:none}
.font-card{display:flex;flex-direction:column;gap:2px;border:2px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;transition:.15s;height:100%}
.font-card b{font-size:22px;line-height:1.2;font-weight:inherit}.font-card small{font-family:var(--font);font-style:normal;font-weight:400;font-size:11px;color:var(--muted)}
.font-opt input:checked+.font-card{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 3px var(--primary-100)}
.font-opt input:focus-visible+.font-card{outline:3px solid var(--primary-100)}
.shadow-opts{display:flex;gap:12px;flex-wrap:wrap}.shadow-opt{cursor:pointer}.shadow-opt input{position:absolute;opacity:0;pointer-events:none}
.shadow-opt span{display:block;padding:12px 18px;border-radius:10px;background:#fff;border:2px solid transparent;font-weight:600}
.shadow-opt input:checked+span{border-color:var(--primary)}
input[type=range]{width:100%;accent-color:var(--primary)}
.preview{--pr:14px;--psh:0 4px 14px rgba(15,23,42,.08);--pbtn:#F97316;--pbtnink:#fff;--pfam:'Poppins',sans-serif;--phw:700;font-family:var(--pfam)}
.preview .ph{border-radius:0}
.preview .ptitle{font-family:var(--pfam);font-weight:var(--phw);margin:0 0 6px}
.preview .pname{font-family:var(--pfam);font-weight:var(--phw)}
.preview .pcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.preview .pcard-x{background:#fff;border:1px solid var(--line);border-radius:var(--pr);box-shadow:var(--psh);padding:10px;display:flex;flex-direction:column;gap:5px;color:#0F172A}
.preview.dark .pcard-x{background:#111A2E;color:#E5E7EB;border-color:#1F2A44}
.preview .pimg{aspect-ratio:4/3;background:linear-gradient(135deg,#FFE4CC,#FDBA74);border-radius:calc(var(--pr)*.7)}
.preview .pprice{color:var(--pp,#F97316);font-weight:700}
.preview .pbtn{background:var(--pbtn);color:var(--pbtnink);border-radius:calc(var(--pr)*.7);text-align:center;padding:8px 6px;font-size:12px;font-weight:600;display:block}
@media (max-width:1000px){.theme-grid{grid-template-columns:1fr}.theme-prev{position:static;order:-1}}

/* Orders: vikundi vya siku (Leo / Jana / tarehe) */
.t tr.day-row td{background:#F1F5F9;color:var(--muted);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px}
.t tr.day-row.today td{background:#FFEDD5;color:#C2410C}
.day-date{font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}

/* ---------- Topbar + menyu ya mtumiaji + sidebar ya simu ---------- */
.topbar{gap:12px}
.tb-left{display:flex;align-items:center;gap:8px;min-width:0}.tb-left h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-right{display:flex;align-items:center;gap:10px;flex:none}
.tb-bell{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--navy);text-decoration:none;background:#fff}
.tb-bell:hover{border-color:var(--primary);color:var(--primary-600)}
.tb-bell b{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:99px;background:var(--primary);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 5px}
.tb-view{gap:6px}
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:99px;padding:3px 10px 3px 3px;cursor:pointer;font:inherit;color:var(--ink);background:#fff}
.user-btn:hover,.user-menu.open .user-btn{border-color:var(--primary)}
.user-btn .name{font-weight:600;font-size:13.5px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-btn .chev{font-size:11px;color:var(--muted)}
.pop{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(15,23,42,.18);padding:6px;z-index:60}
.user-menu.open .pop{display:block}
.pop-head{display:flex;flex-direction:column;gap:2px;padding:12px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}.pop-head span{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}.pop-head .badge{align-self:flex-start;margin-top:4px}
.pop a,.pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;border:0;background:none;text-align:left;font:inherit;font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer}
.pop a:hover,.pop button:hover{background:var(--primary-50);color:var(--primary-600)}
.side-close{display:none;background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:10px;width:38px;height:38px;cursor:pointer;place-items:center}
.sidebar .brand{display:flex;align-items:center;justify-content:space-between;gap:8px}
body.nav-open{overflow:hidden}
@media(max-width:860px){.side-close{display:grid}.sidebar{width:min(86vw,300px)}}
@media(max-width:760px){.tb-view .lbl{display:none}.tb-view{padding:0;width:40px;min-height:40px;border-radius:50%}}
@media(max-width:640px){.tb-state{display:none}.user-btn .name,.user-btn .chev{display:none}.user-btn{padding:3px}.tb-right{gap:8px}}

/* Auth: mstari wa juu */
.auth-form{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:18px}
.auth-top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:440px;width:100%;margin:0 auto;font-size:14px;color:var(--muted)}
.auth-top .back{text-decoration:none;font-weight:600;color:var(--muted)}.auth-top .back:hover{color:var(--primary-600)}
.auth-card{margin:auto}

/* ---------- Kibadilishaji cha lugha + sarafu ---------- */
.prefs{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.prefs .pg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:#fff}
.prefs .pg a{padding:5px 10px;font-size:12px;font-weight:700;text-decoration:none;color:var(--muted);line-height:1.4}
.prefs .pg a:hover{color:var(--primary-600)}
.prefs .pg a.on{background:var(--primary);color:#fff}
.topbar .prefs{margin-right:2px}
@media(max-width:700px){.topbar .prefs .pg:nth-child(2){display:none}}
.auth-top .prefs{margin-left:auto}
.tb-bell b.pulse{animation:bell-pop .35s ease}@keyframes bell-pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.msg-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff}
.msg-item.unread{border-color:var(--primary);background:#FFF7ED}
.msg-item h3{margin:0 0 4px;font-size:16px}.msg-item .when{color:var(--muted);font-size:12.5px}
.msg-item .body{margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.bc-box{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px;background:#F8FAFC}
.bc-opts{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.bc-opts label{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.bc-opts label.dis{opacity:.5;cursor:not-allowed}

/* ---------- OTP (boxes 6) ---------- */
.inline-send{display:flex;gap:8px;align-items:stretch}.inline-send input{flex:1;min-width:0}.inline-send .btn{white-space:nowrap}
.otp-label{margin:10px 0 6px;font-size:13px;font-weight:600;color:var(--muted)}
.otp{display:flex;gap:8px;justify-content:space-between}
.otp-box{width:100%;max-width:52px;aspect-ratio:1/1.15;text-align:center;font-size:22px;font-weight:700;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:0;min-width:0}
.otp-box:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(249,115,22,.2)}
.otp.err .otp-box{border-color:#DC2626;animation:otp-shake .3s}
@keyframes otp-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#email-code-msg.ok{color:#15803D;font-weight:600}#email-code-msg.bad{color:#B91C1C;font-weight:600}
@media(max-width:380px){.otp{gap:5px}.otp-box{font-size:19px;border-radius:10px}}