:root{
    --app-bg:#f7f9fc;
    --app-card:#ffffff;
    --app-text:#172033;
    --app-muted:#64748b;
    --app-primary:#3b82f6;
    --app-primary-dark:#2563eb;
    --app-success:#22a55b;
    --app-danger:#ef4444;
    --app-warning:#f59e0b;
    --app-border:#dbe3ef;
    --app-shadow:0 12px 35px rgba(15,23,42,.08);
    --app-radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    background:var(--app-bg) !important;
    color:var(--app-text);
}

.container,
.card,
.products,
.cart,
.modal-content{
    background:var(--app-card);
    border:1px solid var(--app-border);
    border-radius:var(--app-radius);
    box-shadow:var(--app-shadow);
}

.container{padding:18px;}
.card,.products,.cart,.modal-content{padding:18px;}
h1,h2,h3{color:var(--app-text); margin-top:0; letter-spacing:-.02em;}

button,
input[type="button"],
input[type="submit"],
a.button{
    border:0;
    border-radius:12px;
    padding:9px 14px;
    background:var(--app-primary);
    color:#fff;
    cursor:pointer;
    font-weight:600;
    transition:.16s ease;
    text-decoration:none;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.button:hover{background:var(--app-primary-dark); transform:translateY(-1px)}
button:disabled{opacity:.65; cursor:not-allowed; transform:none}
button.active,a.button.active,.tab.active,.filter.active,.pill.active{background:var(--app-primary)!important;color:#fff!important}
button.danger{background:var(--app-danger)}
button.success{background:var(--app-success)}

input,select,textarea{
    border:1px solid var(--app-border) !important;
    border-radius:12px;
    padding:9px 11px !important;
    background:#fff !important;
    color:var(--app-text);
    outline:none;
    transition:border-color .16s ease, box-shadow .16s ease;
}
input:focus,select:focus,textarea:focus{
    border-color:var(--app-primary)!important;
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

table{
    width:100%;
    border-collapse:separate!important;
    border-spacing:0;
    overflow:hidden;
    border:1px solid var(--app-border)!important;
    border-radius:14px;
    background:#fff;
}
th{
    background:#eef4ff!important;
    color:#183153!important;
    font-weight:700;
    border-bottom:1px solid var(--app-border)!important;
}
td,th{
    padding:10px 12px!important;
    border:0!important;
    border-bottom:1px solid #edf2f7!important;
}
tr:last-child td{border-bottom:0!important}
tbody tr:hover{background:#f8fbff}
.num,.right{text-align:right!important; font-variant-numeric:tabular-nums}
.red{background:#fff1f2!important; border-color:#fb7185!important; color:#b91c1c!important}
.blue{background:#eff6ff!important; border-color:#60a5fa!important; color:#1d4ed8!important}
.green{color:var(--app-success)!important}
.hidden{display:none!important}

.app-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.app-badge{display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:#eef4ff; color:#1d4ed8; font-weight:700; font-size:12px}

#app-progress{
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:3px;
    background:linear-gradient(90deg,var(--app-primary),#22c55e);
    z-index:2147483647;
    transition:width .25s ease, opacity .25s ease;
    opacity:0;
}
#app-progress.active{width:80%; opacity:1}
#app-progress.done{width:100%; opacity:0}
#app-loader{
    position:fixed;
    right:18px;
    bottom:18px;
    display:none;
    align-items:center;
    gap:10px;
    background:#0f172a;
    color:#fff;
    padding:12px 16px;
    border-radius:999px;
    box-shadow:0 15px 30px rgba(15,23,42,.25);
    z-index:2147483647;
    font-size:14px;
}
#app-loader.active{display:flex}
.app-spinner{
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;
    animation:app-spin .8s linear infinite;
}
@keyframes app-spin{to{transform:rotate(360deg)}}
#app-toast-wrap{
    position:fixed;
    top:18px;
    right:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:2147483647;
}
.app-toast{
    min-width:260px;
    max-width:420px;
    padding:13px 15px;
    border-radius:14px;
    color:#fff;
    box-shadow:0 16px 35px rgba(15,23,42,.22);
    font-weight:600;
}
.app-toast.error{background:#ef4444}
.app-toast.success{background:#22a55b}
.app-toast.info{background:#3b82f6}

.receipt-actions,.no-print{display:flex; gap:8px; margin-top:12px;}
#receiptPage{
    width:100%;
    max-width:380px;
    margin:0 auto;
    padding:10px;
    color:#000;
    background:#fff;
    font-family:"Courier New", monospace!important;
}
#receiptPage img{max-width:150px; display:block; margin:0 auto 4px;}
.receipt-line{border-top:1px dashed #000; margin:8px 0;}
.receipt-row{display:flex; justify-content:space-between; gap:10px; margin:3px 0;}
.receipt-row strong:last-child,.receipt-row span:last-child{text-align:right; white-space:nowrap;}

/* Print CSS alohida faylga ko‘chirildi: assets/print.css */

/* Yumshoq ranglar va modal o‘qilishi */
.modal,.modal.active,.modal-content,.modal-content *{color:var(--app-text)}
.modal-content{background:#fff!important}
.app-dialog-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.38);z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:16px}
.app-dialog{width:min(460px,100%);background:#fff;color:var(--app-text);border-radius:18px;box-shadow:0 20px 55px rgba(15,23,42,.22);padding:20px;border:1px solid var(--app-border)}
.app-dialog h3{margin:0 0 10px;color:var(--app-text)}
.app-dialog-message{white-space:pre-line;line-height:1.5;color:var(--app-text);margin-bottom:14px}
.app-dialog-input{width:100%;margin:4px 0 16px}
.app-dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.app-dialog-actions .secondary,.app-dialog-cancel{background:#e2e8f0!important;color:#0f172a!important}


/* Mixed UZS/USD payment UI */
.payment-extra-input{display:none;min-width:135px!important}
.payment-extra-input.active{display:inline-block!important}
.payment-info{font-size:13px;margin:6px 0;color:#111827!important;font-weight:700;line-height:1.45}
.payment-info.debt{color:#dc2626!important;background:#fff1f2;border:1px solid #fecdd3;border-radius:12px;padding:8px 10px}
.payment-info.change{color:#1d4ed8!important;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:8px 10px}
.payment-info.exact{color:#111827!important;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:8px 10px}
.payment-info .muted{font-weight:600;color:#64748b!important}
body.receipt-view-active > *:not(#receiptPage):not(#app-progress):not(#app-loader):not(#app-toast-wrap):not(.app-dialog-backdrop){display:none!important}
body.receipt-view-active{display:block!important;background:#fff!important;padding:0!important;margin:0!important;overflow:auto!important}
body.receipt-view-active #receiptPage{display:block!important;margin:0 auto!important}

/* Receipt preview: center on screen and keep full-height scrollable */
body.receipt-view-active #receiptPage{
    position:relative!important;
    inset:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    margin:16px auto 24px!important;
}
.payment-switch{display:inline-flex!important;align-items:center;gap:8px;font-weight:900;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;margin:5px;white-space:nowrap}
.payment-switch input{width:auto!important;min-width:0!important;accent-color:#2563eb}
.payment-split-cash{display:none;min-width:130px!important;color:#0f172a!important;background:#fff!important}
.payment-split-cash.active{display:inline-block!important}
.pay-keyboard{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:6px;margin-top:8px}
.pay-keyboard button{min-height:36px;border-radius:12px;font-weight:900;padding:6px!important}
.payment-split-card{display:none;min-width:130px!important;color:#0f172a!important;background:#fff!important}
.payment-split-card.active{display:inline-block!important}