:root{--bg:#f4f7fb;--card:#fff;--text:#172033;--muted:#6b7280;--line:#e5e9f2;--primary:#5b5bd6;--primary2:#7c3aed;--success:#0f9d72;--danger:#dc3545;--warning:#e59b18;--sidebar:#111827;--radius:16px;--shadow:0 10px 30px rgba(30,41,59,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.text-right{text-align:right}.full{width:100%}.nowrap{white-space:nowrap}
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:var(--sidebar);color:#d1d5db;padding:18px 14px;z-index:30;overflow:auto}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff;padding:4px 8px 20px}.brand-center{justify-content:center;color:var(--text)}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}.nav-group{margin:12px 0}.nav-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#6b7280;padding:8px 12px}.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:3px 0;border-radius:11px;color:#cbd5e1}.nav-link:hover,.nav-link.active{background:#232d3f;color:#fff}.nav-icon{width:20px;text-align:center}.main{margin-left:250px;min-height:100vh}.topbar{height:70px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20}.top-left,.top-right{display:flex;align-items:center;gap:12px}.mobile-menu{display:none;border:0;background:transparent;font-size:24px}.store-switch{border:1px solid var(--line);background:#fff;padding:9px 12px;border-radius:10px}.user-chip{display:flex;align-items:center;gap:9px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ede9fe;color:#5b21b6;font-weight:800}.content{padding:24px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}.page-head h1{margin:0;font-size:25px}.page-head p{margin:5px 0 0;color:var(--muted)}
.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.stat{display:flex;justify-content:space-between;align-items:center}.stat-label{font-size:13px;color:var(--muted)}.stat-value{font-size:25px;font-weight:800;margin-top:5px}.stat-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#eef2ff;color:var(--primary);font-size:21px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.card-head h3{margin:0;font-size:17px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:10px;padding:9px 13px;font-weight:700;transition:.15s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}.btn.secondary{background:#fff;border-color:var(--line);color:var(--text)}.btn.success{background:var(--success);color:#fff}.btn.danger{background:var(--danger);color:#fff}.btn.warning{background:var(--warning);color:#fff}.btn.sm{padding:6px 9px;font-size:12px}.btn.icon{width:38px;height:38px;padding:0}.actions{display:flex;gap:8px;flex-wrap:wrap}
.form-grid{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}label{display:grid;gap:6px;font-size:13px;font-weight:700}input,select,textarea{width:100%;border:1px solid #dce1ea;background:#fff;border-radius:10px;padding:10px 11px;outline:none;color:var(--text)}input:focus,select:focus,textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.12)}textarea{min-height:90px;resize:vertical}.input-group{display:flex}.input-group input{border-radius:10px 0 0 10px}.input-group .btn{border-radius:0 10px 10px 0}.help{font-size:12px;color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse;min-width:760px;background:#fff}.table th,.table td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.table th{background:#f8fafc;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.table tr:last-child td{border-bottom:0}.table .right{text-align:right}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;background:#eef2ff;color:#4338ca}.badge.success{background:#dcfce7;color:#166534}.badge.danger{background:#fee2e2;color:#991b1b}.badge.warning{background:#fef3c7;color:#92400e}.badge.gray{background:#e5e7eb;color:#374151}.alert{padding:12px 14px;border-radius:11px;margin-bottom:14px;border:1px solid}.alert.success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}.alert.danger{background:#fff1f2;color:#9f1239;border-color:#fecdd3}.alert.warning{background:#fffbeb;color:#92400e;border-color:#fde68a}.alert.info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.search{max-width:360px;position:relative}.search input{padding-left:36px}.search:before{content:'⌕';position:absolute;left:12px;top:8px;color:var(--muted);font-size:19px}.pagination{display:flex;gap:6px;justify-content:flex-end;margin-top:14px}.pagination a,.pagination span{min-width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff}.pagination .active{background:var(--primary);color:#fff;border-color:var(--primary)}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:80}.modal-backdrop.show{display:flex}.modal{background:#fff;border-radius:18px;max-width:720px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 25px 70px rgba(0,0,0,.25)}.modal-head,.modal-foot{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.modal-foot{border-top:1px solid var(--line);border-bottom:0}.modal-body{padding:18px}.modal h3{margin:0}
.auth-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,#ede9fe,transparent 35%),radial-gradient(circle at 80% 80%,#dbeafe,transparent 35%),#f8fafc;padding:18px}.auth-card,.install-card{width:min(430px,100%);background:#fff;padding:26px;border-radius:22px;border:1px solid var(--line);box-shadow:0 25px 70px rgba(30,41,59,.14)}.install-card{width:min(650px,100%)}.auth-card h1,.install-card h1{text-align:center;margin:6px 0 6px}.auth-card .subtitle{text-align:center;color:var(--muted);margin:0 0 20px}
.pos-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.8fr);gap:18px}.product-panel{min-height:calc(100vh - 120px)}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.product-card{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff;cursor:pointer;transition:.15s;min-height:125px;display:flex;flex-direction:column;justify-content:space-between}.product-card:hover{border-color:#8b5cf6;box-shadow:0 8px 22px rgba(91,91,214,.12);transform:translateY(-2px)}.product-name{font-weight:800;font-size:14px}.product-meta{font-size:12px;color:var(--muted)}.product-price{font-weight:900;color:#4f46e5}.cart-panel{position:sticky;top:88px;height:calc(100vh - 112px);display:flex;flex-direction:column}.cart-list{flex:1;overflow:auto;margin:0 -4px;padding:0 4px}.cart-empty{text-align:center;color:var(--muted);padding:60px 20px}.cart-item{padding:11px 0;border-bottom:1px solid var(--line)}.cart-line{display:flex;justify-content:space-between;gap:10px}.qty-control{display:flex;align-items:center;gap:6px;margin-top:8px}.qty-control button{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:8px}.qty-control input{width:65px;padding:5px;text-align:center}.cart-total{border-top:1px dashed #cbd5e1;padding-top:13px}.summary-line{display:flex;justify-content:space-between;margin:7px 0}.summary-line.grand{font-size:20px;font-weight:900;margin-top:11px}.checkout-btn{margin-top:12px;padding:13px}.quick-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.quick-pay button{padding:8px;border:1px solid var(--line);background:#f8fafc;border-radius:9px}.receipt{width:80mm;margin:0 auto;background:#fff;padding:8mm;font-family:monospace;color:#000}.receipt h2,.receipt p{text-align:center;margin:2px 0}.receipt table{width:100%;font-size:12px}.receipt td{vertical-align:top;padding:2px 0}.receipt .sep{border-top:1px dashed #000;margin:7px 0}.receipt-actions{text-align:center;margin:15px}
.kpi-list{display:grid;gap:10px}.kpi-item{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:9px 0}.progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2))}.empty-state{text-align:center;padding:35px;color:var(--muted)}
@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:920px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.mobile-menu{display:block}.pos-layout{grid-template-columns:1fr}.cart-panel{position:static;height:auto;min-height:500px}.product-panel{min-height:auto}.grid-3{grid-template-columns:1fr}.topbar{padding:0 14px}.content{padding:16px}.user-chip .user-text{display:none}}
@media(max-width:650px){.grid-4,.grid-2,.form-row{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.page-head{align-items:flex-start;flex-direction:column}.toolbar{align-items:stretch;flex-direction:column}.search{max-width:none}.top-right .store-switch{max-width:145px}.card{padding:14px}.auth-card,.install-card{padding:20px}.quick-pay{grid-template-columns:1fr 1fr}}
@media print{.no-print,.sidebar,.topbar,.receipt-actions{display:none!important}.main{margin:0}.content{padding:0}.receipt{box-shadow:none}}

/* Kasir Cerdas landing page */
.landing-body{background:#fff;color:#101828}.landing-nav{height:78px;max-width:1220px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.landing-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900}.landing-links{display:flex;align-items:center;gap:22px;font-weight:700;font-size:14px}.landing-links>a:not(.btn):hover{color:var(--primary)}.btn.lg{padding:13px 20px;border-radius:12px;font-size:15px}.btn.light{background:#fff;color:#4338ca}.hero-section{max-width:1220px;margin:auto;min-height:650px;padding:72px 24px 90px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.hero-copy h1{font-size:68px;line-height:.95;margin:16px 0 10px;letter-spacing:-.05em;background:linear-gradient(135deg,#3730a3,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy h2{font-size:35px;line-height:1.16;margin:0 0 20px;letter-spacing:-.025em}.hero-copy>p{font-size:18px;line-height:1.75;color:#667085;max-width:620px}.eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#5b5bd6}.hero-actions{display:flex;gap:12px;margin:30px 0 22px}.hero-proof{display:flex;gap:18px;flex-wrap:wrap;color:#475467;font-size:13px;font-weight:700}.hero-visual{position:relative;min-height:460px;display:grid;place-items:center}.mock-window{width:100%;max-width:590px;border:1px solid #dfe4ee;background:#fff;border-radius:22px;box-shadow:0 35px 80px rgba(55,48,163,.17);overflow:hidden;transform:rotate(1deg)}.mock-top{height:42px;border-bottom:1px solid #eef1f6;display:flex;align-items:center;gap:7px;padding:0 15px}.mock-top span{width:9px;height:9px;border-radius:50%;background:#d0d5dd}.mock-layout{height:345px;display:grid;grid-template-columns:115px 1fr}.mock-side{background:#111827;color:#fff;padding:18px 13px;font-size:11px}.mock-side b{display:block;margin-bottom:26px}.mock-side i{display:block;height:10px;border-radius:5px;background:#344054;margin:14px 0}.mock-main{background:#f7f8fc;padding:25px}.mock-title{width:42%;height:20px;background:#d9ddea;border-radius:7px;margin-bottom:22px}.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mock-stats div{height:75px;background:#fff;border:1px solid #e9ecf3;border-radius:12px}.mock-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:14px}.mock-grid div{height:170px;background:#fff;border:1px solid #e9ecf3;border-radius:12px}.floating-card{position:absolute;background:#fff;border:1px solid #e6e9f0;border-radius:15px;padding:14px 16px;box-shadow:0 18px 40px rgba(15,23,42,.13);display:grid;gap:4px;min-width:190px}.floating-card b{font-size:11px;color:#667085}.floating-card strong{font-size:18px}.floating-card span{font-size:11px;color:#039855}.card-sale{left:-20px;bottom:35px}.card-stock{right:-25px;top:35px}.logo-strip{border-top:1px solid #eef1f5;border-bottom:1px solid #eef1f5;padding:22px 24px;display:flex;justify-content:center;gap:35px;flex-wrap:wrap;color:#667085}.logo-strip span{font-weight:600}.logo-strip b{color:#344054}.landing-section{max-width:1220px;margin:auto;padding:100px 24px}.section-heading{text-align:center;max-width:760px;margin:0 auto 45px}.section-heading h2{font-size:40px;line-height:1.2;margin:13px 0;letter-spacing:-.025em}.section-heading p{color:#667085;font-size:17px;line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{border:1px solid #e6eaf1;border-radius:18px;padding:25px;background:#fff;box-shadow:0 12px 30px rgba(16,24,40,.045);transition:.2s}.feature-card:hover{transform:translateY(-4px);border-color:#c7d2fe;box-shadow:0 18px 38px rgba(79,70,229,.1)}.feature-card>span{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;font-size:21px}.feature-card h3{font-size:18px;margin:18px 0 9px}.feature-card p{margin:0;color:#667085;line-height:1.65;font-size:14px}.steps-section{background:#f8f9fc;max-width:none}.steps-section>.section-heading,.steps-grid{max-width:1172px;margin-left:auto;margin-right:auto}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps-grid article{background:#fff;border:1px solid #e7eaf1;border-radius:18px;padding:26px}.steps-grid b{color:#7c3aed;font-size:28px}.steps-grid h3{margin:18px 0 8px}.steps-grid p{margin:0;color:#667085;line-height:1.65}.cta-section{max-width:1172px;margin:30px auto 100px;padding:45px 50px;border-radius:25px;background:linear-gradient(135deg,#3730a3,#7c3aed);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:35px;box-shadow:0 24px 60px rgba(79,70,229,.25)}.cta-section .eyebrow{color:#ddd6fe}.cta-section h2{font-size:34px;margin:10px 0}.cta-section p{margin:0;color:#e9d5ff}.landing-footer{border-top:1px solid #e9ecf2;max-width:1220px;margin:auto;padding:30px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#667085;font-size:13px}.landing-footer .landing-brand{color:#101828}.register-card{width:min(760px,100%)}.check-line{display:flex;grid-template-columns:auto 1fr;align-items:flex-start;font-weight:500;line-height:1.5}.check-line input{width:17px;margin-top:2px}.auth-links{text-align:center;margin-top:16px}.auth-links a{color:#5b5bd6;font-weight:800}

/* Subscription and payment popup */
.trial-banner{display:flex;gap:5px;align-items:center}.payment-locked{overflow:hidden}.static-modal{z-index:999;background:rgba(15,23,42,.74);backdrop-filter:blur(5px)}.payment-modal{max-width:620px;border-radius:24px}.payment-modal-hero{padding:25px 25px 18px;display:flex;gap:15px;background:linear-gradient(135deg,#fff7ed,#fff);border-bottom:1px solid #fed7aa}.payment-modal-hero h2{margin:5px 0 7px;font-size:25px}.payment-modal-hero p{margin:0;color:#667085;line-height:1.55}.expired-icon{flex:0 0 auto;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#ffedd5;color:#c2410c;font-size:25px;font-weight:900}.payment-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payment-plan{border:1px solid #e5e7eb;border-radius:15px;padding:16px;display:grid;gap:5px}.payment-plan.featured{border-color:#a5b4fc;background:#f5f3ff}.payment-plan span{font-size:12px;font-weight:800;color:#667085}.payment-plan strong{font-size:22px;color:#3730a3}.payment-plan small{color:#667085}.payment-instruction{margin:15px 0;border-radius:14px;background:#f8fafc;border:1px solid #e5e7eb;padding:14px}.payment-instruction p{margin:7px 0 0;color:#475467;line-height:1.6}.payment-actions{display:grid;gap:9px}.payment-preview .expired-preview{text-align:center;padding:20px 5px}.expired-preview .expired-icon{margin:auto}.expired-preview h2{margin:15px 0 7px}.expired-preview>p{color:#667085}.plan-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.plan-preview div{border:1px solid #e5e7eb;border-radius:13px;padding:13px;display:grid;gap:5px}.plan-preview strong{color:#4f46e5}

@media(max-width:1000px){.hero-section{grid-template-columns:1fr;padding-top:45px}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-actions,.hero-proof{justify-content:center}.hero-visual{min-height:400px}.feature-grid{grid-template-columns:repeat(2,1fr)}.cta-section{margin-left:24px;margin-right:24px}.landing-footer{flex-wrap:wrap}.card-sale{left:0}.card-stock{right:0}}
@media(max-width:720px){.landing-nav{height:auto;padding-top:16px;padding-bottom:16px}.landing-links>a:not(.btn){display:none}.landing-links{gap:8px}.landing-links .btn{padding:8px 10px;font-size:12px}.hero-section{padding:45px 18px 65px;gap:30px}.hero-copy h1{font-size:49px}.hero-copy h2{font-size:27px}.hero-copy>p{font-size:16px}.hero-proof{gap:9px}.hero-visual{min-height:330px}.mock-layout{height:265px}.mock-main{padding:16px}.mock-grid div{height:120px}.floating-card{display:none}.logo-strip{gap:15px}.landing-section{padding:70px 18px}.section-heading h2{font-size:31px}.feature-grid,.steps-grid{grid-template-columns:1fr}.cta-section{margin:10px 18px 70px;padding:32px 24px;display:grid;text-align:center}.cta-section h2{font-size:28px}.landing-footer{padding:25px 18px;justify-content:center;text-align:center}.payment-plans,.plan-preview{grid-template-columns:1fr}.payment-modal-hero{align-items:flex-start}.payment-modal-hero h2{font-size:21px}}