/*
 * Leagues Lab brand identity — 2027 v2.
 * Arcane Instrumentation: one shell, one surface system, one control language.
 * This file is the final visual authority for the framed application.
 */
:root{
  --ll-brand-ink:#040a11;
  --ll-brand-midnight:#06111c;
  --ll-brand-navy:#091826;
  --ll-brand-navy-raised:#0d2031;
  --ll-brand-navy-soft:#0b1b29;
  --ll-brand-line:#294b67;
  --ll-brand-line-soft:#18354c;
  --ll-brand-blue:#287fff;
  --ll-brand-blue-deep:#126cff;
  --ll-brand-cyan:#45d7ff;
  --ll-brand-cyan-soft:#a6edff;
  --ll-brand-gold:#f3c65d;
  --ll-brand-gold-hi:#ffe29a;
  --ll-brand-gold-deep:#d69e34;
  --ll-brand-success:#55d98a;
  --ll-brand-planned:#9c87ff;
  --ll-brand-danger:#ed7480;
  --ll-brand-text:#f4f8fc;
  --ll-brand-text-2:#c4d4e2;
  --ll-brand-muted:#8ba2b6;
  --ll-brand-shadow:0 18px 48px rgba(0,0,0,.27);
  --ll-brand-shadow-soft:0 9px 26px rgba(0,0,0,.18);
  --ll-brand-focus:0 0 0 3px rgba(69,215,255,.16),0 0 24px rgba(40,127,255,.08);
  --ll-radius-xs:7px;
  --ll-radius-sm:10px;
  --ll-radius-md:13px;
  --ll-radius-lg:17px;
  --ll-radius-xl:22px;
  --ll-motion-fast:140ms;
  --ll-motion-base:190ms;
  --ll-shell-width:1380px;
  --ll-shell-gutter:22px;
  --ll-control-height:42px;
  --bg:var(--ll-brand-ink);
  --panel:var(--ll-brand-navy);
  --panel2:var(--ll-brand-navy-raised);
  --text:var(--ll-brand-text);
  --muted:var(--ll-brand-muted);
  --gold:var(--ll-brand-gold);
  --gold2:var(--ll-brand-gold-deep);
  --blue:var(--ll-brand-blue);
  --green:var(--ll-brand-success);
  --red:var(--ll-brand-danger);
  --line:var(--ll-brand-line);
}

/* ---------- One application canvas ---------- */
html{
  min-height:100%;
  color-scheme:dark;
  background:var(--ll-brand-ink)!important;
  scrollbar-color:#315b7a #06111c;
}
body{
  min-height:100vh;
  margin:0;
  color:var(--ll-brand-text);
  background:
    radial-gradient(ellipse 900px 430px at 50% -210px,rgba(40,127,255,.14),transparent 68%),
    radial-gradient(ellipse 640px 320px at 92% 14%,rgba(69,215,255,.035),transparent 72%),
    linear-gradient(180deg,#06111c 0%,#07131e 38%,#050c14 72%,#040a11 100%)!important;
  background-attachment:fixed!important;
}
body::before{
  content:"";
  position:fixed;
  inset:32px 0 auto;
  height:1px;
  pointer-events:none;
  z-index:19;
  background:linear-gradient(90deg,transparent 4%,rgba(40,127,255,.36),rgba(69,215,255,.50) 38%,rgba(243,198,93,.30) 68%,transparent 96%);
}
body::after{
  content:"";
  position:fixed;
  inset:32px 0 0;
  pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(rgba(74,135,180,.020) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,135,180,.014) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 78%);
  z-index:-1;
}
::selection{background:rgba(40,127,255,.42);color:#fff}

/* Never let an individual view paint its own page canvas. */
.app,.view,#dashView,#buildView,#skillsView,#tasksView,#achievementsView,#questsView,#routeView{
  background:transparent!important;
  background-image:none!important;
}

/* ---------- Shell geometry ---------- */
.app{
  width:min(var(--ll-shell-width),calc(100% - (var(--ll-shell-gutter) * 2)))!important;
  max-width:var(--ll-shell-width)!important;
  margin:0 auto!important;
  padding:0 0 96px!important;
}
.topbar{
  min-height:160px;
  margin:0!important;
  padding:24px 8px 17px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px!important;
}
.leagues-brand{min-width:0;flex:0 1 auto}
.leagues-brand .ll-brand-lockup{
  display:block;
  width:clamp(285px,22vw,350px)!important;
  max-width:100%;
  height:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(40,127,255,.10))!important;
}
.profilebar{
  gap:8px!important;
  align-items:center!important;
}
.profilebar :is(select,.btn){min-height:40px}
.profilebar select{min-width:132px!important}

.tabs{
  position:sticky!important;
  top:32px!important;
  z-index:20!important;
  min-height:52px;
  display:flex!important;
  align-items:center;
  gap:6px!important;
  margin:0!important;
  padding:7px 6px!important;
  border:1px solid rgba(44,80,109,.48)!important;
  border-left:0!important;
  border-right:0!important;
  background:rgba(4,12,20,.92)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.tab{
  min-height:38px;
  padding:8px 12px!important;
  border-radius:11px!important;
  border-color:#29445c!important;
  color:#a2b5c6!important;
  background:linear-gradient(180deg,#0c1c2a,#081622)!important;
  transition:color var(--ll-motion-fast) ease,border-color var(--ll-motion-fast) ease,background var(--ll-motion-fast) ease,transform var(--ll-motion-fast) ease,box-shadow var(--ll-motion-fast) ease;
}
.tab:not(.active):hover{
  color:#edf8ff!important;
  border-color:#477ca1!important;
  background:linear-gradient(180deg,#11283b,#0b1d2c)!important;
  transform:translateY(-1px);
}
.tab.active{
  color:#171109!important;
  border-color:#ffe08f!important;
  background:linear-gradient(180deg,#ffe086,#e7ad42)!important;
  box-shadow:0 6px 18px rgba(214,158,52,.18),inset 0 1px 0 rgba(255,255,255,.4)!important;
  font-weight:950!important;
}
.view{
  width:100%;
  min-width:0;
  padding-top:14px!important;
}

/* ---------- Type hierarchy ---------- */
h1,h2,h3,.route-step-title{letter-spacing:-.025em}
.ll-dev-kicker,.ll-view-kicker,.k,.route-stepno{
  color:#6fd9ff!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.115em!important;
  text-transform:uppercase;
}
.small,.tiny,.sub{color:var(--ll-brand-muted)}
a{color:#8ed7ff;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#d0f1ff}
.ll-catalog-page-heading h2,
.ll-quest-title-line h2,
#routeView .ll-route-page-heading h2{
  font-size:clamp(26px,2.6vw,32px)!important;
  line-height:1.06!important;
}

/* ---------- Surface hierarchy ---------- */
.card,.route-card,.resource,.media-card,
.ll-quest-catalog-shell,.ll-quest-reference-card,
.ll-route-catalog-panel,.ll-route-replace-panel,
.ll-build-intel-drawer{
  border-color:#294960!important;
  border-radius:var(--ll-radius-md)!important;
  background:linear-gradient(180deg,rgba(11,27,40,.98),rgba(7,18,28,.98))!important;
  box-shadow:var(--ll-brand-shadow-soft)!important;
}
.card{position:relative}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(69,215,255,.022),transparent 24%,transparent 76%,rgba(243,198,93,.014));
}
.notice{
  border-color:#775f27!important;
  color:#f1dfa6!important;
  background:linear-gradient(180deg,rgba(52,41,15,.88),rgba(30,25,11,.82))!important;
  box-shadow:inset 3px 0 0 rgba(243,198,93,.78)!important;
}

/* Older page-specific neutral fills are normalized here. */
#dashView #statsGrid .card,
#dashView #snapshotNotice,
#dashView #milestoneBox,
#skillsView #hiscoresSyncCard,
#skillsView .card:has(#skillGrid),
#buildView .buildgrid>.card,
#tasksView .ll-task-import-card,
#tasksView .ll-task-source-card,
#tasksView #quickTaskSyncCard,
#questsView .ll-quest-impact-compact,
#questsView .ll-quest-catalog-shell,
#achievementsView .ll-catalog-shell,
#routeView .route-card{
  border-color:#294960!important;
  background:linear-gradient(180deg,#0b1b29,#08151f)!important;
}
#tasksView .ll-task-import-card{
  background:
    radial-gradient(circle at 96% 0,rgba(243,198,93,.055),transparent 30%),
    linear-gradient(180deg,#0d2030,#091722)!important;
}

/* ---------- Buttons ---------- */
.btn{
  min-height:39px;
  border:1px solid #335a77!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#10283c,#0b1d2c)!important;
  color:#eaf6ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color var(--ll-motion-fast) ease,background var(--ll-motion-fast) ease,box-shadow var(--ll-motion-fast) ease,transform var(--ll-motion-fast) ease;
}
.btn:hover:not(:disabled){
  border-color:#5388ae!important;
  background:linear-gradient(180deg,#15334c,#0f263a)!important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.04);
}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.primary{
  color:#161007!important;
  border-color:#ffe194!important;
  background:linear-gradient(180deg,#ffe187,#e5aa3d)!important;
  box-shadow:0 8px 22px rgba(214,158,52,.18),inset 0 1px rgba(255,255,255,.44)!important;
}
.btn.green{background:linear-gradient(180deg,#153b28,#0e2a1c)!important;border-color:#387d56!important;color:#c9f8d9!important}
.btn.red{background:linear-gradient(180deg,#3b1b25,#29131a)!important;border-color:#7c414c!important;color:#ffd1d7!important}
.btn.small{min-height:32px!important;border-radius:9px!important}
.btn:focus-visible,.tab:focus-visible,.choiceCard:focus-visible,.regionToggle:focus-visible,.ll-filter-toggle:focus-visible{
  outline:none!important;
  border-color:var(--ll-brand-cyan)!important;
  box-shadow:var(--ll-brand-focus)!important;
}
.btn:disabled,.tab:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

/* ---------- One control family ---------- */
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(
  select,
  input[type="search"],input[type="text"],input[type="number"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"]
){
  min-height:var(--ll-control-height)!important;
  border-radius:11px!important;
  border-color:#31526d!important;
  background-color:#081520!important;
  color:#eff7ff!important;
  font-size:12px;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) textarea{
  border-radius:11px!important;
  border-color:#31526d!important;
  background-color:#081520!important;
  color:#eff7ff!important;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(select,input,textarea):hover:not(:disabled){border-color:#47789d!important}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(select,input,textarea):focus-visible{
  outline:none!important;
  border-color:var(--ll-brand-cyan)!important;
  box-shadow:var(--ll-brand-focus)!important;
}

/* ---------- Pills / semantic language ---------- */
.pill{background:#081722!important;border-color:#2c506b!important;color:#a9bed0!important;border-radius:999px!important}
.pill.lp{color:#ffe4a8!important;border-color:#735b25!important;background:#211a0b!important}
.pill.region{color:#c9ecff!important;border-color:#35688e!important;background:#0a2133!important}
.pill.bless{color:#c7f8eb!important;border-color:#2e7862!important;background:#0a251d!important}
.good{color:#72e8a0!important}.bad{color:#ff9aa5!important}
.progress{background:#06121c!important;border-color:#22445e!important}
.progress>div{background:linear-gradient(90deg,#126cff,#45d7ff 55%,#f3c65d)!important}

/* ---------- Catalog command bars ---------- */
#tasksView .controls.ll-task-filter-toolbar,
#achievementsView .ll-achievement-controls,
#questsView .ll-quest-toolbar,
.ll-route-catalog-toolbar{
  gap:8px!important;
  border-color:#294960!important;
  background:linear-gradient(180deg,rgba(10,25,38,.98),rgba(7,18,28,.97))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(14px) saturate(125%);
}
#tasksView .controls.ll-task-filter-toolbar,
#achievementsView .ll-achievement-controls{
  padding:10px!important;
  border:1px solid #294960!important;
  border-radius:13px!important;
}
#questsView .ll-quest-toolbar{border-color:#294960!important}
#tasksView .controls.ll-task-filter-toolbar :is(input,select,.ll-filter-toggle),
#achievementsView .ll-achievement-controls :is(input,select,.ll-filter-toggle),
#questsView .ll-quest-toolbar :is(input,select),
.ll-route-catalog-toolbar :is(input,select,.ll-filter-toggle){
  min-height:42px!important;
  border-radius:10px!important;
}

/* ---------- Catalog card rhythm ---------- */
#tasksView .taskgrid,
#achievementsView .ll-achievement-grid,
#questsView .ll-quest-catalog-grid,
.ll-route-catalog-list{gap:11px!important}
#tasksView .taskcard,
#achievementsView .ll-achievement-card,
#questsView .ll-quest-catalog-card,
.ll-route-catalog-row{
  border-radius:13px!important;
  padding:12px!important;
}
#tasksView .task-title,
#achievementsView .ll-achievement-card-head strong,
#questsView .ll-quest-title-row>strong,
.ll-route-catalog-title strong{
  font-size:14px!important;
  line-height:1.3!important;
  letter-spacing:-.01em;
}
#tasksView .taskcard .btn.small,
#achievementsView .ll-achievement-card .btn.small,
#questsView .ll-quest-catalog-card .btn.small,
.ll-route-catalog-row .btn.small{
  min-height:32px!important;
  padding:6px 9px!important;
  font-size:10px!important;
}

/* ---------- Dashboard ---------- */
#dashView #snapshotNotice{padding:11px 13px!important}
#dashView #statsGrid{gap:10px!important}
#dashView #statsGrid .card{
  min-height:104px!important;
  padding:13px!important;
}
#dashView #statsGrid .v{font-size:22px!important}
#dashView>.buildgrid{gap:11px!important;align-items:stretch}
#dashView>.buildgrid>.card{min-height:176px}

/* ---------- Build ---------- */
#buildView .notice{margin-bottom:10px!important}
#buildView .buildgrid{gap:11px!important;align-items:start}
#buildView .buildgrid>.card{padding:13px!important}
#buildView .regionsColumn{gap:8px!important}
#buildView .regionToggle{border-radius:11px!important}
#buildView .choiceCard{border-radius:13px!important}
#buildView .plannedRegionCard{border-radius:13px!important}

/* ---------- Skills ---------- */
#skillsView .buildgrid{
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.52fr)!important;
  gap:12px!important;
  align-items:start!important;
}
#skillsView #hiscoresSyncCard{
  min-height:0!important;
  height:auto!important;
  align-self:start!important;
  padding:13px!important;
}
#skillsView .card:has(#skillGrid){
  min-height:0!important;
  align-self:start!important;
  padding:13px!important;
}
#skillsView .skillgrid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
}
#skillsView .skill{
  min-height:82px;
  padding:9px!important;
  border:1px solid #294960!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#0a1a27,#07141e)!important;
}
#skillsView .skill:hover{border-color:#47789d!important;background:linear-gradient(180deg,#0d2030,#091722)!important}
#skillsView .skill input{margin-top:7px!important;min-height:40px!important}

/* ---------- Tasks ---------- */
#tasksView .ll-task-import-card{margin-bottom:10px!important;padding:13px 14px!important;border-radius:13px!important}
#tasksView .ll-task-source-card,#tasksView #quickTaskSyncCard{padding:10px 12px!important;border-radius:12px!important;box-shadow:none!important}
#tasksView .controls.ll-task-filter-toolbar{margin:10px 0 8px!important}
#tasksView .server-task-status{margin:6px 4px 9px!important}
#tasksView .taskcard{min-height:176px!important}

/* ---------- Achievements ---------- */
#achievementsView .ll-catalog-page-heading{margin-bottom:12px!important}
#achievementsView .ll-achievement-controls{margin-bottom:10px!important}
#achievementsView .ll-achievement-card{min-height:178px!important}
#achievementsView .ll-achievement-card>p{font-size:11px!important;line-height:1.45!important}

/* ---------- Quests ---------- */
#questsView .ll-quest-page-heading{margin-bottom:12px!important}
#questsView .ll-quest-impact-compact{padding:12px 13px!important;border-radius:13px!important}
#questsView .ll-quest-layout{gap:12px!important}
#questsView .ll-quest-catalog-shell{padding:12px!important}
#questsView .ll-quest-toolbar{top:84px!important}
#questsView .ll-quest-catalog-card{min-height:158px!important}
#questsView .ll-quest-reference-card{top:84px!important}

/* ---------- Route ---------- */
#routeView .ll-route-page-heading{margin-bottom:10px!important}
#routeView .ll-route-heading-actions{gap:8px!important}
#routeView .route-card{padding:13px!important}
#routeView .route-step-title{font-size:clamp(23px,2.4vw,30px)!important}
#routeView .route-info-grid{gap:9px!important}
#routeView .route-info-box{
  border-color:#294960!important;
  border-radius:11px!important;
  background:#081722!important;
}
#routeView .route-diagnostics{font-size:11px!important;line-height:1.45}
#routeView .route-navbar{
  border-color:#294960!important;
  background:rgba(4,12,20,.96)!important;
}

/* ---------- Drawer / overlay consistency ---------- */
.ll-build-intel-drawer,.ll-route-catalog-panel,.ll-route-replace-panel{
  border-color:#31546e!important;
  background:linear-gradient(180deg,#0b1924,#07121b)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.55)!important;
}

/* Functional motion only. */
.route-row,.choiceCard,.regionToggle,.ll-achievement-card,.ll-quest-catalog-card,.taskcard,.ll-route-catalog-row{
  transition:transform var(--ll-motion-fast) ease,border-color var(--ll-motion-fast) ease,box-shadow var(--ll-motion-base) ease,background var(--ll-motion-base) ease;
}
:focus-visible{scroll-margin:110px}

@media(min-width:1500px){
  #tasksView .taskgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #achievementsView .ll-achievement-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:1120px){
  :root{--ll-shell-gutter:16px}
  #skillsView .buildgrid{grid-template-columns:1fr!important}
  #questsView .ll-quest-layout{grid-template-columns:1fr!important}
  #questsView .ll-quest-reference-card{position:relative!important;top:auto!important;max-height:none!important}
}
@media(max-width:760px){
  :root{--ll-shell-gutter:12px}
  .topbar{min-height:0;padding:18px 2px 12px!important}
  .leagues-brand .ll-brand-lockup{width:clamp(225px,66vw,320px)!important}
  .tabs{margin-inline:0!important}
  .view{padding-top:11px!important}
  #tasksView .controls.ll-task-filter-toolbar,
  #achievementsView .ll-achievement-controls{position:relative!important;top:auto!important}
  #skillsView .skillgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #tasksView .taskgrid,#achievementsView .ll-achievement-grid,#questsView .ll-quest-catalog-grid{grid-template-columns:1fr!important}
}
@media(max-width:520px){
  .profilebar{width:100%}
  .profilebar select{flex:1 1 130px}
  #skillsView .skillgrid{grid-template-columns:1fr 1fr!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(prefers-contrast:more){
  :root{--ll-brand-line:#4a7391;--ll-brand-muted:#b2c5d4}
  .card,.route-card,.taskcard,.ll-achievement-card,.ll-quest-catalog-card{border-width:2px!important}
}