@import url("./handoff-theme.css");

/* =====================================================================
   Unified Light Theme (white content + dark sidebar)
   Drop-in replacement for assets/theme.css
   Works for: index.html (自运营) and managed.html (全托管)
   ===================================================================== */

/* ------ CSS Variables (Light) ------ */
:root{
  --bg: #f3f4f6;                   /* app background */
  --panel: #ffffff;                /* white panels */
  --panel-border: #e5e7eb;         /* light border */
  --brand: #1e40af;                /* deep brand blue */
  --blue: #2563eb;                 /* accent blue */
  --orange: #f97316;               /* accent orange */
  --text: #111827;                 /* primary text (very dark) */
  --muted: #6b7280;                /* muted gray text */
  --thead-bg: #f8fafc;             /* table head */
  --row-odd: #ffffff;              /* zebra row odd */
  --row-even: #f9fafb;             /* zebra row even */
  --row-hover: #eef2f7;            /* row hover */
  --shadow: 0 8px 24px rgba(16,24,40,.06);
  --nav-bg: #e0e7ff;               /* header background tint */
  --nav-hover: #dbeafe;            /* nav item hover */
}

*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* ------ Top Navigation ------ */
.header{
  background:var(--nav-bg);
  color:var(--text);
  position:sticky;
  top:0;
  z-index:2000;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.logo-title{font-weight:700;font-size:16px;color:var(--text);display:flex;align-items:center;gap:8px;}
.logo-title .site-logo{height:32px;}
.header-center{flex:1;display:flex;justify-content:center;}
.header-center .platform-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  max-width:100%;
}
.header-center .platform-nav>li{
  position:relative;
  white-space:nowrap;
}
.header-center .platform-nav>li>a{
  color:var(--text);
  text-decoration:none;
  padding:8px 14px;
  border-radius:8px;
  display:block;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  transition:all 0.2s ease;
  position:relative;
}
.header-center .platform-nav>li>a:hover{
  background:var(--nav-hover);
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.header-center .platform-nav>li.active>a{
  background:var(--brand);
  color:#fff;
  border:1px solid rgba(0,0,0,0.25);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.15);
}
/* gradient active states per platform */
.header-center .platform-nav>li.ali.active>a{
  background:linear-gradient(90deg,#ff6a00,#ffa100);
}
.header-center .platform-nav>li.amazon.active>a{
  background:linear-gradient(90deg,#ff9900,#ffb84d);
}
.header-center .platform-nav>li.tiktok.active>a{
  background:linear-gradient(90deg,#25f4ee,#fe2c55);
}
.header-center .platform-nav>li.temu.active>a{
  background:linear-gradient(90deg,#ff8c00,#ff5a00);
}
.header-center .platform-nav>li.ozon.active>a{
  background:linear-gradient(90deg,#0052cc,#0066ff);
}
.header-center .platform-nav>li.lazada.active>a{
  background:linear-gradient(90deg,#0f146d,#1a237e);
}
.header-center .platform-nav>li.shopee.active>a{
  background:linear-gradient(90deg,#ee4d2d,#ff6f61);
}
.header-center .platform-nav>li.wildberries.active>a{
  background:linear-gradient(90deg,#9b59b6,#8e44ad);
}
.header .dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  color:#111;
  min-width:140px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  z-index:2100;
  list-style:none;
  margin:4px 0 0 0;
  padding:4px 0;
  border:1px solid rgba(0,0,0,0.08);
}
.header .dropdown ul{list-style:none;margin:0;padding:0;}
.header .dropdown li{position:relative;}
.header .dropdown a{
  color:#111;
  text-decoration:none;
  padding:8px 16px;
  display:block;
  font-size:14px;
  transition:background 0.15s ease;
}
.header .dropdown a:hover{background:#f3f4f6;}
.header .dropdown li.active>a{background:var(--brand);color:#fff;}
.header-center .platform-nav>li:hover>.dropdown{display:block !important;}
.header .dropdown li:hover>ul{display:block;}
.header .dropdown ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:0;
  background:#fff;
  min-width:140px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  z-index:2100;
  border:1px solid rgba(0,0,0,0.08);
}
/* 响应式设计 */
@media (max-width: 1200px) {
  .header-center .platform-nav {
    gap: 8px;
  }
  .header-center .platform-nav>li>a {
    padding: 6px 12px;
    font-size: 13px;
  }
}
@media (max-width: 768px) {
  .header-center {
    flex: 0 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .header-center .platform-nav {
    gap: 6px;
    padding: 0 8px;
  }
  .header-center .platform-nav>li>a {
    padding: 6px 10px;
    font-size: 12px;
  }
  .header .dropdown {
    position: fixed;
    left: auto;
    right: 8px;
    max-width: calc(100vw - 16px);
  }
}
.header .user-section{margin-left:0;}
.header .user-section a{color:var(--text);text-decoration:none;font-weight:700;}

/* ------ Module guard defaults ------ */
body:not(.module-access-ready) .floating-nav [data-module="orders"],
body:not(.module-access-ready) .floating-nav [data-module="finance"],
body:not(.module-access-ready) .floating-nav [data-module="advertising"],
body:not(.module-access-ready) .module-tabs [data-module="orders"],
body:not(.module-access-ready) .module-tabs [data-module="finance"],
body:not(.module-access-ready) .module-tabs [data-module="advertising"],
body:not(.module-access-ready) .sub-nav [data-module="orders"],
body:not(.module-access-ready) .sub-nav [data-module="finance"],
body:not(.module-access-ready) .sub-nav [data-module="advertising"],
body:not(.module-access-ready) [data-module-section="orders"],
body:not(.module-access-ready) [data-module-section="orders-support"],
body:not(.module-access-ready) [data-module-section="finance"],
body:not(.module-access-ready) [data-module-section="advertising"],
body:not(.module-access-ready) #orders,
body:not(.module-access-ready) #finance,
body:not(.module-access-ready) #ads,
body:not(.module-access-ready) [data-target="orders"],
body:not(.module-access-ready) [data-target="finance"],
body:not(.module-access-ready) [data-target="ads"],
body:not(.module-access-ready) [data-target="advertising"] {
  display: none !important;
}

body.module-access-ready:not(.module-authenticated) .floating-nav [data-module="finance"],
body.module-access-ready:not(.module-authenticated) .module-tabs [data-module="finance"],
body.module-access-ready:not(.module-authenticated) .sub-nav [data-module="finance"],
body.module-access-ready:not(.module-authenticated) [data-module-section="finance"],
body.module-access-ready:not(.module-authenticated) #finance,
body.module-access-ready:not(.module-authenticated) [data-target="finance"] {
  display: none !important;
}

/* ------ Sidebar ------ */
.sidebar{
  width:220px;
  background:#0f172a;
  color:#fff;
  padding:16px;
  height:100vh;
  overflow:auto;
  border-right:1px solid #1f2937;
  position:sticky; top:0; z-index:1000;
}
.sidebar.floating-nav{
  border-right:none;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  padding:24px;
  width:240px;
  height:auto;
  max-height:none;
  overflow:visible;
  position:sticky;
  top:24px;
  left:24px;
  align-self:flex-start;
}
.sidebar.floating-nav h3{
  font-size:18px;
  margin:0 0 16px;
  color:#e2e8f0;
}
.sidebar.floating-nav ul{ list-style:none; margin:0; padding:0 }
.sidebar.floating-nav>ul>li{ margin-bottom:12px }
.sidebar.floating-nav .submenu{
  display:none;
  margin-top:8px;
  padding-left:0;
  border-left:1px solid rgba(148,163,184,.25);
}
.sidebar.floating-nav .submenu li{ margin-bottom:6px; padding-left:12px; }
.sidebar.floating-nav .has-submenu.open>.submenu{ display:block }
.sidebar.floating-nav .has-submenu>a{ justify-content:space-between; align-items:center; }
.sidebar.floating-nav .has-submenu>a::after{
  content:'';
  width:10px;
  height:10px;
  border-right:2px solid rgba(226,232,240,.8);
  border-bottom:2px solid rgba(226,232,240,.8);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.sidebar.floating-nav .has-submenu.open>a::after{ transform:rotate(225deg); }
.sidebar.floating-nav a{ border-radius:10px; padding:8px 12px; }
.sidebar.floating-nav .has-submenu>a.active-group{ color:#fff; font-weight:600; background:rgba(37,99,235,.16); }
.sidebar.floating-nav a.active{ background:rgba(37,99,235,.2); color:#fff; }
.sidebar.floating-nav .has-submenu>.submenu a.active{ background:var(--brand); }
.sidebar h3{ margin:0 0 10px; font-size:16px }
.site-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.site-title{ display:flex; align-items:center; gap:6px; color:#f1f5f9; }
.site-header .site-icon{ width:20px; height:20px; color:#3b82f6; flex-shrink:0; }
.add-site-btn{ background:var(--brand); color:#fff; border:none; border-radius:4px; width:20px; height:20px; cursor:pointer; line-height:20px; text-align:center; }
.add-site-btn:hover{ background:#2563eb; }
.sidebar ul{ list-style:none; padding-left:0; margin:0 }
.sidebar li{ margin-bottom:10px }
.sidebar a{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#f1f5f9;
  font-size:14px;
  padding:6px 8px;
  border-radius:6px;
}
.sidebar a svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}
.sidebar a:hover{ color:#fff; background:#0b1a3b }
.sidebar .submenu{ list-style:none; padding-left:14px; display:none }
.sidebar .has-submenu>a{ cursor:pointer }
.sidebar .has-submenu.open .submenu{ display:block }
.sidebar .submenu a.active{ color:#fff; background:var(--brand) }
.sidebar .sub-nav{ list-style:none; padding-left:0; margin:0 }
.sidebar .sub-nav li{ margin-bottom:6px }
.sidebar .sub-nav a.active{ color:#fff; background:var(--brand) }

/* ------ Layout ------ */
.container, .layout{ display:flex; min-height:100vh }
.layout.has-floating-nav{
  position:relative;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:24px;
  padding:24px;
  box-sizing:border-box;
}
.layout.has-floating-nav .floating-nav{
  flex:0 0 240px;
  margin:0;
}
.layout.has-floating-nav .has-floating-nav-content{
  flex:1;
  min-width:0;
}
.main{
  flex:1; display:flex; flex-direction:column; gap:12px;
  padding:16px; background:#ffffff;
}
.main.has-floating-nav-content{ padding-left:0; }

/* generic paddings + panels */
.content-pad{ padding:12px }
.panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:12px;
  padding:12px;
  box-shadow: var(--shadow);
}
.controls{ display:flex; align-items:center; gap:8px }
/* upload section header */
.upload-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.user-area{margin-left:auto}
.sel, select, input[type="text"]{
  padding:6px 8px; border:1px solid var(--panel-border);
  border-radius:8px; background:#fff; color:var(--text);
}
.upload-btn, .btn{
  padding:6px 12px; border-radius:8px; border:1px solid var(--panel-border);
  background:#fff; color:var(--text); cursor:pointer;
}
.upload-btn:hover, .btn:hover{ background:#f8fafc }
input[type="file"]{ display:none }

.grid{ display:grid; gap:16px }
.grid-2{ grid-template-columns:repeat(2,1fr) }

/* Divider */
.divider{ height:1px; background:var(--panel-border); margin:8px 0 12px }

/* Table containers */
.table-section{ background:transparent; padding:15px }
.table-wrapper{ overflow:auto }
table.dataTable{ width:100% !important; }

/* compact table: smaller text and tighter cells */
table.dataTable,
table.dataTable th,
table.dataTable td{
  font-size:12px;
}
table.dataTable th,
table.dataTable td{
  padding:4px 6px;
}

@media (max-width: 1024px) {
  .layout { flex-direction:column }
  .sidebar {
    width:100%;
    position:static;
    height:auto;
    margin-bottom:16px;
  }
  .layout.has-floating-nav{
    flex-direction:column;
    gap:16px;
    padding:16px;
  }
  .layout.has-floating-nav .floating-nav{
    width:100%;
    margin:0;
    padding:16px;
    box-shadow:0 8px 20px rgba(15,23,42,.16);
  }
  .layout.has-floating-nav .has-floating-nav-content{
    width:100%;
  }
  .sidebar.floating-nav .has-submenu>a::after{ transform:rotate(135deg); }
  .sidebar.floating-nav .has-submenu.open>a::after{ transform:rotate(-45deg); }
}

@media (min-width: 1025px) {
  .layout.has-floating-nav .floating-nav{
    position:sticky;
    top:24px;
  }
  .layout.has-floating-nav .has-floating-nav-content{
    padding-left:0;
  }
}

/* ------ KPI Cards (managed.html) ------ */
.stat-card{
  background:var(--kpi-bg); border:1px solid var(--kpi-border);
  border-radius:calc(14px * var(--kpi-card-scale, 0.9));
  padding:calc(8px * var(--kpi-card-scale, 0.9)) calc(10px * var(--kpi-card-scale, 0.9));
  box-shadow:var(--shadow);
}
.stat-card h4{ margin:0 0 calc(6px * var(--kpi-card-scale, 0.9)); color:#334155; font-size:calc(11px * var(--kpi-font-scale, var(--kpi-card-scale, 1))); letter-spacing:calc(.2px * var(--kpi-font-scale, var(--kpi-card-scale, 1))) }
.stat-card p{ margin:0; color:#0f172a; font-size:calc(24px * var(--kpi-font-scale, var(--kpi-card-scale, 1))); font-weight:900; line-height:1.1 }
#kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(calc(180px * var(--kpi-card-scale, 0.9)),1fr)); gap:calc(8px * var(--kpi-card-scale, 0.9)) }

/* ------ Tables: DataTables High-Contrast Light ------ */
#report_wrapper{ background:#fff; border-radius:12px; padding:8px; border:1px solid var(--panel-border); box-shadow:var(--shadow) }

/* thead + fixed header */
table.dataTable thead th{
  background:var(--thead-bg) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--panel-border) !important;
  font-weight:800;
}
.fixedHeader-floating, .fixedHeader-floating th{
  background:var(--thead-bg) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--panel-border) !important;
}

/* body cells */
table.dataTable tbody td,
table.dataTable thead th{
  border-color:var(--panel-border) !important;
}
table.dataTable tbody td{
  color:var(--text) !important;
}

/* zebra + hover */
table.dataTable.stripe tbody tr:nth-child(odd){ background:var(--row-odd) !important }
table.dataTable.stripe tbody tr:nth-child(even){ background:var(--row-even) !important }
table.dataTable tbody tr:hover td{ background:var(--row-hover) !important }

/* links inside table */
#report a, #report a:visited{
  color:#1d4ed8; background:transparent; font-weight:700;
}
#report a:hover{ color:#1e3a8a; text-decoration:underline }

/* —— REMOVE first-column special background from old theme (fix asymmetry) —— */
#report.dataTable tbody td:first-child,
.DTFC_Cloned tbody td{
  background:transparent !important;
  color:var(--text) !important;
  border-color:var(--panel-border) !important;
  font-weight:700;
}
#report thead th:first-child{
  background:var(--thead-bg) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--panel-border) !important;
  font-weight:800 !important;
}
#report.dataTable tbody tr:hover td:first-child{ background:var(--row-hover) !important }

/* DataTables header buttons/sort state */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc{
  background:var(--thead-bg) !important;
  color:#0f172a !important;
}

/* scroll shadows protection (optional) */
.dataTables_scrollBody{ border-top:1px solid var(--panel-border) }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; font-size:12px; border-radius:999px;
  color:#0f172a; background:#e0e7ff;
}

/* Misc small improvements */
.small{ font-size:12px; color:var(--muted) }
.label{ color:#334155; font-weight:600 }


/* ====== Self-Operated KPI (always one line) ======
   Works with .kpi container and .card items used by index.html (自运营)
   Guaranteed single row via flex + horizontal scroll on narrow screens.
*/
.kpi{
  display:flex;
  gap:calc(12px * var(--kpi-card-scale, 0.9));
  padding:0 calc(12px * var(--kpi-card-scale, 0.9));
  margin:calc(10px * var(--kpi-card-scale, 0.9)) 0;
  overflow:auto;           /* allow horizontal scroll if viewport too narrow */
  -webkit-overflow-scrolling: touch;
}
.kpi::-webkit-scrollbar{ height:8px }
.kpi::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px }

.kpi .card{
  background:var(--kpi-bg);
  border:1px solid var(--kpi-border);
  border-radius:calc(14px * var(--kpi-card-scale, 0.9));
  padding:calc(12px * var(--kpi-card-scale, 0.9)) calc(14px * var(--kpi-card-scale, 0.9));
  min-width:calc(200px * var(--kpi-card-scale, 0.9));         /* keep readable width */
  box-shadow: var(--shadow);
  flex:0 0 1;              /* fixed width cards for single-row layout */
}
.kpi .card h4{ margin:0 0 calc(6px * var(--kpi-card-scale, 0.9)); color:#334155; font-size:calc(12px * var(--kpi-font-scale, var(--kpi-card-scale, 1))); letter-spacing:calc(.2px * var(--kpi-font-scale, var(--kpi-card-scale, 1))) }
.kpi .card p{ margin:0; color:#0f172a; font-size:calc(22px * var(--kpi-font-scale, var(--kpi-card-scale, 1))); font-weight:900; line-height:1.1 }
.kpi .card .sub{ margin-top:calc(4px * var(--kpi-card-scale, 0.9)); font-size:calc(12px * var(--kpi-font-scale, var(--kpi-card-scale, 1))); color:#6b7280 }
.kpi .card .delta{ margin-left:calc(6px * var(--kpi-card-scale, 0.9)); font-size:calc(12px * var(--kpi-font-scale, var(--kpi-card-scale, 1))); font-weight:700 }
.kpi .card .delta.up{ color:#10b981 }
.kpi .card .delta.down{ color:#ef4444 }

/* Optional: equal height cards */
.kpi .card{ display:flex; flex-direction:column; justify-content:center }


/* =============================
   0811B: KPI cards with light-gray background + visible segmented tabs
   ============================= */

/* New variable for KPI background */
:root{
  --kpi-bg: #f1f5f9;           /* darker KPI background */
  --kpi-border: #d1d5db;       /* matching darker border */
  --kpi-card-scale: 0.9;       /* KPI 缩放比例 */
  --kpi-font-scale: 0.85;      /* KPI 字体缩放比例 */
}

/* KPI: full-managed (#kpi .stat-card) */
#kpi .stat-card,
.kpi .card{
  border: none;
  box-shadow: var(--shadow);
  color: #fff;
}
#kpi .stat-card h4, #kpi .stat-card p,
.kpi .card h4, .kpi .card p{ color:#fff; }

/* Gradient backgrounds for KPI cards */
#kpi .stat-card:nth-child(1), .kpi .card:nth-child(1){
  background:linear-gradient(135deg,#1e3a8a,#1e40af);
}
#kpi .stat-card:nth-child(2), .kpi .card:nth-child(2){
  background:linear-gradient(135deg,#1e40af,#2563eb);
}
#kpi .stat-card:nth-child(3), .kpi .card:nth-child(3){
  background:linear-gradient(135deg,#0c4a6e,#0891b2);
}
#kpi .stat-card:nth-child(4), .kpi .card:nth-child(4){
  background:linear-gradient(135deg,#065f46,#059669);
}
#kpi .stat-card:nth-child(5), .kpi .card:nth-child(5){
  background:linear-gradient(135deg,#92400e,#d97706);
}
#kpi .stat-card:nth-child(6), .kpi .card:nth-child(6){
  background:linear-gradient(135deg,#991b1b,#dc2626);
}
#kpi .stat-card:nth-child(7), .kpi .card:nth-child(7){
  background:linear-gradient(135deg,#9d174d,#db2777);
}

#kpi .stat-card .sub{ margin-top:calc(4px * var(--kpi-card-scale, 0.9)); font-size:calc(12px * var(--kpi-font-scale, var(--kpi-card-scale, 1))); color:#f1f5f9; }
#kpi .stat-card .delta{ margin-left:calc(6px * var(--kpi-card-scale, 0.9)); font-size:calc(12px * var(--kpi-font-scale, var(--kpi-card-scale, 1))); font-weight:700; }
#kpi .stat-card .delta.up{ color:#bbf7d0; }
#kpi .stat-card .delta.down{ color:#fecaca; }

/* Override self-operated KPI sub/delta colors for contrast */
.kpi .card .sub{ color:#f1f5f9; }
.kpi .card .delta.up{ color:#bbf7d0; }
.kpi .card .delta.down{ color:#fecaca; }
.kpi .card a{ color:#fff; text-decoration:underline; }

/* Segmented tabs for "明细表 / 运营分析" (works for various markup) */
.tabs, .tab-group, .segmented, .btn-group.tabs, .switch-group{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.tabs .tab, .tab-group .tab, .segmented .tab,
.tabs button, .tab-group button, .segmented button, .btn-group.tabs .btn, .switch-group .btn{
  background: #fff;
  color: var(--text);
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.tabs .tab.active, .tab-group .tab.active, .segmented .tab.active,
.tabs button.active, .tab-group button.active, .segmented button.active,
.btn-group.tabs .btn.active, .switch-group .btn.active{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.tabs .tab:hover, .tab-group .tab:hover, .segmented .tab:hover,
.tabs button:hover, .tab-group button:hover, .segmented button:hover,
.btn-group.tabs .btn:hover, .switch-group .btn:hover{
  background:#f8fafc;
}

/* Ensure the group doesn't collapse */
.tabs:empty, .tab-group:empty, .segmented:empty, .btn-group.tabs:empty, .switch-group:empty{
  display:none;
}


/* Global loading overlay */
.loading-overlay{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(255,255,255,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:3000;
}
.loading-overlay .loading-box{ text-align:center; }
.loading-overlay .progress{ width:200px;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden; }
.loading-overlay .progress .bar{ width:0;height:100%;background:var(--brand);transition:width .3s ease; }
.loading-overlay .loading-text{ margin-top:12px;font-size:14px;color:#334155; }