/* ArtyStorePOS V112 — unified responsive visual system. Kept separate so future UI work is maintainable. */
:root{
  --v112-bg:#07111f;--v112-surface:#0d1b2d;--v112-surface-2:#12243a;--v112-line:#29415d;
  --v112-text:#edf5ff;--v112-muted:#9bb0c8;--v112-accent:#43d6c5;--v112-accent-2:#62a9ff;
  --v112-radius:18px;--v112-shadow:0 14px 38px rgba(0,0,0,.22)
}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:radial-gradient(ellipse at 10% -10%,rgba(45,105,175,.22),transparent 38%),radial-gradient(ellipse at 100% 0%,rgba(29,171,157,.12),transparent 30%),var(--v112-bg);color:var(--v112-text)}
#app.wrap{max-width:1720px;padding:clamp(10px,1.8vw,26px)}
#app .top{padding:clamp(14px,1.7vw,22px);border:1px solid var(--v112-line);border-radius:22px;background:linear-gradient(115deg,#0d1d31 0%,#102640 58%,#102b38 100%);box-shadow:var(--v112-shadow)}
#app .brand-name{letter-spacing:-.035em}
#app .sub,#app .hint,#app .foot,#app .status{color:var(--v112-muted)}
#tabs.tabs{position:sticky!important;top:8px!important;z-index:80!important;padding:9px;margin:10px 0 18px!important;border:1px solid var(--v112-line);border-radius:17px;background:rgba(7,17,31,.94);box-shadow:0 12px 30px rgba(0,0,0,.25);backdrop-filter:blur(16px);scrollbar-width:thin}
#tabs button{min-height:44px;padding:10px 15px;border:1px solid #2b4562;border-radius:12px;background:#10233a;color:#cfe0f3;font-weight:700;transition:background .18s,border-color .18s,transform .18s}
#tabs button:hover{border-color:#4b88a9;background:#17314b}
#tabs button.active{border-color:rgba(67,214,197,.75);background:linear-gradient(120deg,#126b70,#225b91);color:#fff;box-shadow:0 0 0 1px rgba(67,214,197,.16),0 8px 22px rgba(22,145,153,.18)}
#app .panel,#app .stat{border:1px solid var(--v112-line);border-radius:var(--v112-radius);background:linear-gradient(150deg,rgba(16,35,57,.97),rgba(10,25,43,.98));box-shadow:var(--v112-shadow);color:var(--v112-text)}
#app .panel h2,#app .panel h3{color:#f4f8ff}
#app .hero{background:linear-gradient(115deg,#143e66,#245b7b 58%,#126b68);border-color:#397c92}
#app .stat small{color:var(--v112-muted)}
#app .stat strong{color:#f2fbff;font-variant-numeric:tabular-nums}
#app button{border-radius:12px;font-weight:750;transition:filter .16s,transform .16s,box-shadow .16s}
#app button:not(:disabled):active{transform:translateY(1px)}
#app button:not(.secondary):not(.danger):not(.promo-secondary){background:linear-gradient(120deg,#167c83,#286caa);box-shadow:0 6px 16px rgba(17,119,143,.16)}
#app button.secondary{background:#1a3048;color:#dcecff;border:1px solid #35516d}
#app button.danger{background:#a63845;color:#fff}
#app input,#app select,#app textarea{border:1px solid #35516d!important;border-radius:11px!important;background:#08192b!important;color:#f1f7ff!important;accent-color:var(--v112-accent)}
#app input::placeholder,#app textarea::placeholder{color:#8299b3}
#app input:focus,#app select:focus,#app textarea:focus{outline:2px solid rgba(67,214,197,.5)!important;border-color:var(--v112-accent)!important}
#app table{border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--v112-line);border-radius:14px}
#app th{background:#18314a;color:#d9eaff}
#app td{border-color:rgba(116,151,187,.17);color:#e6f0fc}
#app tr:nth-child(even) td{background:rgba(25,48,72,.32)}
#app .pos-product{border:1px solid #355b7b!important;border-radius:16px!important;background:linear-gradient(145deg,#142b45,#0c1e33)!important;box-shadow:0 8px 20px rgba(0,0,0,.14)!important}
#app .pos-product:hover{border-color:#4ed7cf!important;box-shadow:0 0 0 1px rgba(78,215,207,.55),0 12px 28px rgba(22,153,160,.16)!important}
#app .pos-product.is-selected{border-color:#4ed7cf!important;background:linear-gradient(145deg,#174c54,#163b5c)!important}
#posTotal,#posGrandTotal,.pos-total,.pos-cart-total{color:#75f0d8!important;text-shadow:none!important}
#authScreen{max-width:520px;margin:clamp(22px,6vh,70px) auto;background:linear-gradient(150deg,#10243b,#0a192b);border:1px solid var(--v112-line);border-radius:24px;box-shadow:var(--v112-shadow);color:var(--v112-text)}
#authScreen .sub,#authScreen .foot{color:var(--v112-muted)}
#authScreen input{background:#07182a!important;color:#fff!important;border:1px solid #36516c!important}
#promoScreen .promo-shell{border:1px solid #29445e;background:linear-gradient(145deg,#081525,#0d2035 58%,#0d2c32);box-shadow:0 24px 80px rgba(0,0,0,.34)}
#promoScreen .promo-main h1{letter-spacing:-.04em}
#promoScreen .promo-feature{border:1px solid rgba(110,157,194,.22);background:rgba(16,39,61,.7);border-radius:14px}
#promoScreen .promo-primary{background:linear-gradient(110deg,#168b8a,#286cb0);box-shadow:0 10px 28px rgba(19,138,148,.22)}
.v111-public-posters{border-color:#2e526d;background:linear-gradient(140deg,#0b1d30,#10263a 58%,#12343b)}
.v111-public-poster-frame{background:#061321;border-color:#35536c}
.v111-deploy-panel{border-color:#3a657e!important}
#app :focus-visible,#promoScreen :focus-visible,#authScreen :focus-visible{outline:3px solid #5ce8d5!important;outline-offset:3px}
@media(max-width:760px){
 #app.wrap{padding:8px 8px 24px}
 #app .top{align-items:flex-start;gap:12px;border-radius:17px}
 #app .top-account-actions{width:100%;justify-content:space-between}
 #tabs.tabs{top:4px!important;margin:8px 0 14px!important;padding:7px;gap:6px}
 #tabs button{min-height:44px;padding:9px 12px;font-size:13px}
 #app .panel,#app .stat{border-radius:15px}
 #app .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .tablewrap{max-width:100%;overflow-x:auto}
 #app table{min-width:520px}
 #authScreen{margin:18px 10px;padding:18px}
}
@media(max-width:420px){#app .grid{grid-template-columns:1fr 1fr}#app .brand-name{font-size:20px}#app .top-account-actions{gap:6px}#app .top-account-actions button{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* V114 employee workflow */
.v114-employee-panel{border:1px solid rgba(79,70,229,.28);background:linear-gradient(135deg,rgba(79,70,229,.07),rgba(16,185,129,.05));margin:14px 0}.v114-employee-panel .row{align-items:end;gap:10px;flex-wrap:wrap}.v114-employee-panel .field{min-width:180px;flex:1}#v114EmployeeStatus{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(16,185,129,.12);font-size:12px;font-weight:700}#v114ShiftInfo{margin:10px 0 0}#v114EmployeeReport table,#v114AuditReport table,#v114SettingsAuditList table{font-size:12px}#v114EmployeeReport h4{margin:18px 0 8px}@media(max-width:640px){.v114-employee-panel .row>*{width:100%}.v114-employee-panel .row button{flex:1;min-width:42%}}