:root{
  --bg:#f4f6fb;
  --card-bg:#ffffff;
  --text:#14181f;
  --text-dim:#6b7280;
  --text-faint:#9aa1ac;
  --border:#eceef2;
  --green:#1a3c2b;
  --green-dark:#122a1e;
  --green-pastel:#e6f0e9;
  --purple-pastel:#eef0fd;
  --purple:#6c5ce7;
  --blue-pastel:#eaf2ff;
  --blue:#3b82f6;
  --amber-pastel:#fff6e6;
  --amber:#f5a623;
  --pink-pastel:#fdeef2;
  --pink:#f0426b;
  --orange:#f27a1a;
  --orange-pastel:#fef1e4;
  --shadow:0 1px 2px rgba(20,24,31,0.04), 0 4px 16px rgba(20,24,31,0.04);
  --shadow-lg:0 4px 24px rgba(20,24,31,0.08);
  --radius:16px;
  --radius-sm:10px;
  --font-body:'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}

/* ===== Auth gate ===== */
#authGate{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #f4f6fb, #eef2ee);
}
.auth-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:38px 34px 30px;
  width:340px; max-width:90vw; text-align:center;
}
.auth-logo{margin-bottom:18px; display:flex; justify-content:center;}
.auth-logo img{height:26px;}
.auth-title{font-size:16px; font-weight:800; color:var(--text); margin-bottom:4px;}
.auth-sub{font-size:12.5px; color:var(--text-dim); margin-bottom:20px;}
.auth-card input[type=password]{
  width:100%; box-sizing:border-box;
  border:1px solid var(--border); border-radius:10px;
  padding:11px 14px; font-family:var(--font-body); font-size:14px;
  margin-bottom:12px; outline:none; transition:border-color .15s ease;
}
.auth-card input[type=password]:focus{border-color:var(--green);}
.auth-card button{
  width:100%; border:none; border-radius:10px; padding:11px 14px;
  background:var(--green); color:#fff; font-family:var(--font-body);
  font-size:14px; font-weight:700; cursor:pointer; transition:opacity .15s ease;
}
.auth-card button:hover{opacity:0.9;}
.auth-error{display:none; margin-top:12px; font-size:12px; color:var(--pink); font-weight:600;}

/* ===== App shell / header ===== */
.app-shell{display:flex; flex-direction:column; min-height:100vh;}
.app-header{
  display:flex; align-items:center; gap:28px;
  background:#fff; border-bottom:1px solid var(--border);
  padding:14px 30px; position:sticky; top:0; z-index:10;
  flex-wrap:wrap;
}
.brand-lockup{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:32px; height:32px; border-radius:9px; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0;
}
.brand-name{font-weight:800; font-size:14px; letter-spacing:-0.01em; display:flex; flex-direction:column; line-height:1.3;}
.brand-name small{font-weight:600; font-size:9.5px; letter-spacing:0.06em; color:var(--text-faint);}
.header-nav{display:flex; gap:3px; flex-wrap:wrap; margin-left:8px;}
.nav-item{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:10px; font-size:13.5px; font-weight:500;
  color:var(--text-dim); cursor:pointer; border:none; background:none;
  font-family:var(--font-body); transition:background .15s ease, color .15s ease;
}
.nav-item svg{width:16px; height:16px; flex-shrink:0; opacity:0.75;}
.nav-item:hover{background:#f6f7fa; color:var(--text);}
.nav-item.active{background:var(--green-pastel); color:var(--green); font-weight:700;}
.nav-item.active svg{opacity:1;}
.aside-foot{margin-left:auto; display:flex; align-items:center; gap:14px;}
.aside-caption{font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.06em; color:var(--text-faint);}
.source-mini{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); font-weight:600;}
.source-mini i{width:7px; height:7px; border-radius:50%; background:#d0d5dd; display:inline-block;}
.source-mini i.ok{background:#2ecc71;}
.source-mini i.pending{background:#f5a623;}
.source-mini span{color:var(--text-faint); font-weight:500;}
.aside-version{font-family:var(--font-mono); font-size:10px; color:var(--text-faint);}

.workspace{flex:1;}
.main{max-width:1320px; margin:0 auto; padding:26px 30px 60px 30px;}
.topbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:18px;}
.breadcrumb{font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; color:var(--text-faint); font-weight:600; margin-bottom:6px;}
.page-title{font-size:22px; font-weight:800; letter-spacing:-0.01em; margin-bottom:4px;}
.page-subtitle{font-size:13px; color:var(--text-dim);}

/* ===== Buttons / chips ===== */
.refresh-btn{
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--border); border-radius:9px;
  background:#fff; color:var(--text); padding:8px 13px;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.refresh-btn:hover{border-color:var(--green); background:#f4f9f5;}
.apply-btn{
  border:none; border-radius:9px; background:var(--green); color:#fff;
  padding:8px 14px; font-family:var(--font-body); font-size:12.5px; font-weight:700; cursor:pointer;
}
.apply-btn:hover{opacity:0.9;}
.refresh-status{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-bottom:10px; min-height:14px;}

/* ===== Platform pills (screenshot style) ===== */
.platform-filter,.date-filter{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.filter-label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; color:var(--text-faint); font-weight:600;}
.platform-pills,.preset-chips{display:flex; gap:8px; flex-wrap:wrap;}
.platform-pill{
  font-family:var(--font-body); font-size:12.5px; font-weight:700;
  padding:7px 16px; border-radius:999px; cursor:pointer; border:none;
  color:#fff; opacity:0.55; transition:opacity .15s ease, transform .1s ease;
}
.platform-pill.active{opacity:1;}
.platform-pill:hover{opacity:0.85;}
.platform-pill.tumu{background:#2b2f36;}
.platform-pill.trendyol{background:var(--orange);}
.platform-pill.website{background:var(--green);}

.chip{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:9px; background:#f4f6fb; color:var(--text-dim);
  border:1px solid transparent; cursor:pointer; transition:all .15s ease;
}
.chip:hover{background:#ebeef3;}
.chip.active{background:var(--green); color:#fff;}
.daterange{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:6px 8px; box-shadow:var(--shadow);}
.daterange input[type=date]{border:none; outline:none; background:transparent; font-family:var(--font-mono); font-size:12.5px; color:var(--text); padding:4px 2px; width:118px;}
.daterange .sep{color:var(--text-faint); font-size:12px;}

/* ===== Views ===== */
.view{display:none;}
.view.active{display:block; animation:fade .3s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.info-note{margin-top:22px; padding:16px 18px; background:#fafbfc; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); line-height:1.7;}
.info-note b{color:var(--text-dim);}
.info-note.demo-note{border-color:#f5deb0; background:#fffaf0; color:#8a6d1f; margin-top:0; margin-bottom:20px;}
.info-note.demo-note b{color:#8a6d1f;}

/* ===== KPI cards ===== */
.kpi-row{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px;}
.kpi-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px 18px; box-shadow:var(--shadow);}
.kpi-label{font-size:12px; color:var(--text-dim); font-weight:500; margin-bottom:10px;}
.kpi-value{font-size:21px; font-weight:800; letter-spacing:-0.01em; color:var(--text);}
.kpi-value.highlight{color:var(--green);}
.kpi-value.warn{color:var(--pink);}

/* ===== Cards / grid ===== */
.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-bottom:18px;}
.card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.card-title{font-size:14.5px; font-weight:700; color:var(--text);}
.chart-wrap{position:relative; height:250px;}

.section-head{display:flex; align-items:baseline; justify-content:space-between; margin:26px 0 14px 0;}
.section-title{font-size:16px; font-weight:800; letter-spacing:-0.01em;}
.section-note{font-size:12px; color:var(--text-faint); font-family:var(--font-mono);}

/* ===== Breakdown rows ===== */
.bd-list{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:6px 22px; box-shadow:var(--shadow);}
.bd-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border);}
.bd-row:last-child{border-bottom:none;}
.bd-dot{width:10px; height:10px; border-radius:3px; flex-shrink:0;}
.bd-name{font-weight:600; font-size:13.5px; width:150px; flex-shrink:0;}
.bd-track{flex:1; height:8px; background:#f1f3f7; border-radius:5px; overflow:hidden;}
.bd-fill{height:100%; border-radius:5px;}
.bd-stats{display:flex; gap:18px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); width:380px; justify-content:flex-end; flex-shrink:0;}
.bd-stats b{color:var(--text); font-weight:600;}

/* ===== Tables ===== */
.table-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; overflow-x:auto;}
table{width:100%; border-collapse:collapse;}
thead th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); text-align:right; padding:14px 16px 11px 16px; border-bottom:1px solid var(--border); font-weight:500; background:#fafbfc; white-space:nowrap;}
thead th:first-child{text-align:left;}
tbody td{padding:12px 16px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:12.5px; text-align:right; color:var(--text-dim); white-space:nowrap;}
tbody td:first-child{text-align:left; font-family:var(--font-body); color:var(--text); white-space:normal; font-weight:600;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:#fafbfc;}
.revenue-cell{color:var(--text) !important; font-weight:700 !important;}
.profit-cell{font-weight:700 !important;}
.profit-cell.good{color:var(--green) !important;}
.profit-cell.bad{color:var(--pink) !important;}
.platform-pill-sm{display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.03em; padding:3px 9px; border-radius:999px; font-weight:700; color:#fff;}
.platform-pill-sm.trendyol{background:var(--orange);}
.platform-pill-sm.website{background:var(--green);}

/* ===== Order toolbar ===== */
.order-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.order-toolbar input[type=text]{flex:1; min-width:220px; border:1px solid var(--border); border-radius:10px; padding:9px 13px; font-family:var(--font-body); font-size:13px; outline:none;}
.order-toolbar input[type=text]:focus{border-color:var(--green);}

/* ===== Cost entry ===== */
.cost-platform-tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.cost-tab{border:1px solid var(--border); background:#fff; color:var(--text-dim); border-radius:8px; padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer;}
.cost-tab.active{background:var(--green); color:#fff; border-color:var(--green);}
.cost-toolbar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
#costTable input[type="number"], #costTable input[type="text"]{
  width:100%; min-width:90px; border:1px solid var(--border); border-radius:6px;
  padding:6px 8px; font-family:var(--font-mono); font-size:12.5px; background:#fbfbfc; text-align:right;
}
#costTable td:nth-child(2) input[type="text"]{text-align:left;}
#costTable input:focus{outline:none; border-color:var(--green); background:#fff;}
.cost-remove-btn{border:none; background:none; color:#c0392b; cursor:pointer; font-size:16px; line-height:1;}
#costTable td{vertical-align:middle;}

/* ===== Settings ===== */
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.settings-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);}
.settings-card-head{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.settings-card-head .platform-pill-sm{font-size:11px; padding:5px 12px;}
.settings-card-head h3{font-size:15px; font-weight:800;}
.settings-field{margin-bottom:14px;}
.settings-field label{display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:6px;}
.settings-field .field-row{display:flex; align-items:center; gap:8px;}
.settings-field input{width:100%; border:1px solid var(--border); border-radius:9px; padding:9px 12px; font-family:var(--font-mono); font-size:13px; outline:none;}
.settings-field input:focus{border-color:var(--green);}
.settings-field .unit{font-size:12.5px; color:var(--text-faint); font-weight:600; white-space:nowrap;}
.settings-saved-note{font-family:var(--font-mono); font-size:11px; color:var(--green); margin-top:4px; min-height:14px;}

@media (max-width:1100px){
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .settings-grid{grid-template-columns:1fr;}
  .header-nav{order:3; width:100%;}
}
::-webkit-scrollbar{height:8px; width:8px;}
::-webkit-scrollbar-thumb{background:#dde1e7; border-radius:4px;}