:root{
  --navy:#07182d;
  --navy-2:#0c2342;
  --navy-3:#12345f;
  --blue:#246bfd;
  --blue-2:#4b8dff;
  --blue-soft:#eaf1ff;
  --cyan:#2ec5ce;
  --green:#16a36a;
  --green-soft:#e9f8f1;
  --orange:#f58b36;
  --orange-soft:#fff1e5;
  --red:#e15353;
  --red-soft:#ffecec;
  --purple:#7a5af8;
  --purple-soft:#f0edff;
  --ink:#10233e;
  --muted:#6e7d91;
  --soft:#f4f7fb;
  --soft-2:#eef3f8;
  --line:#e4eaf2;
  --white:#fff;
  --shadow:0 18px 45px rgba(15,38,72,.08);
  --shadow-sm:0 8px 24px rgba(15,38,72,.07);
  --radius:20px;
  --radius-sm:14px;
  --sidebar:268px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--soft);color:var(--ink);font-size:14px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.boot-screen{position:fixed;inset:0;background:linear-gradient(145deg,#07182d,#12345f);z-index:500;display:grid;place-items:center;align-content:center;gap:20px;transition:.35s ease}
.boot-screen.leave{opacity:0;visibility:hidden}
.boot-logo,.brand-logo{display:grid;place-items:center;background:linear-gradient(145deg,#6ca0ff,#246bfd);color:#fff;box-shadow:0 12px 35px rgba(36,107,253,.35);font-weight:900;letter-spacing:-1px}
.boot-logo{width:70px;height:70px;border-radius:22px;font-size:34px}
.brand-logo{width:44px;height:44px;border-radius:14px;font-size:21px;flex:0 0 auto}
.brand-logo.large{width:54px;height:54px;border-radius:17px;font-size:26px}
.boot-loader{width:88px;height:4px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;position:relative}
.boot-loader:after{content:"";position:absolute;inset:0;width:42%;background:#67e8f9;border-radius:999px;animation:loader 1s ease-in-out infinite}
@keyframes loader{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* Login */
.login-screen{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(390px,.72fr);background:#fff}
.login-art{position:relative;overflow:hidden;padding:42px 56px 36px;background:linear-gradient(145deg,#061426 0%,#0b2444 55%,#123968 100%);color:#fff;display:flex;flex-direction:column}
.login-art:before{content:"";position:absolute;inset:auto -12% -28% 18%;height:72%;background:radial-gradient(circle at center,rgba(45,126,255,.27),transparent 67%);pointer-events:none}
.login-art:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 86%)}
.login-art-glow{position:absolute;border-radius:50%;filter:blur(10px);opacity:.42}
.glow-one{width:260px;height:260px;background:#246bfd;right:-90px;top:-100px}
.glow-two{width:190px;height:190px;background:#2ec5ce;left:-90px;bottom:60px;opacity:.18}
.login-brand,.mobile-login-brand{display:flex;align-items:center;gap:13px;position:relative;z-index:2}
.login-brand strong,.mobile-login-brand strong{display:block;font-size:19px;letter-spacing:-.35px}
.login-brand small,.mobile-login-brand small{display:block;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#9eb5d1;margin-top:2px}
.login-copy{position:relative;z-index:2;margin-top:9vh;max-width:700px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:1.7px;color:var(--blue);text-transform:uppercase}
.eyebrow:before{content:"";width:22px;height:2px;border-radius:999px;background:currentColor}
.eyebrow.light{color:#75a7ff}
.login-copy h1{font-size:clamp(44px,5.1vw,78px);line-height:1.01;letter-spacing:-3.5px;margin:22px 0 24px;max-width:760px}
.login-copy h1 em{font-style:normal;color:#77a9ff}
.login-copy p{max-width:650px;color:#c0cede;font-size:17px;line-height:1.75;margin:0}
.feature-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.feature-pills span{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);padding:9px 13px;border-radius:999px;font-size:12px;color:#d9e5f4;backdrop-filter:blur(8px)}
.login-dashboard-card{position:relative;z-index:2;align-self:flex-end;width:min(580px,82%);margin-top:auto;margin-right:2%;background:rgba(255,255,255,.095);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:20px;backdrop-filter:blur(18px);box-shadow:0 30px 90px rgba(0,0,0,.22);transform:perspective(1000px) rotateY(-4deg) rotateX(2deg)}
.mini-top{display:flex;justify-content:space-between;align-items:center;color:#eaf3ff;font-weight:700;font-size:13px}
.mini-top b{font-size:10px;color:#82f2c3;background:rgba(22,163,106,.17);padding:5px 9px;border-radius:999px}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 14px}
.mini-grid>div{padding:13px;border-radius:15px;background:rgba(6,20,38,.42)}
.mini-grid small{display:block;color:#9eb4cd;font-size:10px}
.mini-grid strong{display:block;font-size:17px;margin:6px 0 3px}
.mini-grid i{font-style:normal;color:#72e8b8;font-size:9px}
.mini-chart{height:75px;display:flex;align-items:flex-end;gap:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.mini-chart span{flex:1;min-height:4px;background:linear-gradient(180deg,#67e8f9,#246bfd);border-radius:7px 7px 2px 2px;opacity:.9}
.login-art-footer{position:relative;z-index:2;display:flex;justify-content:space-between;color:#8299b5;font-size:10px;margin-top:20px}
.login-panel{display:flex;flex-direction:column;min-height:100vh;padding:36px 50px 24px;background:#fff}
.mobile-login-brand{display:none;color:var(--ink)}
.mobile-login-brand small{color:var(--muted)}
.login-form-wrap{width:min(420px,100%);margin:auto}
.login-form-wrap h2{font-size:34px;letter-spacing:-1.35px;margin:16px 0 10px}
.login-intro{color:var(--muted);line-height:1.65;margin:0 0 30px}
.login-form{display:grid;gap:18px}
.login-form label>span{display:block;font-size:12px;font-weight:750;margin-bottom:8px;color:#32445e}
.input-shell{border:1px solid #dfe6ee;border-radius:13px;display:flex;align-items:center;padding:0 13px;background:#fff;transition:.2s ease}
.input-shell:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(36,107,253,.09)}
.input-shell>svg{color:#8a99aa;width:18px;height:18px;flex:0 0 auto}
.input-shell input{height:50px;border:0;outline:0;flex:1;min-width:0;padding:0 11px;color:var(--ink);background:transparent}
.password-toggle{border:0;background:transparent;color:var(--blue);font-size:11px;font-weight:800;padding:8px}
.login-button{height:52px;border:0;border-radius:13px;background:linear-gradient(135deg,#246bfd,#1756d6);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;box-shadow:0 12px 25px rgba(36,107,253,.24);transition:.2s ease}
.login-button:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(36,107,253,.3)}
.login-button svg{width:17px;height:17px}
.login-button.loading{pointer-events:none;opacity:.8}
.form-error{padding:11px 13px;border-radius:10px;background:var(--red-soft);color:#a83232;font-size:12px;border:1px solid #ffd3d3}
.demo-note{margin-top:22px;background:#f5f8fc;border:1px solid #e5ebf3;border-radius:14px;padding:13px;display:flex;align-items:center;gap:11px}
.demo-note-icon{width:30px;height:30px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:900}
.demo-note strong,.demo-note span{display:block}
.demo-note strong{font-size:11px;margin-bottom:3px}.demo-note span{font-size:11px;color:var(--muted)}
.login-panel-footer{text-align:center;color:#a0acba;font-size:10px}

/* App shell */
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,#07182d,#0a203b);color:#dce7f3;padding:22px 16px 18px;display:flex;flex-direction:column;z-index:100;overflow-y:auto}
.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:#284565;border-radius:999px}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:0 7px 19px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-copy strong{display:block;font-size:17px;letter-spacing:-.25px}.brand-copy small{display:block;font-size:9px;color:#8ba1ba;text-transform:uppercase;letter-spacing:.85px;margin-top:2px}
.mobile-close{display:none;margin-left:auto;border:0;background:rgba(255,255,255,.07);color:#fff;width:32px;height:32px;border-radius:10px;font-size:23px;line-height:1}
.workspace-card{display:flex;align-items:center;gap:10px;margin:17px 2px 6px;padding:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);border-radius:14px}
.workspace-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#2ec5ce,#246bfd);display:grid;place-items:center;font-size:11px;font-weight:900;box-shadow:0 8px 20px rgba(36,107,253,.22)}
.workspace-card div{min-width:0;flex:1}.workspace-card small,.workspace-card strong{display:block}.workspace-card small{font-size:8px;color:#8198b1;text-transform:uppercase;letter-spacing:.7px}.workspace-card strong{font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-chevron{color:#758ca6}
.sidebar-nav{display:flex;flex-direction:column;gap:3px;padding-top:7px}
.nav-section{font-size:8px;font-weight:800;letter-spacing:1.2px;color:#5f7893;padding:16px 12px 6px}
.nav-link{width:100%;border:0;background:transparent;color:#aebed0;min-height:43px;padding:0 11px;border-radius:12px;display:flex;align-items:center;gap:11px;text-align:left;font-size:12px;font-weight:650;transition:.16s ease;position:relative}
.nav-link:hover{background:rgba(255,255,255,.055);color:#fff}
.nav-link.active{background:linear-gradient(135deg,#246bfd,#1f5fdf);color:#fff;box-shadow:0 10px 25px rgba(36,107,253,.24)}
.nav-link.active:before{content:"";position:absolute;left:-16px;width:3px;height:22px;border-radius:0 4px 4px 0;background:#6ea2ff}
.nav-icon{display:grid;place-items:center;width:20px;height:20px}.nav-icon svg{width:18px;height:18px}
.nav-count{margin-left:auto;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.09);display:grid;place-items:center;font-size:9px;font-weight:800}.nav-link.active .nav-count{background:rgba(255,255,255,.18)}
.sidebar-support{margin-top:auto;background:linear-gradient(135deg,rgba(36,107,253,.18),rgba(46,197,206,.08));border:1px solid rgba(105,160,255,.13);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center}
.support-icon{width:31px;height:31px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-weight:900}.sidebar-support strong,.sidebar-support small{display:block}.sidebar-support strong{font-size:10px}.sidebar-support small{font-size:8px;color:#7f96af;margin-top:3px}
.sidebar-backdrop{display:none}
.main-area{min-height:100vh;margin-left:var(--sidebar);width:calc(100% - var(--sidebar))}
.topbar{height:80px;position:sticky;top:0;z-index:60;background:rgba(255,255,255,.91);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.topbar-heading{display:flex;align-items:center;gap:13px}.topbar-heading h1{font-size:22px;line-height:1.1;margin:0;letter-spacing:-.65px}.topbar-heading p{margin:5px 0 0;color:var(--muted);font-size:10px}
.menu-button{display:none!important;flex-direction:column;gap:4px}.menu-button span{width:16px;height:2px;border-radius:2px;background:var(--ink)}
.topbar-actions{display:flex;align-items:center;gap:11px}.system-status{display:flex;align-items:center;gap:8px;border-right:1px solid var(--line);padding-right:17px;margin-right:2px}.system-status>span{width:9px;height:9px;border-radius:50%;background:#23c483;box-shadow:0 0 0 4px rgba(35,196,131,.13)}.system-status small,.system-status strong{display:block}.system-status small{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.55px}.system-status strong{font-size:10px;margin-top:2px;color:#16865c}
.top-icon{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#5f7085;position:relative}.top-icon:hover{background:#f5f8fb}.top-icon svg{width:18px;height:18px}.notification-button i{position:absolute;right:8px;top:7px;width:7px;height:7px;border-radius:50%;background:#ef5d5d;border:2px solid #fff}
.profile-menu-wrap{position:relative}.profile-button{border:0;background:transparent;padding:5px 7px;display:flex;align-items:center;gap:9px;border-radius:13px}.profile-button:hover{background:#f3f6fa}.profile-avatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,#eaf1ff,#d8e6ff);color:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:900}.profile-copy{text-align:left}.profile-copy strong,.profile-copy small{display:block}.profile-copy strong{font-size:11px}.profile-copy small{font-size:8px;color:var(--muted);margin-top:3px}.profile-arrow{color:#8998aa;font-size:13px}.profile-dropdown{position:absolute;right:0;top:52px;width:190px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:7px;z-index:100}.profile-dropdown button{width:100%;border:0;background:transparent;border-radius:9px;padding:10px;display:flex;gap:9px;align-items:center;color:#475b72;font-size:11px;text-align:left}.profile-dropdown button:hover{background:#f4f7fa}.profile-dropdown button svg{width:16px;height:16px}.profile-dropdown .danger-link{color:#c34545}
.page-content{padding:24px 28px 48px;max-width:1720px;margin:0 auto}
.page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;min-height:44px}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.date-chip,.filter-chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 12px;color:#52657b;font-size:10px}.date-chip svg,.filter-chip svg{width:15px;height:15px;color:var(--blue)}
.primary-button,.secondary-button,.danger-button,.ghost-button{border:0;border-radius:11px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:800;min-height:40px;transition:.16s ease}.primary-button{background:linear-gradient(135deg,#246bfd,#1e5dd8);color:#fff;box-shadow:0 9px 20px rgba(36,107,253,.2)}.primary-button:hover{transform:translateY(-1px);box-shadow:0 13px 24px rgba(36,107,253,.25)}.secondary-button{background:#fff;border:1px solid var(--line);color:#445870}.secondary-button:hover{background:#f5f8fb}.ghost-button{background:var(--blue-soft);color:var(--blue)}.danger-button{background:var(--red-soft);color:#c14343}.primary-button svg,.secondary-button svg,.ghost-button svg,.danger-button svg{width:16px;height:16px}

/* dashboard and cards */
.app-content{min-height:400px}.content-loading{height:320px;display:grid;place-items:center;color:var(--muted)}.loading-wheel{width:35px;height:35px;border:3px solid #dbe4ef;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:auto auto 12px}@keyframes spin{to{transform:rotate(360deg)}}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.metric-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;min-height:143px}.metric-card:after{content:"";position:absolute;right:-42px;bottom:-48px;width:130px;height:130px;border-radius:50%;background:var(--metric-soft,#eef4ff)}
.metric-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.metric-label{font-size:9px;font-weight:850;letter-spacing:.65px;color:#7b899b;text-transform:uppercase}.metric-icon{width:34px;height:34px;border-radius:11px;background:var(--metric-soft,#eef4ff);color:var(--metric,#246bfd);display:grid;place-items:center}.metric-icon svg{width:17px;height:17px}.metric-value{font-size:23px;letter-spacing:-.7px;font-weight:900;margin:18px 0 7px;position:relative;z-index:2}.metric-note{font-size:9px;color:#8b99aa;display:flex;align-items:center;gap:5px;position:relative;z-index:2}.metric-note.positive{color:#16865c}.metric-note.warning{color:#c77624}.metric-note.negative{color:#c14343}
.metric-card.green{--metric:#16a36a;--metric-soft:#e9f8f1}.metric-card.orange{--metric:#f58b36;--metric-soft:#fff1e5}.metric-card.purple{--metric:#7a5af8;--metric-soft:#f0edff}.metric-card.cyan{--metric:#10aeba;--metric-soft:#e7f9fa}.metric-card.red{--metric:#e15353;--metric-soft:#ffecec}
.dashboard-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.74fr);gap:16px;margin-top:16px}.dashboard-lower{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;margin-top:16px}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:18px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.panel-title h3{font-size:14px;margin:0;letter-spacing:-.25px}.panel-title p{font-size:9px;color:var(--muted);margin:5px 0 0}.panel-link{border:0;background:transparent;color:var(--blue);font-size:9px;font-weight:850;padding:6px}.panel-tools{display:flex;gap:8px;align-items:center}
.chart-legend{display:flex;gap:13px;align-items:center;font-size:9px;color:#708197}.chart-legend span{display:flex;gap:6px;align-items:center}.chart-legend i{width:8px;height:8px;border-radius:50%;background:var(--blue)}.chart-legend span:last-child i{background:#cdd8e5}
.sales-chart{height:260px;display:flex;align-items:flex-end;gap:12px;padding:22px 4px 5px;border-top:1px solid #f0f3f7;position:relative}.sales-chart:before,.sales-chart:after{content:"";position:absolute;left:0;right:0;height:1px;background:#f0f3f7}.sales-chart:before{top:34%}.sales-chart:after{top:67%}.chart-group{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:5px;position:relative;z-index:2;min-width:34px}.chart-bar{width:14px;min-height:3px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#6da0ff,#246bfd);position:relative;transition:.2s ease}.chart-bar.production{background:linear-gradient(180deg,#72e5c0,#16a36a);opacity:.7}.chart-bar:hover{filter:brightness(.95);transform:translateY(-2px)}.chart-bar:hover:after{content:attr(data-value);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#0b1e37;color:#fff;font-size:8px;padding:5px 7px;border-radius:7px;box-shadow:0 5px 15px rgba(0,0,0,.18)}.chart-day{position:absolute;bottom:-19px;font-size:8px;color:#8c9aac}
.quick-actions{display:grid;gap:10px}.quick-action-card{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;border:1px solid #e7edf4;background:#fbfcfe;cursor:pointer;transition:.16s ease}.quick-action-card:hover{border-color:#cddcff;background:#f7faff;transform:translateY(-1px)}.quick-action-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}.quick-action-card:nth-child(2) .quick-action-icon{background:var(--green-soft);color:var(--green)}.quick-action-card:nth-child(3) .quick-action-icon{background:var(--orange-soft);color:var(--orange)}.quick-action-card:nth-child(4) .quick-action-icon{background:var(--purple-soft);color:var(--purple)}.quick-action-icon svg{width:18px;height:18px}.quick-action-copy{flex:1}.quick-action-copy strong,.quick-action-copy small{display:block}.quick-action-copy strong{font-size:10px}.quick-action-copy small{font-size:8px;color:var(--muted);margin-top:4px}.quick-action-arrow{color:#a5b1c0;font-size:17px}
.table-wrap{overflow-x:auto;margin:0 -4px}.data-table{width:100%;border-collapse:collapse;min-width:720px}.data-table th{text-align:left;color:#8997a8;font-size:8px;text-transform:uppercase;letter-spacing:.75px;padding:10px 11px;border-bottom:1px solid var(--line);font-weight:850;white-space:nowrap}.data-table td{padding:12px 11px;border-bottom:1px solid #eef2f6;font-size:10px;color:#43566e;vertical-align:middle}.data-table tbody tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#fbfcfe}.main-cell{display:flex;align-items:center;gap:9px}.table-avatar{width:32px;height:32px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:10px;flex:0 0 auto}.table-avatar.green{background:var(--green-soft);color:var(--green)}.table-avatar.orange{background:var(--orange-soft);color:var(--orange)}.main-cell strong,.main-cell small{display:block}.main-cell strong{font-size:10px;color:var(--ink)}.main-cell small{font-size:8px;color:var(--muted);margin-top:3px}.money{font-weight:850;color:#213a58}.muted{color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:850;white-space:nowrap}.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.badge.success{background:var(--green-soft);color:#17865d}.badge.warning{background:#fff6dd;color:#b67516}.badge.info{background:var(--blue-soft);color:#356fd6}.badge.danger{background:var(--red-soft);color:#bf4141}.badge.neutral{background:#eef2f6;color:#62748a}.table-actions{display:flex;gap:5px;justify-content:flex-end}.icon-action{width:29px;height:29px;border:1px solid #e0e7ef;background:#fff;border-radius:9px;color:#617286;display:grid;place-items:center}.icon-action:hover{background:#f4f7fa;color:var(--blue)}.icon-action.danger:hover{background:var(--red-soft);color:var(--red);border-color:#ffd5d5}.icon-action svg{width:14px;height:14px}
.stock-list{display:grid;gap:13px}.stock-row{display:grid;grid-template-columns:minmax(0,1fr) 80px 54px;align-items:center;gap:10px}.stock-name strong,.stock-name small{display:block}.stock-name strong{font-size:10px}.stock-name small{font-size:8px;color:var(--muted);margin-top:3px}.stock-bar{height:7px;background:#edf2f7;border-radius:999px;overflow:hidden}.stock-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f5a04c,#e75c5c)}.stock-qty{text-align:right;font-size:9px;font-weight:850}.empty-state{padding:50px 18px;text-align:center;color:var(--muted)}.empty-icon{width:54px;height:54px;border-radius:17px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;margin:0 auto 14px}.empty-icon svg{width:25px;height:25px}.empty-state strong{display:block;color:var(--ink);font-size:12px;margin-bottom:6px}.empty-state p{font-size:10px;margin:0 auto;max-width:320px;line-height:1.6}

/* lists and forms */
.list-toolbar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;box-shadow:var(--shadow-sm)}.search-box{display:flex;align-items:center;gap:8px;min-width:270px;background:#f7f9fc;border:1px solid #edf1f5;border-radius:10px;padding:0 11px}.search-box svg{width:15px;height:15px;color:#8291a4}.search-box input{border:0;background:transparent;outline:0;height:38px;flex:1;font-size:10px;color:var(--ink)}.filter-select{border:1px solid var(--line);background:#fff;border-radius:10px;height:38px;padding:0 30px 0 11px;color:#56697e;font-size:10px;outline:none}.record-summary{font-size:9px;color:var(--muted)}
.summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.summary-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:11px}.summary-icon{width:38px;height:38px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}.summary-card:nth-child(2) .summary-icon{background:var(--green-soft);color:var(--green)}.summary-card:nth-child(3) .summary-icon{background:var(--orange-soft);color:var(--orange)}.summary-card:nth-child(4) .summary-icon{background:var(--purple-soft);color:var(--purple)}.summary-icon svg{width:18px;height:18px}.summary-copy small,.summary-copy strong{display:block}.summary-copy small{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.55px}.summary-copy strong{font-size:16px;margin-top:5px;letter-spacing:-.3px}
.record-panel{padding:0;overflow:hidden}.record-panel .panel-header{padding:17px 18px 0}.record-panel .table-wrap{margin:0}.record-panel .data-table th:first-child,.record-panel .data-table td:first-child{padding-left:18px}.record-panel .data-table th:last-child,.record-panel .data-table td:last-child{padding-right:18px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.product-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);transition:.17s ease}.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.product-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.product-symbol{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#edf3ff,#dce8ff);color:var(--blue);display:grid;place-items:center;font-weight:900}.product-menu{border:0;background:#f4f7fa;width:31px;height:31px;border-radius:9px;color:#738397;font-size:18px}.product-card h3{font-size:12px;margin:14px 0 4px}.product-sku{font-size:8px;color:var(--muted)}.product-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.product-stat{background:#f8fafc;border-radius:10px;padding:9px}.product-stat small,.product-stat strong{display:block}.product-stat small{font-size:7px;color:var(--muted);text-transform:uppercase}.product-stat strong{font-size:10px;margin-top:4px}.recipe-preview{border-top:1px solid #edf1f5;padding-top:12px}.recipe-preview>span{font-size:8px;font-weight:850;color:#6d7d90;text-transform:uppercase;letter-spacing:.55px}.recipe-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.recipe-tags span{background:#f0f4f8;border-radius:999px;padding:5px 7px;font-size:7px;color:#5d6f83}.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.product-price{font-size:15px;font-weight:900;color:#183655}.product-actions{display:flex;gap:5px}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(4,17,33,.58);backdrop-filter:blur(4px);z-index:190}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.modal-card{width:min(780px,100%);max-height:92vh;background:#fff;border-radius:22px;box-shadow:0 35px 90px rgba(3,18,37,.28);overflow:hidden;display:flex;flex-direction:column;animation:modalIn .2s ease}@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-header{padding:19px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.modal-eyebrow{font-size:8px;font-weight:900;letter-spacing:1.1px;color:var(--blue)}.modal-header h2{font-size:20px;margin:5px 0 4px;letter-spacing:-.55px}.modal-header p{font-size:9px;color:var(--muted);margin:0;line-height:1.5}.modal-close{width:36px;height:36px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#6b7b8f;font-size:22px;line-height:1}.modal-body{padding:21px 22px 24px;overflow-y:auto}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-group{display:grid;gap:7px}.form-group.full{grid-column:1/-1}.form-group label{font-size:9px;font-weight:800;color:#42566f}.required{color:var(--red)}.form-control{width:100%;height:43px;border:1px solid #dfe6ee;border-radius:11px;padding:0 12px;outline:0;color:var(--ink);background:#fff;font-size:10px}.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(36,107,253,.08)}textarea.form-control{height:85px;padding-top:11px;resize:vertical}.form-help{font-size:8px;color:#8b98a8;line-height:1.45}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:4px;padding-top:15px;border-top:1px solid #edf1f5}.section-label{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:3px;padding-top:4px}.section-label strong{font-size:10px}.section-label small{font-size:8px;color:var(--muted)}
.dynamic-list{grid-column:1/-1;display:grid;gap:8px}.dynamic-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 36px;gap:8px;align-items:center;background:#f8fafc;border:1px solid #edf1f5;border-radius:12px;padding:8px}.dynamic-row.recipe{grid-template-columns:minmax(0,1fr) 150px 36px}.row-remove{width:34px;height:34px;border:0;border-radius:10px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-size:17px}.inline-add{grid-column:1/-1;border:1px dashed #b9c9dc;background:#f8fbff;color:var(--blue);border-radius:11px;padding:10px;font-size:9px;font-weight:800}.form-total{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:18px;background:#f7faff;border:1px solid #e2ebfb;border-radius:13px;padding:13px}.form-total span{font-size:9px;color:var(--muted)}.form-total strong{font-size:18px;color:#17365a}
.toggle-wrap{display:flex;align-items:center;gap:9px}.toggle{position:relative;width:40px;height:23px}.toggle input{display:none}.toggle span{position:absolute;inset:0;border-radius:999px;background:#cad5e1;transition:.2s}.toggle span:after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 2px 6px rgba(0,0,0,.16);transition:.2s}.toggle input:checked+span{background:var(--blue)}.toggle input:checked+span:after{transform:translateX(17px)}

/* Reports */
.report-hero{background:linear-gradient(135deg,#0a2342,#123d70);color:#fff;border-radius:20px;padding:22px;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:0 18px 38px rgba(14,45,83,.2);margin-bottom:16px}.report-hero h2{margin:0;font-size:21px;letter-spacing:-.7px}.report-hero p{margin:7px 0 0;color:#aabed5;font-size:9px}.report-result{text-align:right}.report-result small{display:block;color:#9db2ca;font-size:8px;text-transform:uppercase;letter-spacing:.7px}.report-result strong{display:block;font-size:25px;margin-top:6px}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.report-lines{display:grid;gap:2px}.report-line{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #edf1f5;font-size:10px}.report-line:last-child{border-bottom:0}.report-line span{color:#687b90}.report-line strong{color:#183655}.report-line.total{font-size:12px}.report-line.positive strong{color:var(--green)}.report-line.negative strong{color:var(--red)}.horizontal-bars{display:grid;gap:12px}.hbar-row{display:grid;grid-template-columns:120px 1fr 75px;align-items:center;gap:10px}.hbar-label{font-size:9px;color:#52667c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hbar-track{height:8px;border-radius:999px;background:#eef2f6;overflow:hidden}.hbar-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4c86f7,#246bfd)}.hbar-value{text-align:right;font-size:8px;font-weight:800;color:#5d7086}
.settings-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:16px}.settings-side{display:grid;gap:16px}.info-box{padding:14px;border-radius:14px;background:#f7faff;border:1px solid #e1eafa}.info-box h4{font-size:10px;margin:0 0 7px}.info-box p{font-size:9px;line-height:1.6;color:var(--muted);margin:0}.security-card{background:linear-gradient(135deg,#0c274a,#16477e);color:#fff}.security-card .panel-title p{color:#a7bad0}.security-list{display:grid;gap:10px;margin-top:15px}.security-list span{display:flex;align-items:center;gap:8px;font-size:9px;color:#c6d4e4}.security-list i{width:18px;height:18px;border-radius:6px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-style:normal;color:#7ce8bf}

/* invoice */
.invoice-modal{position:fixed;inset:0;z-index:300;background:rgba(4,17,33,.68);backdrop-filter:blur(5px);padding:20px;overflow:auto}.invoice-window{width:min(900px,100%);margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 35px 90px rgba(3,18,37,.3);overflow:hidden}.invoice-actions{display:flex;justify-content:flex-end;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:#f8fafc}.invoice-document{padding:42px;color:#152943}.invoice-brand-row{display:flex;justify-content:space-between;gap:25px;border-bottom:2px solid #153c6a;padding-bottom:20px}.invoice-brand-row h1{font-size:22px;margin:0}.invoice-brand-row p{font-size:10px;line-height:1.6;color:#65778a;margin:8px 0 0}.invoice-title{text-align:right}.invoice-title strong{font-size:25px;color:#164c91}.invoice-title span{display:block;font-size:10px;color:#6e8093;margin-top:6px}.invoice-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:25px 0}.invoice-box{background:#f6f8fb;padding:14px;border-radius:10px}.invoice-box small{display:block;font-size:8px;color:#718196;text-transform:uppercase;letter-spacing:.55px}.invoice-box strong{display:block;font-size:11px;margin-top:6px}.invoice-table{width:100%;border-collapse:collapse}.invoice-table th{background:#153c6a;color:#fff;font-size:8px;text-align:left;padding:10px}.invoice-table td{font-size:9px;padding:11px 10px;border-bottom:1px solid #e4e9ef}.invoice-summary{margin-left:auto;width:min(350px,100%);margin-top:20px}.invoice-summary div{display:flex;justify-content:space-between;padding:8px 0;font-size:10px}.invoice-summary div.total{border-top:2px solid #153c6a;margin-top:5px;padding-top:12px;font-size:14px;font-weight:900}.invoice-footer{margin-top:55px;border-top:1px solid #e3e9ef;padding-top:14px;text-align:center;font-size:8px;color:#7a8999}

.toast{position:fixed;right:22px;bottom:22px;z-index:500;min-width:250px;max-width:380px;background:#0c213d;color:#fff;border-radius:13px;padding:13px 15px;box-shadow:0 18px 35px rgba(3,18,37,.27);display:flex;align-items:center;gap:10px;font-size:10px;opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s ease}.toast.show{opacity:1;transform:none}.toast.success:before,.toast.error:before{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-weight:900}.toast.success:before{content:"✓";background:rgba(50,215,146,.18);color:#6ce3b4}.toast.error:before{content:"!";background:rgba(231,92,92,.18);color:#ff9393}

@media(max-width:1250px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-layout,.dashboard-lower{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.login-screen{grid-template-columns:1fr}.login-art{display:none}.login-panel{padding:28px 24px}.mobile-login-brand{display:flex}.sidebar{transform:translateX(-100%);transition:.22s ease}.sidebar.open{transform:none}.mobile-close{display:block}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(4,17,33,.55);backdrop-filter:blur(3px);z-index:90}.main-area{margin-left:0;width:100%}.menu-button{display:flex!important}.page-content{padding:20px}.topbar{padding:0 20px}.settings-grid{grid-template-columns:1fr}}
@media(max-width:720px){.profile-copy,.profile-arrow,.system-status{display:none}.topbar{height:70px}.topbar-heading h1{font-size:18px}.topbar-heading p{display:none}.page-content{padding:14px}.page-toolbar{align-items:flex-start;flex-direction:column}.toolbar-left,.toolbar-right{width:100%}.toolbar-right .primary-button{flex:1}.metric-grid,.summary-strip,.product-grid,.report-grid{grid-template-columns:1fr}.metric-card{min-height:130px}.list-toolbar{align-items:stretch;flex-direction:column}.search-box{min-width:0;width:100%}.list-toolbar .toolbar-right{display:grid;grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.form-group.full,.section-label,.dynamic-list,.inline-add,.form-total,.form-actions{grid-column:1}.dynamic-row,.dynamic-row.recipe{grid-template-columns:1fr 1fr 36px}.dynamic-row .form-control:first-child{grid-column:1/-1}.report-hero{align-items:flex-start;flex-direction:column}.report-result{text-align:left}.invoice-document{padding:25px 18px}.invoice-brand-row,.invoice-meta{grid-template-columns:1fr;display:grid}.invoice-title{text-align:left}.modal{padding:8px}.modal-card{max-height:96vh;border-radius:18px}.modal-header,.modal-body{padding-left:16px;padding-right:16px}}
@media(max-width:480px){.metric-grid{gap:11px}.metric-card{padding:15px}.metric-value{font-size:20px}.topbar-actions{gap:6px}.top-icon{width:36px;height:36px}.profile-avatar{width:34px;height:34px}.page-content{padding:11px}.panel{padding:14px}.sales-chart{height:215px;gap:6px}.chart-group{min-width:25px}.chart-bar{width:10px}.dynamic-row,.dynamic-row.recipe{grid-template-columns:1fr 36px}.dynamic-row .form-control{grid-column:1}.dynamic-row .row-remove{grid-column:2;grid-row:1}.dynamic-row .form-control:nth-child(2),.dynamic-row .form-control:nth-child(3){grid-column:1/-1}.list-toolbar .toolbar-right{grid-template-columns:1fr}.login-form-wrap h2{font-size:29px}}

@media print{body{background:#fff}.invoice-modal{position:static;background:#fff;padding:0}.invoice-window{box-shadow:none;width:100%;border-radius:0}.no-print{display:none!important}.invoice-document{padding:20px}.app-shell,.login-screen,.toast,.modal,.modal-backdrop{display:none!important}}