* {
    box-sizing: border-box;
}
/* Rev. 0.5.74: permanent Combat Training */
.combat-training-page { display: grid; gap: 1rem; }
.combat-training-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem; }
.combat-training-hero h1 { margin: .2rem 0 .35rem; }
.combat-training-hero p { margin: 0; color: #aec3d8; max-width: 760px; }
.combat-training-kicker { color: #55c7ff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.combat-training-level { min-width: 230px; text-align: right; }
.combat-training-level span, .combat-training-level small { display: block; color: #91a8bf; }
.combat-training-level strong { display: block; margin: .15rem 0; color: #f4fbff; font-size: 1.45rem; }
.combat-training-message { padding: .8rem 1rem; border: 1px solid #2f7654; border-radius: 9px; background: rgba(28, 92, 59, .25); color: #baf5d3; }
.combat-training-message.error { border-color: #8b4148; background: rgba(113, 37, 45, .25); color: #ffbdc3; }
.combat-training-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: 1rem; }
.combat-training-rules > div { padding: .75rem; border: 1px solid #284159; border-radius: 8px; background: rgba(4, 13, 25, .35); }
.combat-training-rules span, .combat-training-rules strong { display: block; }
.combat-training-rules span { color: #91a8bf; font-size: .76rem; }
.combat-training-rules strong { margin-top: .2rem; color: #71d3ff; }
.combat-training-rules p { grid-column: 1 / -1; margin: .2rem 0 0; color: #aec3d8; }
.combat-training-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.combat-training-card { display: flex; flex-direction: column; gap: .85rem; padding: 1rem; }
.combat-training-card-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.combat-training-card-head span { color: #55c7ff; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.combat-training-card-head h2 { margin: .2rem 0 0; font-size: 1.05rem; }
.combat-training-card-head > strong { color: #c7a7ff; white-space: nowrap; }
.combat-training-card > p { min-height: 3.5em; margin: 0; color: #aec3d8; font-size: .86rem; }
.combat-training-values { display: grid; gap: .45rem; }
.combat-training-values > div { display: flex; justify-content: space-between; gap: .8rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(62, 87, 112, .55); }
.combat-training-values span { color: #91a8bf; font-size: .78rem; }
.combat-training-values strong { color: #f0f8ff; text-align: right; }
.combat-training-cost { margin-top: auto; padding: .7rem; border: 1px solid #314a64; border-radius: 8px; background: rgba(7, 20, 34, .55); }
.combat-training-cost span, .combat-training-cost small { display: block; color: #91a8bf; }
.combat-training-cost strong { display: block; margin: .1rem 0; color: #ffd36a; }
.combat-training-card form, .combat-training-card button { width: 100%; }
.combat-training-purchase-title { margin-top: auto; }
.combat-training-purchase-title span { display: block; color: #dceeff; font-weight: 800; }
.combat-training-purchase-title small { display: block; margin-top: .15rem; color: #91a8bf; line-height: 1.35; }
.combat-training-purchases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.combat-training-purchases form { min-width: 0; }
.combat-training-purchases button { display: grid; gap: .12rem; height: 100%; padding: .65rem .4rem; line-height: 1.2; }
.combat-training-purchases button span { font-weight: 800; }
.combat-training-purchases button strong { color: #ffe08a; font-size: .76rem; }
.combat-training-purchases button small { color: #c0d2e4; font-size: .67rem; font-weight: 500; }
.combat-training-purchases button:disabled strong,
.combat-training-purchases button:disabled small { color: inherit; }
.combat-training-maximum { margin-top: auto; padding: .75rem; border-radius: 8px; background: rgba(62, 48, 105, .4); color: #d6c3ff; text-align: center; font-weight: 700; }
@media (max-width: 1050px) { .combat-training-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .combat-training-hero { align-items: flex-start; flex-direction: column; }
    .combat-training-level { min-width: 0; text-align: left; }
    .combat-training-rules, .combat-training-grid { grid-template-columns: 1fr; }
}


/* World Boss */
.world-boss-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 15%, rgba(239, 68, 68, .18), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(20, 33, 54, .98));
}
.world-boss-heading h1 { margin: .15rem 0 .35rem; }
.world-boss-heading p,
.world-boss-test-info p,
.world-boss-rankings > p,
.world-boss-shop > p { margin: .25rem 0 0; color: #b8c9db; }
.world-boss-kicker { color: #fca5a5; font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.world-boss-test-badge {
    flex: 0 0 auto; display: grid; gap: .2rem; min-width: 145px; padding: .75rem 1rem;
    border: 1px solid rgba(251, 191, 36, .55); border-radius: 10px;
    background: rgba(120, 53, 15, .2); text-align: center;
}
.world-boss-test-badge strong { color: #fde68a; }
.world-boss-test-badge span { color: #d6c6a2; font-size: .75rem; }
.world-boss-test-info { border-color: rgba(251, 191, 36, .45); background: linear-gradient(135deg, rgba(120, 53, 15, .18), rgba(15, 23, 42, .96)); }
.world-boss-test-info > strong { color: #fde68a; }
.world-boss-arena { position: relative; }
.world-boss-arena .character-section-title time { color: #fca5a5; font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.world-boss-bars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, .38fr); gap: 1rem; align-items: center; }
.world-boss-bar-label { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: .42rem; color: #cbd5e1; font-size: .78rem; }
.world-boss-bar-label strong { color: #f8fafc; }
.world-boss-bar { height: 16px; overflow: hidden; border: 1px solid #334b65; border-radius: 999px; background: #050d19; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .48); }
.world-boss-bar > span { display: block; height: 100%; border-radius: inherit; transition: width .35s ease; }
.world-boss-bar > .danger { background: linear-gradient(90deg, #991b1b, #ef4444 70%, #fca5a5); box-shadow: 0 0 12px rgba(239, 68, 68, .45); }
.world-boss-bar > .support { background: linear-gradient(90deg, #0369a1, #22d3ee 70%, #a5f3fc); box-shadow: 0 0 12px rgba(34, 211, 238, .42); }
.world-boss-support-value { display: grid; gap: .12rem; padding: .65rem .8rem; border: 1px solid rgba(34, 211, 238, .35); border-radius: 9px; background: rgba(8, 145, 178, .09); }
.world-boss-support-value span,
.world-boss-support-value small { color: #9fb5c9; font-size: .7rem; }
.world-boss-support-value strong { color: #67e8f9; font-size: 1.12rem; }
.world-boss-personal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .7rem; align-items: center; margin-top: 1rem; padding: .8rem; border: 1px solid rgba(96, 165, 250, .35); border-radius: 10px; background: rgba(30, 64, 175, .08); }
.world-boss-personal > div { display: grid; gap: .16rem; }
.world-boss-personal span { color: #91a9bf; font-size: .7rem; text-transform: uppercase; }
.world-boss-personal form,
.world-boss-personal button { margin: 0; }
.world-boss-forfeit-notice { grid-column: 1 / -1; color: #fca5a5; font-size: .75rem; }
.world-boss-join-grid,
.world-boss-ranking-grid,
.world-boss-shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.world-boss-join-card,
.world-boss-ranking-grid > article,
.world-boss-shop-grid > article { display: flex; flex-direction: column; padding: .9rem; border: 1px solid #2b435d; border-radius: 10px; background: rgba(4, 13, 25, .4); }
.world-boss-ranking-grid > article { min-width: 0; }
.world-boss-join-card h3,
.world-boss-ranking-grid h3,
.world-boss-shop-grid h3 { margin: 0 0 .35rem; }
.world-boss-join-card p,
.world-boss-shop-grid p { color: #aebfd1; min-height: 2.5em; }
.world-boss-join-card label { margin-top: .6rem; }
.world-boss-join-card button { width: 100%; }
.world-boss-join-card.support-card { border-color: rgba(34, 211, 238, .35); background: rgba(8, 145, 178, .06); }
.world-boss-waiting { padding: 1.2rem; text-align: center; }
.world-boss-waiting span { color: #7dd3fc; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.world-boss-waiting h2 { margin: .3rem 0; font-size: 1.75rem; }
.world-boss-ranking { width: 100%; font-variant-numeric: tabular-nums; }
.world-boss-ranking th,
.world-boss-ranking td { padding: .24rem .45rem; white-space: nowrap; text-align: right; }
.world-boss-ranking th:first-child,
.world-boss-ranking td:first-child { width: 2.8rem; }
.world-boss-ranking th:nth-child(2),
.world-boss-ranking td:nth-child(2) { text-align: left; }
.table-scroll,
.guild-contribution-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-scroll > .world-boss-ranking { min-width: max-content; }
.world-boss-rankings .character-section-title > a { color: #7dd3fc; font-size: .76rem; font-weight: 800; text-decoration: none; }
.world-boss-rankings .character-section-title > a:hover,
.world-boss-rankings .character-section-title > a:focus-visible { color: #cffafe; text-decoration: underline; }
.world-boss-shop .character-section-title > strong { color: #fcd34d; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.world-boss-shop-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.world-boss-shop-grid article > span { color: #7dd3fc; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.world-boss-shop-grid button { width: 100%; margin-top: auto; }
.world-boss-shop-form { display: grid; gap: .55rem; margin-top: auto; }
.world-boss-shop-form label { display: grid; gap: .32rem; color: #91a9bf; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.world-boss-shop-form select { width: 100%; }
.world-boss-shop-form button { margin-top: 0; }
.player-title-dungeon-25000-first { color: #f87171; text-shadow: 0 0 12px rgba(239, 68, 68, .8), 0 0 24px rgba(127, 29, 29, .48); }
.player-title-supply-25000-first { color: #67e8f9; text-shadow: 0 0 12px rgba(34, 211, 238, .78), 0 0 24px rgba(14, 116, 144, .46); }
.player-title-dungeon-50000-normal-first,
.player-title-dungeon-50000-hard-first,
.player-title-supply-50000-normal-first,
.player-title-supply-50000-hard-first {
    display: inline-block;
    color: #fff;
    font-weight: 900;
    letter-spacing: .015em;
    background-size: 240% 100%;
    background-image: linear-gradient(100deg, #38bdf8 0%, #8b5cf6 20%, #ec4899 40%, #f97316 60%, #facc15 80%, #4ade80 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .98)) drop-shadow(0 0 11px rgba(45, 212, 191, .78));
    animation: dungeon-server-first-colorflow 5.5s ease-in-out infinite alternate;
}
@keyframes dungeon-server-first-colorflow {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}
.player-title-world-boss-weekly-combat { color: #fb7185; text-shadow: 0 0 11px rgba(244, 63, 94, .72); }
.player-title-world-boss-lifetime-combat,
.player-title-world-boss-lifetime-gathering { color: #f9d976; text-shadow: 0 0 14px rgba(249, 217, 118, .9), 0 0 28px rgba(168, 85, 247, .62); }
.player-title-world-boss-lifetime-second { color: #cfe8ff; text-shadow: 0 0 13px rgba(96, 165, 250, .82), 0 0 24px rgba(59, 130, 246, .45); }
.player-title-world-boss-lifetime-third { color: #fdba74; text-shadow: 0 0 13px rgba(249, 115, 22, .8), 0 0 24px rgba(154, 52, 18, .48); }
.player-title-world-boss-weekly-gathering { color: #5eead4; text-shadow: 0 0 11px rgba(20, 184, 166, .72); }
.chat-player-title.player-title-dungeon-25000-first,
.chat-player-title.player-title-world-boss-weekly-combat { color: #fb7185; }
.chat-player-title.player-title-supply-25000-first,
.chat-player-title.player-title-world-boss-weekly-gathering { color: #67e8f9; }
.chat-player-title.player-title-dungeon-50000-normal-first { color: #c084fc; }
.chat-player-title.player-title-dungeon-50000-hard-first { color: #fbbf24; }
.chat-player-title.player-title-supply-50000-normal-first { color: #5eead4; }
.chat-player-title.player-title-supply-50000-hard-first { color: #a7f3d0; }
.chat-player-title.player-title-world-boss-lifetime-combat,
.chat-player-title.player-title-world-boss-lifetime-gathering { color: #f9d976; }
.chat-player-title.player-title-world-boss-lifetime-second { color: #cfe8ff; }
.chat-player-title.player-title-world-boss-lifetime-third { color: #fdba74; }
@media (prefers-reduced-motion: reduce) {
    .player-title-dungeon-50000-normal-first,
    .player-title-dungeon-50000-hard-first,
    .player-title-supply-50000-normal-first,
    .player-title-supply-50000-hard-first { animation: none; }
}
@media (max-width: 900px) {
    .world-boss-bars { grid-template-columns: 1fr; }
    .world-boss-personal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .world-boss-personal form { grid-column: 1 / -1; }
    .world-boss-personal button { width: 100%; }
}
@media (max-width: 640px) {
    .world-boss-heading { align-items: flex-start; flex-direction: column; }
    .world-boss-test-badge { box-sizing: border-box; width: 100%; }
    .world-boss-join-grid,
    .world-boss-ranking-grid { grid-template-columns: 1fr; }
    .world-boss-personal { grid-template-columns: 1fr; }
    .world-boss-waiting h2 { font-size: 1.35rem; }
}


:root {
    --rarity-mystic-color: #f472b6;
    --rarity-mystic-rgb: 244, 114, 182;
}

/* Amulet late-game progression. */
.amulet-hero { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 38px); overflow: hidden; background: radial-gradient(circle at 8% 32%, rgba(168, 85, 247, .24), transparent 36%), linear-gradient(135deg, #17233a, #111c30); }
.amulet-emblem { display: grid; place-items: center; width: 116px; aspect-ratio: 1; border: 2px solid #b06af5; border-radius: 50%; color: #e5c7ff; background: radial-gradient(circle, #7936b966, #11182a 68%); box-shadow: inset 0 0 22px #b06af54d, 0 0 35px #6f39b644; font-size: 4.7rem; line-height: 1; }
.amulet-hero-content h1 { margin: 3px 0 6px; font-size: clamp(1.75rem, 3vw, 2.7rem); }
.amulet-hero-content > p { max-width: 72ch; margin: 0 0 14px; color: #c8d5e7; }
.amulet-level-line, .amulet-heading, .amulet-contribution-title, .amulet-skill-title, .amulet-reset-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.amulet-level-line { margin-bottom: 6px; }
.amulet-level-line strong { font-size: 1.1rem; }
.amulet-level-line small, .amulet-level-line span, .amulet-heading > p { color: #afbdd0; }
.amulet-progress { height: 11px; overflow: hidden; border: 1px solid #5e3d78; border-radius: 99px; background: #0b1525; }
.amulet-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #993fe4, #e15cd5, #f4c46b); }
.amulet-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.amulet-metrics > div { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid #3a4a65; border-radius: 8px; background: #0d182a99; }
.amulet-metrics span { color: #a9bad0; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.amulet-metrics strong { font-size: .95rem; }
.amulet-section { margin-top: 12px; }
.amulet-heading { margin-bottom: 12px; }
.amulet-heading h2 { margin: 2px 0 0; }
.amulet-heading > p { margin: 0; }
.amulet-contribution-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.amulet-contribution-card { display: grid; align-content: start; gap: 8px; margin: 0; padding: 11px; border: 1px solid #374b68; border-radius: 9px; background: #0d192b; }
.amulet-contribution-title span, .amulet-contribution-card small { color: #a9bad0; font-size: .75rem; }
.amulet-amount-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; }
.amulet-amount-row input { min-width: 0; width: 100%; }
.amulet-amount-row button { min-width: 0; padding-inline: 9px; }
.amulet-rate-info { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #374b68; border-radius: 8px; color: #b7c5d8; background: #0d192b; }
.amulet-rate-info p { margin: 0 0 6px; }
.amulet-rate-info summary { cursor: pointer; }
.amulet-rate-info details p { margin: 8px 0 0; }
.amulet-points-preview { display: block; font-size: .8rem; color: #c8d5e7; overflow-wrap: anywhere; }
.amulet-metrics strong { overflow-wrap: anywhere; }
.amulet-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.amulet-skill-card { display: grid; align-content: start; gap: 9px; padding: 13px; border: 1px solid #3c4f6a; border-radius: 9px; background: #0d192b; }
.amulet-skill-card h3, .amulet-skill-card p { margin: 0; }
.amulet-skill-card p { min-height: 2.6em; color: #b7c5d8; }
.amulet-skill-title > span { padding: 3px 7px; border: 1px solid #7b5b2b; border-radius: 99px; color: #f4c46b; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.amulet-skill-card.is-coming-soon { opacity: .72; }
.amulet-skill-value { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid #2d3b51; }
.amulet-skill-value strong { color: #e5c7ff; font-size: 1.15rem; }
.amulet-skill-value span { color: #99abc2; font-size: .75rem; }
.amulet-skill-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.amulet-skill-actions button { min-width: 58px; }
.amulet-reset-row { margin-top: 12px; padding: 12px; border: 1px solid #4b3b55; border-radius: 9px; background: #171525; }
.amulet-reset-row > div { display: grid; gap: 3px; }
.amulet-reset-row span { color: #b5a9bd; }
.amulet-reset-row form { margin: 0; }
.amulet-history-table { width: 100%; }
.amulet-history-table th, .amulet-history-table td { text-align: left; }
@media (max-width: 1050px) {
    .amulet-contribution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .amulet-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .amulet-hero { grid-template-columns: 1fr; }
    .amulet-emblem { width: 86px; font-size: 3.6rem; }
    .amulet-contribution-grid, .amulet-skill-grid, .amulet-metrics { grid-template-columns: 1fr; }
    .amulet-skill-card p { min-height: 0; }
    .amulet-reset-row { align-items: stretch; }
    .amulet-reset-row button { width: 100%; }
}


/* Relic progression and Forge roll controls. */
.relic-hero {
    display: grid;
    grid-template-columns: minmax(210px, 290px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 3vw, 48px);
    overflow: hidden;
    background: radial-gradient(circle at 18% 42%, #1d3a57 0, #15243b 34%, #152135 72%);
}
.relic-art-panel { display: grid; justify-items: center; align-content: center; min-width: 0; }
.relic-art-panel img { display: block; width: min(100%, 260px); height: 270px; object-fit: contain; filter: drop-shadow(0 0 24px #4591db66); }
.relic-art-level { display: grid; justify-items: center; gap: 1px; margin-top: -8px; color: #b6d7e9; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.relic-art-level strong { color: #f6f7ff; font-size: 2rem; line-height: 1; letter-spacing: 0; }
.relic-art-level small { color: #9cb6d0; font-size: .9rem; }
.relic-hero-content h1 { margin: 4px 0 8px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.relic-hero-content > p { max-width: 65ch; color: #c7d6e7; }
.relic-level-progress { height: 9px; overflow: hidden; border: 1px solid #355772; border-radius: 99px; background: #0c1727; }
.relic-level-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #42c9ea, #8a5cff); }
.relic-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
.relic-metrics > div { display: grid; align-content: center; gap: 3px; min-height: 65px; padding: 9px 12px; border: 1px solid #35516d; border-radius: 9px; background: #0b182bbb; }
.relic-metrics span { color: #a9bfd8; font-size: .76rem; }
.relic-metrics strong { font-size: .99rem; }
.relic-material-summary { display: flex; align-items: center; gap: 8px 12px; margin-top: 9px; }
.relic-material-summary > span { flex: 0 0 auto; color: #c4b5fd; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.relic-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.relic-section-heading h2 { margin: 3px 0 0; }
.relic-target-level { padding: 7px 10px; border: 1px solid #366180; border-radius: 99px; color: #9be9ff; font-size: .83rem; }
.relic-upgrade-card > p { margin: 12px 0; }
.relic-cost-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 13px 0; }
.relic-cost-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid #30445f; border-radius: 8px; background: #111d2d; }
.relic-cost-grid span, .relic-cost-note { color: #a9bfd8; }
.relic-upgrade-card form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 8px; }
.relic-shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.relic-shop-grid .card { margin: 0; }
.relic-shop-card { display: grid; align-content: start; gap: 8px; }
.relic-shop-card h2, .relic-shop-card p { margin: 0; }
.relic-shop-card p { color: #c7d6e7; line-height: 1.5; }
.relic-purchase-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.relic-purchase-buttons form { margin: 0; }
.relic-purchase-buttons button { min-height: 36px; padding: 7px 12px; }
.relic-month-track { display: flex; justify-content: space-between; max-width: 240px; padding: 7px 10px; border: 1px solid #30445f; border-radius: 8px; }
.relic-month-track span { color: #a9bfd8; }
.relic-service-grid { margin-top: 10px; }
.relic-service-card .relic-purchase-buttons { align-self: end; }
.relic-service-card .button-link { min-height: 36px; padding: 7px 12px; }
.relic-confirm-modal { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.relic-confirm-modal .chat-wire-confirm-panel { max-height: calc(100dvh - 32px); overflow-y: auto; border-color: rgba(167, 139, 250, .6); background: radial-gradient(circle at top left, rgba(139, 92, 246, .2), transparent 48%), #0f172a; }
.relic-confirm-modal .chat-wire-confirm-icon { border-color: rgba(167, 139, 250, .6); background: rgba(109, 40, 217, .2); color: #c4b5fd; }
.relic-confirm-modal .chat-wire-confirm-eyebrow { color: #c4b5fd; }
.forge-stats-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 8px; }
.forge-stats-heading h3 { margin: 0; }
.forge-roll-unlock-link { font-size: .78rem; }
.forge-roll-dialog { width: min(960px, calc(100vw - 32px)); max-height: min(84dvh, 850px); padding: 18px; overflow: auto; border: 1px solid #486682; border-radius: 12px; background: #142238; color: #f1f5f9; box-shadow: 0 24px 80px #000b; }
.forge-roll-dialog::backdrop { background: #020817d9; }
.forge-roll-dialog-header { position: sticky; top: -18px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -18px -18px 10px; padding: 15px 18px; border-bottom: 1px solid #30445f; background: #142238; }
.forge-roll-dialog-header h3 { margin: 0; }
.forge-roll-dialog > p { color: #c7d6e7; }
.forge-tempering-stone-choice { display: grid; gap: 7px; width: min(100%, 520px); margin: 0 0 12px; padding: 12px; border: 1px solid #374b68; border-radius: 9px; background: #0d192b; }
.forge-tempering-stone-choice select { width: 100%; min-width: 0; padding: 8px; border: 1px solid #42526b; border-radius: 7px; color: #f1f5f9; background: #091626; font: inherit; font-size: 12px; }
.forge-tempering-stone-choice select:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.forge-tempering-stone-choice small { color: #a9bfd8; }
.forge-tempering-stone-choice p { margin: 0; color: #c4b5fd; overflow-wrap: anywhere; }
.relic-roll-list { display: grid; gap: 8px; }
.relic-roll-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid #30445f; border-radius: 8px; }
.relic-roll-row > div:first-child { display: grid; gap: 3px; }
.relic-roll-row span { color: #a9bfd8; }
.relic-roll-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.relic-roll-buttons form { margin: 0; }
.relic-roll-buttons button { white-space: nowrap; }
@media (max-width: 720px) {
    .relic-hero { grid-template-columns: 1fr; gap: 8px; }
    .relic-art-panel img { width: min(100%, 180px); height: 180px; }
    .relic-art-level strong { font-size: 1.45rem; }
    .relic-metrics { gap: 5px; }
    .relic-metrics > div { min-height: 54px; padding: 7px; }
    .relic-metrics span { font-size: .66rem; }
    .relic-metrics strong { font-size: .79rem; }
    .relic-material-summary { align-items: stretch; flex-direction: column; gap: 5px; }
    .relic-cost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .relic-shop-grid { grid-template-columns: 1fr; }
    .relic-cost-grid > div { padding: 8px; flex-wrap: wrap; }
    .forge-stats-heading > button, .forge-stats-heading > a { margin-left: auto; }
    .forge-roll-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); padding: 12px; }
    .forge-roll-dialog-header { top: -12px; margin: -12px -12px 8px; padding: 12px; }
}

.game-confirm-dialog {
    width: min(520px, calc(100vw - 28px));
    max-width: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, .5);
    border-radius: 16px;
    background: #0b1726;
    color: #e8f3ff;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .72), 0 0 32px rgba(56, 189, 248, .1);
}

.game-confirm-dialog::backdrop {
    background: rgba(2, 6, 16, .82);
    backdrop-filter: blur(4px);
}

.game-confirm-dialog-shell {
    padding: 22px;
    background:
        radial-gradient(circle at 95% 0, rgba(56, 189, 248, .13), transparent 38%),
        linear-gradient(145deg, rgba(18, 40, 64, .96), rgba(8, 20, 34, .98));
}

.game-confirm-dialog-kicker {
    display: block;
    margin-bottom: 5px;
    color: #67e8f9;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.game-confirm-dialog h2 {
    margin: 0 0 18px;
    color: #f8fbff;
    font-size: 1.25rem;
}

.game-confirm-dialog-preview {
    display: grid;
    min-height: 72px;
    margin-bottom: 12px;
    padding: 15px;
    place-items: center;
    border: 1px solid rgba(99, 207, 255, .35);
    border-radius: 11px;
    background: rgba(3, 12, 23, .72);
    font-size: 1.05rem;
}

.game-confirm-dialog-summary {
    display: grid;
    gap: 8px;
}

.game-confirm-dialog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid rgba(71, 101, 132, .62);
    border-radius: 9px;
    background: rgba(4, 15, 27, .62);
}

.game-confirm-dialog-row span {
    color: #9fb6cc;
    font-size: .78rem;
}

.game-confirm-dialog-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #f2f7fd;
    text-align: right;
}

.game-confirm-dialog-row.is-positive {
    border-color: rgba(52, 211, 153, .45);
}

.game-confirm-dialog-row.is-positive strong {
    color: #86efc1;
}

.game-confirm-dialog-row.is-loss,
.game-confirm-dialog-row.is-cost {
    border-color: rgba(251, 191, 36, .38);
}

.game-confirm-dialog-row.is-loss strong,
.game-confirm-dialog-row.is-cost strong {
    color: #fcd66f;
}

.game-confirm-dialog-note {
    margin: 13px 0 0;
    color: #9fb6cc;
    font-size: .78rem;
    line-height: 1.55;
}

.game-confirm-dialog-actions {
    display: grid;
    grid-template-columns: minmax(110px, .75fr) minmax(150px, 1.25fr);
    gap: 10px;
    margin-top: 18px;
}

.game-confirm-dialog-actions button {
    width: 100%;
    min-height: 42px;
}

@media (max-width: 480px) {
    .game-confirm-dialog-shell {
        padding: 18px;
    }

    .game-confirm-dialog-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .game-confirm-dialog-row strong {
        text-align: left;
    }

    .game-confirm-dialog-actions {
        grid-template-columns: 1fr;
    }
}


/* Rev. 0.5.20: guild notice, shared storage and auction price editing */
.guild-notice-card,
.guild-notice-editor {
    margin-bottom: 16px;
}

.guild-notice-text {
    color: #d7e3f4;
    line-height: 1.65;
    overflow-wrap: anywhere;
    white-space: normal;
}

.guild-notice-editor .guild-form textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    color: #e5e7eb;
    caret-color: #e5e7eb;
}

.guild-notice-editor .guild-form textarea::placeholder {
    color: #91a5bf;
}

.guild-storage-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.guild-storage-actions--single {
    grid-template-columns: minmax(0, 1fr);
}

.guild-storage-form {
    align-content: start;
}

.guild-storage-deposit-form {
    grid-template-columns: minmax(280px, 520px) 150px auto;
    align-items: end;
    justify-content: start;
    gap: 12px;
}

.guild-storage-deposit-form input {
    max-width: none;
}

.guild-storage-deposit-form button {
    min-height: 39px;
    white-space: nowrap;
}

.guild-storage-item-deposit-form {
    grid-template-columns: minmax(320px, 620px) auto;
}

.guild-storage-form-note {
    margin: 9px 0 0;
    color: #8298b5;
    font-size: 0.8rem;
}

.guild-storage-item-donate-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.guild-storage-item-donate-guide > div {
    display: grid;
    gap: 4px;
}

.guild-storage-item-donate-guide span {
    color: #9fb4d0;
}

.guild-storage-item-donate-guide .button-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.guild-storage-page-shell {
    width: 100%;
}

.guild-storage-page-shell .market-table.guild-storage-product-table {
    width: 100%;
    min-width: 860px;
}

.guild-storage-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 16px;
}

.guild-storage-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #34445d;
    border-radius: 9px;
    color: #b9cbe1;
    background: #111d2d;
    text-decoration: none;
}

.guild-storage-tabs a:hover,
.guild-storage-tabs a.active {
    color: #ffffff;
    border-color: #2f7df6;
    background: rgba(47, 125, 246, 0.16);
}

.guild-storage-tabs span {
    padding: 2px 6px;
    border-radius: 999px;
    color: #9dc8f5;
    background: #0b1626;
    font-size: 0.72rem;
    font-weight: 700;
}

.guild-storage-product-list {
    margin-top: 4px;
}

body.guild-page [data-guild-storage-products] .guild-storage-product-list.market-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
}

.guild-storage-filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 1.25fr) minmax(150px, 0.75fr) minmax(240px, 1.3fr) repeat(2, minmax(90px, 0.45fr)) auto;
    align-items: end;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 12px;
    border: 1px solid #2d4058;
    border-radius: 9px;
    background: #0c1726;
}

.guild-storage-product-filter-bar {
    grid-template-columns: minmax(260px, 1.4fr) minmax(260px, 1.2fr) repeat(2, minmax(95px, 0.45fr)) auto;
}

.inventory-filter-bar.guild-storage-inventory-filter-bar {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) repeat(2, 118px) auto auto;
    margin: 4px 0 12px;
}

.guild-storage-inventory-filter-bar [hidden] {
    display: none !important;
}

@media (max-width: 1100px) {
    .inventory-filter-bar.guild-storage-inventory-filter-bar {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }
}

@media (max-width: 720px) {
    .inventory-filter-bar.guild-storage-inventory-filter-bar {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

@media (max-width: 520px) {
    .inventory-filter-bar.guild-storage-inventory-filter-bar {
        grid-template-columns: 1fr;
    }

    .guild-storage-inventory-filter-bar .inventory-range-filter {
        width: 100%;
    }

    .guild-storage-inventory-filter-bar .inventory-range-filter > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.guild-storage-filter-bar label {
    display: grid;
    gap: 5px;
    color: #9fb4d0;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.guild-storage-filter-bar input,
.guild-storage-filter-bar select {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 39px;
    padding: 9px 10px;
}

.guild-storage-filter-bar > button {
    white-space: nowrap;
}

.guild-storage-filter-empty {
    margin: 14px 0 4px;
}

.guild-storage-product-table {
    min-width: 860px;
    table-layout: fixed;
}

.guild-storage-product-table .guild-storage-col-type {
    width: 9%;
}

.guild-storage-product-table .guild-storage-col-product {
    width: 30%;
}

.guild-storage-product-table .guild-storage-col-effect {
    width: 38%;
}

.guild-storage-product-table .guild-storage-col-stored {
    width: 10%;
}

.guild-storage-product-table .guild-storage-col-withdraw {
    width: 22%;
}

.guild-storage-item-table {
    min-width: 1050px;
}

.guild-storage-item-table th:last-child,
.guild-storage-item-table td:last-child {
    text-align: right;
}

.guild-storage-item-table .item-name-wrap {
    max-width: 330px;
}

.guild-storage-item-tooltip {
    width: min(330px, calc(100vw - 36px));
}

.guild-storage-item-tooltip .tooltip-stats {
    display: grid;
    gap: 4px;
    margin-top: 10px;
}

.guild-storage-item-tooltip .tooltip-stats > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.guild-storage-confirm-modal .chat-wire-confirm-panel {
    width: min(520px, 100%);
}

.guild-storage-confirm-modal .chat-wire-confirm-summary {
    grid-template-columns: minmax(115px, 0.55fr) minmax(0, 1.45fr);
}

.guild-storage-confirm-modal .guild-storage-confirm-icon {
    border-color: rgba(167, 139, 250, 0.55);
    color: #c4b5fd;
    background: rgba(124, 58, 237, 0.18);
}

.guild-storage-confirm-modal [data-storage-confirm-name] {
    overflow-wrap: anywhere;
}

.guild-storage-product-table th:last-child {
    text-align: right;
}

.guild-storage-product-row {
    background: #101d2e;
}

.guild-storage-product-row:hover {
    background: #16263a;
}

.guild-storage-product-row.gem td:first-child {
    border-left: 3px solid #67e8f9;
}

.guild-storage-product-row.enchantment td:first-child {
    border-left: 3px solid #a78bfa;
}

.guild-storage-type-badge {
    display: inline-flex;
    padding: 3px 7px;
    border: 1px solid #3b5877;
    border-radius: 999px;
    color: #9dc8f5;
    background: #13243a;
    font-size: 0.7rem;
    font-weight: 700;
}

.guild-storage-product-effect,
.guild-storage-locked {
    color: #8ea4c2;
    font-size: 0.8rem;
}

.guild-storage-product-balance strong {
    color: #f8dd76;
    font-size: 1.1rem;
}

.guild-storage-withdraw-form {
    display: grid;
    grid-template-columns: 120px auto;
    justify-content: end;
    gap: 6px;
    margin: 0;
}

.guild-storage-withdraw-form input,
.market-price-edit-form input {
    width: 100%;
    min-width: 0;
}

.guild-storage-product-action {
    text-align: right;
}

.market-own-order-actions {
    min-width: min(100%, 250px);
}

.market-price-edit-form {
    display: grid;
    grid-template-columns: minmax(88px, 1fr) auto;
    gap: 6px;
    width: 100%;
}

.market-price-edit-form input {
    padding: 7px 9px;
}

@media (max-width: 760px) {
    .guild-storage-actions {
        grid-template-columns: 1fr;
    }

    .guild-storage-deposit-form {
        grid-template-columns: 1fr;
    }

    .guild-storage-tabs a {
        flex: 1 1 30%;
        justify-content: center;
        padding: 9px 8px;
    }

    .guild-storage-confirm-modal .chat-wire-confirm-summary {
        grid-template-columns: 1fr;
    }

    .guild-storage-deposit-form button {
        width: 100%;
    }

    .guild-storage-item-donate-guide {
        align-items: stretch;
        flex-direction: column;
    }

    .guild-storage-item-donate-guide .button-link {
        text-align: center;
    }

    .market-price-edit-form {
        grid-template-columns: 1fr;
    }

    .market-own-order-actions {
        min-width: 0;
        justify-items: stretch !important;
    }

    .market-own-order-actions form,
    .market-own-order-actions button {
        width: 100%;
    }
}

/* Housing */
.housing-hero,
.housing-section-heading,
.housing-building-head,
.housing-next-row,
.housing-cost-row,
.housing-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.housing-job {
    flex-wrap: wrap;
}

.housing-job > div:first-child {
    flex: 1 1 180px;
    min-width: 0;
}

.housing-hero h1,
.housing-section-heading h2,
.housing-building-head h2 {
    margin: 4px 0;
}

.housing-wallet,
.housing-top-grid,
.housing-building-grid {
    display: grid;
    gap: 14px;
}

.housing-wallet {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.housing-wallet > div {
    min-width: 170px;
    padding: 12px 16px;
    border: 1px solid #29415f;
    border-radius: 10px;
    background: #0b1728;
}

.housing-wallet span,
.housing-next-row span,
.housing-job span {
    display: block;
    color: #8296b2;
    font-size: .72rem;
    text-transform: uppercase;
}

.housing-wallet strong {
    color: #67e8f9;
    font-size: 1.2rem;
}

.housing-top-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
    margin-top: 14px;
}

.housing-rate {
    padding: 6px 9px;
    border: 1px solid #315176;
    border-radius: 999px;
    color: #8bdff1;
    font-size: .76rem;
    white-space: nowrap;
}

.housing-warning {
    padding: 10px 12px;
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 8px;
    background: rgba(245, 158, 11, .08);
    color: #d6deeb;
}

.housing-deposit-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.housing-deposit-form label span {
    display: block;
    margin-bottom: 5px;
    color: #8fa3bd;
    font-size: .74rem;
    text-transform: uppercase;
}

.housing-deposit-form select,
.housing-deposit-form input {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
}

.housing-job-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.housing-job {
    padding: 10px 12px;
    border: 1px solid #2b5275;
    border-radius: 9px;
    background: rgba(14, 116, 144, .09);
}

.housing-job.queued {
    border-color: #384a62;
    background: rgba(71, 85, 105, .08);
}

.housing-job-cancel {
    flex: 0 0 auto;
    margin: 0;
}

.housing-job-cancel button {
    min-height: 34px;
    padding: 6px 11px;
}

.housing-countdown {
    color: #67e8f9;
    white-space: nowrap;
}

.housing-empty-state {
    margin-top: 12px;
    padding: 18px;
    border: 1px dashed #35506d;
    border-radius: 9px;
    color: #91a4bc;
    text-align: center;
}

.housing-queue-note {
    margin-bottom: 0;
}

.housing-building-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    margin-top: 14px;
}

.housing-building-card {
    display: flex;
    flex-direction: column;
}

.housing-building-head > div > span {
    color: #71cde3;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.housing-building-head > strong {
    color: #c084fc;
    font-size: 1.15rem;
}

.housing-building-card > p {
    min-height: 42px;
    color: #9aabc0;
}

.housing-level-track {
    height: 7px;
    overflow: hidden;
    margin: 5px 0 14px;
    border-radius: 999px;
    background: #07111f;
}

.housing-level-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0891b2, #22c55e);
}

.housing-next-row {
    align-items: flex-start;
    margin-top: auto;
}

.housing-next-row > div:last-child {
    text-align: right;
}

.housing-cost-row {
    margin: 12px 0;
    padding: 9px 10px;
    border-radius: 8px;
    background: #0a1525;
    color: #98abc2;
}

.housing-cost-row strong {
    color: #f8d849;
}

.housing-building-card form button {
    width: 100%;
}

.housing-maxed {
    margin-top: auto;
    padding: 12px;
    border: 1px solid rgba(34, 197, 94, .35);
    border-radius: 8px;
    color: #4ade80;
    text-align: center;
}

.housing-deposit-confirm-modal .chat-wire-confirm-panel {
    border-color: rgba(34, 211, 238, .55);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, .14), transparent 44%),
        #0f172a;
}

.housing-deposit-confirm-modal .chat-wire-confirm-warning strong {
    color: #fbbf24;
}

.housing-cancel-confirm-modal .chat-wire-confirm-panel {
    border-color: rgba(248, 113, 113, .58);
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, .15), transparent 44%),
        #0f172a;
}

.housing-cancel-confirm-modal .chat-wire-confirm-icon {
    border-color: rgba(248, 113, 113, .5);
    background: rgba(239, 68, 68, .15);
    color: #fca5a5;
}

@media (max-width: 1180px) {
    .housing-building-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

@media (max-width: 760px) {
    .housing-hero,
    .housing-section-heading { align-items: stretch; flex-direction: column; }
    .housing-wallet,
    .housing-top-grid,
    .housing-building-grid,
    .housing-deposit-form { grid-template-columns: 1fr; }
    .housing-wallet > div { min-width: 0; }
}

/* Rev. 0.5.26: Crafting Work Orders */
.crafting-mode-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding-bottom: 4px;
    overflow-x: auto;
}

.crafting-mode-tabs a {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: 1px solid #34445d;
    border-radius: 9px;
    background: #0d1827;
    color: #b9cbe1;
    font-weight: 700;
    text-decoration: none;
}

.crafting-mode-tabs a.active {
    border-color: #38bdf8;
    background: linear-gradient(135deg, rgba(37, 99, 235, .42), rgba(124, 58, 237, .34));
    color: #fff;
}

.crafting-private-request-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f59e0b;
    color: #111827;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.crafting-private-request-badge[hidden] {
    display: none;
}

.work-order-active-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.work-order-active-summary span {
    padding: 7px 10px;
    border: 1px solid #34445d;
    border-radius: 8px;
    background: #0d1827;
    color: #9fb4d0;
}

.work-order-active-summary strong {
    color: #f8fbff;
}

.work-order-builder {
    margin-bottom: 16px;
    border-color: rgba(56, 189, 248, .5);
}

.work-order-builder .crafting-section-heading p {
    max-width: 780px;
    margin: 6px 0 0;
    color: #9fb4d0;
}

.work-order-form {
    grid-template-columns: 2fr minmax(140px, .7fr) minmax(120px, .55fr) minmax(150px, .8fr);
}

.work-order-form label small {
    color: #8394aa;
}

.work-order-preview {
    grid-template-columns: repeat(5, minmax(145px, 1fr));
}

.work-order-board-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
    gap: 14px;
    align-items: start;
}

.work-order-board,
.work-order-reputation-board,
.work-order-mine {
    min-width: 0;
}

.work-order-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(110px, .7fr)) auto auto;
    gap: 8px;
    align-items: end;
    margin: 14px 0;
    padding: 10px;
    border: 1px solid #2d3c53;
    border-radius: 9px;
    background: #0d1827;
}

.work-order-filter-form label {
    display: grid;
    gap: 5px;
    color: #8fb9ec;
    font-size: .78rem;
    text-transform: uppercase;
}

.work-order-filter-form input,
.work-order-filter-form select {
    width: 100%;
}

.work-order-filter-form .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    text-decoration: none;
}

.work-order-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.work-order-table {
    width: 100%;
    border-collapse: collapse;
}

.work-order-table th,
.work-order-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #28374d;
    text-align: left;
    vertical-align: middle;
}

.work-order-table th {
    color: #8fb9ec;
    font-size: .76rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.work-order-table td strong,
.work-order-table td small {
    display: block;
}

.work-order-table td small {
    margin-top: 3px;
    color: #8394aa;
}

.work-order-table td form {
    margin: 0;
}

.work-order-table td:last-child {
    text-align: right;
}

.work-order-availability,
.work-order-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid #3b4c64;
    border-radius: 999px;
    background: #111d2d;
    color: #9fb4d0;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.work-order-availability.own,
.work-order-status.open {
    border-color: rgba(56, 189, 248, .5);
    color: #7dd3fc;
}

.work-order-availability.locked,
.work-order-status.cancelled,
.work-order-status.expired {
    border-color: rgba(248, 113, 113, .45);
    color: #fca5a5;
}

.work-order-status.accepted {
    border-color: rgba(250, 204, 21, .45);
    color: #fde047;
}

.work-order-status.completed {
    border-color: rgba(74, 222, 128, .45);
    color: #86efac;
}

.work-order-reputation-board ol {
    display: grid;
    gap: 4px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: work-order-rank;
}

.work-order-reputation-board li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #28374d;
    counter-increment: work-order-rank;
}

.work-order-reputation-board li::before {
    content: counter(work-order-rank) ".";
    color: #8fb9ec;
    font-weight: 800;
}

.work-order-reputation-board li a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-order-reputation-board li strong {
    color: #c69cff;
}

.work-order-reputation-board li small {
    grid-column: 2 / -1;
    color: #8394aa;
}

.work-order-reputation-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(135px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.work-order-reputation-summary article {
    display: grid;
    gap: 5px;
    margin: 0 !important;
}

.work-order-reputation-summary span {
    color: #8fb9ec;
    font-size: .78rem;
    text-transform: uppercase;
}

.work-order-reputation-summary strong {
    color: #c69cff;
    font-size: 1.25rem;
}

.work-order-reputation-summary small {
    color: #8394aa;
    font-size: .75rem;
}

.work-order-confirm-modal .chat-wire-confirm-panel {
    max-width: 610px;
}

.work-order-confirm-icon {
    color: #7dd3fc;
}

.work-order-confirm-summary {
    grid-template-columns: 1fr;
}

/* Rev. 0.5.43: opt-in crafter services and personal commissions. */
.crafting-service-own,
.crafting-service-board,
.crafting-service-request {
    margin-bottom: 14px;
}

.crafting-service-own .crafting-section-heading p,
.crafting-service-board .crafting-section-heading p {
    max-width: 820px;
    color: #9fb4d0;
}

.crafting-service-list-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 9px;
}

.crafting-service-list-form label {
    display: grid;
    gap: 5px;
    min-width: min(100%, 260px);
}

.crafting-service-table-wrap {
    margin-top: 10px;
}

.crafting-service-table {
    min-width: 780px;
}

.crafting-service-table td:last-child,
.crafting-service-table th:last-child {
    text-align: right;
}

.crafting-service-table .button-secondary {
    display: inline-block;
    text-decoration: none;
}

.crafting-request-back {
    display: inline-block;
    margin-bottom: 10px;
}

.crafting-service-request-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.crafting-service-request-summary > span {
    display: grid;
    gap: 3px;
    padding: 9px 12px;
    border: 1px solid #34445d;
    border-radius: 8px;
    background: #101c2c;
    color: #9fb4d0;
}

.crafting-service-request-summary strong {
    color: #e7f0fc;
}

.crafting-service-request-form {
    grid-template-columns: minmax(180px, 2fr) minmax(130px, .7fr) minmax(110px, .5fr);
}

.crafting-service-preview {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.crafting-service-response {
    display: grid;
    gap: 7px;
}

.crafting-service-response form {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: end;
}

.crafting-service-response input {
    min-width: 130px;
    max-width: 220px;
}

.work-order-status.pending {
    border-color: rgba(56, 189, 248, .5);
    color: #7dd3fc;
}

.work-order-status.declined {
    border-color: rgba(248, 113, 113, .45);
    color: #fca5a5;
}

@media (max-width: 1120px) {
    .work-order-form,
    .work-order-preview,
    .crafting-service-request-form,
    .crafting-service-preview {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .work-order-filter-form {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .work-order-filter-form label:first-of-type {
        grid-column: span 2;
    }
}

@media (max-width: 850px) {
    .work-order-board-layout {
        grid-template-columns: 1fr;
    }

    .work-order-reputation-board {
        order: -1;
    }

    .work-order-reputation-summary {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

@media (max-width: 700px) {
    .crafting-service-request-form,
    .crafting-service-preview {
        grid-template-columns: 1fr;
    }
    .work-order-table-wrap {
        overflow: visible;
    }

    .work-order-table,
    .work-order-table tbody,
    .work-order-table tr,
    .work-order-table td {
        display: block;
        width: 100%;
    }

    .work-order-table thead {
        display: none;
    }

    .work-order-table tr {
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid #2d3c53;
        border-radius: 9px;
        background: #0d1827;
    }

    .work-order-table td {
        display: grid;
        grid-template-columns: minmax(95px, .7fr) minmax(0, 1.3fr);
        gap: 10px;
        padding: 7px 4px;
        text-align: left !important;
    }

    .work-order-table td::before {
        content: attr(data-label);
        color: #8fb9ec;
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .work-order-table td form,
    .work-order-table td form button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .work-order-form,
    .work-order-preview,
    .work-order-filter-form,
    .work-order-reputation-summary {
        grid-template-columns: 1fr;
    }

    .work-order-filter-form label:first-of-type {
        grid-column: auto;
    }

    .work-order-filter-form .button-secondary,
    .work-order-filter-form button {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .guild-storage-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .guild-storage-deposit-form {
        grid-template-columns: minmax(240px, 1fr) 140px auto;
        justify-content: stretch;
    }
}

@media (max-width: 650px) {
    .guild-storage-filter-bar {
        grid-template-columns: 1fr;
    }

    .guild-storage-filter-bar > button {
        width: 100%;
    }

    body.guild-page [data-guild-storage-products] .guild-storage-product-list.market-table-wrap {
        overflow: visible;
    }

    .guild-storage-page-shell .market-table.guild-storage-product-table {
        display: block;
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    .guild-storage-product-table colgroup,
    .guild-storage-product-table thead {
        display: none;
    }

    .guild-storage-product-table tbody {
        display: grid;
        gap: 10px;
    }

    .guild-storage-product-table .guild-storage-product-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        overflow: hidden;
        border: 1px solid #2d4058;
        border-radius: 9px;
        background: #101d2e;
    }

    .guild-storage-product-table .guild-storage-product-row.gem {
        border-left: 3px solid #67e8f9;
    }

    .guild-storage-product-table .guild-storage-product-row.enchantment {
        border-left: 3px solid #a78bfa;
    }

    .guild-storage-product-table .guild-storage-product-row td {
        display: block;
        min-width: 0;
        padding: 10px 11px;
        border: 0;
        white-space: normal;
    }

    .guild-storage-product-table .guild-storage-product-row td:first-child {
        border-left: 0;
    }

    .guild-storage-product-name {
        grid-column: 1;
        overflow-wrap: anywhere;
    }

    .guild-storage-product-effect-cell {
        grid-column: 1 / -1;
        padding-top: 0 !important;
    }

    .guild-storage-product-balance {
        grid-column: 2;
        grid-row: 1;
        min-width: 64px;
        text-align: right;
    }

    .guild-storage-product-balance::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: #8ea4c2;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .guild-storage-product-action {
        grid-column: 1 / -1;
        padding-top: 9px !important;
        border-top: 1px solid #253245 !important;
    }

    .guild-storage-withdraw-form {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .guild-storage-product-action .guild-storage-locked {
        display: block;
        text-align: left;
    }
}


.game-guide-button {
    margin-top: 0.7rem;
}

.game-guide-panel {
    width: min(940px, calc(100vw - 2rem));
}

.game-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.game-guide-grid .game-guide-card {
    position: relative;
    min-height: 155px;
    padding-left: 3.4rem;
}

.game-guide-grid .game-guide-card p {
    margin-bottom: 0;
}

.game-guide-step {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 1px solid #7c3aed;
    border-radius: 50%;
    color: #ddd6fe;
    background: rgba(124, 58, 237, 0.24);
    font-weight: 800;
}

.game-guide-note {
    margin-top: 0.85rem;
}

@media (max-width: 760px) {
    .game-guide-grid {
        grid-template-columns: 1fr;
    }

    .game-guide-card {
        min-height: 0;
    }
}

/* Auction House 0.4.15 */
.auction-house-heading {
    align-items: flex-end;
    margin-bottom: 12px;
    padding: 4px 2px;
}

.auction-house-heading h1 {
    margin: 2px 0 4px;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.auction-house-heading p {
    margin: 0;
    color: #92a8c8;
}

.auction-house-kicker {
    color: #63d9ef;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auction-house-heading .market-balance {
    display: grid;
    min-width: 180px;
    gap: 3px;
    text-align: right;
}

.auction-house-heading .market-balance span {
    color: #91a8ca;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auction-house-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #33445f;
    border-radius: 10px;
    background: #101a2b;
}

.auction-house-tabs a {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #9fb2ce;
    font-weight: 800;
    text-decoration: none;
}

.auction-house-tabs a:hover,
.auction-house-tabs a.active {
    border-color: #2b78d4;
    background: linear-gradient(180deg, #203d69, #152b4d);
    color: #fff;
}

.auction-house-shell {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: 680px;
    overflow: hidden;
    border: 1px solid #35455d;
    border-radius: 12px;
    background: #111b2c;
}

.auction-house-categories {
    padding: 14px 10px;
    border-right: 1px solid #34445c;
    background: linear-gradient(180deg, #172338, #101a2a);
}

.auction-house-side-title {
    padding: 0 9px 10px;
    color: #6c84a8;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auction-house-categories > a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #a9bad4;
    text-decoration: none;
}

.auction-house-categories > a > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #405673;
    border-radius: 6px;
    background: #0d1727;
    color: #65d9ee;
    font-size: 0.72rem;
}

.auction-house-categories > a:hover,
.auction-house-categories > a.active {
    border-color: #376ea7;
    background: #1b3457;
    color: #fff;
}

.auction-house-tax-note {
    display: grid;
    gap: 3px;
    margin: 24px 5px 0;
    padding: 12px;
    border: 1px solid #354861;
    border-radius: 8px;
    background: #0d1726;
}

.auction-house-tax-note span,
.auction-house-tax-note small {
    color: #7f95b5;
}

.auction-house-tax-note strong {
    color: #e7b85c;
    font-size: 1.15rem;
}

.auction-house-main {
    min-width: 0;
    padding: 12px;
}

.auction-house-search {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #31435d;
    border-radius: 9px;
    background: #172336;
}

.auction-house-search label {
    display: grid;
    min-width: 110px;
    gap: 5px;
    color: #8fa7c8;
    font-size: 0.72rem;
    font-weight: 700;
}

.auction-house-search .auction-search-field {
    min-width: 220px;
    flex: 1;
}

.auction-house-search input,
.auction-house-search select {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #3b506c;
    border-radius: 6px;
    background: #0d1727;
    color: #ecf4ff;
}

.auction-house-search button,
.auction-house-search > a {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
}

.auction-equipment-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    align-items: end;
}

.auction-equipment-filters label {
    min-width: 0;
}

.auction-product-row.equipment.item-name-wrap {
    position: relative;
}

.auction-owned-products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    padding: 11px 12px;
    border: 1px solid #3c5878;
    border-radius: 9px;
    background: linear-gradient(90deg, #172b46, #121f32);
}

.auction-owned-products-toolbar > div {
    display: grid;
    gap: 3px;
}

.auction-owned-products-toolbar span {
    color: #63d9ef;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auction-owned-products-toolbar strong {
    color: #edf5ff;
}

.auction-owned-products-toolbar small {
    color: #8299b9;
}

.auction-owned-products-toolbar button {
    flex: 0 0 auto;
}

.auction-house-workspace {
    display: grid;
    grid-template-columns: minmax(330px, 0.85fr) minmax(440px, 1.4fr);
    min-height: 560px;
    overflow: hidden;
    border: 1px solid #34465f;
    border-radius: 10px;
    background: #0d1727;
}

.auction-equipment-list {
    border: 1px solid #34465f;
    border-radius: 10px;
    background: #0d1727;
}

.auction-equipment-list .inventory-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

.market-equipment-table {
    min-width: 1120px;
}

.market-equipment-table th,
.market-equipment-table td {
    white-space: nowrap;
}

.market-equipment-table .market-equipment-name {
    min-width: 230px;
    white-space: normal;
}

.market-equipment-name .item-name-wrap {
    max-width: 100%;
    cursor: help;
}

.market-equipment-name .item-name-wrap:focus-visible {
    border-radius: 4px;
    outline: 2px solid #47c6ed;
    outline-offset: 3px;
}

.market-equipment-price strong,
.market-equipment-price small {
    display: block;
}

.market-equipment-price small {
    margin-top: 3px;
    color: #7890b2;
    font-size: 0.72rem;
}

.auction-product-column {
    min-width: 0;
    border-right: 1px solid #34465f;
    background: #121e30;
}

.auction-column-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 10px 13px;
    border-bottom: 1px solid #34465f;
    color: #dbe9fb;
    font-weight: 900;
}

.auction-column-heading small {
    color: #7890b2;
    font-weight: 600;
}

.auction-product-list {
    max-height: 660px;
    overflow: auto;
}

.auction-product-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 9px 11px;
    border-bottom: 1px solid #27374d;
    color: #d9e7f9;
    text-decoration: none;
}

.auction-product-row:hover,
.auction-product-row.active {
    background: linear-gradient(90deg, #183c66, #162a45);
}

.auction-product-row.active {
    box-shadow: inset 3px 0 #47c6ed;
}

.auction-product-icon,
.auction-detail-icon {
    display: grid;
    place-items: center;
    border: 1px solid #4b6687;
    border-radius: 7px;
    background: radial-gradient(circle at 40% 30%, #274b73, #111e31);
    color: #75e0f1;
    font-weight: 900;
}

.auction-product-icon {
    width: 36px;
    height: 36px;
}

.auction-product-name,
.auction-product-market {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.auction-product-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auction-product-name small,
.auction-product-market small {
    color: #748dad;
}

.auction-product-market {
    text-align: right;
}

.auction-product-market strong {
    color: #e9bd65;
}

.auction-detail-column {
    min-width: 0;
    padding: 15px;
    background: radial-gradient(circle at top right, rgba(42, 77, 122, 0.26), transparent 42%), #0e1929;
}

.auction-empty-detail {
    display: grid;
    min-height: 400px;
    place-content: center;
    gap: 8px;
    color: #7187a8;
    text-align: center;
}

.auction-empty-detail strong {
    color: #d5e5fa;
    font-size: 1.15rem;
}

.auction-detail-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 14px;
    border-bottom: 1px solid #32445d;
}

.auction-detail-icon {
    width: 54px;
    height: 54px;
    font-size: 1.2rem;
}

.auction-detail-header span,
.auction-detail-header small {
    color: #7892b4;
}

.auction-detail-header h2 {
    margin: 2px 0;
    color: #f4f8ff;
    font-size: 1.35rem;
}

.auction-market-snapshot,
.auction-equipment-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 12px 0;
}

.auction-market-snapshot > div,
.auction-equipment-meta > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid #31445e;
    border-radius: 7px;
    background: #121f32;
}

.auction-market-snapshot span,
.auction-equipment-meta span {
    color: #7991b2;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.auction-market-snapshot strong,
.auction-equipment-meta strong {
    color: #f0c46c;
}

.auction-custom-price-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 12px 0;
    padding: 11px 12px;
    border: 1px solid #3c5878;
    border-radius: 8px;
    background: linear-gradient(90deg, #172b46, #121f32);
}

.auction-direct-orders {
    margin: 12px 0;
    padding: 11px;
    border: 1px solid #3c5878;
    border-radius: 8px;
    background: linear-gradient(90deg, #172b46, #121f32);
}

.auction-direct-orders-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.auction-direct-orders-heading strong {
    color: #f4f8ff;
}

.auction-direct-orders-heading span {
    color: #839bbc;
    font-size: 0.76rem;
}

.auction-direct-orders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.auction-direct-order-form {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(90px, 0.75fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid #34475f;
    border-radius: 7px;
    background: #0d1929;
}

.auction-direct-order-form > div,
.auction-direct-order-form > button {
    grid-column: 1 / -1;
}

.auction-direct-order-form > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.auction-direct-order-form > div strong {
    color: #f1f6ff;
}

.auction-direct-order-form > div small {
    color: #8298b6;
}

.auction-direct-order-form label {
    display: grid;
    gap: 4px;
    color: #8fa6c5;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.auction-direct-order-form input {
    width: 100%;
    min-height: 35px;
    padding: 7px 8px;
    border: 1px solid #3b506c;
    border-radius: 6px;
    background: #0a1524;
    color: #fff;
}

.auction-direct-order-form button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.auction-custom-price-callout > div:first-child {
    display: grid;
    gap: 3px;
}

.auction-custom-price-callout strong {
    color: #f4f8ff;
}

.auction-custom-price-callout span {
    color: #839bbc;
    font-size: 0.76rem;
}

.auction-custom-price-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.auction-custom-price-actions a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
}

.market-owned-products-modal {
    width: min(1040px, calc(100vw - 40px));
}

.market-owned-products-popover {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.inventory-modal.market-owned-products-popover[popover] {
    display: none;
}

.inventory-modal.market-owned-products-popover:popover-open {
    display: flex;
}

.market-owned-products-popover::backdrop {
    background: rgba(2, 6, 23, 0.78);
}

.market-owned-product-select {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #b88938;
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
}

.auction-order-mode-tabs {
    display: flex;
    gap: 7px;
    margin-top: 12px;
    padding: 5px;
    border: 1px solid #34475f;
    border-radius: 8px;
    background: #0b1625;
}

.auction-order-mode-tabs a {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #91a7c5;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.auction-order-mode-tabs a:hover,
.auction-order-mode-tabs a.active {
    border-color: #3978b9;
    background: #19385f;
    color: #fff;
}

.auction-create-orders.single {
    grid-template-columns: minmax(0, 720px);
}

.auction-selected-order-product {
    display: grid;
    gap: 4px;
    margin: 11px 0 4px;
    padding: 12px;
    border: 1px solid #3b516d;
    border-radius: 8px;
    background: #0c1726;
}

.auction-selected-order-product span {
    color: #65d9ee;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auction-selected-order-product strong {
    color: #f5f8ff;
    font-size: 1.12rem;
}

.auction-selected-order-product em {
    color: #c69cff;
    font-style: normal;
    font-weight: 800;
}

.auction-selected-order-product small {
    color: #869dba;
}

.auction-selected-order-product.sell {
    border-left: 3px solid #d6a64f;
}

.auction-selected-order-product.buy {
    border-left: 3px solid #78ad59;
}

.auction-instant-grid,
.auction-depth-grid,
.auction-create-orders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.auction-trade-card,
.auction-depth-panel,
.auction-order-form-card {
    padding: 12px;
    border: 1px solid #34475f;
    border-radius: 8px;
    background: #121f32;
}

.auction-trade-card > div:first-child {
    display: grid;
    gap: 2px;
    margin-bottom: 10px;
}

.auction-trade-card > div:first-child span {
    color: #eef6ff;
    font-size: 1.05rem;
    font-weight: 900;
}

.auction-trade-card > div:first-child small,
.auction-order-form-card small {
    color: #7890b1;
}

.auction-trade-card form {
    display: grid;
    gap: 9px;
}

.auction-trade-card label {
    display: grid;
    gap: 5px;
    color: #91a8c6;
    font-size: 0.75rem;
    font-weight: 700;
}

.auction-trade-card input {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #3d536f;
    border-radius: 6px;
    background: #0c1726;
    color: #fff;
}

.auction-trade-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #7992b3;
}

.auction-trade-total strong {
    color: #efc36b;
}

.auction-trade-limit {
    color: #7890ad;
    font-size: 0.74rem;
}

.auction-trade-limit.warning {
    color: #ff8b8b;
}

.auction-trade-card button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.7);
    opacity: 0.45;
}

.auction-depth-panel {
    padding: 0;
    overflow: hidden;
}

.auction-depth-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto;
    gap: 4px 12px;
    padding: 8px 11px;
    border-bottom: 1px solid #293950;
}

.auction-depth-row strong {
    color: #e8ba61;
}

.auction-depth-row small {
    grid-column: 1 / -1;
    color: #52cbe8;
    font-size: 0.68rem;
}

.auction-order-form-card .market-form-grid {
    margin-top: 10px;
}

.auction-equipment-sell-callout {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 180px;
    padding: 24px;
    border: 1px solid #364a64;
    border-radius: 10px;
    background: #152337;
}

.auction-equipment-sell-callout > div {
    flex: 1;
}

.auction-equipment-sell-callout h2,
.auction-equipment-sell-callout p {
    margin: 0 0 6px;
}

.auction-equipment-sell-callout p {
    color: #8da3c1;
}

.auction-house-workspace.equipment .auction-product-row {
    min-height: 72px;
}

.auction-equipment-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auction-equipment-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 12px 0;
}

.auction-equipment-stats span {
    padding: 9px 10px;
    border: 1px solid #32445c;
    border-radius: 6px;
    background: #111e30;
    color: #a8bad2;
}

.auction-equipment-stats strong {
    color: #74ddef;
}

.auction-equipment-buy {
    width: 100%;
    margin-top: 8px;
}

.auction-wide-panel {
    border-radius: 10px;
}

/* Auction House structure 0.4.58 */
.auction-house-tabs a > span {
    display: inline-grid;
    min-width: 22px;
    height: 20px;
    margin-left: 5px;
    padding: 0 6px;
    place-items: center;
    border-radius: 999px;
    background: #2b78d4;
    color: #fff;
    font-size: 0.68rem;
}

.market-asset-selector {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid #3a516e;
    border-radius: 9px;
    background: linear-gradient(90deg, #172b46, #121f32);
}

.market-asset-filter-group {
    display: grid;
    gap: 6px;
}

.market-asset-selector-label {
    color: #78ddef;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.market-asset-button-grid {
    display: grid;
    gap: 8px;
}

.market-asset-five-grid,
.market-quest-rarity-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.market-quest-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.market-asset-premium-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.market-asset-button {
    display: grid;
    min-width: 0;
    min-height: 48px;
    gap: 3px;
    align-content: center;
    padding: 7px 10px;
    border: 1px solid #48617f;
    border-radius: 7px;
    background: #0c1726;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.market-asset-button strong {
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.market-asset-button small {
    overflow: hidden;
    color: #8fa6c4;
    font-size: 0.66rem;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.market-asset-button:hover,
.market-asset-button:focus-visible {
    border-color: #55ccef;
    background: #132a43;
    transform: translateY(-1px);
}

.market-asset-button.active {
    border-color: #36c9f4;
    background: linear-gradient(135deg, #174367, #12304e);
    box-shadow: inset 0 0 0 1px rgba(54, 201, 244, 0.22), 0 0 14px rgba(54, 201, 244, 0.1);
}

.market-asset-button.active small {
    color: #b9eefe;
}

.market-asset-rarity-uncommon strong {
    color: #80e89c;
}

.market-asset-rarity-rare strong {
    color: #69b9ff;
}

.market-asset-rarity-epic strong {
    color: #c38bff;
}

.market-asset-rarity-legendary strong {
    color: #ffcb54;
}

.resource-market-header {
    position: relative;
    padding: 14px;
    border: 1px solid #354a66;
    border-radius: 10px;
    background: radial-gradient(circle at top right, rgba(42, 77, 122, 0.3), transparent 48%), #0e1929;
}

.resource-market-header > .auction-detail-header {
    padding-right: 46px;
}

.market-refresh-button {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid #3d536f;
    border-radius: 7px;
    color: #bcd4ef;
    background: #101a29;
    font-size: 1.15rem;
    line-height: 1;
}

.market-refresh-button:hover,
.market-refresh-button:focus-visible {
    border-color: #56c7ff;
    color: #fff;
    background: #172943;
}

.market-refresh-button:disabled {
    cursor: wait;
    opacity: 0.75;
}

.market-refresh-button[aria-busy="true"] span {
    animation: market-refresh-spin 0.7s linear infinite;
}

@keyframes market-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

.resource-market-header .auction-market-snapshot {
    margin-bottom: 0;
}

.resource-order-columns,
.market-own-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.resource-order-column,
.market-own-order-group {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #354a64;
    border-radius: 10px;
    background: #101c2e;
}

.resource-order-column.sell {
    border-top-color: #d4a34c;
}

.resource-order-column.buy {
    border-top-color: #69b879;
}

.resource-order-form-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid #32445d;
    background: #15243a;
}

.resource-order-form-heading > div {
    display: grid;
    gap: 2px;
}

.resource-order-form-heading span {
    color: #74dded;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resource-order-form-heading h2 {
    margin: 0;
    font-size: 1.1rem;
}

.resource-order-form-heading > strong {
    color: #8ea6c7;
    font-size: 0.78rem;
}

.resource-create-form {
    padding: 14px;
}

.resource-create-form button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.resource-orderbook {
    margin: 0 12px 12px;
    overflow: hidden;
    border: 1px solid #31435b;
    border-radius: 8px;
    background: #0b1625;
}

.market-pagination.resource-orderbook-pagination {
    margin: 0;
    padding: 8px 10px;
    border-top: 1px solid #29394f;
}

.resource-orderbook-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.8fr) minmax(140px, auto);
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 9px 11px;
    border-bottom: 1px solid #29394f;
}

.resource-orderbook-row:last-child {
    border-bottom: 0;
}

.resource-orderbook-row > div {
    display: grid;
    gap: 3px;
}

.resource-orderbook-row strong {
    color: #edc16c;
}

.resource-orderbook-row small,
.resource-orderbook-row span {
    color: #8299ba;
    font-size: 0.73rem;
}

.resource-orderbook-action {
    display: grid;
    grid-template-columns: minmax(58px, 1fr) auto auto;
    gap: 6px;
}

.resource-orderbook-action input {
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #3b506c;
    border-radius: 6px;
    background: #091321;
    color: #fff;
}

.resource-orderbook-own-actions {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) auto;
    align-items: center;
    gap: 5px;
    min-width: 230px;
}

.resource-orderbook-own-actions > .market-own {
    grid-column: 1 / -1;
}

.resource-orderbook-own-actions .market-price-edit-form {
    grid-template-columns: minmax(82px, 1fr) auto;
}

.resource-orderbook-own-actions > form:last-child,
.resource-orderbook-own-actions > form:last-child button {
    width: 100%;
}

.market-live-price {
    grid-column: 1 / -1;
    display: block;
    min-height: 16px;
    color: #edc16c;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
}

.resource-create-form .market-live-price {
    padding: 7px 9px;
    border: 1px solid rgba(237, 193, 108, 0.28);
    border-radius: 6px;
    background: rgba(237, 193, 108, 0.07);
}

.market-order-unavailable {
    justify-self: end;
    color: #6f829e !important;
}

.crafted-market-sell-panel {
    display: grid;
    grid-template-columns: minmax(230px, 0.7fr) minmax(420px, 1.3fr);
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #b88938;
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(142, 94, 25, 0.16), #121f32);
}

.crafted-market-sell-panel .auction-selected-order-product {
    margin: 0;
}

.crafted-market-sell-form {
    align-content: center;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(220px, 0.8fr) auto;
}

.crafted-market-sell-form .button-link {
    align-self: end;
}

.crafted-buy-order-panel {
    margin-bottom: 10px;
    border: 1px solid #3b516d;
    border-radius: 9px;
    background: #121f32;
}

.crafted-buy-order-panel summary {
    cursor: pointer;
    padding: 12px 14px;
    color: #b7c9df;
    font-weight: 800;
}

.crafted-buy-order-panel[open] summary {
    border-bottom: 1px solid #34465f;
    color: #fff;
}

.crafted-buy-order-panel form {
    padding: 12px;
}

.auction-house-workspace.crafted .auction-product-row {
    min-height: 76px;
}

.crafted-market-effect {
    display: grid;
    gap: 4px;
    margin: 12px 0;
    padding: 13px;
    border: 1px solid #544383;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(94, 53, 177, 0.18), #111e30);
}

.crafted-market-effect span {
    color: #9d83e9;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crafted-market-effect strong {
    color: #c9a4ff;
    font-size: 1.22rem;
}

.crafted-market-effect small {
    color: #869dba;
}

.crafted-meta {
    margin-top: 12px;
}

.crafted-market-buy-form {
    display: grid;
    grid-template-columns: minmax(100px, 0.35fr) minmax(220px, 1fr);
    gap: 9px;
    margin-top: 12px;
}

.crafted-market-buy-form label {
    display: grid;
    gap: 4px;
    color: #8ea6c7;
    font-size: 0.72rem;
    font-weight: 800;
}

.crafted-market-buy-form input {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #3d536f;
    border-radius: 6px;
    background: #0c1726;
    color: #fff;
}

.crafted-market-buy-form button {
    align-self: end;
    min-height: 38px;
}

.equipment-sell-toolbar a {
    flex: 0 0 auto;
}

.market-own-order-grid {
    padding: 12px;
}

.market-own-order-group.sell {
    border-top-color: #d4a34c;
}

.market-own-order-group.buy {
    border-top-color: #69b879;
}

.market-own-order-group {
    container-type: inline-size;
}

.market-own-order-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(145px, 0.65fr) minmax(145px, auto);
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid #2c3d54;
}

.market-own-order-row > div {
    display: grid;
    gap: 3px;
}

.market-own-order-row > div:last-child {
    justify-items: end;
}

@container (max-width: 620px) {
    .market-own-order-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .market-own-order-row > div:last-child,
    .market-own-order-actions {
        width: 100%;
        min-width: 0;
        justify-items: stretch;
    }

    .market-own-order-actions .market-price-edit-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .market-own-order-actions form,
    .market-own-order-actions button {
        width: 100%;
    }
}

.market-own-order-row > .item-name-wrap[data-market-equipment-tooltip] {
    cursor: help;
}

.market-own-order-row > .item-name-wrap[data-market-equipment-tooltip]:focus-visible {
    border-radius: 4px;
    outline: 2px solid #47c6ed;
    outline-offset: 3px;
}

.market-browse-own-actions {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 330px;
}

.market-browse-own-actions > .market-own {
    grid-column: 1 / -1;
}

.market-browse-own-actions .market-price-edit-form {
    grid-template-columns: minmax(105px, 1fr) auto;
}

.market-browse-own-actions > form:last-child,
.market-browse-own-actions > form:last-child button {
    width: 100%;
}

.market-own-order-row small,
.market-own-order-row span {
    color: #8198b8;
    font-size: 0.73rem;
}

.market-history-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.market-history-summary a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #34485f;
    border-radius: 7px;
    background: #111f31;
    color: #93a9c6;
    text-decoration: none;
}

.market-history-summary a:hover,
.market-history-summary a.active {
    border-color: #3b82d0;
    background: #19375d;
    color: #fff;
}

.market-history-summary strong {
    color: #70dbea;
}

.market-history-table td > small {
    display: block;
    margin-top: 3px;
    color: #7188a8;
}

.market-history-kind {
    display: inline-flex;
    min-width: 78px;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.market-history-kind.bought {
    border-color: #3978b9;
    color: #71c7ff;
    background: rgba(37, 99, 235, 0.14);
}

.market-history-kind.sold {
    border-color: #4b9b67;
    color: #7ee3a0;
    background: rgba(34, 197, 94, 0.12);
}

.market-history-kind.cancelled,
.market-history-kind.expired {
    border-color: #5e6f87;
    color: #a4b3c7;
    background: rgba(100, 116, 139, 0.12);
}

.market-history-empty {
    display: grid;
    min-height: 220px;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: #8198b8;
    text-align: center;
}

.market-history-empty strong {
    color: #e6f0fd;
    font-size: 1.12rem;
}

@media (max-width: 1180px) {
    .auction-house-workspace {
        grid-template-columns: minmax(280px, 0.8fr) minmax(390px, 1.2fr);
    }

    .auction-market-snapshot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-orderbook-row {
        grid-template-columns: minmax(120px, 1fr) minmax(100px, 0.7fr);
    }

    .resource-orderbook-action,
    .resource-orderbook-own-actions,
    .resource-orderbook-row > .market-own,
    .resource-orderbook-row > .market-order-unavailable {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

@media (max-width: 920px) {
    .auction-house-shell {
        grid-template-columns: 1fr;
    }

    .auction-house-categories {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid #34445c;
    }

    .auction-house-side-title,
    .auction-house-tax-note {
        display: none;
    }

    .auction-house-categories > a {
        min-width: max-content;
        margin: 0;
    }

    .auction-house-workspace {
        grid-template-columns: 1fr;
    }

    .auction-product-column {
        border-right: 0;
        border-bottom: 1px solid #34465f;
    }

    .auction-product-list {
        max-height: 360px;
    }
}

@media (max-width: 680px) {
    .auction-house-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .auction-house-heading .market-balance {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .auction-house-tabs {
        flex-wrap: wrap;
        overflow: visible;
    }

    .auction-house-tabs a {
        min-width: 0;
        flex: 1 1 auto;
        padding: 9px 13px;
        text-align: center;
    }

    .auction-house-main {
        padding: 7px;
    }

    .auction-house-search {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auction-house-search .auction-search-field {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .auction-instant-grid,
    .auction-depth-grid,
    .auction-create-orders,
    .auction-equipment-stats {
        grid-template-columns: 1fr;
    }

    .auction-custom-price-callout {
        align-items: stretch;
        flex-direction: column;
    }

    .auction-custom-price-actions {
        justify-content: flex-start;
    }

    .auction-owned-products-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .auction-owned-products-toolbar button {
        width: 100%;
    }

    .auction-order-mode-tabs {
        flex-direction: column;
    }

    .auction-direct-orders-grid {
        grid-template-columns: 1fr;
    }

    .auction-detail-column {
        padding: 10px;
    }

    .auction-house-categories {
        scrollbar-width: none;
    }

    .auction-house-categories::-webkit-scrollbar {
        display: none;
    }

    .resource-order-columns,
    .market-own-order-grid,
    .crafted-market-sell-panel {
        grid-template-columns: 1fr;
    }

    .market-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-asset-five-grid,
    .market-quest-rarity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .auction-owned-products-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .equipment-sell-toolbar a {
        width: 100%;
    }

    .market-asset-five-grid,
    .market-quest-rarity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-orderbook-row,
    .market-own-order-row,
    .crafted-market-sell-form,
    .crafted-market-buy-form {
        grid-template-columns: 1fr;
    }

    .resource-orderbook-own-actions {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .resource-orderbook-own-actions > .market-own {
        grid-column: auto;
    }

    .resource-orderbook-own-actions form,
    .resource-orderbook-own-actions button {
        width: 100%;
    }

    .market-own-order-row > div:last-child {
        justify-items: start;
    }
}

:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #111827;
    color: #e5e7eb;
    min-width: 0;
}

body.auth-page,
body.landing-page {
    min-height: 100vh;
    background-color: #020617;
    background-image:
        linear-gradient(135deg, rgba(2, 6, 23, 0.90) 0%, rgba(15, 23, 42, 0.84) 48%, rgba(2, 6, 23, 0.92) 100%),
        radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.18), transparent 30%),
        radial-gradient(circle at 82% 8%, rgba(124, 58, 237, 0.20), transparent 32%),
        url("../marketing/idle-hero-ascension-thumbnail.png");
    background-position:
        center,
        center,
        center,
        center;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;
    background-size:
        cover,
        cover,
        cover,
        auto min(115vh, 1180px);
    background-attachment:
        fixed,
        fixed,
        fixed,
        fixed;
    color: #e5f4ff;
}

body.landing-page .site-header {
    background: rgba(2, 6, 23, 0.76);
    border-bottom-color: rgba(96, 165, 250, 0.22);
    backdrop-filter: blur(14px);
}

body.auth-page .auth-shell,
body.landing-page .page {
    position: relative;
    z-index: 1;
}

.auth-shell {
    width: min(1120px, calc(100% - 32px));
    min-height: 100svh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 28px;
    align-items: center;
    padding: max(42px, calc(24px + var(--safe-area-top))) 0 max(42px, calc(24px + var(--safe-area-bottom)));
}

.auth-hero,
.auth-card {
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(15, 23, 42, 0.86);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
}

.auth-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: clamp(34px, 5vw, 64px);
}

.auth-hero::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -110px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.32), transparent 68%);
    pointer-events: none;
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(34, 211, 238, 0.45);
    border-radius: 999px;
    color: #67e8f9;
    background: rgba(8, 47, 73, 0.45);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.auth-hero h1 {
    margin: 22px 0 14px;
    max-width: 620px;
    color: #f8fafc;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.auth-hero p {
    max-width: 620px;
    margin: 0;
    color: #bfdbfe;
    font-size: 18px;
    line-height: 1.6;
}

.auth-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
    margin: 26px 0;
}

.auth-feature-grid span {
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 14px;
    padding: 12px 14px;
    color: #f8fafc;
    background: rgba(2, 6, 23, 0.44);
    font-weight: 800;
}

.auth-hero .auth-alpha-note {
    max-width: 620px;
    color: #93c5fd;
    font-size: 14px;
}

.auth-card {
    border-radius: 22px;
    padding: 28px;
}

.auth-card-header {
    margin-bottom: 22px;
}

.auth-card-header span {
    display: block;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-card-header h2 {
    margin: 8px 0 0;
    color: #f8fafc;
    font-size: 32px;
    letter-spacing: -0.04em;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-form label {
    display: grid;
    gap: 7px;
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-form input {
    width: 100%;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 13px 14px;
    color: #f8fafc;
    background: rgba(2, 6, 23, 0.72);
    font: inherit;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.auth-form input:focus {
    border-color: #22d3ee;
    background: rgba(2, 6, 23, 0.92);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

.auth-primary-button {
    width: 100%;
    margin-top: 6px;
    border: 0;
    border-radius: 12px;
    padding: 13px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed, #2563eb 58%, #0891b2);
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
}

.auth-primary-button:hover {
    filter: brightness(1.08);
}

.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.auth-links a {
    color: #67e8f9;
    text-decoration: none;
    font-weight: 800;
}

.auth-link-form {
    margin: 0;
}

.auth-link-form button {
    border: 0;
    padding: 0;
    color: #67e8f9;
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.auth-links a:hover,
.auth-link-form button:hover {
    color: #bfdbfe;
}

.auth-message {
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 14px;
    font-weight: 800;
}

.auth-message-error {
    border: 1px solid rgba(248, 113, 113, 0.5);
    color: #fecaca;
    background: rgba(127, 29, 29, 0.34);
}

.auth-message-warning {
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fde68a;
    background: rgba(120, 53, 15, 0.34);
}

.auth-message-success {
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: #bbf7d0;
    background: rgba(6, 78, 59, 0.34);
}

.auth-message-info {
    border: 1px solid rgba(34, 211, 238, 0.42);
    color: #cffafe;
    background: rgba(8, 47, 73, 0.38);
}

.landing-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.landing-hero {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 24px;
    padding: clamp(30px, 4vw, 54px);
    background:
        radial-gradient(circle at 85% 85%, rgba(34, 211, 238, 0.22), transparent 30%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.76));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.landing-hero h1 {
    max-width: 680px;
    margin: 22px 0 16px;
    color: #f8fafc;
    font-size: clamp(44px, 6vw, 78px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.landing-hero p {
    max-width: 700px;
    margin: 0;
    color: #bfdbfe;
    font-size: 18px;
    line-height: 1.6;
}

.landing-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 30px 0 22px;
}

.landing-guest-form {
    display: inline-flex;
    margin: 0;
}

.landing-primary-link,
.landing-secondary-link,
.landing-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    padding: 11px 16px;
    font-weight: 900;
    text-decoration: none;
}

.landing-primary-link {
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed, #2563eb 58%, #0891b2);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
}

.landing-secondary-link {
    border: 1px solid rgba(34, 211, 238, 0.34);
    color: #67e8f9;
    background: rgba(2, 6, 23, 0.45);
    font: inherit;
    cursor: pointer;
}

.landing-primary-link:hover,
.landing-secondary-link:hover,
.landing-button-link:hover {
    filter: brightness(1.08);
}

.landing-alpha-box {
    display: grid;
    gap: 6px;
    max-width: 720px;
    margin-top: 24px;
    border: 1px solid rgba(251, 191, 36, 0.34);
    border-radius: 16px;
    padding: 14px 16px;
    color: #fde68a;
    background: rgba(120, 53, 15, 0.24);
}

.landing-alpha-box strong {
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
}

.landing-alpha-box span {
    color: #fef3c7;
}

.landing-login-card {
    align-self: stretch;
}

.landing-card-text {
    color: #bfdbfe;
    line-height: 1.55;
}

.landing-button-link {
    margin-top: 16px;
}

.landing-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.landing-info-card h2 {
    margin-top: 0;
}

.landing-info-card ul {
    margin-bottom: 0;
    color: #dbeafe;
    line-height: 1.55;
}

.landing-showcase {
    margin: 0 0 24px;
    padding: clamp(18px, 3vw, 30px);
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 24px;
    background: rgba(7, 15, 30, 0.9);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.landing-showcase-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.landing-showcase-heading h2 {
    margin: 12px 0 0;
    color: #f8fafc;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.landing-showcase-heading p {
    max-width: 470px;
    margin: 0;
    color: #a9bed6;
    line-height: 1.55;
}

.landing-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.landing-showcase-card {
    display: grid;
    grid-template-rows: minmax(250px, auto) auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(71, 97, 132, 0.72);
    border-radius: 18px;
    background: rgba(12, 25, 44, 0.96);
}

.landing-showcase-card-wide {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.55fr);
    grid-template-rows: auto;
}

.landing-game-preview {
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    min-height: 250px;
    padding: 18px;
    overflow: hidden;
    border-bottom: 1px solid rgba(71, 97, 132, 0.6);
    background:
        linear-gradient(rgba(23, 43, 70, 0.42) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 43, 70, 0.32) 1px, transparent 1px),
        radial-gradient(circle at 88% 5%, rgba(56, 189, 248, 0.16), transparent 38%),
        #081321;
    background-size: 28px 28px, 28px 28px, auto, auto;
}

.landing-showcase-card-wide .landing-game-preview {
    min-height: 310px;
    border-right: 1px solid rgba(71, 97, 132, 0.6);
    border-bottom: 0;
}

.landing-game-preview::after {
    content: "";
    position: absolute;
    inset: auto -60px -80px auto;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.07);
    filter: blur(4px);
    pointer-events: none;
}

.landing-game-preview-combat::after,
.landing-game-preview-boss::after {
    background: rgba(248, 113, 113, 0.09);
}

.landing-game-preview-gathering::after {
    background: rgba(52, 211, 153, 0.1);
}

.landing-game-preview-inventory::after {
    background: rgba(251, 191, 36, 0.1);
}

.landing-game-preview-market::after {
    background: rgba(96, 165, 250, 0.1);
}

.landing-game-preview-dragon::after {
    background: rgba(167, 139, 250, 0.12);
}

.landing-game-preview-sanctum::after {
    background: rgba(245, 158, 11, 0.1);
}

.landing-preview-topline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.landing-preview-topline span,
.landing-showcase-copy > span {
    color: #67e8f9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.landing-preview-topline strong {
    overflow: hidden;
    color: #f8fafc;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-preview-topline em {
    padding: 4px 7px;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 999px;
    color: #86efac;
    background: rgba(6, 78, 59, 0.28);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.landing-preview-meter {
    position: relative;
    height: 24px;
    overflow: hidden;
    border: 1px solid #314562;
    border-radius: 999px;
    background: #07111f;
}

.landing-preview-meter > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #0f9f55, #4ade80);
}

.landing-preview-meter.danger > span {
    background: linear-gradient(90deg, #dc2626, #f97316);
}

.landing-preview-meter.dragon > span {
    background: linear-gradient(90deg, #7c3aed, #38bdf8);
}

.landing-preview-meter.sanctum > span {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.landing-preview-meter b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 10px;
    text-shadow: 0 1px 2px #000000;
}

.landing-preview-versus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.landing-preview-versus > div,
.landing-preview-tile-grid > span,
.landing-preview-market-row > span {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(64, 91, 126, 0.78);
    border-radius: 11px;
    background: rgba(8, 22, 39, 0.9);
}

.landing-preview-versus small,
.landing-preview-item small {
    color: #8ea7c7;
    font-size: 10px;
}

.landing-preview-versus strong,
.landing-preview-tile-grid b,
.landing-preview-market-row b {
    color: #f8fafc;
}

.landing-preview-versus span {
    color: #86efac;
    font-size: 11px;
}

.landing-preview-versus > b {
    color: #f87171;
    font-size: 11px;
}

.landing-preview-stats,
.landing-preview-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.landing-preview-stats span {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(64, 91, 126, 0.66);
    border-radius: 9px;
    color: #8ea7c7;
    background: rgba(8, 22, 39, 0.8);
    font-size: 9px;
    text-align: center;
}

.landing-preview-stats b {
    color: #e9f5ff;
    font-size: 12px;
}

.landing-preview-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-preview-tile-grid > span,
.landing-preview-market-row > span {
    color: #8ea7c7;
    font-size: 9px;
    text-transform: uppercase;
}

.landing-preview-tile-grid b,
.landing-preview-market-row b {
    font-size: 14px;
    text-transform: none;
}

.landing-preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(251, 191, 36, 0.42);
    border-radius: 11px;
    background: rgba(69, 46, 7, 0.22);
}

.landing-preview-dragon-core {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(167, 139, 250, 0.46);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(76, 29, 149, 0.3), rgba(8, 47, 73, 0.32));
}

.landing-preview-dragon-emblem {
    display: grid;
    flex: 0 0 52px;
    height: 52px;
    place-items: center;
    border: 1px solid #a78bfa;
    border-radius: 50%;
    color: #ede9fe;
    background: radial-gradient(circle at 35% 30%, #38bdf8, #6d28d9 68%);
    box-shadow: 0 0 24px rgba(124, 58, 237, 0.38);
    font-size: 22px;
    font-weight: 900;
}

.landing-preview-dragon-core > div:last-child {
    display: grid;
    gap: 3px;
}

.landing-preview-dragon-core small,
.landing-preview-dragon-core span {
    color: #b8c9e1;
    font-size: 10px;
}

.landing-preview-dragon-core strong {
    color: #f5f3ff;
    font-size: 24px;
}

.landing-preview-sanctum-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(245, 158, 11, 0.38);
    border-radius: 12px;
    color: #fde68a;
    background: rgba(120, 53, 15, 0.2);
}

.landing-preview-sanctum-level span {
    color: #b8c9e1;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.landing-preview-sanctum-level strong {
    color: #fbbf24;
}

.landing-preview-item-icon {
    display: grid;
    flex: 0 0 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    color: #fef3c7;
    background: rgba(146, 64, 14, 0.5);
    font-weight: 900;
}

.landing-preview-item > div:last-child {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.landing-preview-item strong {
    overflow: hidden;
    color: #fbbf24;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-preview-stat-list {
    display: grid;
    gap: 5px;
}

.landing-preview-stat-list span,
.landing-preview-order {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px solid rgba(71, 97, 132, 0.5);
    color: #b7cae2;
    font-size: 11px;
}

.landing-preview-stat-list b {
    color: #86efac;
}

.landing-preview-actions,
.landing-preview-assets {
    display: flex;
    gap: 6px;
}

.landing-preview-actions span,
.landing-preview-assets span {
    flex: 1;
    padding: 7px 6px;
    border: 1px solid #355071;
    border-radius: 8px;
    color: #dbeafe;
    background: #0d1b2e;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.landing-preview-actions span:nth-child(2),
.landing-preview-assets span.active {
    border-color: #22d3ee;
    color: #ffffff;
    background: rgba(14, 116, 144, 0.44);
}

.landing-preview-market-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.landing-preview-order {
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(52, 211, 153, 0.34);
    border-radius: 9px;
    background: rgba(6, 78, 59, 0.17);
}

.landing-preview-order.sale {
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(127, 29, 29, 0.16);
}

.landing-preview-order b {
    color: #f8fafc;
}

.landing-preview-order em {
    color: #9fb5d0;
    font-size: 10px;
    font-style: normal;
}

.landing-showcase-copy {
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 18px 20px 20px;
}

.landing-showcase-copy h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 20px;
}

.landing-showcase-copy p {
    margin: 0;
    color: #a9bed6;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 860px) {
    .auth-shell {
        grid-template-columns: 1fr;
        padding: 24px 0;
    }

    .auth-hero {
        padding: 28px;
    }

    .auth-feature-grid {
        grid-template-columns: 1fr;
    }

    .landing-shell,
    .landing-card-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero {
        min-height: 0;
    }

    .landing-showcase-card-wide {
        grid-template-columns: 1fr;
    }

    .landing-showcase-card-wide .landing-game-preview {
        min-height: 250px;
        border-right: 0;
        border-bottom: 1px solid rgba(71, 97, 132, 0.6);
    }
}

@media (max-width: 680px) {
    .landing-showcase {
        padding-right: 0;
        padding-left: 16px;
    }

    .landing-showcase-heading {
        display: grid;
        padding-right: 16px;
    }

    .landing-showcase-grid {
        display: flex;
        gap: 12px;
        padding: 0 16px 10px 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: rgba(56, 189, 248, 0.7) transparent;
    }

    .landing-showcase-card,
    .landing-showcase-card-wide {
        flex: 0 0 min(86vw, 390px);
        grid-template-columns: 1fr;
        grid-template-rows: minmax(236px, auto) auto;
        scroll-snap-align: start;
    }

    .landing-game-preview,
    .landing-showcase-card-wide .landing-game-preview {
        min-height: 236px;
        padding: 13px;
    }

    .landing-preview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-preview-versus {
        gap: 7px;
    }

    .landing-preview-versus > div {
        padding: 9px;
    }
}

.site-header {
    background: #020617;
    border-bottom: 1px solid #1f2937;
}

.site-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    color: #f9fafb;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

.main-nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.main-nav a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
}

.main-nav a:hover {
    color: #60a5fa;
}

.page {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

.card {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.stat-grid > .stat-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid #374151;
    border-radius: 8px;
    background: #111827;
}

.stat-grid > .stat-card > span,
.stat-grid > .stat-card > small {
    color: #93c5fd;
    font-size: 12px;
}

.stat-grid > .stat-card > strong {
    color: #f9fafb;
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.release-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-box {
    background: #111827;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 14px;
}

.stat-label {
    color: #9ca3af;
    font-size: 13px;
}

.stat-value {
    margin-top: 6px;
    font-size: 22px;
    font-weight: bold;
    color: #f9fafb;
}

/* Character Overview */
.character-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 34%),
        linear-gradient(135deg, #1f2937, #111827);
}

.character-hero h1 {
    margin: 5px 0;
    font-size: 34px;
}

.character-hero p {
    margin: 0;
    color: #94a3b8;
}

.character-kicker {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.character-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: 10px;
    min-width: min(430px, 100%);
}

.character-hero-stats > div,
.character-stat-box,
.character-equipment-card {
    border: 1px solid #2f3b52;
    border-radius: 10px;
    background: #111827;
}

.character-hero-stats > div {
    padding: 14px;
}

.character-hero-stats span,
.character-section-title span,
.character-stat-box span,
.character-stat-box small,
.character-skill-row span,
.character-skill-row small,
.character-equipment-meta,
.character-equipment-slot,
.character-equipment-empty {
    color: #94a3b8;
}

.character-hero-stats strong {
    display: block;
    margin-top: 5px;
    color: #f8fafc;
    font-size: 20px;
}

.character-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.character-panel {
    min-width: 0;
}

.character-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #334155;
}

.character-section-title h2 {
    margin: 0;
}

.character-title-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0.2rem 0 0.35rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid rgba(34, 211, 238, 0.45);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.08);
    color: #67e8f9;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.custom-title-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.2rem 0 0.35rem;
}

.custom-title-palette span {
    padding: 0.22rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    font-size: 0.78rem;
    font-weight: 800;
}

.player-title-custom-ice-blue { color: #67e8f9; text-shadow: 0 0 9px rgba(34, 211, 238, 0.55); }
.player-title-custom-royal-blue { color: #93c5fd; text-shadow: 0 0 9px rgba(59, 130, 246, 0.55); }
.player-title-custom-emerald { color: #6ee7b7; text-shadow: 0 0 9px rgba(16, 185, 129, 0.55); }
.player-title-custom-gold { color: #fde047; text-shadow: 0 0 10px rgba(250, 204, 21, 0.65); }
.player-title-custom-orange { color: #fdba74; text-shadow: 0 0 9px rgba(249, 115, 22, 0.55); }
.player-title-custom-rose { color: #fda4af; text-shadow: 0 0 9px rgba(244, 63, 94, 0.55); }
.player-title-custom-violet { color: #d8b4fe; text-shadow: 0 0 10px rgba(168, 85, 247, 0.6); }
.player-title-custom-silver { color: #e5e7eb; text-shadow: 0 0 9px rgba(203, 213, 225, 0.55); }
.player-title-custom-crimson { color: #fb7185; text-shadow: 0 0 9px rgba(225, 29, 72, 0.58); }
.player-title-custom-magenta { color: #f0abfc; text-shadow: 0 0 10px rgba(217, 70, 239, 0.6); }
.player-title-custom-pink { color: #f9a8d4; text-shadow: 0 0 9px rgba(236, 72, 153, 0.55); }
.player-title-custom-amber { color: #fcd34d; text-shadow: 0 0 10px rgba(245, 158, 11, 0.62); }
.player-title-custom-bronze { color: #d6a36a; text-shadow: 0 0 9px rgba(180, 83, 9, 0.55); }
.player-title-custom-lime { color: #bef264; text-shadow: 0 0 9px rgba(132, 204, 22, 0.55); }
.player-title-custom-mint { color: #99f6e4; text-shadow: 0 0 9px rgba(45, 212, 191, 0.55); }
.player-title-custom-white { color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.62); }

.chat-player-title.player-title-custom-ice-blue { color: #67e8f9; text-shadow: 0 0 9px rgba(34, 211, 238, 0.55); }
.chat-player-title.player-title-custom-royal-blue { color: #93c5fd; text-shadow: 0 0 9px rgba(59, 130, 246, 0.55); }
.chat-player-title.player-title-custom-emerald { color: #6ee7b7; text-shadow: 0 0 9px rgba(16, 185, 129, 0.55); }
.chat-player-title.player-title-custom-gold { color: #fde047; text-shadow: 0 0 10px rgba(250, 204, 21, 0.65); }
.chat-player-title.player-title-custom-orange { color: #fdba74; text-shadow: 0 0 9px rgba(249, 115, 22, 0.55); }
.chat-player-title.player-title-custom-rose { color: #fda4af; text-shadow: 0 0 9px rgba(244, 63, 94, 0.55); }
.chat-player-title.player-title-custom-violet { color: #d8b4fe; text-shadow: 0 0 10px rgba(168, 85, 247, 0.6); }
.chat-player-title.player-title-custom-silver { color: #e5e7eb; text-shadow: 0 0 9px rgba(203, 213, 225, 0.55); }
.chat-player-title.player-title-custom-crimson { color: #fb7185; text-shadow: 0 0 9px rgba(225, 29, 72, 0.58); }
.chat-player-title.player-title-custom-magenta { color: #f0abfc; text-shadow: 0 0 10px rgba(217, 70, 239, 0.6); }
.chat-player-title.player-title-custom-pink { color: #f9a8d4; text-shadow: 0 0 9px rgba(236, 72, 153, 0.55); }
.chat-player-title.player-title-custom-amber { color: #fcd34d; text-shadow: 0 0 10px rgba(245, 158, 11, 0.62); }
.chat-player-title.player-title-custom-bronze { color: #d6a36a; text-shadow: 0 0 9px rgba(180, 83, 9, 0.55); }
.chat-player-title.player-title-custom-lime { color: #bef264; text-shadow: 0 0 9px rgba(132, 204, 22, 0.55); }
.chat-player-title.player-title-custom-mint { color: #99f6e4; text-shadow: 0 0 9px rgba(45, 212, 191, 0.55); }
.chat-player-title.player-title-custom-white { color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.62); }

.player-title-effect-glow {
    filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);
}

.player-title-effect-prismatic {
    animation: custom-title-prismatic-shimmer 4s linear infinite;
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor);
}

@keyframes custom-title-prismatic-shimmer {
    0% { filter: hue-rotate(0deg) drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor); }
    50% { filter: hue-rotate(180deg) drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor); }
    100% { filter: hue-rotate(360deg) drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor); }
}

@media (prefers-reduced-motion: reduce) {
    .player-title-effect-prismatic {
        animation: none;
    }
}

.custom-title-effect-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.2rem 0 0.45rem;
}

.custom-title-effect-preview span {
    padding: 0.28rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.76);
    font-size: 0.82rem;
    font-weight: 900;
}

.custom-title-live-preview-wrap {
    display: grid;
    gap: 0.4rem;
}

.custom-title-live-preview-wrap > span {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.custom-title-live-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.25rem;
    padding: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.38);
    border-radius: 0.65rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.13), transparent 62%),
        rgba(2, 6, 23, 0.72);
}

.custom-title-live-preview {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

.custom-title-rules {
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(56, 189, 248, 0.42);
    border-radius: 0.6rem;
    background: rgba(15, 23, 42, 0.72);
}

.custom-title-rules h3 {
    margin: 0 0 0.55rem;
    color: #e2e8f0;
}

.custom-title-rules ol {
    margin: 0;
    padding-left: 1.3rem;
}

.custom-title-rules li + li {
    margin-top: 0.35rem;
}

.custom-title-rules-accept {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid rgba(251, 191, 36, 0.48);
    border-radius: 0.55rem;
    background: rgba(120, 53, 15, 0.12);
}

.custom-title-rules-accept input {
    width: auto;
    margin-top: 0.2rem;
}

.character-title-label[class*="player-title-custom-"] {
    border-color: currentColor;
    background: rgba(15, 23, 42, 0.72);
}

.player-title-alpha-legend {
    border-color: rgba(251, 191, 36, 0.75);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.08));
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

.player-title-test {
    border-color: rgba(248, 113, 113, 0.75);
    background: rgba(248, 113, 113, 0.08);
    color: #f87171;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
}

.player-title-dev {
    border-color: rgba(239, 68, 68, 0.9);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.24), rgba(127, 29, 29, 0.12));
    color: #ef4444;
    text-shadow: 0 0 9px rgba(239, 68, 68, 0.55);
}

.player-title-beta-testicle {
    border-color: rgba(244, 114, 182, 0.85);
    background: linear-gradient(135deg, rgba(219, 39, 119, 0.2), rgba(124, 58, 237, 0.12));
    color: #f9a8d4;
    text-shadow: 0 0 9px rgba(236, 72, 153, 0.5);
}

.player-title-alpha-supporter {
    border-color: rgba(216, 180, 254, 0.75);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(251, 191, 36, 0.08));
    color: #d8b4fe;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.player-title-bug-hunter {
    border-color: rgba(74, 222, 128, 0.75);
    background: rgba(34, 197, 94, 0.08);
    color: #4ade80;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}

.player-title-balance-breaker {
    border-color: rgba(251, 146, 60, 0.75);
    background: rgba(251, 146, 60, 0.08);
    color: #fb923c;
    text-shadow: 0 0 8px rgba(251, 146, 60, 0.35);
}

.player-title-arena-champion {
    border-color: rgba(248, 113, 113, 0.8);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(251, 191, 36, 0.08));
    color: #fca5a5;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.player-title-elite-fighter {
    border-color: rgba(96, 165, 250, 0.75);
    background: rgba(59, 130, 246, 0.08);
    color: #93c5fd;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.35);
}

.player-title-master-gatherer {
    border-color: rgba(45, 212, 191, 0.75);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.16), rgba(34, 197, 94, 0.08));
    color: #5eead4;
    text-shadow: 0 0 10px rgba(20, 184, 166, 0.4);
}

.player-title-elite-gatherer {
    border-color: rgba(134, 239, 172, 0.75);
    background: rgba(34, 197, 94, 0.08);
    color: #86efac;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}

.player-title-big-whale {
    border-color: rgba(125, 211, 252, 0.9);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(168, 85, 247, 0.14));
    color: #bae6fd;
    text-shadow: 0 0 11px rgba(56, 189, 248, 0.65);
}

.player-title-whale {
    border-color: rgba(103, 232, 249, 0.75);
    background: rgba(6, 182, 212, 0.1);
    color: #67e8f9;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.45);
}

.player-title-buff-champion {
    border-color: rgba(250, 204, 21, 0.85);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.12));
    color: #fde68a;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

.player-title-buff-patron {
    border-color: rgba(251, 146, 60, 0.75);
    background: rgba(249, 115, 22, 0.1);
    color: #fdba74;
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.45);
}

.player-title-dragon-tamer {
    border-color: rgba(192, 132, 252, 0.75);
    background: rgba(147, 51, 234, 0.1);
    color: #c084fc;
    text-shadow: 0 0 8px rgba(147, 51, 234, 0.4);
}

.player-title-monster-slayer {
    border-color: rgba(248, 113, 113, 0.75);
    background: rgba(220, 38, 38, 0.08);
    color: #f87171;
    text-shadow: 0 0 8px rgba(220, 38, 38, 0.35);
}

.player-title-resource-lord {
    border-color: rgba(52, 211, 153, 0.75);
    background: rgba(16, 185, 129, 0.08);
    color: #34d399;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.player-title-guild-pillar {
    border-color: rgba(125, 211, 252, 0.75);
    background: rgba(14, 165, 233, 0.08);
    color: #7dd3fc;
    text-shadow: 0 0 8px rgba(14, 165, 233, 0.35);
}

.player-title-mystic-finder {
    border-color: rgba(229, 231, 235, 0.75);
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.6), rgba(147, 51, 234, 0.18));
    color: #e5e7eb;
    text-shadow: 0 0 10px rgba(229, 231, 235, 0.45);
}

.player-title-journeyman-crafter {
    border-color: rgba(251, 146, 60, 0.78);
    background: linear-gradient(135deg, rgba(154, 52, 18, 0.16), rgba(234, 88, 12, 0.08));
    color: #fdba74;
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}

.player-title-master-artisan {
    border-color: rgba(250, 204, 21, 0.85);
    background: linear-gradient(135deg, rgba(113, 63, 18, 0.2), rgba(126, 34, 206, 0.14));
    color: #fde047;
    text-shadow: 0 0 11px rgba(250, 204, 21, 0.55);
}

.player-title-grandmaster-artisan {
    border-color: rgba(244, 114, 182, 0.9);
    background: linear-gradient(135deg, rgba(131, 24, 67, 0.22), rgba(88, 28, 135, 0.2), rgba(180, 83, 9, 0.14));
    color: #f9a8d4;
    text-shadow: 0 0 13px rgba(236, 72, 153, 0.7);
}

.player-title-dungeon-pioneer {
    border-color: rgba(251, 146, 60, 0.86);
    background: linear-gradient(135deg, rgba(154, 52, 18, 0.2), rgba(120, 53, 15, 0.1));
    color: #fdba74;
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.55);
}

.player-title-dungeon-conqueror {
    border-color: rgba(248, 113, 113, 0.9);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.24), rgba(154, 52, 18, 0.14));
    color: #fca5a5;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
}

.player-title-dungeon-legend {
    border-color: rgba(250, 204, 21, 0.92);
    background: linear-gradient(135deg, rgba(113, 63, 18, 0.24), rgba(131, 24, 67, 0.2));
    color: #fde047;
    text-shadow: 0 0 14px rgba(250, 204, 21, 0.8);
}

.player-title-supply-pioneer {
    border-color: rgba(34, 211, 238, 0.86);
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.2), rgba(15, 118, 110, 0.1));
    color: #67e8f9;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.55);
}

.player-title-supply-commander {
    border-color: rgba(45, 212, 191, 0.9);
    background: linear-gradient(135deg, rgba(17, 94, 89, 0.24), rgba(20, 83, 45, 0.14));
    color: #5eead4;
    text-shadow: 0 0 12px rgba(20, 184, 166, 0.7);
}

.player-title-supply-legend {
    border-color: rgba(74, 222, 128, 0.92);
    background: linear-gradient(135deg, rgba(20, 83, 45, 0.24), rgba(21, 94, 117, 0.2));
    color: #86efac;
    text-shadow: 0 0 14px rgba(34, 197, 94, 0.8);
}

.chat-player-title {
    color: #67e8f9;
    font-weight: 900;
}

.chat-shell.chat-titles-hidden .chat-player-title {
    display: none !important;
}

.chat-shell.chat-title-effects-disabled .chat-player-title {
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;
}

.chat-player-title.player-title-test {
    color: #f87171;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.45);
}

.chat-player-title.player-title-dev {
    color: #ef4444;
    text-shadow: 0 0 9px rgba(239, 68, 68, 0.6);
}

.chat-player-title.player-title-beta-testicle {
    color: #f9a8d4;
    text-shadow: 0 0 9px rgba(236, 72, 153, 0.55);
}

.chat-player-title.player-title-alpha-legend {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
}

.chat-player-title.player-title-alpha-supporter { color: #d8b4fe; text-shadow: 0 0 8px rgba(168, 85, 247, 0.45); }
.chat-player-title.player-title-bug-hunter { color: #4ade80; text-shadow: 0 0 8px rgba(34, 197, 94, 0.45); }
.chat-player-title.player-title-balance-breaker { color: #fb923c; text-shadow: 0 0 8px rgba(251, 146, 60, 0.45); }
.chat-player-title.player-title-arena-champion { color: #fca5a5; text-shadow: 0 0 8px rgba(239, 68, 68, 0.45); }
.chat-player-title.player-title-elite-fighter { color: #93c5fd; text-shadow: 0 0 8px rgba(59, 130, 246, 0.45); }
.chat-player-title.player-title-master-gatherer { color: #5eead4; text-shadow: 0 0 8px rgba(20, 184, 166, 0.45); }
.chat-player-title.player-title-elite-gatherer { color: #86efac; text-shadow: 0 0 8px rgba(34, 197, 94, 0.45); }
.chat-player-title.player-title-big-whale { color: #bae6fd; text-shadow: 0 0 11px rgba(56, 189, 248, 0.7); }
.chat-player-title.player-title-whale { color: #67e8f9; text-shadow: 0 0 8px rgba(6, 182, 212, 0.5); }
.chat-player-title.player-title-buff-champion { color: #fde68a; text-shadow: 0 0 10px rgba(251, 191, 36, 0.65); }
.chat-player-title.player-title-buff-patron { color: #fdba74; text-shadow: 0 0 8px rgba(249, 115, 22, 0.5); }
.chat-player-title.player-title-dragon-tamer { color: #c084fc; text-shadow: 0 0 8px rgba(147, 51, 234, 0.45); }
.chat-player-title.player-title-monster-slayer { color: #f87171; text-shadow: 0 0 8px rgba(220, 38, 38, 0.45); }
.chat-player-title.player-title-resource-lord { color: #34d399; text-shadow: 0 0 8px rgba(16, 185, 129, 0.45); }
.chat-player-title.player-title-guild-pillar { color: #7dd3fc; text-shadow: 0 0 8px rgba(14, 165, 233, 0.45); }
.chat-player-title.player-title-mystic-finder { color: #e5e7eb; text-shadow: 0 0 10px rgba(229, 231, 235, 0.5); }
.chat-player-title.player-title-journeyman-crafter { color: #fdba74; text-shadow: 0 0 8px rgba(249, 115, 22, 0.5); }
.chat-player-title.player-title-master-artisan { color: #fde047; text-shadow: 0 0 11px rgba(250, 204, 21, 0.65); }
.chat-player-title.player-title-grandmaster-artisan { color: #f9a8d4; text-shadow: 0 0 13px rgba(236, 72, 153, 0.75); }
.chat-player-title.player-title-dungeon-pioneer { color: #fdba74; text-shadow: 0 0 10px rgba(249, 115, 22, 0.6); }
.chat-player-title.player-title-dungeon-conqueror { color: #fca5a5; text-shadow: 0 0 12px rgba(239, 68, 68, 0.75); }
.chat-player-title.player-title-dungeon-legend { color: #fde047; text-shadow: 0 0 14px rgba(250, 204, 21, 0.85); }
.chat-player-title.player-title-supply-pioneer { color: #67e8f9; text-shadow: 0 0 10px rgba(6, 182, 212, 0.6); }
.chat-player-title.player-title-supply-commander { color: #5eead4; text-shadow: 0 0 12px rgba(20, 184, 166, 0.75); }
.chat-player-title.player-title-supply-legend { color: #86efac; text-shadow: 0 0 14px rgba(34, 197, 94, 0.85); }

.character-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.character-stat-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.character-gear-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.character-gear-status-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #2f3b52;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 40%),
        #111827;
}

.character-gear-status-card.full {
    border-color: rgba(34, 197, 94, 0.55);
}

.character-gear-status-card.mixed {
    border-color: rgba(250, 204, 21, 0.48);
}

.character-gear-status-card.penalty {
    border-color: rgba(248, 113, 113, 0.65);
}

.character-gear-status-card > div:first-child {
    display: grid;
    gap: 4px;
}

.character-gear-status-card span {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.character-gear-status-card strong {
    color: #f8fafc;
    font-size: 20px;
}

.character-gear-status-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.character-gear-status-meta span,
.character-gear-status-meta em {
    padding: 3px 8px;
    border: 1px solid #334155;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}

.character-gear-status-meta em {
    color: #cbd5e1;
}

.character-gear-status-card.penalty .character-gear-status-meta em {
    border-color: rgba(248, 113, 113, 0.55);
    color: #fecaca;
}

.character-gear-status-card p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.4;
}

.character-gear-status-card small {
    color: #67e8f9;
    line-height: 1.35;
}

.character-utility-groups {
    display: grid;
    gap: 16px;
}

.character-utility-group {
    padding: 12px;
    border: 1px solid #293852;
    border-radius: 12px;
    background: #0f172a;
}

.character-utility-group h3 {
    margin: 0 0 10px;
    color: #93c5fd;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.character-stat-box {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 12px;
}

.character-stat-box strong {
    color: #f8fafc;
    font-size: 20px;
}

.character-stat-box small {
    font-size: 12px;
}

.character-breakdown {
    display: none;
    position: absolute;
    left: 10px;
    top: calc(100% - 4px);
    z-index: 60;
    width: min(340px, calc(100vw - 40px));
    padding: 11px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #07101f;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
}

.character-stat-box:hover .character-breakdown,
.character-stat-box:focus-within .character-breakdown {
    display: grid;
    gap: 6px;
}

.character-breakdown strong {
    margin-bottom: 4px;
    color: #e2e8f0;
    font-size: 13px;
}

.character-breakdown p {
    margin: 0 0 6px;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.35;
}

.character-breakdown div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 5px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 12px;
}

.character-breakdown span {
    color: #94a3b8;
}

.character-breakdown em {
    color: #f8fafc;
    font-style: normal;
    font-weight: 700;
}

.character-empty-note {
    margin: 0;
    color: #94a3b8;
}

.character-buff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.character-buff-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #0f172a;
}

.character-buff-card.character-buff-quest {
    border-color: #7c3aed;
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.18), transparent 42%),
        #0f172a;
}

.character-buff-card.character-buff-global {
    border-color: #22c55e;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.18), transparent 42%),
        #0f172a;
}

.character-buff-card > span {
    color: #93c5fd;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.character-buff-card strong {
    color: #f8fafc;
}

.character-buff-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.character-buff-card em {
    color: #c084fc;
    font-style: normal;
    font-weight: 900;
}

.character-buff-card time {
    color: #c9d6e8;
    font-size: 12px;
}

.character-skill-list {
    display: grid;
    gap: 10px;
}

.character-skill-row {
    display: grid;
    grid-template-columns: 120px minmax(120px, 1fr) 110px;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid #2f3b52;
    border-radius: 9px;
    background: #111827;
}

.character-skill-row strong,
.character-skill-row span {
    display: block;
}

.character-skill-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #0f172a;
}

.character-skill-progress > div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0284c7, #67e8f9);
}

.character-equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.character-equipment-card {
    min-height: 180px;
    padding: 13px;
}

.character-equipment-card.empty {
    display: grid;
    place-content: center;
    text-align: center;
}

.character-equipment-slot {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.character-equipment-name {
    font-weight: 800;
}

.character-equipment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    font-size: 12px;
}

.character-equipment-stats {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.character-equipment-stats li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 13px;
}

.character-equipment-stats li:last-child {
    border-bottom: 0;
}

.character-equipment-stats span {
    color: #cbd5e1;
}

.character-equipment-stats strong {
    color: #f8fafc;
}

.character-equipment-action {
    margin-top: 12px;
}

.character-crafting-equipment .character-section-title > div { display: grid; gap: 3px; }
.character-crafting-equipment .character-section-title h2 { margin: 0; }
.character-crafting-equipment .character-equipment-card { border-color: #3c4167; background: linear-gradient(145deg,#17172b,#111827); }
.character-crafting-equipment .character-equipment-slot { color: #c4b5fd; }

.character-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.action-box {
    border-top: 1px solid #374151;
    padding: 16px 0;
}

.action-box:first-child {
    border-top: none;
}

h1, h2, h3 {
    color: #f9fafb;
}

a {
    color: #60a5fa;
}

button {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background: #1d4ed8;
}

.side-navigation {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: 220px;
    padding: 18px 12px;
    overflow: visible;
    border-right: 1px solid #334155;
    background:
        linear-gradient(rgba(2, 6, 23, 0.94), rgba(15, 23, 42, 0.96)),
        radial-gradient(circle at 15% 20%, #1e3a8a 0, transparent 45%);
}

.side-logo {
    margin-bottom: 22px;
    padding: 0 10px 16px;
    border-bottom: 1px solid #334155;
}

.side-logo a {
    color: #f8fafc;
    font-size: 1.15rem;
    font-weight: 800;
    text-decoration: none;
}

.side-menu {
    display: grid;
    gap: 5px;
}

.side-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 7px;
    color: #94a3b8;
    text-decoration: none;
}

.side-menu a:hover,
.side-menu a.active {
    color: #f8fafc;
    background: rgba(59, 130, 246, 0.18);
}

.side-menu a.active {
    box-shadow: inset 3px 0 #38bdf8;
}

.side-menu a.side-menu-alert {
    color: #d1fae5;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.22));
    box-shadow:
        inset 3px 0 rgba(34, 197, 94, 0.95),
        0 0 14px rgba(34, 197, 94, 0.16);
}

.side-menu a.side-menu-alert.active {
    box-shadow:
        inset 3px 0 #38bdf8,
        0 0 16px rgba(34, 197, 94, 0.20);
}

.side-menu a.side-menu-alert::after {
    content: attr(data-alert-count);
    margin-left: auto;
    min-width: 17px;
    height: 17px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(134, 239, 172, 0.85);
    border-radius: 999px;
    background: rgba(22, 101, 52, 0.72);
    color: #bbf7d0;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
}

.side-menu a.side-menu-alert.side-menu-alert-danger {
    color: #fecaca;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.20), rgba(15, 23, 42, 0.22));
    box-shadow:
        inset 3px 0 rgba(239, 68, 68, 0.95),
        0 0 14px rgba(239, 68, 68, 0.20);
}

.side-menu a.side-menu-alert.side-menu-alert-danger.active {
    box-shadow:
        inset 3px 0 #38bdf8,
        0 0 16px rgba(239, 68, 68, 0.24);
}

.side-menu a.side-menu-alert.side-menu-alert-danger::after {
    border-color: rgba(252, 165, 165, 0.90);
    background: rgba(153, 27, 27, 0.82);
    color: #fee2e2;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.52);
}

.side-menu a.side-menu-world-boss-active {
    color: #fff1f2;
    background: linear-gradient(90deg, rgba(190, 24, 93, 0.28), rgba(88, 28, 135, 0.15));
    box-shadow:
        inset 3px 0 rgba(251, 113, 133, 0.98),
        0 0 18px rgba(244, 63, 94, 0.24);
}

.side-menu a.side-menu-world-boss-active::after {
    min-width: 45px;
    padding: 0 6px;
    border-color: rgba(253, 164, 175, 0.95);
    background: rgba(159, 18, 57, 0.9);
    color: #fff1f2;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.65);
    animation: world-boss-nav-pulse 1.6s ease-in-out infinite;
}

.side-menu a.side-menu-catchup::after {
    min-width: 43px;
    padding: 0 6px;
}

.side-menu a.side-menu-catchup:not(.side-menu-alert-danger) {
    border-color: rgba(34, 197, 94, 0.42);
}

.side-menu a.side-menu-catchup.side-menu-alert-danger::after {
    min-width: 48px;
}

@keyframes world-boss-nav-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(244, 63, 94, 0.42); }
    50% { box-shadow: 0 0 17px rgba(251, 113, 133, 0.92); }
}

.side-menu-icon {
    display: inline-grid;
    width: 22px;
    place-items: center;
    color: #60a5fa;
}

.side-menu .side-menu-logout {
    margin-top: 18px;
    border-top: 1px solid #334155;
    border-radius: 0;
}

.side-menu-logout-form {
    margin: 0;
}

.side-menu-logout-form .side-menu-logout {
    width: 100%;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.side-online-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    width: calc(100% - 16px);
    margin: 0 8px 10px;
    padding: 7px 9px;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    color: #94a3b8;
    font-size: 0.75rem;
    text-decoration: none;
}

.side-online-count strong {
    color: #86efac;
    font-variant-numeric: tabular-nums;
}

.side-player-count {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}

.side-online-count .side-player-count strong {
    margin-left: 0;
}

.side-player-count-divider {
    color: #4f6682;
}

.side-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.85);
}

.revision-button {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: none;
}

.side-revision-button {
    display: inline-flex;
    margin: 4px 12px 0;
    text-align: left;
}

.side-legal-links {
    display: grid;
    gap: 8px;
    margin: 10px 12px 0;
}

.side-legal-links a {
    width: fit-content;
    color: #94a3b8;
    font-size: 0.82rem;
    text-decoration: none;
}

.side-legal-links a:hover,
.side-legal-links a:focus {
    color: #67e8f9;
    text-decoration: underline;
}

.revision-button:hover {
    color: #94a3b8;
    background: transparent;
    text-decoration: underline;
}

.revision-modal[hidden] {
    display: none;
}

.revision-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 26px;
}

.revision-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(3px);
}

.revision-modal-panel {
    position: relative;
    width: min(1180px, calc(100vw - 48px));
    max-height: min(760px, calc(100vh - 52px));
    overflow-y: auto;
    padding: 16px 18px;
    border: 1px solid #334155;
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 34%),
        #0f172a;
    color: #dbe7f7;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.62);
}

.revision-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.88);
    color: #e5e7eb;
}

.revision-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 12px;
}

.revision-pager.top {
    margin-bottom: 10px;
}

.revision-pager.bottom {
    margin-top: 14px;
}

.revision-pager button,
.revision-pager strong {
    min-width: 28px;
    height: 25px;
    padding: 0 8px;
    border: 1px solid #334155;
    border-radius: 5px;
    background: #111827;
    color: #93c5fd;
    font-size: 12px;
}

.revision-pager button:hover:not(:disabled) {
    border-color: #38bdf8;
    color: #e0f2fe;
    background: rgba(47, 125, 246, 0.18);
}

.revision-pager button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.revision-pager strong {
    display: inline-grid;
    place-items: center;
    border-color: #38bdf8;
    border-radius: 5px;
    color: #e0f2fe;
    background: rgba(47, 125, 246, 0.18);
}

.revision-entry {
    position: relative;
    min-height: 270px;
    padding: 14px 44px 12px 12px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.58);
}

.revision-entry h2 {
    margin: 0 0 10px;
    color: #67e8f9;
    font-size: 1.1rem;
}

.revision-notice {
    margin: 0 auto 14px;
    padding: 10px 14px;
    border: 1px solid #ef4444;
    border-radius: 8px;
    color: #fecaca;
    background: rgba(127, 29, 29, 0.32);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.12);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

.revision-entry h3 {
    margin: 16px 0 5px;
    color: #f8fafc;
    font-size: 0.92rem;
}

.revision-entry ul {
    margin: 0;
    padding-left: 20px;
    color: #cbd5e1;
    line-height: 1.45;
}

.revision-entry li + li {
    margin-top: 3px;
}

.revision-posted {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 0.75rem;
}

.revision-ghost-teaser {
    position: absolute;
    right: 12px;
    bottom: 9px;
    font-size: 21px;
    opacity: 0.62;
    filter: drop-shadow(0 0 7px rgba(196, 181, 253, 0.42));
    transition: opacity 160ms ease, transform 160ms ease;
}

.revision-entry:hover .revision-ghost-teaser {
    opacity: 0.92;
    transform: translateY(-2px);
}

.has-side-navigation .global-hud {
    left: 220px;
    right: 0;
    width: auto;
    margin-left: 0;
}

.has-side-navigation .page {
    width: calc(100% - 470px);
    max-width: none;
    margin: 30px auto 30px 220px;
    min-width: 0;
}

.has-side-navigation .site-footer {
    width: calc(100% - 470px);
    margin-left: 220px;
}

.has-side-navigation {
    padding-top: var(--global-hud-height, 78px);
    padding-bottom: 285px;
    min-width: 520px;
}

.global-hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 95;
    min-height: 44px;
    border-bottom: 1px solid #334155;
    background: rgba(2, 6, 23, 0.97);
    backdrop-filter: blur(8px);
    overflow-x: auto;
    overflow-y: hidden;
}

.global-hud-values {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: max-content;
    max-width: none;
    margin: 0;
    padding: 7px 14px;
    min-height: 24px;
    font-size: 0.82rem;
    box-sizing: border-box;
}

.global-hud-character {
    display: block;
    flex: 0 0 auto;
    min-width: 78px;
    padding-right: 8px;
    overflow: hidden;
    color: #f8fafc;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-hud-character:hover {
    color: #67e8f9;
}

.global-hud-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 1fr);
    flex: 0 0 auto;
    gap: 8px;
    min-width: 0;
}

.global-hud-group span,
.global-hud-group .global-hud-economy-link {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(58px, 1fr);
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    color: #94a3b8;
    text-decoration: none;
    white-space: nowrap;
}

.global-hud-group strong {
    display: inline-block;
    min-width: 58px;
    margin-left: 0;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.global-hud-skills,
.global-hud-economy {
    grid-auto-columns: max-content;
    gap: 6px;
}

.global-hud-skills .global-hud-skill-action,
.global-hud-economy span,
.global-hud-economy .global-hud-economy-link {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    grid-template-columns: none;
    padding: 3px 9px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.global-hud-skills .global-hud-skill-action {
    min-width: 88px;
}

.global-hud-skill-action {
    margin: 0;
    font: inherit;
    line-height: inherit;
    color: #94a3b8;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.global-hud-skill-action:disabled,
.global-hud-skill-action.is-loading {
    cursor: wait;
    opacity: 0.65;
}

.global-hud-skills strong,
.global-hud-economy strong {
    min-width: 0;
    text-align: left;
}

.global-hud-economy {
    grid-auto-columns: max-content;
}

.global-hud-economy span,
.global-hud-economy .global-hud-economy-link {
    min-width: 0;
}

.global-hud-economy strong {
    min-width: 0;
}

.global-hud-primary strong {
    color: #67e8f9;
}

.global-hud-gold strong {
    color: #facc15;
}

.global-hud-crystals strong {
    color: #c084fc;
}

.global-hud-mobile-activity {
    display: none;
}

.global-notification-shell {
    position: fixed;
    top: calc(7px + var(--safe-area-top));
    right: calc(14px + var(--safe-area-right));
    z-index: 30001;
    flex: 0 0 auto;
    margin-left: 0;
}

.global-notification-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.82);
    color: #bfdbfe;
    font-size: 15px;
    line-height: 1;
}

.global-notification-shell.has-unread .global-notification-toggle {
    border-color: rgba(34, 211, 238, 0.7);
    color: #67e8f9;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.16);
}

.global-notification-toggle strong {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    padding: 2px 5px;
    border: 1px solid #06111f;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
}

.global-notification-panel {
    position: fixed;
    top: calc(44px + var(--safe-area-top));
    right: calc(278px + var(--safe-area-right));
    z-index: 30000;
    width: min(360px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid #2b3a57;
    border-radius: 14px;
    background: rgba(8, 13, 26, 0.98);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}

.global-notification-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    border-bottom: 1px solid #1f2d44;
}

.global-notification-panel-head strong {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.character-equipment-slot > span {
    display: block;
    margin-top: 3px;
    color: #7dd3fc;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.global-notification-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.global-notification-panel-head button {
    padding: 4px 8px;
    border: 1px solid #334155;
    border-radius: 7px;
    background: #1e293b;
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 800;
}

.global-notification-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 9px 10px;
    border-bottom: 1px solid #1f2d44;
    background: rgba(15, 23, 42, 0.78);
}

.global-notification-settings label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid #273549;
    border-radius: 999px;
    color: #cbd5e1;
    background: #0b1220;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.global-notification-settings input {
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: #22d3ee;
}

.global-notification-settings span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-notification-settings .global-notification-tone {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    border-radius: 9px;
    cursor: default;
}

.global-notification-settings .global-notification-tone select {
    width: 100%;
    min-width: 0;
    padding: 3px 26px 3px 8px;
    border: 1px solid #334155;
    border-radius: 7px;
    color: #e2e8f0;
    background: #111c2d;
    font: inherit;
    cursor: pointer;
}

.global-notification-settings .global-notification-volume {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) 38px;
    border-radius: 9px;
    cursor: default;
}

.global-notification-settings .global-notification-volume input[type="range"] {
    width: 100%;
    height: 16px;
    accent-color: #22d3ee;
    cursor: pointer;
}

.global-notification-volume output {
    color: #67e8f9;
    text-align: right;
}

.global-notification-desktop-status {
    grid-column: 1 / -1;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.35;
    text-align: center;
}

.global-notification-list {
    display: grid;
    max-height: min(360px, 55vh);
    overflow-y: auto;
}

.global-notification-list p {
    margin: 0;
    padding: 14px;
    color: #94a3b8;
}

.global-notification-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.global-notification-row.unread {
    background: rgba(34, 211, 238, 0.08);
}

.global-notification-row.read {
    opacity: 0.72;
}

.global-notification-item {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 11px 10px 11px 13px;
    color: #dbeafe;
    text-decoration: none;
}

.global-notification-row:hover {
    background: rgba(37, 99, 235, 0.14);
}

.global-notification-delete {
    align-self: start;
    margin: 9px 9px 0 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    color: #94a3b8;
    font-size: 16px;
    font-weight: 900;
    line-height: 18px;
}

.global-notification-delete:hover {
    border-color: rgba(248, 113, 113, 0.7);
    background: rgba(127, 29, 29, 0.8);
    color: #fecaca;
}

.global-notification-type {
    color: #67e8f9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.global-notification-item strong {
    color: #ffffff;
    font-size: 13px;
}

.global-notification-item small,
.global-notification-item em {
    color: #9fb0c6;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

.global-action {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    text-decoration: none;
}

.global-action:hover {
    background: transparent;
}

.global-action-track {
    position: relative;
    height: 20px;
    overflow: hidden;
    border-top: 1px solid #475569;
    background: #0f172a;
}

.global-action.inactive {
    pointer-events: none;
}

.global-action.inactive .global-action-track {
    border-top-color: transparent;
    background: transparent;
}

.global-action.inactive .global-action-fill,
.global-action.inactive .global-action-track span {
    opacity: 0;
}

.global-action-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #9f2d22, #d17a24);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.global-action-track span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-shadow: 0 1px 2px #000;
}

.global-action-next {
    display: block;
    padding: 3px 6px;
    background: #0d1827;
    color: #9fe8ff;
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: center;
}

.global-action-next[hidden] {
    display: none;
}

.action-next-limit {
    display: block;
    margin: 4px 0 8px;
    color: #9fe8ff;
    font-size: 0.75rem;
}

.action-next-limit[hidden] {
    display: none;
}

.active-buffs-panel {
    position: fixed;
    top: calc(var(--global-hud-height, 72px) + 12px);
    right: calc(12px + var(--safe-area-right));
    z-index: 45;
    width: 230px;
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #293852;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
}

.active-buffs-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.active-buffs-title span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.active-buffs-title strong {
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #1d4ed8;
    color: #ffffff;
    text-align: center;
}

.active-buffs-panel p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
}

.active-buffs-list {
    display: grid;
    gap: 8px;
}

.active-buff-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px;
    border: 1px solid #334155;
    border-radius: 9px;
    background: #0f172a;
    cursor: help;
}

.active-buff-entry.active-buff-quest {
    border-color: #7c3aed;
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.22), transparent 42%),
        #0f172a;
}

.active-buff-entry.active-buff-global {
    border-color: #22c55e;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.2), transparent 42%),
        #0f172a;
}

.active-buff-entry.active-buff-premium {
    border-color: #f59e0b;
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.2), transparent 42%),
        #0f172a;
}

.active-buff-entry.active-buff-catch-up {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    border-color: rgba(45, 212, 191, 0.65);
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.24), transparent 45%),
        #0f172a;
}

.active-buff-entry.active-buff-catch-up em {
    justify-self: start;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid rgba(45, 212, 191, 0.38);
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.16);
    color: #99f6e4;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
}

.active-buff-entry.expired {
    opacity: 0.45;
}

.active-buff-entry strong {
    display: block;
    color: #f8fafc;
    font-size: 13px;
}

.active-buff-entry span {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
}

.active-buff-entry span b {
    color: #dbeafe;
}

.active-buff-entry em {
    flex: 0 0 auto;
    color: #c084fc;
    font-style: normal;
    font-weight: 900;
}

.floating-active-buff-tooltip {
    display: none;
    position: fixed;
    z-index: 10000;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px;
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: 12px;
    background: #08111f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
    color: #dbeafe;
    pointer-events: none;
}

.floating-active-buff-tooltip.visible {
    display: block;
}

.floating-active-buff-tooltip strong {
    display: block;
    margin: 0 0 5px;
    color: #dbeafe;
    font-size: 13px;
    font-weight: 900;
}

.floating-active-buff-tooltip p {
    margin: 0;
    color: #dbeafe;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.global-dungeon-queue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 22px;
    padding: 2px 12px;
    border-top: 1px solid #475569;
    color: #e9d5ff;
    background: linear-gradient(90deg, #312e81, #581c87);
    font-size: 12px;
    text-decoration: none;
}

.global-dungeon-queue > span {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 1px solid #a78bfa;
    border-radius: 50%;
    color: #ddd6fe;
    font-size: 9px;
    font-weight: 900;
}

.global-dungeon-queue strong {
    color: inherit;
    font-size: inherit;
}

.global-dungeon-queue:hover {
    color: #ffffff;
    background: linear-gradient(90deg, #3730a3, #6b21a8);
}

.global-dungeon-queue.ready {
    color: #d1fae5;
    background: linear-gradient(90deg, #065f46, #047857);
}

.global-dungeon-queue.ready > span {
    border-color: #6ee7b7;
    color: #d1fae5;
}

.global-dungeon-queue.inactive {
    display: none;
}

.active-buff-entry.active-buff-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    border-color: rgba(163, 230, 53, 0.58);
    background:
        radial-gradient(circle at top right, rgba(126, 34, 206, 0.25), transparent 46%),
        radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.13), transparent 48%),
        #0f172a;
}

.active-buff-entry.active-buff-event > div {
    min-width: 0;
}

.active-buff-entry.active-buff-event > div > strong {
    font-size: 12px;
    line-height: 1.25;
}

.active-buff-entry.active-buff-event em {
    justify-self: start;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid rgba(192, 132, 252, 0.34);
    border-radius: 999px;
    background: rgba(88, 28, 135, 0.22);
    color: #e9d5ff;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
}

@media (max-width: 1180px) {
    .global-notification-panel {
        right: calc(12px + var(--safe-area-right));
    }
}

@media (max-width: 800px) {
    .global-hud-values {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 4px;
        padding: 6px 10px;
        font-size: 0.72rem;
    }

    .global-hud-character {
        flex-basis: auto;
    }

    .global-hud-group {
        gap: 3px 10px;
    }

    .active-buffs-panel {
        position: fixed;
        top: calc(58px + var(--safe-area-top));
        right: calc(8px + var(--safe-area-right));
        width: 190px;
        max-height: min(34vh, 240px);
        margin: 0;
        padding: 9px;
    }

    .global-notification-panel {
        top: calc(44px + var(--safe-area-top));
        right: calc(8px + var(--safe-area-right));
        width: min(360px, calc(100vw - 16px));
    }

    body.notifications-open .active-buffs-panel {
        display: none;
    }

    body:has(.global-notification-panel:not([hidden])) .active-buffs-panel {
        display: none;
    }

    .has-side-navigation {
        padding-bottom: 330px;
    }
}

.button-link {
    display: inline-block;
    background: #2563eb;
    color: #ffffff;
    border-radius: 6px;
    padding: 10px 14px;
    text-decoration: none;
    font-weight: bold;
}

.button-link:hover {
    background: #1d4ed8;
    color: #ffffff;
}

.button-secondary {
    background: #475569;
}

.button-secondary:hover {
    background: #334155;
}

.button-danger {
    background: #b91c1c;
}

.button-danger:hover {
    background: #991b1b;
}

.button-market {
    background: #7c3aed;
}

.button-guild-storage {
    background: #0f766e;
}

.button-guild-storage:hover:not(:disabled) {
    background: #0d9488;
}

input {
    width: 100%;
    max-width: 360px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #e5e7eb;
}

.message-success {
    background: #064e3b;
    border: 1px solid #10b981;
    color: #d1fae5;
    padding: 12px;
    border-radius: 8px;
}

.message-error {
    background: #7f1d1d;
    border: 1px solid #ef4444;
    color: #fee2e2;
    padding: 12px;
    border-radius: 8px;
}

.flash-toast-overlay {
    position: fixed;
    right: 18px;
    bottom: calc(var(--persistent-chat-message-height, 150px) + 112px);
    z-index: 90;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.flash-toast {
    position: relative;
    padding: 12px 42px 12px 14px;
    border-radius: 10px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.38);
    color: #ffffff;
    font-weight: 700;
    pointer-events: none;
    transition: opacity 250ms ease, transform 250ms ease;
}

.global-exp {
    height: 14px;
    background: #050b16;
    border-top: 1px solid #182438;
}

.global-exp.inactive {
    opacity: 0;
    pointer-events: none;
}

.global-exp-track {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.global-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #15803d, #22c55e);
}

.global-exp-track span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px #000000;
    pointer-events: none;
}

.flash-toast.success {
    border: 1px solid #10b981;
    background: rgba(6, 78, 59, 0.96);
}

.flash-toast.error {
    border: 1px solid #ef4444;
    background: rgba(127, 29, 29, 0.96);
}

.flash-toast.fade-out {
    opacity: 0;
    transform: translateY(8px);
}

.flash-toast button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: inherit;
    background: rgba(255, 255, 255, 0.12);
    line-height: 1;
    pointer-events: auto;
}

.game-update-notice {
    position: fixed;
    right: calc(18px + var(--safe-area-right));
    bottom: calc(var(--persistent-chat-message-height, 150px) + 126px + var(--safe-area-bottom));
    z-index: 120;
    display: block;
    width: min(380px, calc(100vw - 32px));
    padding: 0;
    pointer-events: auto;
}

.game-update-notice-box {
    width: 100%;
    padding: 16px;
    border: 1px solid #38bdf8;
    border-radius: 16px;
    background: linear-gradient(145deg, #101b2e, #17243a);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    color: #e5f3ff;
    text-align: left;
    pointer-events: auto;
}

.game-update-notice-box strong {
    display: block;
    margin-bottom: 8px;
    color: #67e8f9;
    font-size: 1.25rem;
}

.game-update-notice-box p {
    margin: 0 0 16px;
    color: #cbd5e1;
}

.game-update-notice-box button {
    position: relative;
    z-index: 2;
    width: 100%;
    border: 0;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
    pointer-events: auto;
}

.world-boss-live-notice {
    position: fixed;
    right: calc(18px + var(--safe-area-right));
    bottom: calc(var(--persistent-chat-message-height, 150px) + 126px + var(--safe-area-bottom));
    z-index: 121;
    width: min(380px, calc(100vw - 32px));
    animation: world-boss-notice-in 220ms ease-out;
}

.world-boss-live-notice.with-game-update {
    bottom: calc(var(--persistent-chat-message-height, 150px) + 326px + var(--safe-area-bottom));
}

.world-boss-live-notice-box {
    position: relative;
    padding: 16px;
    border: 1px solid rgba(251, 113, 133, 0.9);
    border-radius: 16px;
    color: #fff1f2;
    background: radial-gradient(circle at top right, rgba(190, 24, 93, 0.3), transparent 48%), linear-gradient(145deg, #171226, #111827);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 24px rgba(244, 63, 94, 0.18);
}

.world-boss-live-notice-box > span {
    display: block;
    margin-bottom: 5px;
    color: #fda4af;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.world-boss-live-notice-box > strong {
    display: block;
    padding-right: 30px;
    font-size: 1.2rem;
}

.world-boss-live-notice-box p {
    margin: 8px 0 14px;
    color: #d7c7d5;
}

.world-boss-live-notice-box > a {
    display: grid;
    min-height: 40px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    font-weight: 850;
    text-decoration: none;
    background: linear-gradient(90deg, #be123c, #7c3aed);
}

.world-boss-live-notice-close {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(253, 164, 175, .38);
    border-radius: 999px;
    color: #fecdd3;
    background: rgba(15, 23, 42, .72);
}

@keyframes world-boss-notice-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Guild */
.guild-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.guild-heading h1,
.guild-heading p {
    margin: 0;
}

.guild-heading p,
.guild-list-row span,
.guild-list-row small,
.guild-subpanel h3 {
    color: #9fb0c6;
}

.guild-badge {
    display: grid;
    gap: 4px;
    min-width: 180px;
    padding: 12px;
    border: 1px solid #2f7df6;
    border-radius: 10px;
    background: rgba(47, 125, 246, 0.12);
}

.guild-badge span {
    color: #67e8f9;
    font-weight: 700;
}

.guild-badge strong {
    color: #ffffff;
}

.guild-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.guild-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid #2d3a50;
    border-radius: 8px;
    color: #c9d6e8;
    background: #111b2a;
    text-decoration: none;
}

.guild-tabs a:hover,
.guild-tabs a.active {
    color: #ffffff;
    border-color: #2f7df6;
    background: rgba(47, 125, 246, 0.16);
}

.guild-tabs a.has-guild-tab-indicator {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.75);
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 52%),
        #111b2a;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.08);
}

.guild-tabs a.has-guild-tab-indicator.active,
.guild-tabs a.has-guild-tab-indicator:hover {
    color: #ffffff;
    border-color: #f59e0b;
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.28), transparent 52%),
        rgba(47, 125, 246, 0.16);
}

.guild-tabs a.guild-tab-indicator-ready {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.75);
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.20), transparent 52%),
        #0d1f1a;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.10);
}

.guild-tabs a.guild-tab-indicator-ready.active,
.guild-tabs a.guild-tab-indicator-ready:hover {
    color: #ffffff;
    border-color: #22c55e;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.32), transparent 52%),
        rgba(22, 101, 52, 0.34);
}

.guild-tabs a.guild-tab-indicator-ready .guild-tab-badge {
    color: #052e16;
    background: #22c55e;
}

.guild-tabs a.guild-tab-indicator-missing {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.78);
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.22), transparent 52%),
        #24131a;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.12);
}

.guild-tabs a.guild-tab-indicator-missing.active,
.guild-tabs a.guild-tab-indicator-missing:hover {
    color: #ffffff;
    border-color: #ef4444;
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.34), transparent 52%),
        rgba(127, 29, 29, 0.36);
}

.guild-tabs a.guild-tab-indicator-missing .guild-tab-badge {
    color: #ffffff;
    background: #dc2626;
}

.guild-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #111827;
    background: #fbbf24;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
}

.guild-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
    margin-top: 16px;
}

.guild-panel {
    min-width: 0;
}

.guild-boss-participants-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.guild-boss-participants-summary::-webkit-details-marker {
    display: none;
}

.guild-boss-participants-summary h2 {
    margin: 0;
    font-size: 1rem;
}

.guild-boss-participants-count,
.guild-boss-participants-note {
    color: #9fb0c6;
    font-size: 12px;
    font-weight: 400;
}

.guild-boss-participants-toggle {
    flex-shrink: 0;
    color: #7dd3fc;
    font-size: 12px;
}

.guild-boss-participants[open] .when-closed,
.guild-boss-participants:not([open]) .when-open {
    display: none;
}

.guild-boss-participants-summary:focus-visible,
[data-guild-boss-participants-table]:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 3px;
}

.guild-form {
    display: grid;
    gap: 12px;
}

.guild-form label {
    display: grid;
    gap: 6px;
    color: #9fb0c6;
    font-size: 12px;
    text-transform: uppercase;
}

.guild-form input {
    max-width: none;
}

.guild-form select {
    width: 100%;
    max-width: none;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #e5e7eb;
}

.guild-deposit-form {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    margin-top: 14px;
}

.guild-bank-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.guild-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.guild-overview-card {
    display: grid;
    gap: 6px;
    min-height: 104px;
}

.guild-overview-card span {
    color: #93c5fd;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.guild-overview-card strong {
    color: #ffffff;
    font-size: 1.55rem;
    line-height: 1;
}

.guild-overview-card small {
    color: #9fb3cd;
}

.guild-bank-grid div,
.guild-upgrade-card {
    border: 1px solid #223049;
    border-radius: 9px;
    background: #111b2a;
}

.guild-bank-grid div {
    display: grid;
    gap: 4px;
    padding: 10px;
}

.guild-bank-select-card {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.guild-bank-select-card:hover,
.guild-bank-select-card:focus-visible {
    border-color: #2f7df6;
    background: rgba(47, 125, 246, 0.12);
    outline: none;
}

.guild-bank-select-card.is-selected {
    border-color: #22d3ee;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.16), transparent 54%),
        #0e1c2e;
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.08);
}

.guild-bank-grid span,
.guild-upgrade-card span,
.guild-upgrade-card small {
    color: #9fb0c6;
}

.guild-bank-grid strong {
    color: #ffffff;
}

.guild-upgrade-list {
    display: grid;
    gap: 8px;
}

.guild-upgrade-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.guild-upgrade-card > div {
    display: grid;
    gap: 4px;
}

.guild-upgrade-card strong {
    color: #ffffff;
}

.guild-upgrade-effect-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0;
}

.guild-upgrade-effect-summary span {
    padding: 4px 8px;
    border: 1px solid #2d3a50;
    border-radius: 999px;
    background: rgba(7, 16, 31, 0.72);
    color: #b8c8dc;
    font-size: 0.8rem;
}

.guild-upgrade-effect-summary span strong {
    color: #ffffff;
}

.guild-upgrade-effect-summary .guild-upgrade-effect-next {
    border-color: rgba(34, 197, 94, 0.48);
    background: rgba(34, 197, 94, 0.09);
    color: #bbf7d0;
}

.guild-upgrade-effect-summary .guild-upgrade-effect-next strong {
    color: #4ade80;
}

[data-guild-qol-page] .guild-bank-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.guild-qol-cost {
    display: grid;
    gap: 3px;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 9px 11px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: 8px;
    background: rgba(8, 145, 178, 0.08);
}

.guild-qol-cost > span {
    color: #67e8f9;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.guild-qol-cost > strong {
    color: #ffffff;
    font-size: 0.96rem;
}

.guild-qol-cost > small {
    color: #9fb3cd;
}

.guild-qol-cost > em {
    margin-top: 3px;
    color: #86efac;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 700;
}

.guild-goal-panel {
    border-color: rgba(34, 211, 238, 0.35);
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.13), rgba(17, 24, 39, 0.95));
}

.guild-goal-hint {
    margin: 6px 0 0;
    color: #8aa3c3;
}

.guild-goal-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #263650;
    border-radius: 10px;
    background: #0b1424;
}

.guild-goal-summary > div {
    display: grid;
    gap: 4px;
}

.guild-goal-summary strong {
    color: #67e8f9;
    font-size: 1.05rem;
}

.guild-goal-summary span {
    color: #adc0d8;
}

.guild-goal-summary.is-ready {
    border-color: rgba(34, 197, 94, 0.75);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.12);
}

.guild-goal-summary.is-ready > span {
    color: #22c55e;
    font-weight: 800;
}

.guild-goal-upgrade-button {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #052e16;
}

.guild-goal-upgrade-button:hover {
    filter: brightness(1.08);
}

.guild-goal-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.guild-goal-resource {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid #223049;
    border-radius: 10px;
    background: rgba(7, 16, 31, 0.82);
}

.guild-goal-resource.is-complete {
    border-color: rgba(34, 197, 94, 0.5);
}

.guild-goal-resource-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #dbeafe;
    font-size: 0.9rem;
}

.guild-goal-resource-head span,
.guild-goal-resource small {
    color: #9fb0c6;
}

.guild-goal-progress {
    height: 9px;
    overflow: hidden;
    border: 1px solid #2d3a50;
    border-radius: 999px;
    background: #020617;
}

.guild-goal-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
}

.guild-goal-resource.is-complete .guild-goal-progress span {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.guild-upgrade-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.guild-goal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(34, 211, 238, 0.55);
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.16);
    color: #67e8f9;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.guild-task-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #223049;
    border-radius: 10px;
    background: #111b2a;
}

.guild-task-board-title {
    margin-top: 18px;
}

.guild-task-offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.guild-task-offer {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #0f1b2b;
}

.guild-task-offer-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #bfdbfe;
    font-size: 13px;
}

.guild-task-offer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.guild-task-offer-actions form,
.guild-task-offer-actions button {
    width: 100%;
    margin: 0;
}

.guild-task-reroll-modal .chat-wire-confirm-panel {
    width: min(560px, 100%);
    border-color: rgba(167, 139, 250, 0.58);
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.16), transparent 44%),
        #0f172a;
}

.guild-task-reroll-modal .guild-task-reroll-icon {
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
}

.guild-task-reroll-summary {
    grid-template-columns: minmax(0, 1.35fr) minmax(110px, 0.75fr) minmax(150px, 1fr);
}

.guild-task-reroll-summary strong[data-guild-task-reroll-outcome] {
    color: #67e8f9;
}

@media (max-width: 600px) {
    .guild-task-reroll-summary {
        grid-template-columns: 1fr;
    }
}

/* Today overview */
.today-heading p {
    margin-top: 6px;
}

.today-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.today-customize-toggle {
    min-width: 110px;
}

.today-customize-panel {
    margin-bottom: 16px;
    overflow: hidden;
    border-color: rgba(34, 211, 238, 0.32);
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.1), transparent 44%),
        #0d192b;
}

.today-customize-panel[hidden],
.today-stat-grid[hidden],
.today-grid[hidden],
.today-stat-card[hidden],
.today-card[hidden] {
    display: none;
}

.today-customize-heading h2 {
    margin: 3px 0 0;
}

.today-customize-heading p {
    margin: 6px 0 0;
    color: #9fb0c6;
}

.today-customize-groups {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
    gap: 14px;
    margin-top: 16px;
}

.today-customize-groups fieldset {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid #26364f;
    border-radius: 10px;
    background: rgba(7, 17, 31, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.today-customize-groups legend {
    padding: 0 6px;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.today-customize-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 8px;
}

.today-customize-options label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: rgba(15, 29, 49, 0.76);
    color: #dbeafe;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.today-customize-options label:hover {
    border-color: rgba(103, 232, 249, 0.48);
    background: rgba(18, 40, 66, 0.92);
}

.today-customize-options label:has(input:checked) {
    border-color: rgba(34, 211, 238, 0.56);
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.2), rgba(15, 29, 49, 0.88));
    box-shadow: inset 3px 0 0 #22d3ee;
}

.today-customize-options input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    max-width: none;
    height: 18px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    accent-color: #0891b2;
}

.today-customize-options label > span {
    display: block;
    min-width: 0;
    color: #dbeafe;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.today-customize-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.today-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.today-stat-card {
    min-height: auto;
    padding: 12px 14px;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.08), transparent 58%),
        #0b1626;
    border-color: #26364f;
}

.today-stat-card span {
    display: block;
    color: #9fb0c6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.today-stat-card strong {
    display: block;
    margin-top: 5px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.15;
}

.today-stat-card strong.gold {
    color: #facc15;
}

.today-stat-card strong.crystal {
    color: #c084fc;
}

.today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}

.today-grid.secondary {
    margin-top: 16px;
}

.today-card {
    display: grid;
    gap: 10px;
    color: #dbeafe;
    text-decoration: none;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.1), transparent 40%),
        #111827;
    border-color: #26364f;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.today-card:hover,
.today-card:focus-visible {
    border-color: #38bdf8;
    transform: translateY(-1px);
}

.today-card.ready {
    border-color: #22c55e;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.18), transparent 42%),
        #102033;
}

.today-card.active {
    border-color: #f59e0b;
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 42%),
        #111827;
}

.today-card-label {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.today-card strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.2;
}

.today-card small {
    color: #9fb0c6;
}

@media (max-width: 1100px) {
    .today-customize-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .today-heading-actions {
        width: 100%;
        justify-content: space-between;
    }

    .today-customize-toggle {
        flex: 1 1 auto;
    }

    .today-customize-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tutorial-panel {
    margin: 0 0 16px;
    border-color: rgba(34, 211, 238, 0.35);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.96));
}

.tutorial-panel-header,
.tutorial-step-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tutorial-panel-header h2 {
    margin: 4px 0 6px;
}

.tutorial-panel-header p,
.tutorial-step-layout p {
    margin: 0;
    color: #c7d7f2;
}

.tutorial-kicker,
.tutorial-path-card span {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tutorial-path-badge,
.tutorial-item-line {
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.82);
    padding: 12px 16px;
    min-width: 150px;
}

.tutorial-path-badge span,
.tutorial-item-line small {
    display: block;
    color: #9fb0c6;
    font-size: 13px;
}

.tutorial-path-badge strong,
.tutorial-item-line span {
    display: block;
    margin-top: 3px;
    font-weight: 900;
}

.tutorial-path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.tutorial-path-card {
    border: 1px solid rgba(59, 130, 246, 0.32);
    border-radius: 14px;
    background: rgba(2, 8, 23, 0.55);
    padding: 15px;
}

.tutorial-path-card strong {
    display: block;
    color: #fff;
    font-size: 17px;
}

.tutorial-path-card p {
    color: #c7d7f2;
    min-height: 54px;
}

.tutorial-path-card button,
.tutorial-step-layout button,
.tutorial-actions .button {
    width: 100%;
    margin-top: 12px;
}

.tutorial-step-layout {
    margin-top: 16px;
}

.tutorial-step-layout > div:first-child {
    min-width: 0;
    flex: 1;
}

.tutorial-step-layout form,
.tutorial-actions {
    min-width: 220px;
}

.tutorial-actions {
    display: grid;
    gap: 9px;
}

.tutorial-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.guild-tabs a > span,
.guild-tabs a > .guild-tab-badge {
    pointer-events: none;
}

.tutorial-primary-cta {
    border-color: rgba(34, 211, 238, 0.9);
    color: #eaffff;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2), 0 0 24px rgba(34, 211, 238, 0.22);
    animation: tutorialCtaGlow 1.45s ease-in-out infinite;
}

.tutorial-primary-cta:hover {
    color: #fff;
    border-color: #67e8f9;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 34px rgba(34, 211, 238, 0.36);
}

.tutorial-guide {
    position: relative;
    z-index: 95;
}

.tutorial-floating-tracker {
    position: fixed;
    right: calc(22px + var(--safe-area-right));
    bottom: calc(var(--persistent-chat-message-height, 150px) + 138px + var(--safe-area-bottom));
    z-index: 96;
    display: grid;
    gap: 3px;
    width: min(280px, calc(100vw - 34px));
    padding: 13px 15px;
    text-align: left;
    border: 1px solid rgba(34, 211, 238, 0.58);
    border-radius: 16px;
    color: #eaf6ff;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.16), transparent 42%),
        linear-gradient(135deg, rgba(8, 15, 28, 0.97), rgba(15, 23, 42, 0.97));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), 0 0 22px rgba(34, 211, 238, 0.12);
}

.tutorial-floating-tracker:hover {
    transform: translateY(-1px);
    border-color: #67e8f9;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.46), 0 0 28px rgba(34, 211, 238, 0.18);
}

.tutorial-floating-tracker strong {
    font-size: 15px;
    line-height: 1.2;
}

.tutorial-floating-tracker small {
    color: #b7c8e4;
}

.tutorial-mini-progress {
    position: relative;
    overflow: hidden;
    height: 7px;
    margin-top: 6px;
    border: 1px solid rgba(59, 130, 246, 0.42);
    border-radius: 999px;
    background: rgba(2, 8, 23, 0.8);
}

.tutorial-mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #22c55e);
    transition: width 0.22s ease;
}

.tutorial-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.tutorial-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.tutorial-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.76);
    backdrop-filter: blur(7px);
}

.tutorial-modal-panel {
    position: relative;
    z-index: 1;
    width: min(980px, calc(100vw - 34px));
    max-height: min(86vh, 820px);
    overflow: auto;
    padding: 22px;
    border: 1px solid rgba(34, 211, 238, 0.38);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98));
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.58);
}

.tutorial-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    background: rgba(71, 85, 105, 0.85);
}

.tutorial-hint-box {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(251, 191, 36, 0.38);
    border-radius: 12px;
    color: #fde68a;
    background: rgba(120, 53, 15, 0.18);
}

.tutorial-skip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.tutorial-skip-row > div {
    min-width: 0;
}

.tutorial-skip-row strong,
.tutorial-skip-row small {
    display: block;
}

.tutorial-skip-row small {
    margin-top: 4px;
    color: #94a3b8;
}

.tutorial-skip-row form {
    flex: 0 0 auto;
    margin: 0;
}

.tutorial-skip-row button {
    white-space: nowrap;
}

body.tutorial-modal-open {
    overflow: hidden;
}

.tutorial-equip-target {
    position: relative;
    outline: 1px solid rgba(34, 211, 238, 0.95);
    outline-offset: -1px;
    background: rgba(14, 116, 144, 0.16) !important;
    box-shadow: inset 0 0 24px rgba(34, 211, 238, 0.12);
}

.tutorial-equip-button {
    border-color: rgba(34, 211, 238, 0.95) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 22px rgba(34, 211, 238, 0.32);
    animation: tutorialEquipPulse 1.05s ease-in-out infinite;
}

.tutorial-forge-button {
    border-color: rgba(34, 211, 238, 0.95) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2563eb, #14b8a6) !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 22px rgba(34, 211, 238, 0.32);
    animation: tutorialEquipPulse 1.05s ease-in-out infinite;
}

.tutorial-checklist {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.tutorial-checklist-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(59, 130, 246, 0.26);
    border-radius: 999px;
    color: #cbd5e1;
    background: rgba(2, 8, 23, 0.42);
}

.tutorial-checklist-row span {
    color: #94a3b8;
}

.tutorial-checklist-row.is-done {
    border-color: rgba(34, 197, 94, 0.55);
    color: #dcfce7;
    background: rgba(20, 83, 45, 0.24);
}

.tutorial-checklist-row.is-done span {
    color: #4ade80;
}

@keyframes tutorialCtaGlow {
    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18), 0 0 20px rgba(34, 211, 238, 0.18);
    }

    50% {
        transform: translateY(-1px);
        box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.34), 0 0 34px rgba(34, 211, 238, 0.34);
    }
}

@keyframes tutorialEquipPulse {
    0%,
    100% {
        filter: brightness(1);
        transform: translateY(0);
    }

    50% {
        filter: brightness(1.22);
        transform: translateY(-1px);
    }
}

@media (max-width: 760px) {
    .tutorial-panel-header,
    .tutorial-step-layout {
        align-items: stretch;
        flex-direction: column;
    }

    .tutorial-step-layout form,
    .tutorial-actions {
        min-width: 0;
    }

    .tutorial-floating-tracker {
        right: calc(12px + var(--safe-area-right));
        bottom: calc(var(--persistent-chat-message-height, 150px) + 124px + var(--safe-area-bottom));
        width: min(260px, calc(100vw - 24px));
    }

    .persistent-chat.chat-collapsed ~ .tutorial-guide .tutorial-floating-tracker,
    body:has(.persistent-chat.chat-collapsed) .tutorial-floating-tracker {
        bottom: calc(72px + var(--safe-area-bottom));
    }

    .tutorial-modal {
        padding: 12px;
    }

    .tutorial-modal-panel {
        max-height: 88vh;
        padding: 18px;
    }
}

.today-progress {
    position: relative;
    min-height: 22px;
    overflow: hidden;
    border: 1px solid #26364f;
    border-radius: 999px;
    background: #07111f;
}

.today-progress > div {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #22c55e);
}

.today-progress span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.guild-task-goal {
    margin: 0;
    color: #f8fafc;
    font-weight: 700;
}

.guild-task-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid #38bdf8;
    border-radius: 999px;
    color: #a5f3fc;
    background: rgba(14, 165, 233, 0.14);
    font-size: 12px;
    font-weight: 800;
}

.guild-boss-preview {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
    padding: 14px;
    border: 1px solid #334155;
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
}

.guild-boss-preview[hidden] {
    display: none;
}

.guild-boss-start-form {
    grid-template-columns: 1fr;
}

.guild-boss-start-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 170px);
    gap: 10px;
    align-items: end;
}

.guild-boss-type-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.guild-boss-type-field > span {
    color: #78ddef;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.guild-boss-type-selector {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.guild-boss-type-button {
    display: grid;
    width: 100%;
    gap: 3px;
    min-width: 0;
    min-height: 48px;
    align-content: center;
    padding: 7px 10px;
    border: 1px solid #48617f;
    border-radius: 7px;
    background: #0c1726;
    color: #ffffff;
    text-align: center;
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.guild-boss-type-button strong,
.guild-boss-type-button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guild-boss-type-button strong {
    color: inherit;
    font-size: 0.78rem;
    line-height: 1.15;
}

.guild-boss-type-button small {
    color: #8fa6c4;
    font-size: 0.66rem;
    line-height: 1.15;
}

.guild-boss-type-button:hover,
.guild-boss-type-button:focus-visible {
    border-color: #38bdf8;
    background: #132a43;
    transform: translateY(-1px);
}

.guild-boss-type-button.active {
    border-color: #36c9f4;
    background: linear-gradient(135deg, #174367, #12304e);
    box-shadow: inset 0 0 0 1px rgba(54, 201, 244, 0.22), 0 0 14px rgba(54, 201, 244, 0.1);
}

.guild-boss-type-button.active small {
    color: #b9eefe;
}

.guild-boss-preview-header {
    display: grid;
    gap: 4px;
}

.guild-boss-preview-header span {
    color: #93c5fd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guild-boss-preview-header strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.15;
}

.guild-boss-preview-main {
    display: grid;
    grid-template-columns: minmax(180px, 1.15fr) minmax(0, 1.85fr);
    gap: 10px;
    align-items: stretch;
}

.guild-boss-preview-power,
.guild-boss-preview-rewards > div {
    border: 1px solid #24334e;
    border-radius: 10px;
    background: rgba(7, 16, 31, 0.72);
}

.guild-boss-preview-power {
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 12px;
}

.guild-boss-preview-power span,
.guild-boss-preview-rewards span {
    color: #9fb0c6;
    font-size: 12px;
}

.guild-boss-preview-power strong {
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
}

.guild-boss-preview-rewards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.guild-boss-preview-rewards > div {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 10px;
}

.guild-boss-preview-rewards strong {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.15;
}

.guild-boss-start-button {
    grid-column: 1 / -1;
}

.guild-boss-confirm-modal .chat-wire-confirm-panel {
    border-color: rgba(34, 211, 238, 0.5);
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 44%),
        #0f172a;
}

.guild-boss-confirm-modal.is-danger .chat-wire-confirm-panel {
    border-color: rgba(248, 113, 113, 0.62);
    background:
        radial-gradient(circle at top left, rgba(220, 38, 38, 0.16), transparent 44%),
        #0f172a;
}

.guild-boss-confirm-modal.is-danger .guild-boss-confirm-icon {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(153, 27, 27, 0.2);
    color: #fca5a5;
}

.guild-task-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #c9d6e8;
}

.guild-task-topline strong {
    color: #ffffff;
}

.guild-task-progress {
    position: relative;
    height: 28px;
    overflow: hidden;
    border: 1px solid #2d3a50;
    border-radius: 999px;
    background: #07101f;
}

.guild-task-progress div {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #22c55e);
    min-width: 0;
    transition: width 0.25s ease;
}

.boss-hp-progress div {
    background: linear-gradient(90deg, #dc2626, #f97316);
}

.guild-raid-tactic {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #475569;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.82);
}

.guild-raid-tactic[hidden] {
    display: none;
}

.guild-raid-tactic span {
    color: #93c5fd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guild-raid-tactic strong {
    color: #f8fafc;
}

.guild-raid-tactic.is-ready {
    border-color: #22c55e;
    background: rgba(20, 83, 45, 0.2);
}

.guild-raid-tactic.is-ready strong {
    color: #86efac;
}

.dungeon-party-progress div {
    background: linear-gradient(90deg, #06b6d4, #22c55e);
}

.guild-task-progress > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 12px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px #020617;
}

.guild-task-form {
    grid-template-columns: minmax(180px, 260px) auto;
    align-items: end;
    margin-top: 14px;
}

.guild-task-hint {
    margin: 8px 0 0;
    color: #9fb0c6;
    font-size: 13px;
}

.quest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.quest-type-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}

.quest-type-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid #26364f;
    border-radius: 12px;
    background: #111827;
    color: #c9d6e8;
    text-decoration: none;
}

.quest-type-tab span {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.quest-type-tab strong {
    color: #9fb0c6;
    font-size: 12px;
}

.quest-type-tab.combat.active {
    border-color: #ef4444;
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.22), transparent 42%),
        #111827;
}

.quest-type-tab.gathering.active,
.quest-type-tab.farming.active {
    border-color: #22c55e;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.22), transparent 42%),
        #111827;
}

.quest-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #223049;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.1), transparent 36%),
        #111b2a;
}

.quest-card.claimed {
    opacity: 0.72;
}

.quest-card.not-started {
    background:
        radial-gradient(circle at top right, rgba(148, 163, 184, 0.12), transparent 36%),
        #111827;
}

.quest-card.queued {
    border-color: #7c3aed;
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.16), transparent 36%),
        #111827;
}

.quest-section-battle .quest-card:not(.not-started):not(.queued) {
    border-color: #7f1d1d;
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.14), transparent 36%),
        #111b2a;
}

.quest-section-gathering .quest-card:not(.not-started):not(.queued) {
    border-color: #14532d;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.16), transparent 36%),
        #111b2a;
}

.quest-section + .quest-section {
    margin-top: 14px;
}

.quest-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.quest-card-header > div {
    display: grid;
    gap: 3px;
}

.quest-card-header span {
    color: #60a5fa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quest-card-header strong {
    color: #ffffff;
    font-size: 18px;
}

.quest-reward {
    align-self: start;
    padding: 5px 8px;
    border: 1px solid #7c3aed;
    border-radius: 999px;
    color: #d8b4fe;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.quest-card p {
    margin: 0;
    color: #c9d6e8;
}

.quest-progress {
    position: relative;
    height: 26px;
    overflow: hidden;
    border: 1px solid #2d3a50;
    border-radius: 999px;
    background: #07101f;
}

.quest-progress div {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
    min-width: 0;
}

.quest-progress > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 800;
    text-shadow: 0 1px 2px #020617;
}

.quest-shop-category-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px;
    border: 1px solid #2b3b56;
    border-radius: 12px;
    background: #0d1728;
}

.quest-shop-category-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #9fb0c6;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.quest-shop-category-tabs a:hover {
    border-color: #334a6b;
    color: #dbeafe;
    background: #142239;
}

.quest-shop-category-tabs a.active {
    border-color: #3b82f6;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(37, 99, 235, 0.7));
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.15);
}

.quest-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.quest-shop-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.quest-shop-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #293852;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 38%),
        #111827;
}

.quest-shop-card.active {
    border-color: #7c3aed;
}

.quest-shop-card span {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.quest-shop-card strong {
    display: block;
    color: #ffffff;
    font-size: 19px;
}

.quest-shop-card p {
    margin: 0;
    color: #c9d6e8;
}

.quest-shop-active {
    color: #c4b5fd !important;
    font-weight: 800;
}

.quest-shop-hint {
    color: #94a3b8;
    font-size: 12px;
}

.quest-package-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.quest-package-row.has-amulet-duration {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quest-package-row button,
.quest-shop-card > form button {
    width: 100%;
    padding: 9px 8px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #ffffff;
    cursor: pointer;
    font-weight: 800;
}

.quest-package-row button:disabled,
.quest-shop-card > form button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.quest-package-row small {
    display: block;
    color: #dbeafe;
    font-size: 11px;
}

.quest-shop-section-heading {
    align-items: flex-end;
}

.quest-shop-section-heading > div:first-child {
    display: grid;
    gap: 4px;
}

.quest-shop-section-heading h2,
.quest-shop-section-heading p {
    margin: 0;
}

.quest-shop-section-heading > div:first-child > span {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quest-shop-section-heading p {
    color: #9fb0c6;
}

.quest-material-card {
    grid-template-rows: 1fr auto auto;
}

.quest-shop-owned {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid #26364e;
    border-radius: 8px;
    background: #0b1627;
}

.quest-shop-owned strong {
    font-size: 16px;
}

.quest-material-packages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.quest-material-packages button,
.quest-equipment-form > button {
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    cursor: pointer;
    font-weight: 800;
}

.quest-material-packages button:disabled,
.quest-equipment-form > button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.quest-material-packages button strong,
.quest-material-packages button small {
    display: block;
}

.quest-material-packages button strong {
    font-size: 15px;
}

.quest-material-packages button small {
    margin-top: 2px;
    color: #dbeafe;
}

.quest-equipment-shop {
    border-color: rgba(168, 85, 247, 0.7);
    background:
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.14), transparent 34%),
        #1f2937;
}

.quest-equipment-price {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid rgba(250, 204, 21, 0.5);
    border-radius: 10px;
    text-align: right;
    background: rgba(250, 204, 21, 0.07);
}

.quest-equipment-price strong {
    display: block;
    color: #facc15;
    font-size: 19px;
}

.quest-equipment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quest-equipment-form label {
    display: grid;
    gap: 6px;
}

.quest-equipment-form label > span,
.quest-equipment-preview span {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.quest-equipment-form select {
    width: 100%;
}

.quest-equipment-preview {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.quest-equipment-preview > div {
    padding: 12px;
    border: 1px solid #2d3c56;
    border-radius: 9px;
    background: #0b1627;
}

.quest-equipment-preview > div.highlight {
    border-color: rgba(168, 85, 247, 0.75);
    background: rgba(88, 28, 135, 0.2);
}

.quest-equipment-preview strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 20px;
}

.quest-equipment-preview .highlight strong {
    color: #c4b5fd;
}

.quest-equipment-form > .quest-shop-hint,
.quest-equipment-form > button {
    grid-column: 1 / -1;
}

.quest-equipment-form > .quest-shop-hint {
    margin: 0;
}

.shop-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.shop-package-card {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid #3b2f62;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(192, 132, 252, 0.2), transparent 42%),
        #111b2a;
}

.shop-package-card span {
    display: block;
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.shop-package-card strong {
    display: block;
    margin-top: 6px;
    color: #ffffff;
    font-size: 24px;
}

.shop-package-card small {
    display: block;
    margin-top: 6px;
    color: #9fb0c6;
}

.shop-package-card button {
    width: 100%;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
}

.shop-package-card-disabled {
    opacity: 0.58;
}

.shop-package-card-disabled button,
.shop-package-card button:disabled {
    cursor: not-allowed;
    background: #334155;
}
 
.shop-real-money-price {
    margin-top: 12px !important;
    color: #67e8f9 !important;
    font-size: 22px;
    font-weight: 900;
}

.shop-paypal-sandbox-note {
    border-color: rgba(34, 211, 238, 0.55);
    background: rgba(8, 47, 73, 0.72);
}

.shop-paypal-live-note form {
    margin-top: 10px;
}

.shop-paypal-live-note .small-button {
    width: auto;
}

.shop-paypal-checkout {
    display: grid;
    gap: 8px;
    min-height: 42px;
}

.shop-google-play-checkout {
    display: grid;
    gap: 8px;
    width: 100%;
    min-height: 42px;
}

.shop-google-play-checkout > button {
    width: 100%;
}

.shop-paypal-button {
    position: relative;
    z-index: 0;
    min-height: 40px;
}

.shop-paypal-result {
    min-height: 18px;
    margin: 0;
    color: #9fb0c6;
    font-size: 12px;
    line-height: 1.4;
}

.shop-paypal-result.success {
    color: #86efac;
}

.shop-paypal-result.error {
    color: #fca5a5;
}

.shop-paypal-recovery {
    margin-top: 12px;
}

.shop-paypal-recovery summary {
    cursor: pointer;
    color: #a5f3fc;
    font-weight: 700;
}

.shop-paypal-recovery > .muted-text {
    margin: 10px 0;
    line-height: 1.5;
}

.shop-paypal-recovery-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 8px;
    padding: 10px;
}

.shop-paypal-recovery-order > span {
    flex: 1 1 220px;
}

.shop-paypal-recovery-order .shop-paypal-result {
    flex-basis: 100%;
}

.shop-paypal-returned-order {
    border-color: #38bdf8;
}

.shop-payment-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #2f4058;
    color: #8fa8c5;
    font-size: 12px;
    line-height: 1.55;
}

.shop-payment-note a {
    color: #67e8f9;
}

.shop-release-preview-panel {
    border-color: rgba(34, 211, 238, 0.5);
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.1), transparent 34%),
        #1f2937;
}

.shop-token-balance {
    display: grid;
    min-width: 155px;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid #31506f;
    border-radius: 10px;
    text-align: right;
    background: #0b1728;
}

.shop-token-balance > span {
    color: #8fa8c5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.shop-token-balance strong {
    color: #67e8f9;
    font-size: 20px;
}

.shop-token-package-grid {
    grid-template-columns: repeat(2, minmax(220px, 360px));
}

.shop-token-package-card {
    border-color: rgba(34, 211, 238, 0.48);
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.16), transparent 42%),
        #111b2a;
}

.shop-token-market-note {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #2e4663;
    border-radius: 10px;
    background: #0d1829;
}

.shop-token-market-note > div {
    display: grid;
    gap: 4px;
}

.shop-token-market-note strong {
    color: #ffffff;
}

.shop-token-market-note span {
    color: #9fb0c6;
    font-size: 13px;
}

.crystal-bonus-panel {
    border-color: rgba(139, 92, 246, 0.62);
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.13), transparent 34%),
        #1f2937;
}

.crystal-bonus-heading > div:first-child {
    display: grid;
    gap: 5px;
}

.crystal-bonus-heading p {
    margin: 0;
}

.crystal-bonus-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.crystal-bonus-rules span {
    padding: 11px 12px;
    border: 1px solid #31435e;
    border-radius: 9px;
    color: #9fb0c6;
    background: #0c1728;
}

.crystal-bonus-rules strong {
    display: block;
    margin-bottom: 3px;
    color: #c4b5fd;
}

.crystal-bonus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.crystal-bonus-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 15px;
    border: 1px solid #394361;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.13), transparent 38%),
        #0e192a;
}

.crystal-bonus-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.crystal-bonus-card-heading span {
    color: #8fa8c5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crystal-bonus-card-heading h3 {
    margin: 3px 0 0;
    color: #ffffff;
    font-size: 19px;
}

.crystal-bonus-card-heading > strong {
    color: #a78bfa;
    font-size: 24px;
}

.crystal-bonus-card p,
.crystal-bonus-card small {
    margin: 0;
    color: #9fb0c6;
}

.crystal-bonus-progress {
    height: 8px;
    overflow: hidden;
    border: 1px solid #293d59;
    border-radius: 999px;
    background: #07111f;
}

.crystal-bonus-progress > div {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #8b5cf6, #22d3ee);
}

.crystal-bonus-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
}

.crystal-bonus-actions:has(form:only-child) {
    grid-template-columns: 1fr;
}

.crystal-bonus-actions button,
.shop-qol-token-options button {
    width: 100%;
}

.shop-qol-token-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.shop-reset-form {
    margin-top: 14px;
}

.shop-qol-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
}

.shop-qol-main {
    min-width: 0;
}
 
.shop-qol-layout {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 410px);
    gap: 18px;
    align-items: start;
}

.shop-qol-main {
    display: grid;
    gap: 16px;
}

.shop-qol-overview-panel {
    border-color: rgba(139, 92, 246, 0.58);
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.16), transparent 36%),
        #1f2937;
}

.shop-qol-title {
    align-items: flex-start;
}

.shop-qol-title > div:first-child {
    display: grid;
    gap: 5px;
}

.shop-qol-title h2,
.shop-qol-title p {
    margin: 0;
}

.shop-qol-title p {
    max-width: 760px;
    color: #aebed2;
    line-height: 1.45;
}

.shop-qol-eyebrow {
    display: block;
    color: #67e8f9;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shop-qol-booster-card {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid #4b3f78;
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(91, 33, 182, 0.13), transparent 55%),
        #0d1829;
}

.shop-qol-booster-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.shop-qol-booster-heading > div:first-child > span,
.shop-qol-purchase-heading span {
    display: block;
    color: #a78bfa;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shop-qol-booster-heading h3 {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 24px;
}

.shop-qol-status {
    display: grid;
    min-width: 210px;
    gap: 3px;
    padding: 11px 14px;
    border: 1px solid #344761;
    border-radius: 10px;
    background: #0a1524;
}

.shop-qol-status > span {
    color: #8fa8c5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shop-qol-status strong {
    font-size: 18px;
}

.shop-qol-status small {
    color: #9fb0c6;
}

.shop-qol-status.active {
    border-color: rgba(34, 197, 94, 0.62);
    background: rgba(20, 83, 45, 0.2);
}

.shop-qol-status.active strong {
    color: #86efac;
}

.shop-qol-status.inactive strong {
    color: #cbd5e1;
}

.shop-qol-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 10px;
}

.shop-qol-benefit-grid > div {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 142px;
    padding: 14px;
    border: 1px solid #2d415c;
    border-radius: 10px;
    background: #101d2f;
}

.shop-qol-benefit-grid > div > span {
    color: #93c5fd;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.shop-qol-benefit-grid strong {
    color: #ffffff;
    font-size: 22px;
}

.shop-qol-benefit-grid p {
    margin: 0;
    color: #aebed2;
    font-size: 13px;
    line-height: 1.4;
}

.shop-qol-purchase-area {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #34435a;
}

.shop-qol-purchase-heading strong {
    display: block;
    margin-top: 4px;
    color: #dbeafe;
    font-size: 14px;
}

.shop-qol-duration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.shop-qol-duration-grid.legacy {
    grid-template-columns: minmax(260px, 480px);
}

.shop-qol-duration-option {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #334763;
    border-radius: 10px;
    background: #101d2f;
}

.shop-qol-duration-option.recommended {
    border-color: rgba(139, 92, 246, 0.75);
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 50%),
        #101d2f;
}

.shop-qol-duration-option > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.shop-qol-duration-option > div strong {
    color: #ffffff;
    font-size: 21px;
}

.shop-qol-duration-option > div span {
    padding: 4px 7px;
    border-radius: 999px;
    color: #ddd6fe;
    background: rgba(124, 58, 237, 0.35);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.shop-qol-duration-option p {
    margin: 0;
    color: #a78bfa;
    font-weight: 800;
}

.shop-qol-duration-option button {
    width: 100%;
}

.shop-action-pack-panel {
    border-color: rgba(37, 99, 235, 0.62);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.15), transparent 40%),
        #1f2937;
}

.shop-action-pack-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 0.75fr);
    gap: 14px;
    align-items: stretch;
}

.shop-action-pack-copy,
.shop-action-pack-stats > div {
    padding: 14px;
    border: 1px solid #2e4665;
    border-radius: 10px;
    background: #0d192a;
}

.shop-action-pack-copy > strong {
    color: #60a5fa;
    font-size: 26px;
}

.shop-action-pack-copy p {
    margin: 6px 0 0;
    color: #aebed2;
    line-height: 1.4;
}

.shop-action-pack-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.shop-action-pack-stats > div {
    display: grid;
    align-content: center;
    gap: 4px;
}

.shop-action-pack-stats > div > span {
    color: #8fa8c5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.shop-action-pack-stats strong {
    color: #ffffff;
    font-size: 18px;
}

.shop-action-pack-options {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.shop-action-pack-option {
    display: grid;
    gap: 7px;
    padding: 15px;
    border: 1px solid #31547d;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(22, 45, 75, 0.96), rgba(12, 25, 43, 0.98));
}

.shop-action-pack-option.featured {
    border-color: #7c3aed;
    box-shadow: inset 0 0 24px rgba(124, 58, 237, 0.12);
}

.shop-action-pack-option > span {
    color: #8fb8e8;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.shop-action-pack-option > strong {
    color: #ffffff;
    font-size: 22px;
}

.shop-action-pack-option > p {
    margin: 0;
    color: #c4b5fd;
    font-size: 18px;
    font-weight: 800;
}

.shop-action-pack-option form,
.shop-action-pack-option button {
    width: 100%;
}

.shop-action-pack-option button {
    min-height: 42px;
    margin-top: 4px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.shop-auto-panel {
    align-self: start;
    border-color: #344763;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.08), transparent 40%),
        #1f2937;
}

.shop-auto-heading {
    align-items: flex-start;
}

.shop-auto-access {
    padding: 5px 8px;
    border: 1px solid #475569;
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.shop-auto-access.active {
    border-color: rgba(34, 197, 94, 0.62);
    color: #86efac;
    background: rgba(20, 83, 45, 0.22);
}

.shop-auto-access.inactive {
    color: #fbbf24;
    background: rgba(120, 53, 15, 0.18);
}

.shop-auto-description {
    margin: -2px 0 14px;
    color: #aebed2;
    font-size: 13px;
    line-height: 1.45;
}

.auto-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.auto-toggle > span {
    display: grid;
    gap: 2px;
}

.auto-toggle strong {
    color: #ffffff;
}

.auto-toggle small {
    color: #8fa8c5;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
}

.auto-toggle.locked {
    border-color: rgba(245, 158, 11, 0.36);
}

.rarity-checkbox-list.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.rarity-checkbox-list.compact .rarity-checkbox {
    min-height: 42px;
    padding: 8px 10px;
}

.shop-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.shop-qol-buff-grid {
    grid-template-columns: minmax(260px, 420px);
}

.shop-compact-card {
    min-height: 0;
    padding: 14px;
}

.shop-compact-card strong {
    font-size: 20px;
}

.shop-action-pack-card {
    border-color: #1d4ed8;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.2), transparent 42%),
        #111b2a;
}

.shop-benefit-list {
    display: grid;
    gap: 5px;
    margin: 10px 0 0;
    padding-left: 18px;
    color: #c9d6e8;
    font-size: 13px;
}

.shop-benefit-list li::marker {
    color: #a78bfa;
}

.shop-auto-panel {
    align-self: start;
}

.character-section-title.compact {
    margin-bottom: 10px;
}

.character-section-title.compact h2 {
    font-size: 20px;
}

.shop-form-label {
    display: block;
    margin-bottom: 8px;
    color: #9fb0c6;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.auto-dismantle-form {
    margin-top: 10px;
}

.auto-dismantle-form.compact {
    gap: 10px;
}

.auto-dismantle-form.compact button {
    width: 100%;
}

.auto-toggle {
    border-color: #334155;
    background: #0f172a;
}

.rarity-checkbox-list.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.rarity-checkbox-list.compact .rarity-checkbox {
    min-height: 42px;
    padding: 8px 10px;
}

.auto-level-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.auto-level-row label {
    display: grid;
    gap: 5px;
    color: #9fb0c6;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.auto-level-row input {
    width: 100%;
    min-width: 0;
}

.auto-item-level-filter {
    padding: 10px;
    border: 1px solid #30445f;
    border-radius: 8px;
    background: rgba(9, 19, 35, 0.62);
}

.auto-item-level-filter .shop-form-label {
    margin-bottom: 7px;
    color: #67e8f9;
}

.auto-filter-help {
    display: block;
    margin-top: 8px;
    color: #9fb0c6;
    font-size: 11px;
    line-height: 1.45;
}

.referral-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 20px;
    align-items: center;
    border-color: rgba(34, 211, 238, 0.55);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.15), transparent 38%),
        radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.18), transparent 42%),
        #182334;
}

.referral-hero-copy {
    display: grid;
    gap: 7px;
}

.referral-hero-copy h2,
.referral-hero-copy p {
    margin: 0;
}

.referral-hero-copy h2 {
    color: #ffffff;
    font-size: clamp(24px, 3vw, 34px);
}

.referral-hero-copy p {
    max-width: 760px;
    color: #c9d6e8;
    line-height: 1.5;
}

.referral-kicker {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.referral-link-box {
    display: grid;
    gap: 8px;
    padding: 15px;
    border: 1px solid #314663;
    border-radius: 12px;
    background: rgba(7, 16, 31, 0.78);
}

.referral-link-box label {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.referral-link-box > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.referral-link-box input {
    width: 100%;
    min-width: 0;
    color: #e0f2fe;
    background: #07101f;
}

.referral-link-box button {
    min-width: 110px;
    background: linear-gradient(135deg, #0891b2, #2563eb);
}

.referral-link-box small {
    color: #7185a2;
}

.referral-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.referral-stat-card {
    display: grid;
    gap: 6px;
    min-height: 108px;
    align-content: center;
}

.referral-stat-card span {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.referral-stat-card strong {
    color: #ffffff;
    font-size: 28px;
}

.referral-stat-card.highlight {
    border-color: rgba(167, 139, 250, 0.7);
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.2), transparent 45%),
        #1f2937;
}

.referral-stat-card.highlight strong {
    color: #c4b5fd;
}

.referral-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.referral-rule-grid > div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #293a55;
    border-radius: 10px;
    color: #c9d6e8;
    background: #0d1829;
}

.referral-rule-grid strong {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.referral-rules-card .quest-shop-hint {
    display: block;
    margin-top: 12px;
}

.referral-invited-by {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #2b3a51;
    color: #9fb0c6;
}

.referral-invited-by strong {
    color: #67e8f9;
}

.referral-player-card {
    margin-top: 14px;
}

.referral-empty-state {
    display: grid;
    gap: 5px;
    padding: 24px;
    border: 1px dashed #334763;
    border-radius: 10px;
    text-align: center;
    color: #8fa3bf;
    background: #0d1728;
}

.referral-empty-state strong {
    color: #dbeafe;
}

.referral-player-list {
    display: grid;
    gap: 8px;
}

.referral-player-list article {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid #293a55;
    border-radius: 10px;
    background: #0d1829;
}

.referral-player-list article > div {
    display: grid;
    gap: 3px;
}

.referral-player-list article > div:last-child {
    text-align: right;
}

.referral-player-list strong {
    color: #ffffff;
}

.referral-player-list article > div:last-child strong {
    color: #c4b5fd;
}

.referral-player-list span {
    color: #8fa3bf;
    font-size: 12px;
}

@media (max-width: 1000px) {
    .shop-qol-layout {
        grid-template-columns: 1fr;
    }

    .referral-hero-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .shop-qol-booster-heading,
    .shop-action-pack-layout {
        display: grid;
        grid-template-columns: 1fr;
    }

    .shop-qol-status {
        min-width: 0;
    }

    .shop-qol-duration-grid,
    .shop-qol-duration-grid.legacy,
    .shop-action-pack-stats,
    .shop-action-pack-options,
    .auto-level-row,
    .rarity-checkbox-list.compact {
        grid-template-columns: 1fr;
    }

    .shop-action-pack-option button {
        min-height: 46px;
    }

    .shop-token-balance {
        min-width: 0;
        text-align: left;
    }

    .shop-token-package-grid,
    .crystal-bonus-grid,
    .crystal-bonus-rules,
    .crystal-bonus-actions,
    .shop-qol-token-options {
        grid-template-columns: 1fr;
    }

    .shop-token-market-note {
        display: grid;
    }

    .shop-token-market-note a {
        width: 100%;
        text-align: center;
    }

    .referral-stat-grid,
    .referral-rule-grid {
        grid-template-columns: 1fr;
    }

    .referral-link-box > div {
        grid-template-columns: 1fr;
    }

    .referral-link-box button {
        width: 100%;
    }

    .referral-player-list article {
        display: grid;
    }

    .referral-player-list article > div:last-child {
        text-align: left;
    }
}

.guild-list {
    display: grid;
    gap: 8px;
}

.guild-list.compact {
    gap: 4px;
}

.guild-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #223049;
    border-radius: 9px;
    background: #111b2a;
}

.guild-list-row > div {
    display: grid;
    gap: 3px;
}

.guild-list-row a {
    color: #67e8f9;
    text-decoration: none;
}

.guild-list-row a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.guild-online-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9fb0c6;
    font-size: 12px;
    font-weight: 700;
}

.guild-online-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #64748b;
    box-shadow: 0 0 8px rgba(100, 116, 139, 0.6);
}

.guild-online-status.online {
    color: #86efac;
}

.guild-online-status.online::before {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.75);
}

.guild-online-status.offline {
    color: #94a3b8;
}

.guild-online-status.activity-running {
    color: #67e8f9;
}

.guild-online-status.activity-idle {
    color: #94a3b8;
}

.guild-actions {
    display: flex !important;
    flex-direction: row;
    gap: 8px;
}

.guild-subpanel {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.guild-subpanel h3 {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .guild-heading,
    .guild-layout,
    .guild-list-row,
    .guild-deposit-form,
    .guild-bank-grid,
    .guild-upgrade-card {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.site-footer {
    max-width: 1100px;
    margin: 40px auto 20px auto;
    padding: 0 20px;
    color: #6b7280;
    font-size: 13px;
}

@media (max-width: 700px) {
    .site-header-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .grid,
    .stat-grid,
    .character-layout,
    .character-stat-grid,
    .character-stat-grid.compact,
    .character-equipment-grid,
    .character-hero-stats,
    .equipment-set-grid {
        grid-template-columns: 1fr;
    }

.equipment-set-card {
    align-items: stretch;
    flex-direction: column;
}

.equipment-set-actions,
.equipment-set-rename-form {
    grid-template-columns: 1fr;
    flex-direction: column;
}

.equipment-set-rename-form input {
    max-width: none;
}

    .character-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .character-skill-row {
        grid-template-columns: 1fr;
    }
}
/* =========================
   Inventory / Equipment UI
   ========================= */

.item-card {
    position: relative;
    border: 1px solid #2f3b52;
    background: linear-gradient(180deg, #182033 0%, #111827 100%);
}

.item-card.equipped {
    border-color: #4ade80;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.25);
}

.item-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.item-name {
    margin: 0;
    font-size: 18px;
}

.item-meta {
    font-size: 13px;
    opacity: 0.85;
    line-height: 1.5;
}

.item-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.rarity-common {
    background: #374151;
    color: #e5e7eb;
}

.rarity-uncommon {
    background: #14532d;
    color: #bbf7d0;
}

.rarity-rare {
    background: #1e3a8a;
    color: #bfdbfe;
}

.rarity-epic {
    background: #581c87;
    color: #e9d5ff;
}

.rarity-legendary {
    background: #78350f;
    color: #fde68a;
}

.rarity-mystic {
    background: radial-gradient(circle at 20% 20%, #39172f 0%, #140a16 55%, #08040b 100%);
    color: var(--rarity-mystic-color);
    border: 1px solid rgba(var(--rarity-mystic-rgb), 0.85);
    box-shadow: 0 0 12px rgba(var(--rarity-mystic-rgb), 0.35), inset 0 0 10px rgba(var(--rarity-mystic-rgb), 0.15);
    text-shadow: 0 0 8px rgba(var(--rarity-mystic-rgb), 0.45);
}

.equipped-label {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(74, 222, 128, 0.15);
    color: #86efac;
    font-size: 12px;
    font-weight: 700;
}

.item-stats {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px 0;
}

.item-stats li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
}

.item-stats li:last-child {
    border-bottom: none;
}

.item-stat-name {
    opacity: 0.85;
}

.item-stat-value {
    font-weight: 700;
}

.item-actions {
    margin-top: 12px;
}

.item-actions button {
    width: 100%;
}
/* =========================
   Inventory List UI
   ========================= */

.inventory-table-wrap {
    width: 100%;
    overflow: visible;
}

.inventory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.inventory-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #374151;
    color: #e5e7eb;
    font-weight: 700;
}

.inventory-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #2f3747;
    vertical-align: middle;
}

.inventory-row {
    background: #111827;
}

.inventory-row:hover {
    background: #172033;
}

.inventory-row.inventory-row-new {
    background: rgba(8, 145, 178, 0.13);
    box-shadow: inset 4px 0 0 #22d3ee;
    animation: inventoryNewItemPulse 1.4s ease-out 1;
}

.inventory-row.inventory-row-new:hover {
    background: rgba(8, 145, 178, 0.2);
}

.inventory-new-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 2px 6px;
    border: 1px solid rgba(34, 211, 238, 0.72);
    border-radius: 999px;
    color: #cffafe;
    background: rgba(8, 145, 178, 0.28);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    vertical-align: middle;
}

.inventory-new-badge[hidden] {
    display: none;
}

@keyframes inventoryNewItemPulse {
    0% {
        background: rgba(34, 211, 238, 0.34);
        box-shadow: inset 4px 0 0 #67e8f9, 0 0 26px rgba(34, 211, 238, 0.24);
    }
    100% {
        background: rgba(8, 145, 178, 0.13);
        box-shadow: inset 4px 0 0 #22d3ee;
    }
}

.locked-row {
    box-shadow: inset 3px 0 0 #fbbf24;
}

.equipped-row {
    background: rgba(74, 222, 128, 0.06);
}

.item-name-wrap {
    position: relative;
    display: inline-block;
}

.item-name-list {
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 700;
    cursor: help;
    text-align: left;
}

.inventory-item-name-button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.inventory-item-name-button:hover,
.inventory-item-name-button:focus-visible {
    background: transparent;
}

.inventory-item-requirement {
    display: none;
}

.inventory-mobile-toggle-icon {
    display: none;
}

.equipment-drop-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.equipment-drop-heading h2 { margin: 0; }
.equipment-drop-heading form { margin: 0; }

.equipment-drop-note,
.equipment-drop-meta {
    color: #9fb0c6;
    font-size: 12px;
    line-height: 1.5;
}

.equipment-drop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.equipment-drop-filters a {
    padding: 8px 10px;
    border: 1px solid #33465e;
    border-radius: 7px;
    color: #b9cce4;
    text-decoration: none;
}

.equipment-drop-filters a.active {
    border-color: #38bdf8;
    background: #153147;
    color: #e0f2fe;
}

.equipment-drop-list {
    display: grid;
    gap: 8px;
}

.equipment-drop-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: 12px;
    border: 1px solid #2c405a;
    border-radius: 8px;
    background: #0b1828;
    overflow-wrap: anywhere;
}

.equipment-drop-result {
    display: grid;
    text-align: right;
    font-size: 12px;
}

.equipment-drop-result .is-dismantled { color: #fbbf24; }
.equipment-drop-result .is-stored { color: #86efac; }
.equipment-drop-rewards { grid-column: 1 / -1; font-size: 12px; color: #cbd5e1; }
.today-drop-log-link { color: inherit; text-decoration: none; }
.today-drop-log-link:hover { color: #7dd3fc; text-decoration: underline; }

@media (max-width: 600px) {
    .equipment-drop-entry { grid-template-columns: minmax(0, 1fr); }
    .equipment-drop-result { text-align: left; }
}

.rarity-text-common {
    color: #e5e7eb;
}

.rarity-text-uncommon {
    color: #22c55e;
}

.rarity-text-rare {
    color: #3b82f6;
}

.rarity-text-epic {
    color: #a855f7;
}

.rarity-text-legendary {
    color: #f97316;
}

.rarity-text-mystic {
    color: var(--rarity-mystic-color);
    text-shadow: 0 0 9px rgba(var(--rarity-mystic-rgb), 0.35);
}

.item-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 24px;
    z-index: 50;
    min-width: 260px;
    padding: 12px;
    border: 1px solid #374151;
    border-radius: 8px;
    background: #0b1020;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: #e5e7eb;
}

.item-name-wrap:hover .item-tooltip {
    display: block;
}

.item-name-wrap.tooltip-portal-active > .item-tooltip {
    display: none !important;
}

body.tooltip-portal-enabled [data-market-equipment-tooltip] > .item-tooltip {
    display: none !important;
}

body.tooltip-portal-enabled [data-guild-storage-products] .item-name-wrap > .item-tooltip {
    display: none !important;
}

.floating-item-tooltip {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 20000;
    max-width: min(620px, calc(100vw - 24px));
    max-height: min(620px, calc(100vh - 24px));
    overflow-y: auto;
    pointer-events: none;
}

.inventory-floating-item-tooltip,
.guild-storage-floating-tooltip {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #4b6688 #091323;
    scrollbar-width: thin;
    pointer-events: auto;
}

.inventory-floating-item-tooltip.is-scrollable,
.guild-storage-floating-tooltip.is-scrollable {
    padding-right: 16px;
    border-bottom-color: #67e8f9;
}

.floating-item-tooltip.comparison-tooltip {
    width: min(620px, calc(100vw - 24px));
}

.equipped-item-tooltip-wrap .item-tooltip {
    left: calc(100% + 12px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 5000;
    max-width: min(320px, calc(100vw - 48px));
    max-height: min(420px, calc(100vh - 120px));
    overflow-y: auto;
}

.comparison-tooltip {
    width: min(620px, calc(100vw - 60px));
}

.inventory-table .comparison-tooltip {
    top: auto;
    bottom: 24px;
}

.inventory-table tbody > tr:nth-child(-n + 5) .comparison-tooltip {
    top: 24px;
    bottom: auto;
}


.comparison-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.comparison-item {
    min-width: 0;
    padding-right: 14px;
}

.comparison-item + .comparison-item {
    padding-right: 0;
    padding-left: 14px;
    border-left: 1px solid #374151;
}

.comparison-label {
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comparison-stats {
    display: grid;
    gap: 5px;
    font-size: 12px;
}

.comparison-stats > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.comparison-stats span {
    color: #cbd5e1;
}

.comparison-value-group {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    color: #e5e7eb;
    white-space: nowrap;
}

.comparison-base-value {
    color: #e5e7eb;
    font-weight: 800;
}

.comparison-delta {
    font-style: normal;
    font-weight: 900;
}

.comparison-better {
    color: #4ade80;
}

.comparison-worse {
    color: #f87171;
}

.comparison-equal {
    color: #e5e7eb;
}

.tooltip-title {
    font-weight: 800;
    margin-bottom: 8px;
}

.tooltip-meta {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
    margin-bottom: 10px;
}

.tooltip-stats {
    font-size: 13px;
    line-height: 1.6;
}

.tooltip-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.item-stat-reading {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    text-align: right;
}

.item-stat-roll {
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.72;
}

.inventory-equipped-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(74, 222, 128, 0.15);
    color: #86efac;
    font-size: 12px;
    font-weight: 700;
}

.small-button {
    padding: 5px 10px;
    font-size: 13px;
}

.small-button.button-link {
    padding: 5px 10px;
}

.simulation-form {
    display: grid;
    gap: 14px;
}

.simulation-form .feedback-form-row {
    align-items: end;
}

.simulation-stat-grid .stat-card small {
    color: #9fb0c6;
    display: block;
    font-size: 12px;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .simulation-form .feedback-form-row {
        grid-template-columns: 1fr;
    }
}
/* =========================
   Inventory Page Layout
   ========================= */

.page-title-center {
    text-align: center;
    margin: 20px 0 24px 0;
    font-size: 32px;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.equipment-slot-box {
    min-height: 95px;
    padding: 12px;
    border: 1px solid #2f3747;
    border-radius: 8px;
    background: #111827;
}

.equipment-slot-box:hover {
    background: #172033;
}

.equipment-slot-title {
    margin-bottom: 8px;
    font-size: 13px;
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
}

.equipment-empty {
    color: #6b7280;
    font-style: italic;
}

.equipment-slot-action {
    margin-top: 10px;
}

.equipment-item-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    color: #9ca3af;
    font-size: 12px;
}

.equipment-set-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.equipment-set-card {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 13px;
    border: 1px solid #2f3b52;
    border-radius: 9px;
    background: #111827;
}

.equipment-set-card strong,
.equipment-set-card span,
.equipment-set-card small {
    display: block;
}

.equipment-set-card span,
.equipment-set-card small {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 12px;
}

.equipment-set-info {
    min-width: 130px;
}

.equipment-set-actions {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto auto auto;
    gap: 6px;
    align-items: end;
    min-width: 0;
}

.equipment-set-actions form {
    margin: 0;
}

.equipment-set-rename-form {
    display: flex;
    gap: 6px;
    min-width: 0;
}

.equipment-set-rename-form input {
    min-width: 130px;
    max-width: none;
    padding: 6px 8px;
}

.equipment-set-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.equipment-set-badges span {
    padding: 2px 6px;
    border: 1px solid #0ea5e9;
    border-radius: 999px;
    color: #bae6fd;
    background: rgba(14, 165, 233, 0.16);
    font-size: 11px;
    font-weight: 800;
}

.item-system-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    vertical-align: middle;
}

.item-system-badges span {
    padding: 2px 7px;
    border: 1px solid rgba(56, 189, 248, 0.34);
    border-radius: 999px;
    color: #bae6fd;
    background: rgba(8, 47, 73, 0.42);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.equipment-set-card.compact {
    display: grid;
    grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 12px;
    overflow: hidden;
}

.equipment-set-card.compact .equipment-set-info {
    min-width: 0;
}

.inventory-collapsible-section {
    padding: 0;
    overflow: hidden;
}

.inventory-section-toggle {
    width: 100%;
    padding: 18px 20px;
    border: 0;
    color: #ffffff;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.inventory-section-toggle:hover {
    background: rgba(47, 125, 246, 0.08);
}

.equipment-set-heading {
    gap: 12px;
    margin: 0;
    padding: 14px 20px;
}

.equipment-set-quick-swap {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 8px;
    width: min(720px, 100%);
    margin-left: auto;
}

.equipment-set-quick-swap form {
    min-width: 0;
    margin: 0;
}

.equipment-set-quick-button {
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #dbeafe;
    background: #132238;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-set-quick-button:hover:not(:disabled) {
    border-color: #38bdf8;
    background: rgba(14, 165, 233, 0.18);
}

.equipment-set-quick-button:disabled {
    color: #64748b;
    background: #0f172a;
}

.equipment-set-expand.inventory-section-toggle {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}

.equipment-set-expand.inventory-section-toggle:hover {
    background: transparent;
}

.inventory-section-toggle .inventory-heading-text {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.inventory-section-toggle h2 {
    margin: 0;
}

.inventory-collapsible-section > [data-collapsible-content] {
    margin: 0 20px 20px;
}

.inventory-collapsible-section > [data-collapsible-content][hidden] {
    display: none;
}

.inventory-collapsible-section.open > .inventory-section-toggle .equipment-set-chevron {
    color: #facc15;
    font-size: 0;
}

.inventory-collapsible-section.open .equipment-set-expand .equipment-set-chevron {
    color: #facc15;
    font-size: 0;
}

.inventory-collapsible-section.open > .inventory-section-toggle .equipment-set-chevron::before {
    content: "-";
    font-size: 14px;
}

.inventory-collapsible-section.open .equipment-set-expand .equipment-set-chevron::before {
    content: "-";
    font-size: 14px;
}

.equipment-set-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    color: #ffffff;
    background: transparent;
    text-align: left;
}

.equipment-set-toggle:hover {
    background: rgba(47, 125, 246, 0.12);
}

.equipment-set-chevron {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid #334155;
    border-radius: 999px;
    color: #67e8f9;
    font-weight: 900;
}

.equipment-set-card.open .equipment-set-chevron {
    color: #facc15;
}

.equipment-set-card.open .equipment-set-chevron::before {
    content: "-";
}

.equipment-set-card.open .equipment-set-chevron {
    font-size: 0;
}

.equipment-set-card.open .equipment-set-chevron::before {
    font-size: 14px;
}

.equipment-set-details {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto auto;
    gap: 6px;
    align-items: end;
    padding: 0;
}

.equipment-set-details[hidden] {
    display: none;
}

.equipment-set-details form {
    margin: 0;
}

.set-row {
    box-shadow: inset 3px 0 0 #38bdf8;
}

@media (max-width: 700px) {
    .equipment-set-heading {
        flex-wrap: wrap;
    }

    .equipment-set-quick-swap {
        order: 3;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .equipment-set-card {
        grid-template-columns: 1fr;
    }

    .equipment-set-actions,
    .equipment-set-rename-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .equipment-set-rename-form input {
        max-width: none;
    }

    .equipment-set-details {
        grid-template-columns: 1fr;
    }
}

.inventory-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.inventory-bulk-dismantle-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.inventory-dismantle-filtered {
    border: 1px solid rgba(248, 113, 113, 0.72);
    color: #fecaca;
    background: rgba(127, 29, 29, 0.48);
}

.inventory-dismantle-filtered:hover:not(:disabled) {
    background: rgba(153, 27, 27, 0.72);
}

.inventory-page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.inventory-page-heading .page-title-center {
    grid-column: 2;
    margin: 0;
}

.inventory-page-actions {
    grid-column: 3;
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 8px;
}

.inventory-info-button {
    width: auto;
    white-space: nowrap;
}

.inventory-mastery-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.inventory-mastery-button:hover {
    background: linear-gradient(135deg, #6d28d9, #1d4ed8);
}

.inventory-mastery-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    font-size: .72rem;
}

.admin-help-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: 999px;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 800;
    cursor: help;
    vertical-align: middle;
}

.admin-help-tooltip-content {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 24px;
    top: 50%;
    width: min(360px, calc(100vw - 80px));
    padding: 12px 14px;
    transform: translateY(-50%);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 12px;
    background: #08111f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
}

.admin-help-tooltip:hover .admin-help-tooltip-content,
.admin-help-tooltip:focus .admin-help-tooltip-content {
    display: block;
}

.inventory-section-heading h2 {
    margin: 0;
}

.inventory-storage-count {
    margin-right: auto;
    color: #91a0b7;
    font-size: 13px;
}

.inventory-capacity-panel {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid rgba(56, 189, 248, 0.38);
    border-radius: 10px;
    background: rgba(8, 47, 73, 0.22);
}

.inventory-capacity-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #bae6fd;
}

.inventory-capacity-heading strong {
    color: #f8fafc;
}

.inventory-capacity-track {
    height: 9px;
    overflow: hidden;
    border: 1px solid #334155;
    border-radius: 999px;
    background: #07101d;
}

.inventory-capacity-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
}

.inventory-capacity-panel small {
    color: #94a3b8;
    line-height: 1.4;
}

.inventory-capacity-panel.is-warning {
    border-color: rgba(251, 191, 36, 0.58);
    background: rgba(120, 53, 15, 0.17);
}

.inventory-capacity-panel.is-warning .inventory-capacity-track span {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.inventory-capacity-panel.is-full {
    border-color: rgba(248, 113, 113, 0.7);
    background: rgba(127, 29, 29, 0.2);
}

.inventory-capacity-panel.is-full .inventory-capacity-track span {
    background: linear-gradient(90deg, #dc2626, #fb7185);
}

.inventory-new-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    white-space: nowrap;
}

.inventory-new-filter[hidden] {
    display: none;
}

.inventory-new-filter strong {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #cffafe;
    background: rgba(8, 145, 178, 0.34);
}

.bot-check-card {
    display: grid;
    gap: 18px;
    width: min(720px, 100%);
    margin: 28px auto;
}

.bot-check-card h1,
.bot-check-card h3,
.bot-check-card p {
    margin-top: 0;
}

.bot-check-image-wrap {
    display: grid;
    place-items: center;
    padding: 16px;
    border: 1px solid #334155;
    border-radius: 12px;
    background: #050d1a;
}

.bot-check-image {
    display: block;
    width: min(340px, 100%);
    height: auto;
}

.bot-check-form,
.bot-check-refresh-form {
    margin: 0;
}

.bot-check-form input {
    max-width: 340px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    text-align: center;
}

.admin-bot-action-form {
    display: grid;
    gap: 8px;
    min-width: 300px;
}

.admin-bot-action-form .action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-list-heading-tools,
.admin-list-sort-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-list-heading-tools {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-list-sort-form label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 12px;
}

.admin-list-sort-form select {
    min-width: 150px;
    min-height: 32px;
    padding: 5px 28px 5px 8px;
}

.admin-list-pagination {
    justify-content: flex-end;
}

.bot-risk-score {
    color: #fbbf24;
    font-size: 1.15rem;
}

@media (max-width: 700px) {
    .character-section-title.admin-list-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-list-heading-tools {
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
    }

    .admin-list-sort-form,
    .admin-list-sort-form label {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-list-sort-form select,
    .admin-list-sort-form button {
        width: 100%;
    }
}

.inventory-new-filter.is-active {
    border-color: #22d3ee;
    color: #ecfeff;
    background: rgba(8, 145, 178, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .inventory-row.inventory-row-new {
        animation: none;
    }
}

.inventory-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr)) repeat(2, auto) auto auto;
    gap: 10px;
    align-items: end;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #28384d;
    border-radius: 8px;
    background: #111a29;
}

.inventory-filter-bar label {
    display: grid;
    gap: 5px;
    color: #8f9bad;
    font-size: 12px;
    text-transform: uppercase;
}

.inventory-range-filter {
    display: grid;
    gap: 5px;
    width: 118px;
}

.inventory-range-filter > span {
    color: #8f9bad;
    font-size: 12px;
    text-transform: uppercase;
}

.inventory-range-filter > div {
    display: grid;
    grid-template-columns: 56px 56px;
    gap: 5px;
}

.inventory-filter-bar input,
.inventory-filter-bar select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #2c3b50;
    border-radius: 6px;
    color: #e6edf7;
    background: #0d1625;
}

.inventory-filter-reset {
    align-self: center;
    text-align: center;
}

.inventory-filter-empty {
    color: #95a0b3;
}

.inventory-pagination {
    margin: 12px 0;
}

.inventory-pagination span.inventory-pagination-summary {
    min-width: 0;
    margin-right: auto;
    padding-left: 0;
    border: 0;
    color: #9fb2ca;
    background: transparent;
    opacity: 1;
    text-align: left;
}

.inventory-pagination a:first-of-type,
.inventory-pagination a:last-of-type {
    min-width: auto;
}

.inventory-item-heading {
    display: flex;
    align-items: center;
    gap: 7px;
}

.item-lock-button {
    min-width: 30px;
    padding: 4px 6px;
    border: 1px solid #475569;
    background: #1e293b;
    font-size: 15px;
    line-height: 1;
}

.item-lock-button:hover {
    background: #334155;
}

.item-lock-button.locked {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.2);
}

.inventory-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.inventory-action-group form {
    margin: 0;
}

.inventory-add-to-set-form select {
    max-width: 150px;
    min-height: 29px;
    padding: 4px 8px;
    border: 1px solid #475569;
    border-radius: 7px;
    background: #334155;
    color: #f8fafc;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.inventory-add-to-set-form select:hover,
.inventory-add-to-set-form select:focus-visible {
    border-color: #60a5fa;
}

.inventory-modal[hidden] {
    display: none;
}

.inventory-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.inventory-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.82);
}

.inventory-modal-panel {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    padding: 22px;
    border: 1px solid #475569;
    border-radius: 10px;
    background: #1f2937;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.inventory-modal-panel h2 {
    margin-top: 0;
}

.item-system-modal-panel {
    width: min(980px, calc(100vw - 44px));
    max-height: min(82vh, 820px);
    overflow-y: auto;
    padding: 22px;
    border-color: #334155;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 34%),
        #0f172a;
}

.item-system-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #334155;
}

.item-system-modal-header h2 {
    margin: 2px 0 8px;
    color: #67e8f9;
}

.item-system-modal-header p {
    max-width: 760px;
    margin: 0;
    color: #cbd5e1;
}

.item-system-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.item-system-guide-grid.gathering {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.item-system-guide-card,
.item-system-note {
    padding: 14px;
    border: 1px solid #26364f;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.78);
}

.item-system-guide-card h3,
.item-system-note h3 {
    margin: 0 0 8px;
    color: #f8fafc;
}

.item-system-guide-card p,
.item-system-guide-card small,
.item-system-note p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.45;
}

.item-system-guide-card ul {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #cbd5e1;
    line-height: 1.45;
}

.item-system-guide-card.mage {
    border-color: rgba(192, 132, 252, 0.48);
}

.item-system-guide-card.hunter,
.item-system-guide-card.hunting {
    border-color: rgba(34, 197, 94, 0.42);
}

.item-system-guide-card.warrior {
    border-color: rgba(248, 113, 113, 0.42);
}

.item-system-guide-card.mining {
    border-color: rgba(148, 163, 184, 0.5);
}

.item-system-guide-card.woodcutting {
    border-color: rgba(132, 204, 22, 0.42);
}

.item-system-guide-card.herbalist {
    border-color: rgba(45, 212, 191, 0.42);
}

.item-system-note {
    margin: 14px 0;
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(8, 47, 73, 0.28);
}

.item-system-note.soft {
    border-color: rgba(148, 163, 184, 0.32);
    background: rgba(30, 41, 59, 0.42);
}

.modal-safety-note {
    color: #fbbf24;
    font-size: 14px;
}

.dismantle-scope-summary {
    display: grid;
    gap: 4px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 9px;
    background: rgba(8, 47, 73, 0.25);
}

.dismantle-scope-summary > span {
    color: #67e8f9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dismantle-scope-summary > strong {
    color: #f8fafc;
}

.dismantle-scope-summary > small {
    color: #a9bed6;
    overflow-wrap: anywhere;
}

.rarity-checkbox-list {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.rarity-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid #374151;
    border-radius: 7px;
    background: #111827;
    font-weight: 700;
    cursor: pointer;
}

.rarity-checkbox input {
    width: auto;
}

#dismantle-modal .rarity-checkbox > span {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#dismantle-modal .rarity-checkbox > span small {
    color: #94a3b8;
    font-size: 12px;
}

#dismantle-modal .rarity-checkbox.is-empty {
    cursor: not-allowed;
    opacity: 0.42;
}

.combat-roll-explainer {
    border-color: rgba(56, 189, 248, 0.48);
    background: rgba(8, 47, 73, 0.38);
}

.combat-style-comparison .item-system-guide-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.combat-style-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.combat-style-card-heading h3 {
    margin: 0;
}

.combat-style-card-heading span {
    padding: 3px 8px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 999px;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.78);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.combat-roll-profile {
    display: grid;
    gap: 5px;
    margin: 0;
}

.combat-roll-profile dt {
    margin-top: 5px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.combat-roll-profile dt small {
    color: #94a3b8;
    font-size: 10px;
}

.combat-roll-profile dd {
    margin: 0;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.45;
}

.combat-set-bonus {
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.combat-set-bonus strong {
    color: #f8fafc;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.combat-set-bonus span {
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.45;
}

.combat-roll-pools {
    border-color: rgba(129, 140, 248, 0.46);
    background: rgba(30, 27, 75, 0.3);
}

.combat-roll-pools-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.combat-roll-pools-heading > div:first-child {
    min-width: 0;
}

.combat-roll-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.combat-roll-counts span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 7px;
    color: #a9bed6;
    background: rgba(15, 23, 42, 0.72);
    font-size: 11px;
    white-space: nowrap;
}

.combat-roll-counts strong {
    color: #f8fafc;
}

.combat-roll-pool-rule {
    margin-top: 10px !important;
    color: #c4b5fd !important;
    font-size: 12px;
}

.combat-roll-pool-styles {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.combat-roll-pool-style {
    overflow: hidden;
    border: 1px solid #334155;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.68);
}

.combat-roll-pool-style.mage {
    border-color: rgba(192, 132, 252, 0.42);
}

.combat-roll-pool-style.hunter {
    border-color: rgba(34, 197, 94, 0.38);
}

.combat-roll-pool-style.warrior {
    border-color: rgba(248, 113, 113, 0.38);
}

.combat-roll-pool-style summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: #f8fafc;
    cursor: pointer;
    list-style-position: inside;
}

.combat-roll-pool-style summary span {
    color: #94a3b8;
    font-size: 11px;
}

.combat-roll-slot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 10px 10px;
}

.combat-roll-slot-card {
    padding: 9px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 7px;
    background: rgba(2, 6, 23, 0.34);
}

.combat-roll-slot-card h4 {
    margin: 0 0 7px;
    color: #f8fafc;
    font-size: 12px;
}

.combat-roll-stat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.combat-roll-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 5px;
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.82);
    font-size: 10px;
    line-height: 1.25;
}

.combat-roll-stat.is-main {
    color: #e0f2fe;
    outline: 1px solid rgba(56, 189, 248, 0.52);
    background: rgba(8, 47, 73, 0.58);
}

.combat-roll-stat.is-main b {
    color: #67e8f9;
    font-size: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.combat-roll-stat.is-crit:not(.is-main) {
    color: #e9d5ff;
    background: rgba(88, 28, 135, 0.38);
}

.shop-anonymous-global-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 7px 10px;
    color: #cfe3ff;
    font-size: 13px;
    line-height: 1;
}

.shop-supporter-announcement-heading {
    align-items: flex-start;
    flex-wrap: wrap;
}

.inventory-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-open {
    overflow: hidden;
}

/* =========================
   Forge
   ========================= */

.forge-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
    gap: 20px;
}

.forge-main-card {
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
}

.forge-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forge-item-link {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid #374151;
    border-radius: 8px;
    background: #111827;
    text-decoration: none;
    font-weight: 700;
}

.forge-item-link:hover,
.forge-item-link.selected {
    border-color: #3b82f6;
    background: #172033;
}

.forge-item-link small {
    color: #9ca3af;
    font-weight: 400;
    white-space: nowrap;
}

.forge-selected-item h3 {
    margin-bottom: 6px;
}

.forge-meta {
    margin-top: 0;
    color: #9ca3af;
}

.forge-stat-list {
    margin: 0 0 18px;
    padding: 0;
}

.forge-stat-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto minmax(190px, auto);
    align-items: center;
    gap: 20px;
    padding: 9px 0;
    border-bottom: 1px solid #374151;
}

.forge-stat-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.forge-stat-row small {
    color: #9ca3af;
}

.forge-stat-row > strong {
    color: #86efac;
}

.forge-upgrade-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.forge-inline-cost {
    font-size: 11px;
    text-align: right;
}

.forge-warning {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #92400e;
    border-radius: 8px;
    background: rgba(146, 64, 14, 0.18);
    color: #fde68a;
    font-size: 14px;
}

.forge-reroll-safety-lock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #3b556f;
    border-radius: 9px;
    background: #0d1a2b;
}

.forge-reroll-safety-lock.is-locked {
    border-color: #f59e0b;
    background: rgba(146, 64, 14, 0.16);
}

.forge-reroll-safety-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.forge-reroll-safety-copy > span {
    color: #9fb8d2;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.forge-reroll-safety-copy > strong {
    color: #86efac;
}

.forge-reroll-safety-lock.is-locked .forge-reroll-safety-copy > strong {
    color: #fbbf24;
}

.forge-reroll-safety-copy > small {
    color: #b7c7d9;
    line-height: 1.35;
}

.forge-reroll-safety-form {
    margin: 0;
}

.forge-reroll-safety-form button {
    min-width: 170px;
    white-space: nowrap;
}

.forge-reroll-locked-warning {
    border-color: #f59e0b;
}

.forge-reroll-high-value-warning {
    border-color: #ef4444;
    background: rgba(127, 29, 29, 0.2);
    color: #fecaca;
}

#forge-reroll.is-reroll-locked .forge-lock-options,
#forge-reroll.is-reroll-locked .forge-cost-box {
    opacity: .56;
}

.forge-confirm-reroll-selection [data-forge-confirm-skip-reroll-row][hidden] {
    display: none !important;
}

.forge-rarity-panel {
    margin-top: 22px;
    padding: 16px;
    border: 1px solid #6d28d9;
    border-radius: 9px;
    background: rgba(88, 28, 135, 0.15);
}

.forge-rarity-panel h3 {
    margin-top: 0;
}

.forge-tempering-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
    cursor: pointer;
    list-style: none;
}

.forge-tempering-summary::-webkit-details-marker { display: none; }
.forge-tempering-summary h3 { margin: 0; }
.forge-tempering-summary:focus-visible { outline: 2px solid #a78bfa; outline-offset: 5px; border-radius: 3px; }
.forge-tempering-toggle { display: inline-flex; align-items: center; gap: 9px; color: #c4b5fd; font-size: 12px; flex-shrink: 0; }
.forge-tempering-toggle::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.forge-tempering-panel[open] .forge-tempering-toggle::after { transform: rotate(225deg) translate(-2px, -1px); }
.forge-tempering-panel:not([open]) .forge-tempering-hide,
.forge-tempering-panel[open] .forge-tempering-show { display: none; }

.forge-chance {
    color: #fbbf24;
    font-weight: 700;
}

.forge-use-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0 20px;
    padding: 10px 12px;
    border: 1px solid #374151;
    border-radius: 8px;
    background: #111827;
}

.forge-rarity-bonus {
    margin: -10px 0 20px;
    color: #c4b5fd;
    font-size: 14px;
}

.forge-rarity-bonus strong {
    color: #ddd6fe;
}

.forge-lock-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #374151;
    border-radius: 8px;
}

.forge-lock-options legend {
    padding: 0 6px;
    color: #e5e7eb;
    font-weight: 700;
}

.forge-lock-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.forge-lock-options input {
    width: auto;
    flex-shrink: 0;
}

.forge-clear-locks {
    align-self: flex-start;
}

.forge-lock-options label:has(input:disabled) {
    opacity: 0.6;
    cursor: default;
}

.forge-cost-box[data-reroll-costs][hidden] {
    display: none;
}

.forge-reroll-material {
    display: grid;
    flex-basis: 100%;
    min-width: 0;
    gap: 8px;
}

.forge-reroll-material select {
    width: 100%;
    max-width: 420px;
    min-width: 0;
}

.forge-lock-options .item-stat-roll {
    font-size: 11px;
}

.forge-cost-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.forge-cost-box span,
.forge-cost-box strong {
    padding: 6px 9px;
    border-radius: 6px;
    background: #111827;
}

.forge-cost-value {
    display: inline-block;
}

.forge-cost-missing,
.forge-cost-missing span {
    color: #f87171 !important;
}

.forge-remaining,
.forge-limit-message {
    display: block;
    margin-top: 8px;
    color: #9ca3af;
}

button:disabled {
    background: #4b5563;
    cursor: not-allowed;
    opacity: 0.65;
}

.forge-balances {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.forge-balances div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
    border: 1px solid #374151;
    border-radius: 8px;
    background: #111827;
}

.forge-balances span {
    color: #9ca3af;
    font-size: 13px;
}

.forge-balances strong {
    color: #f9fafb;
    font-size: 18px;
}

@media (max-width: 700px) {
    .inventory-table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .forge-layout {
        grid-template-columns: 1fr;
    }

    .equipment-grid {
        grid-template-columns: 1fr;
    }

    .forge-item-link {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .forge-stat-row {
        grid-template-columns: 1fr auto;
    }

    .forge-upgrade-form {
        grid-column: 1 / -1;
        align-items: stretch;
    }

    .forge-inline-cost {
        text-align: left;
    }

    .forge-balances {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparison-tooltip {
        left: -40px;
    }

    .comparison-columns {
        grid-template-columns: 1fr;
    }

    .comparison-item + .comparison-item {
        margin-top: 12px;
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid #374151;
        border-left: none;
    }

    .inventory-section-heading,
    .item-system-modal-header,
    .inventory-modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-bulk-dismantle-actions {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
    }

    .inventory-bulk-dismantle-actions button {
        width: 100%;
    }

    .inventory-bulk-dismantle-actions {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
    }

    .inventory-bulk-dismantle-actions button {
        width: 100%;
    }

    .inventory-page-heading {
        grid-template-columns: 1fr;
    }

    .inventory-page-heading .page-title-center,
    .inventory-page-actions {
        grid-column: 1;
    }

    .inventory-page-actions {
        justify-self: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .item-system-guide-grid,
    .item-system-guide-grid.gathering {
        grid-template-columns: 1fr;
    }

    .combat-roll-pools-heading {
        display: grid;
    }

    .combat-roll-counts {
        justify-content: flex-start;
    }

    .combat-roll-slot-grid {
        grid-template-columns: 1fr;
    }

    .inventory-filter-bar {
        grid-template-columns: 1fr;
    }

    .inventory-pagination {
        justify-content: center;
    }

    .inventory-pagination span.inventory-pagination-summary {
        flex-basis: 100%;
        margin-right: 0;
        text-align: center;
    }
}
/* Battle */
.battle-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.battle-monster-overview {
    max-width: 620px;
    margin: 0 auto;
}

.battle-top-section {
    margin: 0 auto 20px;
    max-width: 900px;
}

.battle-top-section.tutorial-action-coach {
    margin-bottom: 104px;
}

.battle-monster-select {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.battle-monster-select input {
    width: 150px;
}

.battle-monster-select select {
    min-width: 190px;
}

.combat-arena {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    border-color: rgba(81, 120, 168, 0.55);
    background:
        radial-gradient(circle at 12% 0, rgba(34, 197, 94, 0.10), transparent 32%),
        radial-gradient(circle at 88% 0, rgba(239, 68, 68, 0.11), transparent 32%),
        linear-gradient(145deg, rgba(17, 31, 51, 0.99), rgba(9, 19, 34, 0.99));
}

.combat-arena::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(125, 211, 252, 0.22);
    pointer-events: none;
}

.combat-arena-heading,
.combat-arena-status-wrap,
.combatant-identity,
.combat-hp-row,
.combat-rewards-heading {
    display: flex;
    align-items: center;
}

.combat-arena-heading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(105, 132, 169, 0.24);
}

.combat-arena-controls {
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0;
}

.combat-arena-controls > div:first-of-type {
    display: grid;
    gap: 5px;
}

.combat-arena-controls label {
    color: #91a9c8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.combat-arena-controls input {
    width: 125px;
}

.combat-arena-heading h2 {
    margin: 2px 0 0;
}

.combat-arena-kicker,
.combat-rewards-heading > span,
.combatant-identity > div > span,
.combat-hp-row > span,
.combat-battle-facts span,
.combat-reward-card > span {
    color: #7dd3fc;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.combat-arena-status-wrap {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.combat-arena-live-state,
.combat-arena-result {
    padding: 6px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.combat-arena-live-state.running {
    border-color: rgba(56, 189, 248, 0.55);
    color: #7dd3fc;
    background: rgba(14, 116, 144, 0.16);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.12);
}

.combat-arena-live-state.idle,
.combat-arena-result.ready {
    border-color: rgba(148, 163, 184, 0.34);
    color: #a9b8cc;
    background: rgba(71, 85, 105, 0.14);
}

.combat-arena-result.victory {
    border-color: rgba(74, 222, 128, 0.55);
    color: #86efac;
    background: rgba(22, 163, 74, 0.16);
}

.combat-arena-result.defeat {
    border-color: rgba(248, 113, 113, 0.58);
    color: #fca5a5;
    background: rgba(185, 28, 28, 0.18);
}

.combat-arena-result.running {
    border-color: rgba(250, 204, 21, 0.5);
    color: #fde047;
    background: rgba(161, 98, 7, 0.16);
}

.combat-duel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.combatant-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(87, 113, 148, 0.42);
    border-radius: 12px;
    background: rgba(7, 17, 31, 0.72);
}

.combatant-card.player {
    box-shadow: inset 3px 0 0 rgba(34, 197, 94, 0.72);
}

.combatant-card.monster {
    box-shadow: inset -3px 0 0 rgba(239, 68, 68, 0.72);
}

.combatant-identity {
    gap: 10px;
    min-width: 0;
}

.combatant-identity > div {
    display: grid;
    min-width: 0;
}

.combatant-identity strong {
    overflow: hidden;
    font-size: 1.08rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combatant-identity small {
    margin-left: auto;
    color: #9fb3cd;
    white-space: nowrap;
}

.combatant-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(125, 211, 252, 0.4);
    border-radius: 10px;
    color: #e0f2fe;
    font-weight: 900;
    background: linear-gradient(145deg, rgba(14, 116, 144, 0.48), rgba(30, 41, 59, 0.88));
}

.combatant-card.monster .combatant-icon {
    border-color: rgba(248, 113, 113, 0.4);
    background: linear-gradient(145deg, rgba(153, 27, 27, 0.46), rgba(30, 41, 59, 0.88));
}

.combat-hp-row {
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px;
}

.combat-hp-row strong {
    color: #e6edf7;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.combat-hp-track {
    height: 17px;
    margin-top: 7px;
    overflow: hidden;
    border: 1px solid rgba(113, 142, 179, 0.4);
    border-radius: 999px;
    background: #050c17;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}

.combat-hp-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 280ms ease;
}

.combatant-card.player .combat-hp-fill {
    background: linear-gradient(90deg, #15803d, #22c55e 72%, #86efac);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}

.combatant-card.monster .combat-hp-fill {
    background: linear-gradient(90deg, #7f1d1d, #dc2626 72%, #fb7185);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.32);
}

.combatant-performance {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 11px;
}

.combatant-performance > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 6px;
    border: 1px solid rgba(88, 115, 151, 0.27);
    border-radius: 8px;
    text-align: center;
    background: rgba(11, 24, 42, 0.68);
}

.combatant-performance span {
    color: #86a3c6;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.combatant-performance strong {
    overflow: hidden;
    color: #ecf4ff;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combat-versus {
    display: grid;
    place-items: center;
}

.combat-versus span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(251, 191, 36, 0.42);
    border-radius: 50%;
    color: #facc15;
    font-size: 0.86rem;
    font-weight: 900;
    background: rgba(30, 41, 59, 0.92);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.12);
}

.combat-battle-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.combat-battle-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(88, 115, 151, 0.3);
    border-radius: 9px;
    background: rgba(11, 24, 42, 0.72);
}

.combat-battle-facts strong {
    font-variant-numeric: tabular-nums;
}

.combat-battle-facts.combat-battle-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.combat-rewards-heading {
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(105, 132, 169, 0.24);
}

.combat-rewards-heading small {
    color: #8297b3;
}

.combat-reward-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 0.75fr)) minmax(220px, 1.75fr);
    gap: 9px;
    margin-top: 10px;
}

.combat-reward-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(88, 115, 151, 0.34);
    border-radius: 10px;
    background: rgba(8, 19, 34, 0.82);
}

.combat-reward-card strong {
    overflow: hidden;
    color: #e5eefb;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combat-reward-card.exp strong {
    color: #c4b5fd;
}

.combat-reward-card.gold strong {
    color: #facc15;
}

.combat-reward-card.crystal strong {
    color: #67e8f9;
}

.rarity-text-none {
    color: #8292a8 !important;
}

.rarity-text-common {
    color: #d1d5db !important;
}

.rarity-text-uncommon {
    color: #4ade80 !important;
}

.rarity-text-rare {
    color: #60a5fa !important;
}

.rarity-text-epic {
    color: #c084fc !important;
}

.rarity-text-legendary {
    color: #fbbf24 !important;
    text-shadow: 0 0 9px rgba(251, 191, 36, 0.22);
}

.rarity-text-mystic {
    color: var(--rarity-mystic-color) !important;
    text-shadow: 0 0 9px rgba(var(--rarity-mystic-rgb), 0.35);
}

.battle-log-item {
    font-weight: 700;
    cursor: help;
}

.gathering-overview {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    border-color: rgba(74, 135, 104, 0.58);
    background:
        radial-gradient(circle at 8% 0, rgba(34, 197, 94, 0.12), transparent 34%),
        radial-gradient(circle at 92% 0, rgba(245, 158, 11, 0.08), transparent 34%),
        linear-gradient(145deg, rgba(16, 34, 43, 0.99), rgba(9, 21, 32, 0.99));
}

.gathering-overview::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(134, 239, 172, 0.2);
    pointer-events: none;
}

.gathering-overview-heading,
.gathering-operation-card,
.gathering-progress-heading,
.gathering-last-heading,
.gathering-last-heading > div {
    display: flex;
    align-items: center;
}

.gathering-overview-heading {
    position: relative;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(101, 145, 125, 0.25);
}

.gathering-overview-heading h2 {
    margin: 2px 0 0;
}

.gathering-overview-kicker,
.gathering-operation-copy > span,
.gathering-target-resource > span,
.gathering-progress-heading > span,
.gathering-stat-grid span,
.gathering-last-heading > div > span,
.gathering-reward-card > span {
    color: #86efac;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.gathering-live-state,
.gathering-result-badge {
    padding: 6px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.gathering-live-state.running {
    border-color: rgba(74, 222, 128, 0.55);
    color: #86efac;
    background: rgba(22, 163, 74, 0.16);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.12);
}

.gathering-live-state.idle {
    border-color: rgba(148, 163, 184, 0.34);
    color: #a9b8cc;
    background: rgba(71, 85, 105, 0.14);
}

.gathering-operation-card {
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(79, 132, 107, 0.42);
    border-radius: 12px;
    background: rgba(6, 20, 27, 0.7);
    box-shadow: inset 3px 0 0 rgba(34, 197, 94, 0.7);
}

.gathering-method-icon {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(134, 239, 172, 0.42);
    border-radius: 12px;
    color: #dcfce7;
    font-size: 1.05rem;
    font-weight: 900;
    background: linear-gradient(145deg, rgba(22, 163, 74, 0.48), rgba(30, 41, 59, 0.88));
}

.gathering-operation-copy {
    display: grid;
    min-width: 0;
}

.gathering-operation-copy strong {
    margin-top: 2px;
    font-size: 1.08rem;
}

.gathering-operation-copy p {
    margin: 3px 0 0;
    color: #9eb2c6;
}

.gathering-target-resource {
    display: grid;
    min-width: 150px;
    margin-left: auto;
    padding: 9px 12px;
    border-left: 1px solid rgba(101, 145, 125, 0.28);
    text-align: right;
}

.gathering-target-resource strong {
    color: #bbf7d0;
    font-size: 1.06rem;
}

.gathering-progress-heading {
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
}

.gathering-progress-heading strong {
    color: #d9e7df;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.gathering-progress-track {
    height: 15px;
    margin-top: 7px;
    overflow: hidden;
    border: 1px solid rgba(93, 137, 116, 0.42);
    border-radius: 999px;
    background: #040d12;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}

.gathering-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #15803d, #22c55e 68%, #a3e635);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.3);
    transition: width 280ms ease;
}

.gathering-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.gathering-stat-grid > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(80, 126, 105, 0.31);
    border-radius: 9px;
    background: rgba(8, 25, 33, 0.73);
}

.gathering-stat-grid strong {
    overflow: hidden;
    color: #e4f3e9;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gathering-last-heading {
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(101, 145, 125, 0.25);
}

.gathering-last-heading > div {
    gap: 10px;
}

.gathering-last-heading small {
    color: #829b91;
    font-variant-numeric: tabular-nums;
}

.gathering-result-badge.normal {
    border-color: rgba(74, 222, 128, 0.42);
    color: #86efac;
    background: rgba(22, 163, 74, 0.13);
}

.gathering-result-badge.critical {
    border-color: rgba(250, 204, 21, 0.55);
    color: #fde047;
    background: rgba(161, 98, 7, 0.18);
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.1);
}

.gathering-reward-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 0.75fr)) minmax(220px, 1.75fr);
    gap: 9px;
    margin-top: 10px;
}

.gathering-reward-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(80, 126, 105, 0.34);
    border-radius: 10px;
    background: rgba(6, 20, 29, 0.82);
}

.gathering-reward-card strong {
    overflow: hidden;
    color: #e5f4eb;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gathering-reward-card.resource strong {
    color: #86efac;
}

.gathering-reward-card.exp strong {
    color: #c4b5fd;
}

.gathering-reward-card.crystal strong {
    color: #67e8f9;
}


.tutorial-control-target {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.forge-stat-row.tutorial-control-target,
#forge-reroll.tutorial-control-target,
.forge-rarity-panel.tutorial-control-target {
    display: grid;
}

.forge-rarity-panel.tutorial-control-target {
    position: relative;
}

.tutorial-callout {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 80;
    width: min(330px, 78vw);
    padding: 11px 13px;
    border: 1px solid rgba(34, 211, 238, 0.58);
    border-radius: 13px;
    color: #d9f7ff;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), transparent 42%),
        rgba(8, 15, 28, 0.98);
    box-shadow: 0 15px 34px rgba(0, 0, 0, 0.42), 0 0 22px rgba(34, 211, 238, 0.14);
    pointer-events: auto;
}

.tutorial-callout[hidden] {
    display: none;
}

.tutorial-callout::before {
    content: "";
    position: absolute;
    left: 22px;
    top: -7px;
    width: 12px;
    height: 12px;
    border-left: 1px solid rgba(34, 211, 238, 0.58);
    border-top: 1px solid rgba(34, 211, 238, 0.58);
    background: rgba(8, 15, 28, 0.98);
    transform: rotate(45deg);
}

.tutorial-callout-right {
    left: auto;
    right: 0;
}

.tutorial-callout-right::before {
    left: auto;
    right: 22px;
}

.tutorial-callout-close {
    float: right;
    width: 22px;
    height: 22px;
    margin: -4px -5px 4px 8px;
    padding: 0;
    border-radius: 999px;
    color: #d9f7ff;
    font-size: 14px;
    line-height: 1;
    background: rgba(71, 85, 105, 0.86);
}

.tutorial-callout-close:hover {
    background: rgba(34, 211, 238, 0.34);
}

.combat-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.combat-stat-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.battle-progress-heading,
.battle-log-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.battle-log-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.battle-log-heading-actions .game-guide-button {
    margin-top: 0;
}

.battle-progress-track {
    position: relative;
    height: 42px;
    overflow: hidden;
    border: 1px solid #7c5d2d;
    border-radius: 8px;
    background: #130f0b;
}

.battle-running-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
}

.battle-balance-note {
    text-align: center;
    color: #9ca3af;
}

.battle-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8d251f, #d3852b);
    will-change: width;
}

.battle-progress-track > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 1px 3px #000;
}

.battle-log-list {
    display: grid;
    gap: 8px;
}

.battle-log-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    padding: 7px 10px;
    border-left: 4px solid;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.battle-log-result {
    font-size: 0.98rem;
}

.battle-log-time {
    color: #8fa5bf;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.battle-log-text {
    min-width: 0;
    color: #c6d3e4;
    line-height: 1.35;
}

.battle-log-entry.victory {
    border-color: #4caf72;
}

.battle-log-entry.victory .battle-log-result {
    color: #6bd18f;
}

.battle-log-entry.defeat {
    border-color: #d04f4f;
}

.battle-log-entry.defeat .battle-log-result {
    color: #ef6b6b;
}

.gathering-log-entry {
    border-color: #6b8e46;
}

.gathering-log-entry.critical {
    border-color: #e6b84a;
    background: rgba(230, 184, 74, 0.08);
}

.gathering-log-entry.critical .battle-log-result {
    color: #f2cc67;
}

@media (max-width: 900px) {
    .battle-comparison {
        grid-template-columns: 1fr;
    }

    .battle-monster-select,
    .battle-running-meta {
        flex-wrap: wrap;
    }

    .battle-top-section.tutorial-action-coach {
        margin-bottom: 20px;
    }

    .battle-monster-select .tutorial-control-target {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .tutorial-callout,
    .tutorial-callout-right {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: 420px;
        margin: 4px auto 0;
    }

    .tutorial-callout::before,
    .tutorial-callout-right::before {
        display: none;
    }

    .battle-log-heading,
    .battle-log-heading-actions {
        flex-wrap: wrap;
    }

    .battle-log-entry {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 2px;
    }

    .combat-duel {
        grid-template-columns: 1fr;
    }

    .combat-arena-heading {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .combat-arena-controls {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .combat-versus {
        height: 24px;
    }

    .combat-versus span {
        width: 42px;
        height: 42px;
    }

    .combat-battle-facts,
    .combat-reward-grid,
    .gathering-reward-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gathering-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .combat-arena-heading,
    .combat-rewards-heading,
    .gathering-overview-heading,
    .gathering-last-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .combat-arena-status-wrap {
        justify-content: flex-start;
    }

    .combat-arena-heading {
        display: flex;
    }

    .combat-arena-controls {
        align-items: stretch;
        flex-wrap: wrap;
        width: 100%;
    }

    .combat-arena-controls > div:first-of-type,
    .combat-arena-controls input,
    .combat-arena-controls button {
        width: 100%;
    }

    .combatant-identity {
        flex-wrap: wrap;
    }

    .combatant-identity small {
        width: 100%;
        margin-left: 48px;
    }

    .combatant-performance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .combatant-performance > div:last-child {
        grid-column: 1 / -1;
    }

    .combat-battle-facts,
    .combat-reward-grid,
    .gathering-stat-grid,
    .gathering-reward-grid {
        grid-template-columns: 1fr;
    }

    .gathering-operation-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .gathering-operation-copy {
        flex: 1 1 calc(100% - 62px);
    }

    .gathering-target-resource {
        width: 100%;
        margin-left: 60px;
        padding-left: 0;
        border-left: 0;
        text-align: left;
    }
}

/* Market */
.market-heading,
.market-panel-title,
.market-item-top,
.market-item-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.market-heading {
    margin-bottom: 18px;
}

.market-heading h1,
.market-heading p {
    margin: 0;
}

.market-heading p,
.market-panel-title small,
.market-item-top span,
.market-item-meta,
.market-empty {
    color: #95a0b3;
}

.market-balance,
.market-message {
    padding: 10px 14px;
    border: 1px solid #334155;
    border-radius: 7px;
    background: #172132;
}

.market-balance strong,
.market-gold {
    color: #f1c86a;
}

.market-message {
    margin-bottom: 16px;
}

.market-message.success {
    border-color: #2f7d58;
    color: #70d69d;
}

.market-message.error {
    border-color: #8f3d43;
    color: #f08087;
}

.market-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.market-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.market-tabs a {
    padding: 10px 15px;
    border: 1px solid #273549;
    border-radius: 9px;
    color: #9ca8bc;
    background: #111827;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

.market-tabs a:hover,
.market-tabs a.active {
    color: #66b7ff;
    border-color: #66b7ff;
    background: #17243a;
}

.market-content {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.market-panel {
    padding: 15px;
    border: 1px solid #273549;
    border-radius: 10px;
    background: linear-gradient(135deg, #182536, #171f2d);
}

.market-panel-title {
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid #34455e;
    color: #69b9f7;
    font-weight: 700;
    text-transform: uppercase;
}

.market-sell-panel .market-panel-title {
    color: #e7b95f;
}

.market-buy-panel .market-panel-title {
    color: #97d36e;
}

.market-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.market-form-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.market-form-grid-stacked {
    grid-template-columns: 1fr;
}

.market-form-grid.equipment {
    grid-template-columns: minmax(250px, 2fr) 1fr auto;
}

.market-form-grid label {
    display: grid;
    gap: 6px;
    color: #8f9bad;
    font-size: 12px;
    text-transform: uppercase;
}

.market-quantity-field {
    position: relative;
}

.market-percent-buttons {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.market-percent-buttons button {
    flex: 1;
    padding: 3px 5px;
    border: 1px solid #34465f;
    border-radius: 4px;
    color: #8fb8df;
    background: #142033;
    font-size: 10px;
}

.market-percent-buttons button:hover {
    border-color: #66b7ff;
    color: #d8ecff;
}

.market-form-grid input,
.market-form-grid select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #2c3b50;
    border-radius: 6px;
    color: #e6edf7;
    background: #111a29;
}

.market-sell-button,
.market-buy-button,
.market-buy-order-button {
    border-color: #b88938;
    color: #f1c86a;
    background: rgba(184, 137, 56, 0.12);
}

.market-buy-order-button {
    border-color: #7aa957;
    color: #b9ed90;
    background: rgba(122, 169, 87, 0.12);
}

.market-sell-button {
    min-height: 39px;
}

.market-table-wrap {
    overflow-x: auto;
}

.market-table {
    width: 100%;
    border-collapse: collapse;
}

.market-table th,
.market-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #253245;
    white-space: nowrap;
}

.market-table th {
    color: #8f9bad;
    font-size: 12px;
    text-transform: uppercase;
}

.market-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 12px;
}

.market-pagination a,
.market-pagination span {
    min-width: 34px;
    padding: 7px 10px;
    border: 1px solid #2c3b50;
    border-radius: 6px;
    color: #9ca8bc;
    text-align: center;
    text-decoration: none;
    background: #111c2b;
}

.market-pagination a:hover,
.market-pagination .active {
    border-color: #66b7ff;
    color: #d8ecff;
    background: #17243a;
}

.market-pagination span:not(.active) {
    opacity: 0.55;
}

.market-own {
    color: #7f8ba0;
    font-size: 12px;
}

.market-item-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.market-item-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #2d3c51;
    border-radius: 8px;
    background: #111a28;
}

.market-item-top > div {
    display: grid;
    gap: 4px;
}

.market-item-level {
    padding: 5px 8px;
    border-radius: 5px;
    color: #dbe7f7 !important;
    background: #213149;
}

.market-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.market-item-stats span {
    padding: 4px 7px;
    border-radius: 4px;
    color: #b9c9dc;
    background: #1b283a;
    font-size: 12px;
}

.market-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
}

.market-status {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 999px;
    color: #aeb8c8;
    background: #2a3547;
    font-size: 11px;
    text-transform: uppercase;
}

.market-status.active,
.market-status.sold {
    color: #78d9a1;
    background: rgba(47, 125, 88, 0.22);
}

.market-status.cancelled,
.market-status.expired {
    color: #e1878b;
    background: rgba(143, 61, 67, 0.22);
}

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.inline-control-form {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.inline-control-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inline-control-form input {
    min-width: 0;
}

.muted-small {
    color: var(--muted);
    font-size: 0.78rem;
    margin-left: 4px;
}

.market-activity-list {
    display: grid;
}

.market-activity-entry {
    display: grid;
    grid-template-columns: 90px 1.5fr 1fr 130px 150px;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #253245;
}

.market-inline-trade-form {
    display: inline-grid;
    grid-template-columns: 76px auto minmax(110px, auto) auto;
    gap: 6px;
    align-items: center;
}

.market-inline-trade-form input {
    width: 76px;
    min-width: 0;
    padding: 6px 8px;
}

.market-max-quantity {
    padding-inline: 8px;
}

.market-inline-total {
    color: #facc15;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.market-price-fill {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: inherit;
}

.market-price-fill:hover,
.market-price-fill:focus-visible {
    color: #ffe08a;
    text-decoration: underline;
}

.market-item-detail-trigger {
    cursor: pointer;
}

.market-item-detail-trigger:hover,
.market-item-detail-trigger:focus-visible {
    text-decoration: underline;
}

.market-item-modal-panel {
    max-width: min(920px, calc(100vw - 32px));
}

.market-item-modal-body {
    margin-top: 14px;
}

.market-item-modal-tooltip {
    width: 100%;
    border-color: #334155;
}

.market-modal-comparison {
    padding: 12px;
    border: 1px solid #334155;
    border-radius: 12px;
    background: #0b1020;
}

.market-item-modal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.market-item-modal-summary div {
    padding: 10px;
    border: 1px solid #26364d;
    border-radius: 9px;
    background: #101a2a;
}

.market-item-modal-summary span {
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 12px;
    text-transform: uppercase;
}

.market-item-modal-summary strong {
    color: #facc15;
    font-size: 18px;
}

@media (max-width: 760px) {
    .market-modal-comparison {
        grid-template-columns: 1fr;
    }

    .market-item-modal-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .market-layout {
        grid-template-columns: 1fr;
    }

    .market-tabs {
        flex-direction: row;
        overflow-x: auto;
    }

    .market-form-grid,
    .market-form-grid.equipment,
    .market-order-grid,
    .market-item-grid,
    .market-activity-entry {
        grid-template-columns: 1fr;
    }
}

/* Chat */
.chat-page {
    display: grid;
    gap: 16px;
}

.chat-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.chat-heading h1,
.chat-heading p {
    margin: 0;
}

.chat-heading p,
.chat-cooldown-note,
.chat-panel-title span {
    color: #9fb0c6;
}

.chat-layout {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
}

.chat-channel-list {
    display: grid;
    gap: 8px;
    align-self: start;
}

.chat-channel-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #2d3a50;
    border-radius: 8px;
    color: #c9d6e8;
    text-decoration: none;
    background: #111b2a;
}

.chat-channel-list a:hover,
.chat-channel-list a.active {
    color: #ffffff;
    border-color: #2f7df6;
    background: rgba(47, 125, 246, 0.16);
}

.chat-channel-list a.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.chat-channel-list small {
    color: #f2c46d;
    font-size: 11px;
}

.chat-panel {
    min-width: 0;
}

.chat-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #2d3a50;
}

.chat-panel-title h2 {
    margin: 0;
}

.chat-system-note {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #475569;
    border-radius: 8px;
    color: #cbd5e1;
    background: #111827;
}

.chat-messages {
    display: grid;
    align-content: start;
    gap: 2px;
    height: 420px;
    padding: 10px 12px;
    overflow-y: auto;
    border: 1px solid #2d3a50;
    border-radius: 7px;
    background: #0d1522;
}

.chat-message {
    display: block;
    min-width: 0;
    padding: 2px 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    line-height: 1.35;
}

.chat-message.own {
    border: 0;
    background: transparent;
}

.chat-message.chat-mentioned-message {
    padding: 5px 7px;
    border-left: 3px solid #22d3ee;
    border-radius: 5px;
    background: rgba(34, 211, 238, 0.12);
    animation: chat-mentioned-message-flash 2.4s ease-out;
}

@keyframes chat-mentioned-message-flash {
    0%, 30% { background: rgba(34, 211, 238, 0.28); }
    100% { background: rgba(34, 211, 238, 0.12); }
}

.chat-message-meta {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 4px;
    margin-right: 4px;
    margin-bottom: 0;
    color: #9fb0c6;
    font-size: 12px;
    white-space: nowrap;
}

.chat-message-meta time {
    color: #6f8fb5;
    font-variant-numeric: tabular-nums;
}

.chat-message-meta strong,
.chat-player-name {
    color: #67e8f9;
}

.chat-player-name {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-weight: 700;
    background: transparent;
    cursor: pointer;
}

.chat-player-name:hover {
    color: #ffffff;
    text-decoration: underline;
}

.chat-system-name,
.chat-system-name:hover {
    cursor: default;
    color: #fbbf24;
    text-decoration: none;
}

.chat-message-text {
    display: inline;
    color: #e7eef9;
    font-size: 13px;
    overflow-wrap: anywhere;
    min-width: 0;
}

.chat-system-link {
    color: #bfdbfe;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(125, 211, 252, 0.55);
    text-underline-offset: 2px;
}

.chat-system-link:hover,
.chat-system-link:focus-visible {
    color: #ffffff;
    text-decoration-color: #67e8f9;
}

.chat-action-message .chat-action-marker,
.chat-action-message .chat-player-name,
.chat-action-message .chat-message-text {
    color: #c4b5fd;
}

.chat-action-message .chat-action-marker {
    font-weight: 900;
}

.chat-action-message .chat-message-text {
    font-style: italic;
}

.chat-message.chat-officer-message {
    padding-left: 6px;
    border-left: 2px solid rgba(192, 132, 252, 0.62);
    background: rgba(168, 85, 247, 0.055);
}

.chat-officer-message .chat-player-name,
.chat-officer-message .chat-message-text {
    color: #eadcff;
}

.chat-officer-message .chat-message-meta time {
    color: #a78bca;
}

.chat-officer-marker {
    color: #c084fc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chat-attachment-link {
    display: inline;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #67e8f9;
    background: transparent;
    font: inherit;
    font-weight: 800;
    line-height: inherit;
    vertical-align: baseline;
    text-decoration: none;
    cursor: pointer;
}

.chat-attachment-link:hover,
.chat-attachment-link:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.chat-attachment-link.rarity-uncommon,
.chat-attachment-tooltip-name.rarity-uncommon {
    color: #4ade80;
}

.chat-attachment-link.rarity-rare,
.chat-attachment-tooltip-name.rarity-rare {
    color: #60a5fa;
}

.chat-attachment-link.rarity-epic,
.chat-attachment-tooltip-name.rarity-epic {
    color: #c084fc;
}

.chat-attachment-link.rarity-legendary,
.chat-attachment-tooltip-name.rarity-legendary {
    color: #fb923c;
}

.chat-attachment-link.rarity-mystic,
.chat-attachment-tooltip-name.rarity-mystic {
    color: var(--rarity-mystic-color);
}

.chat-attachment-tooltip {
    position: fixed;
    z-index: 240;
    width: min(360px, calc(100vw - 16px));
    padding: 12px;
    border: 1px solid #3d5475;
    border-radius: 9px;
    color: #dbeafe;
    background: #081525;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.58);
    pointer-events: none;
}

.chat-attachment-tooltip.is-comparison {
    width: min(720px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    padding: 14px;
    overflow: hidden;
}

.chat-attachment-tooltip.is-comparison .chat-attachment-tooltip-name {
    margin: 0 0 8px;
}

.chat-attachment-tooltip.is-comparison .chat-comparison-meta {
    font-size: 11px;
    line-height: 1.5;
}

.chat-attachment-tooltip.is-comparison .comparison-stats {
    margin-top: 10px;
}

.chat-attachment-tooltip.is-comparison .comparison-stats > div {
    align-items: baseline;
}

.chat-attachment-tooltip[hidden] {
    display: none;
}

.chat-attachment-tooltip-kind {
    color: #7dd3fc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-attachment-tooltip-name {
    margin-top: 2px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.chat-attachment-tooltip-summary {
    margin-top: 3px;
    color: #b7c9df;
    font-size: 12px;
}

.chat-attachment-tooltip-details {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #263b57;
}

.chat-attachment-tooltip-details > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #8eabc9;
    font-size: 11px;
}

.chat-attachment-tooltip-details strong {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    color: #f8fbff;
    text-align: right;
}

.chat-attachment-tooltip-roll {
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.72;
}

.chat-attachment-tooltip p {
    margin: 9px 0 0;
    color: #9fb6d0;
    font-size: 11px;
}

.chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}

.chat-form label {
    display: grid;
    gap: 5px;
    color: #9fb0c6;
    font-size: 12px;
    text-transform: uppercase;
}

.chat-form input {
    max-width: none;
}

.chat-emoji-control {
    position: relative;
    align-self: end;
}

.chat-emoji-toggle {
    display: inline-grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid #334b6c;
    border-radius: 9px;
    background: #0b1728;
    font-size: 1.2rem;
    line-height: 1;
}

.chat-emoji-toggle:hover,
.chat-emoji-toggle[aria-expanded="true"] {
    border-color: #38bdf8;
    background: rgba(37, 99, 235, 0.28);
}

.chat-emoji-picker {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(8, 34px);
    gap: 4px;
    width: max-content;
    max-width: calc(100vw - 28px);
    max-height: min(270px, 48vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid #334b6c;
    border-radius: 11px;
    background: rgba(8, 18, 33, 0.98);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.48);
}

.chat-emoji-picker[hidden] {
    display: none;
}

.chat-emoji-group-label {
    grid-column: 1 / -1;
    padding: 3px 2px 1px;
    color: #8ea7c7;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.chat-emoji-picker button {
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 1.22rem;
    line-height: 1;
}

.chat-emoji-picker button:hover,
.chat-emoji-picker button:focus-visible {
    background: rgba(56, 189, 248, 0.18);
}

.chat-emoji-picker .chat-image-emote-option {
    overflow: visible;
}

.chat-image-emote {
    display: inline-block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    user-select: none;
}

.chat-message-text .chat-image-emote {
    width: 32px;
    height: 32px;
    margin: 0 2px;
}

.chat-image-emote-music {
    transform-origin: 50% 72%;
    animation: chat-image-emote-music 620ms ease-in-out infinite alternate;
}

@keyframes chat-image-emote-music {
    0% {
        transform: translateY(1px) rotate(-5deg) scale(0.97);
    }

    100% {
        transform: translateY(-2px) rotate(5deg) scale(1.03);
    }
}

.chat-image-emote-riot {
    transform-origin: 50% 82%;
    animation: chat-image-emote-riot 420ms ease-in-out infinite alternate;
}

@keyframes chat-image-emote-riot {
    0% {
        transform: translateX(-1px) rotate(-4deg) scale(0.98);
    }

    100% {
        transform: translateX(1px) translateY(-2px) rotate(4deg) scale(1.03);
    }
}

.chat-image-emote-loot {
    transform-origin: 50% 88%;
    animation: chat-image-emote-loot 780ms cubic-bezier(0.35, 0, 0.2, 1) infinite;
}

@keyframes chat-image-emote-loot {
    0%, 100% {
        transform: translateY(1px) scale(0.96);
    }

    45% {
        transform: translateY(-3px) scale(1.04);
    }
}

.chat-image-emote-crit {
    transform-origin: 50% 50%;
    animation: chat-image-emote-crit 520ms ease-in-out infinite alternate;
}

@keyframes chat-image-emote-crit {
    0% {
        filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.45));
        transform: rotate(-2deg) scale(0.92);
    }

    100% {
        filter: drop-shadow(0 0 6px rgba(232, 121, 249, 0.85));
        transform: rotate(2deg) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-image-emote-music,
    .chat-image-emote-riot,
    .chat-image-emote-loot,
    .chat-image-emote-crit {
        animation: none;
    }
}

@media (max-width: 480px) {
    .chat-emoji-picker {
        grid-template-columns: repeat(6, 34px);
        max-height: min(250px, 42vh);
    }
}

.chat-selected-attachment {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: -4px;
    color: #8da8c6;
    font-size: 11px;
}

.chat-selected-attachment[hidden] {
    display: none;
}

.chat-selected-attachment strong {
    overflow: hidden;
    color: #67e8f9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-selected-attachment button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #475569;
    border-radius: 999px;
    color: #cbd5e1;
    background: transparent;
    line-height: 1;
}

.chat-link-hint {
    margin: 8px 0 12px;
    color: #8fa8c3;
    font-size: 12px;
}

.chat-link-hint kbd {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid #415675;
    border-bottom-width: 2px;
    border-radius: 5px;
    color: #dbeafe;
    background: #142238;
    font: inherit;
    font-weight: 800;
}

.chat-link-hint-touch {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .chat-link-hint-pointer {
        display: none;
    }

    .chat-link-hint-touch {
        display: inline;
        color: #c4b5fd;
        font-weight: 800;
    }
}

.chat-link-source {
    cursor: pointer;
}

.chat-link-post-button {
    display: none;
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
    .chat-link-post-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 5px 9px;
        border: 1px solid rgba(34, 211, 238, 0.72);
        border-radius: 7px;
        color: #cffafe;
        background: rgba(8, 47, 73, 0.82);
        font-size: 0.64rem;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
    }

    .chat-link-source > .chat-link-post-button,
    [data-mobile-equipped-card] > .chat-link-post-button {
        width: 100%;
        margin-top: 5px;
    }

    .forge-selected-item > .chat-link-post-button {
        width: 100%;
        margin: 4px 0 5px;
    }
}

.chat-feedback {
    margin-top: 10px;
    color: #86efac;
}

.chat-feedback.error {
    color: #f87171;
}

.persistent-chat {
    position: fixed;
    right: calc(254px + var(--safe-area-right));
    bottom: var(--safe-area-bottom);
    left: 220px;
    z-index: 80;
    --persistent-chat-message-height: 108px;
    max-height: min(72vh, 720px);
    border-top: 1px solid #334155;
    background: rgba(7, 12, 22, 0.98);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
}

.persistent-chat-toggle {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 92px;
    padding: 6px 12px;
    border: 1px solid rgba(56, 189, 248, 0.65);
    border-radius: 999px;
    color: #67e8f9;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 0 0 1px rgba(47, 125, 246, 0.12) inset;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: auto;
    touch-action: manipulation;
}

.persistent-chat-toggle:hover {
    color: #ffffff;
    border-color: #22d3ee;
    background: rgba(47, 125, 246, 0.28);
}

.persistent-chat-size-controls {
    display: none;
}

.persistent-chat-toolbar-label {
    display: none;
}

.persistent-chat.chat-collapsed {
    right: calc(18px + var(--safe-area-right));
    bottom: calc(18px + var(--safe-area-bottom));
    left: auto;
    width: auto;
    max-height: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.persistent-chat.chat-collapsed .persistent-chat-toggle {
    position: static;
    min-width: 64px;
    padding: 8px 12px;
    border-color: rgba(34, 211, 238, 0.72);
    background: rgba(8, 15, 28, 0.96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(34, 211, 238, 0.12);
}

.persistent-chat.chat-collapsed .persistent-chat-resizer,
.persistent-chat.chat-collapsed .persistent-chat-size-controls,
.persistent-chat.chat-collapsed .persistent-chat-toolbar-label,
.persistent-chat.chat-collapsed .persistent-chat-tabs,
.persistent-chat.chat-collapsed .persistent-chat-body {
    display: none;
}

.persistent-chat-resizer {
    position: absolute;
    top: -12px;
    right: 132px;
    left: 0;
    width: auto;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: ns-resize;
    z-index: 2;
}

.persistent-chat-resizer::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 72px;
    height: 3px;
    border-radius: 999px;
    background: rgba(111, 143, 190, 0.55);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 160ms ease;
}

.persistent-chat:hover .persistent-chat-resizer::before,
.persistent-chat.resizing .persistent-chat-resizer::before {
    opacity: 1;
}

.persistent-chat-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 118px 6px 10px;
    border-bottom: 1px solid #223049;
}

@media (max-width: 760px), (pointer: coarse) {
    .persistent-chat.chat-collapsed {
        right: calc(10px + var(--safe-area-right));
        bottom: calc(10px + var(--safe-area-bottom));
    }

    .persistent-chat.chat-collapsed .persistent-chat-toggle {
        min-width: 0;
        padding: 7px 10px;
        font-size: 0.75rem;
    }

    .persistent-chat:not(.chat-collapsed) {
        padding-top: 40px;
    }

    .persistent-chat-toolbar-label {
        position: absolute;
        top: 13px;
        left: 12px;
        display: block;
        color: #8ea7c7;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        line-height: 1;
        text-transform: uppercase;
    }

    .persistent-chat-size-controls {
        position: absolute;
        top: 6px;
        right: 112px;
        z-index: 21;
        display: flex;
        gap: 0;
        overflow: hidden;
        border: 1px solid #334b6c;
        border-radius: 9px;
        background: rgba(15, 30, 51, 0.96);
    }

    .persistent-chat-size-controls button {
        display: inline-grid;
        width: 30px;
        min-width: 30px;
        height: 28px;
        padding: 0;
        place-items: center;
        border: 0;
        border-radius: 0;
        color: #dcecff;
        background: transparent;
        font-size: 1.15rem;
        font-weight: 900;
        line-height: 1;
        touch-action: manipulation;
    }

    .persistent-chat-size-controls button + button {
        border-left: 1px solid #334b6c;
    }

    .persistent-chat-size-controls button:active {
        border-color: #38bdf8;
        background: rgba(37, 99, 235, 0.42);
    }

    .persistent-chat-resizer {
        top: -16px;
        right: 0;
        height: 16px;
        touch-action: none;
    }

    .persistent-chat-resizer::before {
        top: 6px;
        width: 56px;
        opacity: 1;
    }

    .persistent-chat .persistent-chat-tabs {
        padding-right: 10px;
    }
}

.persistent-chat-tabs button {
    width: auto;
    padding: 6px 12px;
    border: 1px solid #2d3a50;
    border-radius: 999px;
    color: #c9d6e8;
    background: #111b2a;
}

.persistent-chat-tabs button:hover,
.persistent-chat-tabs button.active {
    color: #ffffff;
    border-color: #2f7df6;
    background: rgba(47, 125, 246, 0.18);
}

.persistent-chat-tabs button[data-chat-channel-link="officer"] {
    border-color: rgba(192, 132, 252, 0.42);
    color: #e9d5ff;
}

.persistent-chat-tabs button[data-chat-channel-link="officer"]:hover,
.persistent-chat-tabs button[data-chat-channel-link="officer"].active {
    border-color: #c084fc;
    background: rgba(168, 85, 247, 0.17);
}

.persistent-chat-tabs button.has-unread:not(.active) {
    color: #ffffff;
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.22);
}

.persistent-chat-tabs button.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.persistent-chat-tabs button[hidden] {
    display: none !important;
}

.persistent-chat-tabs small {
    margin-left: 4px;
    color: #f2c46d;
}

.persistent-chat-tabs #chat-status {
    margin-left: auto;
    color: #78d9a1;
    font-size: 12px;
}

.persistent-chat-body {
    padding: 6px 10px 8px;
}

.persistent-chat .chat-messages {
    height: var(--persistent-chat-message-height);
    padding: 5px 7px;
}

.persistent-chat .chat-message {
    padding: 1px 2px;
}

.persistent-chat .chat-message-meta {
    margin-bottom: 0;
}

.persistent-chat .chat-form {
    margin-top: 5px;
}

.chat-player-menu {
    position: fixed;
    z-index: 120;
    display: grid;
    min-width: 130px;
    max-height: calc(100dvh - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #334155;
    border-radius: 9px;
    background: #0f172a;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
}

.chat-player-menu[hidden] {
    display: none;
}

.chat-player-menu button {
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #223049;
    border-radius: 0;
    color: #dbe7f7;
    background: transparent;
    text-align: left;
}

.chat-player-menu button:last-child {
    border-bottom: 0;
}

.chat-player-menu button:hover {
    color: #ffffff;
    background: rgba(47, 125, 246, 0.18);
}

.guild-member-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    white-space: nowrap;
}

.guild-member-sort-button:hover,
.guild-member-sort-button:focus-visible {
    background: transparent;
    color: #67e8f9;
}

.guild-member-sort-button span::before {
    content: "↕";
    color: #64748b;
    font-size: 11px;
}

[data-guild-member-sort-column][aria-sort="descending"] .guild-member-sort-button span::before {
    content: "↓";
    color: #67e8f9;
}

[data-guild-member-sort-column][aria-sort="ascending"] .guild-member-sort-button span::before {
    content: "↑";
    color: #67e8f9;
}

.chat-wire-confirm-modal[hidden] {
    display: none;
}

.chat-report-modal[hidden] {
    display: none;
}

.chat-report-modal {
    position: fixed;
    inset: 0;
    z-index: 270;
    display: grid;
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.chat-report-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.86);
    backdrop-filter: blur(4px);
}

.chat-report-panel {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid rgba(248, 113, 113, 0.55);
    border-radius: 14px;
    background: radial-gradient(circle at top left, rgba(220, 38, 38, 0.13), transparent 44%), #0f172a;
    color: #dbe7f7;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68);
}

.chat-report-panel > p {
    color: #aebed2;
}

.chat-report-panel form {
    display: grid;
    gap: 12px;
}

.chat-report-panel label {
    display: grid;
    gap: 6px;
}

.chat-report-panel select,
.chat-report-panel textarea {
    width: 100%;
}

.chat-report-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(248, 113, 113, 0.5);
    border-radius: 12px;
    background: rgba(153, 27, 27, 0.2);
    color: #fca5a5;
    font-size: 24px;
    font-weight: 800;
}

.chat-report-target {
    padding: 10px 12px;
    border: 1px solid #263b58;
    border-radius: 9px;
    background: rgba(2, 6, 23, 0.5);
}

body.chat-report-open {
    overflow: hidden;
}

.account-deletion-page {
    max-width: 920px;
    margin-inline: auto;
}

.account-deletion-form {
    max-width: 620px;
    margin-top: 18px;
}

.account-deletion-confirm-check {
    display: flex !important;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 9px;
    background: rgba(127, 29, 29, 0.12);
}

.account-deletion-confirm-check input {
    flex: 0 0 auto;
    width: auto;
    margin-top: 2px;
}

.admin-review-list {
    display: grid;
    gap: 12px;
}

.admin-review-card {
    padding: 14px;
    border: 1px solid #30445f;
    border-radius: 10px;
    background: rgba(10, 25, 45, 0.72);
}

.admin-review-card.status-open,
.admin-review-card.status-pending {
    border-color: rgba(250, 204, 21, 0.48);
}

.admin-review-card.status-reviewing {
    border-color: rgba(56, 189, 248, 0.5);
}

.admin-review-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-review-heading > div {
    display: grid;
    gap: 3px;
}

.admin-review-heading span,
.admin-review-facts dt {
    color: #8fa6c3;
    font-size: 12px;
}

.admin-review-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.admin-review-facts > div {
    padding: 8px 10px;
    border: 1px solid #263b58;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.4);
}

.admin-review-facts dt,
.admin-review-facts dd {
    margin: 0;
}

.admin-review-facts dd {
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.admin-review-evidence {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #38bdf8;
    background: rgba(2, 6, 23, 0.46);
}

.admin-review-evidence span {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.admin-review-form {
    display: grid;
    grid-template-columns: minmax(130px, 0.45fr) minmax(220px, 1.55fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 760px) {
    .admin-review-form {
        grid-template-columns: 1fr;
    }
}

.chat-wire-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 20px;
}

.chat-wire-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(4px);
}

.chat-wire-confirm-panel {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    padding: 22px;
    border: 1px solid #334e72;
    border-radius: 14px;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.11), transparent 42%),
        #0f172a;
    color: #dbe7f7;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68);
}

.chat-wire-confirm-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-wire-confirm-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(34, 211, 238, 0.45);
    border-radius: 12px;
    background: rgba(8, 145, 178, 0.16);
    color: #67e8f9;
    font-size: 24px;
    font-weight: 800;
}

.chat-wire-confirm-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #67e8f9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.chat-wire-confirm-heading h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 22px;
}

.chat-wire-confirm-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 20px 0 12px;
}

.chat-wire-confirm-summary > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid #263b58;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.5);
}

.chat-wire-confirm-summary span {
    display: block;
    margin-bottom: 5px;
    color: #8fa6c3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-wire-confirm-summary strong {
    display: block;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: 15px;
}

.chat-wire-confirm-warning {
    margin: 0;
    color: #aebed2;
    font-size: 13px;
    line-height: 1.45;
}

.chat-wire-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    margin-top: 20px;
}

.chat-wire-confirm-actions button {
    min-height: 42px;
}

dialog.forge-confirm-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    box-sizing: border-box;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

dialog.forge-confirm-dialog:not([open]) { display: none; }
dialog.forge-confirm-dialog::backdrop {
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(4px);
}
body.forge-confirm-open { overflow: hidden; }

body.chat-wire-confirm-open {
    overflow: hidden;
}

body.title-unlock-open {
    overflow: hidden;
}

.title-unlock-modal {
    z-index: 275;
}

.title-unlock-modal .chat-wire-confirm-panel {
    border-color: rgba(250, 204, 21, 0.65);
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.18), transparent 44%),
        radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.14), transparent 45%),
        #0f172a;
}

.title-unlock-modal .chat-wire-confirm-eyebrow {
    color: #fde047;
}

.title-unlock-icon {
    border-color: rgba(250, 204, 21, 0.58);
    background: rgba(161, 98, 7, 0.2);
    color: #fde047;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.72);
}

.title-unlock-message {
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.48);
    color: #e8eef8;
    font-size: 15px;
    line-height: 1.55;
}

@media (max-width: 460px) {
    .chat-wire-confirm-panel {
        padding: 18px;
    }

    .chat-wire-confirm-summary,
    .chat-wire-confirm-actions {
        grid-template-columns: 1fr;
    }
}

.achievement-layout {
    display: grid;
    gap: 18px;
}

.achievement-section {
    display: grid;
    gap: 16px;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 14px;
}

.achievement-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #334155;
    border-radius: 12px;
    background: #0f172a;
}

.achievement-card.complete {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.16) inset;
}

.achievement-card-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.achievement-card h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.achievement-card span {
    color: #aab7cc;
}

.achievement-card strong {
    color: #67e8f9;
    white-space: nowrap;
}

.achievement-progress {
    height: 12px;
    overflow: hidden;
    border: 1px solid #334155;
    border-radius: 999px;
    background: #020617;
}

.achievement-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #2f7df6, #22d3ee);
}

.achievement-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.achievement-targets span {
    padding: 4px 8px;
    border: 1px solid #334155;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.8);
    font-size: 0.82rem;
}

.achievement-targets span.done {
    border-color: rgba(34, 197, 94, 0.65);
    color: #86efac;
}

.ranking-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ranking-tabs a {
    padding: 9px 12px;
    border: 1px solid #334155;
    border-radius: 999px;
    color: #cbd5e1;
    background: #0f172a;
    text-decoration: none;
}

.ranking-tabs a.active,
.ranking-tabs a:hover {
    border-color: #38bdf8;
    color: #ffffff;
    background: rgba(47, 125, 246, 0.22);
}

.ranking-card {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.ranking-table {
    display: grid;
    overflow: hidden;
    border: 1px solid #253247;
    border-radius: 12px;
}

.ranking-row {
    display: grid;
    grid-template-columns: 90px 1fr 180px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #253247;
}

.ranking-row:last-child {
    border-bottom: 0;
}

.ranking-head {
    color: #93c5fd;
    background: rgba(47, 125, 246, 0.12);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ranking-row strong {
    color: #ffffff;
}

.ranking-name-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.ranking-profile-link {
    display: flex;
    align-items: center;
    width: auto;
    min-height: 40px;
    color: #ffffff;
    text-decoration: none;
    overflow-wrap: anywhere;
    touch-action: manipulation;
}

.current-role-summary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #475569;
    border-radius: 999px;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.86);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.current-role-summary-badge.style-mage.state-full {
    border-color: rgba(192, 132, 252, 0.7);
    color: #d8b4fe;
    background: rgba(126, 34, 206, 0.18);
}

.current-role-summary-badge.style-hunter.state-full {
    border-color: rgba(45, 212, 191, 0.7);
    color: #5eead4;
    background: rgba(13, 148, 136, 0.16);
}

.current-role-summary-badge.style-warrior.state-full {
    border-color: rgba(251, 191, 36, 0.7);
    color: #fde68a;
    background: rgba(217, 119, 6, 0.16);
}

.current-role-summary-badge.style-mining.state-full {
    border-color: rgba(96, 165, 250, 0.7);
    color: #93c5fd;
    background: rgba(37, 99, 235, 0.16);
}

.current-role-summary-badge.style-woodcutting.state-full {
    border-color: rgba(74, 222, 128, 0.7);
    color: #86efac;
    background: rgba(22, 163, 74, 0.16);
}

.current-role-summary-badge.style-hunting.state-full {
    border-color: rgba(251, 146, 60, 0.7);
    color: #fdba74;
    background: rgba(234, 88, 12, 0.16);
}

.current-role-summary-badge.style-herbalist.state-full {
    border-color: rgba(163, 230, 53, 0.7);
    color: #bef264;
    background: rgba(101, 163, 13, 0.16);
}

.current-role-summary-badge.state-partial,
.current-role-summary-badge.state-mixed,
.current-role-summary-badge.state-empty {
    color: #94a3b8;
}

.ranking-row .current-role-summary-badge.state-partial,
.ranking-row .current-role-summary-badge.state-mixed,
.ranking-row .current-role-summary-badge.state-empty {
    color: #94a3b8;
    text-align: center;
}

.ranking-profile-link:hover,
.ranking-profile-link:focus-visible {
    color: #67e8f9;
    text-decoration: underline;
}

.ranking-guild-link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 6px;
    border: 1px solid #36536d;
    border-radius: 6px;
    color: #9cecff;
    background: rgba(8, 47, 73, 0.4);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
}

.ranking-guild-link:hover,
.ranking-guild-link:focus-visible {
    border-color: #67e8f9;
    color: #ffffff;
}

.ranking-row span:last-child {
    color: #67e8f9;
    text-align: right;
}

.ranking-score {
    color: #67e8f9;
    text-align: right;
}

@media (max-width: 700px) {
    .ranking-row {
        grid-template-columns: 62px 1fr 100px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media (max-width: 620px) {
    .quest-shop-category-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quest-shop-section-heading,
    .quest-equipment-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .quest-equipment-price {
        width: 100%;
        text-align: left;
    }

    .quest-equipment-preview {
        grid-template-columns: 1fr;
    }
}

/* Gathering selection and native option contrast 0.4.62 */
body.has-side-navigation select,
.battle-monster-select select {
    color: #eef6ff;
    color-scheme: dark;
}

body.has-side-navigation select option,
.battle-monster-select select option {
    color: #eef6ff;
    background: #0b1627;
}

@media (max-width: 760px) {
    .guild-boss-start-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .guild-boss-type-selector {
        grid-template-columns: 1fr;
    }

    .guild-boss-type-button {
        min-height: 44px;
    }
}

@media (max-width: 900px) {
    .chat-heading,
    .chat-layout,
    .chat-form {
        grid-template-columns: 1fr;
    }

    .chat-heading {
        display: grid;
    }

    .chat-channel-list {
        display: flex;
        overflow-x: auto;
    }

    .persistent-chat {
        left: 220px;
        max-height: min(64vh, 520px);
    }

    .persistent-chat-tabs {
        overflow-x: auto;
    }

    .persistent-chat .chat-messages {
        height: var(--persistent-chat-message-height);
    }

    .persistent-chat .chat-form {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .chat-selected-attachment {
        grid-column: 1 / -1;
    }

}

@media (max-width: 760px) {
    .guild-boss-preview-main,
    .guild-boss-preview-rewards {
        grid-template-columns: 1fr;
    }
}

.pet-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(168, 85, 247, 0.18), transparent 34%),
        linear-gradient(135deg, #1f2937, #111827);
}

.pet-dragon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 1px solid #6d28d9;
    border-radius: 18px;
    background: rgba(88, 28, 135, 0.28);
    font-size: 42px;
}

.pet-level-badge {
    display: grid;
    gap: 4px;
    min-width: 120px;
    padding: 12px 16px;
    border: 1px solid #334155;
    border-radius: 12px;
    background: rgba(7, 16, 31, 0.72);
    text-align: center;
}

.pet-level-badge span,
.pet-summary-grid span,
.pet-skill-card span {
    color: #9fb0c6;
}

.pet-level-badge strong {
    color: #ffffff;
    font-size: 24px;
}

.pet-panel {
    display: grid;
    gap: 14px;
}

.pet-exp-progress div {
    background: linear-gradient(90deg, #7c3aed, #22d3ee);
}

.pet-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pet-skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.pet-skill-card {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid #223049;
    border-radius: 12px;
    background: #111b2a;
}

.pet-skill-card strong {
    color: #ffffff;
}

.pet-skill-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.pet-skill-card form {
    margin: 0;
}

.pet-skill-card button {
    width: 100%;
}

.pet-skill-reset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid #334155;
    border-radius: 12px;
    background: rgba(7, 16, 31, 0.72);
}

.pet-skill-reset > div {
    display: grid;
    gap: 4px;
}

.pet-skill-reset span {
    color: #9fb0c6;
}

.pet-skill-reset form {
    flex: 0 0 auto;
    margin: 0;
}

.pet-skill-reset-modal .chat-wire-confirm-panel {
    width: min(600px, 100%);
    border-color: rgba(167, 139, 250, 0.58);
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.16), transparent 44%),
        #0f172a;
}

.pet-skill-reset-modal .pet-skill-reset-icon {
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
}

.pet-skill-reset-summary {
    grid-template-columns: minmax(110px, 0.7fr) minmax(110px, 0.7fr) minmax(220px, 1.6fr);
}

@media (max-width: 620px) {
    .pet-skill-reset-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .pet-skill-reset {
        align-items: stretch;
        flex-direction: column;
    }

    .pet-skill-reset button {
        width: 100%;
    }
}

.pet-evolution-panel {
    border-color: #7c3aed;
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.16), transparent 32%),
        #1f2937;
}

.pet-evolution-costs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.pet-evolution-costs > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid #24334e;
    border-radius: 10px;
    background: rgba(7, 16, 31, 0.72);
}

.pet-evolution-costs span {
    color: #9fb0c6;
    font-size: 12px;
}

.pet-evolution-costs strong {
    color: #ffffff;
}

.pet-evolution-costs .insufficient {
    border-color: #7f1d1d;
    background: rgba(127, 29, 29, 0.2);
}

.pet-evolution-costs .insufficient strong {
    color: #fca5a5;
}

.pet-evolution-note {
    margin: 0;
    color: #c4b5fd;
}

.pet-guide-button {
    margin-top: 8px;
}

.pet-introduction-panel {
    width: min(880px, calc(100vw - 44px));
}

.pet-introduction-panel .item-system-modal-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.pet-introduction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pet-introduction-grid .item-system-guide-card {
    position: relative;
    padding-left: 52px;
}

.pet-introduction-grid .item-system-guide-card p {
    font-size: 14px;
}

.pet-introduction-step {
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid #7c3aed;
    border-radius: 9px;
    background: rgba(124, 58, 237, 0.24);
    color: #e9d5ff;
    font-weight: 900;
}

.pet-introduction-note {
    margin: 12px 0;
    border-color: rgba(124, 58, 237, 0.42);
    background: rgba(76, 29, 149, 0.18);
}

@media (max-width: 760px) {
    .pet-hero,
    .pet-summary-grid,
    .pet-introduction-grid {
        grid-template-columns: 1fr;
    }
}

/* Compact Dragon page layout 0.5.47 */
body.dragon-page .page > .card {
    margin-bottom: 12px;
    padding: 14px 16px;
}

body.dragon-page .pet-hero {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
}

body.dragon-page .pet-hero h1 {
    margin: 2px 0;
    font-size: 24px;
    line-height: 1.15;
}

body.dragon-page .pet-hero p {
    margin: 0;
    font-size: 13px;
}

body.dragon-page .pet-exp-source {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0 1px;
    border: 0;
    border-bottom: 1px dotted rgba(103, 232, 249, .8);
    border-radius: 0;
    background: transparent;
    color: #67e8f9;
    font: inherit;
    font-weight: 800;
    line-height: inherit;
    vertical-align: baseline;
    cursor: help;
}

body.dragon-page .pet-exp-source:hover,
body.dragon-page .pet-exp-source:focus-visible {
    border-bottom-color: #ffffff;
    background: transparent;
    color: #ffffff;
    transform: none;
}

body.dragon-page .pet-exp-source-icon {
    color: #a5f3fc;
    font-size: 10px;
}

body.dragon-page .pet-exp-source .character-breakdown {
    left: 0;
    top: calc(100% + 6px);
    color: #e2e8f0;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
}

body.dragon-page .pet-exp-source:hover .character-breakdown,
body.dragon-page .pet-exp-source:focus-visible .character-breakdown {
    display: grid;
    gap: 6px;
}

body.dragon-page.pet-exp-tooltip-portal-enabled .pet-exp-source > .character-breakdown {
    display: none !important;
}

body.dragon-page .pet-exp-floating-tooltip {
    display: grid !important;
    position: fixed !important;
    z-index: 20000;
    gap: 6px;
    width: min(360px, calc(100vw - 24px));
    min-width: 0;
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    scrollbar-color: #4b6688 #091323;
    scrollbar-width: thin;
}

body.dragon-page .pet-exp-floating-tooltip.is-scrollable {
    padding-right: 16px;
    border-bottom-color: #67e8f9;
}

body.dragon-page .pet-exp-breakdown-description {
    margin-bottom: 4px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 400;
}

body.dragon-page .pet-exp-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 5px;
    border-top: 1px solid rgba(148, 163, 184, .16);
    font-size: 12px;
}

body.dragon-page .pet-exp-breakdown-row > span {
    color: #94a3b8;
}

body.dragon-page .pet-exp-breakdown-row > em {
    color: #f8fafc;
    font-style: normal;
    font-weight: 700;
}

body.dragon-page .pet-dragon {
    width: 54px;
    height: 54px;
    border-radius: 13px;
    font-size: 31px;
}

body.dragon-page .pet-level-badge {
    min-width: 102px;
    padding: 8px 12px;
}

body.dragon-page .pet-level-badge strong {
    font-size: 19px;
}

body.dragon-page .pet-panel {
    gap: 8px;
}

body.dragon-page .pet-panel .character-section-title {
    margin-bottom: 0;
    padding-bottom: 7px;
}

body.dragon-page .pet-panel .character-section-title h2 {
    font-size: 18px;
}

body.dragon-page .pet-exp-progress {
    height: 22px;
}

body.dragon-page .pet-summary-grid > div {
    gap: 2px;
    padding: 7px 9px;
}

body.dragon-page .pet-evolution-costs {
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    gap: 6px;
}

body.dragon-page .pet-evolution-costs > div {
    gap: 2px;
    padding: 6px 8px;
    border-radius: 8px;
}

body.dragon-page .pet-evolution-note {
    font-size: 12px;
    line-height: 1.4;
}

body.dragon-page .pet-guide-button {
    margin-top: 5px;
}

body.dragon-page .pet-skill-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 7px;
}

body.dragon-page .pet-skill-card {
    gap: 7px;
    padding: 8px 9px;
    border-radius: 9px;
}

body.dragon-page .pet-skill-card > div:first-child {
    line-height: 1.3;
}

body.dragon-page .pet-skill-card span,
body.dragon-page .pet-skill-reset span {
    font-size: 12px;
}

body.dragon-page .pet-skill-card button {
    padding: 6px 10px;
    font-size: 12px;
}

body.dragon-page .pet-skill-reset {
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
}

body.dragon-page .pet-skill-reset button,
body.dragon-page .pet-evolution-panel > form button {
    padding: 7px 11px;
    font-size: 12px;
}

@media (max-width: 760px) {
    body.dragon-page .page > .card {
        padding: 12px;
    }

    body.dragon-page .pet-hero,
    body.dragon-page .pet-skill-grid {
        grid-template-columns: 1fr;
    }

    body.dragon-page:not(.pet-exp-tooltip-portal-enabled) .pet-exp-source .character-breakdown {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 16px;
        width: auto;
        max-height: calc(100vh - 32px);
        overflow: auto;
        z-index: 500;
    }

    body.dragon-page .pet-summary-grid,
    body.dragon-page .pet-evolution-costs {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
    }

    body.dragon-page .pet-summary-grid > div,
    body.dragon-page .pet-evolution-costs > div {
        grid-column: span 2;
        min-height: 40px;
        padding: 5px 7px;
    }

    body.dragon-page .pet-summary-grid > div:nth-child(4),
    body.dragon-page .pet-evolution-costs > div:nth-child(4) {
        grid-column: 1 / span 3;
    }

    body.dragon-page .pet-summary-grid > div:nth-child(5),
    body.dragon-page .pet-evolution-costs > div:nth-child(5) {
        grid-column: 4 / span 3;
    }

    body.dragon-page .pet-skill-card button,
    body.dragon-page .pet-skill-reset button,
    body.dragon-page .pet-evolution-panel > form button {
        min-height: 40px;
    }
}

/* Compact Dungeon page layout 0.5.47 */
body.dungeons-page .dungeon-heading {
    margin-bottom: 10px;
    padding: 13px 16px;
}

body.dungeons-page .dungeon-heading h1 {
    font-size: 24px;
    line-height: 1.15;
}

body.dungeons-page .dungeon-type-tabs {
    gap: 6px;
    margin: 0 0 10px;
}

body.dungeons-page .dungeon-type-tabs a {
    padding: 7px 10px;
    font-size: 13px;
}

body.dungeons-page .dungeon-daily-rewards {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.35;
}

body.dungeons-page .dungeon-daily-rewards .guild-task-topline {
    gap: 12px;
}

body.dungeons-page .dungeon-daily-rewards strong {
    font-size: 13px;
}

body.dungeons-page .dungeon-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 0.8fr);
    gap: 12px;
    margin-bottom: 12px;
}

body.dungeons-page .dungeon-overview-grid > .card {
    margin: 0;
    padding: 13px 15px;
}

body.dungeons-page .dungeon-create-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;
}

body.dungeons-page .dungeon-create-card > .character-section-title {
    grid-column: 1 / -1;
}

body.dungeons-page .dungeon-create-card > button {
    padding: 7px 12px;
    white-space: nowrap;
}

body.dungeons-page .dungeon-create-summary {
    gap: 6px;
    margin: 0;
}

body.dungeons-page .dungeon-create-summary div,
body.dungeons-page .dungeon-create-preview div {
    gap: 2px;
    padding: 7px 9px;
    border-radius: 8px;
}

body.dungeons-page .dungeon-create-summary span,
body.dungeons-page .dungeon-create-preview span {
    font-size: 12px;
}

body.dungeons-page .dungeon-level-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body.dungeons-page .dungeon-level-picker legend {
    margin-bottom: 5px;
    padding: 0;
    color: #9fb0c6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.dungeons-page .dungeon-level-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body.dungeons-page .dungeon-level-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

body.dungeons-page .dungeon-level-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.dungeons-page .dungeon-level-option-content {
    position: relative;
    display: grid;
    gap: 2px;
    min-height: 48px;
    padding: 7px 9px;
    border: 1px solid #30445f;
    border-radius: 8px;
    background: #0b1424;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

body.dungeons-page .dungeon-level-option-content strong {
    color: #f8fafc;
    font-size: 13px;
}

body.dungeons-page .dungeon-level-option-content small {
    color: #86efac;
    font-size: 11px;
}

body.dungeons-page .dungeon-level-option.is-claimed .dungeon-level-option-content small {
    color: #fbbf24;
}

body.dungeons-page .dungeon-level-option:hover .dungeon-level-option-content {
    border-color: #3b82f6;
    transform: translateY(-1px);
}

body.dungeons-page .dungeon-level-option input:focus-visible + .dungeon-level-option-content {
    outline: 2px solid #67e8f9;
    outline-offset: 2px;
}

body.dungeons-page .dungeon-level-option input:checked + .dungeon-level-option-content {
    border-color: #22d3ee;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.16), transparent 58%),
        rgba(8, 47, 73, 0.72);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.18);
}

body.dungeons-page .dungeon-level-option input:checked + .dungeon-level-option-content::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    color: #67e8f9;
    font-size: 13px;
    font-weight: 900;
}

body.dungeons-page .dungeon-series-card {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 9px;
    background: rgba(8, 47, 73, 0.28);
}

body.dungeons-page .dungeon-series-card small {
    color: #9fb0c6;
}

body.dungeons-page .dungeon-series-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.dungeons-page .dungeon-series-steps span {
    padding: 5px 9px;
    border: 1px solid #30445f;
    border-radius: 999px;
    color: #9fb0c6;
    background: #0b1424;
    font-size: 12px;
    font-weight: 800;
}

body.dungeons-page .dungeon-series-steps .is-complete {
    border-color: rgba(34, 197, 94, 0.45);
    color: #86efac;
    background: rgba(20, 83, 45, 0.3);
}

body.dungeons-page .dungeon-series-steps .is-current {
    border-color: #22d3ee;
    color: #ecfeff;
    background: rgba(8, 145, 178, 0.35);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.14);
}

body.dungeons-page .dungeon-role-card {
    display: grid;
    grid-template-rows: auto 1fr;
}

body.dungeons-page .dungeon-role-card .guild-bank-grid {
    grid-template-columns: 1fr;
}

body.dungeons-page .dungeon-role-card .guild-bank-grid > div {
    align-content: center;
    padding: 7px 9px;
}

body.dungeons-page .dungeon-role-card .guild-bank-grid strong {
    font-size: 18px;
}

body.dungeons-page .dungeon-list-panel,
body.dungeons-page .dungeon-active-panel {
    margin-bottom: 12px;
    padding: 13px 15px;
}

body.dungeons-page .dungeon-active-log-panel {
    margin: 2px 0 0;
}

body.dungeons-page .dungeon-page-shell .character-section-title {
    margin-bottom: 9px;
    padding-bottom: 7px;
}

body.dungeons-page .dungeon-page-shell .character-section-title h2 {
    font-size: 18px;
}

body.dungeons-page .dungeon-page-shell .guild-bank-grid > div {
    gap: 2px;
    padding: 7px 9px;
}

body.dungeons-page .dungeon-page-shell .market-empty {
    margin: 0;
    padding: 5px 0;
}

body.dungeons-page .dungeon-page-shell .inventory-table th,
body.dungeons-page .dungeon-page-shell .inventory-table td {
    padding: 8px 10px;
}

body.dungeons-page .dungeon-active-panel .guild-task-card {
    gap: 7px;
    padding: 9px 10px;
}

body.dungeons-page .dungeon-active-panel .guild-task-progress {
    height: 22px;
}

@media (max-width: 900px) {
    body.dungeons-page .dungeon-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    body.dungeons-page .dungeon-heading,
    body.dungeons-page .dungeon-overview-grid > .card,
    body.dungeons-page .dungeon-list-panel,
    body.dungeons-page .dungeon-active-panel {
        padding: 12px;
    }

    body.dungeons-page .dungeon-create-card {
        grid-template-columns: 1fr;
    }

    body.dungeons-page .dungeon-create-card > .character-section-title {
        grid-column: auto;
    }

    body.dungeons-page .dungeon-create-card > button {
        width: 100%;
        min-height: 40px;
    }

    body.dungeons-page .dungeon-level-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.poll-create-card,
.poll-card,
.poll-list {
    display: grid;
    gap: 14px;
}

.poll-create-form textarea {
    width: 100%;
    max-width: none;
    resize: vertical;
}

.poll-card {
    border-color: #223049;
}

.poll-card.closed {
    opacity: 0.78;
}

.poll-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.poll-admin-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.poll-card-header h2 {
    margin: 4px 0;
}

.poll-card-header p {
    margin: 0;
    color: #9fb0c6;
}

.poll-options {
    display: grid;
    gap: 10px;
}

.poll-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #24334e;
    border-radius: 12px;
    background: #111b2a;
}

.poll-option.selected {
    border-color: #2f7df6;
    background: rgba(47, 125, 246, 0.12);
}

.poll-option input {
    width: auto;
}

.poll-option-main {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.poll-option-main strong {
    color: #ffffff;
}

.poll-option-main em {
    color: #9fb0c6;
    font-style: normal;
    white-space: nowrap;
}

.poll-result-bar {
    grid-column: 2;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #07101f;
}

.poll-result-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f7df6, #22d3ee);
}

.feedback-create-card,
.feedback-filter-card,
.feedback-card,
.feedback-list {
    display: grid;
    gap: 14px;
}

.feedback-filter-row {
    display: grid;
    gap: 12px;
}

.feedback-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid #334155;
    border-radius: 999px;
    background: #0f172a;
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.filter-pill:hover,
.filter-pill.active {
    border-color: #3b82f6;
    background: #1e3a8a;
    color: #ffffff;
}

.filter-pill.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.feedback-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.feedback-pagination span {
    color: #c9d6e8;
    font-size: 13px;
    font-weight: 800;
}

.feedback-form-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: 14px;
}

.feedback-create-form textarea,
.feedback-reply-form textarea {
    width: 100%;
    max-width: none;
    resize: vertical;
    border-color: rgba(97, 122, 158, 0.72);
    background: #0b1627;
    color: #e5eefb;
    caret-color: #67e8f9;
}

.feedback-create-form textarea::placeholder,
.feedback-reply-form textarea::placeholder {
    color: #8295ad;
    opacity: 1;
}

.feedback-create-form textarea:focus,
.feedback-reply-form textarea:focus {
    color: #ffffff;
}

.feedback-card {
    border-left: 3px solid #2f7df6;
}

.feedback-card.closed {
    border-left-color: #64748b;
    opacity: 0.82;
}

.feedback-card.has-new-replies {
    border-left-color: #22c55e;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.feedback-card > summary {
    list-style: none;
    cursor: pointer;
}

.feedback-card > summary::-webkit-details-marker {
    display: none;
}

.feedback-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    border-bottom: 0;
    padding-bottom: 0;
    position: relative;
    padding-left: 20px;
}

.feedback-card[open] .feedback-card-header {
    border-bottom: 1px solid #223049;
    padding-bottom: 12px;
}

.feedback-card-header::before {
    content: '▸';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 24px;
    color: #60a5fa;
    font-size: 0.9rem;
    font-weight: 900;
}

.feedback-card[open] .feedback-card-header::before {
    content: '▾';
}

.feedback-card-header h2 {
    margin: 4px 0;
}

.feedback-card-header p {
    margin: 0;
    color: #9fb0c6;
}

.feedback-card-content {
    display: grid;
    gap: 14px;
    padding-top: 14px;
}

.feedback-card-actions {
    justify-content: flex-end;
}

.feedback-owner-badge,
.feedback-new-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.feedback-owner-badge {
    border: 1px solid rgba(96, 165, 250, 0.5);
    background: rgba(37, 99, 235, 0.18);
    color: #bfdbfe;
}

.feedback-new-badge {
    border: 1px solid rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.feedback-body {
    line-height: 1.55;
    padding: 14px;
    border: 1px solid #24334e;
    border-radius: 12px;
    background: #111b2a;
}

.feedback-edit-panel {
    padding: 12px;
    border: 1px solid #24334e;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.58);
}

.feedback-edit-panel summary {
    cursor: pointer;
    color: #60a5fa;
    font-weight: 700;
}

.feedback-edit-panel[open] summary {
    margin-bottom: 12px;
}

.feedback-replies {
    display: grid;
    gap: 10px;
}

.feedback-reply {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.58);
}

.feedback-reply.new {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.08);
}

.feedback-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
    color: #9fb0c6;
    font-size: 0.85rem;
}

.feedback-reply-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.feedback-reply-actions form {
    margin: 0;
}

.feedback-reply strong {
    color: #22d3ee;
}

.feedback-reply p {
    margin: 0;
    line-height: 1.45;
}

.feedback-reply-edit-panel {
    margin-top: 10px;
}

.feedback-reply-form {
    display: grid;
    gap: 8px;
}

.feedback-reply-form label {
    display: grid;
    gap: 6px;
    color: #9fb0c6;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 760px) {
    .poll-card-header,
    .poll-option-main,
    .feedback-card-header,
    .feedback-form-row {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.rules-card {
    display: grid;
    gap: 14px;
}

.rules-card article {
    padding: 14px;
    border: 1px solid #223049;
    border-radius: 12px;
    background: #111b2a;
}

.rules-card h2 {
    margin: 0 0 6px;
    color: #ffffff;
}

.rules-card p {
    margin: 0;
    color: #c9d6e8;
}

.achievement-reward-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    color: #9fb0c6;
    font-size: 13px;
}

.achievement-reward-row form {
    margin: 0;
}

.achievement-reward-row em {
    color: #86efac;
    font-style: normal;
}

.settings-tabs {
    margin-bottom: 16px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.chat-command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.chat-command-card {
    min-width: 0;
}


.chat-command-intro,
.chat-command-wire-card {
    grid-column: 1 / -1;
}

.chat-command-card > p {
    margin-bottom: 0;
    color: #c3d0e2;
}

.chat-command-card code {
    display: inline-block;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid #314763;
    border-radius: 6px;
    background: #07111f;
    color: #7dd3fc;
    font: 600 0.88rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
    overflow-wrap: anywhere;
}

.chat-command-card kbd {
    padding: 2px 6px;
    border: 1px solid #526985;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #162337;
    color: #f8fafc;
    font: 700 0.78rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.chat-command-list {
    display: grid;
    gap: 10px;
}

.chat-command-list > div,
.chat-command-assets > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid #263954;
    border-radius: 10px;
    background: #101b2b;
}

.chat-command-list p {
    margin: 7px 0 0;
    color: #9fb3cc;
}

.chat-command-assets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 10px;
    margin-top: 14px;
}

.chat-command-assets h3 {
    margin: 0 0 9px;
    color: #f8fafc;
    font-size: 0.92rem;
}

.chat-command-assets p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.chat-command-note {
    margin-top: 14px !important;
    padding: 10px 12px;
    border-left: 3px solid #38bdf8;
    border-radius: 0 8px 8px 0;
    background: rgba(14, 116, 144, 0.10);
}

.settings-card {
    min-height: 0;
}

.side-navigation-settings-card {
    grid-column: 1 / -1;
}

.side-navigation-settings-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.side-navigation-settings-group {
    min-width: 0;
    margin: 0;
    padding: 11px;
    border: 1px solid #263954;
    border-radius: 10px;
    background: #101b2b;
}

.side-navigation-settings-group legend {
    padding: 0 5px;
    color: #68e6ff;
    font-weight: 800;
}

.side-navigation-settings-options {
    display: grid;
    gap: 6px;
}

.side-navigation-settings-option {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid rgba(71, 98, 135, 0.42);
    border-radius: 8px;
    background: rgba(5, 13, 26, 0.42);
    cursor: pointer;
}

.side-navigation-settings-option:focus-within {
    border-color: rgba(34, 211, 238, 0.78);
    outline: 2px solid rgba(34, 211, 238, 0.28);
    outline-offset: 1px;
}

.side-navigation-settings-option input {
    width: 18px !important;
    min-width: 18px;
    min-height: 18px !important;
    margin: 0;
    accent-color: #22d3ee;
}

.side-navigation-settings-option-icon {
    display: inline-grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    border: 1px solid rgba(73, 112, 159, 0.42);
    border-radius: 7px;
    color: #6ddbf1;
    font-size: 0.72rem;
}

.side-navigation-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-toggle-row {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid #263954;
    border-radius: 10px;
    background: #101b2b;
    cursor: pointer;
}

.settings-toggle-row input {
    width: 18px !important;
    min-width: 18px;
    min-height: 18px !important;
    margin: 2px 0 0;
    accent-color: #22d3ee;
}

.settings-toggle-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.settings-toggle-row strong {
    color: #f8fafc;
}

.settings-toggle-row small {
    color: #9fb3cc;
    line-height: 1.45;
}

.settings-notification-card { grid-column: 1 / -1; min-width: 0; }
.settings-notification-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-notification-group legend { margin-bottom: 8px; color: #68e6ff; font-weight: 700; }
.settings-notification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 8px;
}
.settings-notification-help { color: #9fb3cc; font-size: 12px; line-height: 1.5; }
.settings-notification-grid .settings-toggle-row { margin: 0; }
.settings-toggle-row:focus-within { outline: 2px solid #22d3ee; outline-offset: 2px; }

.settings-account-list {
    display: grid;
    gap: 10px;
}

.settings-account-list div {
    display: grid;
    grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 16px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #263954;
    border-radius: 10px;
    background: #101b2b;
}

.settings-account-list span {
    color: #9fb3cc;
    min-width: 0;
}

.settings-account-list strong {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 520px) {
    .settings-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .settings-card {
        width: 100%;
        height: auto;
        min-height: 0;
        align-self: start;
    }

    .settings-card .guild-form input,
    .settings-card .guild-form select,
    .settings-card .guild-form textarea {
        min-height: 44px;
        font-size: 16px;
    }

    .settings-card .guild-form button {
        width: 100%;
        min-height: 44px;
        touch-action: manipulation;
    }

    .side-navigation-settings-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-account-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .settings-account-list strong {
        text-align: left;
    }
}

.item-result-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
    max-width: 420px;
}

.item-result-stats small {
    display: inline-flex;
    padding: 2px 7px;
    border: 1px solid #31435f;
    border-radius: 999px;
    background: #101a2a;
    color: #b8c7dc;
    white-space: nowrap;
}

.dungeon-result-item {
    display: inline-block;
}

.dungeon-result-item .item-tooltip {
    left: calc(100% + 12px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 5000;
    max-width: min(360px, calc(100vw - 48px));
    max-height: min(520px, calc(100vh - 24px));
    overflow-y: auto;
}

.dungeon-create-summary,
.dungeon-create-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.dungeon-create-reward {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 56%),
        #0b1424;
}

.dungeon-create-summary div,
.dungeon-create-preview div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid #223049;
    border-radius: 10px;
    background: #0b1424;
}

.dungeon-create-summary span,
.dungeon-create-preview span,
.dungeon-create-reward span {
    color: #9fb0c6;
}

.dungeon-create-summary strong,
.dungeon-create-preview strong,
.dungeon-create-reward strong {
    color: #ffffff;
}

.dungeon-create-modal-panel {
    width: min(720px, calc(100vw - 44px));
    max-height: min(860px, calc(100vh - 40px));
    max-height: min(860px, calc(100dvh - 40px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(circle at top right, rgba(47, 125, 246, 0.10), transparent 38%),
        #111827;
}

.dungeon-create-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dungeon-create-form {
    gap: 14px;
}

@media (max-width: 760px) {
    .inventory-modal.dungeon-create-modal {
        align-items: flex-start;
        padding: 8px;
    }

    .dungeon-create-modal-panel {
        width: 100%;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        padding: 16px;
    }

    .dungeon-create-summary,
    .dungeon-create-preview,
    .dungeon-create-fields {
        grid-template-columns: 1fr;
    }
}

.mobile-nav-toggle,
.side-navigation-backdrop {
    display: none;
}

.card,
.guild-panel,
.market-panel,
.inventory-table-wrap,
.market-table-wrap,
.ranking-table,
.chat-shell,
.persistent-chat,
.global-hud,
.active-buffs-panel {
    max-width: 100%;
}

.card,
.guild-panel,
.market-panel,
.inventory-filter-bar,
.market-form-grid,
.market-order-grid,
.guild-layout,
.grid,
.stat-grid,
.market-content,
.market-item-card,
.equipment-set-card,
.item-card {
    min-width: 0;
}

.inventory-table-wrap,
.market-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.inventory-table,
.market-table {
    min-width: max-content;
}

@media (max-width: 1540px) {
    .global-hud {
        overflow-x: hidden;
    }

    .global-hud-values {
        flex-wrap: wrap;
        min-width: 0;
        gap: 6px 10px;
        padding: 6px 62px 6px 14px;
    }

    .global-notification-panel {
        right: 12px;
    }

    .global-hud-character {
        min-width: 62px;
    }

    .global-hud-group,
    .global-hud-skills,
    .global-hud-economy {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 5px 6px;
        min-width: 0;
    }

    .global-hud-skills .global-hud-skill-action,
    .global-hud-economy span,
    .global-hud-economy .global-hud-economy-link {
        min-width: 0;
        padding: 3px 8px;
        gap: 6px;
    }

    .has-side-navigation .page {
        width: calc(100% - 220px);
        max-width: none;
        margin: 22px 0 30px 220px;
        padding: 0 16px;
    }

    .has-side-navigation .site-footer {
        width: calc(100% - 220px);
        margin-left: 220px;
    }

    .active-buffs-panel {
        position: static;
        width: auto;
        max-height: none;
        margin: 12px 16px 0 236px;
        overflow: visible;
    }

    .active-buffs-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .inventory-filter-bar,
    .guild-tabs,
    .market-tabs,
    .ranking-tabs {
        overflow-x: auto;
        max-width: 100%;
    }

    .inventory-filter-bar {
        grid-template-columns: repeat(3, minmax(150px, 1fr)) repeat(2, minmax(118px, auto)) auto;
    }

    .market-order-grid,
    .market-item-grid {
        grid-template-columns: 1fr;
    }

    .market-form-grid,
    .market-form-grid.equipment {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .market-form-grid button,
    .market-form-grid .market-sell-button,
    .market-form-grid .market-buy-button,
    .market-form-grid .market-buy-order-button {
        width: 100%;
    }
}

@media (min-width: 801px) {
    .global-hud,
    .has-side-navigation .global-hud {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 58px;
        align-items: start;
        overflow-x: hidden;
    }

    .global-hud-values {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        padding-right: 8px;
    }

    .global-notification-shell {
        position: relative;
        top: auto;
        right: auto;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        margin-top: calc(7px + var(--safe-area-top));
    }

    .global-dungeon-queue,
    .global-action,
    .global-exp {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1541px) {
    .global-hud-values {
        overflow-x: hidden;
        overflow-y: hidden;
        transform-origin: left top;
    }

    .global-hud-values.global-hud-wrap-fallback {
        width: auto;
        flex-wrap: wrap;
        overflow: visible;
        transform: none;
    }
}

@media (max-width: 1280px) {
    body.has-side-navigation {
        min-width: 0;
    }

    .mobile-nav-toggle {
        position: fixed;
        top: calc(6px + var(--safe-area-top));
        left: calc(10px + var(--safe-area-left));
        z-index: 120;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 44px;
        height: 34px;
        padding: 0;
        border: 1px solid rgba(96, 165, 250, 0.45);
        border-radius: 12px;
        background:
            radial-gradient(circle at top left, rgba(103, 232, 249, 0.18), transparent 55%),
            rgba(15, 23, 42, 0.96);
        color: #dbeafe;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .mobile-nav-toggle:hover {
        background: rgba(30, 41, 59, 0.98);
        border-color: rgba(103, 232, 249, 0.75);
    }

    .mobile-nav-toggle span {
        display: block;
        width: 21px;
        height: 2px;
        border-radius: 999px;
        background: #67e8f9;
        box-shadow: 0 0 8px rgba(103, 232, 249, 0.38);
    }

    .mobile-nav-toggle strong {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .side-navigation {
        z-index: 115;
        width: min(82vw, 270px);
        padding-left: var(--safe-area-left);
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform 180ms ease;
        box-shadow: 16px 0 42px rgba(0, 0, 0, 0.45);
    }

    .side-navigation-backdrop {
        position: fixed;
        inset: 0;
        z-index: 110;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(2, 6, 23, 0.62);
        backdrop-filter: blur(2px);
    }

    .side-navigation-backdrop:hover,
    .side-navigation-backdrop:focus {
        background: rgba(2, 6, 23, 0.62);
    }

    .side-navigation-open .side-navigation {
        transform: translateX(0);
    }

    .side-navigation-open .side-navigation-backdrop {
        display: block;
    }

    .has-side-navigation .global-hud {
        left: 0;
        right: 0;
        width: auto;
        margin-left: 0;
    }

    .global-hud-values {
        padding-left: 62px;
        padding-right: 8px;
        align-items: flex-start;
    }

    .global-hud-character {
        order: -2;
    }

    .global-hud-skills {
        order: -1;
        flex-basis: auto;
    }

    .global-hud-economy {
        flex-basis: auto;
    }

    .has-side-navigation .page,
    .has-side-navigation .site-footer {
        width: auto;
        max-width: none;
        margin-left: 0;
    }

    .has-side-navigation .page {
        margin-top: 18px;
        padding: 0 12px;
    }

    .has-side-navigation .site-footer {
        padding: 0 12px;
    }

    .active-buffs-panel {
        margin: 10px 12px 0;
    }

    .persistent-chat {
        left: var(--safe-area-left);
        right: var(--safe-area-right);
    }

    .inventory-filter-bar {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .market-form-grid,
    .market-form-grid.equipment,
    .market-activity-entry {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .guild-tabs {
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 6px;
        margin: 10px 0 14px;
        padding: 2px 0 6px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .guild-tabs::-webkit-scrollbar {
        display: none;
    }

    .guild-tabs a {
        flex: 0 0 auto;
        justify-content: center;
        min-height: 40px;
        padding: 8px 10px;
        touch-action: manipulation;
    }

    .guild-tabs a > span {
        white-space: nowrap;
    }

    .global-hud-values {
        padding-left: 58px;
        padding-right: 58px;
        font-size: 0.75rem;
    }

    .global-hud-character {
        max-width: 112px;
    }

    .global-hud-skills,
    .global-hud-economy {
        gap: 4px;
    }

    .global-hud-skills .global-hud-skill-action,
    .global-hud-economy span,
    .global-hud-economy .global-hud-economy-link {
        padding: 2px 7px;
        border-radius: 7px;
    }

    .persistent-chat {
        max-height: min(58vh, 460px);
    }

    .persistent-chat.chat-collapsed {
        right: calc(12px + var(--safe-area-right));
        bottom: calc(12px + var(--safe-area-bottom));
    }

    .grid,
    .stat-grid,
    .guild-layout,
    .market-order-grid,
    .market-form-grid,
    .inventory-filter-bar {
        grid-template-columns: 1fr;
    }
}

.offline-reward-modal {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: grid;
    place-items: center;
    padding: 24px;
}

.offline-reward-modal.closing {
    opacity: 0;
    pointer-events: none;
}

.offline-reward-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 6, 18, 0.78);
    backdrop-filter: blur(6px);
}

.offline-reward-panel {
    position: relative;
    width: min(720px, 100%);
    max-height: min(86vh, 820px);
    overflow: auto;
    border: 1px solid rgba(81, 214, 255, 0.45);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(45, 112, 255, 0.22), transparent 34%),
        linear-gradient(145deg, #101c31, #07111f);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
    padding: 24px;
}

.offline-reward-panel h2 {
    margin: 0 0 6px;
    color: #67e8ff;
}

.offline-reward-panel > p {
    margin: 0 0 18px;
    color: #a9bdd8;
}

.offline-reward-panel > p.offline-catchup-status {
    border: 1px solid rgba(81, 214, 255, 0.38);
    border-radius: 10px;
    background: rgba(8, 32, 58, 0.86);
    color: #67e8ff;
    padding: 10px 12px;
    font-weight: 800;
}

.offline-reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.offline-reward-grid div,
.offline-reward-items {
    border: 1px solid rgba(94, 129, 172, 0.35);
    border-radius: 12px;
    background: rgba(5, 15, 30, 0.78);
    padding: 12px;
}

.offline-reward-grid span,
.offline-reward-items span {
    display: block;
    color: #9fb5d1;
    font-size: 0.82rem;
}

.offline-reward-grid strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 1.25rem;
}

.offline-reward-items {
    margin-top: 12px;
}

.offline-reward-items p {
    margin: 6px 0 0;
    color: #dbeafe;
}

.offline-reward-dismantle-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(81, 214, 255, 0.25);
    border-radius: 10px;
    background: rgba(8, 21, 42, 0.9);
}

.offline-reward-dismantle-summary strong,
.offline-reward-item-section > strong {
    color: #67e8ff;
}

.offline-reward-dismantle-summary span {
    display: inline-flex;
    width: fit-content;
    color: #ffffff;
    font-weight: 800;
}

.offline-reward-item-section,
.offline-reward-all-items {
    margin-top: 12px;
}

.offline-reward-item-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.offline-reward-item {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(94, 129, 172, 0.28);
    border-radius: 10px;
    background: rgba(10, 21, 38, 0.88);
}

.offline-reward-item .item-name-list {
    font-weight: 900;
}

.offline-reward-item small {
    color: #9fb5d1;
    font-size: 0.75rem;
}

.offline-reward-item-state {
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 999px;
    padding: 1px 7px;
    color: #fbbf24 !important;
    background: rgba(120, 53, 15, 0.25);
}

.offline-reward-all-items summary {
    cursor: pointer;
    color: #67e8ff;
    font-weight: 900;
}

#offline-reward-close {
    width: 100%;
    margin-top: 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #ffffff;
    font-weight: 800;
    padding: 12px 16px;
    cursor: pointer;
}

#offline-reward-close:disabled {
    cursor: wait;
    opacity: 0.7;
}

.system-error-log {
    max-height: 420px;
    overflow: auto;
    margin: 0;
    border: 1px solid rgba(94, 129, 172, 0.35);
    border-radius: 12px;
    background: #050b16;
    color: #dbeafe;
    padding: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.82rem;
    line-height: 1.45;
}

.system-health-success {
    border-color: rgba(34, 197, 94, 0.45);
}

.system-health-warning {
    border-color: rgba(251, 191, 36, 0.55);
}

.system-health-danger {
    border-color: rgba(248, 113, 113, 0.65);
}

.ascension-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
    gap: 20px;
    align-items: center;
}

.ascension-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ascension-summary-grid > div,
.ascension-upgrade-card,
.ascension-path-card {
    background: rgba(8, 18, 34, 0.72);
    border: 1px solid rgba(94, 129, 172, 0.42);
    border-radius: 12px;
    padding: 14px;
}

.ascension-summary-grid span,
.ascension-upgrade-card small {
    color: #a8c3e8;
    font-size: 0.82rem;
}

.ascension-summary-grid strong {
    display: block;
    color: #67e8f9;
    font-size: 1.35rem;
    margin-top: 4px;
}

.ascension-path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.ascension-path-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
}

.ascension-path-card,
.ascension-path-section {
    border-color: color-mix(in srgb, var(--ascension-color, #38bdf8) 55%, rgba(94, 129, 172, 0.4));
}

.ascension-path-card h3,
.ascension-path-section h2 {
    color: var(--ascension-color, #67e8f9);
}

.ascension-control-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 520px);
    gap: 18px;
    align-items: start;
}

.ascension-control-actions {
    display: grid;
    gap: 10px;
}

.ascension-control-actions form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ascension-control-actions select {
    min-width: 180px;
}

.ascension-upgrade-layout {
    display: grid;
    gap: 16px;
}

.ascension-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(94, 129, 172, 0.35);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.ascension-section-heading p {
    color: #a8c3e8;
    margin: 4px 0 0;
}

.ascension-section-heading span {
    border: 1px solid rgba(94, 129, 172, 0.45);
    border-radius: 999px;
    color: #cbd5e1;
    padding: 4px 10px;
    font-size: 0.78rem;
}

.ascension-path-section.unlocked .ascension-section-heading span {
    border-color: var(--ascension-color, #67e8f9);
    color: var(--ascension-color, #67e8f9);
}

.ascension-path-section.main-path {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ascension-color, #67e8f9) 45%, transparent),
        0 0 24px color-mix(in srgb, var(--ascension-color, #67e8f9) 12%, transparent);
}

.ascension-path-details {
    color: #dbeafe;
    font-size: 0.92rem;
    max-width: 900px;
}

.ascension-fixed-stat-note {
    display: grid;
    gap: 3px;
    margin: -3px 0 12px;
    padding: 9px 11px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: 9px;
    background: rgba(8, 47, 73, 0.2);
    color: #b9d8ea;
    font-size: 0.8rem;
    line-height: 1.35;
}

.ascension-fixed-stat-note strong {
    color: #a5f3fc;
}

.ascension-fixed-stat-note a {
    color: #67e8f9;
}

.ascension-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.ascension-upgrade-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.ascension-upgrade-card h3 {
    margin: 0 0 6px;
}

.ascension-upgrade-card p {
    margin: 0 0 4px;
}

.ascension-upgrade-description {
    color: #bdd7ff;
    font-size: 0.88rem;
    line-height: 1.35;
}

.ascension-path-section.locked {
    opacity: 0.68;
}

@media (max-width: 900px) {
    .ascension-hero,
    .ascension-control-card {
        grid-template-columns: 1fr;
    }
}


.crafting-level-note {
    color: #8fa8c3;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
}

.crafting-level-note.locked {
    color: #fbbf24;
}

/* Rev 0.4.0 Crafting */
.item-enhancement-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.item-enhancement-badges>span{display:inline-flex;padding:2px 6px;border-radius:999px;font-size:.68rem;line-height:1.3}.item-enhancement-gem{color:#9cecff;background:#103247;border:1px solid #18799a}.item-enhancement-enchantment{color:#dfbdff;background:#321d48;border:1px solid #8148af}
.crafting-heading,.crafting-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.crafting-heading{margin-bottom:18px}.crafting-heading h1,.crafting-section-heading h2{margin:0}.crafting-heading p{margin:6px 0 0;color:#9fb4d0}.crafting-skill-summary{display:flex;gap:10px;flex-wrap:wrap}.crafting-skill-summary span{padding:10px 14px;border:1px solid #34445d;border-radius:10px;background:#111d2d}.crafting-material-grid{display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));gap:10px;margin-bottom:18px}.crafting-material-card{margin:0!important;display:grid;gap:4px}.crafting-material-card span,.crafting-section-heading span,.crafting-product-type{color:#8fb9ec;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}.crafting-material-card strong{font-size:1.3rem}.crafting-material-card small{color:#8295ad}.crafting-active-job{border-color:#8051db}.crafting-progress{height:14px;border-radius:999px;overflow:hidden;background:#07111f;border:1px solid #34445d;margin-top:16px}.crafting-progress span{display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#38bdf8)}.crafting-tabs{display:flex;gap:8px;margin:18px 0 10px}.crafting-tabs a{padding:10px 18px;border:1px solid #34445d;border-radius:9px;background:#111d2d;color:#b9cbe1;text-decoration:none}.crafting-tabs a.active{border-color:#8b5cf6;background:#2a2042;color:#fff}.crafting-form{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin-top:18px}.crafting-form label{display:grid;gap:6px}.crafting-form select,.crafting-form input,.crafting-apply-form select{width:100%}.crafting-preview{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px}.crafting-preview div{padding:12px;border:1px solid #2d3c53;border-radius:9px;background:#0d1827;display:grid;gap:5px}.crafting-preview span{color:#8fa5c0;font-size:.84rem}.crafting-form>button{grid-column:1/-1}.crafting-product-list{display:grid;gap:10px;margin-top:14px}.crafting-product-card{display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(260px,.8fr);gap:18px;align-items:center;padding:14px;border:1px solid #2d3c53;border-radius:10px;background:#0e1928}.crafting-product-card h3{margin:4px 0}.crafting-product-card p{margin:0;color:#93a8c2}.crafting-product-value{display:grid;text-align:right}.crafting-product-value strong{font-size:1.25rem;color:#c69cff}.crafting-product-value span{color:#93a8c2}.crafting-apply-form{display:grid;grid-template-columns:1fr auto;gap:8px}.crafting-log-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.crafting-log-list{display:grid;gap:8px}.crafting-log-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:9px;border-bottom:1px solid #28374d}.crafting-log-list time{color:#6fa8d8}.crafting-log-list strong{color:#c69cff;text-align:right}@media(max-width:1000px){.crafting-material-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}.crafting-preview{grid-template-columns:repeat(2,1fr)}.crafting-product-card{grid-template-columns:1fr}.crafting-product-value{text-align:left}.crafting-log-grid{grid-template-columns:1fr}}@media(max-width:650px){.crafting-heading,.crafting-section-heading{display:grid}.crafting-form,.crafting-preview{grid-template-columns:1fr}.crafting-material-grid{grid-template-columns:1fr}.crafting-apply-form{grid-template-columns:1fr}.crafting-log-list>div{grid-template-columns:auto 1fr}.crafting-log-list strong{grid-column:2;text-align:left}}
.equipment-slot-box.has-enhancement-sockets{position:relative;padding-bottom:54px}.equipment-slot-box.has-enhancement-sockets .inventory-action-group{padding-right:82px}.equipment-enhancement-sockets{position:absolute;right:12px;bottom:12px;display:flex;gap:7px}.equipment-enhancement-socket{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #415069;border-radius:8px;background:#0a1422;text-decoration:none;font-size:18px;line-height:1;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}.equipment-enhancement-socket:hover{transform:translateY(-2px)}.equipment-enhancement-socket.empty{opacity:.38;filter:grayscale(1)}.equipment-enhancement-socket.empty:hover{opacity:.72;filter:none}.equipment-enhancement-gem.filled{border-color:#22b8db;background:#0c3444;box-shadow:0 0 12px rgba(34,184,219,.36)}.equipment-enhancement-enchantment.filled{border-color:#a855f7;background:#32194b;box-shadow:0 0 12px rgba(168,85,247,.36)}

@media (max-width: 700px) {
    [data-inventory-storage] .inventory-table-wrap {
        overflow: visible;
    }

    [data-inventory-storage] .inventory-table,
    [data-inventory-storage] .inventory-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    [data-inventory-storage] .inventory-table thead {
        display: none;
    }

    [data-inventory-storage] .inventory-table tbody {
        display: grid;
        gap: 10px;
    }

    [data-inventory-storage] .inventory-row {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        overflow: hidden;
        border: 1px solid #334155;
        border-radius: 10px;
        background: #111827;
    }

    [data-inventory-storage] .inventory-row > td {
        display: none;
        padding: 12px;
        border: 0;
    }

    [data-inventory-storage] .inventory-row > td:first-child,
    [data-inventory-storage] .inventory-row > td:nth-child(2) {
        display: block;
    }

    [data-inventory-storage] .inventory-row > td:first-child {
        grid-column: 1;
        align-self: start;
        padding-right: 4px;
    }

    [data-inventory-storage] .inventory-row > td:nth-child(2) {
        grid-column: 2;
        min-width: 0;
        padding-left: 4px;
    }

    [data-inventory-storage] .item-name-wrap,
    [data-inventory-storage] .inventory-item-name-button {
        width: 100%;
    }

    [data-inventory-storage] .inventory-item-name-button {
        justify-content: flex-start;
        min-height: 42px;
        cursor: pointer;
    }

    [data-inventory-storage] .inventory-item-name-button .item-name-list {
        min-width: 0;
        overflow-wrap: anywhere;
        cursor: pointer;
    }

    [data-inventory-storage] .inventory-item-title {
        display: grid;
        flex: 1 1 auto;
        gap: 3px;
        min-width: 0;
    }

    [data-inventory-storage] .inventory-item-requirement {
        display: block;
        color: #9fb4d0;
        font-size: 11px;
        line-height: 1.25;
    }

    [data-inventory-storage] .inventory-mobile-toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin-left: auto;
        color: #67e8f9;
        font-size: 21px;
        line-height: 1;
        transition: transform 0.18s ease;
    }

    [data-inventory-storage] .inventory-mobile-expanded .inventory-mobile-toggle-icon {
        transform: rotate(180deg);
    }

    [data-inventory-storage] .inventory-mobile-expanded > td:nth-child(2) {
        padding-bottom: 0;
    }

    [data-inventory-storage] .inventory-row:not(.inventory-mobile-expanded) .item-tooltip {
        display: none !important;
    }

    [data-inventory-storage] .inventory-mobile-expanded .item-tooltip {
        display: block !important;
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: none;
        margin-top: 10px;
        overflow: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
    }

    [data-inventory-storage] .inventory-mobile-expanded .comparison-columns {
        grid-template-columns: 1fr;
    }

    [data-inventory-storage] .inventory-actions-cell {
        grid-column: 1 / -1;
        padding-top: 12px;
        border-top: 1px solid #334155;
    }

    [data-inventory-storage] .inventory-mobile-expanded .inventory-actions-cell {
        display: block;
    }

    [data-inventory-storage] .inventory-action-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
    }

    [data-inventory-storage] .inventory-action-group form,
    [data-inventory-storage] .inventory-action-group a,
    [data-inventory-storage] .inventory-action-group button,
    [data-inventory-storage] .inventory-add-to-set-form select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    [data-inventory-storage] .inventory-action-group a,
    [data-inventory-storage] .inventory-action-group button,
    [data-inventory-storage] .inventory-add-to-set-form select {
        min-height: 42px;
    }
}
.crafting-queue-list{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:12px 0}.crafting-queue-list>strong{color:#9fb4d0;margin-right:3px}.crafting-queue-list>span{padding:5px 8px;border:1px solid #394a63;border-radius:7px;background:#101b2b;color:#c9d8ea;font-size:.8rem}
.crafting-action-series{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0;padding:12px 14px;border:1px solid #34445d;border-radius:9px;background:#0d1827}.crafting-action-series>div{display:grid;gap:3px}.crafting-action-series span,.crafting-action-series small{color:#8fa5c0}.crafting-action-series.paused{border-color:#d97706;background:#2a1c0c}.crafting-action-series.paused strong{color:#fbbf24}@media(max-width:650px){.crafting-action-series{align-items:stretch;display:grid}.crafting-action-series button{width:100%}}

.equipment-enhancement-socket {
    padding: 0;
    color: inherit;
    cursor: pointer;
}

.enhancement-slot-modal-panel {
    width: min(980px, calc(100vw - 40px));
    max-height: min(88vh, 860px);
    overflow-y: auto;
    border-color: #394a63;
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 32%),
        #0f1928;
}

.enhancement-slot-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #334155;
}

.enhancement-slot-modal-header h2 {
    margin: 2px 0 6px;
}

.enhancement-slot-modal-header p {
    margin: 0;
    color: #a9bdd6;
}

.enhancement-current-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid #364862;
    border-radius: 9px;
    background: #0b1625;
}

.enhancement-current-box span {
    color: #8ea5c1;
}

.enhancement-current-box strong {
    color: #d8b4fe;
    text-align: right;
}

.enhancement-filter-bar {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) minmax(170px, 1fr) repeat(2, minmax(110px, .55fr)) auto;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #2e4058;
    border-radius: 10px;
    background: #111d2d;
}

.enhancement-filter-bar label {
    display: grid;
    gap: 5px;
    color: #9fb4d0;
    font-size: .82rem;
}

.enhancement-filter-bar [hidden] {
    display: none;
}

.enhancement-filter-bar input,
.enhancement-filter-bar select {
    width: 100%;
}

.enhancement-filter-bar > button {
    align-self: end;
    white-space: nowrap;
}

.enhancement-product-picker {
    display: grid;
    gap: 9px;
}

.enhancement-picker-card {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto minmax(190px, .62fr);
    align-items: center;
    gap: 16px;
    padding: 13px;
    border: 1px solid #2d4058;
    border-radius: 10px;
    background: #0c1726;
}

.enhancement-picker-card[hidden] {
    display: none;
}

.enhancement-picker-info > span {
    color: #8fb9ec;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.enhancement-picker-info h3 {
    margin: 3px 0 5px;
}

.enhancement-picker-info p {
    margin: 0;
    color: #91a6c0;
    font-size: .86rem;
}

.enhancement-picker-value {
    display: grid;
    text-align: right;
}

.enhancement-picker-value strong {
    color: #c69cff;
    font-size: 1.12rem;
}

.enhancement-picker-value span,
.enhancement-picker-action small {
    color: #91a6c0;
}

.enhancement-picker-action {
    display: grid;
    gap: 5px;
}

.enhancement-picker-action form,
.enhancement-picker-action button {
    width: 100%;
}

.enhancement-picker-empty {
    margin: 16px 0 2px;
}

@media (max-width: 900px) {
    .enhancement-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enhancement-filter-bar > button {
        grid-column: 1 / -1;
    }

    .enhancement-picker-card {
        grid-template-columns: 1fr auto;
    }

    .enhancement-picker-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .enhancement-slot-modal-panel {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 16px;
    }

    .enhancement-slot-modal-header,
    .enhancement-current-box {
        align-items: stretch;
        flex-direction: column;
    }

    .enhancement-current-box strong {
        text-align: left;
    }

    .enhancement-filter-bar,
    .enhancement-picker-card {
        grid-template-columns: 1fr;
    }

    .enhancement-filter-bar > button,
    .enhancement-picker-action {
        grid-column: auto;
    }

    .enhancement-picker-value {
        text-align: left;
    }
}

.inventory-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
}

.inventory-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #34445d;
    border-radius: 9px;
    background: #111d2d;
    color: #b9cbe1;
    text-decoration: none;
}

.inventory-tabs a.active {
    border-color: #8b5cf6;
    background: #2a2042;
    color: #fff;
}

.inventory-tabs strong {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .76rem;
    text-align: center;
}

.workshop-material-inventory .crafting-section-heading p { margin: 5px 0 0; color: #93a8c2; }
.workshop-material-inventory-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.workshop-material-inventory-card { display: grid; gap: 4px; min-width: 0; padding: 14px; border: 1px solid #354963; border-radius: 10px; background: linear-gradient(145deg,#111d2d,#0d1827); }
.workshop-material-inventory-card > span { color: #79e7f5; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.workshop-material-inventory-card h3 { margin: 2px 0 7px; font-size: 1.05rem; }
.workshop-material-inventory-card strong { color: #f1f5f9; font-size: 1.45rem; }
.workshop-material-inventory-card small { color: #93a8c2; }

.crafted-inventory-section .crafting-section-heading p {
    margin: 5px 0 0;
    color: #93a8c2;
}

.crafted-inventory-filter-bar {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) minmax(120px, .65fr) minmax(180px, 1fr) repeat(2, minmax(105px, .5fr)) auto;
    gap: 10px;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid #2e4058;
    border-radius: 10px;
    background: #111d2d;
}

.crafted-inventory-filter-bar label {
    display: grid;
    gap: 5px;
    color: #9fb4d0;
    font-size: .82rem;
}

.crafted-inventory-filter-bar input,
.crafted-inventory-filter-bar select {
    width: 100%;
}

.crafted-inventory-filter-bar > button {
    align-self: end;
    white-space: nowrap;
}

.crafted-inventory-list {
    display: grid;
    gap: 10px;
}

.crafted-inventory-card {
    display: grid;
    grid-template-columns: minmax(230px, .9fr) auto minmax(430px, 1.25fr);
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid #2d4058;
    border-radius: 10px;
    background: #0c1726;
}

.crafted-inventory-card[hidden] {
    display: none;
}

.crafted-inventory-info > span {
    color: #8fb9ec;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.crafted-inventory-info h3 {
    margin: 3px 0 5px;
}

.crafted-inventory-info p {
    margin: 0;
    color: #91a6c0;
    font-size: .86rem;
}

.crafted-inventory-value {
    display: grid;
    text-align: right;
}

.crafted-inventory-value strong {
    color: #c69cff;
    font-size: 1.18rem;
}

.crafted-inventory-value span,
.crafted-product-dismantle-form > span {
    color: #91a6c0;
    font-size: .82rem;
}

.crafted-inventory-actions {
    display: grid;
    gap: 8px;
}

.crafted-product-apply-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 8px;
}

.crafted-product-dismantle-form {
    display: grid;
    grid-template-columns: 92px minmax(210px, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.crafted-product-dismantle-form label {
    display: grid;
    gap: 4px;
    color: #9fb4d0;
    font-size: .78rem;
}

.crafted-product-dismantle-form input,
.crafted-product-apply-form select {
    width: 100%;
}

.crafted-product-dismantle-form > span {
    align-self: center;
}

@media (max-width: 1150px) {
    .crafted-inventory-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .crafted-inventory-card {
        grid-template-columns: 1fr auto;
    }

    .crafted-inventory-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .inventory-tabs,
    .crafted-inventory-filter-bar {
        grid-template-columns: 1fr;
    }

    .inventory-tabs {
        display: grid;
    }

    .workshop-material-inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

    .crafted-inventory-filter-bar > button,
    .crafted-inventory-actions {
        grid-column: auto;
    }

    .crafted-inventory-card,
    .crafted-product-apply-form,
    .crafted-product-dismantle-form {
        grid-template-columns: 1fr;
    }

    .crafted-inventory-value {
        text-align: left;
    }
}
/* Rev. 0.4.17 - Advancement Points and Slot Mastery */
.global-hud-ap {
    color: #9ee7ff;
}

.mastery-page {
    display: grid;
    gap: 16px;
}

.mastery-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    border-color: rgba(56, 189, 248, 0.45);
    background: linear-gradient(120deg, rgba(14, 116, 144, 0.16), rgba(124, 58, 237, 0.11));
}

.mastery-hero h1,
.mastery-card h2 {
    margin: 2px 0 6px;
}

.mastery-hero p,
.mastery-rules p {
    margin: 0;
    color: #a9c2df;
}

.mastery-kicker,
.mastery-card-head span,
.mastery-equipped-item > span {
    color: #77cfff;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mastery-balance {
    min-width: 210px;
    padding: 14px 18px;
    border: 1px solid #2d4f70;
    border-radius: 10px;
    background: #0b1728;
    text-align: right;
}

.mastery-balance span,
.mastery-balance strong,
.mastery-balance a {
    display: block;
}

.mastery-balance span {
    color: #8fa8c5;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.mastery-balance strong {
    margin: 3px 0;
    color: #9ee7ff;
    font-size: 1.35rem;
}

.mastery-balance a {
    color: #78bfff;
    font-size: 0.85rem;
}

.mastery-message {
    padding: 12px 16px;
    border: 1px solid #238b55;
    border-radius: 8px;
    background: rgba(22, 101, 52, 0.2);
}

.mastery-message.error {
    border-color: #b93a45;
    background: rgba(127, 29, 29, 0.26);
}

.mastery-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 10px;
    padding: 16px;
}

.mastery-rules > div {
    padding: 11px 13px;
    border: 1px solid #2d405a;
    border-radius: 8px;
    background: #0d192a;
}

.mastery-rules span,
.mastery-rules strong {
    display: block;
}

.mastery-rules span {
    color: #8fa8c5;
    font-size: 0.78rem;
}

.mastery-rules strong {
    margin-top: 3px;
    color: #f7fbff;
    font-size: 1.08rem;
}

.mastery-rules p {
    grid-column: 1 / -1;
    padding: 4px 2px 0;
}

.mastery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mastery-card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
    padding: 17px;
}

.mastery-card:target {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.32);
}

.mastery-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.mastery-card-head > strong {
    color: #a78bfa;
    font-size: 1.25rem;
}

.mastery-slot-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #2b6b91;
    border-radius: 9px;
    color: #8be5ff;
    background: linear-gradient(145deg, #17334e, #0a1625);
    font-weight: 800;
}

.mastery-progress {
    height: 9px;
    overflow: hidden;
    border: 1px solid #2a405a;
    border-radius: 999px;
    background: #07111e;
}

.mastery-progress > div {
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9, #8b5cf6);
}

.mastery-equipped-item {
    display: grid;
    gap: 4px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid #263b55;
    border-radius: 8px;
    background: #0a1626;
}

.mastery-equipped-item small {
    color: #8fa8c5;
}

.mastery-item-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.mastery-item-stats > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 7px 8px;
    border-radius: 6px;
    background: rgba(24, 44, 67, 0.7);
}

.mastery-item-stats > div > span {
    color: #9bb5d1;
}

.mastery-item-stats > div > small {
    grid-column: 1 / -1;
    color: #8be5ff;
}

.mastery-next-cost {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mastery-next-cost span {
    color: #8fa8c5;
}

.mastery-next-cost strong {
    color: #facc15;
}

.mastery-actions {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(150px, 1.35fr);
    gap: 8px;
    margin-top: auto;
}

.mastery-actions form,
.mastery-actions button {
    width: 100%;
}

.mastery-maximum {
    margin-top: auto;
    padding: 11px;
    border: 1px solid #7658c9;
    border-radius: 8px;
    color: #c4b5fd;
    background: rgba(91, 33, 182, 0.16);
    text-align: center;
    font-weight: 700;
}

@media (max-width: 1050px) {
    .mastery-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .mastery-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .mastery-balance {
        min-width: 0;
        text-align: left;
    }

    .mastery-rules {
        grid-template-columns: 1fr;
    }

    .mastery-item-stats,
    .mastery-actions {
        grid-template-columns: 1fr;
    }
}

/* Global interface foundation 0.4.61 */
:root {
    --ui-bg-deep: #070f1d;
    --ui-bg-panel: #101b2c;
    --ui-bg-panel-strong: #142238;
    --ui-border: rgba(101, 128, 166, 0.34);
    --ui-border-bright: rgba(56, 189, 248, 0.56);
    --ui-text: #eef6ff;
    --ui-muted: #91a7c4;
    --ui-cyan: #67e8f9;
    --ui-blue: #3b82f6;
    --ui-purple: #8b5cf6;
    --ui-radius: 13px;
    --ui-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
}

body.has-side-navigation {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 72% -12%, rgba(37, 99, 235, 0.13), transparent 31rem),
        radial-gradient(circle at 8% 105%, rgba(124, 58, 237, 0.09), transparent 34rem),
        var(--ui-bg-deep);
    color: #dce8f7;
}

.side-navigation {
    display: flex;
    flex-direction: column;
    padding: 14px 11px 12px;
    overflow: hidden;
    border-right-color: rgba(93, 123, 164, 0.32);
    background:
        radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.18), transparent 270px),
        linear-gradient(180deg, rgba(7, 15, 29, 0.99), rgba(9, 18, 33, 0.98));
    box-shadow: 12px 0 34px rgba(0, 0, 0, 0.18);
}

.side-logo {
    flex: 0 0 auto;
    margin: 0 4px 10px;
    padding: 4px 9px 14px;
    border-bottom-color: rgba(101, 128, 166, 0.27);
}

.side-logo a {
    display: grid;
    width: fit-content;
    gap: 0;
    line-height: 1;
}

.side-logo a span {
    color: #b9d7f5;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.side-logo a strong {
    margin-top: 5px;
    color: #ffffff;
    font-size: 1.22rem;
    letter-spacing: -0.025em;
}

.side-logo small {
    display: block;
    margin-top: 6px;
    color: #657f9f;
    font-size: 0.68rem;
}

.side-server-clock {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    color: #8ea9c9;
    font-size: 0.72rem;
}

.side-server-clock time {
    color: #dce8f7;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.side-menu {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 9px;
    padding: 0 3px 4px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(77, 110, 153, 0.7) transparent;
    scrollbar-width: thin;
}

.side-menu-group {
    display: grid;
    gap: 3px;
}

.side-menu-group-label {
    padding: 4px 10px 3px;
    color: #607b9d;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.side-menu a,
.side-menu .side-menu-logout {
    min-height: 35px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #9eb0c8;
    font-size: 0.86rem;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.side-menu a:hover,
.side-menu a.active {
    border-color: rgba(68, 128, 202, 0.38);
    background: linear-gradient(90deg, rgba(36, 91, 157, 0.34), rgba(20, 39, 66, 0.3));
}

.side-menu a:hover {
    transform: translateX(2px);
}

.side-menu a.active {
    color: #ffffff;
    box-shadow: inset 3px 0 #38bdf8, inset 0 1px rgba(255, 255, 255, 0.025);
}

.side-menu-icon {
    width: 27px;
    height: 25px;
    border: 1px solid rgba(73, 112, 159, 0.34);
    border-radius: 7px;
    background: rgba(5, 13, 26, 0.5);
    color: #6ddbf1;
    font-size: 0.72rem;
    line-height: 1;
}

.side-menu a.active .side-menu-icon {
    border-color: rgba(56, 189, 248, 0.62);
    background: rgba(14, 116, 144, 0.18);
    color: #a5f3fc;
}

.side-menu .side-menu-logout {
    margin-top: 2px;
    border-top: 1px solid rgba(101, 128, 166, 0.25);
    color: #8297b2;
}

.side-online-count {
    width: calc(100% - 16px);
    justify-content: flex-start;
    margin: 0 8px 10px;
    border-radius: 9px;
}

.side-online-count strong {
    margin-left: auto;
}

.side-revision-button {
    margin: 0 10px;
    text-align: left;
}

.side-legal-links {
    justify-content: flex-start;
    padding: 2px 10px 0;
}

.global-hud {
    border-bottom-color: rgba(76, 110, 153, 0.42);
    background:
        linear-gradient(90deg, rgba(6, 14, 28, 0.985), rgba(8, 18, 35, 0.97)),
        radial-gradient(circle at 65% 0, rgba(37, 99, 235, 0.16), transparent 35%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.global-hud-values {
    gap: 7px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.global-hud-character {
    min-height: 29px;
    min-width: 92px;
    padding: 6px 10px;
    border: 1px solid rgba(56, 189, 248, 0.38);
    border-radius: 9px;
    background: rgba(14, 116, 144, 0.12);
    color: #e7fbff;
}

.global-hud-skills .global-hud-skill-action,
.global-hud-economy span,
.global-hud-economy .global-hud-economy-link {
    min-height: 29px;
    padding: 5px 9px;
    border-color: rgba(100, 125, 161, 0.3);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(27, 43, 66, 0.94), rgba(19, 32, 51, 0.94));
}

.global-hud-skills .global-hud-skill-action:hover,
.global-hud-skills .global-hud-skill-action:focus-visible,
.global-hud-economy span:hover,
.global-hud-economy .global-hud-economy-link:hover,
.global-hud-economy .global-hud-economy-link:focus-visible {
    border-color: rgba(103, 232, 249, 0.4);
    background: rgba(26, 48, 76, 0.98);
}

.global-action-track,
.global-exp-track {
    border-color: rgba(92, 119, 154, 0.42);
}

.active-buffs-panel {
    border-color: var(--ui-border);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.09), transparent 48%),
        rgba(12, 23, 40, 0.97);
    box-shadow: var(--ui-shadow);
}

.active-buffs-panel.is-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
}

.active-buffs-panel.is-empty .active-buffs-title {
    flex: 0 0 auto;
    margin: 0;
}

.active-buffs-panel.is-empty .active-buffs-title strong {
    display: none;
}

.active-buffs-panel.is-empty p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.has-side-navigation .page {
    min-height: calc(100vh - var(--global-hud-height, 78px) - 350px);
}

.has-side-navigation .card,
.has-side-navigation .guild-panel,
.has-side-navigation .market-panel {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background:
        linear-gradient(145deg, rgba(20, 34, 55, 0.98), rgba(14, 25, 42, 0.98));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.guild-heading.card,
.crafting-heading,
.market-heading,
.character-hero,
.mastery-hero,
.inventory-page-heading {
    margin-bottom: 16px;
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 38%),
        linear-gradient(135deg, rgba(19, 34, 56, 0.98), rgba(14, 24, 41, 0.98));
    box-shadow: var(--ui-shadow);
}

.page > .page-title-center {
    margin: 0 0 14px;
    padding: 17px 20px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background:
        linear-gradient(90deg, rgba(19, 36, 61, 0.98), rgba(14, 25, 43, 0.98));
    box-shadow: var(--ui-shadow);
    font-size: clamp(1.65rem, 2.4vw, 2.05rem);
    letter-spacing: -0.03em;
    text-align: left;
}

.battle-top-section {
    max-width: none;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: rgba(13, 25, 43, 0.94);
}

.battle-monster-select {
    justify-content: flex-start;
    margin: 0;
}

.battle-monster-select > div:first-of-type {
    display: grid;
    gap: 6px;
}

.battle-monster-select label {
    color: #91a9c8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.battle-log-heading {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.28);
}

.battle-log-heading h2 {
    margin: 0;
}

.today-stat-card,
.today-card {
    border-radius: 12px;
}

.today-stat-card {
    transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}

.today-stat-card:hover {
    border-color: rgba(56, 189, 248, 0.46);
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.12), transparent 58%),
        #0c192b;
    transform: translateY(-1px);
}

body.has-side-navigation button,
body.has-side-navigation .button-link {
    border-radius: 9px;
    transition: border-color 150ms ease, filter 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

body.has-side-navigation button:not(:disabled):not(.global-action):hover,
body.has-side-navigation .button-link:hover {
    filter: brightness(1.08);
}

body.has-side-navigation button:focus-visible,
body.has-side-navigation a:focus-visible,
body.has-side-navigation input:focus-visible,
body.has-side-navigation select:focus-visible,
body.has-side-navigation textarea:focus-visible {
    outline: 2px solid rgba(103, 232, 249, 0.9);
    outline-offset: 2px;
}

body.has-side-navigation input,
body.has-side-navigation select,
body.has-side-navigation textarea {
    border-radius: 8px;
    border-color: rgba(97, 122, 158, 0.58);
    background-color: #0b1627;
}

body.has-side-navigation input:focus,
body.has-side-navigation select:focus,
body.has-side-navigation textarea:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.11);
}

@media (max-width: 1540px) {
    .active-buffs-panel.is-empty {
        min-height: 38px;
        margin-top: 9px;
    }
}

@media (max-width: 1280px) {
    .side-navigation {
        padding-top: max(14px, calc(14px + var(--safe-area-top)));
    }

    .mobile-nav-toggle {
        transition: left 180ms ease, border-color 150ms ease, background 150ms ease;
    }

    .mobile-nav-toggle span {
        transition: opacity 150ms ease, transform 180ms ease;
    }

    .side-navigation-open .mobile-nav-toggle {
        left: calc(min(82vw, 270px) - 53px + var(--safe-area-left));
        border-color: rgba(103, 232, 249, 0.72);
        background: rgba(13, 29, 49, 0.98);
    }

    .side-navigation-open .mobile-nav-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .side-navigation-open .mobile-nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .side-navigation-open .mobile-nav-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .side-menu a:hover {
        transform: none;
    }
}

@media (max-width: 800px) {
    .global-hud,
    .has-side-navigation .global-hud {
        right: 0;
        overflow: visible;
        backdrop-filter: none;
    }

    .global-hud-values::-webkit-scrollbar {
        display: none;
    }

    .global-hud-values {
        width: 100%;
        min-width: 0;
        padding: 6px calc(60px + var(--safe-area-right)) 6px calc(58px + var(--safe-area-left));
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .global-notification-shell {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        width: calc(52px + var(--safe-area-right));
        min-height: calc(41px + var(--safe-area-top));
        padding: calc(6px + var(--safe-area-top)) calc(8px + var(--safe-area-right)) 7px 6px;
        border-left: 1px solid rgba(51, 65, 85, 0.9);
        border-bottom: 1px solid #334155;
        background: rgba(2, 6, 23, 0.98);
        box-sizing: border-box;
    }

    .global-hud-character,
    .global-hud-skills,
    .global-hud-economy {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .global-hud-skills .global-hud-skill-action,
    .global-hud-economy span,
    .global-hud-economy .global-hud-economy-link {
        min-height: 28px;
        padding: 4px 8px;
    }

    .active-buffs-panel.is-empty {
        display: none;
    }

    .page > .page-title-center {
        padding: 14px 15px;
    }

    .battle-monster-select {
        align-items: stretch;
    }
}

@media (max-width: 620px) {
    .guild-heading.card,
    .crafting-heading,
    .market-heading,
    .character-hero,
    .mastery-hero,
    .inventory-page-heading {
        padding: 14px;
    }

    .battle-top-section {
        padding: 12px;
    }
}

/* Shared right-side rail for buffs and rolling player activity. */
.right-status-rail {
    position: fixed;
    top: calc(var(--global-hud-height, 72px) + 12px);
    right: calc(12px + var(--safe-area-right));
    bottom: calc(12px + var(--safe-area-bottom));
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 230px;
    pointer-events: none;
}

body.chat-collapsed .right-status-rail {
    bottom: calc(76px + var(--safe-area-bottom));
}

.right-status-rail .active-buffs-panel {
    position: static;
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
    max-height: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
}

.hourly-stats-panel {
    flex: 0 0 auto;
    margin-top: auto;
    width: 100%;
    padding: 11px;
    border: 1px solid var(--ui-border, #293852);
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.1), transparent 48%),
        rgba(12, 23, 40, 0.97);
    box-shadow: var(--ui-shadow, 0 16px 40px rgba(0, 0, 0, 0.35));
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.hourly-stats-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(71, 93, 124, 0.52);
}

.hourly-stats-heading div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.hourly-stats-heading span,
.hourly-stat span {
    color: #67e8f9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hourly-stats-heading strong {
    color: #f8fafc;
    font-size: 14px;
}

.hourly-stats-controls {
    display: grid;
    justify-items: end;
    gap: 5px;
    margin-left: auto;
}

.hourly-stats-heading .hourly-stats-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.hourly-stats-heading time {
    padding: 4px 7px;
    border: 1px solid rgba(103, 232, 249, 0.35);
    border-radius: 999px;
    background: rgba(11, 32, 51, 0.82);
    color: #b9f4ff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    white-space: nowrap;
}

.hourly-stats-heading time.inactive {
    border-color: rgba(113, 134, 165, 0.35);
    color: #7186a5;
}

.hourly-stats-controls button {
    min-height: 0;
    padding: 4px 7px;
    border: 1px solid rgba(139, 92, 246, 0.55);
    border-radius: 7px;
    background: rgba(71, 38, 130, 0.42);
    color: #ddd6fe;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
}

.hourly-stats-controls button:hover:not(:disabled) {
    border-color: #a78bfa;
    background: rgba(109, 40, 217, 0.5);
}

.hourly-stats-controls button:disabled {
    cursor: not-allowed;
    filter: none;
    opacity: 0.35;
}

.hourly-stats-controls .activity-tracker-collapse {
    width: 25px;
    padding-right: 0;
    padding-left: 0;
    font-size: 14px;
}

.hourly-stats-panel.is-collapsed {
    padding-top: 9px;
    padding-bottom: 9px;
}

.hourly-stats-panel.is-collapsed .hourly-stats-heading {
    padding-bottom: 0;
    border-bottom: 0;
}

.hourly-stats-panel.is-collapsed .hourly-stats-grid {
    display: none;
}

.hourly-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.hourly-stat {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(60, 82, 112, 0.72);
    border-radius: 8px;
    background: rgba(8, 19, 34, 0.88);
}

.hourly-stat strong {
    overflow: hidden;
    color: #edf6ff;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hourly-stat-win strong {
    color: #4ade80;
}

.hourly-stat-loss strong {
    color: #fb7185;
}

@media (max-width: 1540px) {
    .persistent-chat:not(.chat-collapsed) {
        right: var(--safe-area-right);
    }

    .right-status-rail {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(230px, 360px);
        width: auto;
        margin: 12px 16px 0 236px;
        pointer-events: auto;
    }

    .right-status-rail .active-buffs-panel {
        width: auto;
        overflow: visible;
    }

    .hourly-stats-panel {
        margin-top: 0;
    }
}

@media (max-width: 1280px) {
    .right-status-rail {
        margin: 10px 12px 0;
    }
}

@media (max-width: 800px) {
    .right-status-rail {
        grid-template-columns: 1fr;
    }

    .right-status-rail .active-buffs-panel.is-empty {
        display: none;
    }
}
/* Rev. 0.5.0 Quest Cards */
.quest-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.quest-card-heading-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.quest-card-heading-actions > div {
    min-width: 150px;
    padding: 10px 14px;
    border: 1px solid #36516f;
    border-radius: 10px;
    background: #0d1b2e;
    text-align: right;
}
.quest-card-heading-actions span,
.quest-card-product-top span,
.quest-card-run-header span,
.quest-card-claim span,
.quest-card-upgrade-source span,
.quest-card-upgrade-target span {
    display: block;
    color: #79cfff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.quest-card-active-panel,
.quest-card-queue-panel,
.quest-card-completed-panel,
.quest-card-inventory-panel,
.quest-card-upgrade-panel,
.quest-card-drop-panel {
    margin-top: 14px;
}
.quest-card-run {
    padding: 16px;
    border: 1px solid #35506c;
    border-left: 4px solid #73859b;
    border-radius: 10px;
    background: linear-gradient(135deg, #0c1b2e, #111d33);
}
.quest-card-run-header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.quest-card-run-header h3,
.quest-card-product h3,
.quest-card-type-title h3 {
    margin: 2px 0 0;
}
.quest-card-emblem,
.quest-card-type-title > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #2b9bc8;
    border-radius: 9px;
    background: #102942;
    color: #72e4ff;
    font-weight: 900;
}
.quest-card-reward {
    color: #bd8aff;
    font-size: 1.05rem;
}
.quest-card-progress {
    margin: 14px 0 10px;
}
.quest-card-run-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.quest-card-run-footer > span {
    color: #9fb7d4;
}
.quest-card-run-footer .guild-actions,
.quest-card-upgrade-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.quest-card-empty {
    display: grid;
    min-height: 150px;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed #38536f;
    border-radius: 10px;
    color: #9fb7d4;
}
.quest-card-empty strong {
    color: #fff;
    font-size: 1.1rem;
}
.quest-card-queue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.quest-card-queue-state {
    margin: 12px 0;
    padding: 8px 10px;
    border-radius: 7px;
    background: #172944;
    color: #91b9e8;
    font-weight: 700;
}
.quest-card-queue-slot {
    display: flex;
    min-height: 126px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 16px;
    border: 1px dashed #3a4c62;
    border-radius: 10px;
    background: #0d192a;
}
.quest-card-queue-slot span,
.quest-card-queue-slot small {
    color: #7891ae;
}
.quest-queue-qol-note {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #6e4cb1;
    border-radius: 8px;
    background: #231b42;
}
.quest-queue-qol-note span {
    color: #bda9e6;
}
.quest-card-claim-grid,
.quest-card-drop-list {
    display: grid;
    gap: 8px;
}
.quest-card-claim {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid #344b66;
    border-left: 4px solid #73859b;
    border-radius: 8px;
    background: #0c1a2c;
}
.quest-card-claim > div {
    display: grid;
    gap: 3px;
}
.quest-card-claim small {
    color: #819ab7;
}
.quest-card-type-section + .quest-card-type-section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #34465a;
}
.quest-card-type-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}
.quest-card-type-title p {
    margin: 3px 0 0;
    color: #91a8c3;
}
.quest-card-inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.quest-card-product {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    gap: 12px;
    padding: 13px;
    border: 1px solid #344b66;
    border-top: 3px solid #73859b;
    border-radius: 9px;
    background: linear-gradient(180deg, #102038, #0b1728);
}
.quest-card-product-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.quest-card-product-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.quest-card-product-stats > div {
    padding: 8px;
    border-radius: 7px;
    background: #091525;
}
.quest-card-product-stats span {
    display: block;
    color: #7893b2;
    font-size: 0.72rem;
    text-transform: uppercase;
}
.quest-card-product form {
    margin-top: auto;
}
.quest-card-product button {
    width: 100%;
}
.quest-card-drop-list > div {
    display: flex;
    justify-content: space-between;
    padding: 9px 11px;
    border-left: 3px solid #73859b;
    border-radius: 6px;
    background: #0c1929;
}
.quest-card-drop-list span {
    color: #7f9ab8;
}
.quest-card-drop-result {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}
.quest-card-drop-source {
    display: inline-flex;
    padding: 2px 7px;
    border: 1px solid #365675;
    border-radius: 999px;
    background: #10243a;
    color: #79cfff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.quest-card-upgrade-note {
    color: #9fb4ce;
}
.quest-card-upgrade-grid {
    display: grid;
    gap: 9px;
}
.quest-card-upgrade-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 32px minmax(180px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid #334960;
    border-radius: 8px;
    background: #0c192a;
}
.quest-card-upgrade-source,
.quest-card-upgrade-target {
    padding-left: 10px;
    border-left: 3px solid #73859b;
}
.quest-card-upgrade-source small {
    display: block;
    color: #7e98b5;
}
.quest-card-upgrade-arrow {
    color: #7ddfff;
    font-size: 1.4rem;
    text-align: center;
}
.rarity-common { --quest-rarity: #aeb8c5; }
.rarity-uncommon { --quest-rarity: #42d67b; }
.rarity-rare { --quest-rarity: #3f9cff; }
.rarity-epic { --quest-rarity: #b063ff; }
.rarity-legendary { --quest-rarity: #ff9f37; }
.quest-card-run[class*="rarity-"],
.quest-card-claim[class*="rarity-"] { border-left-color: var(--quest-rarity); }
.quest-card-product[class*="rarity-"] { border-top-color: var(--quest-rarity); }
.quest-card-upgrade-source[class*="rarity-"],
.quest-card-upgrade-target[class*="rarity-"] { border-left-color: var(--quest-rarity); }
.quest-card-product[class*="rarity-"] .quest-card-product-top span,
.quest-card-run[class*="rarity-"] .quest-card-run-header span,
.quest-card-claim[class*="rarity-"] > strong,
.quest-card-upgrade-source[class*="rarity-"] span,
.quest-card-upgrade-target[class*="rarity-"] span,
.quest-card-drop-list [class*="rarity-"] strong { color: var(--quest-rarity); }
@media (max-width: 1200px) {
    .quest-card-inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .quest-card-heading,
    .quest-card-run-footer,
    .quest-queue-qol-note { align-items: stretch; flex-direction: column; }
    .quest-card-heading-actions { justify-content: space-between; }
    .quest-card-queue-grid,
    .quest-card-inventory-grid { grid-template-columns: 1fr; }
    .quest-card-drop-list > div { align-items: flex-start; flex-direction: column; gap: 6px; }
    .quest-card-drop-result { justify-items: start; text-align: left; }
    .quest-card-run-header { grid-template-columns: 42px minmax(0, 1fr); }
    .quest-card-reward { grid-column: 1 / -1; }
    .quest-card-claim,
    .quest-card-upgrade-row { grid-template-columns: 1fr; }
    .quest-card-upgrade-arrow { transform: rotate(90deg); }
}

/* Workshop-inspired Quest page refresh 0.5.47 */
body.quests-page .quest-hero {
    display: grid;
    grid-template-columns: 154px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
    padding: 16px 18px;
    background:
        radial-gradient(circle at 9% 46%, rgba(34, 211, 238, 0.18), transparent 27%),
        radial-gradient(circle at 30% 0%, rgba(124, 58, 237, 0.12), transparent 35%),
        linear-gradient(135deg, #15243b, #111d31 72%);
}

body.quests-page .quest-hero-art {
    display: grid;
    min-width: 0;
    min-height: 128px;
    place-items: center;
}

body.quests-page .quest-hero-card-stack {
    position: relative;
    width: 112px;
    height: 112px;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.32));
}

body.quests-page .quest-hero-card {
    position: absolute;
    top: 13px;
    left: 31px;
    display: grid;
    width: 58px;
    height: 82px;
    place-items: center;
    border: 2px solid rgba(165, 243, 252, 0.75);
    border-radius: 9px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 38%),
        #0d2840;
    color: #a5f3fc;
    font-size: 24px;
    font-weight: 900;
    box-shadow: inset 0 0 0 4px rgba(8, 47, 73, 0.72), 0 0 16px rgba(34, 211, 238, 0.18);
}

body.quests-page .quest-hero-card::after {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(165, 243, 252, 0.24);
    border-radius: 5px;
    content: '';
}

body.quests-page .quest-hero-card-combat {
    transform: translate(-24px, 8px) rotate(-13deg);
    border-color: rgba(96, 165, 250, 0.82);
    color: #93c5fd;
}

body.quests-page .quest-hero-card-gathering {
    transform: translate(24px, 8px) rotate(13deg);
    border-color: rgba(74, 222, 128, 0.82);
    color: #86efac;
}

body.quests-page .quest-hero-card-crafting {
    z-index: 2;
    border-color: rgba(192, 132, 252, 0.9);
    color: #d8b4fe;
}

body.quests-page .quest-hero-content {
    min-width: 0;
}

body.quests-page .quest-hero-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

body.quests-page .quest-hero-heading h1 {
    margin: 3px 0 4px;
    font-size: 26px;
    line-height: 1.15;
}

body.quests-page .quest-hero-heading p {
    margin: 0 0 10px;
    color: #b7c9df;
    font-size: 13px;
}

body.quests-page .quest-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body.quests-page .quest-hero-metrics > div {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 7px 10px;
    border: 1px solid #354963;
    border-radius: 9px;
    background: rgba(17, 29, 44, 0.72);
}

body.quests-page .quest-hero-metrics span {
    color: #a7bfd9;
    font-size: 12px;
}

body.quests-page .quest-hero-metrics strong {
    overflow: hidden;
    color: #f1f5f9;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.quests-page .quest-main-tabs {
    gap: 6px;
    margin: 0 0 12px;
}

body.quests-page .quest-main-tabs a {
    padding: 7px 10px;
    font-size: 13px;
}

body.quests-page .quest-card-active-panel,
body.quests-page .quest-card-queue-panel,
body.quests-page .quest-card-completed-panel,
body.quests-page .quest-card-inventory-panel,
body.quests-page .quest-card-upgrade-panel,
body.quests-page .quest-card-drop-panel {
    margin: 0 0 12px;
    padding: 14px 16px;
}

body.quests-page .quest-card-active-panel .character-section-title,
body.quests-page .quest-card-queue-panel .character-section-title,
body.quests-page .quest-card-completed-panel .character-section-title,
body.quests-page .quest-card-inventory-panel .character-section-title,
body.quests-page .quest-card-upgrade-panel .character-section-title,
body.quests-page .quest-card-drop-panel .character-section-title {
    margin-bottom: 10px;
    padding-bottom: 7px;
}

body.quests-page .character-section-title h2 {
    font-size: 18px;
}

body.quests-page .quest-card-type-section + .quest-card-type-section {
    margin-top: 16px;
    padding-top: 15px;
}

body.quests-page .quest-card-type-title {
    gap: 9px;
    margin-bottom: 9px;
}

body.quests-page .quest-card-type-title > span {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

body.quests-page .quest-card-type-title p {
    font-size: 12px;
}

body.quests-page .quest-card-inventory-grid {
    gap: 8px;
}

body.quests-page .quest-card-product {
    position: relative;
    min-height: 166px;
    gap: 10px;
    overflow: hidden;
    padding: 10px 10px 9px;
    border-radius: 9px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--quest-rarity, #73859b) 13%, transparent), transparent 48%),
        linear-gradient(180deg, #102038, #0b1728);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body.quests-page .quest-card-product:not(.is-empty):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--quest-rarity) 62%, #344b66);
    border-top-color: var(--quest-rarity);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), 0 0 18px color-mix(in srgb, var(--quest-rarity) 10%, transparent);
}

body.quests-page .quest-card-product.is-empty {
    opacity: 0.68;
}

body.quests-page .quest-card-product-header {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

body.quests-page .quest-card-product-emblem {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--quest-rarity) 70%, #334960);
    border-radius: 8px;
    background: color-mix(in srgb, var(--quest-rarity) 12%, #0b1728);
    color: var(--quest-rarity);
    font-weight: 900;
}

body.quests-page .quest-card-product-copy {
    min-width: 0;
}

body.quests-page .quest-card-product-rarity {
    display: block;
    color: var(--quest-rarity);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.quests-page .quest-card-product h3 {
    overflow: hidden;
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.quests-page .quest-card-product-owned {
    display: grid;
    justify-items: end;
    min-width: 45px;
    padding: 4px 6px;
    border: 1px solid color-mix(in srgb, var(--quest-rarity) 34%, #334960);
    border-radius: 7px;
    background: rgba(7, 16, 31, 0.46);
}

body.quests-page .quest-card-product-owned strong {
    color: #f8fafc;
    font-size: 14px;
    line-height: 1;
}

body.quests-page .quest-card-product-owned span {
    color: #8fa8c4;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.quests-page .quest-card-product-stats {
    gap: 5px;
}

body.quests-page .quest-card-product-stats > div {
    padding: 6px 8px;
    border: 1px solid rgba(53, 73, 99, 0.58);
    background: rgba(7, 16, 31, 0.62);
}

body.quests-page .quest-card-product-stats > div:last-child strong {
    color: var(--quest-rarity);
}

body.quests-page .quest-card-product button {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 12px;
}

body.quests-page .quest-card-run {
    padding: 11px 12px;
}

body.quests-page .quest-card-progress {
    margin: 10px 0 8px;
}

body.quests-page .quest-card-empty {
    min-height: 100px;
}

body.quests-page .quest-card-queue-grid {
    gap: 8px;
}

body.quests-page .quest-card-queue-slot {
    min-height: 96px;
    padding: 12px;
}

body.quests-page .quest-card-upgrade-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 9px;
    padding: 10px;
    border-color: #354963;
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.06), transparent 48%),
        #0c192a;
}

body.quests-page .quest-card-upgrade-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-left: 3px solid #22d3ee;
    border-radius: 0 8px 8px 0;
    background: rgba(8, 47, 73, 0.24);
    font-size: 12px;
}

body.quests-page .quest-card-upgrade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.quests-page .quest-card-upgrade-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: stretch;
    gap: 7px;
}

body.quests-page .quest-card-upgrade-source,
body.quests-page .quest-card-upgrade-target {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--quest-rarity) 54%, #334960);
    border-left: 3px solid var(--quest-rarity);
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--quest-rarity) 13%, transparent), transparent 58%),
        #111d2c;
    color: #f1f5f9;
}

body.quests-page .quest-card-upgrade-source strong,
body.quests-page .quest-card-upgrade-target strong {
    overflow: hidden;
    color: #f8fafc;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.quests-page .quest-card-upgrade-source small,
body.quests-page .quest-card-upgrade-target small {
    color: #8fa8c4;
    font-size: 11px;
}

body.quests-page .quest-card-upgrade-arrow {
    display: grid;
    place-items: center;
    transform: none;
    color: #67e8f9;
    font-size: 21px;
}

body.quests-page .quest-card-upgrade-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #293c55;
}

body.quests-page .quest-card-upgrade-actions form {
    margin: 0;
}

body.quests-page .quest-card-upgrade-actions button {
    min-width: 45px;
    padding: 6px 9px;
}

body.quests-page .quest-card-upgrade-capacity {
    margin-right: auto;
    color: #8fa8c4;
    font-size: 11px;
}

@media (max-width: 900px) {
    body.quests-page .quest-hero {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 12px;
    }

    body.quests-page .quest-hero-art {
        min-height: 105px;
        transform: scale(0.84);
    }

    body.quests-page .quest-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.quests-page .quest-card-upgrade-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    body.quests-page .quest-hero {
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
        padding: 12px;
    }

    body.quests-page .quest-hero-art {
        min-height: 82px;
        transform: scale(0.66);
        transform-origin: top left;
    }

    body.quests-page .quest-hero-content {
        display: contents;
    }

    body.quests-page .quest-hero-heading {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    body.quests-page .quest-hero-metrics {
        grid-column: 1 / -1;
    }

    body.quests-page .quest-card-active-panel,
    body.quests-page .quest-card-queue-panel,
    body.quests-page .quest-card-completed-panel,
    body.quests-page .quest-card-inventory-panel,
    body.quests-page .quest-card-upgrade-panel,
    body.quests-page .quest-card-drop-panel {
        padding: 12px;
    }
}

@media (max-width: 520px) {
    body.quests-page .quest-card-upgrade-flow {
        grid-template-columns: 1fr;
    }

    body.quests-page .quest-card-upgrade-arrow {
        transform: rotate(90deg);
    }

    body.quests-page .quest-card-upgrade-actions {
        flex-wrap: wrap;
    }

    body.quests-page .quest-card-upgrade-capacity {
        width: 100%;
        margin: 0;
    }
}

/* Rev. 0.5.15 - Stats & Mechanics Guide */
.stat-guide-hero,
.stat-guide-tools,
.stat-guide-sections {
    --cyan: var(--ui-cyan);
    --blue: var(--ui-blue);
    --text: var(--ui-text);
    --muted: var(--ui-muted);
    --border: var(--ui-border);
}

.stat-guide-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-color: rgba(34, 211, 238, 0.28);
    background:
        radial-gradient(circle at 88% 18%, rgba(34, 211, 238, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(17, 31, 51, 0.98), rgba(8, 20, 36, 0.98));
}

.stat-guide-hero h1 {
    margin: 4px 0 8px;
}

.stat-guide-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
}

.stat-guide-kicker,
.stat-guide-section-heading span {
    color: var(--cyan);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.stat-guide-count {
    display: grid;
    min-width: 96px;
    padding: 14px 18px;
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 12px;
    background: rgba(4, 15, 29, 0.68);
    text-align: center;
}

.stat-guide-count strong {
    color: var(--cyan);
    font-size: 1.65rem;
    line-height: 1;
}

.stat-guide-count span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stat-guide-tools {
    margin-top: 14px;
}

.stat-guide-tools > label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
}

.stat-guide-search-row {
    display: flex;
    gap: 8px;
}

.stat-guide-search-row input {
    min-width: 0;
    flex: 1;
    color: var(--text);
    background: rgba(4, 15, 29, 0.86);
}

.stat-guide-result-count {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.stat-guide-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.stat-guide-category-nav a {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(7, 17, 31, 0.72);
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
}

.stat-guide-category-nav a:hover,
.stat-guide-category-nav a:focus-visible {
    border-color: var(--cyan);
    color: var(--cyan);
}

.stat-guide-sections {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.stat-guide-section {
    scroll-margin-top: 92px;
}

.stat-guide-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.stat-guide-section-heading h2 {
    margin: 3px 0 0;
}

.stat-guide-section-heading p {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: right;
}

.stat-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: 10px;
}

.stat-guide-entry {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(7, 17, 31, 0.72);
}

.stat-guide-entry[hidden],
.stat-guide-section[hidden] {
    display: none;
}

.stat-guide-entry header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.stat-guide-entry h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.94rem;
}

.stat-guide-entry header span {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid rgba(34, 211, 238, 0.24);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(8, 145, 178, 0.08);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.stat-guide-entry > p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.stat-guide-detail {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    border-left: 2px solid rgba(96, 165, 250, 0.62);
    border-radius: 0 7px 7px 0;
    background: rgba(15, 29, 49, 0.82);
}

.stat-guide-detail span {
    color: var(--blue);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stat-guide-detail strong {
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
}

.stat-guide-formula {
    border-left-color: rgba(34, 211, 238, 0.75);
}

.stat-guide-formula span {
    color: var(--cyan);
}

.stat-guide-note {
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px dashed rgba(148, 163, 184, 0.22);
    color: #cbd5e1;
    font-size: 0.74rem;
    line-height: 1.5;
}

.stat-guide-empty {
    text-align: center;
}

.stat-guide-empty h2 {
    margin-top: 0;
}

.stat-guide-empty p {
    margin-bottom: 0;
    color: var(--muted);
}

@media (max-width: 700px) {
    .stat-guide-hero,
    .stat-guide-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .stat-guide-count {
        grid-template-columns: auto auto;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
        min-width: 0;
    }

    .stat-guide-count span {
        margin-top: 0;
    }

    .stat-guide-section-heading p {
        max-width: none;
        text-align: left;
    }

    .stat-guide-search-row {
        align-items: stretch;
    }

    .stat-guide-entry header {
        flex-direction: column;
        gap: 7px;
    }
}

.player-title-halloween-pumpkin-keeper,
.chat-player-title.player-title-halloween-pumpkin-keeper { border-color: rgba(251, 146, 60, .75); background: rgba(124, 45, 18, .18); color: #fb923c; text-shadow: 0 0 9px rgba(249, 115, 22, .55); }
.player-title-halloween-cauldron-keeper,
.chat-player-title.player-title-halloween-cauldron-keeper { border-color: rgba(163, 230, 53, .75); background: rgba(54, 83, 20, .18); color: #a3e635; text-shadow: 0 0 9px rgba(132, 204, 22, .55); }
.player-title-halloween-cauldron-sovereign,
.chat-player-title.player-title-halloween-cauldron-sovereign { border-color: rgba(251, 191, 36, .85); background: rgba(120, 53, 15, .2); color: #fbbf24; text-shadow: 0 0 11px rgba(249, 115, 22, .75); }
.player-title-halloween-witchfire-herald,
.chat-player-title.player-title-halloween-witchfire-herald { border-color: rgba(196, 181, 253, .8); background: rgba(76, 29, 149, .2); color: #c4b5fd; text-shadow: 0 0 11px rgba(139, 92, 246, .75); }
.player-title-halloween-benefactor,
.chat-player-title.player-title-halloween-benefactor { border-color: rgba(253, 186, 116, .78); background: rgba(124, 45, 18, .18); color: #fdba74; text-shadow: 0 0 9px rgba(194, 65, 12, .65); }

.halloween-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; overflow: hidden; border-color: rgba(249, 115, 22, .48); background: radial-gradient(circle at 8% 25%, rgba(249, 115, 22, .2), transparent 30%), radial-gradient(circle at 85% 0%, rgba(126, 34, 206, .18), transparent 35%), linear-gradient(135deg, #111827, #0f172a 60%, #1b1230); }
.halloween-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: radial-gradient(#fed7aa .7px, transparent .7px); background-size: 18px 18px; }
.halloween-hero > * { position: relative; z-index: 1; }
.halloween-hero h1 { margin: 3px 0 7px; color: #fff7ed; font-size: clamp(27px, 3vw, 42px); }
.halloween-hero p { max-width: 850px; margin: 0; color: #cbd5e1; line-height: 1.55; }
.halloween-moon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; font-size: 50px; background: rgba(251, 146, 60, .12); box-shadow: 0 0 40px rgba(249, 115, 22, .25); }
.halloween-event-dates { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 13px; color: #fdba74; }
.halloween-event-dates span { color: #94a3b8; }
.halloween-status-badge { align-self: start; padding: 7px 12px; border: 1px solid rgba(251, 146, 60, .5); border-radius: 999px; background: rgba(124, 45, 18, .45); color: #fed7aa; font-weight: 800; white-space: nowrap; }
.halloween-status-badge.active { border-color: rgba(163, 230, 53, .6); background: rgba(54, 83, 20, .42); color: #bef264; }
.halloween-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.halloween-stat-card { display: grid; gap: 7px; min-height: 124px; align-content: center; }
.halloween-stat-card > span { color: #94a3b8; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.halloween-stat-card > strong { color: #fdba74; font-size: 25px; }
.halloween-stat-card small { color: #94a3b8; line-height: 1.45; }
.halloween-balance-card { border-color: rgba(249, 115, 22, .45); }
.halloween-active-bonus-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.halloween-active-bonus-values > div { display: grid; gap: 3px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(71, 85, 105, .78); border-radius: 8px; background: rgba(2, 6, 23, .3); }
.halloween-active-bonus-values strong { color: #fdba74; font-size: 22px; line-height: 1; }
.halloween-active-bonus-values > div:last-child strong { color: #c084fc; }
.halloween-active-bonus-values small { font-size: 11px; }
.halloween-cauldron-panel, .halloween-finds-panel, .halloween-shop-panel { margin-top: 12px; }
.halloween-cauldron-visual { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 0; }
.halloween-cauldron-glow { display: grid; place-items: center; width: 104px; height: 82px; border: 2px solid #64748b; border-top-color: #94a3b8; border-radius: 18px 18px 42px 42px; color: #bef264; font-size: 43px; background: linear-gradient(to top, rgba(132, 204, 22, .22), rgba(88, 28, 135, .32)); box-shadow: 0 15px 38px rgba(132, 204, 22, .16); }
.halloween-cauldron-progress { height: 17px; overflow: hidden; border: 1px solid #475569; border-radius: 999px; background: #07111f; }
.halloween-cauldron-progress > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7e22ce, #a3e635 70%, #fb923c); box-shadow: 0 0 18px rgba(163, 230, 53, .5); }
.halloween-cauldron-progress-wrap p { margin: 8px 0 3px; color: #cbd5e1; }
.halloween-cauldron-progress-wrap small { color: #94a3b8; }
.halloween-bonus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.halloween-bonus-grid > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #334155; border-radius: 9px; background: rgba(2, 6, 23, .34); }
.halloween-bonus-grid span { color: #cbd5e1; }
.halloween-bonus-grid strong { color: #bef264; white-space: nowrap; }
.halloween-reset-note { margin: 13px 0 0; color: #d8b4fe; }
.halloween-donate-form { display: grid; grid-template-columns: minmax(190px, 320px) auto; align-items: end; gap: 10px; margin-top: 12px; }
.halloween-donate-form label { display: grid; gap: 5px; color: #94a3b8; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.halloween-find-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.halloween-find-grid article { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #334155; border-radius: 10px; background: rgba(2, 6, 23, .32); }
.halloween-find-grid div { display: grid; gap: 4px; }
.halloween-find-grid strong { color: #f8fafc; }
.halloween-find-grid small { color: #94a3b8; }
.halloween-drop-icon { font-size: 31px; }
.halloween-shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.halloween-shop-card { display: flex; flex-direction: column; min-height: 285px; padding: 16px; border: 1px solid #334155; border-radius: 11px; background: linear-gradient(160deg, rgba(30, 41, 59, .8), rgba(2, 6, 23, .55)); }
.halloween-shop-card > span { color: #a78bfa; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.halloween-shop-card h3 { margin: 8px 0; color: #f8fafc; }
.halloween-shop-card p { flex: 1; margin: 0 0 14px; color: #94a3b8; line-height: 1.5; }
.halloween-shop-card form { display: grid; gap: 8px; }
.halloween-shop-icon { margin-bottom: 9px; font-size: 30px; }
.halloween-title-card { border-color: rgba(249, 115, 22, .42); }
.halloween-title-card.halloween_cauldron_keeper { border-color: rgba(163, 230, 53, .42); }
.halloween-ranking-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); gap: 12px; margin-top: 12px; }
.halloween-ranking-list { display: grid; gap: 5px; }
.halloween-ranking-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 7px; background: rgba(15, 23, 42, .72); }
.halloween-ranking-row:nth-child(1) { border: 1px solid rgba(251, 191, 36, .55); }
.halloween-ranking-row:nth-child(2) { border: 1px solid rgba(196, 181, 253, .44); }
.halloween-ranking-row:nth-child(3) { border: 1px solid rgba(251, 146, 60, .42); }
.halloween-ranking-row.is-you { background: rgba(30, 64, 175, .22); }
.halloween-ranking-row > strong { color: #fdba74; }
.halloween-ranking-row span { color: #f8fafc; font-weight: 700; }
.halloween-ranking-row em { color: #a3e635; font-style: normal; }
.halloween-own-rank { margin-top: 10px; padding: 10px; border: 1px solid #2563eb; border-radius: 7px; color: #bfdbfe; }
.halloween-prize-panel > p { color: #94a3b8; line-height: 1.5; }
.halloween-rank-prize { display: grid; grid-template-columns: 42px 1fr; align-items: center; margin-top: 9px; padding: 12px; border: 1px solid #334155; border-radius: 8px; background: rgba(2, 6, 23, .34); }
.halloween-rank-prize > strong { color: #fdba74; font-size: 18px; }
.halloween-rank-prize span { font-weight: 900; }
.halloween-rank-prize small { grid-column: 2; margin-top: 4px; color: #94a3b8; }

@media (max-width: 850px) {
    .halloween-hero { grid-template-columns: auto minmax(0, 1fr); }
    .halloween-status-badge { grid-column: 1 / -1; justify-self: start; }
    .halloween-overview-grid, .halloween-bonus-grid, .halloween-find-grid { grid-template-columns: 1fr; }
    .halloween-ranking-layout { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .halloween-hero { grid-template-columns: 1fr; }
    .halloween-moon { width: 66px; height: 66px; font-size: 38px; }
    .halloween-cauldron-visual { grid-template-columns: 1fr; }
    .halloween-donate-form { grid-template-columns: 1fr; }
    .halloween-ranking-row { grid-template-columns: 40px minmax(0, 1fr); }
    .halloween-ranking-row em { grid-column: 2; }
    .halloween-active-bonus-values { grid-template-columns: 1fr; }
}


/* Poll composer and result cards */
.poll-create-heading h2 {
    margin: 3px 0 5px;
}

.poll-create-heading p,
.poll-create-actions span,
.poll-option-builder small {
    margin: 0;
    color: #9fb0c6;
}

.poll-create-form {
    display: grid;
    gap: 18px;
}

.poll-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 250px);
    gap: 14px;
}

.poll-create-grid label {
    display: grid;
    gap: 6px;
}

.poll-description-field {
    grid-column: 1 / -1;
}

.poll-description-field > span {
    color: #7f91aa;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.poll-create-form input,
.poll-create-form select,
.poll-create-form textarea {
    width: 100%;
    max-width: none;
    color: #eaf2ff;
    caret-color: #ffffff;
    background: #0b1627;
}

.poll-create-form input::placeholder,
.poll-create-form textarea::placeholder {
    color: #71839c;
    opacity: 1;
}

.poll-create-form textarea {
    min-height: 96px;
    line-height: 1.45;
}

.poll-option-builder {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #263a58;
    border-radius: 11px;
    background: rgba(7, 16, 31, 0.42);
}

.poll-option-builder-heading,
.poll-create-actions,
.poll-vote-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.poll-option-builder legend {
    padding: 0;
    color: #f8fbff;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.poll-option-inputs {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.poll-option-input-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    gap: 8px;
    align-items: center;
}

.poll-option-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #315079;
    border-radius: 8px;
    color: #a8c7f4;
    background: #102038;
    font-size: 0.75rem;
    font-weight: 800;
}

.poll-option-remove {
    display: grid;
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.2);
    font-size: 1.05rem;
    line-height: 1;
}

.poll-option-remove:disabled {
    visibility: hidden;
}

.poll-create-actions {
    padding-top: 2px;
}

.poll-create-actions button,
.poll-vote-actions button {
    min-width: 150px;
}

.poll-card {
    gap: 16px;
    border-color: #2a3d5d;
    background:
        linear-gradient(135deg, rgba(47, 125, 246, 0.055), transparent 45%),
        #111d30;
}

.poll-card.closed {
    border-color: #25344e;
    opacity: 1;
}

.poll-card-header {
    gap: 18px;
    align-items: flex-start;
}

.poll-card-heading {
    min-width: 0;
    max-width: 1000px;
}

.poll-status-row,
.poll-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    color: #91a5c0;
    font-size: 0.78rem;
}

.poll-status {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 9px;
    border: 1px solid rgba(52, 211, 153, 0.38);
    border-radius: 999px;
    color: #86efac;
    background: rgba(5, 150, 105, 0.14);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.poll-status.closed {
    border-color: #3b4c65;
    color: #aab8cb;
    background: rgba(71, 85, 105, 0.18);
}

.poll-card-header h2 {
    margin: 9px 0 6px;
    color: #f8fbff;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.poll-description {
    max-width: 95ch;
    margin: 0 0 10px;
    color: #c1d0e4;
    line-height: 1.5;
}

.poll-admin-actions {
    flex: 0 0 auto;
}

.poll-options {
    gap: 9px;
}

.poll-option {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    padding: 11px 13px;
    border-color: #293c59;
    border-radius: 10px;
    background: rgba(8, 19, 34, 0.72);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.poll-option:hover {
    border-color: #3b5e8d;
    background: rgba(16, 35, 59, 0.82);
}

.poll-option.selected {
    border-color: #2f7df6;
    background: rgba(47, 125, 246, 0.13);
}

.poll-option input {
    accent-color: #2f7df6;
}

.poll-option-content {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.poll-option-main strong {
    color: #f8fbff;
    overflow-wrap: anywhere;
}

.poll-option-main em {
    color: #a8bad1;
}

.poll-result-bar {
    grid-column: auto;
    height: 6px;
}

.poll-result-bar span {
    min-width: 0;
}

.poll-vote-actions {
    margin-top: 3px;
    padding-top: 11px;
    border-top: 1px solid #263851;
}

.poll-vote-actions span {
    color: #91a5c0;
    font-size: 0.8rem;
}

.poll-empty-card {
    justify-items: center;
    padding: 34px 18px;
    color: #9fb0c6;
    text-align: center;
}

.poll-empty-card strong {
    color: #f8fbff;
    font-size: 1rem;
}

@media (max-width: 760px) {
    .poll-create-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .poll-description-field {
        grid-column: auto;
    }

    .poll-option-builder-heading,
    .poll-create-actions,
    .poll-vote-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .poll-option-builder-heading button,
    .poll-create-actions button,
    .poll-vote-actions button {
        width: 100%;
    }

    .poll-option {
        padding: 10px;
    }
}

.guild-contribution-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.guild-contribution-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.guild-contribution-heading h2,
.guild-contribution-heading p {
    margin: 0;
}

.guild-contribution-heading p {
    margin-top: 5px;
    color: #9fb0c6;
    font-size: 0.82rem;
}

.guild-contribution-periods {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid #30445f;
    border-radius: 9px;
    background: #0a1525;
}

.guild-contribution-periods a {
    padding: 7px 12px;
    border-radius: 6px;
    color: #a8b7cc;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.guild-contribution-periods a:hover,
.guild-contribution-periods a.active {
    color: #ffffff;
    background: #2563eb;
}

.guild-contribution-tables {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.guild-contribution-table-block {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #30445f;
    border-radius: 10px;
    background: rgba(8, 22, 39, 0.46);
}

.guild-contribution-table-title {
    padding: 10px 13px;
    border-bottom: 1px solid #30445f;
    background: rgba(24, 43, 69, 0.48);
}

.guild-contribution-table-title h3 {
    margin: 0;
    font-size: 0.9rem;
}

.guild-contribution-table-wrap {
    margin: 0;
}

.guild-contribution-table {
    width: 100%;
    min-width: 680px;
    table-layout: fixed;
}

.guild-contribution-table th,
.guild-contribution-table td {
    text-align: right;
}

.guild-contribution-table th:first-child,
.guild-contribution-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 18%;
    min-width: 135px;
    text-align: left;
    background: #111d30;
}

.guild-contribution-table thead th:first-child {
    z-index: 2;
    background: #15233a;
}

.guild-contribution-total-row td {
    color: #dbeafe;
    background: rgba(37, 99, 235, 0.09);
}

.guild-contribution-total-row td:first-child {
    background: #162945;
}

.guild-contribution-value {
    color: #f8fbff;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: help;
}

.guild-contribution-value.is-zero {
    color: #61728b;
    font-weight: 600;
}

.guild-contribution-member a,
.guild-contribution-member small {
    display: block;
}

.guild-contribution-member small {
    margin-top: 3px;
    color: #8394aa;
    font-size: 0.68rem;
}

@media (max-width: 760px) {
    .guild-contribution-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .guild-contribution-periods,
    .guild-contribution-periods a {
        flex: 1 1 0;
        text-align: center;
    }

    .guild-contribution-table {
        min-width: 650px;
    }
}

/* Rev. 0.5.37: shared mobile interface pass. */
.active-buffs-mobile-toggle,
.mobile-subnav-toggle,
.mobile-table-scroll-hint {
    display: none;
}

.feedback-card,
.feedback-card-header,
.feedback-card-header > div,
.feedback-card-content,
.feedback-body,
.feedback-reply,
.feedback-reply-header,
.feedback-reply p {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 800px), (max-height: 500px) {
    .right-status-rail {
        gap: 7px;
        margin: 8px 10px 0;
    }

    .right-status-rail .active-buffs-panel,
    .hourly-stats-panel {
        border-radius: 10px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
    }

    .active-buffs-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 70px;
        min-height: 40px;
        padding: 6px 9px;
        border: 1px solid rgba(56, 189, 248, 0.46);
        border-radius: 8px;
        background: rgba(14, 116, 144, 0.2);
        color: #bae6fd;
        font-size: 0.72rem;
        font-weight: 900;
    }

    .active-buffs-mobile-toggle b {
        font-size: 1rem;
        line-height: 1;
    }

    .active-buffs-panel.is-mobile-collapsed {
        max-height: none;
        padding: 7px 9px;
        overflow: hidden;
    }

    .active-buffs-panel.is-mobile-collapsed .active-buffs-title {
        margin: 0;
    }

    .active-buffs-panel.is-mobile-collapsed .active-buffs-list,
    .active-buffs-panel.is-mobile-collapsed > p {
        display: none;
    }

    .right-status-rail .active-buffs-panel:not(.is-mobile-collapsed) {
        max-height: min(52vh, 360px);
        overflow-y: auto;
    }

    .hourly-stats-panel.is-collapsed #activity-tracker-reset {
        display: none;
    }

    .hourly-stats-panel.is-collapsed .hourly-stats-heading {
        align-items: center;
        flex-wrap: nowrap;
    }

    .hourly-stats-panel.is-collapsed .hourly-stats-controls {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .hourly-stats-controls .activity-tracker-collapse,
    .hourly-stats-controls button {
        min-width: 40px;
        min-height: 40px;
    }

    .mobile-subnav-toggle {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 2px 10px;
        width: 100%;
        min-height: 48px;
        margin: 10px 0 7px;
        padding: 8px 10px;
        border: 1px solid #385071;
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(22, 45, 75, 0.98), rgba(12, 25, 43, 0.98));
        color: #f8fafc;
        text-align: left;
    }

    .mobile-subnav-toggle > span {
        grid-column: 1;
        color: #67e8f9;
        font-size: 0.64rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-subnav-toggle > strong {
        grid-column: 1;
        overflow: hidden;
        font-size: 0.86rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-subnav-toggle > b {
        grid-column: 2;
        grid-row: 1 / 3;
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        border: 1px solid rgba(56, 189, 248, 0.42);
        border-radius: 8px;
        background: rgba(14, 116, 144, 0.18);
        color: #bae6fd;
        font-size: 1.1rem;
    }

    nav.mobile-subnav {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin: 0 0 14px;
        padding: 8px;
        overflow: visible;
        border: 1px solid rgba(56, 189, 248, 0.25);
        border-radius: 10px;
        background: rgba(7, 17, 31, 0.82);
    }

    nav.mobile-subnav.mobile-subnav-open {
        display: grid;
    }

    nav.mobile-subnav > a {
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 8px 7px;
        overflow-wrap: anywhere;
        text-align: center;
        white-space: normal;
    }

    .page input:not([type]),
    .page input[type="text"],
    .page input[type="number"],
    .page input[type="email"],
    .page input[type="password"],
    .page input[type="search"],
    .page input[type="url"],
    .page input[type="tel"],
    .page input[type="date"],
    .page input[type="datetime-local"],
    .page input[type="time"],
    .page select,
    .page textarea,
    .auth-shell input:not([type]),
    .auth-shell input[type="text"],
    .auth-shell input[type="email"],
    .auth-shell input[type="password"],
    .auth-shell select,
    .auth-shell textarea {
        max-width: 100%;
        min-height: 42px;
        font-size: 16px;
    }

    .page button,
    .page .button-link,
    .page .small-button,
    .page input[type="button"],
    .page input[type="submit"],
    .mobile-nav-toggle,
    .global-notification-toggle,
    .persistent-chat-toggle,
    .game-guide-button,
    .equipment-enhancement-socket {
        min-height: 42px;
        touch-action: manipulation;
    }

    .persistent-chat:not(.chat-collapsed) {
        --persistent-chat-message-height: 180px;
        max-height: calc(100dvh - var(--global-hud-height, 105px) - 4px);
        padding-top: 0;
    }

    .persistent-chat-toolbar-label {
        display: none;
    }

    .persistent-chat-toggle {
        top: 3px;
        right: 6px;
        min-width: 72px;
        min-height: 27px;
        padding: 3px 7px;
        font-size: 0.66rem;
    }

    .persistent-chat-size-controls {
        top: 3px;
        right: 82px;
    }

    .persistent-chat-size-controls button {
        width: 24px;
        min-width: 24px;
        height: 27px;
        min-height: 27px;
        font-size: 0.9rem;
    }

    .persistent-chat-tabs {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        justify-content: start;
        justify-items: stretch;
        align-items: stretch;
        column-gap: 5px;
        row-gap: 4px;
        min-height: 0;
        padding: 2px 6px 4px;
        overflow: visible;
        scrollbar-width: none;
    }

    .persistent-chat-tabs::after {
        display: none;
    }

    .persistent-chat-tabs button[data-chat-channel-link="party"]:not([hidden]) {
        order: initial;
    }

    .persistent-chat-tabs button {
        width: 100%;
        min-width: 68px;
        max-width: 92px;
        min-height: 24px;
        padding: 2px 6px;
        font-size: 0.63rem;
        white-space: nowrap;
    }

    .persistent-chat-tabs #chat-status {
        display: none;
    }

    .persistent-chat-body {
        padding: 5px 7px 6px;
    }

    .persistent-chat .chat-messages {
        min-height: 160px;
    }

    .persistent-chat .chat-form {
        gap: 6px;
        margin-top: 4px;
    }

    .persistent-chat .chat-form label {
        gap: 0;
        font-size: 0;
    }

    .persistent-chat .chat-form input {
        min-height: 40px;
        font-size: 16px;
    }

    .persistent-chat .chat-emoji-toggle {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .persistent-chat .chat-form > button {
        min-height: 40px;
        padding: 7px 12px;
    }

    .has-side-navigation .page {
        margin-top: 10px;
        padding-right: 8px;
        padding-left: 8px;
        font-size: 14px;
    }

    .page > .page-title-center {
        margin-bottom: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 1.3rem;
        line-height: 1.2;
    }

    .page > .card,
    .page > section.card {
        margin-bottom: 12px;
        padding: 12px;
        border-radius: 10px;
    }

    .page h1 {
        font-size: 1.3rem;
    }

    .page h2 {
        font-size: 1.1rem;
    }

    .page h3 {
        font-size: 0.98rem;
    }

    .inventory-page-heading {
        gap: 8px;
        margin-bottom: 10px;
    }

    .inventory-page-actions {
        gap: 6px;
    }

    .page button,
    .page .button-link,
    .page .small-button,
    .page input[type="button"],
    .page input[type="submit"] {
        min-height: 34px;
        font-size: 0.8rem;
    }

    .right-status-rail {
        gap: 5px;
        margin: 6px 8px 0;
        font-size: 13px;
    }

    .active-buffs-panel.is-mobile-collapsed {
        padding: 5px 7px;
    }

    .active-buffs-title span {
        font-size: 10px;
    }

    .active-buffs-title strong {
        min-width: 20px;
        padding: 2px 6px;
        font-size: 11px;
    }

    .active-buffs-mobile-toggle {
        min-width: 62px;
        min-height: 32px;
        padding: 4px 7px;
        font-size: 0.64rem;
    }

    .active-buffs-mobile-toggle b {
        font-size: 0.86rem;
    }

    .hourly-stats-panel.is-collapsed {
        padding: 6px 8px;
    }

    .hourly-stats-heading strong {
        font-size: 12px;
    }

    .hourly-stats-heading span,
    .hourly-stat span {
        font-size: 9px;
    }

    .hourly-stats-heading time {
        padding: 3px 6px;
        font-size: 10px;
    }

    .hourly-stats-controls .activity-tracker-collapse,
    .hourly-stats-controls button {
        min-width: 32px;
        min-height: 32px;
    }

    .mobile-subnav-toggle {
        grid-template-columns: minmax(0, 1fr) 34px;
        min-height: 40px;
        margin-top: 7px;
        padding: 6px 8px;
    }

    .mobile-subnav-toggle > strong {
        font-size: 0.78rem;
    }

    .mobile-subnav-toggle > b {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .combat-arena-heading {
        gap: 10px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .combat-arena-heading h2 {
        font-size: 1.16rem;
    }

    .combat-arena-kicker,
    .combat-rewards-heading > span,
    .combatant-identity > div > span,
    .combat-hp-row > span,
    .combat-battle-facts span,
    .combat-reward-card > span {
        font-size: 0.64rem;
    }

    .combat-arena-controls {
        gap: 6px;
    }

    .combat-arena-live-state,
    .combat-arena-result {
        padding: 4px 8px;
        font-size: 0.68rem;
    }

    .combat-duel {
        gap: 8px;
    }

    .combatant-card {
        padding: 10px;
        border-radius: 10px;
    }

    .combatant-identity {
        gap: 8px;
    }

    .combatant-identity strong {
        font-size: 0.94rem;
    }

    .combatant-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .combat-hp-row {
        margin-top: 9px;
    }

    .combat-hp-track {
        height: 13px;
        margin-top: 5px;
    }

    .combatant-performance {
        gap: 4px;
        margin-top: 8px;
    }

    .combatant-performance > div {
        padding: 5px 4px;
    }

    .combatant-performance span {
        font-size: 0.56rem;
    }

    .combatant-performance strong {
        font-size: 0.72rem;
    }

    .combat-versus {
        height: 18px;
    }

    .combat-versus span {
        width: 34px;
        height: 34px;
        font-size: 0.72rem;
    }

    .combat-battle-facts {
        gap: 6px;
        margin-top: 8px;
    }

    .combat-battle-facts > div {
        padding: 6px 8px;
    }

    .combat-rewards-heading {
        margin-top: 10px;
        padding-top: 10px;
    }

    .combat-reward-grid {
        gap: 6px;
        margin-top: 7px;
    }

    .combat-reward-card {
        gap: 3px;
        padding: 8px;
        border-radius: 8px;
    }

    .combat-reward-card strong {
        font-size: 0.86rem;
    }

    .global-hud-values {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        width: calc(100% - 118px - var(--safe-area-left) - var(--safe-area-right));
        min-width: 0;
        margin-right: calc(60px + var(--safe-area-right));
        margin-left: calc(58px + var(--safe-area-left));
        padding: 4px 0;
        overflow: visible;
    }

    .global-hud-character,
    .global-hud-skills {
        display: none;
    }

    .global-hud-economy {
        display: contents;
    }

    .global-hud-economy > span,
    .global-hud-economy > .global-hud-economy-link,
    .global-hud-mobile-activity {
        display: flex;
        min-width: 0;
        min-height: 27px;
        padding: 3px 4px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        overflow: hidden;
        border: 1px solid rgba(100, 125, 161, 0.3);
        border-radius: 7px;
        background: linear-gradient(180deg, rgba(27, 43, 66, 0.94), rgba(19, 32, 51, 0.94));
        color: #94a3b8;
        font-size: 0.56rem;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
    }

    .global-hud-economy > span > strong,
    .global-hud-economy > .global-hud-economy-link > strong,
    .global-hud-mobile-activity > strong {
        display: block;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: #e2e8f0;
        font-size: 0.68rem;
        font-variant-numeric: tabular-nums;
        line-height: 1.05;
        text-align: center;
        text-overflow: ellipsis;
    }

    .global-hud-economy > .global-hud-gold > strong {
        color: #facc15;
    }

    .global-hud-economy > .global-hud-crystals > strong {
        color: #c084fc;
    }

    .global-hud-mobile-activity {
        border-color: rgba(34, 211, 238, 0.38);
        background: linear-gradient(180deg, rgba(8, 75, 96, 0.34), rgba(19, 32, 51, 0.94));
        color: #67e8f9;
    }

    .global-hud-mobile-activity > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .global-hud-mobile-activity.is-idle {
        border-color: rgba(100, 116, 139, 0.28);
        background: rgba(19, 32, 51, 0.86);
        color: #94a3b8;
    }

    .global-action.inactive,
    .global-exp.inactive {
        display: none;
    }
}

@media (max-height: 500px) {
    .global-hud,
    .has-side-navigation .global-hud {
        right: 0;
        overflow: visible;
    }

    .global-hud-values {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        width: calc(100% - 118px - var(--safe-area-left) - var(--safe-area-right));
        min-width: 0;
        margin-right: calc(60px + var(--safe-area-right));
        margin-left: calc(58px + var(--safe-area-left));
        padding: 4px 0;
        overflow: visible;
    }

    .global-hud-character,
    .global-hud-skills {
        display: none;
    }

    .global-hud-economy {
        display: contents;
    }

    .right-status-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px), (max-height: 500px) {
    .mobile-card-table-wrap {
        overflow: visible;
    }

    table.mobile-card-table,
    table.mobile-card-table > tbody,
    table.mobile-card-table > tbody > tr,
    table.mobile-card-table > tbody > tr > td {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    table.mobile-card-table {
        border: 0;
        background: transparent;
    }

    table.mobile-card-table > thead {
        display: none;
    }

    table.mobile-card-table > tbody > tr {
        margin: 0 0 10px;
        overflow: hidden;
        border: 1px solid #30445f;
        border-radius: 11px;
        background: rgba(12, 25, 43, 0.94);
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.15);
    }

    table.mobile-card-table > tbody > tr[hidden] {
        display: none;
    }

    table.mobile-card-table > tbody > tr > td {
        padding: 9px 11px;
        overflow-wrap: anywhere;
        border: 0;
        border-bottom: 1px solid rgba(55, 75, 104, 0.55);
        text-align: left;
        white-space: normal;
    }

    table.mobile-card-table > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    table.mobile-card-table > tbody > tr > td::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 4px;
        color: #67e8f9;
        font-size: 0.63rem;
        font-weight: 900;
        letter-spacing: 0.075em;
        text-transform: uppercase;
    }

    table.mobile-card-table > tbody > tr > td.mobile-card-table-message::before {
        display: none;
    }

    table.mobile-card-table .mobile-card-table-actions form,
    table.mobile-card-table .mobile-card-table-actions button,
    table.mobile-card-table .mobile-card-table-actions .button-link,
    table.mobile-card-table .mobile-card-table-actions .small-button {
        width: 100%;
        max-width: none;
    }

    .mobile-table-scroll-hint {
        display: block;
        margin: 0;
        padding: 7px 10px;
        border-bottom: 1px solid rgba(56, 189, 248, 0.22);
        background: rgba(14, 116, 144, 0.1);
        color: #a5f3fc;
        font-size: 0.7rem;
        font-weight: 800;
        text-align: center;
    }
}

@media (max-width: 370px) {
    .persistent-chat:not(.chat-collapsed) {
        padding-top: 28px;
    }
}

/* Keep installed iPhone web apps below the notch or Dynamic Island. */
@media (max-width: 800px) {
    html.app-standalone .global-hud-values {
        padding-top: calc(4px + var(--safe-area-top));
    }

    html.ios-standalone .global-hud-values {
        padding-top: calc(4px + max(var(--safe-area-top), 44px));
    }
}

/* Compact gameplay actions and Auction House on phones (Rev. 0.5.39). */
.action-label-mobile {
    display: none;
}

@media (max-width: 680px) {
    .action-label-desktop {
        display: none;
    }

    .action-label-mobile {
        display: inline;
    }

    .gameplay-page-title {
        display: none;
    }

    .battle-top-section {
        margin-bottom: 8px;
        padding: 8px;
    }

    .gathering-action-controls,
    .combat-arena-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: end;
        gap: 5px;
        width: 100%;
    }

    .gathering-action-controls > div:first-of-type,
    .combat-arena-controls > div:first-of-type {
        width: 100%;
        min-width: 0;
    }

    .gathering-action-controls > div:nth-of-type(2),
    .combat-arena-controls > div:nth-of-type(2) {
        display: contents;
    }

    .gathering-action-controls select,
    .combat-arena-controls input {
        width: 100%;
        min-width: 0;
        min-height: 38px;
    }

    .gathering-action-controls button,
    .combat-arena-controls button {
        width: auto;
        min-width: 64px;
        min-height: 38px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    .gathering-overview,
    .combat-arena {
        padding: 9px;
    }

    .gathering-overview-heading {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        margin-bottom: 7px;
        padding-bottom: 7px;
    }

    .gathering-overview-kicker,
    .combat-arena-kicker {
        display: none;
    }

    .gathering-overview-heading h2,
    .combat-arena-heading h2 {
        margin: 0;
        font-size: 1rem;
    }

    .gathering-operation-card {
        display: none;
    }

    .gathering-progress-heading {
        margin-top: 7px;
    }

    .gathering-progress-track {
        height: 11px;
        margin-top: 4px;
    }

    .gathering-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin-top: 7px;
    }

    .gathering-stat-grid > div {
        gap: 2px;
        padding: 6px;
    }

    .gathering-stat-grid span,
    .gathering-reward-card > span {
        font-size: 0.58rem;
    }

    .gathering-stat-grid strong {
        font-size: 0.76rem;
    }

    .gathering-stat-grid > div:nth-child(5) {
        grid-column: span 2;
    }

    .gathering-last-heading {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .gathering-reward-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 6px;
    }

    .gathering-reward-card {
        gap: 2px;
        padding: 7px;
    }

    .combat-arena-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        margin-bottom: 7px;
        padding-bottom: 7px;
    }

    .combat-arena-controls {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .combat-arena-status-wrap {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        gap: 4px;
    }

    .combat-arena-result.ready {
        display: none;
    }

    .combat-duel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .combat-versus {
        display: none;
    }

    .combatant-card {
        padding: 7px;
    }

    .combatant-identity {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 5px;
    }

    .combatant-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .combatant-identity strong {
        font-size: 0.82rem;
    }

    .combatant-identity small {
        grid-column: 1 / -1;
        width: auto;
        margin: 0;
        font-size: 0.62rem;
    }

    .combat-hp-row {
        gap: 5px;
        margin-top: 6px;
    }

    .combat-hp-row strong {
        font-size: 0.68rem;
    }

    .combat-hp-track {
        height: 10px;
        margin-top: 3px;
    }

    .combatant-performance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        margin-top: 5px;
    }

    .combatant-performance > div {
        padding: 4px 2px;
    }

    .combatant-performance > div:nth-child(2),
    .combatant-performance > div:nth-child(3) {
        display: none;
    }

    .combatant-performance > div:last-child {
        grid-column: auto;
    }

    .combat-rewards-heading small {
        display: none;
    }

    .combat-reward-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auction-house-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        padding: 7px 9px;
    }

    .auction-house-kicker,
    .auction-house-heading p,
    .auction-house-heading .market-balance span {
        display: none;
    }

    .auction-house-heading h1 {
        margin: 0;
        font-size: 1.08rem;
    }

    .auction-house-heading .market-balance {
        width: auto;
        min-width: 0;
        padding: 5px 8px;
        text-align: right;
    }

    .auction-house-heading .market-balance strong {
        font-size: 0.78rem;
    }

    .auction-house-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        margin-bottom: 6px;
        padding: 3px;
    }

    .auction-house-tabs a {
        min-height: 32px;
        padding: 5px 3px;
        font-size: 0.68rem;
        line-height: 1.1;
    }

    .auction-house-shell {
        min-height: 0;
        border-radius: 8px;
    }

    .auction-house-categories {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        padding: 4px;
        overflow: visible;
    }

    .auction-house-categories > a {
        min-width: 0;
        min-height: 32px;
        justify-content: center;
        margin: 0;
        padding: 4px 3px;
        text-align: center;
    }

    .auction-house-categories > a > span {
        display: none;
    }

    .auction-house-categories > a > strong {
        overflow-wrap: anywhere;
        font-size: 0.62rem;
        line-height: 1.08;
    }

    .auction-house-main {
        padding: 5px;
    }

    .market-asset-selector {
        gap: 5px;
        margin-bottom: 6px;
        padding: 6px;
    }

    .market-asset-filter-group {
        gap: 4px;
    }

    .market-asset-selector-label {
        font-size: 0.6rem;
    }

    .market-asset-button-grid,
    .market-asset-five-grid,
    .market-quest-rarity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .market-asset-premium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-asset-button {
        min-height: 38px;
        gap: 1px;
        padding: 4px 5px;
    }

    .market-asset-button strong {
        font-size: 0.67rem;
    }

    .market-asset-button small {
        font-size: 0.57rem;
    }

    .resource-market-header {
        padding: 7px;
    }

    .resource-market-header > .auction-detail-header {
        min-height: 38px;
        gap: 7px;
        padding: 0 36px 6px 0;
    }

    .resource-market-header .auction-detail-icon {
        width: 34px;
        height: 34px;
        font-size: 0.86rem;
    }

    .resource-market-header .auction-detail-header h2 {
        font-size: 0.95rem;
    }

    .resource-market-header .auction-detail-header span,
    .resource-market-header .auction-detail-header small {
        font-size: 0.62rem;
    }

    .market-refresh-button {
        top: 6px;
        right: 6px;
        width: 30px;
        height: 30px;
        min-height: 30px;
    }

    .auction-market-snapshot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin: 6px 0 0;
    }

    .auction-market-snapshot > div {
        gap: 2px;
        padding: 5px 6px;
    }

    .auction-market-snapshot span {
        font-size: 0.58rem;
    }

    .auction-market-snapshot strong {
        font-size: 0.78rem;
    }

    .resource-order-columns,
    .market-own-order-grid {
        gap: 7px;
        margin-top: 7px;
    }

    .resource-order-form-heading {
        padding: 8px;
    }

    .resource-order-form-heading h2 {
        font-size: 0.92rem;
    }

    .resource-create-form {
        gap: 6px;
        padding: 8px;
    }

    .resource-orderbook {
        margin: 0 7px 7px;
    }

    .resource-orderbook-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        min-height: 0;
        padding: 7px;
    }

    .resource-orderbook-action,
    .resource-orderbook-row > .market-own,
.resource-orderbook-row > .market-order-unavailable {
        grid-column: 1 / -1;
    }
}
+

/* Rev. 0.5.44 Workshop */
.guild-forum-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.guild-forum-heading h2 { margin: 6px 0; overflow-wrap: anywhere; }
.guild-forum-heading p,.guild-forum-row-meta,.guild-forum-post-meta time { color: #a7bfd9; }
.guild-forum-new-link { display: inline-flex; align-items: center; align-self: center; padding: 8px 13px; border-radius: 8px; background: #2563eb; color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.guild-forum-list,.guild-forum-topic,.guild-forum-compose { margin-top: 14px; }
.guild-forum-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 3px; border-top: 1px solid #354963; color: #eef4ff; text-decoration: none; }
.guild-forum-row:hover { color: #93c5fd; }
.guild-forum-row-title { display: flex; align-items: center; gap: 9px; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.guild-forum-row-meta { flex: 0 0 auto; font-size: .86rem; }
.guild-forum-unread { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; color: #171d26; background: #fbbf24; font-size: .77rem; }
.guild-forum-post { padding: 15px 0; border-top: 1px solid #354963; }
.guild-forum-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 9px; }
.guild-forum-post-meta time { font-size: .83rem; }
.guild-forum-post-meta form { margin-left: auto; }
.guild-forum-body { color: #e5edf9; white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
.guild-forum-post.is-removed .guild-forum-body { color: #8fa3bd; }
.guild-forum-compose form { display: grid; gap: 8px; }
.guild-forum-compose input,.guild-forum-compose textarea { width: 100%; padding: 10px; border: 1px solid #3a4d66; border-radius: 8px; background: #111b2a; color: #e5e7eb; font: inherit; }
.guild-forum-compose button { justify-self: start; }
.guild-forum-edit { margin-top: 10px; }
.guild-forum-edit summary { width: max-content; color: #93c5fd; font-size: .86rem; font-weight: 700; cursor: pointer; }
.guild-forum-edit form { display: grid; gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid #354963; border-radius: 8px; background: #0d1726; }
.guild-forum-edit label { display: grid; gap: 5px; color: #a7bfd9; font-size: .82rem; font-weight: 700; }
.guild-forum-edit input,.guild-forum-edit textarea { width: 100%; padding: 9px 10px; border: 1px solid #3a4d66; border-radius: 7px; background: #111b2a; color: #e5e7eb; font: inherit; }
.guild-forum-edit button { justify-self: start; }
.guild-forum-danger { padding: 6px 10px; border: 1px solid #9f3b43; border-radius: 7px; background: #3a2028; color: #ffe4e6; font-size: .82rem; cursor: pointer; }
.guild-forum-pages { display: flex; justify-content: center; gap: 16px; padding: 14px 0 4px; border-top: 1px solid #354963; color: #a7bfd9; }
@media (max-width: 720px) { .guild-forum-row { align-items: flex-start; flex-direction: column; gap: 4px; } .guild-forum-row-meta { flex: auto; } .guild-forum-heading { flex-wrap: wrap; } }
.workshop-hero { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; align-items: center; background: radial-gradient(circle at 11% 40%,#1a3851 0,#15243b 32%,#152135 75%); }
.workshop-art { display: grid; place-items: center; min-width: 0; }
.workshop-art img { display: block; width: min(100%,180px); height: 150px; object-fit: contain; filter: drop-shadow(0 0 16px #3698c355); }
.workshop-hero-content { min-width: 0; }
.workshop-heading h1 { margin: 3px 0 4px; }
.workshop-heading p { color: #b7c9df; margin: 0 0 10px; }
.workshop-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.workshop-metrics > div { display: grid; align-content: center; gap: 3px; min-width: 0; min-height: 54px; border: 1px solid #354963; border-radius: 9px; background: #111d2caa; padding: 8px 10px; }
.workshop-metrics span,.workshop-stock span,.workshop-level-line,.workshop-rule { color: #a7bfd9; }
.workshop-metrics span { font-size: .76rem; }
.workshop-metrics strong { font-size: .95rem; }
.workshop-level-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: .82rem; }
.workshop-progress { height: 8px; border: 1px solid #354963; border-radius: 99px; background: #0b1725; overflow: hidden; }
.workshop-progress span { display: block; height: 100%; background: linear-gradient(90deg,#3b82f6,#44d5d1); }
.workshop-material-summary { display: flex; align-items: center; gap: 8px 12px; margin-top: 9px; }
.workshop-material-summary > span { flex: 0 0 auto; color: #79e7f5; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.workshop-material-balances { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; flex: 1; min-width: 0; }
.workshop-material-balances > div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; padding: 5px 8px; border: 1px solid #354963; border-radius: 7px; background: #0f1b2aaa; }
.workshop-material-balances span { min-width: 0; overflow: hidden; color: #a7bfd9; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.workshop-material-balances strong { color: #f1f5f9; font-size: .78rem; white-space: nowrap; }
.workshop-rule { margin: 0; font-size: .82rem; }
.workshop-duration-top { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.workshop-duration h2 { margin: 3px 0 5px; font-size: 1.1rem; }
.workshop-duration-choice,.workshop-duration-scale { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.workshop-duration-choice { min-width: 135px; margin-bottom: 5px; color: #a7bfd9; }
.workshop-duration-choice output { color: #9debf3; font-weight: 700; }
.workshop-duration-range { display: block; width: 100%; max-width: none; height: 8px; padding: 0; border: 0; margin: 9px 0 6px; border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer; background: linear-gradient(90deg,#2d73ec 0%,#2d73ec var(--workshop-range-progress,0%),#354963 var(--workshop-range-progress,0%),#354963 100%); }
.workshop-duration-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #c4f8ff; background: #2d73ec; box-shadow: 0 0 0 2px #132b46; }
.workshop-duration-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #c4f8ff; background: #2d73ec; box-shadow: 0 0 0 2px #132b46; }
.workshop-duration-range:focus-visible { outline: 2px solid #8ce7f2; outline-offset: 6px; }
.workshop-duration-scale { color: #a7bfd9; font-size: .78rem; margin-bottom: 6px; }
.workshop-active { border-color: #4477aa; }
.workshop-active-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workshop-active-top form { flex: 0 0 auto; }
.workshop-active-top button { min-height: 34px; padding: 7px 11px; white-space: nowrap; }
.workshop-active h2 { margin: 6px 0; }
.workshop-countdown { display: inline-block; color: #8fe6ec; font-size: 1.25rem; }
.workshop-order-progress-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.workshop-order-progress-heading > span { color: #a7bfd9; font-size: .82rem; }
.workshop-order-progress { width: 100%; height: 9px; margin-top: 7px; }
.workshop-order-progress span { transition: width .8s linear; }
.workshop-abort-confirm-modal .chat-wire-confirm-panel { border-color: rgba(248,113,113,.62); background: radial-gradient(circle at top left,rgba(220,38,38,.16),transparent 44%),#0f172a; }
.workshop-abort-confirm-icon { border-color: rgba(248,113,113,.5); background: rgba(153,27,27,.2); color: #fca5a5; }
.workshop-recipe-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 10px; }
.workshop-recipe { min-width: 0; margin: 0; padding: 13px 15px; }
.workshop-recipe h2 { margin: 3px 0; font-size: 1.14rem; }
.workshop-recipe p { color: #b7c9df; margin: 4px 0 8px; font-size: .86rem; }
.workshop-stock { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: 8px 0 10px; padding: 7px 9px; border: 1px solid #354963; border-radius: 8px; background: #111d2c; font-size: .82rem; }
.workshop-stock span { display: inline-flex; gap: 6px; }
.workshop-stock strong { color: #f1f5f9; }
.workshop-recipe form { display: grid; gap: 6px; }
.workshop-recipe-duration { margin-top: 1px; padding: 8px 10px 6px; border: 1px solid #354963; border-radius: 8px; background: #0e1a2aaa; }
.workshop-recipe-duration-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.workshop-recipe-duration-heading label { color: #a7bfd9; font-size: .78rem; }
.workshop-recipe-duration-heading output { color: #9debf3; font-size: .82rem; font-weight: 800; }
.workshop-recipe-duration .workshop-duration-scale { margin: 0; font-size: .7rem; }
.workshop-recipe-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 6px; }
.workshop-recipe label { display: grid; gap: 4px; flex: 1 1 115px; min-width: 0; font-size: .78rem; }
.workshop-recipe input { width: 100%; max-width: 130px; min-height: 34px; padding: 6px 8px; }
.workshop-recipe input.workshop-duration-range { width: 100%; max-width: none; min-height: 8px; padding: 0; }
.workshop-recipe-controls button { width: auto; min-height: 34px; padding: 6px 9px; white-space: nowrap; }
.workshop-recipe form small { color: #a7bfd9; font-size: .76rem; }
.workshop-history { margin-top: 18px; }
.workshop-history h2 { margin-top: 0; }
.workshop-history-list { display: grid; gap: 8px; }
.workshop-history-list > div { display: grid; grid-template-columns: minmax(130px,.55fr) minmax(100px,.5fr) 1fr; gap: 10px; border-top: 1px solid #354963; padding-top: 8px; align-items: center; }
.workshop-history-list span,.workshop-history-list small { color: #a7bfd9; }
@media (max-width: 1000px) { .workshop-material-summary { align-items: stretch; flex-direction: column; gap: 5px; } }
@media (max-width: 820px) { .workshop-hero { grid-template-columns: 115px minmax(0,1fr); gap: 10px; } .workshop-art img { height: 115px; } .workshop-metrics,.workshop-material-balances { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .workshop-hero { grid-template-columns: 80px minmax(0,1fr); align-items: start; } .workshop-art img { height: 85px; } .workshop-hero-content { display: contents; } .workshop-heading { grid-column: 2; } .workshop-metrics,.workshop-level-line,.workshop-progress,.workshop-material-summary { grid-column: 1 / -1; } .workshop-active-top { align-items: stretch; flex-direction: column; } .workshop-active-top button { width: 100%; } .workshop-recipe-grid { grid-template-columns: 1fr; } .workshop-history-list > div { grid-template-columns: 1fr; gap: 3px; } .workshop-level-line { display: grid; gap: 2px; } .workshop-duration-top { align-items: start; flex-direction: column; gap: 3px; } .workshop-duration-choice { min-width: 180px; margin: 0; } }

/* Rev. 0.5.47 Character visual refresh */
body.character-page #character-live-root {
    display: grid;
    gap: 12px;
}

body.character-page .character-hero {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 50%, rgba(34, 211, 238, 0.18), transparent 24%),
        radial-gradient(circle at 92% 10%, rgba(59, 130, 246, 0.13), transparent 30%),
        linear-gradient(135deg, #13243b, #101d31 58%, #0d192b);
}

body.character-page .character-hero-emblem {
    position: relative;
    display: grid;
    width: 78px;
    height: 88px;
    place-items: center;
    border: 1px solid rgba(103, 232, 249, 0.48);
    border-radius: 24px 24px 32px 32px;
    background:
        linear-gradient(145deg, rgba(56, 189, 248, 0.24), rgba(37, 99, 235, 0.13)),
        #0b1728;
    box-shadow: inset 0 0 24px rgba(56, 189, 248, 0.11), 0 12px 28px rgba(0, 0, 0, 0.24);
}

body.character-page .character-hero-emblem::before,
body.character-page .character-hero-emblem::after {
    position: absolute;
    width: 34px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #67e8f9, transparent);
}

body.character-page .character-hero-emblem::before { top: 15px; }
body.character-page .character-hero-emblem::after { bottom: 18px; }

body.character-page .character-hero-emblem span {
    color: #a5f3fc;
    font-size: 2rem;
    text-shadow: 0 0 18px rgba(103, 232, 249, 0.7);
}

body.character-page .character-hero-content {
    display: grid;
    gap: 12px;
    min-width: 0;
}

body.character-page .character-hero-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.character-page .character-hero h1 {
    margin: 2px 0 0;
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    letter-spacing: -0.025em;
}

body.character-page .character-title-label {
    margin: 5px 0 0;
    padding: 2px 8px;
    font-size: 0.72rem;
}

body.character-page .character-hero-guild {
    display: grid;
    flex: 0 1 280px;
    gap: 2px;
    min-width: 150px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid rgba(100, 125, 161, 0.4);
    border-radius: 9px;
    background: rgba(8, 19, 34, 0.58);
    text-align: right;
}

body.character-page .character-hero-guild > span {
    color: #7dd3fc;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.character-page .character-hero-guild a,
body.character-page .character-hero-guild strong {
    overflow: hidden;
    color: #e2e8f0;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.character-page .character-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
}

body.character-page .character-hero-stats > div {
    min-height: 52px;
    padding: 7px 10px;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 8px;
    background: rgba(8, 19, 34, 0.62);
}

body.character-page .character-hero-stats span {
    font-size: 0.7rem;
}

body.character-page .character-hero-stats strong {
    margin-top: 2px;
    color: #f8fafc;
    font-size: 1rem;
}

body.character-page .character-panel {
    margin: 0;
    padding: 14px;
    border-color: #30445e;
    background:
        linear-gradient(145deg, rgba(19, 34, 56, 0.98), rgba(13, 24, 41, 0.98));
}

body.character-page .character-layout {
    gap: 12px;
    margin: 0;
}

body.character-page .character-layout > .character-panel {
    height: 100%;
}

body.character-page .character-section-title {
    align-items: center;
    margin-bottom: 11px;
    padding-bottom: 8px;
    border-color: rgba(100, 125, 161, 0.28);
}

body.character-page .character-section-title h2 {
    font-size: 1.08rem;
    letter-spacing: -0.012em;
}

body.character-page .character-section-title > span,
body.character-page .character-section-title > div > span {
    font-size: 0.72rem;
}

body.character-page .character-gear-status-grid {
    gap: 8px;
}

body.character-page .character-gear-status-card {
    grid-template-columns: minmax(150px, 0.72fr) minmax(150px, 0.6fr) minmax(220px, 1.25fr);
    align-items: center;
    gap: 8px 14px;
    min-height: 78px;
    padding: 10px 12px;
    border-radius: 9px;
}

body.character-page .character-gear-status-card strong {
    font-size: 1rem;
}

body.character-page .character-gear-status-card p {
    font-size: 0.79rem;
}

body.character-page .character-gear-status-card small {
    grid-column: 1 / -1;
    padding-top: 6px;
    border-top: 1px solid rgba(100, 125, 161, 0.2);
    font-size: 0.72rem;
}

body.character-page .character-skill-list {
    gap: 7px;
}

body.character-page .character-skill-row {
    grid-template-columns: 105px minmax(100px, 1fr) 96px;
    gap: 9px;
    min-height: 45px;
    padding: 7px 9px;
    border-color: rgba(100, 125, 161, 0.36);
    border-radius: 8px;
    background: rgba(8, 19, 34, 0.62);
}

body.character-page .character-skill-row strong,
body.character-page .character-skill-row span,
body.character-page .character-skill-row small {
    font-size: 0.74rem;
}

body.character-page .character-skill-progress {
    height: 7px;
}

body.character-page .character-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body.character-page .character-stat-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

body.character-page .character-stat-box {
    min-height: 58px;
    gap: 2px;
    padding: 8px 10px;
    border-color: rgba(100, 125, 161, 0.34);
    border-radius: 8px;
    background: rgba(8, 19, 34, 0.62);
    cursor: help;
}

body.character-page .character-stat-box > span {
    font-size: 0.69rem;
}

body.character-page .character-stat-box > strong {
    font-size: 0.96rem;
}

body.character-page .character-utility-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-items: start;
}

body.character-page .character-utility-group .character-stat-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.character-gathering-ratings {
    margin-bottom: 12px;
    border: 1px solid rgba(100, 125, 161, 0.34);
    border-radius: 9px;
    background: rgba(8, 19, 34, 0.48);
    overflow-wrap: anywhere;
}

.character-gathering-ratings > summary {
    padding: 11px 12px;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 700;
}

.character-gathering-ratings > summary small {
    margin-left: 8px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 400;
}

.character-gathering-ratings > summary:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 2px;
    border-radius: 8px;
}

.character-gathering-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px;
}

.character-gathering-profession {
    padding: 10px;
    border: 1px solid rgba(100, 125, 161, 0.25);
    border-radius: 7px;
    background: rgba(8, 19, 34, 0.62);
}

.character-gathering-profession h3 {
    margin: 0 0 8px;
    color: #67e8f9;
    font-size: 0.78rem;
}

.character-gathering-profession dl { margin: 0; }
.character-gathering-profession dl > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 5px;
    font-size: 0.72rem;
}
.character-gathering-profession dt { color: #94a3b8; }
.character-gathering-profession dd { margin: 0; font-weight: 700; }
.character-rating-overflow {
    display: inline;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 400;
    overflow-wrap: anywhere;
}
body.character-page .character-stat-box .character-rating-overflow {
    display: inline;
    color: #94a3b8;
    font-size: 0.72rem;
}
.character-rating-cost,
body.character-page .character-stat-box .character-rating-cost {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.character-rating-cost b { color: #cbd5e1; font-weight: 500; }
.character-gathering-costs {
    margin-top: 9px;
    padding-top: 7px;
    border-top: 1px solid rgba(100, 125, 161, 0.25);
}
.character-gathering-costs dd { color: #cbd5e1; font-weight: 400; }
.character-rating-explainer {
    margin: 10px 0 0;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.5;
}
.character-gathering-ratings > p {
    margin: 10px 12px 12px;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.5;
}
@media (max-width: 1000px) {
    .character-gathering-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .character-gathering-grid { grid-template-columns: 1fr; }
    .character-gathering-ratings > summary small { display: block; margin: 4px 0 0 17px; }
}

body.character-page .character-utility-group {
    padding: 10px;
    border-color: rgba(100, 125, 161, 0.3);
    border-radius: 9px;
    background: rgba(8, 19, 34, 0.48);
}

body.character-page .character-utility-group h3 {
    margin-bottom: 7px;
    color: #67e8f9;
    font-size: 0.72rem;
}

body.character-page .character-buff-grid {
    gap: 7px;
}

body.character-page .character-buff-card {
    min-height: 64px;
    padding: 9px 10px;
    border-radius: 8px;
}

body.character-page .character-equipment-grid {
    gap: 9px;
}

body.character-page .character-equipment-card {
    display: flex;
    min-height: 150px;
    padding: 11px;
    flex-direction: column;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 9px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.09), transparent 42%),
        rgba(8, 19, 34, 0.68);
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

body.character-page .character-equipment-card:not(.empty):hover {
    border-color: rgba(103, 232, 249, 0.48);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

body.character-page .character-equipment-card.empty {
    min-height: 112px;
    border-style: dashed;
    background: rgba(8, 19, 34, 0.38);
}

body.character-page .character-equipment-slot {
    margin-bottom: 7px;
    color: #7dd3fc;
    font-size: 0.68rem;
}

body.character-page .character-equipment-name {
    font-size: 0.9rem;
}

body.character-page .character-equipment-meta {
    gap: 4px 8px;
    margin-top: 6px;
    font-size: 0.68rem;
}

body.character-page .character-equipment-stats {
    gap: 4px;
    margin-top: 9px;
}

body.character-page .character-equipment-stats li {
    padding-bottom: 4px;
    font-size: 0.74rem;
}

body.character-page .character-equipment-action {
    margin-top: auto;
    padding-top: 9px;
}

body.character-page .character-equipment-action button {
    min-height: 30px;
    padding: 4px 9px;
}

body.character-page .character-footer-actions {
    gap: 7px;
    margin: 0;
}

@media (max-width: 1100px) {
    body.character-page .character-utility-groups {
        grid-template-columns: 1fr;
    }

    body.character-page .character-gear-status-card {
        grid-template-columns: minmax(140px, 0.8fr) minmax(140px, 0.7fr) minmax(200px, 1.2fr);
    }
}

@media (max-width: 820px) {
    body.character-page .character-hero {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 11px;
    }

    body.character-page .character-hero-emblem {
        width: 64px;
        height: 74px;
        border-radius: 19px 19px 25px 25px;
    }

    body.character-page .character-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.character-page .character-layout {
        grid-template-columns: 1fr;
    }

    body.character-page .character-gear-status-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.character-page .character-gear-status-card p,
    body.character-page .character-gear-status-card small {
        grid-column: 1 / -1;
    }

    body.character-page .character-equipment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body.character-page #character-live-root {
        gap: 9px;
    }

    body.character-page .character-hero {
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: start;
        padding: 12px;
    }

    body.character-page .character-hero-emblem {
        width: 52px;
        height: 60px;
        border-radius: 15px 15px 20px 20px;
    }

    body.character-page .character-hero-emblem span {
        font-size: 1.45rem;
    }

    body.character-page .character-hero-content {
        display: contents;
    }

    body.character-page .character-hero-heading {
        grid-column: 2;
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    body.character-page .character-hero-guild {
        flex-basis: auto;
        min-width: 0;
        padding: 5px 7px;
        text-align: left;
    }

    body.character-page .character-hero-stats {
        grid-column: 1 / -1;
        gap: 5px;
    }

    body.character-page .character-hero-stats > div {
        min-height: 46px;
        padding: 6px 8px;
    }

    body.character-page .character-panel {
        padding: 11px;
    }

    body.character-page .character-gear-status-grid,
    body.character-page .character-gear-status-card,
    body.character-page .character-stat-grid,
    body.character-page .character-stat-grid.compact,
    body.character-page .character-equipment-grid {
        grid-template-columns: 1fr;
    }

    body.character-page .character-skill-row {
        grid-template-columns: minmax(92px, 0.7fr) minmax(90px, 1fr);
    }

    body.character-page .character-skill-row small {
        grid-column: 1 / -1;
        text-align: right;
    }

    body.character-page .character-equipment-card,
    body.character-page .character-equipment-card.empty {
        min-height: 0;
    }

    body.character-page .character-footer-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Rev. 0.5.47 Sanctum visual refresh */
body.sanctum-page .housing-hero {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    padding: 16px 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 48%, rgba(45, 212, 191, 0.16), transparent 24%),
        radial-gradient(circle at 92% 8%, rgba(139, 92, 246, 0.12), transparent 30%),
        linear-gradient(135deg, #13243b, #101d31 58%, #0d192b);
}

body.sanctum-page .housing-hero-emblem {
    position: relative;
    display: grid;
    width: 78px;
    height: 88px;
    place-items: center;
    border: 1px solid rgba(94, 234, 212, 0.45);
    border-radius: 24px 24px 32px 32px;
    background:
        linear-gradient(145deg, rgba(20, 184, 166, 0.21), rgba(124, 58, 237, 0.1)),
        #0b1728;
    box-shadow: inset 0 0 24px rgba(45, 212, 191, 0.1), 0 12px 28px rgba(0, 0, 0, 0.24);
}

body.sanctum-page .housing-hero-emblem > span {
    position: relative;
    width: 52px;
    height: 36px;
    margin-top: 16px;
    border: 2px solid #99f6e4;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    filter: drop-shadow(0 0 7px rgba(94, 234, 212, 0.45));
}

body.sanctum-page .housing-hero-emblem > span::before {
    position: absolute;
    top: -18px;
    left: 50%;
    width: 0;
    height: 0;
    border-right: 29px solid transparent;
    border-bottom: 17px solid #99f6e4;
    border-left: 29px solid transparent;
    content: "";
    transform: translateX(-50%);
}

body.sanctum-page .housing-hero-emblem > span::after {
    position: absolute;
    right: 5px;
    bottom: 4px;
    left: 5px;
    height: 25px;
    content: "";
    background: repeating-linear-gradient(90deg, #5eead4 0 4px, transparent 4px 13px);
}

body.sanctum-page .housing-hero-content {
    display: grid;
    gap: 11px;
    min-width: 0;
}

body.sanctum-page .housing-hero-copy h1 {
    margin: 2px 0 1px;
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    letter-spacing: -0.025em;
}

body.sanctum-page .housing-hero-copy p {
    margin: 0;
    font-size: 0.82rem;
}

body.sanctum-page .housing-wallet {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

body.sanctum-page .housing-wallet > div {
    min-width: 0;
    min-height: 52px;
    padding: 7px 10px;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 8px;
    background: rgba(8, 19, 34, 0.62);
}

body.sanctum-page .housing-wallet span {
    font-size: 0.69rem;
}

body.sanctum-page .housing-wallet strong {
    display: block;
    margin-top: 2px;
    color: #f8fafc;
    font-size: 1rem;
}

body.sanctum-page .housing-top-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 10px;
}

body.sanctum-page .housing-top-grid > .card {
    height: 100%;
    margin: 0;
    padding: 14px;
    border-color: #30445e;
    background: linear-gradient(145deg, rgba(19, 34, 56, 0.98), rgba(13, 24, 41, 0.98));
}

body.sanctum-page .housing-section-heading {
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.28);
}

body.sanctum-page .housing-section-heading h2 {
    margin: 2px 0 0;
    font-size: 1.08rem;
    letter-spacing: -0.012em;
}

body.sanctum-page .housing-rate {
    padding: 4px 8px;
    font-size: 0.68rem;
}

body.sanctum-page .housing-warning {
    margin: 0 0 9px;
    padding: 7px 9px;
    font-size: 0.74rem;
    line-height: 1.35;
}

body.sanctum-page .housing-deposit-form {
    grid-template-columns: minmax(150px, 1.25fr) minmax(125px, 0.75fr) auto;
    gap: 7px;
}

body.sanctum-page .housing-deposit-form label span {
    margin-bottom: 3px;
    font-size: 0.67rem;
}

body.sanctum-page .housing-deposit-form select,
body.sanctum-page .housing-deposit-form input,
body.sanctum-page .housing-deposit-form button {
    height: 36px;
    min-height: 36px;
}

body.sanctum-page .housing-deposit-form button {
    padding: 6px 10px;
    white-space: nowrap;
}

body.sanctum-page .housing-job-list {
    gap: 6px;
    margin-top: 8px;
}

body.sanctum-page .housing-job {
    gap: 8px;
    min-height: 46px;
    padding: 7px 9px;
    border-radius: 8px;
}

body.sanctum-page .housing-job > div:first-child strong {
    font-size: 0.8rem;
}

body.sanctum-page .housing-job > strong {
    font-size: 0.78rem;
}

body.sanctum-page .housing-job-cancel button {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 0.7rem;
}

body.sanctum-page .housing-empty-state {
    margin-top: 8px;
    padding: 13px;
    background: rgba(8, 19, 34, 0.38);
    font-size: 0.78rem;
}

body.sanctum-page .housing-queue-note {
    margin: 8px 0 0;
    font-size: 0.72rem;
}

body.sanctum-page .housing-building-grid {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 9px;
    margin: 0;
}

body.sanctum-page .housing-building-card {
    --sanctum-accent: #38bdf8;
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 12px;
    overflow: hidden;
    border-color: rgba(100, 125, 161, 0.42);
    border-top-color: color-mix(in srgb, var(--sanctum-accent) 72%, transparent);
    border-radius: 9px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--sanctum-accent) 10%, transparent), transparent 43%),
        linear-gradient(145deg, rgba(19, 34, 56, 0.98), rgba(13, 24, 41, 0.98));
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

body.sanctum-page .housing-building-card:hover {
    border-color: color-mix(in srgb, var(--sanctum-accent) 52%, #30445e);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

body.sanctum-page .housing-building-card[data-building-key="training_room"] { --sanctum-accent: #fb7185; }
body.sanctum-page .housing-building-card[data-building-key="garden"] { --sanctum-accent: #4ade80; }
body.sanctum-page .housing-building-card[data-building-key="workshop"] { --sanctum-accent: #fb923c; }
body.sanctum-page .housing-building-card[data-building-key="bedroom"] { --sanctum-accent: #67e8f9; }
body.sanctum-page .housing-building-card[data-building-key="dragon_roost"] { --sanctum-accent: #c084fc; }
body.sanctum-page .housing-building-card[data-building-key="treasure_room"] { --sanctum-accent: #facc15; }
body.sanctum-page .housing-building-card[data-building-key="builders_office"] { --sanctum-accent: #60a5fa; }
body.sanctum-page .housing-building-card[data-building-key="storehouse"] { --sanctum-accent: #2dd4bf; }
body.sanctum-page .housing-building-card[data-building-key="treasury"] { --sanctum-accent: #fbbf24; }

body.sanctum-page .housing-building-head {
    align-items: flex-start;
    gap: 9px;
}

body.sanctum-page .housing-building-head h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 0;
    font-size: 0.96rem;
}

body.sanctum-page .housing-building-head h2::before {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--sanctum-accent);
    box-shadow: 0 0 9px color-mix(in srgb, var(--sanctum-accent) 62%, transparent);
    content: "";
}

body.sanctum-page .housing-building-head > div > span {
    font-size: 0.66rem;
}

body.sanctum-page .housing-building-head > strong {
    color: var(--sanctum-accent);
    font-size: 0.9rem;
    white-space: nowrap;
}

body.sanctum-page .housing-building-card > p {
    min-height: 34px;
    margin: 8px 0;
    font-size: 0.74rem;
    line-height: 1.35;
}

body.sanctum-page .housing-level-track {
    height: 6px;
    margin: 2px 0 10px;
    border: 1px solid rgba(100, 125, 161, 0.3);
}

body.sanctum-page .housing-level-track span {
    background: linear-gradient(90deg, color-mix(in srgb, var(--sanctum-accent) 72%, #2563eb), var(--sanctum-accent));
}

body.sanctum-page .housing-next-row {
    gap: 8px;
    font-size: 0.75rem;
}

body.sanctum-page .housing-cost-row {
    gap: 8px;
    margin: 9px 0 8px;
    padding: 7px 8px;
    border: 1px solid rgba(100, 125, 161, 0.25);
    font-size: 0.73rem;
}

body.sanctum-page .housing-building-card form button {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 0.76rem;
}

body.sanctum-page .housing-maxed {
    padding: 9px;
    font-size: 0.76rem;
}

@media (max-width: 1100px) {
    body.sanctum-page .housing-top-grid {
        grid-template-columns: 1fr;
    }

    body.sanctum-page .housing-building-grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
}

@media (max-width: 820px) {
    body.sanctum-page .housing-hero {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 11px;
    }

    body.sanctum-page .housing-hero-emblem {
        width: 64px;
        height: 74px;
        border-radius: 19px 19px 25px 25px;
    }

    body.sanctum-page .housing-hero-emblem > span {
        transform: scale(0.82);
    }

    body.sanctum-page .housing-wallet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body.sanctum-page .housing-hero {
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: start;
        padding: 12px;
    }

    body.sanctum-page .housing-hero-emblem {
        width: 52px;
        height: 60px;
        border-radius: 15px 15px 20px 20px;
    }

    body.sanctum-page .housing-hero-emblem > span {
        margin-top: 10px;
        transform: scale(0.66);
    }

    body.sanctum-page .housing-hero-content {
        display: contents;
    }

    body.sanctum-page .housing-hero-copy {
        grid-column: 2;
    }

    body.sanctum-page .housing-wallet {
        grid-column: 1 / -1;
        gap: 5px;
    }

    body.sanctum-page .housing-wallet > div {
        min-height: 46px;
        padding: 6px 8px;
    }

    body.sanctum-page .housing-top-grid > .card {
        padding: 11px;
    }

    body.sanctum-page .housing-section-heading {
        align-items: center;
        flex-direction: row;
    }

    body.sanctum-page .housing-deposit-form,
    body.sanctum-page .housing-building-grid {
        grid-template-columns: 1fr;
    }

    body.sanctum-page .housing-deposit-form button {
        width: 100%;
    }

    body.sanctum-page .housing-building-card > p {
        min-height: 0;
    }
}

/* Rev. 0.5.47 compact Relic page */
body.relic-page .relic-hero {
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 15px;
    margin: 0 0 10px;
    padding: 14px 16px;
    background:
        radial-gradient(circle at 8% 42%, rgba(69, 145, 219, 0.2), transparent 25%),
        linear-gradient(135deg, #13243b, #101d31 58%, #0d192b);
}

body.relic-page .relic-art-panel img {
    width: min(100%, 145px);
    height: 138px;
    filter: drop-shadow(0 0 16px rgba(69, 145, 219, 0.38));
}

body.relic-page .relic-art-level {
    margin-top: -3px;
    font-size: 0.62rem;
}

body.relic-page .relic-art-level strong {
    font-size: 1.35rem;
}

body.relic-page .relic-art-level small {
    font-size: 0.72rem;
}

body.relic-page .relic-hero-content h1 {
    margin: 2px 0 3px;
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    letter-spacing: -0.025em;
}

body.relic-page .relic-hero-content > p {
    margin: 0 0 8px;
    max-width: none;
    font-size: 0.8rem;
    line-height: 1.4;
}

body.relic-page .relic-level-progress {
    height: 7px;
}

body.relic-page .relic-metrics {
    gap: 7px;
    margin-top: 8px;
}

body.relic-page .relic-metrics > div {
    min-height: 48px;
    padding: 6px 9px;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 8px;
    background: rgba(8, 19, 34, 0.62);
}

body.relic-page .relic-metrics span {
    font-size: 0.68rem;
}

body.relic-page .relic-metrics strong {
    font-size: 0.86rem;
}

body.relic-page .relic-material-summary {
    gap: 6px 9px;
    margin-top: 7px;
}

body.relic-page .relic-material-summary > span {
    font-size: 0.64rem;
}

body.relic-page .relic-material-summary .workshop-material-balances > div {
    padding: 4px 7px;
}

body.relic-page .relic-upgrade-card {
    margin: 0 0 9px;
    padding: 13px 15px;
    border-color: #30445e;
    background: linear-gradient(145deg, rgba(19, 34, 56, 0.98), rgba(13, 24, 41, 0.98));
}

body.relic-page .relic-section-heading {
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.28);
}

body.relic-page .relic-section-heading h2 {
    margin: 2px 0 0;
    font-size: 1.08rem;
}

body.relic-page .relic-target-level {
    padding: 5px 8px;
    font-size: 0.72rem;
}

body.relic-page .relic-upgrade-card > p {
    margin: 8px 0;
    font-size: 0.78rem;
}

body.relic-page .relic-cost-grid {
    gap: 6px;
    margin: 8px 0;
}

body.relic-page .relic-cost-grid > div {
    padding: 7px 9px;
    border-color: rgba(100, 125, 161, 0.34);
    background: rgba(8, 19, 34, 0.62);
    font-size: 0.74rem;
}

body.relic-page .relic-upgrade-card form {
    gap: 7px;
    margin: 8px 0 0;
}

body.relic-page .relic-upgrade-card form button {
    min-height: 34px;
    padding: 6px 10px;
}

body.relic-page .relic-cost-note {
    font-size: 0.72rem;
}

body.relic-page .relic-shop-grid {
    align-items: start;
    gap: 9px;
    margin: 0 0 9px;
}

body.relic-page .relic-shop-grid .relic-shop-card {
    width: 100%;
    margin: 0;
    padding: 13px 15px;
    gap: 5px;
    border-color: #30445e;
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.07), transparent 44%),
        linear-gradient(145deg, rgba(19, 34, 56, 0.98), rgba(13, 24, 41, 0.98));
}

body.relic-page .relic-shop-card h2 {
    font-size: 1.05rem;
}

body.relic-page .relic-shop-card p {
    font-size: 0.77rem;
    line-height: 1.35;
}

body.relic-page .relic-purchase-buttons {
    gap: 5px;
    margin-top: 5px;
}

body.relic-page .relic-purchase-buttons button,
body.relic-page .relic-service-card .button-link {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 0.72rem;
}

body.relic-page .relic-month-track {
    flex: 0 1 180px;
    max-width: 220px;
    padding: 5px 8px;
    font-size: 0.74rem;
}

body.relic-page .relic-crystal-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin-top: 5px;
}

body.relic-page .relic-crystal-controls .relic-purchase-buttons {
    flex: 1 1 250px;
    margin-top: 0;
}

body.relic-page .relic-service-grid {
    margin-top: 0;
}

body.relic-page .relic-service-card .relic-purchase-buttons {
    align-self: start;
}

body.relic-page .relic-tempering-shop {
    margin: 0 0 9px;
    padding: 13px 15px;
    border-color: #30445e;
    background: linear-gradient(145deg, rgba(19, 34, 56, .98), rgba(13, 24, 41, .98));
}
.relic-tempering-shop-limit { color: #a9bfd8; font-size: .72rem; }
body.relic-page .relic-tempering-shop-description { margin: 8px 0; color: #c7d6e7; font-size: .77rem; line-height: 1.4; }
.relic-tempering-stone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.relic-tempering-stone { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #30445e; border-radius: 9px; background: rgba(8, 19, 34, .62); }
.relic-tempering-stone-bonus { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #276d83; border-radius: 9px; background: #103445; color: #67e8f9; font-size: .9rem; font-weight: 800; }
.relic-tempering-stone-50 .relic-tempering-stone-bonus { border-color: #68518c; background: #2d2346; color: #d0b5ff; }
.relic-tempering-stone-copy { min-width: 0; }
.relic-tempering-stone-copy h3 { margin: 0 0 4px; font-size: .83rem; line-height: 1.3; overflow-wrap: anywhere; }
.relic-tempering-stone-copy p { margin: 0; color: #a9bfd8; font-size: .73rem; }
.relic-tempering-stone-copy strong { color: #e2e8f0; }
body.relic-page .relic-tempering-stone .relic-purchase-buttons { margin: 0; }
body.relic-page .relic-tempering-shop-note { margin: 8px 0 0; color: #a9bfd8; font-size: .72rem; line-height: 1.4; }
@media (max-width: 720px) {
    .relic-tempering-stone-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    body.relic-page .relic-tempering-shop { padding: 11px; }
    .relic-tempering-stone { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
    .relic-tempering-stone-bonus { width: 36px; height: 36px; }
    .relic-tempering-stone .relic-purchase-buttons { grid-column: 1 / -1; }
    .relic-tempering-stone .relic-purchase-buttons form,
    .relic-tempering-stone .relic-purchase-buttons button { width: 100%; }
}

@media (max-width: 820px) {
    body.relic-page .relic-hero {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 10px;
    }

    body.relic-page .relic-art-panel img {
        width: 112px;
        height: 110px;
    }

    body.relic-page .relic-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body.relic-page .relic-hero {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }

    body.relic-page .relic-art-panel {
        grid-template-columns: 82px auto;
        justify-content: start;
        justify-items: center;
        gap: 8px;
    }

    body.relic-page .relic-art-panel img {
        width: 80px;
        height: 78px;
    }

    body.relic-page .relic-art-level {
        margin: 0;
        align-content: center;
    }

    body.relic-page .relic-metrics {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    body.relic-page .relic-metrics > div {
        min-height: 43px;
    }

    body.relic-page .relic-material-summary {
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
    }

    body.relic-page .relic-cost-grid,
    body.relic-page .relic-shop-grid {
        grid-template-columns: 1fr;
    }

    body.relic-page .relic-shop-grid .relic-shop-card,
    body.relic-page .relic-upgrade-card {
        padding: 11px;
    }

    body.relic-page .relic-crystal-controls {
        align-items: stretch;
    }

    body.relic-page .relic-crystal-controls .relic-month-track {
        max-width: none;
    }

    body.relic-page .relic-purchase-buttons button,
    body.relic-page .relic-service-card .button-link,
    body.relic-page .relic-upgrade-card form button {
        min-height: 40px;
    }
}

/* Rev. 0.5.48 Combat and Gathering workspace redesign */
.combat-workspace,
.gathering-workspace {
    margin-bottom: 12px;
}

.combat-workspace .combat-arena-heading {
    grid-template-columns: minmax(280px, 1fr) auto auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 11px;
    padding-bottom: 11px;
}

.combat-workspace .combat-arena-heading h1,
.gathering-workspace .gathering-overview-heading h1 {
    margin: 2px 0 1px;
    font-size: 1.45rem;
}

.combat-workspace .combat-arena-heading p,
.gathering-workspace .gathering-overview-heading p {
    margin: 2px 0 0;
    color: #94aac5;
    font-size: .8rem;
}

.combat-workspace .combat-arena-controls {
    align-items: end;
    justify-content: center;
    gap: 7px;
    margin: 0;
}

.combat-workspace .combat-arena-controls > div:first-of-type {
    gap: 4px;
}

.combat-workspace .combat-arena-controls input {
    width: 142px;
    min-height: 36px;
}

.combat-workspace .combat-arena-controls button,
.gathering-heading-actions button {
    min-height: 36px;
    padding: 7px 11px;
    white-space: nowrap;
}

.combat-workspace .combat-arena-status-wrap {
    align-self: center;
}

.combat-workspace .combat-duel {
    margin-top: 0;
}

.combat-workspace .combatant-card {
    background:
        linear-gradient(145deg, rgba(10, 24, 41, .94), rgba(7, 17, 31, .78));
}

.combat-workspace .combatant-performance > div {
    background: rgba(5, 15, 28, .58);
}

.gathering-workspace .gathering-overview-heading {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.gathering-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.gathering-heading-actions form {
    margin: 0;
}

.gathering-method-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
    margin: 0 0 12px;
}

.gathering-method-button,
.gathering-method-button:disabled {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(70px, 1fr) auto;
    justify-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    min-height: 145px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(80, 126, 105, .38);
    border-radius: 12px;
    color: #d8e9e0;
    text-align: center;
    background:
        radial-gradient(circle at 50% 52%, rgba(34, 197, 94, .12), transparent 39%),
        linear-gradient(145deg, rgba(11, 29, 38, .96), rgba(8, 21, 32, .94));
    box-shadow: none;
    opacity: 1;
}

.gathering-method-button:not(:disabled):hover {
    border-color: rgba(74, 222, 128, .64);
    background: linear-gradient(145deg, rgba(14, 48, 48, .96), rgba(9, 28, 38, .94));
    transform: translateY(-1px);
}

.gathering-method-button.active,
.gathering-method-button.active:disabled {
    border-color: rgba(74, 222, 128, .68);
    background:
        radial-gradient(circle at 50% 52%, rgba(74, 222, 128, .22), transparent 43%),
        linear-gradient(145deg, rgba(17, 78, 53, .62), rgba(8, 31, 38, .94));
    box-shadow: inset 0 -3px 0 #22c55e, 0 0 18px rgba(34, 197, 94, .1);
    cursor: pointer;
}

.gathering-method-button.active:hover,
.gathering-method-button.active:focus-visible {
    border-color: rgba(134, 239, 172, .88);
    box-shadow: inset 0 -3px 0 #22c55e, 0 0 22px rgba(34, 197, 94, .2);
}

.gathering-method-card-copy {
    display: grid;
    justify-items: center;
    gap: 1px;
    min-width: 0;
}

.gathering-method-card-copy strong,
.gathering-method-card-copy small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gathering-method-card-copy strong {
    color: #edf9f1;
    font-size: .88rem;
}

.gathering-method-card-copy small {
    color: #839e91;
    font-size: .66rem;
}

.gathering-method-card-art {
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    align-self: center;
}

.gathering-method-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .38));
    transition: transform .18s ease, filter .18s ease;
}

.gathering-method-button:not(:disabled):hover .gathering-method-card-art img {
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .44));
}

.gathering-method-button em {
    min-width: 64px;
    padding: 3px 8px;
    border: 1px solid rgba(96, 135, 116, .34);
    border-radius: 999px;
    color: #91aa9e;
    font-size: .61rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(3, 13, 19, .4);
}

.gathering-method-button.active em {
    border-color: rgba(74, 222, 128, .44);
    color: #86efac;
    background: rgba(22, 101, 52, .24);
}

.gathering-workspace .gathering-operation-card {
    padding: 11px 12px;
}

.gathering-workspace .gathering-method-icon {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 13px;
    background: radial-gradient(circle, rgba(74, 222, 128, .18), rgba(12, 35, 37, .82));
}

.gathering-workspace .gathering-method-icon img,
.combat-workspace .combatant-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.combat-workspace .combatant-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    padding: 2px;
    overflow: hidden;
}

.gathering-workspace .gathering-target-resource {
    padding-top: 5px;
    padding-bottom: 5px;
}

.action-history-card .battle-log-heading {
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(89, 119, 156, .28);
}

.action-history-card .battle-log-heading h2 {
    margin: 2px 0 1px;
    font-size: 1.1rem;
}

.action-history-card .battle-log-heading p {
    margin: 0;
    color: #8fa6c1;
    font-size: .77rem;
}

.action-history-kicker {
    color: #7dd3fc;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.gathering-history-card .action-history-kicker {
    color: #86efac;
}

.action-history-card .battle-log-entry {
    border-top: 1px solid rgba(74, 99, 132, .22);
    border-right: 1px solid rgba(74, 99, 132, .22);
    border-bottom: 1px solid rgba(74, 99, 132, .22);
    background: linear-gradient(90deg, rgba(13, 28, 47, .88), rgba(9, 20, 35, .66));
}

@media (max-width: 1000px) {
    .gathering-method-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .combat-workspace .combat-arena-heading {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .combat-workspace .combat-arena-controls {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .combat-workspace,
    .gathering-workspace {
        padding: 9px;
    }

    .combat-workspace .combat-arena-heading,
    .gathering-workspace .gathering-overview-heading {
        gap: 7px;
        margin-bottom: 7px;
        padding-bottom: 7px;
    }

    .combat-workspace .combat-arena-heading h1,
    .gathering-workspace .gathering-overview-heading h1 {
        margin: 0;
        font-size: 1.08rem;
    }

    .combat-workspace .combat-arena-heading p,
    .gathering-workspace .gathering-overview-heading p,
    .action-history-card .battle-log-heading p {
        display: none;
    }

    .combat-workspace .combat-arena-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: end;
        width: 100%;
    }

    .combat-workspace .combat-arena-controls > div:first-of-type,
    .combat-workspace .combat-arena-controls input {
        width: 100%;
        min-width: 0;
    }

    .combat-workspace .combat-arena-controls > div:nth-of-type(2) {
        display: contents;
    }

    .gathering-heading-actions {
        gap: 4px;
    }

    .gathering-method-picker {
        gap: 5px;
        margin-bottom: 8px;
    }

    .gathering-method-button,
    .gathering-method-button:disabled {
        grid-template-rows: auto minmax(58px, 1fr) auto;
        min-height: 122px;
        padding: 8px 6px;
    }

    .gathering-method-card-art {
        width: 62px;
        height: 62px;
    }

    .gathering-method-card-copy strong {
        font-size: .78rem;
    }

    .gathering-method-card-copy small {
        font-size: .58rem;
    }

    .gathering-method-button em {
        min-width: 54px;
        padding: 2px 6px;
        font-size: .55rem;
    }

}

@media (max-width: 360px) {
    .gathering-method-picker {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .combat-workspace .combat-duel {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .combat-workspace .combat-versus {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 7px;
        width: 100%;
        height: 18px;
        color: #facc15;
        font-size: 0.58rem;
    }

    .combat-workspace .combat-versus::before,
    .combat-workspace .combat-versus::after {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.42));
        content: '';
    }

    .combat-workspace .combat-versus::after {
        background: linear-gradient(90deg, rgba(250, 204, 21, 0.42), transparent);
    }

    .combat-workspace .combat-versus span {
        display: inline-flex;
        width: 24px;
        height: 18px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(250, 204, 21, 0.4);
        border-radius: 999px;
        background: rgba(113, 63, 18, 0.2);
    }

    .combat-workspace .combatant-card {
        padding: 9px 10px;
    }

    .combat-workspace .combatant-identity {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
    }

    .combat-workspace .combatant-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .combat-workspace .combatant-identity small {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        margin: 0;
        font-size: 0.66rem;
        white-space: nowrap;
    }

    .combat-workspace .combatant-performance {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
    }

    .combat-workspace .combatant-performance > div,
    .combat-workspace .combatant-performance > div:nth-child(2),
    .combat-workspace .combatant-performance > div:nth-child(3) {
        display: grid;
        min-width: 0;
        padding: 5px 2px;
    }

    .combat-workspace .combatant-performance span {
        font-size: 0.52rem;
    }

    .combat-workspace .combatant-performance strong {
        overflow: hidden;
        font-size: 0.68rem;
        text-overflow: ellipsis;
    }
}

/* Rev. 0.5.48 Sanctum customization */
body.sanctum-page .housing-hero-copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

body.sanctum-page .housing-hero-copy > div {
    min-width: 0;
}

body.sanctum-page .sanctum-customize-toggle {
    min-width: 104px;
    min-height: 34px;
    flex: 0 0 auto;
    padding: 6px 10px;
}

body.sanctum-page .sanctum-customize-panel {
    margin-bottom: 10px;
}

body.sanctum-page .sanctum-customize-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.sanctum-page [data-sanctum-visibility-group][hidden],
body.sanctum-page [data-sanctum-visibility-target][hidden] {
    display: none;
}

body.sanctum-page .housing-wallet[data-visible-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.sanctum-page .housing-wallet[data-visible-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.sanctum-page .housing-wallet[data-visible-count="1"],
body.sanctum-page .housing-top-grid[data-visible-count="1"],
body.sanctum-page .housing-building-grid[data-visible-count="1"] {
    grid-template-columns: minmax(0, 1fr);
}

body.sanctum-page .housing-building-grid[data-visible-count="2"] {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
}

@media (max-width: 900px) {
    body.sanctum-page .sanctum-customize-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    body.sanctum-page .housing-hero-copy {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    body.sanctum-page .sanctum-customize-toggle {
        width: 100%;
    }

    body.sanctum-page .housing-wallet[data-visible-count],
    body.sanctum-page .housing-building-grid[data-visible-count] {
        grid-template-columns: 1fr;
    }
}

/* Rev. 0.5.48 Gathering customization */
body.gathering-page .gathering-heading-actions {
    flex-wrap: wrap;
}

body.gathering-page .gathering-customize-toggle {
    min-width: 104px;
}

body.gathering-page .gathering-customize-panel {
    margin: 0 0 12px;
    padding: 13px;
    border: 1px solid rgba(34, 211, 238, 0.32);
    border-radius: 10px;
}

body.gathering-page .gathering-customize-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.gathering-page [data-gathering-visibility-group][hidden],
body.gathering-page [data-gathering-visibility-target][hidden] {
    display: none;
}

body.gathering-page .gathering-method-picker[data-visible-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.gathering-page .gathering-method-picker[data-visible-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.gathering-page .gathering-method-picker[data-visible-count="1"] {
    grid-template-columns: minmax(0, 1fr);
}

body.gathering-page .gathering-stat-grid[data-gathering-visibility-group] {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

@media (max-width: 1000px) {
    body.gathering-page .gathering-method-picker[data-visible-count] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.gathering-page .gathering-method-picker[data-visible-count="1"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    body.gathering-page .gathering-customize-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    body.gathering-page .gathering-method-picker[data-visible-count],
    body.gathering-page .gathering-stat-grid[data-gathering-visibility-group] {
        grid-template-columns: 1fr;
    }
}

/* Rev. 0.5.48 shared Customize tool button */
button.customize-tool-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 11px 6px 7px;
    border-color: rgba(45, 212, 191, 0.5);
    color: #ccfbf1;
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(14, 116, 144, 0.14)),
        #12233a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.16);
}

button.customize-tool-button:hover:not(:disabled),
button.customize-tool-button:focus-visible {
    border-color: rgba(94, 234, 212, 0.78);
    color: #f0fdfa;
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(14, 116, 144, 0.2)),
        #152a43;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.12), 0 6px 16px rgba(0, 0, 0, 0.2);
}

.customize-tool-icon {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border: 1px solid rgba(94, 234, 212, 0.48);
    border-radius: 7px;
    color: #99f6e4;
    background: rgba(15, 118, 110, 0.23);
    box-shadow: inset 0 0 10px rgba(45, 212, 191, 0.08);
    transition: transform 160ms ease, background 160ms ease;
}

.customize-tool-icon svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button.customize-tool-button:hover:not(:disabled) .customize-tool-icon,
button.customize-tool-button[aria-expanded="true"] .customize-tool-icon {
    color: #f0fdfa;
    background: rgba(13, 148, 136, 0.36);
    transform: rotate(-8deg);
}

/* Rev. 0.5.68 Quest Cards and Quest Shop personal view */
body.quests-page .quest-heading-actions,
body.quest-shop-page .quest-shop-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

body.quests-page .quest-customize-panel,
body.quest-shop-page .quest-customize-panel {
    margin: 10px 0;
}

body.quests-page [data-quest-customize-target][hidden],
body.quests-page [data-quest-customize-group][hidden],
body.quest-shop-page [data-quest-customize-target][hidden],
body.quest-shop-page [data-quest-customize-group][hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    body.quests-page .quest-heading-actions,
    body.quest-shop-page .quest-shop-heading-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.quest-shop-page .quest-shop-heading-actions .guild-badge {
        flex: 1 1 130px;
    }
}

/* Rev. 0.5.48 Crafting visual refresh */
body.crafting-page .crafting-hero {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    padding: 16px 18px;
    overflow: hidden;
    border-color: rgba(139, 92, 246, 0.42);
    background:
        radial-gradient(circle at 7% 48%, rgba(34, 211, 238, 0.15), transparent 23%),
        radial-gradient(circle at 94% 5%, rgba(168, 85, 247, 0.15), transparent 31%),
        linear-gradient(135deg, #14253d, #101e33 58%, #0c1829);
}

body.crafting-page .crafting-hero-emblem {
    display: grid;
    width: 80px;
    height: 80px;
    place-items: center;
    border: 1px solid rgba(103, 232, 249, 0.4);
    border-radius: 22px;
    background:
        radial-gradient(circle at 68% 28%, rgba(192, 132, 252, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(8, 145, 178, 0.2), rgba(109, 40, 217, 0.17)),
        #091727;
    box-shadow: inset 0 0 24px rgba(34, 211, 238, 0.08), 0 12px 28px rgba(0, 0, 0, 0.24);
}

body.crafting-page .crafting-hero-emblem svg {
    width: 60px;
    height: 60px;
    overflow: visible;
    filter: drop-shadow(0 0 7px rgba(103, 232, 249, 0.2));
}

body.crafting-page .crafting-hero-gem {
    fill: rgba(56, 189, 248, 0.15);
    stroke: #67e8f9;
    stroke-width: 2;
}

body.crafting-page .crafting-hero-gem-line {
    fill: none;
    stroke: rgba(196, 181, 253, 0.76);
    stroke-width: 1.35;
}

body.crafting-page .crafting-hero-hammer {
    fill: #172554;
    stroke: #c4b5fd;
    stroke-width: 2;
    stroke-linejoin: round;
}

body.crafting-page .crafting-hero-content {
    display: grid;
    gap: 11px;
    min-width: 0;
}

body.crafting-page .crafting-hero-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

body.crafting-page .crafting-hero-heading > div {
    min-width: 0;
}

body.crafting-page .crafting-hero h1 {
    margin: 2px 0 1px;
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    letter-spacing: -0.025em;
}

body.crafting-page .crafting-hero p {
    margin: 0;
    color: #9fb4d0;
    font-size: 0.82rem;
}

body.crafting-page .crafting-hero .game-guide-button {
    flex: 0 0 auto;
}

body.crafting-page .crafting-skill-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body.crafting-page .crafting-skill-summary > span {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 8px;
    background: rgba(8, 19, 34, 0.62);
}

body.crafting-page .crafting-skill-summary small {
    color: #91a9c8;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

body.crafting-page .crafting-skill-summary strong {
    color: #f5f3ff;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

body.crafting-page .crafting-mode-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 10px;
    padding: 0;
    overflow: visible;
}

body.crafting-page .crafting-mode-tabs a,
body.crafting-page .crafting-tabs a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(20, 35, 56, 0.98), rgba(12, 24, 41, 0.98));
    color: #aebfd4;
    font-size: 0.78rem;
}

body.crafting-page .crafting-mode-tabs a::before,
body.crafting-page .crafting-tabs a::before {
    color: #7dd3fc;
    font-size: 0.82rem;
}

body.crafting-page .crafting-mode-tabs a[href*="view=craft"]::before { content: "✦"; }
body.crafting-page .crafting-mode-tabs a[href*="view=orders"]::before { content: "▤"; }
body.crafting-page .crafting-mode-tabs a[href*="view=services"]::before { content: "◇"; }
body.crafting-page .crafting-mode-tabs a[href*="view=mine"]::before { content: "◈"; }
body.crafting-page .crafting-tabs a[href*="type=gem"]::before { content: "◆"; }
body.crafting-page .crafting-tabs a[href*="type=enchantment"]::before { content: "✧"; }

body.crafting-page .crafting-mode-tabs a:hover,
body.crafting-page .crafting-tabs a:hover {
    border-color: rgba(103, 232, 249, 0.48);
    color: #edfaff;
    background: #172b46;
}

body.crafting-page .crafting-mode-tabs a.active,
body.crafting-page .crafting-tabs a.active {
    border-color: rgba(167, 139, 250, 0.7);
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(124, 58, 237, 0.38)),
        #17233a;
    box-shadow: inset 0 -2px 0 #a78bfa, 0 0 16px rgba(124, 58, 237, 0.11);
}

body.crafting-page .crafting-material-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

body.crafting-page .crafting-material-card {
    --craft-material-accent: #67e8f9;
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 9px;
    min-height: 76px;
    padding: 10px 11px;
    overflow: hidden;
    border-color: rgba(100, 125, 161, 0.38);
    border-top-color: color-mix(in srgb, var(--craft-material-accent) 72%, transparent);
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--craft-material-accent) 12%, transparent), transparent 44%),
        linear-gradient(145deg, rgba(18, 34, 55, 0.98), rgba(10, 23, 39, 0.98));
}

body.crafting-page .crafting-material-card[data-material-key="soul_fragment"] { --craft-material-accent: #c084fc; }
body.crafting-page .crafting-material-card[data-material-key="rough_crystal"] { --craft-material-accent: #67e8f9; }
body.crafting-page .crafting-material-card[data-material-key="ancient_resin"] { --craft-material-accent: #fbbf24; }
body.crafting-page .crafting-material-card[data-material-key="primal_essence"] { --craft-material-accent: #fb7185; }
body.crafting-page .crafting-material-card[data-material-key="arcane_oil"] { --craft-material-accent: #4ade80; }

body.crafting-page .crafting-material-head {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

body.crafting-page .crafting-material-head > span:last-child {
    overflow: hidden;
    color: #b9cbe1;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

body.crafting-page .crafting-material-symbol {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--craft-material-accent) 50%, transparent);
    border-radius: 8px;
    color: var(--craft-material-accent);
    background: color-mix(in srgb, var(--craft-material-accent) 10%, #0b1728);
    font-size: 0.86rem;
}

body.crafting-page .crafting-material-card > strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #f8fafc;
    font-size: 1.08rem;
    font-variant-numeric: tabular-nums;
}

body.crafting-page .crafting-material-card > small {
    grid-column: 1;
    color: #7890aa;
    font-size: 0.66rem;
}

body.crafting-page .crafting-active-job,
body.crafting-page .crafting-builder,
body.crafting-page .crafting-log-grid > .card,
body.crafting-page .work-order-board,
body.crafting-page .work-order-reputation-board,
body.crafting-page .work-order-mine,
body.crafting-page .crafting-service-own,
body.crafting-page .crafting-service-board {
    border-color: rgba(100, 125, 161, 0.4);
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.07), transparent 38%),
        linear-gradient(145deg, rgba(19, 34, 56, 0.98), rgba(12, 24, 41, 0.98));
}

body.crafting-page .crafting-active-job,
body.crafting-page .crafting-builder {
    margin-bottom: 10px;
    padding: 14px;
}

body.crafting-page .crafting-active-job {
    border-color: rgba(167, 139, 250, 0.55);
}

body.crafting-page .crafting-section-heading {
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.26);
}

body.crafting-page .crafting-section-heading h2 {
    margin: 2px 0 0;
    font-size: 1.08rem;
    letter-spacing: -0.012em;
}

body.crafting-page .crafting-section-heading > strong {
    padding: 5px 9px;
    border: 1px solid rgba(139, 92, 246, 0.38);
    border-radius: 999px;
    color: #ddd6fe;
    background: rgba(109, 40, 217, 0.1);
    font-size: 0.74rem;
    white-space: nowrap;
}

body.crafting-page .crafting-progress {
    height: 9px;
    margin-top: 10px;
    border-color: rgba(100, 125, 161, 0.38);
}

body.crafting-page .crafting-progress span {
    background: linear-gradient(90deg, #7c3aed, #38bdf8 74%, #67e8f9);
    box-shadow: 0 0 13px rgba(56, 189, 248, 0.24);
}

body.crafting-page .crafting-active-job > p {
    margin: 8px 0;
    color: #9fb4d0;
    font-size: 0.78rem;
}

body.crafting-page .crafting-action-series {
    margin: 9px 0;
    padding: 9px 10px;
    border-color: rgba(100, 125, 161, 0.32);
    background: rgba(7, 17, 31, 0.45);
}

.crafting-manual-pause {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 9px 0;
    padding: 9px 10px;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 9px;
    background: rgba(6, 78, 59, 0.16);
}

.crafting-manual-pause > div {
    display: grid;
    gap: 3px;
}

.crafting-manual-pause span,
.crafting-manual-pause small {
    color: #9fb4d0;
}

.crafting-manual-pause.is-paused {
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(120, 53, 15, 0.2);
}

@media (max-width: 650px) {
    .crafting-manual-pause {
        align-items: stretch;
        display: grid;
    }

    .crafting-manual-pause button {
        width: 100%;
    }
}

body.crafting-page .crafting-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: min(100%, 520px);
    margin: 10px 0;
}

body.crafting-page .crafting-builder > p {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(56, 189, 248, 0.24);
    border-radius: 8px;
    color: #9fb4d0;
    background: rgba(8, 47, 73, 0.1);
    font-size: 0.74rem;
    line-height: 1.45;
}

body.crafting-page .crafting-form {
    gap: 9px;
    margin-top: 0;
}

body.crafting-page .crafting-form > label {
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(100, 125, 161, 0.3);
    border-radius: 9px;
    color: #9fb4d0;
    background: rgba(7, 17, 31, 0.38);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

body.crafting-page .crafting-form > label small {
    color: #7388a2;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

body.crafting-page .crafting-form select,
body.crafting-page .crafting-form input {
    min-height: 38px;
    border-color: rgba(100, 125, 161, 0.46);
    background: #091626;
}

body.crafting-page .crafting-preview {
    gap: 7px;
}

body.crafting-page .crafting-preview > div {
    min-height: 62px;
    align-content: center;
    gap: 3px;
    padding: 8px 10px;
    border-color: rgba(100, 125, 161, 0.3);
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.06), transparent 64%),
        rgba(7, 17, 31, 0.48);
}

body.crafting-page .crafting-preview span {
    color: #7890aa;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

body.crafting-page .crafting-preview strong {
    color: #e9d5ff;
    font-size: 0.84rem;
}

body.crafting-page .crafting-form > button {
    min-height: 40px;
    border-color: rgba(139, 92, 246, 0.62);
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

body.crafting-page .crafting-log-grid {
    gap: 10px;
}

body.crafting-page .crafting-log-grid > .card {
    margin: 0;
    padding: 13px;
}

body.crafting-page .crafting-log-grid h2 {
    margin: 0 0 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.25);
    font-size: 1rem;
}

body.crafting-page .crafting-log-list {
    gap: 5px;
}

body.crafting-page .crafting-log-list > div {
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(100, 125, 161, 0.2);
    border-radius: 7px;
    background: rgba(7, 17, 31, 0.3);
    font-size: 0.75rem;
}

body.crafting-page .work-order-board-layout {
    gap: 10px;
}

body.crafting-page .work-order-filter-form {
    border-color: rgba(100, 125, 161, 0.3);
    background: rgba(7, 17, 31, 0.42);
}

body.crafting-page .work-order-table tbody tr,
body.crafting-page .crafting-service-table tbody tr {
    transition: background 140ms ease;
}

body.crafting-page .work-order-table tbody tr:hover,
body.crafting-page .crafting-service-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.045);
}

@media (max-width: 1100px) {
    body.crafting-page .crafting-material-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.crafting-page .crafting-hero {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }

    body.crafting-page .crafting-hero-emblem {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }

    body.crafting-page .crafting-hero-emblem svg {
        width: 44px;
        height: 44px;
    }

    body.crafting-page .crafting-hero-content {
        display: contents;
    }

    body.crafting-page .crafting-hero-heading {
        grid-column: 2;
    }

    body.crafting-page .crafting-hero-heading p {
        display: none;
    }

    body.crafting-page .crafting-skill-summary {
        grid-column: 1 / -1;
    }

    body.crafting-page .crafting-mode-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.crafting-page .crafting-material-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    body.crafting-page .crafting-hero-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
    }

    body.crafting-page .crafting-hero .game-guide-button {
        align-self: flex-start;
    }

    body.crafting-page .crafting-skill-summary {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    body.crafting-page .crafting-skill-summary > span {
        min-height: 40px;
    }

    body.crafting-page .crafting-material-grid {
        grid-template-columns: 1fr;
    }

    body.crafting-page .crafting-tabs {
        width: 100%;
    }
}

/* Rev. 0.5.48 remaining core-page visual refresh */
body.inventory-page .inventory-hero,
body.market-page .auction-house-hero,
body.rankings-page .ranking-hero,
body.guild-page .guild-hero,
body.crystal-shop-page .shop-hero {
    position: relative;
    margin-bottom: 10px;
    padding: 15px 17px;
    overflow: hidden;
    border: 1px solid rgba(100, 125, 161, 0.42);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

body.inventory-page .inventory-hero {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    background:
        radial-gradient(circle at 6% 50%, rgba(56, 189, 248, 0.16), transparent 23%),
        radial-gradient(circle at 95% 2%, rgba(59, 130, 246, 0.13), transparent 30%),
        linear-gradient(135deg, #14263f, #0e1c30 62%, #0a1727);
}

body.market-page .auction-house-hero {
    display: grid;
    grid-template-columns: 72px minmax(240px, 1fr) minmax(360px, 0.9fr);
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(circle at 5% 50%, rgba(245, 158, 11, 0.16), transparent 22%),
        radial-gradient(circle at 96% 0, rgba(34, 211, 238, 0.1), transparent 30%),
        linear-gradient(135deg, #19253a, #101d30 62%, #0b1727);
}

body.rankings-page .ranking-hero {
    display: grid;
    grid-template-columns: 72px minmax(220px, 1fr) minmax(360px, 0.9fr);
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(circle at 5% 50%, rgba(250, 204, 21, 0.16), transparent 22%),
        radial-gradient(circle at 96% 0, rgba(245, 158, 11, 0.1), transparent 30%),
        linear-gradient(135deg, #1b2639, #101d30 62%, #0b1727);
}

body.guild-page .guild-hero {
    display: grid;
    grid-template-columns: 72px minmax(220px, 1fr) minmax(440px, 1.05fr);
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(circle at 5% 50%, rgba(34, 197, 94, 0.15), transparent 22%),
        radial-gradient(circle at 96% 0, rgba(45, 212, 191, 0.1), transparent 30%),
        linear-gradient(135deg, #14283a, #101f31 62%, #0b1827);
}

body.crystal-shop-page .shop-hero {
    display: grid;
    grid-template-columns: 72px minmax(230px, 1fr) minmax(280px, 0.75fr);
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(circle at 5% 50%, rgba(168, 85, 247, 0.18), transparent 22%),
        radial-gradient(circle at 96% 0, rgba(56, 189, 248, 0.12), transparent 30%),
        linear-gradient(135deg, #1b243f, #121d34 62%, #0c172a);
}

body.inventory-page .inventory-hero-emblem,
body.market-page .auction-house-hero-emblem,
body.rankings-page .ranking-hero-emblem,
body.guild-page .guild-hero-emblem,
body.crystal-shop-page .shop-hero-emblem {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid rgba(100, 125, 161, 0.42);
    border-radius: 18px;
    background: rgba(7, 17, 31, 0.62);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.025), 0 10px 24px rgba(0, 0, 0, 0.2);
}

body.inventory-page .inventory-hero-emblem { color: #67e8f9; border-color: rgba(56, 189, 248, 0.5); }
body.market-page .auction-house-hero-emblem { color: #fbbf24; border-color: rgba(245, 158, 11, 0.5); }
body.rankings-page .ranking-hero-emblem { color: #fde68a; border-color: rgba(250, 204, 21, 0.5); }
body.guild-page .guild-hero-emblem { color: #86efac; border-color: rgba(34, 197, 94, 0.48); }
body.crystal-shop-page .shop-hero-emblem { color: #d8b4fe; border-color: rgba(168, 85, 247, 0.5); }

body.inventory-page .inventory-hero-emblem svg,
body.market-page .auction-house-hero-emblem svg,
body.rankings-page .ranking-hero-emblem svg,
body.guild-page .guild-hero-emblem svg,
body.crystal-shop-page .shop-hero-emblem svg {
    width: 45px;
    height: 45px;
    fill: rgba(255, 255, 255, 0.025);
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.inventory-page .inventory-hero-content,
body.inventory-page .inventory-hero-heading,
body.market-page .auction-house-hero-copy,
body.rankings-page .ranking-hero-copy,
body.guild-page .guild-hero-copy,
body.crystal-shop-page .shop-hero-copy {
    min-width: 0;
}

body.inventory-page .inventory-hero-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.inventory-page .inventory-hero h1,
body.market-page .auction-house-hero h1,
body.rankings-page .ranking-hero h1,
body.guild-page .guild-hero h1,
body.crystal-shop-page .shop-hero h1 {
    margin: 2px 0 1px;
    font-size: clamp(1.48rem, 2vw, 1.85rem);
    letter-spacing: -0.025em;
}

body.inventory-page .inventory-hero p,
body.market-page .auction-house-hero p,
body.rankings-page .ranking-hero p,
body.guild-page .guild-hero p,
body.crystal-shop-page .shop-hero p {
    margin: 0;
    color: #97abc5;
    font-size: 0.78rem;
    line-height: 1.4;
}

body.inventory-page .inventory-hero-metrics,
body.market-page .auction-house-hero-metrics,
body.rankings-page .ranking-hero-metrics,
body.guild-page .guild-hero-metrics,
body.crystal-shop-page .shop-hero-metrics {
    display: grid;
    gap: 6px;
}

body.inventory-page .inventory-hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 9px;
}

body.market-page .auction-house-hero-metrics,
body.rankings-page .ranking-hero-metrics,
body.crystal-shop-page .shop-hero-metrics {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

body.guild-page .guild-hero-metrics {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

body.inventory-page .inventory-hero-metrics > span,
body.market-page .auction-house-hero-metrics > span,
body.rankings-page .ranking-hero-metrics > span,
body.guild-page .guild-hero-metrics > span,
body.crystal-shop-page .shop-hero-metrics > span {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid rgba(100, 125, 161, 0.34);
    border-radius: 8px;
    background: rgba(7, 17, 31, 0.48);
}

body.inventory-page .inventory-hero-metrics small,
body.market-page .auction-house-hero-metrics small,
body.rankings-page .ranking-hero-metrics small,
body.guild-page .guild-hero-metrics small,
body.crystal-shop-page .shop-hero-metrics small {
    overflow: hidden;
    color: #7890aa;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

body.inventory-page .inventory-hero-metrics strong,
body.market-page .auction-house-hero-metrics strong,
body.rankings-page .ranking-hero-metrics strong,
body.guild-page .guild-hero-metrics strong,
body.crystal-shop-page .shop-hero-metrics strong {
    overflow: hidden;
    color: #f8fafc;
    font-size: 0.83rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inventory */
body.inventory-page .inventory-page-actions {
    align-items: center;
    gap: 6px;
}

body.inventory-page .inventory-page-actions > * {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 0.72rem;
}

body.inventory-page .inventory-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 10px;
}

body.inventory-page .inventory-tabs a {
    min-height: 38px;
    justify-content: center;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(20, 35, 56, 0.98), rgba(12, 24, 41, 0.98));
    font-size: 0.76rem;
}

body.inventory-page .inventory-tabs a.active {
    border-color: rgba(56, 189, 248, 0.66);
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.3), rgba(37, 99, 235, 0.28)), #13243b;
    box-shadow: inset 0 -2px 0 #38bdf8, 0 0 15px rgba(56, 189, 248, 0.08);
}

body.inventory-page .chat-link-hint {
    margin: 0 0 9px;
    padding: 6px 9px;
    border-radius: 7px;
    background: rgba(7, 17, 31, 0.38);
    font-size: 0.68rem;
}

body.inventory-page #equipped,
body.inventory-page #crafting-equipment,
body.inventory-page #equipment-sets,
body.inventory-page #storage,
body.inventory-page .crafted-inventory-section,
body.inventory-page .workshop-material-inventory {
    margin-bottom: 10px;
    padding: 13px;
    border-color: rgba(100, 125, 161, 0.38);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.055), transparent 38%),
        linear-gradient(145deg, rgba(19, 34, 56, 0.98), rgba(12, 24, 41, 0.98));
}

body.inventory-page #equipped > h2,
body.inventory-page #crafting-equipment > h2,
body.inventory-page .inventory-section-heading,
body.inventory-page .crafting-section-heading {
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.26);
}

body.inventory-page #equipped > h2,
body.inventory-page #crafting-equipment > h2,
body.inventory-page .inventory-section-heading h2,
body.inventory-page .crafting-section-heading h2 {
    font-size: 1.05rem;
}

body.inventory-page .equipment-grid {
    gap: 8px;
}

body.inventory-page .equipment-slot-box {
    padding: 10px;
    border-color: rgba(100, 125, 161, 0.34);
    border-top-color: rgba(56, 189, 248, 0.48);
    border-radius: 9px;
    background: rgba(7, 17, 31, 0.46);
}

body.inventory-page .equipment-slot-box:hover {
    border-color: rgba(103, 232, 249, 0.54);
    background: rgba(9, 26, 45, 0.68);
}

body.inventory-page .equipment-slot-title {
    color: #7dd3fc;
    font-size: 0.67rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.inventory-page #equipped .equipment-inline-stats {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(100, 125, 161, 0.22);
    color: #cbd5e1;
    font-size: 0.72rem;
}

body.inventory-page #equipped .equipment-inline-stats .tooltip-stat-row {
    min-width: 0;
}

body.inventory-page .inventory-filter-bar,
body.inventory-page .crafted-inventory-filter-bar {
    gap: 7px;
    padding: 9px;
    border-color: rgba(100, 125, 161, 0.3);
    border-radius: 9px;
    background: rgba(7, 17, 31, 0.42);
}

body.inventory-page .inventory-table-wrap {
    border-color: rgba(100, 125, 161, 0.34);
    border-radius: 9px;
}

body.inventory-page .inventory-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.045);
}

body.inventory-page .crafted-inventory-card,
body.inventory-page .workshop-material-inventory-card {
    border-color: rgba(100, 125, 161, 0.34);
    border-radius: 9px;
    background: rgba(7, 17, 31, 0.46);
}

/* Auction House */
body.market-page .auction-house-kicker {
    color: #fbbf24;
}

body.market-page .auction-house-hero .market-balance {
    display: grid;
    min-width: 0;
    padding: 7px 9px;
    border-color: rgba(245, 158, 11, 0.38);
    background: rgba(120, 53, 15, 0.12);
}

body.market-page .auction-house-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 10px;
    padding: 0;
}

body.market-page .auction-house-tabs a {
    min-height: 38px;
    justify-content: center;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(20, 35, 56, 0.98), rgba(12, 24, 41, 0.98));
}

body.market-page .auction-house-tabs a.active {
    border-color: rgba(245, 158, 11, 0.65);
    background: linear-gradient(135deg, rgba(146, 64, 14, 0.32), rgba(37, 99, 235, 0.2)), #17243a;
    box-shadow: inset 0 -2px 0 #f59e0b;
}

body.market-page .auction-house-shell {
    gap: 10px;
}

body.market-page .auction-house-categories,
body.market-page .auction-house-main,
body.market-page .auction-wide-panel {
    border-color: rgba(100, 125, 161, 0.38);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(18, 32, 52, 0.98), rgba(11, 23, 39, 0.98));
}

body.market-page .auction-house-categories > a {
    min-height: 39px;
    border-radius: 8px;
}

body.market-page .auction-house-categories > a.active {
    border-color: rgba(245, 158, 11, 0.52);
    background: linear-gradient(90deg, rgba(146, 64, 14, 0.22), rgba(37, 99, 235, 0.12));
}

body.market-page .market-asset-selector,
body.market-page .resource-market-header,
body.market-page .resource-order-column,
body.market-page .auction-trade-card,
body.market-page .auction-depth-panel,
body.market-page .auction-order-form-card {
    border-color: rgba(100, 125, 161, 0.34);
    border-radius: 9px;
}

body.market-page .resource-orderbook-row:hover,
body.market-page .auction-product-row:hover {
    background: rgba(245, 158, 11, 0.045);
}

/* Rankings */
body.rankings-page .section-kicker {
    color: #facc15;
}

body.rankings-page .ranking-main-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 7px;
}

body.rankings-page .ranking-tabs:not(.ranking-main-tabs) {
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
}

body.rankings-page .ranking-tabs a {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(20, 35, 56, 0.98), rgba(12, 24, 41, 0.98));
    font-size: 0.74rem;
    white-space: nowrap;
}

body.rankings-page .ranking-main-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.rankings-page .ranking-tabs a.active {
    border-color: rgba(250, 204, 21, 0.62);
    background: linear-gradient(135deg, rgba(161, 98, 7, 0.3), rgba(37, 99, 235, 0.18)), #17243a;
    box-shadow: inset 0 -2px 0 #facc15;
}

body.rankings-page .ranking-card {
    gap: 10px;
    padding: 13px;
    border-color: rgba(100, 125, 161, 0.38);
}

body.rankings-page .ranking-card .section-heading {
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.26);
}

body.rankings-page .ranking-card .section-heading h2 {
    font-size: 1.08rem;
}

body.rankings-page .ranking-table {
    border-color: rgba(100, 125, 161, 0.34);
    border-radius: 9px;
}

body.rankings-page .ranking-row {
    min-height: 46px;
    padding: 7px 12px;
    border-color: rgba(100, 125, 161, 0.22);
}

body.rankings-page .ranking-row:not(.ranking-head):hover {
    background: rgba(250, 204, 21, 0.035);
}

body.rankings-page .ranking-row:nth-child(2) {
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.1), transparent 45%);
}

body.rankings-page .ranking-row:nth-child(3) {
    background: linear-gradient(90deg, rgba(203, 213, 225, 0.07), transparent 45%);
}

body.rankings-page .ranking-row:nth-child(4) {
    background: linear-gradient(90deg, rgba(180, 83, 9, 0.08), transparent 45%);
}

/* Guild */
body.guild-page .section-kicker {
    color: #4ade80;
}

body.guild-page .guild-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
}

body.guild-page .guild-tabs a {
    min-height: 37px;
    padding: 7px 10px;
    border-color: rgba(100, 125, 161, 0.38);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(20, 35, 56, 0.98), rgba(12, 24, 41, 0.98));
    font-size: 0.73rem;
    white-space: nowrap;
}

body.guild-page .guild-tabs a.active {
    border-color: rgba(34, 197, 94, 0.58);
    background: linear-gradient(135deg, rgba(22, 101, 52, 0.3), rgba(13, 148, 136, 0.2)), #14253b;
    box-shadow: inset 0 -2px 0 #22c55e;
}

body.guild-page .guild-layout {
    gap: 10px;
    margin-top: 10px;
}

body.guild-page .guild-panel,
body.guild-page .guild-overview-card {
    padding: 13px;
    border-color: rgba(100, 125, 161, 0.36);
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.045), transparent 38%),
        linear-gradient(145deg, rgba(18, 33, 53, 0.98), rgba(11, 24, 40, 0.98));
}

body.guild-page .guild-overview-grid {
    gap: 8px;
    margin-bottom: 10px;
}

body.guild-page .guild-overview-card {
    min-height: 86px;
}

body.guild-page .guild-overview-card span {
    color: #86efac;
    font-size: 0.68rem;
}

body.guild-page .guild-overview-card strong {
    font-size: 1.22rem;
}

body.guild-page .guild-panel .character-section-title {
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.24);
}

body.guild-page .guild-list-row,
body.guild-page .market-table tbody tr {
    transition: background 140ms ease;
}

body.guild-page .guild-list-row:hover,
body.guild-page .market-table tbody tr:hover {
    background: rgba(34, 197, 94, 0.04);
}

/* Crystal Shop */
body.crystal-shop-page .section-kicker {
    color: #c084fc;
}

body.crystal-shop-page .shop-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
    margin: 0 0 10px;
}

body.crystal-shop-page .shop-tabs a {
    min-height: 38px;
    justify-content: center;
    padding: 7px 8px;
    border-color: rgba(100, 125, 161, 0.4);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(20, 35, 56, 0.98), rgba(12, 24, 41, 0.98));
    font-size: 0.72rem;
}

body.crystal-shop-page .shop-tabs a.active {
    border-color: rgba(168, 85, 247, 0.64);
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.34), rgba(37, 99, 235, 0.22)), #17233a;
    box-shadow: inset 0 -2px 0 #a855f7;
}

body.crystal-shop-page .shop-panel,
body.crystal-shop-page .referral-hero-card,
body.crystal-shop-page .referral-stat-card {
    margin-bottom: 10px;
    padding: 13px;
    border-color: rgba(100, 125, 161, 0.38);
    background:
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.06), transparent 38%),
        linear-gradient(145deg, rgba(19, 32, 55, 0.98), rgba(12, 23, 41, 0.98));
}

body.crystal-shop-page .shop-panel .character-section-title {
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(100, 125, 161, 0.25);
}

body.crystal-shop-page .shop-package-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

body.crystal-shop-page .shop-package-card {
    gap: 11px;
    min-height: 165px;
    padding: 12px;
    border-color: rgba(168, 85, 247, 0.36);
    border-radius: 9px;
    background:
        radial-gradient(circle at top right, rgba(192, 132, 252, 0.12), transparent 42%),
        rgba(7, 17, 31, 0.5);
    transition: transform 140ms ease, border-color 140ms ease;
}

body.crystal-shop-page .shop-package-card:hover {
    border-color: rgba(192, 132, 252, 0.58);
    transform: translateY(-1px);
}

body.crystal-shop-page .shop-package-card strong {
    font-size: 1.18rem;
}

body.crystal-shop-page .shop-real-money-price {
    font-size: 1.08rem;
}

body.crystal-shop-page .shop-qol-benefit-grid,
body.crystal-shop-page .crystal-bonus-grid,
body.crystal-shop-page .shop-action-pack-options {
    gap: 8px;
}

@media (max-width: 1120px) {
    body.market-page .auction-house-hero,
    body.rankings-page .ranking-hero,
    body.guild-page .guild-hero,
    body.crystal-shop-page .shop-hero {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    body.market-page .auction-house-hero-metrics,
    body.rankings-page .ranking-hero-metrics,
    body.guild-page .guild-hero-metrics,
    body.crystal-shop-page .shop-hero-metrics {
        grid-column: 1 / -1;
    }

    body.guild-page .guild-hero-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.crystal-shop-page .shop-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.inventory-page .inventory-hero,
    body.market-page .auction-house-hero,
    body.rankings-page .ranking-hero,
    body.guild-page .guild-hero,
    body.crystal-shop-page .shop-hero {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }

    body.inventory-page .inventory-hero-emblem,
    body.market-page .auction-house-hero-emblem,
    body.rankings-page .ranking-hero-emblem,
    body.guild-page .guild-hero-emblem,
    body.crystal-shop-page .shop-hero-emblem {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    body.inventory-page .inventory-hero-emblem svg,
    body.market-page .auction-house-hero-emblem svg,
    body.rankings-page .ranking-hero-emblem svg,
    body.guild-page .guild-hero-emblem svg,
    body.crystal-shop-page .shop-hero-emblem svg {
        width: 35px;
        height: 35px;
    }

    body.inventory-page .inventory-hero-content {
        display: contents;
    }

    body.inventory-page .inventory-hero-heading {
        grid-column: 2;
    }

    body.inventory-page .inventory-hero-metrics {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    body.inventory-page .inventory-hero-heading,
    body.inventory-page .inventory-page-actions {
        flex-wrap: wrap;
    }

    body.inventory-page .inventory-tabs {
        grid-template-columns: 1fr;
    }

    body.market-page .auction-house-hero-metrics,
    body.rankings-page .ranking-hero-metrics,
    body.guild-page .guild-hero-metrics,
    body.crystal-shop-page .shop-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.rankings-page .ranking-row {
        grid-template-columns: 52px minmax(0, 1fr) minmax(90px, auto);
    }

    body.guild-page .guild-layout {
        grid-template-columns: 1fr;
    }

    body.crystal-shop-page .shop-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    body.crystal-shop-page .shop-tabs a {
        flex: 0 0 auto;
    }
}

@media (max-width: 520px) {
    body.inventory-page .inventory-hero p,
    body.market-page .auction-house-hero p,
    body.rankings-page .ranking-hero p,
    body.guild-page .guild-hero p,
    body.crystal-shop-page .shop-hero p {
        display: none;
    }

    body.inventory-page .inventory-hero-heading {
        align-items: stretch;
        flex-direction: column;
    }

    body.inventory-page .inventory-page-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body.inventory-page .inventory-page-actions > * {
        justify-content: center;
    }

    body.inventory-page .inventory-hero-metrics,
    body.market-page .auction-house-hero-metrics,
    body.rankings-page .ranking-hero-metrics,
    body.guild-page .guild-hero-metrics,
    body.crystal-shop-page .shop-hero-metrics {
        grid-template-columns: 1fr;
    }

    body.rankings-page .ranking-row {
        grid-template-columns: 42px minmax(0, 1fr) minmax(72px, auto);
        gap: 7px;
        padding: 7px 8px;
    }

    body.rankings-page .ranking-profile-link {
        min-height: 32px;
    }
}

/* Rev. 0.5.48 compact core-page refinement */
body.inventory-page .inventory-hero,
body.market-page .auction-house-hero,
body.rankings-page .ranking-hero,
body.guild-page .guild-hero,
body.crystal-shop-page .shop-hero {
    padding: 10px 12px;
}

body.inventory-page .inventory-hero,
body.market-page .auction-house-hero,
body.rankings-page .ranking-hero,
body.guild-page .guild-hero,
body.crystal-shop-page .shop-hero {
    grid-template-columns: 56px minmax(0, 1fr) minmax(300px, 0.82fr);
    gap: 10px;
}

body.inventory-page .inventory-hero {
    grid-template-columns: 58px minmax(0, 1fr);
}

body.inventory-page .inventory-hero-emblem,
body.market-page .auction-house-hero-emblem,
body.rankings-page .ranking-hero-emblem,
body.guild-page .guild-hero-emblem,
body.crystal-shop-page .shop-hero-emblem {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

body.inventory-page .inventory-hero-emblem svg,
body.market-page .auction-house-hero-emblem svg,
body.rankings-page .ranking-hero-emblem svg,
body.guild-page .guild-hero-emblem svg,
body.crystal-shop-page .shop-hero-emblem svg {
    width: 36px;
    height: 36px;
}

body.inventory-page .inventory-hero h1,
body.market-page .auction-house-hero h1,
body.rankings-page .ranking-hero h1,
body.guild-page .guild-hero h1,
body.crystal-shop-page .shop-hero h1 {
    font-size: clamp(1.3rem, 1.7vw, 1.62rem);
}

body.inventory-page .inventory-hero p,
body.market-page .auction-house-hero p,
body.rankings-page .ranking-hero p,
body.guild-page .guild-hero p,
body.crystal-shop-page .shop-hero p {
    font-size: 0.7rem;
}

body.inventory-page .inventory-hero-metrics {
    margin-top: 6px;
}

body.inventory-page .inventory-hero-metrics > span,
body.market-page .auction-house-hero-metrics > span,
body.rankings-page .ranking-hero-metrics > span,
body.guild-page .guild-hero-metrics > span,
body.crystal-shop-page .shop-hero-metrics > span {
    padding: 5px 7px;
}

/* Smaller Inventory cards and controls */
body.inventory-page .inventory-tabs a {
    min-height: 33px;
    padding: 5px 8px;
    font-size: 0.7rem;
}

body.inventory-page #equipped,
body.inventory-page #crafting-equipment,
body.inventory-page #equipment-sets,
body.inventory-page #storage,
body.inventory-page .crafted-inventory-section,
body.inventory-page .workshop-material-inventory {
    padding: 10px;
}

body.inventory-page .crafted-inventory-filter-bar,
body.inventory-page .inventory-filter-bar {
    padding: 7px;
}

body.inventory-page .crafted-inventory-filter-bar input,
body.inventory-page .crafted-inventory-filter-bar select,
body.inventory-page .inventory-filter-bar input,
body.inventory-page .inventory-filter-bar select {
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
}

body.inventory-page .crafted-inventory-list {
    gap: 7px;
}

body.inventory-page .crafted-inventory-card {
    gap: 8px;
    min-height: 78px;
    padding: 8px 10px;
}

body.inventory-page .crafted-inventory-info h3 {
    margin: 1px 0 3px;
    font-size: 0.92rem;
}

body.inventory-page .crafted-inventory-info p,
body.inventory-page .crafted-inventory-value span,
body.inventory-page .crafted-inventory-actions small {
    font-size: 0.68rem;
}

body.inventory-page .crafted-inventory-actions input,
body.inventory-page .crafted-inventory-actions select,
body.inventory-page .crafted-inventory-actions button {
    min-height: 32px;
}

body.inventory-page .workshop-material-inventory-grid {
    gap: 7px;
    margin-top: 9px;
}

body.inventory-page .workshop-material-inventory-card {
    padding: 9px 10px;
}

body.inventory-page .workshop-material-inventory-card h3 {
    margin: 1px 0 3px;
    font-size: 0.9rem;
}

body.inventory-page .workshop-material-inventory-card strong {
    font-size: 1.1rem;
}

/* Ranking boards wrap into rows instead of horizontal scrolling */
body.rankings-page .ranking-main-tabs {
    gap: 5px;
    margin-bottom: 5px;
}

body.rankings-page .ranking-main-tabs a {
    min-height: 31px;
}

body.rankings-page .ranking-tabs:not(.ranking-main-tabs) {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 8px;
    padding: 0;
    overflow: visible;
}

body.rankings-page .ranking-tabs:not(.ranking-main-tabs) a {
    display: inline-flex;
    min-width: 0;
    min-height: 29px;
    align-items: center;
    justify-content: center;
    padding: 4px 5px;
    overflow: hidden;
    font-size: 0.62rem;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: normal;
}

body.rankings-page .ranking-card {
    padding: 10px;
}

body.rankings-page .ranking-row {
    min-height: 39px;
    padding: 5px 10px;
}

body.rankings-page .ranking-profile-link {
    min-height: 32px;
}

/* Smaller Market workspace and quantity helpers */
body.market-page .auction-house-tabs a {
    min-height: 33px;
    padding: 5px 8px;
}

body.market-page .auction-house-main {
    padding: 9px;
}

body.market-page .market-asset-selector {
    margin-bottom: 8px;
    padding: 8px;
}

body.market-page .market-asset-button-grid {
    gap: 6px;
}

body.market-page .market-asset-button {
    min-height: 40px;
    padding: 6px 8px;
}

body.market-page .resource-market-header {
    padding: 9px;
}

body.market-page .resource-market-header > .auction-detail-header {
    padding-right: 38px;
}

body.market-page .market-refresh-button {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
}

body.market-page .auction-detail-header {
    gap: 8px;
    padding: 7px 0;
}

body.market-page .auction-detail-icon {
    width: 38px;
    height: 38px;
}

body.market-page .auction-detail-header h2 {
    font-size: 1.12rem;
}

body.market-page .auction-market-snapshot {
    gap: 6px;
}

body.market-page .auction-market-snapshot > div {
    min-height: 47px;
    padding: 6px 8px;
}

body.market-page .resource-order-columns {
    gap: 8px;
    margin-top: 8px;
}

body.market-page .resource-order-form-heading {
    padding: 8px 10px;
}

body.market-page .resource-order-form-heading h2 {
    font-size: 0.96rem;
}

body.market-page .resource-create-form {
    gap: 7px;
    padding: 9px;
}

body.market-page .resource-create-form label {
    gap: 4px;
    font-size: 0.67rem;
}

body.market-page .resource-create-form input,
body.market-page .resource-create-form select,
body.market-page .resource-create-form > button {
    min-height: 33px;
    padding-top: 5px;
    padding-bottom: 5px;
}

body.market-page .market-quantity-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

body.market-page .market-fill-quantity {
    min-width: 48px;
    min-height: 33px;
    padding: 5px 9px;
    border-color: rgba(245, 158, 11, 0.46);
    color: #fde68a;
    background: rgba(146, 64, 14, 0.16);
    font-size: 0.7rem;
    white-space: nowrap;
}

body.market-page .market-order-submit-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-self: end;
    gap: 6px;
}

body.market-page .market-order-submit-row > button {
    min-height: 33px;
}

body.market-page .resource-orderbook-action {
    grid-template-columns: minmax(58px, 1fr) auto auto;
}

body.market-page .crafted-market-buy-form .market-live-price {
    grid-column: 1 / -1;
}

body.market-page .resource-create-form .market-live-price {
    min-height: 0;
    padding: 5px 7px;
    font-size: 0.68rem;
}

body.market-page .resource-orderbook {
    margin: 0 8px 8px;
}

body.market-page .auction-column-heading {
    padding: 7px 9px;
}

body.market-page .resource-orderbook-row {
    min-height: 51px;
    padding: 6px 8px;
}

/* Compact layout on every Guild tab */
body.guild-page .guild-heading.card:not(.guild-hero) {
    margin-bottom: 8px;
    padding: 10px 12px;
}

body.guild-page .guild-heading.card:not(.guild-hero) h1 {
    font-size: 1.38rem;
}

body.guild-page .guild-badge {
    min-width: 145px;
    padding: 7px 9px;
}

body.guild-page .guild-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 8px;
    padding: 0;
    overflow: visible;
}

body.guild-page .guild-tabs a {
    min-width: 0;
    min-height: 31px;
    justify-content: center;
    padding: 5px 6px;
    overflow: hidden;
    font-size: 0.67rem;
    text-align: center;
    text-overflow: ellipsis;
}

body.guild-page .guild-panel,
body.guild-page .guild-overview-card {
    padding: 10px;
}

body.guild-page .guild-panel .character-section-title {
    margin-bottom: 7px;
    padding-bottom: 6px;
}

body.guild-page .guild-panel .character-section-title h2,
body.guild-page .guild-forum-heading h2 {
    font-size: 1rem;
}

body.guild-page .guild-bank-grid,
body.guild-page .guild-upgrade-list,
body.guild-page .guild-task-offer-grid,
body.guild-page .guild-goal-progress-grid {
    gap: 7px;
}

body.guild-page .guild-bank-grid div,
body.guild-page .guild-upgrade-card,
body.guild-page .guild-task-offer,
body.guild-page .guild-goal-resource {
    padding: 8px;
}

body.guild-page .guild-upgrade-card strong {
    font-size: 1rem;
}

body.guild-page .market-table th,
body.guild-page .market-table td,
body.guild-page .guild-contribution-table th,
body.guild-page .guild-contribution-table td {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.72rem;
}

body.guild-page .guild-form {
    gap: 8px;
}

body.guild-page .guild-form input,
body.guild-page .guild-form select,
body.guild-page .guild-form button {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

body.guild-page .guild-storage-filter-bar,
body.guild-page .guild-storage-product-filter-bar {
    gap: 7px;
    padding: 8px;
}

body.guild-page .guild-forum-row,
body.guild-page .guild-forum-post {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* Crystal Shop scaling and aligned Server Buff actions */
body.crystal-shop-page .shop-tabs a {
    min-height: 32px;
    padding: 5px 7px;
}

body.crystal-shop-page .shop-panel,
body.crystal-shop-page .referral-hero-card,
body.crystal-shop-page .referral-stat-card {
    padding: 10px;
}

body.crystal-shop-page .shop-package-grid {
    align-items: stretch;
    gap: 7px;
}

body.crystal-shop-page .shop-package-card {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 142px;
    height: 100%;
    padding: 9px;
}

body.crystal-shop-page .shop-package-card > div:first-child {
    align-self: start;
}

body.crystal-shop-page .shop-package-card form,
body.crystal-shop-page .shop-package-card .shop-paypal-checkout,
body.crystal-shop-page .shop-package-card > button {
    align-self: end;
    margin: 0;
}

body.crystal-shop-page .shop-package-card button {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

body.crystal-shop-page .shop-package-card strong {
    font-size: 1.02rem;
}

body.crystal-shop-page .shop-package-card small {
    margin-top: 4px;
    font-size: 0.7rem;
    line-height: 1.35;
}

body.crystal-shop-page #boosts .shop-package-grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

body.crystal-shop-page #boosts .shop-package-card form,
body.crystal-shop-page #boosts .shop-package-card form button {
    width: 100%;
}

@media (max-width: 1180px) {
    body.inventory-page .inventory-hero,
    body.market-page .auction-house-hero,
    body.rankings-page .ranking-hero,
    body.guild-page .guild-hero,
    body.crystal-shop-page .shop-hero {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    body.market-page .auction-house-hero-metrics,
    body.rankings-page .ranking-hero-metrics,
    body.guild-page .guild-hero-metrics,
    body.crystal-shop-page .shop-hero-metrics {
        grid-column: 1 / -1;
    }

    body.rankings-page .ranking-tabs:not(.ranking-main-tabs) {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    body.guild-page .guild-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.inventory-page .inventory-hero,
    body.market-page .auction-house-hero,
    body.rankings-page .ranking-hero,
    body.guild-page .guild-hero,
    body.crystal-shop-page .shop-hero {
        padding: 9px;
    }

    body.rankings-page .ranking-tabs:not(.ranking-main-tabs) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.rankings-page .ranking-main-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.guild-page .guild-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.market-page .resource-order-columns {
        grid-template-columns: 1fr;
    }

    body.crystal-shop-page .shop-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }
}

@media (max-width: 520px) {
    body.rankings-page .ranking-main-tabs,
    body.rankings-page .ranking-tabs:not(.ranking-main-tabs),
    body.guild-page .guild-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.market-page .market-order-submit-row {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    body.guild-page table.guild-member-table.mobile-card-table > tbody {
        display: grid;
        gap: 7px;
    }

    body.guild-page table.guild-member-table.mobile-card-table > tbody > tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin: 0;
        padding: 6px;
        overflow: visible;
        border-radius: 9px;
    }

    body.guild-page table.guild-member-table.mobile-card-table > tbody > tr > td {
        display: block;
        width: auto;
        min-width: 0;
        min-height: 42px;
        padding: 6px 7px;
        overflow: hidden;
        border: 1px solid rgba(55, 75, 104, 0.62);
        border-radius: 6px;
        background: rgba(7, 18, 32, 0.52);
        font-size: 0.68rem;
        line-height: 1.25;
    }

    body.guild-page table.guild-member-table.mobile-card-table > tbody > tr > td::before {
        margin-bottom: 2px;
        font-size: 0.54rem;
        line-height: 1.1;
    }

    body.guild-page table.guild-member-table.mobile-card-table > tbody > tr > td:nth-child(1) {
        grid-column: span 2;
        background: rgba(14, 116, 144, 0.1);
    }

    body.guild-page table.guild-member-table.mobile-card-table > tbody > tr > td:nth-child(2) {
        background: rgba(34, 197, 94, 0.06);
    }

    body.guild-page table.guild-member-table.mobile-card-table > tbody > tr > td:nth-child(n + 6) {
        font-variant-numeric: tabular-nums;
    }

    body.guild-page table.guild-member-table.mobile-card-table > tbody > tr > td:first-child a {
        color: #67e8f9;
        font-size: 0.78rem;
        font-weight: 900;
    }

    body.guild-page table.guild-member-table.mobile-card-table .guild-online-status,
    body.guild-page table.guild-member-table.mobile-card-table .current-role-summary-badge,
    body.guild-page table.guild-member-table.mobile-card-table .guild-tax-group-badge {
        max-width: 100%;
        font-size: 0.65rem;
    }
}

/* Rev. 0.5.48 prominent sidebar Patch Notes notice */
.side-logo .side-revision-button {
    position: relative;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 43px;
    margin: 11px 0 0;
    padding: 7px 9px;
    overflow: visible;
    border: 1px solid rgba(75, 123, 177, 0.42);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(19, 47, 80, 0.76), rgba(8, 21, 39, 0.92));
    color: #d9e8f7;
    text-align: left;
    text-decoration: none;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.side-logo .side-revision-button:hover,
.side-logo .side-revision-button:focus-visible {
    border-color: rgba(103, 232, 249, 0.68);
    background: linear-gradient(135deg, rgba(18, 69, 101, 0.82), rgba(8, 27, 48, 0.96));
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.11);
    transform: translateY(-1px);
}

.side-revision-icon {
    display: inline-grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid rgba(103, 232, 249, 0.42);
    border-radius: 8px;
    background: rgba(14, 116, 144, 0.16);
    color: #67e8f9;
    font-size: 0.84rem;
    line-height: 1;
}

.side-revision-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    line-height: 1.05;
}

.side-revision-copy > span {
    color: #eef7ff;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.025em;
}

.side-revision-copy strong {
    overflow: hidden;
    color: #87a6c8;
    font-size: 0.61rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-revision-count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    place-items: center;
    border: 1px solid rgba(254, 202, 202, 0.92);
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.62);
}

.side-revision-count[hidden] {
    display: none;
}

.side-logo .side-revision-button.has-unread {
    border-color: rgba(248, 113, 113, 0.75);
    background: linear-gradient(135deg, rgba(95, 25, 36, 0.76), rgba(34, 15, 28, 0.94));
    box-shadow: inset 3px 0 #ef4444, 0 0 15px rgba(239, 68, 68, 0.16);
}

.side-logo .side-revision-button.has-unread .side-revision-icon {
    border-color: rgba(252, 165, 165, 0.72);
    background: rgba(153, 27, 27, 0.34);
    color: #fecaca;
}

@media (prefers-reduced-motion: no-preference) {
    .side-logo .side-revision-button.has-unread .side-revision-count {
        animation: side-revision-notice-pulse 2.4s ease-in-out infinite;
    }
}

@keyframes side-revision-notice-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.48);
    }
    50% {
        box-shadow: 0 0 16px rgba(248, 113, 113, 0.86);
    }
}
.guild-tax-groups-note {
    margin-bottom: 1rem;
}

.guild-tax-group-create {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) repeat(2, minmax(130px, .65fr)) auto;
    align-items: end;
    gap: .7rem;
    margin-bottom: 1rem;
}

.guild-tax-group-create label,
.guild-tax-group-create button {
    margin: 0;
}

.guild-tax-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .8rem;
}

.guild-tax-group-card {
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--border-color, #28415e);
    border-radius: 10px;
    background: rgba(5, 17, 31, .42);
}

.guild-tax-group-card > form + form {
    margin-top: .55rem;
}

.guild-tax-rate-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.guild-tax-group-card-footer {
    margin-top: .2rem;
}

.guild-tax-assignment-form {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 210px;
}

.guild-tax-assignment-form select {
    min-width: 130px;
}

.guild-tax-effective-rate {
    display: block;
    white-space: nowrap;
}

.chat-mute-notice { padding: 9px 12px; border: 1px solid #a86d27; border-radius: 8px; background: #322316; color: #fde3b4; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; max-height: min(22vh, 160px); overflow-y: auto; }
.chat-mute-notice[hidden] { display: none !important; }
.chat-mute-notice > strong, .chat-mute-notice > span { display: block; }
.chat-mute-notice > strong { margin-bottom: 3px; }

/* Personal Character display configuration. Keep the launcher outside hideable content. */
#character-live-root [data-character-view-key][hidden],
#character-live-root .character-layout[hidden] { display: none !important; }
#character-live-root .character-layout.character-view-single { grid-template-columns: minmax(0, 1fr); }
.character-view-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.character-view-bar > span { font-size: .78rem; color: #94a3b8; }
.character-view-dialog { box-sizing: border-box; width: min(720px, calc(100% - 24px)); max-height: 88dvh; margin: auto; padding: 20px; overflow: auto; color: #e2e8f0; background: #0e1a2b; border: 1px solid #35536d; border-radius: 14px; box-shadow: 0 20px 80px #0009; }
.character-view-dialog::backdrop { background: #020817bd; }
.character-view-dialog form { margin: 0; }
.character-view-heading, .character-view-toolbar, .character-view-footer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.character-view-heading h2 { margin: 0; font-size: 1.2rem; }
.character-view-dialog p, .character-view-toolbar > span { color: #abc0d7; font-size: .82rem; line-height: 1.5; }
.character-view-toolbar { margin-bottom: 14px; justify-content: flex-start; }
.character-view-toolbar button { flex-shrink: 0; }
.character-view-options { display: grid; gap: 8px; }
.character-view-group, .character-view-choice { min-width: 0; border: 1px solid #294258; border-radius: 8px; background: #0a1624; }
.character-view-group > summary { padding: 10px 12px; cursor: pointer; }
.character-view-dialog label { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: #e2e8f0; font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: normal; cursor: pointer; }
.character-view-dialog input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; accent-color: #38bdf8; }
.character-view-choice > label { display: flex; padding: 10px 12px; }
.character-view-children { display: grid; gap: 6px; padding: 0 10px 10px; }
.character-view-dialog .character-view-muted { opacity: .5; }
.character-view-footer { position: sticky; bottom: -20px; background: #0e1a2b; padding: 10px 0 4px; margin-top: 8px; }
.character-view-footer > div { justify-content: flex-end; }
.character-view-status { margin: 0 0 8px; }
.character-view-dialog :focus-visible { outline: 2px solid #38bdf8; outline-offset: 3px; }
@media (max-width: 480px) {
    .character-view-dialog { padding: 14px; }
    .character-view-footer { bottom: -14px; }
    .character-view-heading h2 { font-size: 1.05rem; }
    .character-view-toolbar { align-items: flex-start; }
    .character-view-children { padding-left: 6px; padding-right: 6px; }
}

.guild-tax-group-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 100%;
    padding: 3px 8px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, .58);
    border-radius: 999px;
    background: rgba(14, 116, 144, .14);
    color: #a5f3fc;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guild-tax-group-badge.is-default {
    border-color: rgba(100, 116, 139, .65);
    background: rgba(51, 65, 85, .2);
    color: #94a3b8;
}

@media (max-width: 720px) {
    .guild-tax-group-create {
        grid-template-columns: 1fr;
    }

    .guild-tax-rate-fields {
        grid-template-columns: 1fr 1fr;
    }

    .guild-tax-assignment-form {
        min-width: 190px;
    }
}

/* Boss Auto Join quick controls above the Activity tracker. */
.right-status-bottom {
    display: grid;
    flex: 0 0 auto;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    pointer-events: auto;
}

.right-status-bottom .hourly-stats-panel {
    margin-top: 0;
}

.boss-auto-join-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    pointer-events: auto;
}

.boss-auto-join-quick[hidden] {
    display: none;
}

.boss-auto-join-toggle {
    display: grid;
    min-width: 0;
    min-height: 48px;
    padding: 7px 6px;
    border: 1px solid rgba(248, 113, 113, 0.58);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.38), rgba(69, 10, 10, 0.3));
    color: #fecaca;
    line-height: 1.05;
    text-align: center;
}

.boss-auto-join-toggle strong {
    overflow: hidden;
    color: #f8fafc;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.boss-auto-join-toggle span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 3px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.boss-auto-join-toggle i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 7px currentColor;
}

.boss-auto-join-toggle.is-on {
    border-color: rgba(74, 222, 128, 0.68);
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.5), rgba(5, 46, 22, 0.36));
    color: #86efac;
}

.boss-auto-join-toggle:hover:not(:disabled),
.boss-auto-join-toggle:focus-visible {
    border-color: currentColor;
    filter: brightness(1.15);
}

.boss-auto-join-toggle.is-loading {
    opacity: 0.58;
}

@media (max-width: 1540px) and (min-width: 801px) {
    .right-status-rail .active-buffs-panel {
        grid-column: 1;
        grid-row: 1;
    }

    .right-status-rail .right-status-bottom {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 800px) {
    .right-status-rail {
        grid-template-columns: 1fr;
    }

    .right-status-rail .active-buffs-panel,
    .right-status-rail .right-status-bottom {
        grid-column: 1;
        grid-row: auto;
    }
}
/* Catch-up progression and one-time bound equipment milestones. */
.catchup-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 1rem; align-items: center; }
.catchup-level-summary { display: grid; gap: .45rem; padding: .9rem; border: 1px solid var(--border-color); border-radius: 10px; background: rgba(20, 184, 166, .08); }
.catchup-level-summary strong { font-size: 1.25rem; }
.catchup-bonus-grid, .catchup-milestone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.catchup-bonus-grid article, .catchup-milestone { display: grid; gap: .45rem; padding: .85rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--panel-soft); }
.catchup-bonus-grid span, .catchup-milestone > span { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; }
.catchup-bonus-grid strong { color: #5eead4; font-size: 1.2rem; }
.catchup-milestone.is-ready { border-color: rgba(34, 197, 94, .65); }
.catchup-milestone.is-claimed { border-color: rgba(96, 165, 250, .55); }
.catchup-milestone.is-claimed > strong { color: #93c5fd; }
.inventory-bound-badge { display: inline-flex; width: fit-content; margin-top: .2rem; padding: .08rem .38rem; border: 1px solid rgba(250, 204, 21, .45); border-radius: 999px; color: #fde68a; background: rgba(146, 64, 14, .3); font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
@media (max-width: 900px) { .catchup-hero, .catchup-bonus-grid, .catchup-milestone-grid { grid-template-columns: 1fr; } }
+
.server-catchup-card > .character-section-title > strong { color: #5eead4; }
.server-catchup-progress-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; margin: .9rem 0; }
.server-catchup-progress-grid article { display: grid; gap: .25rem; padding: .75rem; border: 1px solid var(--border-color); border-radius: 9px; background: var(--panel-soft); }
.server-catchup-progress-grid article.is-focus { border-color: #2dd4bf; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .22); }
.server-catchup-progress-grid span, .server-catchup-progress-grid small { color: var(--text-muted); }
.server-catchup-focus-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.server-catchup-focus-form label { display: inline-flex; gap: .35rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--panel-soft); }

.server-catchup-modal { position: fixed; inset: 0; z-index: 340; display: grid; place-items: center; padding: 24px; }
.server-catchup-modal[hidden] { display: none; }
.server-catchup-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 23, .84); backdrop-filter: blur(4px); }
.server-catchup-modal-panel { position: relative; width: min(760px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 1.25rem; border: 1px solid rgba(45, 212, 191, .6); border-radius: 14px; background: var(--panel-bg, #101c2e); box-shadow: 0 22px 70px rgba(0, 0, 0, .55); }
.server-catchup-modal-panel h2 { margin: .3rem 0 .55rem; }
.server-catchup-focus-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin: 1rem 0; }
.server-catchup-focus-options label { display: flex; gap: .5rem; align-items: flex-start; min-width: 0; padding: .75rem; border: 1px solid var(--border-color); border-radius: 9px; background: var(--panel-soft); cursor: pointer; }
.server-catchup-focus-options label:has(input:checked) { border-color: #2dd4bf; background: rgba(20, 184, 166, .12); }
.server-catchup-focus-options span { display: grid; gap: .2rem; min-width: 0; }
.server-catchup-focus-options small { color: var(--text-muted); line-height: 1.3; }
.server-catchup-modal-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .8rem; }
@media (max-width: 900px) {
    .server-catchup-progress-grid, .server-catchup-focus-options { grid-template-columns: 1fr; }
    .server-catchup-modal { padding: 12px; }
    .server-catchup-modal-panel { max-height: calc(100vh - 24px); }
}

/* Rev. 0.5.75: optional per-device Web Push controls. */
.mobile-push-card {
    margin: 0 0 1rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color, #29435f);
    border-radius: 0.65rem;
    background: rgba(8, 24, 42, 0.62);
}
.mobile-push-card-head,
.mobile-push-actions,
.mobile-push-status-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.mobile-push-card-head {
    justify-content: space-between;
    margin-bottom: 0.45rem;
}
.mobile-push-card-head h3 {
    margin: 0;
}
.mobile-push-state {
    padding: 0.25rem 0.55rem;
    border: 1px solid #49627d;
    border-radius: 999px;
    color: #b8c9dc;
    font-size: 0.78rem;
    font-weight: 700;
}
.mobile-push-state[data-state="active"] {
    border-color: #1aa66f;
    color: #55e7a7;
}
.mobile-push-state[data-state="blocked"] {
    border-color: #c44e5a;
    color: #ff98a2;
}
.mobile-push-status-row {
    justify-content: space-between;
    margin: 0.55rem 0;
    color: #9db1c7;
    font-size: 0.82rem;
}
.mobile-push-actions button {
    flex: 1 1 9rem;
}
.mobile-push-feedback {
    min-height: 1.25rem;
    margin: 0.55rem 0 0;
    color: #9db1c7;
    font-size: 0.82rem;
}
.mobile-push-feedback[data-state="success"] { color: #55e7a7; }
.mobile-push-feedback[data-state="warning"] { color: #ffd166; }
.mobile-push-feedback[data-state="error"] { color: #ff98a2; }
.mobile-push-install-hint {
    margin: 0.45rem 0 0;
    color: #c4d4e6;
    font-size: 0.82rem;
}
@media (max-width: 760px) {
    .mobile-push-card {
        padding: 0.7rem;
    }
    .mobile-push-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .mobile-push-actions button:first-child:last-child,
    .mobile-push-actions button[data-mobile-push-enable] {
        grid-column: 1 / -1;
    }
}