@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700&display=swap');

:root { font-family: 'DM Sans', sans-serif; color: #272624; background: #f4f3f0; font-synthesis: none; --sidebar: #171817; --accent: #c94032; --line: #dedbd4; --muted: #77736c; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 236px; background: var(--sidebar); color: #fff; display: flex; flex-direction: column; z-index: 30; }
.brand { height: 89px; padding: 20px 27px; border-bottom: 1px solid #2c2d2c; display: flex; align-items: center; }
.brand img { width: 118px; height: 48px; object-fit: cover; object-position: 50% 57%; }
.sidebar nav { padding: 18px 12px; flex: 1; overflow-y: auto; }
.nav-group + .nav-group { margin-top: 22px; }
.nav-section { color: #767875; font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 0 12px 7px; display: block; }
.nav-item { width: 100%; height: 40px; padding: 0 12px; border: 0; background: transparent; color: #aeb0ad; display: flex; gap: 11px; align-items: center; border-radius: 5px; font-size: 14px; text-align: left; transition: .18s ease; }
.nav-item:hover { color: #fff; background: #242524; }
.nav-item.active { background: #2c2d2c; color: #fff; box-shadow: inset 3px 0 var(--accent); }
.sidebar-bottom { padding: 12px; border-top: 1px solid #2c2d2c; }
.account { display: flex; align-items: center; gap: 10px; border-top: 1px solid #2c2d2c; margin-top: 11px; padding: 15px 5px 3px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #e4e0d8; color: #272624; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.account > div:nth-child(2) { min-width: 0; flex: 1; }
.account strong, .account span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account strong { font-size: 12px; }
.account span { font-size: 10px; color: #7f817e; margin-top: 2px; }
.account button { color: #737572; background: none; border: 0; padding: 5px; }
.workspace { margin-left: 236px; min-height: 100vh; }
.topbar { height: 64px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 30px; position: sticky; top: 0; z-index: 20; }
.global-search { display: flex; align-items: center; gap: 9px; width: min(430px, 42vw); color: #9a968e; }
.global-search input { border: 0; outline: 0; width: 100%; color: #33312e; background: transparent; font-size: 13px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 5px; background: #fff; display: grid; place-items: center; color: #64615c; position: relative; }
.notification-dot { position: absolute; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; top: 7px; right: 7px; box-shadow: 0 0 0 2px #fff; }
.profile-button { height: 36px; display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #5d5a55; font-size: 12px; }
.demo-badge { font-size: 11px; color: #766f62; background: #eeece6; padding: 5px 8px; border-radius: 4px; }
.demo-badge.connected { color: #387c5a; background: #e8f3ec; }
.menu-button { display: none; border: 0; background: transparent; margin-right: 12px; }
.content { padding: 30px; max-width: 1600px; margin: auto; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 27px; gap: 20px; }
h1, h2 { font-family: 'Manrope', sans-serif; margin: 0; color: #22211f; }
.page-heading h1 { font-size: 25px; letter-spacing: 0; }
.page-heading p, .section-heading p, .quick-row p { color: var(--muted); margin: 5px 0 0; font-size: 12px; }
.primary, .secondary { height: 38px; padding: 0 14px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 600; }
.primary { color: #fff; background: var(--accent); border: 1px solid var(--accent); }
.primary:hover { background: #aa3025; }
.secondary { color: #5f5c57; background: #fff; border: 1px solid var(--line); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: #fff; }
.kpi { padding: 21px 22px; min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: #85817a; font-size: 12px; }
.kpi strong { display: block; font-family: 'Manrope'; font-size: 25px; margin: 16px 0 8px; color: #242321; }
.delta { display: flex; gap: 4px; align-items: center; font-size: 10px; }
.delta.up { color: #387c5a; } .delta.down { color: var(--accent); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); margin-top: 20px; background: #fff; border: 1px solid var(--line); }
.chart-panel, .activity-panel { padding: 23px; min-width: 0; }
.activity-panel { border-left: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.section-heading h2, .quick-row h2 { font-size: 15px; }
.select-button { border: 1px solid var(--line); background: #fff; color: #706d67; height: 30px; padding: 0 9px; border-radius: 4px; font-size: 11px; display: flex; gap: 8px; align-items: center; }
.chart-wrap { height: 266px; margin-top: 18px; }
.bar-chart { height: 266px; margin-top: 18px; display: flex; align-items: flex-end; gap: clamp(12px, 4vw, 42px); padding: 34px 18px 24px; border-bottom: 1px solid #e9e7e2; background: repeating-linear-gradient(to bottom, transparent 0, transparent 64px, #efede8 65px); }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 22px; }
.bar-col i { width: min(34px, 70%); background: #c94032; display: block; border-radius: 2px 2px 0 0; transition: height .5s ease, background .2s ease; }
.bar-col:hover i { background: #a93228; }
.bar-col span { position: absolute; bottom: calc(var(--height, 0%) + 4px); font-size: 9px; color: #77736c; transform: translateY(-2px); }
.bar-col small { position: absolute; top: calc(100% + 7px); color: #77736c; font-size: 10px; }
.nav-glyph { width: 18px; text-align: center; font-size: 16px; font-weight: 400; }
.activity-list { margin-top: 17px; }
.activity { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 11px 0; border-top: 1px solid #efede8; }
.activity-icon { width: 32px; height: 32px; display: grid; place-items: center; background: #edece8; color: #625f59; border-radius: 5px; }
.activity-icon.stock { color: var(--accent); background: #fae9e6; }
.activity strong, .activity span { display: block; font-size: 11px; }
.activity span { color: var(--muted); margin-top: 3px; }
.activity time { color: #96928b; font-size: 9px; white-space: nowrap; }
.quick-row { margin-top: 20px; padding: 19px 22px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: space-between; }
.quick-actions { display: flex; gap: 8px; }
.quick-actions button { height: 35px; border: 1px solid var(--line); background: #fff; color: #5d5a54; border-radius: 5px; display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 11px; }
.quick-actions button:hover { border-color: #a9a59e; color: #222; }
.table-panel { background: #fff; border: 1px solid var(--line); }
.table-tools { min-height: 57px; padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.table-tools > div { display: flex; gap: 7px; }
.table-tools .secondary { height: 32px; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 760px; }
th { height: 42px; padding: 0 17px; text-align: left; background: #f8f7f4; border-bottom: 1px solid var(--line); color: #817d76; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
td { height: 65px; padding: 9px 17px; border-bottom: 1px solid #eeece7; font-size: 12px; color: #55524d; }
tr:last-child td { border-bottom: 0; }
td strong, td span { display: block; }
td strong { color: #2c2a27; font-size: 12px; font-weight: 600; }
td > span:not(.status):not(.sku) { color: #8e8a83; font-size: 10px; margin-top: 4px; }
.sku { font-family: monospace; font-size: 11px; color: #595650; background: #efede8; padding: 4px 6px; border-radius: 3px; display: inline-block; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; padding: 4px 7px; border-radius: 3px; font-weight: 600; }
.status span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.positive { color: #387c5a; background: #e8f3ec; }.status.danger { color: #b53d32; background: #f8e9e6; }.status.warning { color: #8b6b24; background: #f7f0dc; }.status.info { color: #3c668c; background: #e8f0f6; }
.row-button { border: 0; background: transparent; color: #88847e; letter-spacing: 2px; }
.modal-layer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: #111a; backdrop-filter: blur(2px); border: 0; }
.modal { z-index: 1; width: min(460px, 100%); background: #fff; padding: 25px; box-shadow: 0 25px 80px #0005; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 23px; }
.modal h2 { font-size: 20px; margin-top: 5px; }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.modal label, .login-form label { display: block; font-size: 11px; color: #625f59; font-weight: 600; margin-top: 15px; }
.modal input, .login-form input { width: 100%; height: 42px; border: 1px solid var(--line); outline: 0; padding: 0 11px; margin-top: 6px; border-radius: 4px; }
.modal input:focus, .login-form input:focus { border-color: #77736c; box-shadow: 0 0 0 3px #0000000a; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 25px; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: #fff; }
.login-brand { background: #111; display: flex; flex-direction: column; justify-content: center; padding: 12%; color: #aaa; }
.login-brand img { width: min(500px, 90%); }
.login-brand p { max-width: 430px; font-size: 17px; line-height: 1.6; }
.login-form { width: min(390px, calc(100% - 40px)); margin: auto; }
.login-form h1 { font-size: 28px; margin-top: 8px; }.login-form > div > p { color: var(--muted); font-size: 13px; }
.wide { width: 100%; margin-top: 22px; }.form-error { color: var(--accent); font-size: 11px; }
.auth-switch { display: block; width: 100%; border: 0; background: transparent; color: #66625c; font-size: 11px; margin-top: 13px; text-decoration: underline; }
.loading { min-height: 100vh; display: grid; place-items: center; background: #171817; color: #fff; }
.backdrop { display: none; }

@media (max-width: 1050px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); }.kpi:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.kpi:nth-child(4) { border-top: 1px solid var(--line); }.dashboard-grid { grid-template-columns: 1fr; }.activity-panel { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 760px) { .sidebar { transform: translateX(-100%); transition: transform .22s ease; }.sidebar.open { transform: translateX(0); }.backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: #0007; border: 0; }.workspace { margin-left: 0; }.menu-button { display: block; }.topbar { padding: 0 15px; }.profile-button span, .profile-button svg:last-child { display: none; }.global-search { flex: 1; width: auto; }.demo-badge { display: none; }.content { padding: 22px 15px; }.page-heading { align-items: center; }.page-heading h1 { font-size: 21px; }.page-heading p { max-width: 180px; }.kpi-grid { grid-template-columns: 1fr 1fr; }.kpi { padding: 17px 15px; }.kpi strong { font-size: 20px; }.chart-panel, .activity-panel { padding: 18px 15px; }.quick-row { align-items: flex-start; gap: 15px; flex-direction: column; }.quick-actions { width: 100%; overflow-x: auto; }.quick-actions button { flex: 0 0 auto; }.login-shell { grid-template-columns: 1fr; }.login-brand { display: none; } }
@media (max-width: 440px) { .kpi-grid { grid-template-columns: 1fr; }.kpi + .kpi { border-left: 0; border-top: 1px solid var(--line); }.top-actions .icon-button { display: none; }.page-heading { align-items: flex-start; }.page-heading .primary { padding: 0 10px; }.page-heading .primary svg { display: none; }.table-tools > div .secondary:first-child { display: none; } }

.module-info{padding:24px;margin-top:24px;line-height:1.7}.module-info h2{font-size:17px}.module-info p{color:#66625c;max-width:900px}.modal{max-height:90vh;overflow:auto}.modal select{width:100%;padding:12px;border:1px solid #d8d5cf;background:white;border-radius:4px}.backdrop{display:none!important}.sidebar.open + .backdrop{display:block!important}.login-brand img{max-width:90%}.login-form{padding:24px 0}.login-form label{display:block}.form-error{min-height:1.5em}button:disabled{opacity:.55;cursor:wait}.status{white-space:nowrap}