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

:root { --navy:#121a35; --ink:#1c2540; --muted:#71809a; --line:#e8ebf2; --surface:#fff; --bg:#f7f8fc; --purple:#7657ed; --purple-light:#eeeaff; --green:#1eaa77; --orange:#e58b22; --blue:#3478f6; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--bg); font-family:'DM Sans',sans-serif; font-size:14px; } button,input,select { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:244px minmax(0,1fr); }.sidebar { min-height:100vh; padding:28px 16px 20px; background:var(--navy); color:#dce3ff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }.brand { color:#fff; font:700 20px 'Plus Jakarta Sans',sans-serif; text-decoration:none; display:flex; align-items:center; gap:10px; padding:0 8px 35px; }.brand span { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#9e8bff,#6951e5); font-size:11px; }.workspace-label { margin:0 12px 10px; color:#7f8bab; font-size:10px; font-weight:700; letter-spacing:1.2px; }.nav-link { width:100%; border:0; background:transparent; border-radius:8px; color:#bac4e0; text-align:left; padding:12px; margin:2px 0; font-weight:600; display:flex; align-items:center; gap:13px; }.nav-link span { width:16px; font-size:18px; text-align:center; }.nav-link:hover,.nav-link.is-active { background:#283359; color:#fff; }.sidebar-footer { margin-top:auto; }.help-card { padding:14px; background:#1d294d; border-radius:10px; display:grid; gap:5px; margin:15px 4px; color:#fff; }.help-card span,.profile span { color:#9aa8cc; font-size:12px; }.profile { border-top:1px solid #2a365a; padding:18px 5px 0; display:flex; align-items:center; gap:9px; }.profile div:nth-child(2) { display:grid; gap:2px; flex:1; }.avatar { width:35px; height:35px; border-radius:50%; background:#e0c7ad; color:#634936; display:grid; place-items:center; font-weight:700; }.avatar.small { width:30px; height:30px; background:var(--purple-light); color:var(--purple); }
.main-content { padding:38px 48px 70px; max-width:1480px; width:100%; margin:auto; }.page-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:30px; }.eyebrow { font-size:10px; letter-spacing:1.1px; color:var(--purple); font-weight:800; margin:0 0 8px; }.page-header h1 { font:800 27px 'Plus Jakarta Sans',sans-serif; margin:0 0 8px; letter-spacing:-.7px; }.muted { color:var(--muted); margin:0; }.button { padding:11px 16px; border-radius:8px; border:0; font-weight:700; white-space:nowrap; }.button-primary { color:#fff; background:var(--purple); box-shadow:0 7px 13px #7657ed30; }.button-primary:hover { background:#6849e1; }.button-secondary { background:#fff; color:var(--purple); border:1px solid #dcd6fb; }.button-ghost { background:transparent; color:var(--muted); }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; margin-bottom:22px; }.metric-card,.panel,.product-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; }.metric-card { padding:19px; position:relative; }.metric-card p { margin:0 0 10px; color:var(--muted); font-size:13px; }.metric-card strong { font:800 21px 'Plus Jakarta Sans',sans-serif; display:block; letter-spacing:-.4px; }.metric-card > span { margin-top:8px; display:block; color:#8190a7; font-size:11px; }.metric-icon { position:absolute; right:17px; top:17px; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:700; }.purple { color:var(--purple); background:var(--purple-light); }.blue { color:var(--blue); background:#e9f1ff; }.orange { color:var(--orange); background:#fff3df; }.green { color:var(--green); background:#e3f7ef; }.content-grid { display:grid; gap:22px; margin-bottom:22px; }.two-one { grid-template-columns:2fr 1fr; }.panel { padding:21px; overflow:hidden; }.panel-heading,.toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:20px; }.panel h2,.product-card h2 { font:700 16px 'Plus Jakarta Sans',sans-serif; margin:0 0 5px; }.panel select { border:1px solid var(--line); padding:7px; border-radius:6px; color:var(--ink); background:#fff; font-size:12px; }.link-button { border:0; color:var(--purple); background:none; font-weight:700; }.chart { height:230px; display:flex; gap:16px; }.chart-scale { color:#94a0b4; font-size:10px; display:flex; flex-direction:column; justify-content:space-between; padding:2px 0 19px; }.bars { flex:1; display:flex; justify-content:space-around; align-items:end; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to bottom,transparent 0,transparent 51px,#eff1f6 52px); padding:0 10px; }.bar-group { height:100%; width:38px; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:8px; }.bar { width:25px; min-height:5px; border-radius:6px 6px 2px 2px; background:linear-gradient(#9e8dff,#7657ed); position:relative; }.bar:hover { background:var(--navy); }.bar span { display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); padding:4px; font-size:10px; background:var(--navy); color:#fff; border-radius:4px; white-space:nowrap; }.bar:hover span { display:block; }.bar-group small { color:#8591a5; font-size:10px; }.rank-row { display:grid; grid-template-columns:21px 34px 1fr auto; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }.rank-row:last-child { border:0; }.rank { color:#8e9ab0; font-weight:700; }.product-mark { background:var(--purple-light); color:var(--purple); border-radius:8px; width:30px; height:30px; display:grid; place-items:center; font-weight:800; }.product-mark.large { width:46px; height:46px; font-size:19px; }.rank-row p { color:var(--muted); font-size:11px; margin:3px 0 0; }.warning-panel { background:linear-gradient(145deg,#fff,#fffcf5); }.warning-panel .icon-circle { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--orange); background:#fff1d5; font-weight:800; }.warning-panel h2 { margin-top:17px; }.warning-panel .button { margin-top:20px; }
.table-wrap { overflow-x:auto; } table { border-collapse:collapse; width:100%; min-width:600px; } th { color:#8590a5; font-size:10px; text-align:left; letter-spacing:.5px; text-transform:uppercase; padding:0 10px 11px; } td { padding:13px 10px; border-top:1px solid var(--line); color:#4b5870; } td strong { color:var(--ink); } td small { display:block; color:#98a3b4; margin-top:3px; }.badge { display:inline-block; padding:5px 9px; border-radius:20px; font-size:11px; font-weight:700; }.badge.success { background:#e5f7ef; color:#16845b; }.badge.warning { background:#fff2dd; color:#b56a0a; }.badge.neutral { background:#eef1f6; color:#65738a; }.badge.purple { background:var(--purple-light); color:var(--purple); }.toolbar { padding-bottom:18px; border-bottom:1px solid var(--line); }.search { width:min(360px,100%); display:flex; gap:8px; align-items:center; color:#8895aa; border:1px solid var(--line); border-radius:7px; padding:8px 10px; }.search input { border:0; outline:0; width:100%; color:var(--ink); }.person { display:flex; align-items:center; gap:10px; }.empty { color:var(--muted); text-align:center; padding:35px; }.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.product-card { padding:20px; }.product-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; }.product-card .eyebrow { margin-bottom:6px; }.price-line { border-top:1px solid var(--line); padding-top:17px; margin-top:22px; display:flex; justify-content:space-between; }.price-line div { display:grid; gap:4px; }.price-line small { color:var(--muted); }.positive { color:var(--green) !important; }.stock-summary { display:flex; gap:1px; background:var(--line); margin-bottom:22px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }.stock-summary div { background:#fff; flex:1; padding:16px 20px; display:flex; align-items:baseline; gap:9px; }.stock-summary strong { font:800 22px 'Plus Jakarta Sans',sans-serif; }.stock-summary span { color:var(--muted); }.icon-button { border:0; background:transparent; color:var(--muted); }.tabs { display:flex; gap:6px; }.tab { border:0; padding:6px 10px; color:var(--muted); background:transparent; font-size:12px; }.tab.is-active { color:var(--purple); background:var(--purple-light); border-radius:6px; }.modal-backdrop { position:fixed; z-index:5; inset:0; background:#121a3580; display:grid; place-items:center; padding:20px; }.modal { width:min(460px,100%); border-radius:12px; padding:23px; background:#fff; box-shadow:0 24px 65px #121a3560; }.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }.modal-header h2 { font:700 18px 'Plus Jakarta Sans',sans-serif; margin:0; }.close { border:0; background:transparent; color:var(--muted); font-size:25px; }.form-fields { display:grid; gap:15px; }.form-fields label { display:grid; gap:7px; color:#56637a; font-weight:700; font-size:12px; }.form-fields em { color:#e35353; font-style:normal; }.form-fields input,.form-fields select { border:1px solid #dfe4ed; border-radius:7px; padding:10px; outline-color:var(--purple); color:var(--ink); background:#fff; }.modal-actions { display:flex; justify-content:end; gap:8px; margin-top:24px; }
@media (max-width:1050px) { .main-content { padding:30px; }.metrics-grid { grid-template-columns:repeat(2,1fr); }.two-one { grid-template-columns:1fr; }.product-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:720px) { .app-shell { grid-template-columns:1fr; }.sidebar { position:static; height:auto; min-height:auto; padding:15px; }.brand { padding-bottom:15px; }.workspace-label,.sidebar-footer { display:none; } nav { display:flex; overflow:auto; }.nav-link { width:auto; white-space:nowrap; }.main-content { padding:24px 16px 45px; }.page-header { align-items:stretch; flex-direction:column; }.metrics-grid,.product-grid { grid-template-columns:1fr; }.stock-summary { overflow:auto; }.stock-summary div { min-width:130px; }.chart { min-width:470px; }.panel { padding:16px; }.toolbar { align-items:stretch; flex-direction:column; }.tabs { overflow:auto; } }
.referral-info { margin-top:22px; border:1px solid #dcd6fb; background:linear-gradient(100deg,#f7f5ff,#fff); border-radius:12px; padding:20px; }.referral-info>div { display:flex; align-items:flex-start; gap:14px; }.referral-info h2 { margin:0 0 6px; font:700 15px 'Plus Jakarta Sans',sans-serif; }.referral-info p { max-width:750px; margin:0; color:var(--muted); line-height:1.55; }.copy-code { border:1px solid #dcd6fb; color:var(--purple); background:#fff; border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; } code { color:var(--purple); background:var(--purple-light); padding:4px 6px; border-radius:4px; font:700 11px 'DM Sans',sans-serif; }
.slot-notice { margin:0; padding:10px 11px; border-radius:7px; background:#f3f1ff; color:#6254ac; font-size:12px; line-height:1.45; }.slot-notice:has(+ *) { margin-bottom:0; }
.dashboard-section { margin-bottom:28px; }.section-title { display:flex; justify-content:space-between; align-items:end; margin-bottom:13px; }.section-title h2 { margin:0; font:700 17px 'Plus Jakarta Sans',sans-serif; }.section-title>span { color:var(--muted); font-size:12px; }.dashboard-metrics { margin-bottom:0; }.health-grid { grid-template-columns:repeat(2, minmax(0,1fr)); margin-bottom:0; }
.pagination { display:flex; align-items:center; justify-content:space-between; padding-top:17px; color:var(--muted); font-size:12px; }.pagination>div { display:flex; gap:5px; }.page-button,.table-action { border:1px solid var(--line); color:var(--purple); background:#fff; border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; }.page-button.is-active { background:var(--purple); border-color:var(--purple); color:#fff; }.page-button:disabled { opacity:.45; cursor:not-allowed; }.card-edit { margin-left:7px; }.product-card-top>div:last-child { display:flex; align-items:center; }
.history-modal { width:min(760px,100%); }
.form-fields textarea { border:1px solid #dfe4ed; border-radius:7px; padding:10px; outline-color:var(--purple); color:var(--ink); background:#fff; min-height:76px; resize:vertical; }
.logout-button { border:0; background:transparent; color:#bac4e0; font-size:11px; font-weight:700; }.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#111a36,#28345d); }.login-card { width:min(430px,100%); padding:36px; background:#fff; border-radius:16px; box-shadow:0 30px 80px #0005; }.login-brand { color:var(--navy); padding:0 0 29px; }.login-card h1 { font:800 25px 'Plus Jakarta Sans',sans-serif; margin:0 0 9px; }.login-form { display:grid; gap:15px; margin-top:25px; }.login-form label { display:grid; gap:7px; color:#56637a; font-size:12px; font-weight:700; }.login-form input { border:1px solid #dfe4ed; border-radius:7px; padding:11px; outline-color:var(--purple); }.login-form .button { margin-top:4px; }.login-error { min-height:18px; margin:0; color:#c94040; font-size:12px; }.login-hint { margin:21px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.app-error { padding:40px; color:#c94040; }
.header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.action-buttons { white-space:nowrap; }.action-buttons .table-action { margin-right:4px; }.table-action.danger { color:#c94040; border-color:#f0caca; }.customer-details { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:15px; margin:0; }.customer-details div { padding:10px; background:#f7f8fc; border-radius:7px; }.customer-details dt { color:var(--muted); font-size:11px; margin-bottom:4px; }.customer-details dd { margin:0; color:var(--ink); font-weight:600; overflow-wrap:anywhere; }