/* ============================================================
   STARDOL Asset Studio — 공식 홈페이지(astellbloom.com) ops 디자인 토큰 적용
   레이아웃/클래스 구조는 기존 app.js·auth.js 호환을 위해 유지, 스타일만 교체
   ============================================================ */
:root {
  --ink: #20263d;
  --paper: #f4f6fa;
  --line: #e1e4ec;
  --muted: #81889b;
  --indigo: #5a67d7;
  --indigo-deep: #4653c4;
  --navy: #11182e;
  --ok-bg: #eaf8f2; --ok-fg: #22926d;
  --warn-bg: #fff6e9; --warn-fg: #926018;
  --err-bg: #fff0f1; --err-fg: #c9475b;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }

.shell { width: min(1180px, calc(100% - 32px)); margin: 30px auto 72px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; background:var(--navy); color:#fff; border-radius:12px; padding:24px 28px; }
.eyebrow { margin:0; font-size:9px; letter-spacing:.24em; font-weight:800; color:#909cff; display:flex; align-items:center; gap:10px; }
.eyebrow::before { content:"✦"; width:26px; height:26px; border-radius:8px 3px; background:linear-gradient(135deg,#9dd8ff,#7568ef); display:grid; place-items:center; color:#fff; font-size:13px; letter-spacing:0; }
h1 { margin:12px 0 8px; font-size:clamp(24px,3.4vw,34px); letter-spacing:-.04em; }
.subtitle { margin:0; color:#9ba4c1; font-size:12px; }

.studio-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.workspace { min-width:0; }
.panel, .guide-panel { background:white; border:1px solid var(--line); border-radius:9px; box-shadow:none; }
.panel { padding:22px; margin-bottom:14px; }
.guide-panel { position:sticky; top:20px; padding:22px; }
.guide-eyebrow { margin:0 0 8px; color:var(--indigo); font-size:9px; font-weight:800; letter-spacing:.18em; }
.guide-panel h2 { margin:0 0 8px; font-size:14px; }
.guide-summary { margin:0 0 18px; color:var(--muted); font-size:10px; line-height:1.55; }
.guide-panel ol { margin:0; padding:0; list-style:none; counter-reset:guide; }
.guide-panel li { position:relative; padding:0 0 18px 38px; counter-increment:guide; }
.guide-panel li::before { content:counter(guide); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:#eef0fd; color:var(--indigo); font-weight:800; font-size:11px; }
.guide-panel li b, .guide-panel li span { display:block; }
.guide-panel li b { font-size:12px; }
.guide-panel li span { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.5; }
.guide-note { margin-top:14px; padding:13px; border-radius:8px; background:#f2f4f9; font-size:11px; }
.guide-note b { font-size:11px; }
.guide-note p { margin:7px 0 0; line-height:1.55; color:#69708a; }
.guide-note.warning { background:var(--warn-bg); }
.guide-note.warning p { color:var(--warn-fg); }

.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-head > div { display:flex; align-items:center; gap:10px; }
.section-head h2 { margin:0; font-size:14px; letter-spacing:-.02em; }
.section-head > strong { font-size:11px; color:var(--indigo); }
.step-number { width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:var(--indigo); color:white; font-weight:800; font-size:12px; }
.step-number.complete { background:#2ab887; }
.support-label, .tool-badge { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:#eef0f4; color:#838a9c; font-size:10px; font-weight:700; }
.tool-badge[data-state="ready"] { background:var(--ok-bg); color:var(--ok-fg); }
.tool-badge[data-state="waiting"] { background:var(--warn-bg); color:var(--warn-fg); }

label { display:block; margin-bottom:8px; font-weight:700; font-size:11px; }
input[type="file"] { width:100%; margin-bottom:8px; font-size:12px; }
input[type="number"], input[type="text"], select { width:100%; min-height:42px; border:1px solid #dfe2ea; border-radius:6px; padding:0 12px; background:white; font-size:12px; outline:none; }
input:focus, select:focus { border-color:#aab3f0; }
small { display:block; margin-top:5px; color:#9aa0af; font-size:10px; line-height:1.4; font-weight:400; }
.muted { margin:6px 0 0; color:var(--muted); font-size:11px; }
.upload-meter { height:7px; margin-top:12px; border-radius:999px; overflow:hidden; background:#eef0f5; }
.upload-meter > div { height:100%; width:0; background:linear-gradient(90deg,#6676ef,#8b69e2); transition:width .2s; }
.notice { margin-top:14px; padding:13px; border-radius:8px; background:var(--warn-bg); color:var(--warn-fg); line-height:1.55; font-size:11px; }
.notice.ready { background:#eef9f5; color:#28795f; border:1px solid #d3eee4; }

.voice-controls, .model3d-controls { margin-top:18px; padding-top:18px; border-top:1px solid #eceef3; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.check-row { display:flex; align-items:center; gap:8px; margin:0; padding:11px 12px; border:1px solid var(--line); border-radius:7px; font-weight:600; font-size:11px; }
.check-row input { margin:0; width:auto; min-height:0; }
.primary-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.primary-actions.one { grid-template-columns:1fr; }
.primary-actions button, .result-actions button { min-height:42px; border:0; border-radius:7px; background:#2c3554; color:white; font-weight:700; font-size:11px; }
.primary-actions button:first-child { background:var(--indigo); }
.primary-actions button:hover:not(:disabled) { filter:brightness(1.06); }

.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:0 0 18px; padding:0; list-style:none; }
.process-steps li { display:flex; align-items:center; gap:9px; min-height:60px; padding:10px; border:1px solid var(--line); border-radius:8px; color:#9aa0b0; background:#f8f9fb; }
.process-steps li > span { flex:0 0 24px; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:#e9ecf3; font-size:10px; font-weight:800; }
.process-steps li b, .process-steps li small { display:block; }
.process-steps li b { font-size:11px; }
.process-steps li small { margin-top:3px; font-size:9px; }
.process-steps li.active { border-color:#6572e1; background:#eef0ff; color:#3a4290; }
.process-steps li.active > span { background:var(--indigo); color:#fff; }
.process-steps li.complete { border-color:#d3eee4; background:var(--ok-bg); color:var(--ok-fg); }
.process-steps li.complete > span { background:#2ab887; color:#fff; }
.process-steps li.error { border-color:#f3c2ca; background:var(--err-bg); color:#9d3b4b; }
.status-row { display:flex; justify-content:space-between; gap:14px; margin-bottom:10px; color:#69708a; font-size:11px; }
progress { width:100%; height:10px; accent-color:var(--indigo); }
.secondary-actions { display:flex; gap:8px; margin-top:14px; }
.secondary-actions button { min-height:36px; padding:0 16px; border:1px solid #dfe2e9; border-radius:7px; background:white; color:#4c5368; font-weight:700; font-size:10px; }

.result-summary { margin:0 0 16px; color:#69708a; line-height:1.6; font-size:12px; }
.result-meta { display:grid; grid-template-columns:1.5fr .8fr 1fr; gap:10px; margin:0 0 14px; }
.result-meta > div { padding:12px; border-radius:8px; background:#f7f8fb; border:1px solid #eceef3; min-width:0; }
.result-meta dt { color:#9299ab; font-size:9px; }
.result-meta dd { margin:6px 0 0; font-weight:700; overflow-wrap:anywhere; font-size:12px; }
audio { width:100%; margin:4px 0 16px; }
.result-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.result-actions .danger { background:#c9475b; }
details { margin-top:15px; }
summary { cursor:pointer; color:#8a91a4; font-size:10px; }
pre { margin:12px 0 0; padding:14px; overflow:auto; border-radius:8px; background:#f7f8fb; border:1px solid #eceef3; white-space:pre-wrap; font-size:10px; color:#5a6175; }

.auth-status { display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px; font-size:10px; font-weight:700; background:rgba(255,255,255,.08); color:#9ba4c1; border:1px solid rgba(255,255,255,.18); }
.auth-status[data-state="ok"] { background:rgba(42,184,135,.15); color:#7fe0c0; border-color:rgba(42,184,135,.3); }
.auth-status[data-state="error"] { background:rgba(226,103,119,.15); color:#f1a1ac; border-color:rgba(226,103,119,.3); }

.sprite-preview { display:block; width:100%; max-height:520px; object-fit:contain; margin:4px 0 16px; border-radius:9px; background-image:linear-gradient(45deg,#eef0f5 25%,transparent 25%),linear-gradient(-45deg,#eef0f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef0f5 75%),linear-gradient(-45deg,transparent 75%,#eef0f5 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
model-viewer { width:100%; height:420px; margin:4px 0 16px; border-radius:9px; background:radial-gradient(circle at 60% 30%,#eef0fa,#dfe4f2); }
.model-compatibility-report { margin:0 0 16px; padding:14px; border:1px solid #dfe3ed; border-radius:9px; background:#f8f9fc; }
.model-report-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.model-report-head b { display:block; color:#30364a; font-size:12px; }
.model-report-head span { display:block; margin-top:4px; color:#858da1; font-size:9px; }
.model-report-head strong { padding:6px 10px; border-radius:999px; font-size:9px; }
.model-report-head strong.pass { background:#eaf8f2; color:#22926d; }
.model-report-head strong.warning { background:#fff7df; color:#b27b16; }
.model-report-head strong.fail { background:#fff0f1; color:#c9475b; }
.model-report-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:13px 0; }
.model-report-metrics div { padding:9px; border:1px solid #e5e8ef; border-radius:7px; background:#fff; }
.model-report-metrics b { display:block; color:#30364a; font-size:12px; }
.model-report-metrics span { display:block; margin-top:3px; color:#9299ab; font-size:8px; }
.model-report-details { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.model-report-details > div { padding:10px; border-radius:7px; background:#fff; }
.model-report-details b { color:#596178; font-size:9px; }
.model-report-details ul { margin:7px 0 0; padding-left:16px; color:#72798c; font-size:9px; line-height:1.6; }

@media (max-width: 900px) {
  .studio-layout { grid-template-columns:1fr; }
  .guide-panel { position:static; order:-1; }
}

@media (max-width: 640px) {
  .shell { width:min(100% - 20px, 1180px); margin-top:14px; }
  .page-header { flex-direction:column; padding:20px; }
  .field-grid, .check-grid, .primary-actions, .result-meta, .result-actions, .process-steps { grid-template-columns:1fr; }
  .process-steps li { min-height:52px; }
}

.outline-button { min-height:34px; padding:0 12px; border:1px solid #dfe2e9; border-radius:7px; background:#fff; color:#4c5368; font-size:10px; font-weight:700; }
.library-tabs { display:flex; width:max-content; gap:3px; padding:3px; margin-bottom:14px; border-radius:7px; background:#e9ecf3; }
.library-tabs button { height:30px; padding:0 13px; border:0; border-radius:5px; background:transparent; color:#747c90; font-size:10px; }
.library-tabs button.active { background:#fff; color:#31384f; box-shadow:0 1px 4px #cdd1dc; }
.library-list { display:grid; gap:8px; margin-top:14px; }
.library-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; align-items:center; gap:10px; padding:12px 14px; border:1px solid #e5e8ef; border-radius:8px; background:#f9fafc; }
.library-select { display:grid; place-items:center; margin:0; }
.library-select input { width:16px; height:16px; margin:0; accent-color:#5968d7; }
.bulk-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 12px; }
.bulk-actions .check-row { margin:0 auto 0 0; }
.bulk-actions span { color:#69708a; font-size:9px; font-weight:700; }
.bulk-actions .danger { color:#c9475b; }
.library-item-name { min-width:0; }
.library-item-name b { display:block; overflow:hidden; color:#30364a; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.library-item-name span { display:block; margin-top:5px; color:#9299ab; font-size:9px; }
.library-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.library-tags em { padding:3px 6px; border-radius:999px; background:#e9ecff; color:#5968d7; font-size:8px; font-style:normal; font-weight:700; }
.library-tags i { color:#adb2bf; font-size:8px; font-style:normal; }
.library-item button { height:32px; padding:0 10px; border:1px solid #dfe2e9; border-radius:6px; background:#fff; color:#4c5368; font-size:9px; font-weight:700; }
.library-item button.danger { color:#c9475b; }
.library-empty { padding:28px; border:1px dashed #d9dde7; border-radius:8px; color:#9298a9; font-size:10px; text-align:center; }

.sprite-frame-editor { display:grid; grid-template-columns:180px minmax(0,1fr); gap:14px; margin:0 0 15px; padding:12px; border:1px solid #dde2f1; border-radius:8px; background:#f6f7fc; }
.sprite-animation-preview { grid-row:1/3; display:grid; place-items:center; align-content:center; min-height:210px; overflow:hidden; border:1px solid #e2e6ef; border-radius:8px; background-image:linear-gradient(45deg,#e9ecf3 25%,transparent 25%),linear-gradient(-45deg,#e9ecf3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ecf3 75%),linear-gradient(-45deg,transparent 75%,#e9ecf3 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; }
.sprite-animation-preview img { width:100%; height:170px; object-fit:contain; }
.sprite-animation-preview strong { width:100%; padding:7px; overflow:hidden; color:#596178; font-size:9px; text-align:center; text-overflow:ellipsis; white-space:nowrap; background:rgba(255,255,255,.88); }
.sprite-animation-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:9px; }
.sprite-animation-controls label { margin:0; color:#69708a; font-size:9px; }
.sprite-animation-controls label span { color:#5968d7; font-weight:800; }
.sprite-animation-controls input { width:100%; margin-top:8px; accent-color:#5968d7; }
.sprite-animation-controls button,.sprite-frame-list button { border:1px solid #dfe2e9; border-radius:6px; background:#fff; color:#4c5368; font-weight:700; }
.sprite-animation-controls button { min-width:72px; height:34px; font-size:9px; }
.sprite-frame-head { display:flex; justify-content:space-between; gap:8px; margin-bottom:7px; color:#596178; font-size:9px; }
.sprite-frame-head span { color:#9299ab; }
.sprite-frame-list { max-height:240px; margin:0; padding:0; overflow:auto; list-style:none; }
.sprite-frame-list li { display:grid; grid-template-columns:24px minmax(0,1fr) 30px 30px; align-items:center; gap:6px; min-height:36px; padding:4px 6px; border-top:1px solid #e5e8ef; }
.sprite-frame-list li:first-child { border-top:0; }
.sprite-frame-number { display:grid; place-items:center; width:20px; height:20px; border-radius:5px; background:#e9ecff; color:#5968d7; font-size:8px; font-weight:800; }
.sprite-frame-list b { overflow:hidden; color:#4a5166; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.sprite-frame-list button { width:30px; height:28px; font-size:11px; }
.sprite-frame-list button:disabled { opacity:.35; }
.preset-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto; align-items:end; gap:10px; margin:0 0 15px; padding:12px; border:1px solid #dde2f1; border-radius:8px; background:#f6f7fc; }
.preset-panel label { margin:0; color:#69708a; font-size:9px; }
.preset-panel select,.preset-panel input { min-height:34px; margin-top:5px; }
.preset-panel button { min-height:34px; padding:0 11px; border:1px solid #dfe2e9; border-radius:7px; background:#fff; color:#4c5368; font-size:9px; font-weight:700; }
.preset-panel button.danger { color:#c9475b; }
.preset-panel p { grid-column:1/-1; margin:0; color:#858da1; font-size:9px; }
.manage-controls { display:grid; grid-template-columns:repeat(2,minmax(0,180px)); gap:10px; margin-bottom:12px; }
.manage-controls.three { grid-template-columns:repeat(3,minmax(0,180px)); }
.manage-controls label { margin:0; color:#69708a; font-size:9px; }
.manage-controls select,.manage-controls input { min-height:34px; margin-top:5px; font-size:10px; }
.history-list { display:grid; gap:8px; margin-top:14px; }
.history-item { display:grid; grid-template-columns:90px minmax(0,1fr) 120px 82px; align-items:center; gap:10px; padding:12px 14px; border:1px solid #e5e8ef; border-radius:8px; background:#f9fafc; }
.history-tool { font-size:9px; font-weight:800; color:#5968d7; text-transform:uppercase; }
.history-main { min-width:0; }
.history-main b { display:block; overflow:hidden; color:#30364a; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.history-main span,.history-time { color:#9299ab; font-size:9px; }
.history-state { justify-self:end; padding:5px 8px; border-radius:999px; background:#eef0f4; color:#777f92; font-size:8px; font-weight:700; }
.history-state.done { background:#eaf8f2; color:#22926d; }
.history-state.error,.history-state.cancelled,.history-state.expired { background:#fff0f1; color:#c9475b; }
.history-state.processing,.history-state.queued { background:#eef0ff; color:#5968d7; }
.section-actions,.pager { display:flex; align-items:center; gap:8px; }
.pager { justify-content:center; margin-top:14px; }
.pager button { min-width:62px; height:32px; border:1px solid #dfe2e9; border-radius:6px; background:#fff; color:#4c5368; font-size:9px; font-weight:700; }
.pager button:disabled { opacity:.4; cursor:not-allowed; }
.pager span { min-width:64px; color:#777f92; font-size:9px; text-align:center; }
.character-dashboard-legend { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; color:#777f92; font-size:9px; }
.character-dashboard-legend span { display:flex; align-items:center; gap:5px; }
.character-dashboard-legend i { width:8px; height:8px; border-radius:50%; }
.character-dashboard-legend i.ready { background:#31aa7e; }
.character-dashboard-legend i.review { background:#e0a43b; }
.character-dashboard-legend i.missing { background:#cdd1db; }
.character-dashboard-list { display:grid; gap:9px; }
.character-readiness-card { display:grid; grid-template-columns:120px minmax(0,1fr) 58px; align-items:center; gap:12px; padding:13px 14px; border:1px solid #e3e6ef; border-radius:9px; background:#fafbfc; }
.character-readiness-name b { display:block; color:#30364a; font-size:12px; }
.character-readiness-name span { display:block; margin-top:4px; color:#9299ab; font-size:8px; text-transform:uppercase; }
.character-checks { display:grid; grid-template-columns:repeat(7,minmax(58px,1fr)); gap:5px; }
.character-check { padding:6px 4px; border-radius:6px; background:#eef0f4; color:#8e95a5; font-size:8px; font-weight:700; text-align:center; }
.character-check.ready { background:#e7f7f0; color:#238762; }
.character-check.review { background:#fff4df; color:#aa7621; }
.character-readiness-rate { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#eef0ff; color:#5968d7; font-size:11px; font-weight:800; }
.dashboard-help { margin:12px 0 0; }

@media (max-width: 700px) {
  .library-item { grid-template-columns:auto minmax(0,1fr); }
  .library-item > button { grid-column:2; }
  .model-report-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .model-report-details { grid-template-columns:1fr; }
  .sprite-frame-editor { grid-template-columns:1fr; }
  .sprite-animation-preview { grid-row:auto; }
  .preset-panel { grid-template-columns:1fr; }
  .preset-panel p { grid-column:1; }
  .manage-controls,.manage-controls.three { grid-template-columns:1fr; }
  .history-item { grid-template-columns:70px minmax(0,1fr) auto; }
  .history-time { grid-column:2/4; }
  .character-readiness-card { grid-template-columns:1fr auto; }
  .character-checks { grid-column:1/3; grid-template-columns:repeat(2,minmax(0,1fr)); }
}


.character-readiness-card { width:100%; font:inherit; text-align:left; cursor:pointer; }
.character-readiness-card:hover,.character-readiness-card:focus-visible { border-color:#aab2f2; background:#f6f7ff; outline:none; box-shadow:0 0 0 3px rgba(89,104,215,.1); }
.character-asset-detail { margin-top:14px; padding:16px; border:1px solid #d9def6; border-radius:10px; background:#f7f8ff; }
.character-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.character-detail-head .eyebrow { margin:0 0 3px; font-size:8px; }
.character-detail-head h3 { margin:0; color:#30364a; font-size:15px; }
.character-detail-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0; }
.character-detail-summary > div { padding:11px; border:1px solid #e0e4f4; border-radius:8px; background:#fff; }
.character-detail-summary b,.character-detail-summary span { display:block; }
.character-detail-summary b { color:#4857ca; font-size:14px; }
.character-detail-summary span { margin-top:3px; color:#858da1; font-size:8px; }
.character-detail-summary .needs-work b { color:#c88720; }
.character-detail-summary .complete b { color:#238762; }
.character-detail-mobile { padding:12px; border-radius:8px; background:#30364a; color:#fff; }
.character-detail-mobile > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.character-detail-mobile b { font-size:10px; }
.character-detail-mobile p { margin:9px 0 0; color:#cdd2e2; font-size:8px; }
.character-detail-mobile dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0 0; }
.character-detail-mobile dl div { padding:8px; border-radius:6px; background:rgba(255,255,255,.07); }
.character-detail-mobile dt { color:#aeb5ca; font-size:7px; }
.character-detail-mobile dd { margin:3px 0 0; font-size:9px; font-weight:700; }
.mobile-status { padding:4px 7px; border-radius:999px; background:#fff4df; color:#aa7621; font-size:7px; font-weight:800; }
.mobile-status.pass { background:#e7f7f0; color:#238762; }
.mobile-status.fail,.mobile-status.missing { background:#fff0f1; color:#c9475b; }
.character-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.character-detail-grid h4 { margin:0 0 8px; color:#4c5368; font-size:10px; }
.character-detail-list { display:grid; gap:7px; }
.character-detail-item { position:relative; padding:10px 86px 10px 11px; border:1px solid #e3e6ef; border-radius:7px; background:#fff; min-width:0; }
.character-detail-item.compact { padding-right:11px; }
.character-detail-item > div { display:flex; align-items:center; gap:7px; min-width:0; }
.character-detail-item b { overflow:hidden; color:#30364a; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.character-detail-item p { margin:4px 0 0; color:#9299ab; font-size:8px; }
.character-detail-item .character-detail-tags { color:#5968d7; }
.character-detail-item > button { position:absolute; top:50%; right:9px; min-height:28px; padding:0 8px; transform:translateY(-50%); border:1px solid #d9def6; border-radius:6px; background:#f6f7ff; color:#5968d7; font-size:8px; font-weight:700; }
.asset-kind { flex:0 0 auto; padding:3px 5px; border-radius:4px; background:#eef0ff; color:#5968d7; font-size:7px; font-weight:800; }

@media (max-width: 700px) {
  .character-detail-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .character-detail-mobile dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .character-detail-grid { grid-template-columns:1fr; }
}


.guide-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; padding:0 0 14px; border-bottom:1px solid #e5e8ef; }
.guide-tabs button { min-height:30px; padding:0 9px; border:1px solid #dfe2e9; border-radius:999px; background:#fff; color:#69708a; font-size:8px; font-weight:750; white-space:nowrap; }
.guide-tabs button:hover { border-color:#aab2f2; color:#5968d7; }
.guide-tabs button.active { border-color:#5968d7; background:#5968d7; color:#fff; box-shadow:0 4px 10px rgba(89,104,215,.18); }

@media (max-width: 700px) {
  .guide-tabs { flex-wrap:nowrap; overflow-x:auto; margin-right:-22px; padding-right:22px; padding-bottom:12px; scrollbar-width:thin; }
  .guide-tabs button { flex:0 0 auto; min-height:34px; padding:0 11px; font-size:9px; }
}