/* ═══════════════════════════════════════
   BOM 投研 · Design System v2
   ═══════════════════════════════════════ */

/* ─── Reset & Variables ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --sidebar-w:260px;
  --bg:#f4f5f9;
  --surface:#ffffff;
  --surface-alt:#eef0f5;
  --surface-hover:#f8f9fb;
  --sidebar-bg:#f0f1f5;
  --sidebar-surface:#e6e8ef;
  --sidebar-hover:#dcdfe8;
  --sidebar-text:#334155;
  --sidebar-text-dim:#94a3b8;
  --border:#e4e7ef;
  --border-light:#eef0f5;
  --red:#dc2626;
  --red-light:#fef1f1;
  --red-mid:#fde8e8;
  --red-dim:#b91c1c;
  --blue:#2563eb;
  --blue-light:#eef2ff;
  --green:#16a34a;
  --green-light:#f0fdf4;
  --amber:#d97706;
  --amber-light:#fffbeb;
  --text:#0f172a;
  --text-secondary:#475569;
  --text-dim:#94a3b8;
  --radius:10px;
  --radius-sm:6px;
  --radius-xs:4px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 4px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
  --font-sans:'Noto Sans SC','Inter',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

html,body{height:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;
}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.hidden{display:none!important}

/* ═══════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--sidebar-bg);
  display:flex;flex-direction:column;
  height:100vh;position:sticky;top:0;
  overflow-y:auto;
  border-right:1px solid var(--border);
  z-index:10;
}

/* Brand */
.sb-brand{
  display:flex;align-items:center;gap:10px;
  padding:22px 20px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sb-brand-icon{
  width:30px;height:30px;
  background:linear-gradient(135deg,var(--red),var(--red-dim));
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;font-weight:800;
}
.sb-brand-text{
  font-size:15px;font-weight:700;
  color:var(--text);
}
.sb-brand-ver{
  margin-left:auto;
  font-size:9px;color:var(--text-dim);
  font-weight:600;letter-spacing:.5px;
  background:var(--sidebar-surface);
  padding:2px 7px;border-radius:3px;
}

/* Sections */
.sb-sec{padding:14px 16px 0;flex-shrink:0}
.sb-label{
  font-size:9px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:0 6px 9px 6px;
}

/* Input */
.sb-input{display:flex;gap:4px}
.sb-input input{
  flex:1;min-width:0;
  padding:8px 10px;font-size:12px;font-family:var(--font-sans);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xs);color:var(--text);outline:none;
  transition:border-color .15s;
}
.sb-input input:focus{border-color:var(--red)}
.sb-input input::placeholder{color:var(--text-dim)}
.sb-input button{
  padding:8px 14px;font-size:12px;font-weight:600;font-family:var(--font-sans);
  background:var(--red);color:#fff;border:none;
  border-radius:var(--radius-xs);cursor:pointer;
  transition:background .15s;white-space:nowrap;
}
.sb-input button:hover{background:var(--red-dim)}
.sb-input button:disabled{background:var(--text-dim);cursor:not-allowed}

/* Sample tags */
.sb-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.sb-tag{
  font-size:10px;padding:3px 9px;border-radius:10px;
  border:1px solid var(--border);
  background:transparent;color:var(--text-dim);
  font-family:var(--font-sans);cursor:pointer;
  transition:all .15s;
}
.sb-tag:hover{border-color:var(--red);color:var(--red);background:var(--red-light)}

/* Sector info */
.sb-sector{
  background:linear-gradient(135deg,var(--sidebar-surface),rgba(220,38,38,.04));
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  display:flex;align-items:center;gap:10px;
}
.sb-sector-inner{flex:1;min-width:0}
.sb-sector-name{
  font-size:14px;font-weight:700;color:var(--text);
  display:block;line-height:1.3;
}
.sb-sector-time{
  font-size:10px;color:var(--text-dim);
  font-family:var(--font-mono);
}
.sb-sector-badge{
  font-size:9px;font-weight:700;
  padding:2px 10px;border-radius:10px;
  background:var(--red-light);color:var(--red);
  border:1px solid var(--red-mid);
  flex-shrink:0;
}

/* Steps */
.sb-steps{display:flex;flex-direction:column;gap:0;padding:0}
.sb-step{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius-xs);
  font-size:12px;color:var(--text-dim);
  transition:all .2s var(--ease);
  position:relative;
}
.sb-step.active{color:var(--text);background:var(--sidebar-hover)}
.sb-step.done{color:var(--text-secondary)}
.sb-step-dot{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;flex-shrink:0;
  background:var(--surface-alt);
  border:1.5px solid var(--border);
  color:var(--text-dim);
  transition:all .25s var(--ease);
}
.sb-step.active .sb-step-dot{
  background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 0 12px rgba(220,38,38,.35);
  animation:pulse-dot 2s infinite;
}
.sb-step.done .sb-step-dot{
  background:var(--green);border-color:var(--green);color:#fff;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 10px rgba(220,38,38,.3)}
  50%{box-shadow:0 0 18px rgba(220,38,38,.5)}
}
.sb-step-line{
  position:absolute;left:26px;top:26px;bottom:-2px;
  width:1px;background:var(--border);
}
.sb-step:last-child .sb-step-line{display:none}

/* Progress bar */
.sb-progress{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 10px}
.sb-progress-track{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.sb-progress-fill{height:100%;background:var(--red);border-radius:2px;transition:width .5s var(--ease);width:0%}
.sb-progress-text{font-size:10px;color:var(--text-dim);font-family:var(--font-mono);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}

/* Navigation */
.sb-nav{display:flex;flex-direction:column;gap:2px}
.sb-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--radius-xs);
  font-size:13px;color:var(--text-secondary);
  text-decoration:none;cursor:pointer;
  transition:all .12s;
  position:relative;
}
.sb-nav-item:hover{background:var(--sidebar-hover);color:var(--text)}
.sb-nav-item.active{background:var(--sidebar-hover);color:var(--text)}
.sb-nav-item.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;
  width:2px;background:var(--red);border-radius:1px;
}
.sb-nav-item .nav-icon{opacity:.5;flex-shrink:0;transition:opacity .12s}
.sb-nav-item:hover .nav-icon,.sb-nav-item.active .nav-icon{opacity:1}

/* Footer */
.sb-spacer{flex:1;min-height:8px}
.sb-footer{
  padding:12px 20px 18px;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:4px;flex-shrink:0;
}
.sb-fbtn{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-dim);
  cursor:pointer;padding:4px 0;transition:color .12s;
  background:none;border:none;font-family:var(--font-sans);
  width:100;text-align:left;
}
.sb-fbtn:hover{color:var(--text-secondary)}
.sb-fbtn svg{opacity:.5;flex-shrink:0}
.sb-fver{font-size:9px;color:var(--text-dim);margin-top:2px}

/* ═══════════════════════════════════════
   MAIN
   ═══════════════════════════════════════ */
.main{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;
}
.main-inner{
  padding:28px 36px 60px;
  max-width:1240px;
}

/* ─── View Transitions ─── */
.view{animation:fadeSlideIn .35s var(--ease) both}
@keyframes fadeSlideIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─── Welcome (persistent header) ─── */
.welcome{
  text-align:center;
  padding:36px 20px 32px;
  max-width:640px;margin:0 auto 24px;
  border-bottom:1.5px solid var(--border);
}
.welcome-icon{
  width:56px;height:56px;margin:0 auto 20px;
  background:linear-gradient(135deg,var(--red),var(--red-dim));
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#fff;font-weight:800;
}
.welcome-title{font-size:26px;font-weight:800;color:var(--text);margin-bottom:8px}
.welcome-desc{font-size:14px;color:var(--text-secondary);margin-bottom:32px}
.welcome-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;text-align:left}
.welcome-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
}
.wc-num{font-size:28px;font-weight:800;color:var(--red);margin-bottom:6px;font-family:var(--font-mono);line-height:1}
.wc-title{font-size:14px;font-weight:600;margin-bottom:4px}
.wc-desc{font-size:12px;color:var(--text-dim);line-height:1.5}

/* ─── Welcome Progress Bar ─── */
.wl-progress{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light)}
.wl-prog-track{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:8px}
.wl-prog-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--red-dim));border-radius:2px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.wl-prog-labels{display:flex;justify-content:space-between;padding:0 2px}
.wl-prog-lbl{font-size:10px;font-weight:600;color:var(--text-dim);letter-spacing:.3px;transition:color .3s}
.wl-prog-lbl.active{color:var(--red)}
.wl-prog-lbl.done{color:var(--green)}

/* ─── Section ─── */
.sec{margin-top:28px}
.sec-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:8px;margin-bottom:16px;
  border-bottom:1.5px solid var(--border);
}
.sec-head h2{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.4px;text-transform:uppercase}
.sec-note{font-size:11px;color:var(--text-dim);margin-left:auto;font-weight:500}

/* ─── Overview Card ─── */
.ov-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.ov-card::before{
  content:'';position:absolute;top:0;left:0;
  width:4px;height:100%;
  background:linear-gradient(180deg,var(--red),var(--red-dim));
}
.ov-card-body{padding:22px 26px}
.ov-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ov-sector{font-size:21px;font-weight:800;color:var(--text)}
.ov-tag{
  font-size:10px;font-weight:700;
  padding:2px 10px;border-radius:10px;
  background:var(--red-light);color:var(--red);
  border:1px solid var(--red-mid);
}
.ov-desc{font-size:13px;color:var(--text-secondary);line-height:1.75}

/* ─── Chain Flow ─── */
.chain-flow{display:flex;gap:0;align-items:stretch;margin:0 -4px}
.flow-col{flex:1;min-width:0;padding:0 4px}
.flow-col-header{
  text-align:center;font-size:10px;font-weight:700;letter-spacing:2px;
  padding:8px 0;margin-bottom:10px;text-transform:uppercase;
  position:relative;
}
.flow-col-header::after{
  content:'';position:absolute;bottom:0;left:25%;right:25%;
  height:2px;border-radius:1px;
}
.flow-col.upstream .flow-col-header{color:var(--red)}
.flow-col.upstream .flow-col-header::after{background:var(--red)}
.flow-col.midstream .flow-col-header{color:var(--blue)}
.flow-col.midstream .flow-col-header::after{background:var(--blue)}
.flow-col.downstream .flow-col-header{color:var(--amber)}
.flow-col.downstream .flow-col-header::after{background:var(--amber)}

.flow-cards{display:flex;flex-direction:column;gap:6px}
.flow-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;
  cursor:pointer;transition:all .2s var(--ease);position:relative;
}
.flow-card::after{
  content:'→ 详情';position:absolute;right:12px;bottom:10px;
  font-size:9px;color:var(--text-dim);opacity:0;transition:all .2s var(--ease);
}
.flow-card:hover{
  border-color:var(--red);box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.flow-card:hover::after{opacity:1;color:var(--red)}
.flow-card:active{transform:translateY(0)}
.flow-card-name{font-size:13px;font-weight:600;margin-bottom:2px;padding-right:40px}
.flow-card-desc{font-size:11px;color:var(--text-dim);line-height:1.45;margin-bottom:7px}
.flow-card-scores{display:flex;gap:3px;flex-wrap:wrap}

/* Score Pill */
.sp{
  font-size:9px;font-weight:700;padding:1px 7px;border-radius:3px;
  font-family:var(--font-mono);letter-spacing:.2px;
}
.sp-1{background:var(--red-light);color:var(--red)}       /* high */
.sp-2{background:var(--amber-light);color:var(--amber)}   /* mid */
.sp-3{background:var(--surface-alt);color:var(--text-dim)} /* low */
.sp-4{background:var(--blue-light);color:var(--blue)}      /* supply */

/* ─── Score Bars ─── */
.sc-bars{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.sc-item{
  padding:16px 22px;border-bottom:1px solid var(--border-light);
}
.sc-item:last-child{border-bottom:none}
.sc-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.sc-label{font-size:12px;font-weight:600;width:44px;flex-shrink:0;color:var(--text-secondary)}
.sc-track{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.sc-fill{
  height:100%;border-radius:3px;
  transition:width 1.2s var(--ease);
  position:relative;
}
.sc-fill::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18));
  border-radius:0 3px 3px 0;
}
.sc-val{font-size:12px;font-weight:700;width:28px;text-align:right;font-family:var(--font-mono);color:var(--text);font-variant-numeric:tabular-nums}
.sc-note{font-size:11px;color:var(--text-dim);margin:2px 0 0 54px;line-height:1.4}

/* ─── Stock Table ─── */
.tbl-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.tbl{width:100%;table-layout:fixed;border-collapse:collapse}
.tbl th{
  padding:10px 18px;font-size:10px;font-weight:700;text-align:left;
  letter-spacing:.6px;text-transform:uppercase;
  background:var(--surface-alt);color:var(--text-secondary);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
#stockTable .tbl th:nth-child(1){width:15%}
#stockTable .tbl th:nth-child(2){width:10%}
#stockTable .tbl th:nth-child(3){width:16%}
#stockTable .tbl th:nth-child(4){width:37%}
#stockTable .tbl th:nth-child(5){width:22%}
#dtStocksTbl .tbl th:nth-child(1){width:18%}
#dtStocksTbl .tbl th:nth-child(2){width:12%}
#dtStocksTbl .tbl th:nth-child(3){width:45%}
#dtStocksTbl .tbl th:nth-child(4){width:25%}
.tbl td{
  padding:11px 14px;font-size:13px;
  border-bottom:1px solid var(--border-light);
  transition:background .1s;
  word-break:break-word;
}
.tbl td:nth-child(1),
.tbl td:nth-child(2){white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--surface-hover)}
.tbl-code{font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}
.tbl-seg{
  font-size:10px;font-weight:600;
  padding:2px 9px;border-radius:10px;
  background:var(--red-light);color:var(--red);
  white-space:nowrap;display:inline-block;
}
.tbl-adv{font-size:12px;color:var(--text-secondary);line-height:1.5}
.tbl-match{font-size:12px;font-weight:600;color:var(--green);white-space:nowrap}

/* ─── Detail View ─── */
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius-xs);
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-secondary);font-size:12px;font-weight:500;
  font-family:var(--font-sans);cursor:pointer;transition:all .12s;
  margin-bottom:20px;
}
.back-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-light)}
.back-btn svg{width:14px;height:14px}

.dt-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:22px;
}
.dt-name{font-size:25px;font-weight:800;color:var(--text)}
.dt-tier{
  font-size:10px;font-weight:700;
  padding:3px 12px;border-radius:10px;
  background:var(--surface-alt);border:1px solid var(--border);
  letter-spacing:.5px;
}
.dt-scores{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:18px;
}
.dt-sc{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.dt-sc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
}
.dt-sc:nth-child(1)::before{background:var(--red)}
.dt-sc:nth-child(2)::before{background:var(--green)}
.dt-sc:nth-child(3)::before{background:var(--red)}
.dt-sc:nth-child(4)::before{background:var(--amber)}
.dt-sc-label{
  font-size:10px;font-weight:700;color:var(--text-dim);
  margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase;
}
.dt-sc-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin-bottom:7px}
.dt-sc-fill{height:100%;border-radius:3px;transition:width 1.2s var(--ease);position:relative}
.dt-sc-fill::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:16px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15));
}
.dt-sc-row{display:flex;justify-content:space-between;font-size:12px;position:relative}
.dt-sc-val{font-weight:700;font-family:var(--font-mono);color:var(--text);font-variant-numeric:tabular-nums}
.dt-sc-ck{font-weight:600}
.dt-sc-ck.pass{color:var(--green)}
.dt-sc-ck.fail{color:var(--text-dim)}
.dt-stock-count{font-weight:400;font-size:11px;color:var(--text-dim);margin-left:6px}

.dt-block{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  margin-bottom:16px;box-shadow:var(--shadow);
}
.dt-block-inner{padding:20px 24px}
.dt-block-title{
  font-size:10px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--red);
  margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.dt-block-body{font-size:13px;color:var(--text-secondary);line-height:1.85}

/* ─── History ─── */
.history-section{
  margin-top:24px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 24px;
  box-shadow:var(--shadow);
}
.history-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
}
.history-head h3{font-size:14px;font-weight:700}
.history-clear{
  font-size:11px;color:var(--text-dim);background:none;border:none;
  cursor:pointer;font-family:var(--font-sans);padding:2px 8px;border-radius:3px;
}
.history-clear:hover{color:var(--red);background:var(--red-light)}
.history-list{display:flex;flex-direction:column;gap:4px}
.history-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-radius:var(--radius-sm);
  background:var(--bg);border:1px solid var(--border-light);
  cursor:pointer;transition:all .12s;
}
.history-item:hover{border-color:var(--red);background:var(--red-light)}
.history-item-name{font-size:13px;font-weight:500}
.history-item-time{font-size:11px;color:var(--text-dim)}
.history-empty{
  text-align:center;padding:24px;color:var(--text-dim);font-size:13px;
}

/* ─── Skeleton Loading ─── */
.skel{background:linear-gradient(90deg,var(--surface-alt) 25%,var(--border-light) 50%,var(--surface-alt) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}
@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}
.skel-line{height:14px;margin-bottom:8px;width:100%}
.skel-line:last-child{width:60%}

/* ─── Error ─── */
.error-container{
  text-align:center;padding:60px 20px;
}
.error-container .err-icon{font-size:40px;margin-bottom:12px;opacity:.5}
.error-container .err-title{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--red)}
.error-container .err-msg{font-size:13px;color:var(--text-dim);margin-bottom:20px}
.error-container .err-btn{
  padding:8px 20px;font-size:13px;font-weight:600;font-family:var(--font-sans);
  background:var(--red);color:#fff;border:none;border-radius:var(--radius-xs);
  cursor:pointer;
}
.error-container .err-btn:hover{background:var(--red-dim)}

/* ─── Stagger classes ─── */
.d1{animation-delay:40ms}
.d2{animation-delay:90ms}
.d3{animation-delay:140ms}
.d4{animation-delay:190ms}
.d5{animation-delay:240ms}

/* ─── Loading placeholder ─── */
.loading-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px;margin-bottom:6px;
}
.loading-scores{display:flex;gap:4px;margin-top:6px}
.loading-scores .skel{width:32px;height:16px}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:860px){
  body{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--border)}
  .sb-brand{padding:12px 16px}
  .sb-sec{padding:8px 16px}
  .sb-sector{display:none}
  .sb-footer{display:none}
  .sb-spacer{display:none}
  .main{height:auto}
  .main-inner{padding:16px}
  .welcome-cards{grid-template-columns:1fr}
  .welcome{padding:32px 16px}
}
@media(max-width:640px){
  .chain-flow{flex-direction:column}
  .dt-scores{grid-template-columns:1fr}
  .tbl th,.tbl td{padding:8px 10px;font-size:12px}
  .hide-mobile{display:none}
  .main-inner{padding:12px}
  .ov-card-body{padding:16px 18px}
  .ov-sector{font-size:18px}
}