:root {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #23283e; background: #f6f7fb; font-synthesis: none;
  --primary:#7761d9; --primary-dark:#634cc6; --muted:#898b9b; --border:#e9eaf1;
  --tint-normal:#f1eee9; --tint-fighting:#f9ece7; --tint-flying:#eef0fc;
  --tint-poison:#f3eafa; --tint-ground:#f6efe2; --tint-rock:#f2eee3;
  --tint-bug:#eff3df; --tint-ghost:#eeebf7; --tint-steel:#eaf0f2;
  --tint-fire:#fff0e5; --tint-water:#e8f2fc; --tint-grass:#edf5ea;
  --tint-electric:#fff7db; --tint-psychic:#fcebf1; --tint-ice:#e8f6f5;
  --tint-dragon:#eeeafa; --tint-dark:#eeedf2; --tint-fairy:#fbeef6;
}
* { box-sizing:border-box; }
body { margin:0; font-size:14px; line-height:1.5; }
button, input, select { font:inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
button { border:0; background:none; }
a { color:var(--primary); text-decoration:none; }
button:disabled { cursor:default; opacity:.45; }
button, a, input, select { outline-offset:4px; }
:focus-visible { outline:3px solid #a38cf2; }
input { min-width:0; }
button svg, a svg { flex-shrink:0; }
svg { vertical-align:middle; }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,h4 { line-height:1.25; }
h1 { font-size:36px; letter-spacing:-1.3px; font-weight:720; }
h1 span { color:#79708f; }
h2 { font-size:19px; letter-spacing:-.4px; font-weight:650; }
h3 { font-size:15px; font-weight:650; }
button { transition:background .16s, color .16s, border-color .16s, transform .16s; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;top:-60px;left:20px;z-index:100;background:white;padding:12px 20px;border-radius:8px; }
.skip-link:focus { top:12px; }
.sidebar { position:fixed;inset:0 auto 0 0;width:238px;background:#151c30;color:#a7abc1;display:flex;flex-direction:column;padding:37px 18px 22px;z-index:30; }
.brand { display:flex;align-items:center;gap:11px;padding:0 12px;color:#fff; }
.brand > span:last-child { font-size:25px;line-height:1.1;letter-spacing:-1.1px;font-weight:750; }
.brand > span:last-child > span { color:#b2a1f2; }
.brand small { display:block;font-size:6.4px;letter-spacing:.8px;color:#9b9fb4;font-weight:600;margin-top:8px;white-space:nowrap; }
.pokeball { position:relative;display:inline-block;width:31px;height:31px;border:3px solid currentColor;border-radius:50%;flex-shrink:0; }
.pokeball::before { content:'';position:absolute;left:0;right:0;top:11px;height:3px;background:currentColor; }
.pokeball i { position:absolute;width:11px;height:11px;border:2.5px solid currentColor;background:#151c30;border-radius:50%;left:7px;top:7px;z-index:1; }
.brand > .pokeball { color:#b4a2f9;width:35px;height:35px;transform:rotate(-20deg); }
.brand > .pokeball::before { top:13px; }
.brand > .pokeball i { left:9px;top:9px; }
.workspace-label { font-size:9px;font-weight:600;letter-spacing:1.5px;padding:46px 16px 17px;color:#727b98; }
.nav-item { display:flex;align-items:center;gap:12px;width:100%;padding:14px 15px;margin-bottom:6px;text-align:left;font-size:12px;border-radius:8px;color:#9da5be;white-space:nowrap; }
.nav-item:hover { color:#eeeafc;background:#20283f; }
.nav-item.active { background:#7661d5;color:white;box-shadow:0 4px 12px #080b171a; }
.nav-item svg { width:19px;height:19px; }
.nav-item span:nth-child(2) { flex:1; }
.nav-count { border:1px solid #444b61;font-size:9px;padding:1px 5px;border-radius:4px; }
.active .nav-count { border-color:#ffffff55; }
.new-dot { width:5px;height:5px;border-radius:50%;background:#ae9bec; }
.sidebar-divider { border-top:1px solid #ffffff0c;margin:23px 15px 18px; }
.sidebar-bottom { margin-top:auto;padding-top:35px; }
.offline-card { position:relative;padding:17px 14px 14px;background:#1e263d;border:1px solid #ffffff07;border-radius:10px; }
.offline-card .status-dot { position:absolute;top:23px;left:15px; }
.status-dot,.local-status i,.live-badge i { display:inline-block;width:6px;height:6px;background:#66be96;border-radius:50%; }
.offline-card strong { display:block;font-size:10px;color:#d7d9e5;padding-left:15px;font-weight:550; }
.offline-card p { margin:10px 0 13px;color:#7e89a3;font-size:10px;line-height:1.7; }
.offline-card button { display:flex;align-items:center;gap:29px;color:#b3a4ee;padding:0;font-size:10px; }
.sidebar-footer { padding:20px 8px 0;font-size:9px;color:#69748f; }
.sidebar-footer > span { display:flex;justify-content:space-between;margin-top:10px;color:#97a0b7;font-size:10px; }
.sidebar-footer b { font-weight:400;font-size:9px; }
.workspace { margin-left:238px;min-height:100vh; }
.topbar { height:77px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid var(--border);background:#ffffffb3; }
.breadcrumb { display:flex;align-items:center;gap:13px;font-size:11px;color:#8e91a2; }
.breadcrumb svg { color:#b4b6c3; }
.breadcrumb strong { color:#555b71;font-weight:500; }
.topbar-right { display:flex;align-items:center;gap:23px; }
.local-status { display:flex;gap:7px;align-items:center;font-size:10px;color:#8c91a2; }
.help-button { color:#979daf;padding:0; }
.avatar { display:grid;place-items:center;width:31px;height:31px;background:#eae6f8;color:#8971cf;border-radius:50%;font-size:12px;font-weight:650;box-shadow:0 0 0 4px #f9f8fd; }
.mobile-menu { display:none!important; }
main { max-width:1530px;margin:0 auto;padding:37px 42px 10px; }
.page-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px; }
.eyebrow { font-size:9px;font-weight:700;letter-spacing:1.8px;color:#8c82a8;margin-bottom:12px; }
.page-heading p { margin-top:14px;font-size:12px;color:#8b8da0;line-height:1.8; }
.button { display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 17px;border-radius:7px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1.4; }
.button.secondary { border:1px solid #e2e2ed;background:white;color:#6d6d84; }
.button.secondary:hover { border-color:#c9baf0;background:#fbf9ff; }
.button.primary { background:var(--primary);color:white; }
.button.primary:hover { background:var(--primary-dark); }
.stat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:25px; }
.stat-card { display:flex;align-items:center;gap:14px;padding:20px 18px;background:white;border:1px solid var(--border);border-radius:10px; }
.stat-icon { display:inline-flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:12px;flex-shrink:0; }
.stat-icon.violet { background:#f0ecfc;color:#9275d8; }
.stat-icon.orange { background:#fff1e7;color:#e9a35e; }
.stat-icon.blue { background:#eaf2ff;color:#83a9db; }
.stat-icon.green { background:#eaf6f0;color:#83b59d; }
.stat-card strong { display:block;font-size:24px;line-height:1.1;font-weight:650;letter-spacing:-.6px;font-variant-numeric:tabular-nums; }
.stat-card div > span { display:block;font-size:9px;color:#9497a7;margin-top:7px; }
.expert-banner { display:flex;justify-content:space-between;min-height:241px;position:relative;background:#eeeaf8;border:1px solid #e5def5;border-radius:12px;overflow:hidden;margin-bottom:33px; }
.banner-content { padding:27px 31px;z-index:2; }
.banner-label { display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:1.4px;font-weight:700;color:#8c73c2; }
.banner-content h2 { margin-top:12px;font-size:24px;line-height:1.3;letter-spacing:-.7px;color:#51466e; }
.banner-content p { font-size:10px;color:#8d83a6;margin-top:10px; }
.banner-button { background:#7863c9;color:#fff;font-size:10px;margin-top:19px;padding:10px 14px; }
.banner-button:hover { background:#6750bb; }
.banner-art { position:relative;width:37%;min-width:245px;display:grid;place-items:center;margin-right:17px; }
.banner-art::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse,#d8cbed77 0%,transparent 68%); }
.sprite { image-rendering:pixelated;object-fit:contain;position:relative; }
.hero-charizard { width:218px;height:218px;transform:rotate(-7deg);filter:drop-shadow(0 14px 10px #6b4c9b15);margin-top:-14px; }
.orbit { position:absolute;width:204px;height:204px;border:1px solid #d9cfea;border-radius:50%; }
.orbit-two { width:256px;height:256px;border-style:dashed;border-color:#ddd5ee; }
.art-star { position:absolute;color:#b6a1d6;font-size:26px; }
.star-one { top:24px;left:12%; }
.star-two { right:7%;bottom:33px;font-size:33px; }
.art-note { position:absolute;bottom:23px;background:#ffffffd9;box-shadow:0 4px 14px #6d5b8b0a;padding:7px 12px;border:1px solid #ffffff;border-radius:6px;font-size:8px;color:#8c78b3;transform:rotate(-5deg); }
.section-heading { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:21px; }
.section-heading h2 { font-size:18px; }
.section-heading p { font-size:10px;color:#9797a8;margin-top:7px; }
.count-pill { display:inline-block;font-size:9px;font-weight:550;vertical-align:middle;background:#eae7f5;color:#9a87be;padding:3px 7px;border-radius:5px;margin-left:6px;letter-spacing:0; }
.sort-control { display:flex;gap:7px;align-items:center;font-size:9px;white-space:nowrap;color:#a0a0b0; }
.sort-control select { color:#74748d;background:none;border:0;font-size:9px;max-width:140px;padding:4px;cursor:pointer; }
.filter-bar { display:flex;gap:12px;align-items:center;margin-bottom:13px; }
.search-control { display:flex;align-items:center;gap:11px;border:1px solid #e6e7ef;background:white;border-radius:7px;padding:0 13px;height:43px;flex:1;min-width:150px;color:#a2a3b6; }
.search-control:focus-within { border-color:#b09bdf;box-shadow:0 0 0 3px #e8dffd55; }
.search-control input { padding:8px 0;flex:1;outline:none;border:0;background:none;color:#55576f;font-size:11px;width:100%; }
input::placeholder { color:#a5a5b5; }
.search-control kbd { font-size:10px;border:1px solid #eeeef4;border-radius:3px;min-width:16px;height:18px;text-align:center;color:#b4b3c0; }
.select-control { display:flex;align-items:center;gap:7px;border:1px solid #e6e7ef;border-radius:7px;padding:0 12px;height:43px;color:#a1a0b1;background:white; }
.select-control select { border:0;background:none;outline:none;cursor:pointer;color:#838297;font-size:10px;padding:9px 3px;max-width:200px; }
.results-caption { display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#9b9caa;margin-bottom:17px; }
.results-caption > span:last-child { display:flex;align-items:center;gap:5px;color:#aaaab9; }
.pokemon-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px; }
.pokemon-card { border:1px solid #e7e8ef;border-radius:10px;background:white;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s; }
.pokemon-card:hover { transform:translateY(-3px);box-shadow:0 7px 20px #24223e09;border-color:#c9bedf; }
.card-art { background:var(--card-tint);position:relative;height:158px;padding:13px; }
.dex-number { color:#9c9eaa;font-size:9px;font-weight:500;letter-spacing:.3px; }
.team-toggle { position:absolute;top:11px;right:11px;width:25px;height:25px;border-radius:50%;background:#ffffff9e;color:#a7a4ab;display:grid;place-items:center;padding:0;z-index:3; }
.team-toggle:hover { color:var(--primary);background:white; }
.team-toggle.is-added { color:var(--primary);background:#fff; }
.sprite-button { display:grid;place-items:center;position:absolute;inset:27px 0 0;width:100%;padding:0; }
.sprite-button > .sprite { width:123px;height:123px;transition:transform .2s; }
.pokemon-card:hover .sprite-button > .sprite { transform:translateY(-4px); }
.card-watermark { position:absolute;right:17px;bottom:10px;color:#ffffff69;transform:rotate(-20deg); }
.card-watermark .pokeball { width:103px;height:103px;border-width:11px; }
.card-watermark .pokeball::before { top:36px;height:11px; }
.card-watermark .pokeball i { background:var(--card-tint);width:35px;height:35px;top:23px;left:23px;border-width:9px; }
.card-info { display:block;text-align:left;width:100%;padding:15px 15px 17px; }
.card-name { display:flex;align-items:center;justify-content:space-between;gap:5px;font-weight:650;font-size:14px;letter-spacing:-.3px; }
.card-name svg { color:#c8c7d2;width:14px; }
.card-types { display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:9px; }
.type-badge { --type-bg:#f0eeee;--type-ink:#898784;display:inline-flex;align-items:center;gap:5px;background:var(--type-bg);color:var(--type-ink);padding:3px 8px;border-radius:4px;font-size:9px;font-weight:550;line-height:1.45;white-space:nowrap; }
.type-dot { width:5px;height:5px;background:currentColor;border-radius:50%;opacity:.8; }
.type-normal { --type-bg:#eeece8;--type-ink:#8d8a7e; }
.type-fighting { --type-bg:#fae7e5;--type-ink:#bb7671; }
.type-flying { --type-bg:#eeeafa;--type-ink:#9c88cd; }
.type-poison { --type-bg:#f1e7f6;--type-ink:#ad83bd; }
.type-ground { --type-bg:#f3eadb;--type-ink:#b19b6b; }
.type-rock { --type-bg:#efecdd;--type-ink:#a59865; }
.type-bug { --type-bg:#eef0dc;--type-ink:#9baf60; }
.type-ghost { --type-bg:#eeebf7;--type-ink:#8d83b0; }
.type-steel { --type-bg:#e8eef1;--type-ink:#8b9da7; }
.type-fire { --type-bg:#fce9df;--type-ink:#dba078; }
.type-water { --type-bg:#e5effb;--type-ink:#7c9dcf; }
.type-grass { --type-bg:#e5f0df;--type-ink:#8caf79; }
.type-electric { --type-bg:#fbf0ce;--type-ink:#c7ad50; }
.type-psychic { --type-bg:#f9e4ec;--type-ink:#d28eac; }
.type-ice { --type-bg:#e0f2f1;--type-ink:#75b4b8; }
.type-dragon { --type-bg:#e9e4f8;--type-ink:#9984c5; }
.type-dark { --type-bg:#e9e6ed;--type-ink:#91849f; }
.type-fairy { --type-bg:#f7e6f1;--type-ink:#c38eb6; }
.load-more { display:flex;flex-direction:column;align-items:center;gap:10px;margin:29px 0 15px; }
.load-more .button { padding:10px 32px; }
.load-more > span { color:#a4a1b0;font-size:9px; }
.main-footer { max-width:1530px;margin:32px auto 0;padding:20px 42px 25px;display:flex;justify-content:space-between;border-top:1px solid #ebebf3;color:#b3b2c0;font-size:8px;gap:20px; }
.main-footer > span:first-child { display:flex;align-items:center;gap:8px; }
.main-footer .pokeball { width:12px;height:12px;border-width:1.3px; }
.main-footer .pokeball::before { top:4px;height:1.3px; }
.main-footer .pokeball i { width:4px;height:4px;border-width:1px;left:2.7px;top:2.7px;background:#f6f7fb; }
.main-footer a { color:#8f87aa; }
.icon-button { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:5px;border-radius:6px;color:#9290a4; }
.icon-button:hover { background:#ffffff77;color:var(--primary); }
.empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 20px;text-align:center;color:#aaa2bb;gap:15px; }
.empty-state h3 { color:#69617e;font-size:20px; }
.empty-state p { color:#aaa2b4;font-size:12px; }
.initial-loading { min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#807790;font-size:13px; }
.loading-ball { width:44px;height:44px;border:4px solid #e2daef;border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite; }
@keyframes spin { to {transform:rotate(360deg);} }
.error-state p { max-width:550px;text-align:center; }
.muted { color:#9693a5; }.small { font-size:10px; }
.panel { background:white;border:1px solid var(--border);border-radius:11px;padding:25px; }
.panel-note { font-size:10px;color:#a1a0b1;line-height:1.8;margin-top:17px; }
.panel-heading { display:flex;align-items:center;gap:12px;margin-bottom:23px; }
.panel-heading h2 { font-size:15px; }.panel-heading p { color:#9d98ac;font-size:9px;margin-top:5px; }
.live-badge { display:flex;align-items:center;gap:5px;color:#83ab97;font-size:9px;white-space:nowrap;margin-left:auto; }
.live-badge i { width:4px;height:4px; }
.lab-layout { display:grid;grid-template-columns:300px minmax(0,1fr);gap:23px;align-items:start; }
.combatants { position:relative;display:grid;gap:16px; }
.combatant { border:1px solid var(--border);border-radius:11px;background:white;padding:20px; }
.combatant-label { display:flex;align-items:center;justify-content:space-between;color:#a099b2;font-size:8px;letter-spacing:1.4px; }
.combatant-label svg { color:#b5aacb; }
.combatant-main { display:flex;align-items:center;gap:13px;margin:16px 0; }
.combatant-sprite { width:91px;height:90px;border-radius:11px;background:var(--card-tint);display:grid;place-items:center; }
.combatant-sprite img { width:90px;height:90px; }
.combatant-main h2 { margin-top:3px;font-size:20px; }
.combatant-main .card-types { gap:4px;margin-top:7px; }
.combatant-main .type-badge { padding:3px 5px;font-size:8px; }
.field-label { display:block;font-size:9px;color:#8f899f;margin-top:12px; }
.text-input { display:block;width:100%;border:1px solid #e8e5ef;background:#fdfcfe;border-radius:6px;color:#59516d;font-size:11px;padding:10px;margin-top:6px; }
.ability-note { display:flex;gap:5px;align-items:start;font-size:8px;color:#a5a0b1;margin:11px 0 0;line-height:1.6; }
.ability-note svg { flex-shrink:0;margin-top:1px; }
.swap-button { position:absolute;left:calc(50% - 17px);top:calc(50% - 17px);background:#faf8fe;box-shadow:0 0 0 5px #f6f7fb;border:1px solid #ded7ed;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;color:#a18bc8;z-index:2; }
.swap-button:hover { background:#e9e2f8;transform:rotate(180deg); }
.inference-panel { border:1px solid #e5dfef;border-radius:11px;background:white;padding:25px; }
.inference-panel .stat-icon { width:35px;height:35px;border-radius:9px; }
.top-recommendation { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px;background:#f4f0fc;border:1px solid #eae2f8;border-radius:9px; }
.top-recommendation .eyebrow { font-size:8px;letter-spacing:1.2px; }
.top-recommendation h3 { font-size:26px;letter-spacing:-.7px;color:#6e5595; }
.recommendation-tags { display:flex;align-items:center;gap:7px;margin-top:12px; }
.effectiveness-score { text-align:center;min-width:86px; }
.effectiveness-score strong { display:block;color:#8b70c3;font-size:37px;letter-spacing:-1.5px;line-height:1.15; }
.effectiveness-score > span { font-size:9px;color:#a592bd; }
.category-pill { display:inline-block;background:#f2f0f4;border-radius:4px;padding:3px 7px;font-size:9px;color:#a098ac; }
.stab-pill { background:#e7f0e7;color:#8bae89;border-radius:4px;font-size:8px;padding:3px 7px; }
.recommendation-metrics { display:flex;gap:20px;padding:17px 4px;border-bottom:1px solid #efedf4;margin-bottom:22px; }
.recommendation-metrics > span { flex:1;color:#aaa3b6;font-size:9px; }
.recommendation-metrics strong { display:block;color:#726780;font-size:16px;margin-top:3px;font-weight:600; }
.reasoning h3 { display:flex;align-items:center;gap:8px;color:#7f728e;font-size:12px; }
.reasoning ol { list-style:none;padding:0;margin:17px 0 0; }
.reasoning li { display:flex;align-items:start;gap:10px;font-size:10px;color:#93889e;margin-bottom:12px;line-height:1.7; }
.rule-id { display:inline-block;font-family:Consolas,monospace;font-size:9px;letter-spacing:.2px;background:#f0ebf7;color:#a08abb;border-radius:4px;padding:2px 6px;line-height:1.5;flex-shrink:0; }
.analysis-caveat { display:flex;align-items:start;gap:9px;background:#f8f7fb;border-radius:6px;padding:11px 13px;margin-top:20px;color:#b0a6bb; }
.analysis-caveat svg { flex-shrink:0;margin-top:1px; }
.analysis-caveat p { font-size:9px;line-height:1.8; }
.lab-bottom { display:grid;grid-template-columns:1.15fr 1fr;gap:23px;margin-top:24px;align-items:start; }
.compact { margin-bottom:17px; }.compact h2 { font-size:15px; }
.table-scroll { overflow-x:auto;scrollbar-width:thin; }
.data-table { width:100%;border-collapse:collapse;text-align:left;white-space:nowrap;font-size:11px; }
.data-table th { font-size:9px;font-weight:500;color:#aaa4b5;background:#fbfafc;padding:12px 10px;border-bottom:1px solid #eeebf3; }
.data-table td { padding:13px 10px;border-bottom:1px solid #f0eef5;color:#91879e; }
.data-table tr:last-child td { border-bottom:0; }
.text-link { display:inline-flex;align-items:center;gap:7px;color:#8a70b8;font-size:inherit;padding:0;text-align:left; }
.text-link:hover { color:#60448c;text-decoration:underline; }
.data-table .positive { color:#8bb18a; }.data-table .negative { color:#d19797; }
.defense-group { margin-bottom:19px; }
.defense-group h4 { font-size:10px;color:#9c90a7;margin-bottom:10px;font-weight:500; }
.defense-tags { display:flex;flex-wrap:wrap;gap:7px; }
.defense-tag { display:inline-flex;align-items:center;gap:5px; }
.defense-tag b { font-size:9px;font-weight:500;color:#a497af; }
.methodology { padding-top:15px;margin-top:17px;border-top:1px solid #f0edf5; }
.methodology summary { font-size:10px;color:#9c89b1;cursor:pointer; }
.methodology p { font-size:10px;color:#a49bab;margin-top:12px;line-height:1.9; }
.team-slots { display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:27px; }
.team-slot { min-height:220px;position:relative;background:white;border:1px solid var(--border);border-radius:10px;text-align:center;padding:22px;display:flex;flex-direction:column;align-items:center; }
.slot-number { position:absolute;top:13px;left:15px;font-size:9px;color:#c0b8ce; }
.empty-slot { border-style:dashed;border-color:#dcd5e8;color:#b0a3c4;justify-content:center;gap:6px;background:#f9f7fd; }
.empty-slot:hover { background:#f0eafa;border-color:#c5b7dc; }
.empty-slot strong { font-size:12px;font-weight:500; }.empty-slot > span:last-child { font-size:9px; }
.add-circle { width:45px;height:45px;border:1px solid #e6deef;border-radius:50%;display:grid;place-items:center;margin-bottom:9px; }
.remove-team { position:absolute;right:13px;top:13px;color:#c0b3cc;padding:0; }
.slot-detail { display:flex;flex-direction:column;align-items:center; }
.slot-detail h3 { margin-top:5px; }.slot-detail img { width:108px;height:108px; }
.team-slot > .small { margin-top:11px; }
.team-summary { display:flex;align-items:center;gap:17px;padding:23px;border:1px solid #e7e0ef;border-radius:10px;background:#f4f0fa;margin-bottom:27px; }
.team-summary h2 { font-size:16px;color:#8c75a6; }.team-summary p { margin-top:8px;font-size:11px;color:#a194b1;line-height:1.7; }
.team-empty { text-align:center;display:flex;flex-direction:column;align-items:center;padding:30px 0 40px; }
.team-empty .stat-icon { width:62px;height:62px;margin-bottom:20px; }.team-empty h2 { color:#8b79a3; }.team-empty p { margin:14px 0 23px;font-size:12px;line-height:1.8;color:#aaa0b7; }
.coverage-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px; }
.coverage-item { display:flex;gap:10px;align-items:center; }.coverage-item > .type-badge { width:79px;flex-shrink:0; }
.coverage-bars { flex:1;display:grid;gap:4px; }.coverage-track { background:#f5f1f7;height:5px;border-radius:4px;overflow:hidden; }.coverage-track > span { height:100%;display:block;border-radius:4px; }
.weak-bar { background:#e6a197; }.resist-bar { background:#9fbca5; }.coverage-values { display:grid;gap:1px;font-size:9px;color:#b2969f; }.coverage-values b:last-child { color:#9db4a7; }
.coverage-legend { display:flex;gap:14px;color:#aaa1b5;font-size:8px; }.coverage-legend span { display:flex;align-items:center;gap:5px; }
.legend-dot { display:inline-block;width:6px;height:6px;border-radius:50%; }.weak-dot { background:#e6a197; }.resist-dot { background:#9fbca5; }
.table-panel { padding:10px 16px; }.moves-table th { padding:14px 12px; }.moves-table td { padding:16px 12px; }.moves-table td:first-child { min-width:165px; }
.ability-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:23px; }
.ability-card { border:1px solid var(--border);border-radius:10px;background:white;padding:22px;display:flex;flex-direction:column; }
.ability-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:15px; }.ability-header .stat-icon { width:36px;height:36px;border-radius:10px; }
.ability-card h2 { font-size:17px;color:#786586; }.ability-card > p { font-size:11px;color:#a094ab;line-height:1.8;margin:12px 0 18px;flex:1; }
.ability-card .text-link { font-size:9px; }.modeled-tag { display:flex;gap:4px;align-items:center;font-size:8px;color:#8dab98;margin-top:14px; }
.type-legend { display:flex;align-items:center;gap:9px;font-size:10px;color:#a498b0;margin:7px 0 20px; }.type-legend .cell { margin-left:15px; }.type-legend .cell:first-child { margin-left:0; }
.type-matrix-panel { padding:20px 15px; }.type-matrix { border-collapse:separate;border-spacing:3px;white-space:nowrap;text-align:center; }
.type-matrix th { font-size:8px;font-weight:500;height:40px; }.type-matrix th:first-child { padding-right:12px;text-align:left;position:sticky;left:0;z-index:2;background:white;min-width:100px; }
.type-matrix thead th { vertical-align:bottom;padding-bottom:8px; }.matrix-type { font-size:8px;writing-mode:vertical-rl;transform:rotate(180deg);padding:7px 8px;color:var(--type-ink);min-height:65px;background:var(--type-bg);border-radius:4px; }
.matrix-corner { color:#c0b7ca;font-size:7px!important;vertical-align:middle!important; }.type-matrix td { min-width:28px; }
.cell { display:inline-grid;place-items:center;border-radius:3px;width:27px;height:27px;font-size:9px; }.cell.normal { background:#f7f5f9;color:#d0c8d8; }.cell.super { background:#e5f0df;color:#94ae7e; }.cell.half { background:#fae8e1;color:#c99987; }.cell.zero { background:#e5deed;color:#a38eb6; }
.info-strip { display:flex;align-items:start;gap:12px;background:#efebf7;border-radius:9px;margin-top:20px;padding:20px;color:#a593bc; }.info-strip svg { flex-shrink:0; }.info-strip p { color:#a091b2;font-size:11px;line-height:1.8; }
.knowledge-grid { display:grid;grid-template-columns:1.1fr 1fr;gap:22px; }.source-panel > .stat-icon { margin-bottom:17px; }.knowledge-grid h2 { font-size:18px;color:#847090; }.knowledge-grid .panel > p { font-size:11px;color:#a093ac;line-height:1.9;margin-top:14px; }
.source-facts { font-size:10px;margin:24px 0; }.source-facts > div { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid #f1edf5; }.source-facts dt { color:#b0a3bb; }.source-facts dd { margin:0;color:#96829f;text-align:right;font-size:9px; }.source-facts code { font-family:Consolas,monospace; }
.source-links { display:flex;gap:20px;align-items:center;font-size:9px; }.source-links .button { font-size:9px; }
.inference-steps { margin-top:28px; }.inference-steps > div { display:flex;gap:15px;margin:0 0 28px; }.inference-steps > div > span { width:30px;height:30px;border:1px solid #e5dfee;background:#f7f3fb;color:#b4a1c6;border-radius:50%;display:grid;place-items:center;font-size:10px;flex-shrink:0; }.inference-steps h3 { font-size:13px;color:#95809f;margin-bottom:8px; }.inference-steps p { color:#b0a3ba;font-size:11px;line-height:1.8; }
.local-callout { display:flex;gap:10px;background:#eef4ec;color:#9ab08e;padding:15px;border-radius:7px;font-size:10px;line-height:1.8; }.local-callout svg { flex-shrink:0;margin-top:2px; }
.rule-panel { margin-top:23px; }.rule-panel > h2 { font-size:18px;color:#8c769d;margin-bottom:25px; }.rule-grid { display:grid;grid-template-columns:1fr 1fr;gap:25px 30px; }.rule-card { display:flex;gap:11px;align-items:start; }.rule-card h3 { font-size:12px;color:#9c85ab; }.rule-card p { font-size:10px;color:#b0a1bc;margin-top:7px;line-height:1.8; }
.limitations { margin-top:23px; }.limitations h2 { color:#a08aad;font-size:16px; }.limitations p { color:#b4a6bd;font-size:11px;line-height:1.9;margin-top:13px; }
.modal-open { overflow:hidden; }.modal-backdrop { position:fixed;inset:0;background:#15132d66;backdrop-filter:blur(5px);z-index:60;display:flex;justify-content:flex-end;animation:fade-in .18s ease; }
@keyframes fade-in { from{opacity:0;}to{opacity:1;} }
.detail-modal { width:535px;max-width:100%;height:100%;background:#fff;overflow:auto;box-shadow:-10px 0 70px #20182b22;outline:none;animation:slide-in .2s ease; }
@keyframes slide-in { from{transform:translateX(30px);}to{transform:translateX(0);} }
.detail-hero { padding:20px 25px 25px;background:var(--card-tint);position:relative; }.detail-top { display:flex;align-items:center;justify-content:space-between; }.detail-top > div { display:flex;gap:5px; }
.detail-sprite { display:grid;place-items:center;height:177px; }.detail-sprite img { height:190px;width:190px;filter:drop-shadow(0 10px 7px #0000000b); }.detail-title { text-align:center; }.detail-title .eyebrow { font-size:8px;letter-spacing:1.3px;margin-bottom:7px;color:#a09da4; }.detail-title h2 { font-size:30px;letter-spacing:-.8px; }.detail-title .card-types { justify-content:center;margin-top:12px; }.detail-title .type-badge { font-size:10px; }
.shiny-toggle.is-shiny { color:#d4a451;background:#ffffffaa; }.detail-actions { display:flex;gap:10px;padding:22px 26px; }.detail-actions .button { flex:1;font-size:10px; }
.detail-tabs { display:flex;padding:0 25px;gap:28px;border-bottom:1px solid #eee9f3; }.detail-tabs button { padding:9px 0 14px;font-size:11px;color:#a69bae;border-bottom:2px solid transparent; }.detail-tabs button.active { color:#9678b8;border-color:#9a7abd; }
.detail-content { padding:24px 27px 40px; }.detail-content h3 { display:flex;align-items:center;justify-content:space-between;margin:24px 0 17px;color:#8f789d;font-size:13px; }.detail-content h3:first-child { margin-top:0; }
.physical-facts { display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #eee9f3;border-radius:8px;background:#fcfafd;padding:15px; }.physical-facts > div { text-align:center;border-right:1px solid #ece6f2; }.physical-facts > div:last-child { border:0; }.physical-facts span { display:block;color:#b2a5bd;font-size:9px; }.physical-facts strong { display:block;color:#96819f;font-size:17px;margin-top:4px;font-weight:600; }.physical-facts small { font-size:9px;font-weight:400; }
.stats-list { display:grid;gap:13px; }.stats-list > div { display:flex;align-items:center;gap:16px;font-size:10px;color:#a796b2; }.stats-list > div > span { width:85px; }.stats-list strong { width:22px;color:#9c8ba8;font-size:11px;font-weight:500;text-align:right; }.stat-track { flex:1;background:#f5f1f8;height:6px;border-radius:5px;overflow:hidden; }.stat-track i { display:block;background:var(--bar-color);height:100%;border-radius:5px; }
.special-label { display:inline-flex;align-items:center;gap:6px;color:#c3a15d;font-size:10px;background:#fff8e9;padding:5px 10px;border-radius:5px;margin-top:16px; }
.detail-abilities { display:grid;gap:10px; }.detail-abilities button { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px;border:1px solid #eee9f4;border-radius:7px;text-align:left; }.detail-abilities button:hover { background:#faf6fd; }.detail-abilities strong { color:#a087b3;font-size:11px;font-weight:600; }.detail-abilities small { color:#c0adcc;font-size:8px;margin-left:8px;background:#f3edf8;padding:2px 5px;border-radius:3px; }.detail-abilities p { color:#b4a3c0;font-size:10px;margin-top:5px;line-height:1.7; }.detail-abilities svg { color:#c5b6d0;flex-shrink:0; }
.evolution-family { display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap; }.evolution-family button { display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid transparent;padding:5px;border-radius:7px; }.evolution-family button.current { border-color:#e9e1f1;background:#faf7fc; }.evolution-family img { width:70px;height:70px; }.evolution-family button > span { color:#a890b6;font-size:9px; }.evolution-family > svg { color:#c8b8d4; }
.learnset-source { display:flex;gap:7px;align-items:center;color:#b5a4c1;font-size:9px;flex-wrap:wrap;margin-bottom:18px; }.learnset-source strong { font-weight:500;color:#ab8fbb; }.modal-search { margin-bottom:15px; }.learnset-table { font-size:10px; }.learnset-table td { padding:13px 5px; }.learnset-table th { padding:10px 5px; }.learnset-table .type-badge { font-size:8px;padding:2px 5px; }
.simple-modal { height:auto;max-height:85vh;margin:auto;border-radius:14px;width:515px; }.simple-modal-header { display:flex;justify-content:space-between;padding:24px 25px 0; }.simple-modal-content { padding:25px; }.simple-modal-content h2 { font-size:28px;color:#8e73a3; }.simple-modal-content h3 { margin:25px 0 13px;color:#a186b2; }.simple-modal-content .eyebrow { font-size:8px;letter-spacing:1.2px; }.move-description { margin:20px 0;color:#b29dc0;font-size:12px;line-height:1.9; }.move-facts { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#faf7fc;border:1px solid #eee5f4;border-radius:7px;padding:18px 8px;text-align:center; }.move-facts span { display:block;font-size:9px;color:#beaccb; }.move-facts strong { display:block;margin-top:8px;font-size:20px;color:#aa8cbd;font-weight:600; }
.ability-pokemon-list { display:grid;gap:7px; }.ability-pokemon-list button { display:flex;align-items:center;gap:10px;padding:5px 10px;border:1px solid #f0eaf5;border-radius:7px;text-align:left; }.ability-pokemon-list button:hover { background:#f9f4fc; }.ability-pokemon-list img { width:55px;height:55px; }.ability-pokemon-list button > span { flex:1;font-size:12px;color:#b091c3; }.ability-pokemon-list small { display:block;font-size:8px;color:#c5b0d3;margin-top:3px; }.ability-pokemon-list svg { color:#cdbbda; }
.sprite-missing { display:flex;align-items:center;justify-content:center;flex-direction:column;color:#c6b8cf;width:96px;height:96px;gap:8px;position:relative; }.sprite-missing small { font-size:8px; }.sprite-missing .pokeball i { background:var(--card-tint,#fff); }
#toast { position:fixed;bottom:26px;left:calc(50% + 119px);transform:translate(-50%,20px);z-index:100;color:white;background:#4b3e61;box-shadow:0 4px 30px #30203e22;border:1px solid #ffffff22;border-radius:8px;padding:12px 20px;font-size:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw; }
#toast.visible { opacity:1;transform:translate(-50%,0); }
/* Keep secondary information and type labels readable on the pale surfaces. */
.type-normal { --type-ink:#68634f; }.type-fighting { --type-ink:#a14d48; }.type-flying { --type-ink:#795ca6; }
.type-poison { --type-ink:#8b5a9f; }.type-ground { --type-ink:#8a6c34; }.type-rock { --type-ink:#806d30; }
.type-bug { --type-ink:#6d802c; }.type-ghost { --type-ink:#6c5b93; }.type-steel { --type-ink:#607c8b; }
.type-fire { --type-ink:#ae653a; }.type-water { --type-ink:#507bab; }.type-grass { --type-ink:#5a813f; }
.type-electric { --type-ink:#8f7626; }.type-psychic { --type-ink:#a9557b; }.type-ice { --type-ink:#3c858a; }
.type-dragon { --type-ink:#7251a7; }.type-dark { --type-ink:#6c567c; }.type-fairy { --type-ink:#995682; }
.reasoning li,.data-table td,.move-description,.ability-card>p,.detail-abilities p,.inference-steps p,.knowledge-grid .panel>p,.limitations p,.rule-card p,.team-summary p,.info-strip p,.analysis-caveat p { color:#797082; }
.reasoning li { font-size:11px; }
.detail-content h3,.detail-abilities strong,.stats-list strong,.physical-facts strong,.ability-pokemon-list button>span,.simple-modal-content h2,.simple-modal-content h3,.move-facts strong,.rule-card h3,.knowledge-grid h2,.inference-steps h3 { color:#786184; }
.field-label,.defense-group h4,.panel-note,.ability-note,.data-table th,.learnset-source,.muted,.physical-facts span,.stats-list>div,.source-facts dt,.source-facts dd,.move-facts span,.ability-pokemon-list small,.methodology p { color:#817689; }
.panel-heading p,.recommendation-metrics>span,.defense-tag b,.section-heading p,.page-heading p,.banner-content p { color:#80778e; }
.analysis-caveat { color:#93819f; }.cell.normal { color:#b6a9bf; }.cell.super { color:#5f7f46; }.cell.half { color:#a56951; }.cell.zero { color:#766087; }
@media(min-width:1500px) { .pokemon-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }.card-art { height:175px; }.sprite-button>.sprite { width:138px;height:138px; }.hero-charizard { width:240px;height:240px; }.expert-banner { min-height:260px; }.banner-content { padding:32px; }.banner-content h2 { font-size:28px; } }
@media(max-width:1200px) { .sidebar { width:212px;padding-left:13px;padding-right:13px; }.brand { gap:9px;padding:0 8px; }.brand > span:last-child { font-size:22px; }.brand small { font-size:6px;letter-spacing:1px; }.workspace { margin-left:212px; } main { padding:30px 27px 10px; }.topbar { padding:0 27px; }.stat-card { padding:17px 12px;gap:10px; }.stat-card strong { font-size:22px; }.stat-card div>span { font-size:8px; }.stat-icon { width:37px;height:37px; }.stat-grid { gap:11px; }.pokemon-grid { gap:14px; }.card-art { height:142px; }.sprite-button>.sprite { width:110px;height:110px; }.card-info { padding:12px; }.card-name { font-size:13px; }.banner-content { padding:26px; }.banner-content h2 { font-size:22px; }.banner-art { margin-right:0;min-width:220px; }.hero-charizard { width:200px;height:200px; }.main-footer { padding-left:27px;padding-right:27px; }.lab-layout { grid-template-columns:260px minmax(0,1fr);gap:17px; }.combatant { padding:17px; }.inference-panel { padding:20px; }.panel-heading h2 { font-size:13px; }.live-badge { display:none; }.top-recommendation { padding:17px; }.top-recommendation h3 { font-size:23px; }.lab-bottom { gap:17px; }.coverage-grid { grid-template-columns:repeat(2,1fr); }.knowledge-grid { grid-template-columns:1fr; }#toast { left:calc(50% + 106px); } }
@media(max-width:1000px) { .pokemon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.stat-grid { grid-template-columns:repeat(2,1fr); }.page-heading .button { display:none; } h1 { font-size:32px; }.banner-art { min-width:190px; }.banner-content h2 { font-size:20px; }.banner-content p { max-width:250px; }.hero-charizard { width:175px;height:175px; }.orbit { width:160px;height:160px; }.orbit-two { width:205px;height:205px; }.banner-content { padding:24px; }.expert-banner { min-height:234px; }.filter-bar { flex-wrap:wrap; }.filter-bar .search-control { flex-basis:100%; }.filter-bar .select-control { flex:1; }.select-control select { flex:1;max-width:100%; }.lab-layout { grid-template-columns:1fr; }.combatants { grid-template-columns:1fr 1fr;gap:17px; }.swap-button { top:calc(50% - 17px);left:calc(50% - 17px); }.lab-bottom { grid-template-columns:1fr; }.team-slots { grid-template-columns:repeat(2,1fr); }.ability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.main-footer { flex-direction:column;gap:10px; }.results-caption>span:last-child { display:none; }.section-heading h2 { font-size:16px; }.rule-grid { grid-template-columns:1fr; } }
@media(max-width:760px) { .sidebar { transform:translateX(-100%);transition:transform .2s;width:238px; }.sidebar.is-open { transform:translateX(0); }.sidebar-backdrop { position:fixed;inset:0;background:#17142f66;z-index:29; }.workspace { margin-left:0; }.mobile-menu { display:inline-flex!important;margin-right:2px; }.topbar { height:64px;padding:0 22px; }.topbar-right { gap:16px; }.local-status { font-size:9px; }.breadcrumb { font-size:10px;gap:8px; } main { padding:27px 22px 10px; }.main-footer { padding:20px 22px; }#toast { left:50%; } h1 { font-size:32px; }.page-heading { margin-bottom:24px; }.eyebrow { font-size:8px;letter-spacing:1.4px; }.page-heading p { font-size:11px; }.stat-card { padding:18px; }.stat-card div>span { font-size:10px; }.expert-banner { margin-bottom:28px; }.banner-art { min-width:190px;width:35%; }.banner-content { padding:24px; }.pokemon-grid { gap:14px; }.card-art { height:150px; }.sprite-button>.sprite { width:118px;height:118px; }.card-info { padding:13px; }.card-name { font-size:14px; }.filter-bar .search-control { flex-basis:auto; }.filter-bar .select-control { flex:0 1 auto; }.filter-bar { gap:9px; }.coverage-legend { display:none; }.type-legend { font-size:8px;gap:5px; }.type-legend .cell { margin-left:8px; }.panel { padding:21px; } }
@media(max-width:520px) { main { padding:25px 17px 10px; }.topbar { padding:0 16px; }.topbar-right { gap:12px; }.local-status { display:none; }.breadcrumb { gap:8px; } h1 { font-size:29px;letter-spacing:-1px; }.page-heading p { font-size:10px;max-width:330px; }.stat-grid { gap:10px;margin-bottom:20px; }.stat-card { padding:15px 12px;gap:10px; }.stat-card strong { font-size:22px; }.stat-card div>span { font-size:8px; }.stat-icon { width:35px;height:35px;border-radius:10px; }.expert-banner { min-height:230px; }.banner-content { padding:21px 18px;max-width:75%; }.banner-label { font-size:6.5px;gap:5px;letter-spacing:1px; }.banner-content h2 { font-size:20px;max-width:240px; }.banner-content p { font-size:9px;max-width:210px;line-height:1.7; }.banner-button { font-size:9px;padding:10px 12px;margin-top:16px; }.banner-art { position:absolute;right:-46px;bottom:-9px;height:210px;width:170px;min-width:0;opacity:.75; }.hero-charizard { width:160px;height:160px;margin-top:20px; }.banner-art .art-note { display:none; }.orbit { width:140px;height:140px; }.orbit-two { width:180px;height:180px; }.star-one { display:none; }.star-two { bottom:20px; }.section-heading { gap:10px;margin-bottom:18px; }.section-heading h2 { font-size:15px; }.section-heading p { font-size:9px; }.count-pill { font-size:8px;padding:3px 5px;margin-left:3px; }.sort-control { font-size:0; }.sort-control select { max-width:106px;font-size:8px;padding:4px 0; }.filter-bar .search-control { flex-basis:100%; }.filter-bar .select-control { flex:1;min-width:0;padding:0 9px; }.select-control select { font-size:9px; }.pokemon-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.card-art { height:144px;padding:12px; }.card-info { padding:13px 12px 14px; }.card-name { font-size:14px; }.card-types { gap:4px; }.type-badge { font-size:8px;padding:3px 6px; }.card-watermark { right:10px; }.card-watermark .pokeball { width:90px;height:90px;border-width:9px; }.card-watermark .pokeball::before { top:31px;height:9px; }.card-watermark .pokeball i { top:20px;left:20px;width:32px;height:32px;border-width:8px; }.main-footer { font-size:7px;padding:20px 17px; }.combatants { grid-template-columns:1fr; }.combatant { padding:20px; }.combatant-main { margin:14px 0; }.swap-button { top:calc(50% - 17px); }.inference-panel { padding:20px 16px; }.panel-heading h2 { font-size:12px; }.panel-heading p { font-size:8px;line-height:1.5; }.panel-heading { gap:10px; }.panel-heading .stat-icon { display:none; }.top-recommendation { padding:18px 14px; }.top-recommendation h3 { font-size:24px; }.effectiveness-score strong { font-size:31px; }.effectiveness-score { min-width:70px; }.top-recommendation .eyebrow { font-size:7px;letter-spacing:1px; }.recommendation-metrics { gap:15px; }.recommendation-metrics>span { font-size:8px; }.reasoning li { font-size:9px; }.team-slots { gap:11px; }.team-slot { min-height:210px;padding:20px 8px; }.team-slot h3 { font-size:13px; }.team-summary { padding:17px;gap:12px; }.team-summary h2 { font-size:14px; }.team-summary p { font-size:10px; }.team-summary .stat-icon { display:none; }.coverage-grid { gap:18px;grid-template-columns:1fr; }.panel .section-heading { align-items:start; }.ability-grid { grid-template-columns:1fr;gap:13px; }.ability-card { padding:20px; }.type-legend { gap:4px;font-size:7px;flex-wrap:wrap; }.type-legend .cell { width:21px;height:21px;margin-left:5px; }.source-facts>div { align-items:start; }.source-facts dt { font-size:9px; }.source-facts dd { font-size:8px;max-width:62%; }.source-links { gap:12px;font-size:8px; }.source-links .button { padding:9px 11px;font-size:8px; }.detail-actions { padding:19px 19px;gap:7px; }.detail-actions .button { font-size:9px;padding:10px 10px; }.detail-content { padding:22px 21px 35px; }.detail-tabs { padding:0 21px;gap:24px; }.simple-modal { width:calc(100% - 28px); }.detail-hero { padding:18px 21px 23px; }.ability-pokemon-list button>span { font-size:11px; }.info-strip { padding:17px;font-size:10px; }.type-matrix-panel { padding:15px 10px; }.detail-modal .type-badge { font-size:9px; }.learnset-table .type-badge { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }

/* Chat Interface */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 240px);
  min-height: 500px;
  max-height: 700px;
  background: var(--bg-elevated);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.chat-welcome {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 600px;
  margin: auto;
}

.chat-welcome h2 {
  font-size: 1.75rem;
  margin: 1rem 0 0.5rem;
  color: var(--text-primary);
}

.chat-welcome p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 1.5rem;
}

.chat-suggestions > span {
  margin-bottom: 0.5rem;
  align-self: flex-start;
}

.suggestion-chip {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  max-width: 500px;
}

.suggestion-chip:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateX(4px);
}

.chat-message {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.user-message .message-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: white;
}

.assistant-message .message-avatar {
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--accent);
}

.message-content {
  flex: 1;
  min-width: 0;
}

.user-message .message-content {
  display: flex;
  justify-content: flex-end;
}

.user-message .message-content p {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 12px 12px 4px 12px;
  max-width: 80%;
  word-wrap: break-word;
  font-size: 0.9375rem;
}

.assistant-message .message-text {
  background: var(--bg-base);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: 12px 12px 12px 4px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.assistant-message .message-text p {
  margin: 0;
}

.assistant-message .message-text p + p {
  margin-top: 1rem;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-left: 1rem;
}

.confidence-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.confidence-badge.high {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
}

.confidence-badge.medium {
  background: rgba(251, 146, 60, 0.1);
  color: rgb(251, 146, 60);
}

.confidence-badge.low {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
}

.trace-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trace-list li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
}

.trace-list li:last-child {
  border-bottom: none;
}

.trace-list code {
  background: var(--bg-base);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.chat-input-form {
  border-top: 1px solid var(--border);
  padding: 1rem;
  background: var(--bg-base);
}

.chat-input-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.chat-input {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: all 0.2s;
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.chat-send-button {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.chat-send-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.chat-send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

/* Reasoning details */
.reasoning {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 0.75rem;
}

.reasoning summary {
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reasoning summary::-webkit-details-marker {
  display: none;
}

.reasoning summary::before {
  content: '▶';
  font-size: 0.625rem;
  transition: transform 0.2s;
}

.reasoning[open] summary::before {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .chat-container {
    height: calc(100vh - 180px);
    max-height: none;
  }
  
  .user-message .message-content p {
    max-width: 90%;
  }
  
  .suggestion-chip {
    max-width: 100%;
  }
}