/* HK MOMENTUM AI - design tokens & base styles (ported from the approved design) */
:root{
  --font:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Inter,system-ui,Arial,sans-serif;
  --bg:#f3f3f5;--bg-2:#ececef;--surface:#ffffff;--surface-2:#fafafb;--surface-3:#f6f6f8;
  --hover:rgba(0,0,0,.045);--active:rgba(0,0,0,.065);
  --border:rgba(0,0,0,.08);--border-2:rgba(0,0,0,.13);
  --text:#1b1b1f;--text-2:#5d5e66;--text-3:#8a8b92;
  --accent:#0a6cff;--accent-soft:rgba(10,108,255,.10);--accent-border:rgba(10,108,255,.28);
  --green:#12925e;--green-soft:rgba(18,146,94,.12);
  --red:#cf3b46;--red-soft:rgba(207,59,70,.12);
  --amber:#b7830a;--amber-soft:rgba(183,131,10,.13);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  --shadow-lg:0 10px 40px rgba(0,0,0,.12);
  --radius:12px;
}
[data-theme="dark"]{
  --bg:#0e0e10;--bg-2:#08080a;--surface:#18191c;--surface-2:#1f2024;--surface-3:#222327;
  --hover:rgba(255,255,255,.05);--active:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.09);--border-2:rgba(255,255,255,.15);
  --text:#f2f2f5;--text-2:#a7a8af;--text-3:#74757c;
  --accent:#3d8bff;--accent-soft:rgba(61,139,255,.15);--accent-border:rgba(61,139,255,.34);
  --green:#2fb37a;--green-soft:rgba(47,179,122,.16);
  --red:#e5555f;--red-soft:rgba(229,85,95,.16);
  --amber:#e0a71b;--amber-soft:rgba(224,167,27,.16);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 22px rgba(0,0,0,.38);
  --shadow-lg:0 16px 50px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.005em}
button,input,select,textarea{font-family:inherit;color:inherit}
::selection{background:var(--accent-soft)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
::-webkit-scrollbar-track{background:transparent}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
input::placeholder{color:var(--text-3)}
@keyframes omFade{from{opacity:0}to{opacity:1}}
@keyframes omSlide{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes omPop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes omScan{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes omPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes omSpin{to{transform:rotate(360deg)}}
[data-motion="off"] *{animation:none!important;transition:none!important}

/* shared component helpers */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.sect-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.h1{margin:0;font-size:31px;font-weight:700;letter-spacing:-.02em}
.sub{margin:6px 0 0;font-size:14px;color:var(--text-2)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  border-radius:10px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;
  box-shadow:0 2px 10px var(--accent-soft)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-2);
  background:transparent;border-radius:9px;cursor:pointer;font-weight:600;color:var(--text-2)}
.btn-ghost:hover{background:var(--hover)}
.spin{animation:omSpin 1s linear infinite}
select.ctl{appearance:none;width:100%;padding:10px 34px 10px 13px;font-size:14px;font-weight:600;
  border:1px solid var(--border-2);background:var(--surface-3);border-radius:10px;cursor:pointer;height:42px}
table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid thead th{background:var(--surface-2);color:var(--text-3);font-size:12px;font-weight:600;
  border-bottom:1px solid var(--border);white-space:nowrap}
.empty{padding:40px;text-align:center;color:var(--text-3);font-size:14px}
.demoBanner{background:var(--amber);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.03em;
  padding:7px 14px;border-radius:9px;display:flex;align-items:center;gap:8px;justify-content:center}

/* ====================== MOBILE / RESPONSIVE ====================== */
.hamburger{display:none}
.sidebar-backdrop{display:none}
@media (max-width:820px){
  /* header: show hamburger, hide the busy middle + secondary buttons */
  .hamburger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
    flex-shrink:0;border:1px solid var(--border);background:transparent;border-radius:9px;cursor:pointer;color:var(--text-2)}
  .hdr-mid{display:none !important}
  .hide-mobile{display:none !important}

  /* sidebar becomes a slide-in drawer */
  .app-sidebar{position:fixed !important;top:56px;left:0;bottom:0;width:250px !important;
    flex-basis:250px;z-index:60;transform:translateX(-100%);transition:transform 220ms ease;
    box-shadow:var(--shadow-lg)}
  .app-sidebar.open{transform:translateX(0)}
  .sidebar-backdrop.open{display:block;position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,.4);z-index:55}

  /* reduce page padding (page containers are the direct children of main) */
  main > div{padding-left:13px !important;padding-right:13px !important;padding-top:16px !important}
  main h1{font-size:23px !important}
  .card{border-radius:12px}

  /* stack grids by their inline template signature (!important beats inline) */
  main [style*="grid-template-columns:repeat(2,1fr)"],
  main [style*="grid-template-columns:repeat(3"],
  main [style*="1.45fr"],
  main [style*="1.5fr 1fr 1fr"],
  main [style*="1fr 1.05fr"],
  main [style*="220px 1fr"],
  main [style*="1fr 56px 1.25fr"]{grid-template-columns:1fr !important}
  main [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  main [style*="grid-template-columns:repeat(4"],
  main [style*="grid-template-columns:repeat(5"],
  main [style*="grid-template-columns:repeat(6"]{grid-template-columns:1fr 1fr !important}

  /* keep these compact grids 2-up - stacking them wastes a lot of height.
     div.<class> (0,1,2) outranks the main [style*=] rules above (0,1,1). */
  main div.reco-metrics,
  main div.ind-grid{grid-template-columns:1fr 1fr !important}

  /* scan controls stack full-width */
  main label[style*="min-width:150px"]{min-width:100% !important;flex-basis:100% !important}

  /* results-card header: stack title above the filter/refresh/CSV tools */
  .res-head{flex-direction:column !important;align-items:stretch !important;gap:10px !important}
  /* in column mode flex-basis means HEIGHT - keep children at natural height */
  .res-head > div{flex:0 0 auto !important}
  .res-tools{flex-wrap:wrap;width:100%}
  .res-tools > div:first-child{flex:1 1 100% !important;width:100%}
  .res-tools input{width:100% !important}
  .res-tools button{flex:1 1 auto;justify-content:center}
}
@media (max-width:480px){
  main [style*="grid-template-columns:repeat(4"],
  main [style*="grid-template-columns:repeat(5"],
  main [style*="grid-template-columns:repeat(6"]{grid-template-columns:1fr !important}
  main > div{padding-left:10px !important;padding-right:10px !important}
}