/* Primitive tokens */
:root{
  --neutral-0:oklch(100% 0 0);--neutral-50:oklch(97% .004 145);--neutral-100:oklch(93% .005 145);--neutral-200:oklch(84% .006 145);--neutral-400:oklch(64% .008 145);--neutral-600:oklch(43% .009 145);--neutral-800:oklch(25% .008 145);--neutral-900:oklch(17% .007 145);--neutral-950:oklch(12% .006 145);
  --orange-400:oklch(70% .18 38);--orange-500:oklch(63% .2 35);--orange-600:oklch(55% .19 34);--green-400:oklch(78% .16 145);--red-500:oklch(61% .21 26);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
  --text-xs:12px;--text-sm:14px;--text-md:17px;--text-lg:20px;--text-xl:24px;--text-2xl:29px;--text-3xl:35px;
  --radius-sm:4px;--radius-md:7px;--duration-fast:150ms;--duration-normal:200ms;
}
/* Semantic tokens */
:root{
  --canvas:var(--neutral-950);--surface:var(--neutral-900);--surface-raised:var(--neutral-800);--surface-input:oklch(14% .006 145);--text:var(--neutral-50);--text-muted:var(--neutral-200);--text-subtle:var(--neutral-400);--border:oklch(28% .007 145);--border-strong:oklch(39% .008 145);--action:var(--orange-500);--action-hover:var(--orange-400);--action-active:var(--orange-600);--success:var(--green-400);--danger:var(--red-500);--focus:var(--orange-400);
}
/* Component tokens */
:root{
  --control-height:40px;--button-bg:var(--surface-raised);--button-fg:var(--text);--button-border:var(--border-strong);--input-bg:var(--surface-input);--input-border:var(--border);--row-bg:var(--surface);--row-bg-hover:var(--surface-raised);--sidebar-width:216px;--header-height:56px;
}
*{box-sizing:border-box}
html{background:var(--canvas);scrollbar-gutter:stable}
body{margin:0;min-width:320px;background:var(--canvas);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:var(--text-sm);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,select{font:inherit}button{color:inherit}button,a,input,select{outline:none}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:var(--space-4);top:-60px;z-index:100;padding:10px 14px;border-radius:var(--radius-sm);background:var(--action);color:var(--neutral-0);font-weight:700}.skip-link:focus{top:var(--space-4)}
:focus-visible{box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--focus)}
.app-header{position:sticky;top:0;z-index:30;height:var(--header-height);display:grid;grid-template-columns:var(--sidebar-width) 1fr auto;align-items:center;border-bottom:1px solid var(--border);background:var(--canvas)}
.brand{height:100%;padding:0 var(--space-4);display:flex;align-items:center;gap:10px;border-right:1px solid var(--border)}.brand img{width:32px;height:32px}.brand strong{font-size:var(--text-md);letter-spacing:-.03em}.brand strong span{color:var(--action)}
.mobile-tools{display:none}.header-status{margin-right:var(--space-4);display:flex;align-items:center;gap:8px;color:var(--text-subtle);font-size:var(--text-xs)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
.app-shell{min-height:calc(100dvh - var(--header-height));display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.app-sidebar{position:sticky;top:var(--header-height);height:calc(100dvh - var(--header-height));padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--canvas)}
.app-sidebar nav{display:grid;gap:2px}.app-sidebar nav p{margin:var(--space-4) var(--space-2) var(--space-2);color:var(--text-subtle);font-size:var(--text-xs);font-weight:600}.app-sidebar nav p:first-child{margin-top:0}.app-sidebar nav a{min-height:38px;padding:0 var(--space-2);display:flex;align-items:center;gap:10px;border-radius:var(--radius-sm);color:var(--text-muted);font-weight:550}.app-sidebar nav a>span{width:20px;color:var(--text-subtle);text-align:center}.app-sidebar nav a:hover{background:var(--surface);color:var(--text)}.app-sidebar nav a:active{background:var(--surface-raised)}.app-sidebar nav a.is-current{background:var(--surface-raised);color:var(--text)}.app-sidebar nav a.is-current>span{color:var(--action)}
.index-health{margin-top:auto;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.index-health>div{display:flex;align-items:baseline;justify-content:space-between;padding:6px 0}.index-health strong{font-size:var(--text-lg)}.index-health span{color:var(--text-subtle);font-size:var(--text-xs)}.index-health p{margin:var(--space-2) 0 0;padding-top:var(--space-2);border-top:1px solid var(--border);color:var(--text-subtle);font-size:var(--text-xs)}
.workspace{width:min(100%,1384px);min-width:0;padding:var(--space-8)}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}.page-header h1{margin:0;font-size:var(--text-2xl);line-height:1.25;letter-spacing:-.035em}.page-header p{max-width:650px;margin:5px 0 0;color:var(--text-subtle)}.result-count{display:flex;align-items:baseline;gap:7px}.result-count strong{font-size:var(--text-xl)}.result-count span{color:var(--text-subtle);font-size:var(--text-xs)}
.catalog-controls{margin-bottom:var(--space-4)}.primary-controls{display:grid;grid-template-columns:minmax(240px,560px) auto auto;gap:var(--space-2)}.search-field{min-width:0;height:var(--control-height);display:flex;align-items:center;border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--input-bg);transition:border-color var(--duration-fast)}.search-field:hover{border-color:var(--border-strong)}.search-field:focus-within{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--focus) 24%,transparent)}.search-field b{padding-left:var(--space-3);color:var(--text-subtle);font-size:var(--text-lg);font-weight:400}.search-field input{min-width:0;flex:1;height:100%;padding:0 var(--space-3);border:0;background:transparent;color:var(--text)}.search-field input::placeholder{color:var(--text-subtle);opacity:1}
.button{min-height:var(--control-height);padding:0 var(--space-4);border:1px solid var(--button-border);border-radius:var(--radius-md);background:var(--button-bg);color:var(--button-fg);font-weight:650;cursor:pointer;transition:background var(--duration-fast),border-color var(--duration-fast),transform var(--duration-fast)}.button:hover{border-color:var(--text-subtle);background:color-mix(in oklch,var(--surface-raised) 82%,var(--text) 18%)}.button:active{transform:translateY(1px);background:var(--surface)}.button:disabled,.button[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}.button[aria-busy=true]{cursor:wait}.button-primary{border-color:var(--action);background:var(--action);color:var(--neutral-0)}.button-primary:hover{border-color:var(--action-hover);background:var(--action-hover)}.button-primary:active{background:var(--action-active)}.filter-toggle span{min-width:20px;height:20px;margin-left:6px;display:inline-grid;place-items:center;border-radius:10px;background:var(--action);color:var(--neutral-0);font-size:var(--text-xs)}
.filters{display:none;margin-top:var(--space-2);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.filters.is-open{display:block}.filter-head{margin-bottom:var(--space-4);display:flex;align-items:center;justify-content:space-between}.filter-head strong{font-size:var(--text-md)}.filter-head button{padding:4px;border:0;background:none;color:var(--action-hover);cursor:pointer}.filter-head button:hover{text-decoration:underline}.filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3)}.filter-grid label{min-width:0;display:grid;gap:6px}.filter-grid label>span,.sort-control>span{color:var(--text-subtle);font-size:var(--text-xs)}.filter-grid input,.filter-grid select,.sort-control select{width:100%;height:var(--control-height);padding:0 var(--space-3);border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text)}.filter-grid input:hover,.filter-grid select:hover,.sort-control select:hover{border-color:var(--border-strong)}.filter-grid input:focus-visible,.filter-grid select:focus-visible,.sort-control select:focus-visible{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--focus) 24%,transparent)}.filter-grid input:disabled,.filter-grid select:disabled{opacity:.5;cursor:not-allowed}.filter-grid input[aria-invalid=true],.filter-grid select[aria-invalid=true]{border-color:var(--danger)}
.result-toolbar{min-height:52px;margin-top:var(--space-3);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.quick-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.quick-filters::-webkit-scrollbar{display:none}.quick-filters button{height:32px;padding:0 var(--space-3);border:1px solid var(--border);border-radius:16px;background:transparent;color:var(--text-muted);white-space:nowrap;cursor:pointer;transition:background var(--duration-fast),border-color var(--duration-fast)}.quick-filters button:hover{border-color:var(--border-strong);background:var(--surface)}.quick-filters button:active{background:var(--surface-raised)}.quick-filters button.active{border-color:color-mix(in oklch,var(--action) 55%,var(--border));background:color-mix(in oklch,var(--action) 18%,var(--surface));color:var(--text)}.quick-filters button:disabled{opacity:.5;cursor:not-allowed}.sort-control{display:flex;align-items:center;gap:var(--space-2)}.sort-control select{min-width:210px;height:36px}
.catalog-results{min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}.catalog-columns,.base-row{display:grid;grid-template-columns:minmax(300px,1.55fr) minmax(128px,.72fr) minmax(128px,.72fr) minmax(100px,.55fr) minmax(112px,.62fr) 36px;align-items:center}.catalog-columns{min-height:38px;padding:0 var(--space-3);border-bottom:1px solid var(--border);background:var(--canvas);color:var(--text-subtle);font-size:var(--text-xs)}.catalog-columns span:not(:first-child){padding-left:var(--space-3)}
.catalog-list{min-height:150px}.base-row{position:relative;min-height:112px;padding:var(--space-3);border-bottom:1px solid var(--border);background:var(--row-bg);transition:background var(--duration-fast)}.base-row:last-child{border-bottom:0}.base-row:hover{background:var(--row-bg-hover)}.base-identity{min-width:0;display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--space-3);align-items:center}.base-thumb{position:relative;width:132px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-sm);background:var(--canvas)}.base-thumb img{width:100%;height:100%;object-fit:cover}.base-thumb:focus-visible{box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--focus)}.base-info{min-width:0}.base-info h2{margin:0;overflow:hidden;font-size:var(--text-md);line-height:1.25;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}.base-info h2 a:hover{color:var(--action-hover)}.base-meta{margin-top:6px;display:flex;align-items:center;gap:7px;color:var(--text-subtle);font-size:var(--text-xs)}.base-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-tag{padding:2px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted)}
.data-cell{min-width:0;padding-left:var(--space-3)}.data-cell small{display:none;color:var(--text-subtle);font-size:var(--text-xs)}.data-cell strong{display:block;overflow:hidden;font-size:var(--text-sm);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.data-cell span{display:block;margin-top:4px;color:var(--text-subtle);font-size:var(--text-xs)}.data-cell.is-missing strong{color:var(--text-subtle);font-weight:500}.signal-cell{display:grid;gap:5px}.signal-cell span{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:var(--text-xs)}.signal-cell i{width:7px;height:7px;border-radius:50%;background:var(--text-subtle)}.signal-cell .is-complete i{background:var(--success)}.row-action{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--text-lg)}.row-action:hover{background:var(--canvas);color:var(--action-hover)}.row-action:active{background:var(--surface)}
.catalog-note{margin:0;padding:var(--space-6);color:var(--text-muted)}.load-more{width:calc(100% - 24px);margin:var(--space-3);background:var(--canvas)}
.catalog-skeleton{height:112px;display:grid;grid-template-columns:132px 1fr;gap:var(--space-3);align-items:center;padding:var(--space-3);border-bottom:1px solid var(--border)}.skeleton-block,.skeleton-line{border-radius:var(--radius-sm);background:var(--surface-raised);animation:pulse 1.4s ease-in-out infinite}.skeleton-block{width:132px;aspect-ratio:16/9}.skeleton-lines{display:grid;gap:10px}.skeleton-line{height:12px;width:45%}.skeleton-line:first-child{height:17px;width:70%}@keyframes pulse{50%{opacity:.45}}
.app-footer{min-height:58px;padding:0 var(--space-6);display:grid;grid-template-columns:var(--sidebar-width) 1fr auto;align-items:center;border-top:1px solid var(--border);color:var(--text-subtle);font-size:var(--text-xs)}.app-footer span{color:var(--text);font-weight:700}.app-footer p{margin:0}.app-footer a:hover{color:var(--action-hover)}
@media(max-width:1120px){.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-columns,.base-row{grid-template-columns:minmax(280px,1.5fr) minmax(120px,.7fr) minmax(120px,.7fr) minmax(96px,.55fr) 36px}.catalog-columns span:nth-child(5),.signal-cell{display:none}}
@media(max-width:820px){:root{--sidebar-width:0px}.app-header{height:auto;min-height:56px;grid-template-columns:1fr auto}.brand{border-right:0}.mobile-tools{grid-column:1/-1;order:3;height:44px;padding:0 var(--space-3);display:flex;align-items:stretch;gap:var(--space-6);overflow-x:auto;border-top:1px solid var(--border)}.mobile-tools a{display:grid;place-items:center;border-bottom:2px solid transparent;color:var(--text-subtle);white-space:nowrap}.mobile-tools a.is-current{border-color:var(--action);color:var(--text)}.header-status{margin-right:var(--space-3)}.app-shell{display:block}.app-sidebar{display:none}.workspace{padding:var(--space-6) var(--space-4)}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-columns,.base-row{grid-template-columns:minmax(260px,1.5fr) minmax(110px,.7fr) minmax(100px,.6fr) 36px}.catalog-columns span:nth-child(3),.base-row>.upkeep-cell{display:none}.app-footer{grid-template-columns:1fr auto;padding:0 var(--space-4)}.app-footer p{display:none}}
@media(max-width:620px){.header-status span:last-child{display:none}.workspace{padding:var(--space-4) var(--space-3)}.page-header{align-items:start;margin-bottom:var(--space-4)}.page-header h1{font-size:var(--text-xl)}.page-header p{font-size:var(--text-xs)}.result-count span{display:none}.primary-controls{grid-template-columns:minmax(0,1fr) auto}.primary-controls .filter-toggle{grid-column:1/-1}.filters{padding:var(--space-3)}.filter-grid{grid-template-columns:1fr}.result-toolbar{align-items:stretch;flex-direction:column}.quick-filters{width:100%}.sort-control{justify-content:space-between}.sort-control select{min-width:0;flex:1}.catalog-results{border-inline:0;border-radius:0;margin-inline:calc(var(--space-3) * -1)}.catalog-columns{display:none}.base-row{min-height:0;padding:var(--space-3);display:grid;grid-template-columns:1fr 34px;gap:var(--space-3)}.base-identity{grid-column:1/-1;grid-template-columns:112px minmax(0,1fr)}.base-thumb{width:112px}.base-info h2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.base-row>.data-cell{display:block!important;padding:var(--space-2) 0 0;border-top:1px solid var(--border)}.base-row>.build-cell{grid-column:1}.base-row>.upkeep-cell{display:none!important}.base-row>.raid-cell{grid-column:1}.data-cell small{display:block}.signal-cell{display:none}.row-action{position:absolute;right:var(--space-3);bottom:var(--space-3)}.app-footer{margin-top:var(--space-4)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}