@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root{
  --bg:#080c12;
  --panel:#0d131c;
  --panel2:#111925;
  --panel3:#151e2b;
  --line:#202b39;
  --line2:#2a3748;
  --text:#eef3fa;
  --muted:#8290a2;
  --dim:#566376;
  --blue:#6f86ff;
  --blue2:#9aa8ff;
  --green:#4fd18b;
  --yellow:#e0b75c;
  --red:#de6f76;
  --purple:#a78bfa;
  --sidebar:235px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:"Inter",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.soft{--panel:#101722;--panel2:#151e2b}
body.locked{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.app-shell{min-height:100vh}

/* Sidebar */
.sidebar{
  position:fixed;inset:0 auto 0 0;z-index:100;width:var(--sidebar);padding:18px 13px;
  display:flex;flex-direction:column;background:#0a0f16;border-right:1px solid var(--line)
}
.side-brand{height:48px;padding:0 7px;display:flex;align-items:center;gap:10px}
.side-brand img{width:35px;height:35px;border-radius:9px}
.side-brand strong{display:block;font-size:.73rem;letter-spacing:.7px}
.side-brand span{display:block;margin-top:2px;color:#536173;font-size:.52rem}
.side-nav{margin-top:25px;display:flex;flex-direction:column;gap:4px}
.side-nav a{min-height:40px;padding:0 10px;display:flex;align-items:center;gap:10px;color:#778597;border-radius:7px;font-size:.68rem}
.side-nav a>span{width:18px;text-align:center;color:#5e6c7e}
.side-nav a>b{margin-left:auto;padding:2px 6px;border-radius:999px;background:#1c2531;color:#8493a4;font-size:.5rem}
.side-nav a.active,.side-nav a:hover{color:white;background:#121a25}
.side-nav a.active{box-shadow:inset 2px 0 0 var(--blue)}
.side-section{margin-top:25px;padding-top:17px;border-top:1px solid var(--line)}
.side-section>p{padding:0 8px;color:#465466;font-size:.5rem;font-weight:700;letter-spacing:1.4px}
.workspace-switch{width:100%;margin-top:8px;padding:10px;display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:7px;background:#0c121a;color:white}
.workspace-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.workspace-switch strong{display:block;font-size:.59rem}.workspace-switch small{display:block;margin-top:1px;color:#596678;font-size:.48rem}.workspace-switch>b{color:#5a687a}
.side-user{margin-top:auto;padding:10px 7px;display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;border-top:1px solid var(--line)}
.side-user img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.side-user strong{display:block;font-size:.57rem}.side-user span{display:block;margin-top:2px;color:#566476;font-size:.47rem}
.side-user button{border:0;background:none;color:#677587}

/* Main */
.main-area{margin-left:var(--sidebar);min-height:100vh}
.topbar{position:sticky;top:0;z-index:80;height:64px;padding:0 24px;display:flex;align-items:center;gap:18px;background:rgba(8,12,18,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(15px)}
.menu-btn{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:7px;background:#0d131c;color:#91a0b2}
.search-box{width:min(420px,48vw);height:35px;padding:0 9px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:#0b1119;color:#536174}
.search-box input{width:100%;border:0;outline:0;background:none;color:white;font-size:.63rem}
.search-box kbd{padding:1px 5px;border:1px solid var(--line);border-radius:4px;font-size:.52rem;color:#536174}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-button{position:relative;width:35px;height:35px;border:1px solid var(--line);border-radius:7px;background:#0b1119;color:#748294}
.notification-button i{position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.date-filter select{height:35px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:#0b1119;color:#7f8d9f;font-size:.58rem}
.content{width:min(1450px,calc(100% - 42px));margin:auto;padding:28px 0 48px}
.page-head{margin-bottom:22px;display:flex;align-items:end;justify-content:space-between;gap:25px}
.eyebrow{color:#66758a;font-size:.52rem;font-weight:700;letter-spacing:1.5px}
.page-head h1{margin-top:5px;font-size:1.7rem;letter-spacing:-.7px}
.page-head>div>p:not(.eyebrow){margin-top:4px;color:#6d7a8c;font-size:.64rem}
.primary-button,.secondary-button{min-height:36px;padding:0 12px;border-radius:7px;font-size:.59rem;font-weight:600}
.primary-button{border:1px solid #7489ff;color:#fff;background:linear-gradient(180deg,#7186ff,#5369df)}
.secondary-button{border:1px solid var(--line2);color:#9aa7b7;background:#111925}
.primary-button.full{width:100%}

/* Notifications */
.notification-panel{position:fixed;z-index:150;top:58px;right:25px;width:340px;padding:14px;border:1px solid var(--line2);border-radius:8px;background:#0d131c;box-shadow:0 18px 55px rgba(0,0,0,.42);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.18s ease}
.notification-panel.active{opacity:1;pointer-events:auto;transform:none}
.panel-title{padding-bottom:10px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
.panel-title strong{font-size:.65rem}.panel-title button{border:0;background:none;color:#738194;font-size:1.1rem}
.notification-panel article{padding:11px 0;display:grid;grid-template-columns:9px 1fr;gap:9px;border-bottom:1px solid var(--line)}
.notification-panel article:last-child{border-bottom:0}
.dot{width:7px;height:7px;margin-top:4px;border-radius:50%}.dot.success{background:var(--green)}.dot.warn{background:var(--yellow)}.dot.blue{background:var(--blue)}
.notification-panel article strong{font-size:.57rem}.notification-panel article p{margin-top:2px;color:#758295;font-size:.53rem}.notification-panel article small{display:block;margin-top:4px;color:#4f5b6b;font-size:.46rem}

/* Metrics */
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metric-grid.three{grid-template-columns:repeat(3,1fr)}
.metric-card{min-height:150px;padding:15px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.metric-card>div:first-child{display:flex;justify-content:space-between;gap:10px;color:#788698;font-size:.55rem}
.metric-card>strong{display:block;margin-top:20px;font-size:1.45rem;letter-spacing:-.5px}
.metric-card>p{margin-top:3px;color:#566375;font-size:.5rem}
.trend{font-size:.48rem}.trend.up{color:var(--green)}.trend.down{color:#d99579}
.sparkline{height:35px;margin-top:12px}

/* Panels and chart */
.dashboard-grid{margin-top:12px;display:grid;grid-template-columns:1.55fr .75fr;gap:12px}
.dashboard-grid.lower{grid-template-columns:1.35fr .85fr}
.panel{border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.panel-head{min-height:62px;padding:14px 15px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line)}
.panel-head h2{margin-top:4px;font-size:.78rem}
.legend{display:flex;gap:13px;color:#5c697b;font-size:.48rem}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:9px;height:2px}.legend-current{background:var(--blue)}.legend-prev{background:#394454}
.chart-wrap{height:300px;padding:15px}.chart-wrap.tall{height:360px}.chart-wrap canvas{width:100%;height:100%}
.funnel{padding:15px;display:grid;gap:15px}
.funnel>div{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center}
.funnel span{font-size:.67rem;font-weight:600}.funnel b{font-size:.52rem;color:#728092;font-weight:500}
.funnel i{grid-column:1/-1;width:var(--w);height:7px;border-radius:999px;background:linear-gradient(90deg,#5c72ee,#8395ff)}
.inline-link{color:#8193ff;font-size:.53rem}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:650px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.55rem;white-space:nowrap}
th{color:#526072;font-weight:500;background:#0c121a}
td{color:#a1adba}
.status{padding:4px 7px;border-radius:999px;font-size:.48rem}.status.paid{color:#78dea0;background:#173522}.status.process{color:#d8bb74;background:#362e17}.status.sent{color:#8db2ff;background:#172944}.status.cancel{color:#df8990;background:#3b1e22}
.product-list{padding:3px 15px}
.product-list article{padding:11px 0;display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;border-bottom:1px solid var(--line)}
.product-list article:last-child{border-bottom:0}.product-list img{width:38px;height:38px;border-radius:7px;object-fit:cover}
.product-list strong{display:block;font-size:.56rem}.product-list span{display:block;margin-top:2px;color:#576476;font-size:.47rem}.product-list b{font-size:.52rem}

/* Analytics */
.analytic-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.analytic-summary article{min-height:100px;padding:15px;border-right:1px solid var(--line)}
.analytic-summary article:last-child{border-right:0}.analytic-summary span{display:block;color:#677588;font-size:.53rem}.analytic-summary strong{display:block;margin-top:13px;font-size:1.08rem}.analytic-summary b{display:block;margin-top:3px;color:var(--green);font-size:.48rem}
.channel-list{padding:15px}.channel-list article{margin-bottom:17px}.channel-list article:last-child{margin-bottom:0}.channel-list div{display:flex;justify-content:space-between;font-size:.53rem}.channel-list span{color:#8996a6}.channel-list b{font-size:.5rem}.channel-list i{display:block;width:var(--w);height:6px;margin-top:6px;border-radius:999px;background:linear-gradient(90deg,#5369e7,#8b9aff)}
.full-panel{margin-top:12px}.device-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:15px;gap:15px}.device-grid article{padding:14px;border:1px solid var(--line);border-radius:7px}.device-grid span{color:#748194;font-size:.52rem}.device-grid strong{display:block;margin-top:12px;font-size:1.2rem}.device-grid p{margin-top:2px;color:#526072;font-size:.48rem}.device-grid i{display:block;width:var(--w);height:5px;margin-top:12px;border-radius:999px;background:var(--blue)}

/* Orders */
.toolbar{margin-bottom:12px;display:flex;justify-content:space-between;gap:12px}
.toolbar-search{width:330px;height:35px;padding:0 9px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:7px;background:#0b1119;color:#586679}
.toolbar-search.small{width:260px}
.toolbar-search input{width:100%;border:0;outline:0;background:none;color:#fff;font-size:.56rem}
.toolbar-filters select{height:35px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:#0b1119;color:#788698;font-size:.55rem}
.orders-full{min-height:450px}
.row-menu{border:0;background:none;color:#738194}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:.2s ease}
.modal.active{opacity:1;pointer-events:auto}
.modal-card{position:relative;width:min(480px,100%);padding:24px;border:1px solid var(--line2);border-radius:9px;background:#0e151f}
.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;color:#718094;font-size:1.3rem}
.modal-card h2{margin:6px 0 20px;font-size:1.1rem}
.modal form,.settings-form{display:grid;gap:14px}
.modal label,.settings-form label{display:grid;gap:5px;color:#718094;font-size:.52rem}
.modal input,.modal select,.settings-form input,.settings-form select{padding:10px;border:1px solid var(--line2);border-radius:6px;background:#0a1017;color:white}
.form-status{min-height:16px;color:#7b8bff;font-size:.5rem}

/* Customers */
.customers-panel{margin-top:12px}
.customer-cell{display:flex;align-items:center;gap:9px}.customer-cell>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#1d2937;color:#a8b5c4;font-size:.5rem}.customer-cell strong{display:block;font-size:.55rem}.customer-cell small{display:block;margin-top:1px;color:#536071;font-size:.46rem}
.segment{padding:4px 7px;border-radius:999px;font-size:.47rem}.segment.vip{color:#e8ca83;background:#352c16}.segment.repeat{color:#82dfad;background:#173626}.segment.new{color:#9eb6ff;background:#172943}

/* Settings */
.settings-layout{display:grid;grid-template-columns:190px 1fr;gap:16px}
.settings-nav{height:max-content;padding:7px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.settings-nav button{width:100%;padding:10px;text-align:left;border:0;border-radius:6px;background:none;color:#69778a;font-size:.55rem}
.settings-nav button.active{color:white;background:#151e2a}
.settings-content{border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.settings-panel{display:none;padding:22px}.settings-panel.active{display:block}
.settings-head{padding-bottom:18px;border-bottom:1px solid var(--line)}.settings-head h2{font-size:.9rem}.settings-head p{margin-top:4px;color:#657286;font-size:.55rem}
.settings-form{max-width:600px;margin-top:20px}
.toggle-list{margin-top:8px}.toggle-list label{padding:15px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.toggle-list strong{display:block;font-size:.58rem}.toggle-list small{display:block;margin-top:3px;color:#5d6b7d;font-size:.48rem}
.toggle-list input{width:36px;height:18px;accent-color:var(--blue)}
.security-card{padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.security-card strong{font-size:.59rem}.security-card p{margin-top:3px;color:#5d6a7b;font-size:.49rem}

/* Login */
.login-body{background:#090d13}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-visual{position:relative;overflow:hidden;padding:45px;color:white;background:radial-gradient(circle at 75% 30%,rgba(111,134,255,.25),transparent 35%),#0b1119}
.login-brand{position:relative;z-index:2;display:flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;letter-spacing:1.5px}.login-brand img{width:36px;height:36px}
.visual-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px}
.visual-copy{position:absolute;left:45px;right:45px;bottom:55px}.visual-copy>p{color:#69778a;font-size:.55rem;letter-spacing:1.7px}.visual-copy h1{margin-top:10px;font-size:clamp(3rem,5.2vw,5.3rem);line-height:.93;letter-spacing:-3px}.visual-copy h1 span{color:#8f9fff}.visual-stat{margin-top:35px;display:flex;align-items:end;gap:12px}.visual-stat strong{font-size:1.5rem}.visual-stat span{padding-bottom:4px;color:#657387;font-size:.54rem}
.login-form-wrap{display:grid;place-items:center;padding:35px;background:#0d131c}
.login-form{width:min(430px,100%)}.login-form h2{margin:7px 0;font-size:1.8rem;letter-spacing:-1px}.login-form>p:not(.eyebrow):not(.login-note):not(.form-status){color:#667386;font-size:.61rem}
.login-form label:not(.check){margin-top:20px;display:grid;gap:6px;color:#7a8799;font-size:.54rem}
.login-form input{width:100%;padding:12px;border:1px solid var(--line2);border-radius:7px;background:#0a1017;color:white;outline:none}
.password-field{position:relative}.password-field button{position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;background:none;color:#718095;font-size:.52rem}
.login-options{margin:14px 0 20px;display:flex;justify-content:space-between;align-items:center}.check{display:flex;align-items:center;gap:6px;color:#69778a;font-size:.52rem}.check input{width:auto}.text-button{border:0;background:none;color:#8192ff;font-size:.52rem}
.login-note{margin-top:13px;color:#566376;font-size:.5rem;line-height:1.5}

/* Mobile */
.mobile-overlay{display:none}
@media(max-width:1000px){
  .sidebar{transform:translateX(-100%);transition:.2s ease}.sidebar.active{transform:none}.main-area{margin-left:0}.menu-btn{display:block}
  .mobile-overlay{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6)}.mobile-overlay.active{display:block}
  .dashboard-grid,.dashboard-grid.lower{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .content{width:calc(100% - 24px);padding-top:20px}.topbar{padding-inline:12px}.search-box{width:100%}.icon-button,.date-filter{display:none}
  .page-head{align-items:flex-start;flex-direction:column}.metric-grid,.metric-grid.three,.analytic-summary{grid-template-columns:1fr}
  .analytic-summary article{border-right:0;border-bottom:1px solid var(--line)}.analytic-summary article:last-child{border-bottom:0}
  .device-grid{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.toolbar-search,.toolbar-search.small{width:100%}
  .settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto}.settings-nav button{min-width:max-content}
  .login-shell{grid-template-columns:1fr}.login-visual{min-height:42vh;padding:25px}.visual-copy{left:25px;right:25px;bottom:25px}.login-form-wrap{padding:45px 22px}
}