/*
 * Firsteck Gare · UI refinement layer
 * Shared by the public landing page, dashboard and upload workflow.
 */
:root{
  --workspace-bg:#f5f7fb;
  --surface-raised:#ffffff;
  --brand-line:#dbe5ff;
}
[data-theme=dark]{
  --workspace-bg:#0d1016;
  --surface-raised:#151821;
  --brand-line:#27375f;
}
body{background:var(--workspace-bg)}
:is(button,a,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px
}
.top{box-shadow:0 1px 0 rgba(20,22,28,.02)}
.top .wrap{max-width:1240px}
.brand .mark{box-shadow:0 5px 14px -7px color-mix(in srgb,var(--accent) 65%,transparent)}
.btn{box-shadow:0 6px 15px -10px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn.ghost,.iconbtn{box-shadow:none}
.appswitch{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;
  border:1px solid var(--border);border-radius:10px;color:var(--ink-2);
  background:var(--surface);font-size:12.5px;font-weight:600;white-space:nowrap
}
.appswitch:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--ink)}
.appswitch .ic{width:15px;height:15px;color:var(--accent)}

/* Landing page: clearer first viewport and more tactile product preview. */
.hero{padding-top:76px}
.hero p{color:var(--ink-2)}
.preview{border-color:var(--border-2);box-shadow:0 24px 70px -34px rgba(26,44,83,.4)}
.step,.fcard{border-color:var(--border-2)}
.step:hover{box-shadow:0 16px 38px -25px rgba(26,44,83,.38)}
.band{background:linear-gradient(120deg,#2459d6,#1677d8 64%,#0ea5b7)}

/* Dashboard: summary first, analysis second, filters immediately actionable. */
.head{padding-top:34px}
.head h1{font-size:30px}
.head p{color:var(--ink-2)}
.kpis{
  gap:12px;background:transparent;border:0;border-radius:0;overflow:visible
}
.kpi{
  position:relative;border:1px solid var(--border);border-radius:16px;padding:17px 18px;
  transition:transform .15s,border-color .15s,box-shadow .15s;overflow:hidden
}
.kpi::after{
  content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--accent);opacity:.16
}
.kpi.b2::after,.kpi.b6::after{background:var(--go);opacity:.28}
.kpi.b3::after,.kpi.b5::after{background:var(--val);opacity:.25}
.kpi:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:0 14px 30px -24px rgba(20,34,68,.55)}
.kpi .v{font-size:28px}
.charts{gap:12px}
.chart{border-color:var(--border-2);border-radius:16px}
.panel{
  border-color:var(--border-2);border-radius:16px;padding:17px 18px;
  box-shadow:0 8px 24px -26px rgba(20,34,68,.65)
}
.searchbox{position:relative;flex:1;min-width:220px}
.searchbox .search{width:100%;padding-right:42px}
.search-clear{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;
  display:none;place-items:center
}
.search-clear.show{display:grid}
.search-clear:hover{background:var(--surface-2);color:var(--ink)}
.search-clear .ic{width:15px;height:15px}
.chip{min-height:32px}
.chip.on{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
.bar{padding:2px 2px 12px}
.tablecard,.gcard{border-color:var(--border-2)}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--accent-weak)}
.gcard{transition:transform .14s,border-color .14s,box-shadow .14s}
.gcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -24px rgba(20,34,68,.55)}
.empty-action{display:inline-flex;margin-top:14px}
.drawer{width:min(560px,100%);max-width:100%}
.dwhead{padding-top:max(16px,env(safe-area-inset-top))}
.toast{bottom:max(24px,env(safe-area-inset-bottom))}

/* Upload flow: stronger selected and progress states. */
.card{border-color:var(--border-2)}
.drop{min-height:210px;justify-content:center}
.drop.selected{
  border-style:solid;border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-weak),var(--surface))
}
.drop.selected .di{background:var(--accent);color:#fff;border-color:var(--accent)}
.selected-meta{font-size:12px;color:var(--muted);margin-top:5px}
.prog{height:8px}
#msg{border:1px solid transparent}
.okmsg{border-color:color-mix(in srgb,var(--go) 22%,transparent)}
.errmsg{border-color:color-mix(in srgb,var(--no) 22%,transparent)}
.infomsg{border-color:color-mix(in srgb,var(--accent) 20%,transparent)}

@media(max-width:760px){
  .head{padding-top:22px}
  .head p{font-size:14px}
  .charts{display:none}
  .kpis{gap:10px}
  .kpi{padding:14px}
  .panel{margin-left:-4px;margin-right:-4px;padding:14px 12px}
  .frow{align-items:stretch}
  .frow .glab{width:100%;margin-bottom:-2px}
  .frow .chip{flex:0 0 auto}
  .stgroup,.frow:has(.chip.rc),.frow:has(.chip.cv){overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px;scrollbar-width:none}
  .stgroup::-webkit-scrollbar,.frow:has(.chip.rc)::-webkit-scrollbar,.frow:has(.chip.cv)::-webkit-scrollbar{display:none}
  .searchbox{min-width:100%}
  .appswitch{width:36px;padding:0;justify-content:center}
  .appswitch span{display:none}
  .drawer{border-radius:18px 18px 0 0;top:5vh;height:95vh}
}

@media(max-width:560px){
  .hero{padding-top:48px}
  .hero p{font-size:16px}
  .preview{margin-left:-6px;margin-right:-6px}
  .pvbody{padding:14px}
  .pvrow{padding:10px}
  .band{margin-left:-4px;margin-right:-4px}
}

@media(prefers-reduced-motion:reduce){
  .kpi,.gcard,.drop{transition:none}
}