:root {
  color-scheme: dark;
  --bg: #0c0f14;
  --panel: #131822;
  --panel-soft: #171d28;
  --line: #283142;
  --text: #f4f7fb;
  --muted: #9aa7b8;
  --accent: #f4a62a;
  --max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
.site-header {
  width: min(var(--max), calc(100% - 40px));
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; gap: 10px; align-items: center; font-weight: 800; letter-spacing: .04em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #17110a; }
nav { display: flex; gap: 22px; color: var(--muted); font-size: 14px; }
main, footer { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.hero { padding: 84px 0 48px; max-width: 880px; }
.eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(42px, 7vw, 76px); line-height: 1.03; letter-spacing: -.045em; }
.hero-copy { max-width: 700px; margin: 24px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.search-shell { margin-top: 36px; display: grid; grid-template-columns: 1fr auto; max-width: 760px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.search-shell input, .search-shell button { min-height: 58px; border: 0; font: inherit; }
.search-shell input { padding: 0 18px; background: transparent; color: var(--text); }
.search-shell button { padding: 0 24px; background: var(--accent); color: #17110a; font-weight: 800; }
.search-shell :disabled { opacity: .72; cursor: not-allowed; }
.search-note { margin: 10px 4px 0; color: #748195; font-size: 13px; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; padding: 20px 0 32px; }
.panel { min-height: 210px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.panel-kicker { color: #738095; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.panel h2, .section-block h2 { margin: 10px 0 12px; font-size: 26px; letter-spacing: -.025em; }
.panel p { margin: 0; color: var(--muted); line-height: 1.65; }
.state { display: inline-flex; margin-top: 24px; padding: 7px 10px; border-radius: 999px; background: var(--panel-soft); color: #d7deea; font-size: 12px; }
.section-block { margin: 16px 0 32px; padding: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; }
.tool-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.tool-list span { padding: 17px; border-radius: 12px; background: var(--panel); color: #d9e0ea; }
.legacy-note { margin: 36px 0 90px; padding: 22px 24px; border-radius: 14px; background: #11161f; border: 1px solid #252d3b; }
.legacy-note strong { font-size: 15px; }
.legacy-note p { margin: 10px 0 0; color: var(--muted); line-height: 1.65; font-size: 14px; }
footer { min-height: 76px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #6f7b8d; font-size: 12px; }
.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; }
@media (max-width: 760px) {
  .site-header, main, footer { width: min(100% - 28px, var(--max)); }
  nav { gap: 12px; }
  .hero { padding-top: 56px; }
  .hero-copy { font-size: 16px; }
  .status-grid, .section-block { grid-template-columns: 1fr; }
  .section-block { gap: 14px; padding-inline: 0; }
  .tool-list { grid-template-columns: 1fr; }
  footer { align-items: flex-start; justify-content: center; flex-direction: column; gap: 6px; }
}


/* Step 4: character search */
.search-note[data-tone="loading"] { color: #d8b36f; }
.search-note[data-tone="success"] { color: #8fd9af; }
.search-note[data-tone="warning"] { color: #e8c37b; }
.search-note[data-tone="error"] { color: #ef9b9b; }
.state-live { color: #11170f; background: #9fdfa5; }
.character-result { margin: 0 0 18px; }
.character-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, #151b25, #11161f);
}
.character-visual {
  min-height: 280px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(244,166,42,.18), transparent 38%),
    linear-gradient(180deg, #1a2130, #11151d);
}
.character-visual img {
  display: block;
  max-width: 100%;
  max-height: 270px;
  object-fit: contain;
}
.character-content { padding: 30px 32px; }
.character-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.character-content h2 { margin: 8px 0 6px; font-size: 34px; letter-spacing: -.035em; }
.share-button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #344155;
  border-radius: 10px;
  background: #171d28;
  color: #dce3ed;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.profile-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.profile-actions a.share-button{display:inline-flex;align-items:center}
.character-summary { margin: 0; color: #c7d0dc; font-size: 16px; }
.character-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin: 25px 0 0;
}
.character-facts div { padding: 14px 15px; border-radius: 12px; background: #0f141c; border: 1px solid #222b39; }
.character-facts dt { color: #77869a; font-size: 11px; }
.character-facts dd { margin: 5px 0 0; color: #f2f5f8; font-size: 16px; font-weight: 800; }
.character-meta { margin: 18px 0 0; color: #6f7d90; font-size: 11px; }
.partial-warning { margin-bottom: 10px; padding: 11px 14px; border: 1px solid #65522d; border-radius: 11px; background: #211b12; color: #e8c37b; font-size: 12px; }

@media (max-width: 760px) {
  .character-card { grid-template-columns: 1fr; }
  .character-visual { min-height: 210px; }
  .character-visual img { max-height: 205px; }
  .character-content { padding: 22px 20px; }
  .character-content h2 { font-size: 29px; }
  .character-facts { grid-template-columns: 1fr 1fr; }
}


/* Character equipment details */
.equipment-section {
  margin: 16px 0 28px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #11161f;
}
.equipment-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.equipment-section-head h3 { margin: 6px 0 0; font-size: 25px; letter-spacing: -.03em; }
.equipment-section-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.equipment-tabs { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.equipment-tabs button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #2a3444;
  border-radius: 999px;
  background: #171d28;
  color: #9fabbb;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.equipment-tabs button.active { border-color: rgba(244,166,42,.52); background: rgba(244,166,42,.12); color: #ffd692; }
.equipment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.equipment-card { padding: 15px; border: 1px solid #252e3c; border-radius: 15px; background: #0d1219; min-width: 0; }
.equipment-top { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 12px; align-items: center; }
.equipment-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 11px; background: #181f2a; }
.equipment-icon img { max-width: 48px; max-height: 48px; }
.equipment-slot { color: #758398; font-size: 10px; }
.equipment-card h4 { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.equipment-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.equipment-badges span { padding: 4px 6px; border-radius: 7px; background: #181f29; color: #9eacbd; font-size: 9px; }
.equipment-badges .equipment-star { color: #ffd073; background: rgba(244,166,42,.10); }
.equipment-option-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.equipment-option-summary span { padding: 5px 7px; border-radius: 7px; background: #141b24; color: #aeb9c7; font-size: 10px; }
.equipment-analysis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 8px; }
.equipment-analysis > div { padding: 13px 14px; border: 1px solid #242e3c; border-radius: 11px; background: #0d1219; }
.equipment-analysis span { display: block; color: #78869a; font-size: 10px; }
.equipment-analysis strong { display: block; margin-top: 5px; color: #edf1f6; font-size: 16px; }
.analysis-lines { display: flex; flex-wrap: wrap; gap: 7px 18px; margin: 0 0 16px; padding: 10px 2px; color: #909daf; font-size: 11px; }
.analysis-lines p { margin: 0; }
.equipment-details { margin-top: 12px; border-top: 1px solid #202836; }
.equipment-details summary { padding: 11px 0 0; color: #97a5b7; font-size: 10px; font-weight: 800; cursor: pointer; }
.equipment-detail-body { padding-top: 2px; }
.equipment-upgrade-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.equipment-upgrade-row span { padding: 5px 7px; border-radius: 7px; background: #181f29; color: #aeb9c7; font-size: 10px; }
.equipment-option-group { margin-top: 12px; }
.equipment-option-group > strong { display: block; margin-bottom: 7px; color: #7f8da0; font-size: 10px; }
.equipment-option-list { display: flex; flex-wrap: wrap; gap: 5px; }
.equipment-option-list span { padding: 5px 7px; border-radius: 7px; background: #141b24; color: #bdc7d3; font-size: 10px; }
.equipment-potential { margin-top: 13px; padding-top: 11px; border-top: 1px solid #202836; }
.equipment-potential-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #7f8da0; font-size: 10px; }
.equipment-potential-head strong { color: #d7dee8; }
.equipment-potential-head strong[data-grade*="레전"] { color: #83db91; }
.equipment-potential-head strong[data-grade*="유니크"] { color: #f1d85b; }
.equipment-potential-head strong[data-grade*="에픽"] { color: #b08cff; }
.equipment-potential ul { margin: 7px 0 0; padding: 0; list-style: none; }
.equipment-potential li { margin-top: 4px; color: #ccd4de; font-size: 11px; line-height: 1.45; }
.equipment-soul { display: grid; gap: 4px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #202836; }
.equipment-soul span { color: #7f8da0; font-size: 10px; }
.equipment-soul strong { color: #d6dce5; font-size: 11px; line-height: 1.45; }
.equipment-empty { grid-column: 1/-1; margin: 0; padding: 22px; color: #7f8da0; text-align: center; border: 1px dashed #2a3444; border-radius: 14px; }

@media (max-width: 980px) {
  .equipment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .equipment-section { padding: 18px 14px; }
  .equipment-section-head { align-items: flex-start; flex-direction: column; }
  .equipment-tabs { justify-content: flex-start; }
  .equipment-grid { grid-template-columns: 1fr; }
  .equipment-analysis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}


/* Production home compact layout */
.compact-hero{max-width:none;padding:44px 0 28px}
.hero-heading{max-width:760px}
.compact-hero h1{font-size:clamp(30px,4vw,42px);line-height:1.12;letter-spacing:-.035em}
.compact-hero .hero-copy{max-width:680px;margin-top:12px;font-size:14px;line-height:1.65}
.compact-hero .eyebrow{margin-bottom:9px;font-size:10px}
.compact-hero .search-shell{margin-top:22px;max-width:820px;border-radius:13px}
.compact-hero .search-shell input,.compact-hero .search-shell button{min-height:52px}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 24px}
.quick-card{min-height:116px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:.16s}
.quick-card:hover{border-color:#3b485d;background:#151c27}
.quick-card strong{display:block;margin-top:8px;font-size:16px;letter-spacing:-.02em}
.quick-card small{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.55}
.muted-card{cursor:default;background:#10151d}
.muted-card strong,.muted-card small{color:#7e8998}
.compact-tools{margin-top:8px;padding:22px 0;grid-template-columns:.65fr 1.35fr}
.compact-tools h2{font-size:20px}
.compact-tools .tool-list span{padding:13px 14px;font-size:12px}
.compact-note{margin:24px 0 56px;padding:17px 18px}
.compact-note strong{font-size:13px}
.compact-note p{font-size:12px}
@media(max-width:760px){
  .compact-hero{padding-top:32px}
  .compact-hero h1{font-size:30px}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-card{min-height:112px;padding:15px}
  .quick-card strong{font-size:14px}
  .site-header nav a:nth-child(3){display:none}
  .character-title-row{align-items:stretch;flex-direction:column}
  .share-button{align-self:flex-start}.profile-actions{justify-content:flex-start}
}
@media(max-width:420px){
  .site-header nav{gap:10px;font-size:12px}
  .site-header nav a:last-child{display:none}
  .compact-hero .search-shell{grid-template-columns:1fr auto}
  .compact-hero .search-shell input{min-width:0;padding-inline:13px}
  .compact-hero .search-shell button{padding-inline:17px}
  .character-facts{grid-template-columns:1fr 1fr;gap:7px}
  .character-facts div{padding:11px}
}

/* Character comparison and shared tool pages */
.tool-hero{padding:42px 0 24px}
.tool-hero h1{font-size:clamp(30px,5vw,46px)}
.tool-hero>p:not(.eyebrow):not(.search-note){margin:10px 0 0;color:var(--muted);font-size:14px}
.dual-form{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:24px}
.dual-form label{display:grid;gap:7px;color:#8e9caf;font-size:11px}
.dual-form input{width:100%;min-width:0;height:50px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit}
.dual-form>b{padding-bottom:15px;color:var(--accent);font-size:12px}
.dual-form button{height:50px;padding:0 18px;border:0;border-radius:12px;background:var(--accent);color:#17110a;font:inherit;font-weight:850;cursor:pointer}
.dual-form button:disabled{opacity:.65}
.compare-result{margin-bottom:60px}
.compare-heads{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare-profile{display:grid;grid-template-columns:125px 1fr;align-items:center;min-height:170px;padding:18px;border:1px solid var(--line);border-radius:17px;background:var(--panel);overflow:hidden}
.compare-profile.right{direction:rtl;text-align:right}
.compare-profile.right>*{direction:ltr}
.compare-profile img{width:120px;height:135px;object-fit:contain}
.compare-profile h2{margin:5px 0 3px;font-size:25px}
.compare-profile p{margin:0;color:#bac4d1;font-size:13px}
.compare-profile small{display:block;margin-top:8px;color:#758398;font-size:10px}
.compare-table{margin-top:10px;border:1px solid var(--line);border-radius:17px;background:#10151d;overflow:hidden}
.compare-line{display:grid;grid-template-columns:1fr minmax(120px,.6fr) 1fr;align-items:center;min-height:54px;border-bottom:1px solid #202938}
.compare-line:last-child{border-bottom:0}
.compare-line span{text-align:center;color:#8290a3;font-size:11px}
.compare-line strong{padding:0 20px;font-size:15px;font-variant-numeric:tabular-nums}
.compare-line strong:first-child{text-align:right}
.compare-line strong:last-child{text-align:left}
.compare-line strong.winner{color:#ffd071}
.compare-line strong.winner:after{content:" 우세";font-size:9px;color:#c69845}
.compare-note{margin:10px 2px;color:#748195;font-size:11px}
@media(max-width:680px){
  .tool-hero{padding-top:30px}
  .dual-form{grid-template-columns:1fr 24px 1fr}
  .dual-form button{grid-column:1/-1}
  .compare-profile{grid-template-columns:1fr;justify-items:center;text-align:center;padding:12px}
  .compare-profile.right{direction:ltr;text-align:center}
  .compare-profile img{width:100px;height:105px}
  .compare-profile h2{font-size:20px}
  .compare-line{grid-template-columns:1fr 88px 1fr;min-height:50px}
  .compare-line strong{padding:0 9px;font-size:13px}
  .compare-line strong.winner:after{display:block}
}

/* PvP simulation */
.pvp-arena{margin-bottom:20px}
.pvp-stage{display:grid;grid-template-columns:1fr 48px 1fr;align-items:center;gap:8px;padding:20px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(circle at 50% 30%,rgba(244,166,42,.1),transparent 36%),#10151d}
.pvp-vs{text-align:center;color:var(--accent)}
.pvp-fighter{display:grid;justify-items:center;padding:18px;border:1px solid #263143;border-radius:16px;background:#0c1118;transition:.2s}
.pvp-fighter img{width:150px;height:160px;object-fit:contain}
.pvp-fighter h2{margin:4px 0 12px;font-size:23px}
.pvp-fighter small{margin-top:9px;color:#8290a3;font-size:10px}
.hp-track{width:100%;height:13px;border-radius:999px;background:#2a1518;overflow:hidden}
.hp-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#e94e62,#f0a53b);transition:width .35s}
.hp-label{margin-top:5px;color:#abb5c3;font-size:10px;font-variant-numeric:tabular-nums}
.pvp-fighter.attacking{transform:translateY(-5px);border-color:#8b713d}
.pvp-fighter.hit{animation:pvp-hit .35s}
@keyframes pvp-hit{25%{transform:translateX(-5px);filter:brightness(1.5)}75%{transform:translateX(5px)}}
.battle-log{max-height:210px;margin:10px 0 0;padding:10px 14px 10px 34px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:#0d1219;color:#9aa7b8;font-size:11px}
.battle-log li{padding:4px}.battle-log li.critical{color:#ffd071}
.pvp-result{margin-top:10px;padding:20px;border:1px solid rgba(244,166,42,.4);border-radius:15px;background:rgba(244,166,42,.07);text-align:center}
.pvp-result h2{margin:6px 0 12px}.pvp-result button{min-height:38px;padding:0 13px;border:1px solid #554526;border-radius:9px;background:#17130d;color:#ffd071}
.formula-note{margin:0 0 60px;padding:15px 18px;border:1px solid var(--line);border-radius:13px;color:#9aa7b8;font-size:12px}
.formula-note summary{color:#d4dbe5;font-weight:800;cursor:pointer}.formula-note p{line-height:1.7}
@media(max-width:680px){
  .pvp-stage{grid-template-columns:1fr 28px 1fr;padding:10px 7px}
  .pvp-fighter{padding:10px 7px}
  .pvp-fighter img{width:105px;height:110px}
  .pvp-fighter h2{font-size:16px}
  .pvp-fighter small{font-size:9px;text-align:center}
}

/* Union and ranking */
.union-result{margin-bottom:60px}.union-card{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.union-card div{padding:17px;border-radius:12px;background:#0d1219}.union-card span{display:block;color:#7f8da0;font-size:10px}.union-card strong{display:block;margin-top:6px;font-size:20px}
.filter-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:9px;align-items:end;margin-top:24px}
.filter-form label{display:grid;gap:7px;color:#8896a9;font-size:10px}.filter-form select,.filter-form button{height:46px;border-radius:10px;font:inherit}
.filter-form select{padding:0 10px;border:1px solid var(--line);background:var(--panel);color:var(--text)}.filter-form button{padding:0 18px;border:0;background:var(--accent);color:#17110a;font-weight:850}
.ranking-wrap{margin-bottom:60px}.ranking-list{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:#10151d}
.ranking-row{display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:12px;min-height:64px;padding:10px 17px;border-bottom:1px solid #222b39}
.ranking-row:last-child{border:0}.ranking-row:hover{background:#151b24}.ranking-row>strong{color:#ffd071;font-size:15px}.ranking-row b{display:block;font-size:14px}.ranking-row span{display:block;margin-top:3px;color:#8290a3;font-size:10px}.ranking-row em{color:#c6cfda;font-size:12px;font-style:normal}
@media(max-width:680px){.union-card{grid-template-columns:1fr 1fr;padding:12px}.filter-form{grid-template-columns:1fr 1fr}.filter-form button{grid-column:1/-1}.ranking-row{grid-template-columns:44px 1fr auto;padding-inline:11px}.ranking-row em{font-size:10px}}

/* Practical tools */
.tool-panel{margin:0 0 18px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#11161f}.tool-panel h2{margin:6px 0;font-size:22px}.tool-panel>div>p:last-child{margin:0;color:var(--muted);font-size:12px}
.tool-grid-form{display:grid;grid-template-columns:1fr 1fr .8fr auto;gap:8px;margin-top:18px}.tool-grid-form input,.tool-grid-form select,.tool-grid-form button,.delta-form input,.delta-form button{height:44px;border-radius:9px;font:inherit}.tool-grid-form input,.tool-grid-form select,.delta-form input{min-width:0;padding:0 11px;border:1px solid var(--line);background:#0d1219;color:var(--text)}.tool-grid-form button,.delta-form button{padding:0 15px;border:0;background:var(--accent);color:#17110a;font-weight:850}
.gear-tool-result{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.gear-compare-card{min-width:0;padding:17px;border:1px solid #283243;border-radius:13px;background:#0d1219}.gear-compare-card h3{margin:7px 0;font-size:17px}.gear-compare-card p{color:#aeb9c7;font-size:11px}.gear-compare-card ul{display:flex;flex-wrap:wrap;gap:5px;padding:0;list-style:none}.gear-compare-card li{padding:5px 7px;border-radius:6px;background:#171f2a;color:#bdc7d3;font-size:10px}.gear-compare-card small{display:block;margin-top:5px;color:#8e9caf}
.delta-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-top:18px}.delta-form label{display:grid;gap:6px;color:#8b98aa;font-size:10px}.delta-result{display:block;margin-top:12px;padding:14px;border-radius:10px;background:#0d1219;color:#d7dee8;font-weight:800}
@media(max-width:680px){.tool-grid-form{grid-template-columns:1fr 1fr}.tool-grid-form select,.tool-grid-form button{grid-column:auto}.gear-tool-result{grid-template-columns:1fr}.delta-form{grid-template-columns:1fr 1fr}.delta-form button{grid-column:1/-1}}

/* Character growth details */
.preset-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.preset-comparison>div{padding:11px 13px;border:1px solid #242e3c;border-radius:11px;background:#0d1219}.preset-comparison strong,.preset-comparison span{display:block}.preset-comparison strong{font-size:11px}.preset-comparison span{margin-top:5px;color:#8492a5;font-size:9px;line-height:1.5}
.growth-section{margin:16px 0 28px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#11161f}.growth-head{display:flex;align-items:end;justify-content:space-between;gap:16px}.growth-head h3{margin:6px 0 0;font-size:25px}.growth-head p{margin:7px 0 0;color:var(--muted);font-size:13px}.growth-load{min-height:40px;padding:0 14px;border:1px solid rgba(244,166,42,.45);border-radius:10px;background:rgba(244,166,42,.12);color:#ffd071;font:inherit;font-size:11px;font-weight:850;cursor:pointer}.growth-load:disabled{opacity:.6}.growth-status{margin:14px 0 0;color:#8391a4;font-size:11px}.growth-status[data-tone="loading"]{color:#d8b36f}.growth-status[data-tone="success"]{color:#8fd9af}.growth-status[data-tone="warning"]{color:#e8c37b}.growth-status[data-tone="error"]{color:#ef9b9b}.growth-body{margin-top:16px}.growth-warning{padding:10px 12px;border:1px solid #65522d;border-radius:10px;background:#211b12;color:#e8c37b;font-size:11px}.growth-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.growth-summary>div{padding:13px;border:1px solid #242e3c;border-radius:11px;background:#0d1219}.growth-summary span{display:block;color:#78869a;font-size:10px}.growth-summary strong{display:block;margin-top:5px;font-size:16px}.growth-block{margin-top:12px;padding:17px;border:1px solid #242e3c;border-radius:14px;background:#0d1219}.growth-block h4{margin:0 0 12px;font-size:15px}.growth-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.growth-card{display:flex;gap:10px;align-items:center;min-width:0;padding:11px;border-radius:10px;background:#131a23}.growth-card img{width:38px;height:38px;object-fit:contain}.growth-card>div{min-width:0}.growth-card strong,.growth-card span,.growth-card small{display:block}.growth-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.growth-card span,.growth-card small{margin-top:4px;color:#8593a6;font-size:9px}.growth-card-grid.compact .growth-card{display:block}.growth-label{margin:0 0 6px!important;color:#738299!important}.growth-extras{display:grid;grid-template-columns:1fr 1fr;gap:12px}.growth-block ul{margin:0;padding-left:18px}.growth-block li{margin-top:6px;color:#bac4d1;font-size:11px;line-height:1.5}.link-skill-list details{border-top:1px solid #202938}.link-skill-list details:first-child{border-top:0}.link-skill-list summary{padding:8px 0;color:#cbd3de;font-size:11px;cursor:pointer}.link-skill-list p{margin:0 0 9px;color:#8e9caf;font-size:10px;line-height:1.55}.growth-empty{grid-column:1/-1;margin:0;color:#7e8b9d;font-size:11px}.growth-date{margin:12px 2px 0;color:#6f7d90;font-size:10px}
@media(max-width:760px){.preset-comparison{grid-template-columns:1fr}.growth-section{padding:18px 14px}.growth-head{align-items:flex-start;flex-direction:column}.growth-summary{grid-template-columns:1fr 1fr}.growth-card-grid{grid-template-columns:1fr}.growth-extras{grid-template-columns:1fr}}