:root {
  --ink: #e9e1d1;
  --muted: #9d9a91;
  --paper: #141817;
  --panel: #1b201e;
  --panel-2: #222925;
  --line: #353d37;
  --jade: #71b69a;
  --jade-soft: #27483b;
  --gold: #d9ad62;
  --red: #c7645a;
  --blue: #6f9fc4;
  --purple: #a983b7;
  --shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(76, 116, 93, .16), transparent 35%),
    radial-gradient(circle at 90% 100%, rgba(127, 90, 55, .12), transparent 28%),
    #101312;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  letter-spacing: .02em;
  height: 100vh;
  overflow: hidden;
}
button, input { font: inherit; }
button { color: inherit; }
.shell { display: flex; width: 100%; max-width: 1500px; height: 100vh; margin: 0 auto; padding: 18px; flex-direction: column; overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.eyebrow, .section-kicker { margin: 0 0 5px; color: var(--jade); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: "STKaiti", "KaiTi", serif; font-size: 30px; font-weight: 500; }
h2 { margin-bottom: 6px; font-family: "STKaiti", "KaiTi", serif; font-size: 27px; font-weight: 500; }
h3 { margin-bottom: 8px; font-size: 16px; }
.seal { display: inline-grid; place-items: center; width: 27px; height: 27px; margin-left: 7px; border: 1px solid var(--red); color: var(--red); font-size: 15px; transform: rotate(-5deg); }
.top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.currency-display { display: inline-flex; align-items: baseline; gap: 7px; min-width: 104px; padding: 7px 11px; border: 1px solid #725a30; border-radius: 8px; background: linear-gradient(135deg, #251f14, #171a17); color: var(--gold); box-shadow: inset 0 0 14px rgba(205,157,72,.06); }
.currency-display span { color: #bfa86e; font-size: 11px; letter-spacing: .12em; }
.currency-display strong { margin-left: auto; color: #f0ca72; font-size: 15px; font-variant-numeric: tabular-nums; }
.update-status { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; background: #171d19; color: var(--muted); font-size: 11px; cursor: default; }
.update-status.update-ready { border-color: #9a6b31; background: #2b2012; color: #f0bd68; cursor: pointer; animation: updatePulse 1.8s ease-in-out infinite; }
.update-status.offline-ready { border-color: #466858; color: #89bba2; }
@keyframes updatePulse { 50% { box-shadow: 0 0 0 3px rgba(222,164,76,.10); } }
.save-state { color: var(--muted); font-size: 12px; margin-right: 8px; }
.ghost, .file-label { border: 1px solid var(--line); background: rgba(27,32,30,.7); border-radius: 7px; padding: 8px 12px; cursor: pointer; font-size: 12px; transition: .2s; }
.ghost:hover, .file-label:hover { border-color: var(--jade); color: var(--jade); }
.file-label input { display: none; }
.layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; }
.layout > *, main, .page, .grid > *, .panel, .card { min-width: 0; }
.sidebar { height: 100%; padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #3b4841 transparent; scrollbar-width: thin; }
main { height: 100%; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #465149 transparent; scrollbar-width: thin; }
.sidebar::-webkit-scrollbar, main::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb { border-radius: 10px; background: #3b4841; }
.card { border: 1px solid var(--line); background: rgba(27, 32, 30, .92); border-radius: 10px; box-shadow: var(--shadow); }
.identity { display: flex; align-items: center; gap: 12px; padding: 15px; margin-bottom: 10px; }
.identity strong, .identity span { display: block; }
.identity span { color: var(--gold); font-size: 12px; margin-top: 4px; }
.identity-roots { display: block; margin-top: 4px; color: #86bca5; font-size: 9px; line-height: 1.4; }
.avatar { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; border: 1px solid var(--jade); background: var(--jade-soft); color: #b7ddcc; font-family: "KaiTi", serif; font-size: 23px; }
.compact { padding: 13px 15px; margin-bottom: 10px; }
.stat-line { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; margin: 8px 0; font-size: 11px; color: var(--muted); }
.tiny-bar, .progress { height: 5px; overflow: hidden; border-radius: 20px; background: #0e1110; }
.tiny-bar i, .progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--jade); transition: width .15s linear; }
.stat-line:nth-child(2) i { background: var(--red); }
.stat-line:nth-child(3) i { background: var(--blue); }
.current-task { position: sticky; top: 0; z-index: 6; padding: 14px 15px; margin-bottom: 12px; background: #1b201e; }
.current-task strong { display: block; font-size: 14px; }
.current-task .progress { height: 7px; margin: 11px 0 8px; }
.current-task > span { display: block; min-height: 30px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.skill-loadout-card { padding: 13px 15px; margin-bottom: 12px; }
.loadout-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.loadout-title strong { font-size: 13px; }
.loadout-title > span { color: var(--gold); font-size: 10px; }
.skill-loadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.loadout-slot { overflow: hidden; padding: 6px 7px; border: 1px solid #334139; border-radius: 6px; background: #151a17; color: #bcd3c7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.loadout-slot.empty { border-style: dashed; color: #606762; }
.equipment-dock-card { padding: 13px 15px; margin-bottom: 12px; }
.equipment-dock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.dock-slot { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 3px; border: 1px solid #3b4841; border-radius: 6px; background: #151a17; color: #c5d2cb; font-size: 8px; line-height: 1.2; text-align: center; }
.dock-slot.empty { border-style: dashed; color: #5c625e; }
.danger-text { border: 0; background: none; color: #9f736c; padding: 8px 0 0; font-size: 11px; cursor: pointer; }
nav { display: grid; gap: 4px; }
nav button { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: .15s; }
nav button span { display: inline-grid; place-items: center; width: 23px; color: #778079; font-family: "KaiTi", serif; }
nav button:hover { background: #1a1f1c; color: var(--ink); }
nav button.active { background: var(--jade-soft); color: #c9e5d8; }
nav button.active span { color: var(--jade); }
nav button.has-upgrade::after { content: attr(data-upgrades); display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border: 1px solid #9b7641; border-radius: 20px; background: #42331f; color: #efc574; font-size: 9px; }
.page { display: none; }
.page.active { display: block; animation: reveal .25s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 2px 0 12px; }
.page-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.grid { display: grid; gap: 10px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(27,32,30,.88); }
.panel.accent { background: linear-gradient(140deg, rgba(38,66,54,.9), rgba(27,32,30,.9)); }
.panel p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.big-number { margin: 5px 0; font-family: Georgia, serif; font-size: 30px; color: var(--gold); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 7px; }
.resource { display: flex; aspect-ratio: 1; min-width: 0; flex-direction: column; justify-content: space-between; padding: 9px; border: 1px solid #303630; border-radius: 8px; background: #171b19; }
.resource span { display: block; color: var(--muted); font-size: 10px; }
.resource strong { display: block; margin-top: 5px; font-size: 14px; font-weight: 500; }
.action-list { display: grid; gap: 9px; }
.square-card-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); align-items: stretch; }
.recipe-card-grid { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); }
.square-card-grid .action-row { display: flex; min-height: 205px; flex-direction: column; align-items: stretch; gap: 9px; overflow: visible; }
.square-card-grid .action-row > div:nth-child(2) { display: flex; flex-wrap: wrap; gap: 4px; }
.square-card-grid .action-row > div:nth-child(2) small { width: 100%; }
.square-card-grid .action-row > button, .square-card-grid .action-row > .button-hint, .square-card-grid .action-row > .button-hint button { width: 100%; margin-top: auto; }
.square-card-grid .recipe-card { position: relative; min-height: 225px; padding: 11px 11px 48px; gap: 6px; overflow: hidden; }
.recipe-card .recipe-summary { flex: 0 0 auto; min-height: 0; }
.recipe-card .recipe-summary small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 10px; line-height: 1.35; }
.recipe-card .recipe-details { display: block !important; min-height: 0; overflow: visible; }
.recipe-card .recipe-details small { margin-top: 4px; font-size: 10px; line-height: 1.3; }
.recipe-card .cost-line { display: flex !important; max-height: none; overflow: visible; gap: 4px 7px; }
.recipe-card .cost-part { font-size: 9px; }
.recipe-card .missing-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.square-card-grid .recipe-card > button, .square-card-grid .recipe-card > .button-hint { position: absolute; left: 11px; right: 11px; bottom: 10px; width: calc(100% - 22px); margin: 0; }
.square-card-grid .recipe-card > .button-hint button { width: 100%; margin: 0; }
.pill-use-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pill-use-grid .pill-use-card { display: flex; min-height: 132px; flex-direction: column; align-items: stretch; gap: 7px; padding: 11px; }
.pill-use-card > div:nth-child(2) { display: flex; flex-wrap: wrap; gap: 4px; }
.pill-use-card > button { width: 100%; margin-top: auto; }
.pill-toxin-line { margin: 9px 0 0; }
.recovery-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.recovery-heading h3, .recovery-heading p { margin-top: 0; margin-bottom: 4px; }
.recovery-heading > button { flex: 0 0 auto; }
.recuperate-button { border-color: #70613e; color: #dfc477; }
.equipment-grid, .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.equipment-card, .market-card { display: flex; min-height: 185px; flex-direction: column; overflow: hidden; padding: 13px; border: 1px solid #343d37; border-radius: 9px; background: #171b19; }
.illustrated-card { position: relative; }
.illustrated-card .card-art { display: block; width: calc(100% + 26px); height: 82px; margin: -13px -13px 10px; flex: 0 0 82px; border: 0; border-bottom: 1px solid rgba(125,154,138,.28); object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.04); }
.illustrated-card .card-content { min-width: 0; }
.equipment-card.illustrated-card, .market-card.illustrated-card { min-height: 218px; }
.equipment-card.illustrated-card .card-content, .market-card.illustrated-card .card-content { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.equipment-card.illustrated-card .card-art, .market-card.illustrated-card .card-art { background: radial-gradient(circle, #24332b, #111512); }
.equipment-card.illustrated-card .card-content p, .market-card.illustrated-card .card-content p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.equipment-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 8px; }
.equipment-card.compact-equipment-card { display: flex; height: 178px; min-height: 178px; gap: 0; padding: 8px; }
.equipment-card.compact-equipment-card .card-art { width: calc(100% + 16px); height: 50px; margin: -8px -8px 4px; flex: 0 0 50px; border: 0; border-bottom: 1px solid #46554d; border-radius: 8px 8px 0 0; object-fit: cover; }
.equipment-card.compact-equipment-card .card-content { display: block; min-height: 0; overflow: hidden; }
.equipment-card.compact-equipment-card h4 { margin: 2px 0 3px; font-size: 12px; }
.equipment-card.compact-equipment-card p { margin: 0 0 2px; font-size: 9px; line-height: 1.25; -webkit-line-clamp: 1; }
.equipment-card.compact-equipment-card .equipment-special { -webkit-line-clamp: 1; }
.equipment-card.compact-equipment-card .exclusive-source { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipment-card.compact-equipment-card > button { min-height: 25px; margin: 2px 0 0; padding: 3px 8px; }
.equipment-card.compact-equipment-card .attunement-line { gap: 2px; margin-top: 3px; font-size: 8px; }
.equipment-card.compact-equipment-card .refine-treasure { min-height: 20px; margin-top: 2px; padding: 2px 4px; font-size: 8px; }
.equipment-card.equipped { border-color: #6e6743; background: linear-gradient(145deg, #272218, #171b19); }
.equipment-card.treasure-card { border-color: #76554a; background: radial-gradient(circle at 85% 12%, rgba(202,105,72,.16), transparent 38%), #181917; }
.equipment-card.treasure-card.equipped { border-color: #d38b57; box-shadow: inset 0 0 18px rgba(211,139,87,.12), 0 0 10px rgba(211,139,87,.08); }
.market-card.skill-manual-offer { border-color: #66527a; background: radial-gradient(circle at 85% 12%, rgba(128,91,154,.18), transparent 40%), #171b19; }
.market-card.skill-manual-offer h4 { color: #d7b8ef; }
.market-card.merchant-showcase { border-color: #9a7137; background: radial-gradient(circle at 85% 10%, rgba(218,163,73,.2), transparent 42%), linear-gradient(145deg, #282016, #171b19 62%); box-shadow: inset 0 0 18px rgba(211,157,66,.08); }
.market-card.merchant-showcase .equipment-type { color: #e3b85f; }
.treasure-status { margin: 10px 0; padding: 9px 11px; border: 1px solid #654a3d; border-radius: 7px; background: #211a17; color: #e1b28e; font-size: 11px; }
.equipment-card h4, .market-card h4 { margin: 7px 0 5px; font-size: 13px; }
.equipment-card p, .market-card p { margin: 0 0 8px; font-size: 10px; line-height: 1.55; }
.equipment-card button, .market-card button { width: 100%; margin-top: auto; }
.market-card.market-inspectable { position: relative; overflow: visible; }
@media (hover: hover) {
  .market-card.market-inspectable::after {
    content: attr(data-detail);
    position: absolute;
    left: 50%;
    top: calc(100% - 5px);
    z-index: 80;
    width: min(260px, 82vw);
    padding: 10px 12px;
    border: 1px solid #7b6542;
    border-radius: 7px;
    background: rgba(31, 27, 20, .98);
    color: #e3d4b7;
    box-shadow: 0 10px 25px rgba(0,0,0,.45);
    font-size: 11px;
    line-height: 1.65;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -5px);
    transition: opacity .14s, transform .14s;
  }
  .market-card.market-inspectable:hover::after { opacity: 1; transform: translate(-50%, 0); }
}
.sell-category-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.sell-category-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #38443d; border-radius: 16px; background: #151a17; color: var(--muted); font-size: 10px; cursor: pointer; }
.sell-category-tabs button span { min-width: 16px; padding: 1px 4px; border-radius: 10px; background: #252c28; color: #9fb3a8; font-size: 8px; text-align: center; }
.sell-category-tabs button.active { border-color: #5c806d; background: #20372c; color: #c8e4d7; }
.sell-category-tabs button.active span { background: #315143; color: #d7eee3; }
.inventory-category-tabs { margin-top: 2px; }
.inventory-category-tabs button { padding: 4px 7px; }
.inventory-empty { grid-column: 1 / -1; margin: 4px 0; }
.equipment-category-tabs { margin: 8px 0 10px; }
.equipment-empty { grid-column: 1 / -1; margin: 4px 0; }
.category-filter-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 10px; }
.category-filter-row .sell-category-tabs { margin: 0; }
.quality-filter { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.quality-filter select { min-width: 86px; padding: 4px 7px; font-size: 9px; }
.quality-resource span { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.quality-resource em { flex: 0 0 auto; padding: 1px 4px; border: 1px solid #465149; border-radius: 8px; color: #9cac9f; font-size: 7px; font-style: normal; }
.quality-resource.quality-1 em { border-color: #3d765b; color: #7fc49e; }
.quality-resource.quality-2 em { border-color: #38677d; color: #7eb8d5; }
.quality-resource.quality-3 em { border-color: #69517d; color: #c29add; }
.quality-resource.quality-4 em { border-color: #8b672a; color: #e0b35b; }
.quality-resource.quality-5 em { border-color: #39818b; color: #78d4dc; }
.quality-resource.quality-6 em { border-color: #995a34; color: #ee9a67; }
.quality-resource.quality-7 em { border-color: #3c8b91; color: #87e0e3; }
.quality-resource.quality-8 em { border-color: #ad6b40; color: #ffd080; }
.resource-with-image { position: relative; min-height: 88px; padding: 0; overflow: hidden; isolation: isolate; }
.resource-with-image::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgba(10,14,12,.92) 100%); }
.material-icon { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .18s ease, opacity .18s ease; }
.resource-with-image:hover .material-icon { transform: scale(1.035); opacity: 1; }
.resource-copy { display: flex; width: 100%; height: 100%; min-height: 88px; flex-direction: column; justify-content: space-between; padding: 8px; text-shadow: 0 1px 4px #000; }
.resource-copy strong { color: #f0ead9; }
.sell-market-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.market-card.sell-card { aspect-ratio: auto; min-height: 142px; padding: 9px; }
.market-card.sell-card.illustrated-card { display: grid; min-height: 142px; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: 1fr auto auto; gap: 4px 8px; }
.market-card.sell-card.illustrated-card .card-art { grid-row: 1; width: 52px; height: 52px; margin: 0; border: 1px solid #405149; border-radius: 7px; object-fit: cover; }
.market-card.sell-card.illustrated-card .card-content { display: block; grid-column: 2; }
.market-card.sell-card.illustrated-card .card-content h4 { margin: 3px 0; }
.market-card.sell-card.illustrated-card .card-content p { margin-bottom: 3px; -webkit-line-clamp: 2; }
.market-card.sell-card.illustrated-card .sell-controls, .market-card.sell-card.illustrated-card .sell-estimate { grid-column: 1 / -1; }
.sell-card h4 { margin-top: 5px; }
.sell-controls { display: flex; align-items: center; gap: 5px; margin-top: auto; }
.sell-controls input { flex: 0 0 52px; width: 52px; min-width: 0; border: 1px solid #465149; border-radius: 6px; background: #111512; color: #e2dbc9; padding: 6px 4px; text-align: center; }
.sell-controls button { flex: 0 0 62px; width: 62px; margin-top: 0; padding: 6px 8px; white-space: nowrap; }
.sell-estimate { margin: 6px 0 0; color: var(--gold); font-size: 9px; text-align: left; }
.sell-empty { grid-column: 1 / -1; }
.equipment-type { color: var(--jade); font-size: 9px; letter-spacing: .12em; }
.equipment-special { color: #c2a8d0 !important; }
.equipment-card.exclusive-equipment { border-color: #8a6540; background: linear-gradient(145deg, rgba(91,56,27,.34), #171b19 58%); }
.equipment-card .exclusive-source { color: #d8ad69; font-size: 9px; }
.equipment-card .exclusive-source + button { margin-top: 6px; }
.root-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.root-tag { padding: 3px 7px; border: 1px solid #4b5b51; border-radius: 12px; color: #c8d8cf; font-size: 9px; }
.action-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 13px; border: 1px solid #313832; border-radius: 8px; background: #171b19; }
.square-card-grid .illustrated-card { padding-top: 11px; }
.square-card-grid .illustrated-card .card-art { width: calc(100% + 22px); height: 88px; margin: -11px -11px 3px; flex: 0 0 88px; }
.square-card-grid .illustrated-card .card-content { display: block; width: 100%; flex: 1; min-height: 0; overflow: hidden; }
.square-card-grid .recipe-card.illustrated-card { min-height: 315px; }
.square-card-grid .recipe-card.illustrated-card .card-content { padding-bottom: 2px; }
.square-card-grid .enemy-card.illustrated-card { min-height: 335px; }
.enemy-card-grid .enemy-card.illustrated-card > .card-content { display: block; flex: 1; min-height: 0; overflow: hidden; }
.enemy-card-grid .enemy-card.illustrated-card > .card-content > div:last-child { margin-top: 5px; }
.combat-skill-row.illustrated-card { display: flex; min-height: 238px; flex-direction: column; padding: 9px; }
.combat-skill-row.illustrated-card .card-art { width: calc(100% + 18px); height: 96px; margin: -9px -9px 7px; flex: 0 0 96px; border: 0; border-bottom: 1px solid #405149; border-radius: 8px 8px 0 0; object-fit: cover; }
.combat-skill-row.illustrated-card .card-content { display: block; flex: 1; }
.combat-skill-row.illustrated-card .card-content > div:first-child small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.combat-skill-row.illustrated-card > button { width: 100%; min-height: 30px; margin-top: 5px; }
.pill-use-grid .pill-use-card.illustrated-card { display: grid; min-height: 118px; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: 1fr auto; padding: 10px; }
.pill-use-grid .pill-use-card.illustrated-card .card-art { grid-row: 1 / 3; width: 62px; height: 62px; margin: 0; align-self: start; border: 1px solid #405149; border-radius: 8px; object-fit: cover; }
.pill-use-grid .pill-use-card.illustrated-card .card-content { display: block; }
.pill-use-grid .pill-use-card.illustrated-card .tag { margin-top: 5px; }
.pill-use-grid .pill-use-card.illustrated-card > button { grid-column: 2; }
.action-row > * { min-width: 0; }
.action-row strong, .action-row small, .panel p { overflow-wrap: anywhere; }
.action-row.locked { opacity: .45; }
.action-row strong { display: block; font-size: 13px; }
.action-row small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; }
.cost-line { display: flex !important; flex-wrap: wrap; gap: 5px 10px; }
.cost-part { white-space: nowrap; }
.inline-item-icon { width: 16px; height: 16px; margin-right: 4px; border: 1px solid #46544c; border-radius: 4px; object-fit: cover; vertical-align: -4px; }
.cost-part.enough { color: var(--jade); }
.cost-part.missing { color: #d77a70; }
.recipe-cost-block { margin: 7px 0 5px; padding: 7px; border: 1px solid #35423b; border-radius: 8px; background: rgba(6,12,9,.5); }
.recipe-cost-block > b { display: block; margin-bottom: 5px; color: #d8c79f; font-size: 10px; font-weight: 600; }
.source-hint { position: relative; cursor: help; border-bottom: 1px dotted currentColor; }
.source-hint:hover::after, .source-hint:focus::after { content: attr(data-tooltip); position: fixed; z-index: 90; left: max(12px, min(calc(100vw - 370px), 46vw)); top: 18vh; width: min(340px, calc(100vw - 24px)); padding: 10px 12px; border: 1px solid #83672e; border-radius: 8px; color: #f0dfb5; background: #19160f; box-shadow: 0 12px 30px #000b; white-space: normal; line-height: 1.55; }
.missing-summary { color: #d77a70 !important; }
.tag { display: inline-block; margin-right: 4px; padding: 2px 6px; border: 1px solid #3f4841; border-radius: 10px; color: #aaa; font-size: 9px; }
.tag.rare-chance { border-color: #725f3c; color: #d9b96f; }
.tag.speed-tag { border-color: #3d6572; color: #84bdca; }
.tag.quality { margin-left: 5px; font-weight: 500; vertical-align: 1px; }
.quality-0 { border-color: #555c58; color: #a8adaa; }
.quality-1 { border-color: #3f745c; background: #1b3027; color: #82d2aa; }
.quality-2 { border-color: #3e6684; background: #192936; color: #87bfe6; }
.quality-3 { border-color: #674b82; background: #291e34; color: #c19be3; }
.quality-4 { border-color: #8b6936; background: #342817; color: #e7ba67; }
.quality-5 { border-color: #9b7041; background: #332619; color: #efc176; box-shadow: 0 0 8px rgba(221,169,87,.12); }
.quality-6 { border-color: #8b4f72; background: #301d2a; color: #e6a4c7; box-shadow: 0 0 9px rgba(210,112,165,.15); }
.quality-7 { border-color: #43868b; background: #173337; color: #83dce0; box-shadow: 0 0 10px rgba(91,205,211,.18); }
.quality-8 { border-color: #b0693c; background: linear-gradient(100deg, #3b2034, #3b3019); color: #ffd080; box-shadow: 0 0 12px rgba(231,139,200,.24); }
.attune-requirement { color: #dd9b67 !important; font-weight: 600; }
.attune-locked { opacity: .82; border-style: dashed; }
.equipment-upgrade-summary { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 12px; background: #493821; color: #e3bc72; font-size: 9px; font-weight: 400; vertical-align: 2px; }
.artifact-capacity { display: inline-block; margin-left: 6px; color: #82b8a2; font-size: 10px; font-weight: 400; }
.equipment-upgrade { border-color: #7b653d; background: linear-gradient(100deg, #211e17, #171b19); }
.tag.upgrade-tag { border-color: #9b7641; background: #3e301d; color: #f0c979; }
.primary, .secondary, .warn { border: 0; border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 12px; transition: .15s; }
.primary { background: var(--jade-soft); color: #bfe2d1; }
.primary:hover { background: #315746; }
.secondary { background: #292f2b; color: #b8b8b2; }
.secondary:hover { background: #343c37; }
.warn { background: #49302d; color: #e0aaa2; }
button:disabled { opacity: .4; cursor: not-allowed; }
.button-hint { position: relative; display: inline-block; justify-self: end; }
.button-hint::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 30;
  width: max-content;
  max-width: 310px;
  padding: 8px 10px;
  border: 1px solid #65514b;
  border-radius: 6px;
  background: #241c1a;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  color: #efb4aa;
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: .15s;
}
.button-hint:hover::after { opacity: 1; transform: none; }
.skill-card { position: relative; overflow: hidden; }
.skill-card::after { content: attr(data-level); position: absolute; right: 14px; top: 9px; color: rgba(224,216,199,.06); font: 45px Georgia, serif; }
.skill-card .progress { margin: 12px 0 5px; }
.muted { color: var(--muted); }
.realm-track { display: flex; gap: 4px; margin: 15px 0; }
.realm-track i { flex: 1; height: 5px; border-radius: 10px; background: #303630; }
.realm-track i.done { background: var(--jade); }
.realm-track i.bottleneck { box-shadow: inset 0 0 0 1px #b46b61; }
.realm-track i.perfection { box-shadow: inset 0 0 0 1px var(--gold), 0 0 7px rgba(217,173,98,.22); }
.recipe-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.recipe-tabs { flex-wrap: wrap; }
.recipe-tabs button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 20px; padding: 6px 12px; cursor: pointer; font-size: 11px; }
.recipe-tabs button.active { background: var(--jade-soft); color: #c6e1d5; border-color: #3c6654; }
.combat-stage { display: grid; grid-template-columns: 1fr 52px 1fr; gap: 8px; align-items: center; padding: 8px 12px 6px; text-align: center; }
.combat-focus-panel { padding: 11px 14px 12px; border-color: #4d6558; background: linear-gradient(180deg, rgba(43,72,58,.18), #171b19 42%); }
.combat-panel-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(77,101,88,.45); }
.combat-panel-toolbar .section-kicker { margin-bottom: 2px; }
.combat-panel-toolbar strong { font-size: 12px; font-weight: 500; }
.fighter-hp { width: min(220px, 100%); margin: 5px auto 6px; color: #d7dfda; font-size: 10px; }
.fighter-hp .progress { height: 6px; margin-top: 4px; }
.fighter-hp.enemy-hp .progress i { background: #b85e55; }
.combat-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.combat-actions > .primary { min-width: 100px; }
.combat-pill-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.combat-actions .combat-pill-list { margin-top: 0; }
.combat-actions button, .combat-pill-list button { padding: 6px 10px; font-size: 10px; }
.boss-pressure-status { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 10px; padding: 8px 10px; border: 1px solid #75453e; border-radius: 7px; background: linear-gradient(90deg, rgba(104,43,37,.28), rgba(40,25,23,.72)); color: #e1a197; font-size: 10px; }
.boss-pressure-status strong { color: #efb061; }
.boss-pressure-status small { grid-column: 1 / -1; color: #a98e88; }
.combat-effect-status { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0; font-size: 11px; }
.combat-effect-status strong { color: var(--muted); margin-right: 2px; }
.combat-effect-status span { padding: 3px 7px; border: 1px solid #7a5432; border-radius: 999px; color: #efbd72; background: #211a14; }
.equipment-resonance { display: flex; gap: 8px; align-items: center; margin: 7px 0 10px; padding: 7px 9px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); font-size: 11px; }
.equipment-resonance.active { border-style: solid; border-color: #7c6240; background: #211c14; color: #dfbd7b; }
.equipment-resonance strong { color: inherit; white-space: nowrap; }
.treasure-status small { display: block; margin-top: 3px; color: var(--muted); }
.enemy-card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.enemy-card-grid .enemy-card { position: relative; min-height: 235px; padding-bottom: 46px; overflow: hidden; }
.enemy-card-grid .enemy-card > div:first-child { flex: 1; min-height: 0; overflow: hidden; }
.enemy-card-grid .enemy-card small { line-height: 1.38; }
.enemy-card-grid .enemy-talent-summary, .enemy-card-grid .enemy-drop-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.enemy-card-grid .enemy-card > div:nth-child(2) { flex: 0 0 auto; }
.enemy-card-grid .enemy-card > button { position: absolute; left: 11px; right: 11px; bottom: 10px; width: calc(100% - 22px); margin: 0; }
.combat-map-layout { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 14px; align-items: start; }
.combat-map { position: sticky; top: 0; display: grid; gap: 6px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(circle at 30% 0, rgba(74,108,86,.18), transparent 42%), #121714; }
.combat-map-title { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 3px 6px; border-bottom: 1px solid var(--line); }
.combat-map-title span { color: var(--paper); font-weight: 700; }
.combat-map-title small { color: var(--muted); font-size: 10px; }
.combat-region { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.combat-region:hover { border-color: var(--line); background: rgba(255,255,255,.025); }
.combat-region.active { border-color: #4d7661; color: #d9e6df; background: linear-gradient(90deg, rgba(47,91,70,.58), rgba(31,48,39,.32)); }
.combat-region i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #52665a; border-radius: 50%; color: #d9c28b; font-family: serif; font-style: normal; }
.combat-region span { min-width: 0; }
.combat-region strong, .combat-region small { display: block; }
.combat-region strong { color: inherit; font-size: 11px; }
.combat-region small { margin-top: 2px; color: #78877f; font-size: 9px; }
.combat-region em { min-width: 22px; padding: 2px 5px; border-radius: 999px; background: rgba(0,0,0,.25); color: #a8b4ad; font-size: 9px; text-align: center; font-style: normal; }
.combat-region-content { min-width: 0; }
.combat-region-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.combat-region-heading h3 { margin: 0; }
.combat-region-heading > span { color: var(--muted); font-size: 10px; }
.enemy-card.selected-enemy { border-color: #6f8e7c; box-shadow: inset 0 0 0 1px rgba(111,142,124,.25); background: #19241e; }
@media (max-width: 760px) {
  .combat-map-layout { grid-template-columns: 1fr; }
  .combat-map { position: static; display: flex; overflow-x: auto; }
  .combat-map-title { display: none; }
  .combat-region { flex: 0 0 150px; }
}
.skill-status { min-width: 58px; color: var(--muted); font-size: 11px; text-align: right; }
.skill-status.ready { color: var(--gold); }
.combat-skill-row strong { color: #d6c8e1; }
.combat-skill-row.skill-equipped { border-color: #516a5d; background: #19231e; }
.boss-talent { color: #d4877d !important; }
.enemy-realm-line { color: #ddc68b !important; }
.tag.realm-tag { border-color: #776b45; color: #e0ca8b; }
.element-weakness { color: #d3aa6b !important; }
.affinity-tag { border-color: #8b7144 !important; color: #edc477 !important; }
.equipment-bonus { border-color: #66527a !important; color: #d7b8ef !important; background: rgba(92,65,112,.16); }
.element-金 { color: #d6d7c9 !important; }
.element-木 { color: #82bf91 !important; }
.element-水 { color: #79add2 !important; }
.element-火 { color: #dc8172 !important; }
.element-土 { color: #c0a36f !important; }
.action-row.high-risk { border-color: #70413c; background: linear-gradient(100deg, #281918, #171b19); }
.tag.danger-tag { border-color: #8b4f48; color: #e69a90; }
.tag.enemy-trait-tag { border-color: #66527a; color: #d4bde4; }
.fighter { padding: 4px 8px; }
.fighter .sigil { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 6px; border: 1px solid var(--line); border-radius: 50%; background: #161a18; font: 21px "KaiTi", serif; }
.fighter.enemy .sigil { border-color: #68423e; color: #d7877c; }
.fighter.enemy .sigil.enemy-sigil { overflow: hidden; width: 56px; height: 56px; padding: 0; background: #111512; }
.combat-enemy-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.fighter small { font-size: 10px; line-height: 1.45; }
.vs { color: #6f756f; font-family: Georgia, serif; }
.treasure-status { margin: 5px 0; padding: 6px 9px; font-size: 10px; }
.combat-report { margin-top: 8px; border: 1px solid #38463f; border-radius: 7px; overflow: hidden; background: rgba(14,18,16,.78); }
.combat-report-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 9px; border-bottom: 1px solid #303a35; background: rgba(39,54,47,.55); font-size: 10px; }
.combat-report-head strong { color: #c9ddd3; font-weight: 500; }
.combat-report-head span { color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.combat-log { height: 92px; overflow-y: auto; padding: 7px 9px; color: #aaa; font-size: 10px; line-height: 1.55; scrollbar-width: thin; }
.combat-log > div + div { margin-top: 2px; padding-top: 2px; border-top: 1px solid rgba(65,75,69,.22); }
.combat-log-empty { color: #717b75; }
.companion-card { padding: 0; overflow: hidden; }
.companion-aid { padding: 9px 11px; border: 1px solid #405348; border-radius: 7px; background: #17201b; color: #a9c7b7; font-size: 10px; line-height: 1.55; }
.companion-head { min-height: 100px; padding: 18px; background: linear-gradient(145deg, #2e463b, #222623); }
.companion-head .title-row { display: flex; justify-content: space-between; gap: 12px; }
.companion-head h3 { font-family: "KaiTi", serif; font-size: 21px; font-weight: 500; }
.companion-body { padding: 16px; }
.meter { display: grid; grid-template-columns: 42px 1fr 32px; gap: 7px; align-items: center; margin: 7px 0; color: var(--muted); font-size: 10px; }
.companion-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.relationship { padding: 3px 7px; border-radius: 20px; background: rgba(0,0,0,.25); color: #c7d7ce; font-size: 10px; }
.journal { border-left: 1px solid #394139; margin-left: 8px; padding-left: 22px; }
.journal-entry { position: relative; padding: 0 0 18px; color: #c6c3ba; font-size: 12px; line-height: 1.7; }
.journal-entry::before { content: ''; position: absolute; left: -27px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px #1b201e; }
.journal-entry time { display: block; color: var(--gold); font-size: 10px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 340px; padding: 12px 16px; border: 1px solid #41614f; border-radius: 8px; background: #203229; box-shadow: var(--shadow); color: #cee2d8; font-size: 12px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: none; }
.loot-feed { position: fixed; right: 18px; bottom: 60px; z-index: 40; display: flex; max-width: calc(100vw - 28px); flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.loot-toast { width: max-content; min-width: 145px; max-width: min(210px, calc(100vw - 28px)); padding: 7px 9px; border: 1px solid #4b6657; border-radius: 7px; background: rgba(24,35,29,.96); box-shadow: 0 7px 20px rgba(0,0,0,.36); opacity: 0; transform: translateX(12px); transition: .18s ease; }
.loot-toast.show { opacity: 1; transform: none; }
.loot-toast.leaving { opacity: 0; transform: translateX(12px); }
.loot-toast.rare { border-color: #927346; background: rgba(48,38,24,.97); }
.loot-title { display: block; margin-bottom: 2px; color: var(--gold); font-size: 9px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loot-items { display: flex; flex-wrap: wrap; gap: 4px 8px; color: #d5e2da; font-size: 10px; line-height: 1.35; }
.loot-item { display: inline-flex; align-items: center; gap: 4px; }
.loot-item-icon { width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid rgba(133,170,150,.35); border-radius: 4px; object-fit: cover; }
.loot-toast.rare .loot-items { color: #f0d49b; }
.skill-page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.skill-page-heading h3 { margin-bottom: 4px; }
.skill-page-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.skill-page-status span { padding: 5px 9px; border: 1px solid #3d5046; border-radius: 6px; background: rgba(36,50,43,.7); color: #b9d5c7; font-size: 10px; white-space: nowrap; }
.skill-xp-tag, .skill-xp-line { color: #d8b96f !important; }
.loot-equip-hint { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(217,173,98,.28); color: #f2c97d; font-size: 9px; line-height: 1.35; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(6,8,7,.72); backdrop-filter: blur(5px); }
.modal.hidden { display: none; }
.modal-card { position: relative; width: min(520px, 100%); max-height: 85vh; overflow: auto; padding: 28px; border: 1px solid #48534b; border-radius: 12px; background: #1d221f; box-shadow: 0 25px 80px #000; }
.modal-close { position: absolute; right: 12px; top: 9px; border: 0; background: none; color: var(--muted); font-size: 25px; cursor: pointer; }
.modal-quote { margin: 18px 0; padding: 15px; border-left: 2px solid var(--purple); background: #181b19; color: #d0c4d3; line-height: 1.9; font-family: "KaiTi", serif; }
.root-selection-lock { cursor: default; }
.root-choice-modal h2 { margin-bottom: 7px; }
.root-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.root-choice { min-height: 92px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #171c19; color: var(--text); text-align: left; cursor: pointer; transition: .18s; }
.root-choice:hover { border-color: var(--gold); transform: translateY(-1px); background: #1d241f; }
.root-choice strong, .root-choice small { display: block; }
.root-choice strong { margin-bottom: 7px; color: var(--gold); font-size: 15px; }
.root-choice small { color: var(--muted); line-height: 1.5; }
.root-choice.random { border-color: #505d56; }
.chat-modal { min-height: 520px; display: flex; flex-direction: column; }
.chat-title { display: flex; align-items: center; gap: 10px; }
.chat-title h2 { margin-bottom: 0; }
.chat-history { flex: 1; min-height: 300px; max-height: 48vh; overflow-y: auto; margin: 18px -5px 10px 0; padding-right: 8px; }
.chat-message { max-width: 86%; margin: 9px 0; }
.chat-message.user { margin-left: auto; text-align: right; }
.chat-message span { color: var(--gold); font-size: 10px; }
.chat-message p { display: inline-block; margin: 4px 0 0; padding: 10px 12px; border: 1px solid #343c37; border-radius: 9px; background: #171b19; color: #d5d0c5; text-align: left; white-space: pre-wrap; line-height: 1.65; }
.chat-message.user p { border-color: #3e5c4e; background: #23372e; }
.chat-empty { margin-top: 80px; text-align: center; color: var(--muted); }
.chat-empty p { margin-top: 8px; }
.chat-status { min-height: 22px; color: #d59a74; font-size: 11px; }
.quick-reply-block { margin: 2px 0 11px; }
.quick-reply-label, .manual-reply-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.quick-replies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.quick-reply { min-width: 0; padding: 9px 11px; border: 1px solid #3d5146; border-radius: 7px; background: #1a2922; color: #d7dfd9; text-align: left; white-space: normal; line-height: 1.45; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.quick-reply:hover, .quick-reply:focus-visible { border-color: var(--jade); background: #22382e; outline: none; }
.quick-reply:disabled { opacity: .5; cursor: wait; }
#companionChatForm { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
#companionChatForm textarea { resize: none; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; outline: none; background: #131614; color: var(--ink); line-height: 1.5; }
#companionChatForm textarea:focus { border-color: var(--jade); }
.chat-note { margin: 8px 0 0 !important; color: #777 !important; font-size: 9px !important; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; }
.companion-settings { min-width: 150px; }
.combat-settings { min-width: 150px; }
.compact-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.compact-settings .setting-row { justify-content: flex-start; gap: 5px; margin: 0; color: var(--muted); font-size: 10px; white-space: nowrap; }
.compact-settings select { padding: 3px 5px; font-size: 10px; }
.compact-settings input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }
select { border: 1px solid var(--line); border-radius: 6px; background: #141715; color: var(--ink); padding: 7px 9px; }
.tiny-bar .sense { background: #bd8de0; }
.craft-system-summary { display: grid; grid-template-columns: minmax(210px, .65fr) 1fr; align-items: center; gap: 18px; margin-bottom: 10px; padding: 13px 16px; }
.craft-system-summary strong, .craft-system-summary small { display: block; }
.craft-system-summary strong { margin: 2px 0; color: #d5b2ed; font-size: 18px; }
.sense-meter, .attunement-line i { height: 7px; overflow: hidden; border-radius: 999px; background: #0e1210; }
.sense-meter i, .attunement-line i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #81609a, #c8a3e0); }
.recipe-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.archive-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.archive-tabs button, .archive-toggle { padding: 5px 9px; border: 1px solid #3b4941; border-radius: 6px; background: #171d19; color: var(--muted); font-size: 10px; cursor: pointer; }
.archive-tabs button.active, .archive-toggle:hover { border-color: #6e9d84; background: #244437; color: #d8e8df; }
.archive-toggle { margin-top: 7px; width: fit-content; }
.archive-empty { grid-column: 1 / -1; padding: 20px; }
.skill-archive-tabs { margin-bottom: 12px; }
.attunement-line { display: grid; gap: 4px; margin-top: 7px; color: #d4b06b; font-size: 10px; }
.attunement-line i { width: 100%; }
.refine-treasure { color: #e0bd75; }
.tribulation-prep-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 18px 0; }
.tribulation-prep-grid label { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 8px; color: var(--muted); }
.tribulation-readiness { display: flex; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid #704b42; border-radius: 8px; background: #251a17; }
.tribulation-readiness span { color: #ddb38c; font-size: 11px; }
.tribulation-confirm { width: 100%; margin-top: 12px; }
.image-missing { background: radial-gradient(circle, #32453b, #171d19); }
.image-missing::after { content: '诀'; color: var(--gold); }
.skill-page-tabs { margin-bottom: 10px; }
.cultivation-art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cultivation-art-card { display: flex; flex-direction: column; min-height: 205px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #171c19; }
.cultivation-art-card.active-art { border-color: #9c7a42; background: linear-gradient(145deg, #211f18, #171c19); }
.cultivation-art-card h4 { margin: 6px 0; }
.cultivation-art-card p { flex: 1; color: #c9c4b9; font-size: 11px; line-height: 1.55; }
.cultivation-art-card > small { color: var(--muted); line-height: 1.45; }
.art-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; }
.art-actions .archive-toggle { grid-column: 1 / -1; width: 100%; margin: 0; }
.furnace-panel { display: grid; grid-template-columns: minmax(180px, .5fr) 1fr; gap: 15px; align-items: center; margin-bottom: 10px; }
.furnace-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.furnace-selector button { padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: #161b18; color: var(--text); text-align: left; cursor: pointer; }
.furnace-selector button.active { border-color: #b5884a; background: #2a2116; }
.furnace-selector strong, .furnace-selector small { display: block; }
.furnace-selector small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.event-choice-list { display: grid; gap: 8px; }
.event-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid #435449; border-radius: 8px; background: #18221d; color: var(--text); text-align: left; cursor: pointer; }
.event-choice:hover { border-color: var(--gold); background: #25231b; }
.event-choice small { color: var(--muted); }
.text-art { display: grid; place-items: center; background: radial-gradient(circle, #405446, #1b241f); color: var(--gold); font: 24px KaiTi, serif; }
.turn-combat-panel { display: grid; gap: 10px; }
.turn-stage { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.turn-fighter { min-height: 190px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #151b18; display: grid; align-content: start; gap: 9px; }
.fighter-title { display: flex; align-items: center; gap: 10px; }
.fighter-title .sigil { width: 44px; height: 44px; border: 1px solid #456151; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.fighter-title .enemy-sigil { overflow: hidden; border-color: #75463f; }
.fighter-title .combat-enemy-art { width: 100%; height: 100%; object-fit: cover; }
.fighter-spirit .progress.spirit i { background: #6aa7c8; }
.turn-center { display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); }
.ap-orb { width: 70px; height: 70px; border-radius: 50%; border: 1px solid #b5884a; background: radial-gradient(circle, #302716, #151713); display: grid; place-items: center; align-content: center; color: var(--gold); }
.ap-orb strong { font-size: 19px; }.ap-orb span { font-size: 9px; }
.enemy-intent { margin-top: auto; padding: 9px 10px; border: 1px solid #806338; border-radius: 7px; background: #262116; display: grid; gap: 2px; }
.enemy-intent span,.enemy-intent small { color: var(--muted); font-size: 10px; }.enemy-intent.threat-致命 { border-color: #a74d42; background: #2b1817; }.enemy-intent.threat-高 { border-color: #9a6335; }
.turn-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.turn-actions button { min-height: 52px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid #3e4b43; border-radius: 7px; background: #222925; color: #ddd7c9; cursor: pointer; }.turn-actions button:hover:not(:disabled) { border-color: #6e8d7b; background: #29342e; }.turn-actions button:disabled { background: #181d1a; color: #696f6b; opacity: 1; cursor: not-allowed; }.turn-actions button.warn { border-color: #704b45; background: #4d302d; color: #e1bbb5; }.turn-actions small { font-size: 9px; color: var(--muted); }
.turn-submenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #111613; }
.turn-submenu button { text-align: left; display: grid; gap: 4px; padding: 8px 10px; border: 1px solid #3e4b43; border-radius: 7px; background: #202723; color: #ddd7c9; cursor: pointer; }.turn-submenu button:hover:not(:disabled) { border-color: #6e8d7b; }.turn-submenu button:disabled { background: #171c19; color: #696f6b; opacity: 1; cursor: not-allowed; }.turn-submenu small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.turn-statuses { display: flex; flex-wrap: wrap; gap: 4px; }.turn-status { padding: 2px 6px; border: 1px solid #48735f; border-radius: 10px; font-size: 9px; color: #8fd4b4; }.turn-status.bad { border-color: #85504a; color: #d38a7f; }
.age-display { min-width: 112px; padding: 8px 12px; border: 1px solid #536c5d; border-radius: 9px; background: #172019; display: grid; gap: 1px; }
.age-display span { color: var(--muted); font-size: 9px; }.age-display strong { color: #d8e6dc; font-size: 13px; }.age-display.life-warn { border-color: #9c7a42; }.age-display.life-danger,.age-display.life-critical { border-color: #a45245; background: #281817; }.age-display.life-immortal { border-color: #6e87a8; background: #17202a; }
.activity-plan-control { min-width: 170px; display: grid; gap: 4px; color: var(--muted); font-size: 10px; }.activity-plan-control select { width: 100%; }.activity-plan-control small { font-size: 9px; }
.resource-use { margin-top: 4px; padding: 3px 6px; width: fit-content; border: 1px solid #7b6b3f; border-radius: 5px; background: #292315; color: #dbbd7b; font-size: 9px; cursor: pointer; }
.omen-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }.omen-chip { padding: 5px 9px; border: 1px solid #8b6b39; border-radius: 14px; color: #dfbd77; background: #251f15; font-size: 10px; }
.expedition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.expedition-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #151b18; }.expedition-card.locked { opacity: .68; }.expedition-card.available { border-color: #4c745f; }.expedition-glyph { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #6c765b; border-radius: 50%; color: var(--gold); font: 22px KaiTi,serif; background: radial-gradient(circle,#29372d,#151a17); }.expedition-card h3 { margin: 3px 0 5px; }.expedition-card p { margin: 0 0 5px; color: #bcb9b0; font-size: 11px; }.expedition-card small { color: var(--muted); }.pace-buttons { display: grid; gap: 4px; }.pace-buttons button { padding: 6px 9px; }
.expedition-run { display: grid; gap: 14px; }.expedition-route { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }.route-node { position: relative; display: grid; justify-items: center; gap: 5px; color: var(--muted); text-align: center; font-size: 10px; }.route-node i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; background: #111613; }.route-node.done i { border-color: #4f896b; color: #8dd5b3; }.route-node.active i { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 16px #a77c3733; }.expedition-status { display: flex; gap: 8px; flex-wrap: wrap; }.expedition-status span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 10px; }.node-focus { padding: 15px; border: 1px solid #4b5f53; border-radius: 9px; background: #18201c; }.expedition-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 12px; }.expedition-actions button { display: grid; gap: 3px; }.expedition-actions small { font-size: 9px; color: var(--muted); }

@media (max-width: 1180px) {
  .shell { padding: 18px; }
  .layout { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
  .action-row { grid-template-columns: minmax(0, 1fr) auto; }
  .action-row > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  .action-row > :last-child { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .grid.three, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1050px) {
  .grid.two { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .page-head { align-items: flex-start; }
  .cultivation-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expedition-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  body { height: auto; overflow-x: hidden; overflow-y: auto; }
  .shell { padding: 14px; }
  .topbar { align-items: flex-start; gap: 14px; }
  .top-actions { justify-content: flex-start; }
  .layout { display: block; }
  .shell { display: block; height: auto; overflow: visible; }
  .sidebar { height: auto; padding-right: 0; overflow: visible; }
  main { height: auto; padding-right: 0; overflow: visible; }
  .identity, .compact, .current-task { display: none; }
  .current-task { position: static; }
  nav { display: flex; overflow-x: auto; margin-bottom: 16px; padding-bottom: 5px; }
  nav { scrollbar-width: thin; }
  nav button { flex: 0 0 auto; width: auto; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .loot-feed { right: 10px; bottom: 52px; width: min(210px, calc(100vw - 20px)); }
  .combat-panel-toolbar { align-items: flex-start; }
  .compact-settings { width: 100%; }
  .combat-stage { grid-template-columns: 1fr 30px 1fr; padding: 6px 2px 4px; }
  .page-head { flex-direction: column; gap: 10px; }
  .companion-settings { width: 100%; max-width: 260px; }
  .combat-settings { max-width: none; }
  .turn-stage { grid-template-columns: 1fr; }.turn-center { grid-template-columns: auto auto; }.turn-actions { grid-template-columns: repeat(3, 1fr); }
  .expedition-actions { grid-template-columns: repeat(2,1fr); }.expedition-route { overflow-x: auto; grid-template-columns: repeat(5,120px); }
}
@media (max-width: 560px) {
  .shell { padding: 10px; }
  h1 { font-size: 25px; }
  h2 { font-size: 23px; }
  .top-actions { gap: 5px; }
  .ghost, .file-label { padding: 7px 9px; }
  .panel { padding: 11px; }
  .action-row { grid-template-columns: 1fr; gap: 8px; padding: 11px; }
  .action-row > div:nth-child(2), .action-row > :last-child { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .action-row > button, .action-row > .button-hint, .action-row > .button-hint button { width: 100%; }
  .skill-status { text-align: left; }
  .compact-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
  .compact-settings .setting-row { justify-content: space-between; }
  .combat-focus-panel { padding: 9px; }
  .combat-stage { grid-template-columns: 1fr 20px 1fr; gap: 2px; }
  .fighter { padding: 4px 2px; }
  .fighter .sigil { width: 42px; height: 42px; font-size: 19px; }
  .modal { padding: 8px; }
  .modal-card { padding: 22px 16px 16px; }
  .chat-modal { min-height: 440px; }
  .quick-replies { grid-template-columns: 1fr; }
  #companionChatForm { grid-template-columns: 1fr; }
  .root-choice-grid { grid-template-columns: 1fr; }
  .craft-system-summary { grid-template-columns: 1fr; }
  .cultivation-art-grid, .furnace-panel, .furnace-selector { grid-template-columns: 1fr; }
  .turn-actions { grid-template-columns: repeat(2, 1fr); }
}
.pace-buttons button, .expedition-actions button { color: #dfd6c2; background: #202a25; border-color: #42544a; }
.pace-buttons button.primary, .expedition-actions button.primary { color: #e8f6ef; background: #285845; border-color: #3a745c; }
.pace-buttons button.warn, .expedition-actions button.warn { color: #f5d7c8; background: #593631; border-color: #7a4b44; }
.expedition-actions button.danger-text { color: #e49b90; background: #201a18; border-color: #563a35; }
.important-notice { text-align: center; }
.important-notice-body { display: grid; gap: 12px; margin: 16px 0; }
.important-item-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #111713; }
.important-item-row small { display: block; margin-top: 7px; line-height: 1.55; }
.important-item-art { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.important-art-glyph { width: 88px; height: 88px; margin: auto; display: grid; place-items: center; border: 1px solid #9a7330; border-radius: 50%; color: #e1bd6e; font: 42px serif; }
.important-notice-footer { color: var(--jade); }
.new-items-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; border-color: #92713d; }
.new-items-panel small { display: block; margin-top: 4px; }
.new-item-card { outline: 1px solid #c39142; box-shadow: inset 0 0 24px #b67c2422; }
#nav [data-page="overview"].has-new-items::before { content: attr(data-new-items); position: absolute; right: 8px; top: 7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; color: white; background: #b54c40; font: 700 11px sans-serif; }