body { background: #0b0907 !important; }
        .content-wrapper { background: transparent !important; }

        .guild-page-wrapper {
            width: 100%;
            margin: 0 auto;
        }

        /* Page header */
        .guild-page-header {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px 22px;
            margin-bottom: 22px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(33,24,17,.96), rgba(20,15,10,.92));
            border: 1px solid rgba(201,155,82,.3);
            box-shadow: 0 10px 30px rgba(0,0,0,.45);
        }
        .guild-page-icon {
            width: 52px; height: 52px;
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #be8a39, #d8b06a);
            color: #1a120a;
            font-size: 1.6rem;
        }
        .guild-page-title {
            font-size: 1.3rem;
            font-weight: 800;
            color: #f0d39e;
            line-height: 1.2;
        }
        .guild-page-sub {
            font-size: .82rem;
            color: #c5b293;
            margin-top: 2px;
        }

        /* Character selector */
        .char-switch-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 22px;
        }
        .char-switch-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 999px;
            border: 1px solid rgba(201,155,82,.25);
            background: rgba(33,24,17,.85);
            color: #c5b293;
            font-size: .82rem;
            font-weight: 700;
            text-decoration: none;
            transition: all .2s;
        }
        .char-switch-chip:hover {
            border-color: #d8b06a;
            color: #f4ead7;
        }
        .char-switch-chip.active {
            background: linear-gradient(135deg, #be8a39, #d8b06a);
            border-color: #d8b06a;
            color: #1a120a;
            box-shadow: 0 4px 14px rgba(216,176,106,.3);
        }
        .char-switch-chip i { font-size: 1rem; }

        /* Stat hero cards (3 ใบใหญ่: ชื่อสำนัก / เลเวล / แต้ม) */
        .guild-hero-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 16px;
            margin-bottom: 24px;
        }
        @media (max-width: 768px) {
            .guild-hero-grid { grid-template-columns: 1fr; }
        }
        .guild-hero-card {
            position: relative;
            padding: 26px 26px 22px;
            border-radius: 20px;
            background:
                radial-gradient(circle at 18% -10%, rgba(255,215,140,.28), transparent 55%),
                linear-gradient(160deg, #1c150b 0%, #2a1d0f 55%, #14100a 100%);
            border: 2px solid #d8b06a;
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.18),
                inset 0 0 28px rgba(216,176,106,.12),
                0 0 22px rgba(216,176,106,.32),
                0 16px 38px rgba(0,0,0,.55);
            overflow: hidden;
            transition: transform .25s, box-shadow .25s;
        }
        .guild-hero-card:hover {
            transform: translateY(-3px);
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.24),
                inset 0 0 32px rgba(216,176,106,.18),
                0 0 34px rgba(216,176,106,.55),
                0 22px 48px rgba(0,0,0,.6);
        }
        /* inner gold ornament frame */
        .guild-hero-card::after {
            content: '';
            position: absolute;
            inset: 7px;
            border: 1px solid rgba(255,224,170,.45);
            border-radius: 14px;
            pointer-events: none;
            box-shadow: inset 0 0 14px rgba(216,176,106,.18);
        }
        /* big watermark icon at top-right */
        .guild-hero-card .guild-hero-watermark {
            position: absolute;
            top: 14px;
            right: 16px;
            font-size: 3.4rem;
            line-height: 1;
            color: rgba(255,215,140,.18);
            text-shadow: 0 0 18px rgba(216,176,106,.35);
            pointer-events: none;
            z-index: 1;
        }
        .guild-hero-label {
            font-size: .76rem;
            color: #e6c98a;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 12px;
            border-radius: 999px;
            background: rgba(0,0,0,.28);
            border: 1px solid rgba(216,176,106,.45);
            box-shadow: inset 0 1px 0 rgba(255,232,180,.12);
        }
        .guild-hero-label i {
            color: #fbbf24;
            font-size: 1rem;
        }
        .guild-hero-value {
            font-weight: 900;
            line-height: 1.05;
            background: linear-gradient(180deg, #fff7d6 0%, #f0d39e 35%, #d8b06a 70%, #b07a2c 100%);
            -webkit-background-clip: text;
            color: transparent;
            position: relative;
            z-index: 2;
            word-break: break-word;
            text-shadow:
                0 0 20px rgba(216,176,106,.35),
                0 2px 0 rgba(0,0,0,.25);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
        }
        .guild-hero-card.is-name .guild-hero-value {
            font-size: 2.1rem;
        }
        .guild-hero-card.is-level .guild-hero-value,
        .guild-hero-card.is-points .guild-hero-value {
            font-size: 3rem;
            letter-spacing: .5px;
        }
        .guild-hero-sub {
            margin-top: 10px;
            font-size: .82rem;
            color: #e9d4a8;
            position: relative;
            z-index: 2;
            font-weight: 600;
        }
        .guild-hero-sub i {
            color: #fbbf24;
            margin-right: 5px;
        }

        /* per-card accent variants (เปลี่ยน glow/watermark สี) */
        .guild-hero-card.is-name {
            background:
                radial-gradient(circle at 18% -10%, rgba(120,255,200,.18), transparent 55%),
                linear-gradient(160deg, #1c150b 0%, #2a1d0f 55%, #14100a 100%);
        }
        .guild-hero-card.is-name .guild-hero-watermark { color: rgba(120,220,170,.22); }
        .guild-hero-card.is-name .guild-hero-label i { color: #34d399; }

        .guild-hero-card.is-level {
            background:
                radial-gradient(circle at 82% -10%, rgba(255,191,90,.28), transparent 55%),
                linear-gradient(160deg, #20150a 0%, #2e1f0f 55%, #14100a 100%);
        }
        .guild-hero-card.is-level .guild-hero-watermark { color: rgba(255,200,120,.22); }
        .guild-hero-card.is-level .guild-hero-label i { color: #fbbf24; }

        .guild-hero-card.is-points {
            background:
                radial-gradient(circle at 82% -10%, rgba(255,128,128,.24), transparent 55%),
                linear-gradient(160deg, #20120a 0%, #2c1810 55%, #14100a 100%);
        }
        .guild-hero-card.is-points .guild-hero-watermark { color: rgba(248,113,113,.25); }
        .guild-hero-card.is-points .guild-hero-label i { color: #f87171; }

        .guild-dashboard-tabs.nav-tabs {
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(216,176,106,.32) !important;
            border-bottom: 1px solid rgba(216,176,106,.32) !important;
            background:
                linear-gradient(135deg, rgba(255,232,180,.1), transparent 26%),
                radial-gradient(circle at 12% -35%, rgba(216,176,106,.24), transparent 50%),
                linear-gradient(180deg, rgba(35,24,13,.92), rgba(13,10,7,.92));
            border-radius: 18px;
            padding: 7px;
            margin: 0 0 20px;
            overflow-x: auto;
            list-style: none;
            scrollbar-width: thin;
            scrollbar-color: rgba(216,176,106,.45) rgba(0,0,0,.18);
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.07),
                inset 0 -18px 30px rgba(0,0,0,.22),
                0 10px 24px rgba(0,0,0,.38);
        }
        .guild-dashboard-tabs .nav-item {
            flex: 0 0 auto;
        }
        .guild-dashboard-tabs .nav-link {
            position: relative;
            isolation: isolate;
            min-height: 44px;
            border: 1px solid rgba(216,176,106,.24) !important;
            border-radius: 14px !important;
            color: #d8c2a0;
            background:
                linear-gradient(180deg, rgba(255,232,180,.06), rgba(0,0,0,.06)),
                rgba(0,0,0,.28) !important;
            font-size: .84rem;
            font-weight: 900;
            letter-spacing: .35px;
            padding: 10px 16px;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            overflow: hidden;
            box-shadow:
                inset 0 1px 0 rgba(255,232,180,.08),
                0 4px 12px rgba(0,0,0,.22);
            transition: background .18s, color .18s, box-shadow .18s, transform .18s, border-color .18s;
        }
        .guild-dashboard-tabs .nav-link::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            opacity: 0;
            background:
                radial-gradient(circle at 18% 0%, rgba(255,247,214,.55), transparent 34%),
                linear-gradient(135deg, #fff0bc 0%, #d8b06a 46%, #9f6f27 100%);
            transition: opacity .18s;
        }
        .guild-dashboard-tabs .nav-link i {
            width: 24px;
            height: 24px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #f0d39e;
            background: rgba(216,176,106,.12);
            border: 1px solid rgba(216,176,106,.28);
            font-size: 1rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        }
        .guild-dashboard-tabs .nav-link:hover {
            color: #f0d39e;
            border-color: rgba(216,176,106,.48) !important;
            background:
                linear-gradient(180deg, rgba(216,176,106,.16), rgba(0,0,0,.04)),
                rgba(0,0,0,.26) !important;
            transform: translateY(-1px);
            box-shadow:
                inset 0 1px 0 rgba(255,232,180,.12),
                0 6px 16px rgba(0,0,0,.28),
                0 0 16px rgba(216,176,106,.16);
        }
        .guild-dashboard-tabs .nav-link.active {
            color: #1a120a !important;
            border-color: rgba(255,232,180,.78) !important;
            background: transparent !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.38),
                inset 0 -10px 18px rgba(123,79,22,.22),
                0 0 0 1px rgba(216,176,106,.28),
                0 0 22px rgba(216,176,106,.42),
                0 8px 18px rgba(0,0,0,.34);
        }
        .guild-dashboard-tabs .nav-link.active::before {
            opacity: 1;
        }
        .guild-dashboard-tabs .nav-link.active i {
            color: #1a120a;
            background: rgba(255,255,255,.3);
            border-color: rgba(80,50,18,.2);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
        }
        .guild-dashboard-tabs .nav-link:focus-visible {
            outline: 2px solid rgba(255,232,180,.68);
            outline-offset: 2px;
        }
        .guild-dashboard-tabs .history-count {
            min-width: 24px;
            padding: 1px 8px;
            border-radius: 999px;
            background: rgba(0,0,0,.36);
            color: #fbbf24;
            font-size: .68rem;
            font-weight: 900;
            text-align: center;
            border: 1px solid rgba(216,176,106,.22);
        }
        .guild-dashboard-tabs .nav-link.active .history-count {
            color: #1a120a;
            background: rgba(255,255,255,.36);
            border-color: rgba(80,50,18,.16);
        }
        .guild-dashboard-tab-content {
            margin-top: 0;
        }
        .guild-history-source-tabs.nav-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0 0 14px;
            border: 0 !important;
            padding: 8px;
            border-radius: 14px;
            background: rgba(0,0,0,.22);
            box-shadow: inset 0 0 0 1px rgba(216,176,106,.14);
        }
        .guild-history-source-tabs .nav-link {
            border: 1px solid rgba(216,176,106,.24) !important;
            border-radius: 999px !important;
            color: #c5b293;
            background:
                linear-gradient(180deg, rgba(255,232,180,.04), rgba(0,0,0,.08)),
                rgba(0,0,0,.26) !important;
            font-size: .76rem;
            font-weight: 900;
            padding: 8px 13px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            box-shadow: inset 0 1px 0 rgba(255,232,180,.06);
            transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
        }
        .guild-history-source-tabs .nav-link:hover {
            color: #f0d39e;
            border-color: rgba(216,176,106,.45) !important;
            transform: translateY(-1px);
        }
        .guild-history-source-tabs .nav-link.active {
            color: #1a120a !important;
            border-color: rgba(255,232,180,.72) !important;
            background: linear-gradient(135deg, #f0d39e, #d8b06a 55%, #be8a39) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.32),
                0 0 16px rgba(216,176,106,.28);
        }
        .guild-history-source-tabs .history-count {
            min-width: 22px;
            padding: 1px 7px;
            border-radius: 999px;
            background: rgba(0,0,0,.32);
            color: #fbbf24;
            font-size: .68rem;
            font-weight: 900;
            text-align: center;
        }
        .guild-history-source-tabs .nav-link.active .history-count {
            color: #1a120a;
            background: rgba(255,255,255,.34);
        }
        @media (max-width: 576px) {
            .guild-dashboard-tabs.nav-tabs {
                padding: 6px;
                gap: 6px;
            }
            .guild-dashboard-tabs .nav-link {
                min-height: 40px;
                padding: 8px 12px;
                font-size: .78rem;
            }
            .guild-dashboard-tabs .nav-link i {
                width: 22px;
                height: 22px;
                border-radius: 8px;
            }
            .guild-history-source-tabs.nav-pills {
                flex-wrap: nowrap;
                overflow-x: auto;
            }
            .guild-history-source-tabs .nav-link {
                flex: 0 0 auto;
            }
        }

        /* Stat band — กลุ่มการ์ดแต้ม / โบนัส (เล็กกว่า hero card) */
        .stat-band {
            margin-bottom: 22px;
        }
        .stat-band-title {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #f0d39e;
            font-size: .92rem;
            font-weight: 800;
            letter-spacing: .5px;
            margin: 0 4px 10px;
        }
        .stat-band-title .stat-band-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(216,176,106,.4), transparent);
        }
        .stat-band-title .stat-band-meta {
            font-size: .7rem;
            font-weight: 700;
            color: #c5b293;
            background: rgba(0,0,0,.32);
            border: 1px solid rgba(216,176,106,.28);
            border-radius: 999px;
            padding: 3px 10px;
            letter-spacing: .4px;
        }
        .stat-band-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }
        @media (max-width: 768px) {
            .stat-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        .stat-band-grid.is-source-points {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        @media (max-width: 768px) {
            .stat-band-grid.is-source-points { grid-template-columns: repeat(1, minmax(0, 1fr)); }
        }
        .stat-mini-card {
            position: relative;
            padding: 14px 16px;
            border-radius: 14px;
            background: linear-gradient(160deg, #1c150b 0%, #261a0e 60%, #14100a 100%);
            border: 1.5px solid rgba(216,176,106,.55);
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.1),
                0 6px 16px rgba(0,0,0,.45),
                0 0 12px rgba(216,176,106,.18);
            overflow: hidden;
            transition: transform .2s, box-shadow .2s;
        }
        .stat-mini-card:hover {
            transform: translateY(-2px);
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.18),
                0 10px 22px rgba(0,0,0,.5),
                0 0 18px rgba(216,176,106,.32);
        }
        .stat-mini-head {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .stat-mini-icon {
            width: 30px; height: 30px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            background: linear-gradient(135deg, rgba(216,176,106,.32), rgba(190,138,57,.2));
            border: 1px solid rgba(216,176,106,.45);
            color: #f0d39e;
        }
        .stat-mini-label {
            font-size: .76rem;
            color: #d8b06a;
            font-weight: 800;
            letter-spacing: .6px;
            text-transform: uppercase;
        }
        .stat-mini-value {
            font-size: 1.55rem;
            font-weight: 900;
            line-height: 1.1;
            background: linear-gradient(180deg, #fff7d6 0%, #f0d39e 50%, #be8a39 100%);
            -webkit-background-clip: text;
            color: transparent;
            text-shadow: 0 0 14px rgba(216,176,106,.28);
        }

        /* per-card accent */
        .stat-mini-card.accent-emerald .stat-mini-icon { color: #34d399; border-color: rgba(52,211,153,.45); }
        .stat-mini-card.accent-emerald               { box-shadow: inset 0 0 0 1px rgba(255,232,180,.1), 0 6px 16px rgba(0,0,0,.45), 0 0 14px rgba(52,211,153,.18); }
        .stat-mini-card.accent-red .stat-mini-icon     { color: #f87171; border-color: rgba(248,113,113,.45); }
        .stat-mini-card.accent-red                   { box-shadow: inset 0 0 0 1px rgba(255,232,180,.1), 0 6px 16px rgba(0,0,0,.45), 0 0 14px rgba(248,113,113,.18); }
        .stat-mini-card.accent-amber .stat-mini-icon   { color: #fbbf24; border-color: rgba(251,191,36,.5); }
        .stat-mini-card.accent-amber                 { box-shadow: inset 0 0 0 1px rgba(255,232,180,.1), 0 6px 16px rgba(0,0,0,.45), 0 0 14px rgba(251,191,36,.2); }
        .stat-mini-card.accent-blue .stat-mini-icon    { color: #60a5fa; border-color: rgba(96,165,250,.45); }
        .stat-mini-card.accent-blue                  { box-shadow: inset 0 0 0 1px rgba(255,232,180,.1), 0 6px 16px rgba(0,0,0,.45), 0 0 14px rgba(96,165,250,.18); }

        .guild-point-history-card {
            margin: 0 0 22px;
            padding: 16px;
            border-radius: 16px;
            background:
                radial-gradient(circle at 88% -20%, rgba(216,176,106,.2), transparent 44%),
                linear-gradient(160deg, rgba(28,21,11,.94), rgba(20,16,10,.96));
            border: 1px solid rgba(216,176,106,.42);
            box-shadow: inset 0 0 0 1px rgba(255,232,180,.08), 0 8px 22px rgba(0,0,0,.42);
        }
        .guild-point-history-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }
        .guild-point-history-title {
            color: #f0d39e;
            font-size: .95rem;
            font-weight: 900;
            letter-spacing: .45px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .guild-point-history-title i { color: #fbbf24; }
        .guild-point-history-subtitle {
            color: #a58a66;
            font-size: .74rem;
            font-weight: 700;
            margin-top: 2px;
        }
        .guild-point-history-count {
            color: #f0d39e;
            border: 1px solid rgba(216,176,106,.35);
            background: rgba(0,0,0,.28);
            border-radius: 999px;
            padding: 4px 10px;
            font-size: .72rem;
            font-weight: 800;
            white-space: nowrap;
        }
        .guild-point-history-empty {
            color: #c5b293;
            border: 1px dashed rgba(216,176,106,.35);
            border-radius: 12px;
            padding: 14px;
            background: rgba(0,0,0,.2);
            font-size: .82rem;
            font-weight: 700;
        }
        .guild-point-history-table-wrap {
            overflow-x: auto;
            border-radius: 12px;
            border: 1px solid rgba(216,176,106,.25);
        }
        .guild-point-history-table {
            width: 100%;
            min-width: 640px;
            border-collapse: collapse;
            margin: 0;
            background: rgba(0,0,0,.18);
        }
        .guild-point-history-table th,
        .guild-point-history-table td {
            padding: 10px 12px;
            border-bottom: 1px solid rgba(216,176,106,.16);
            vertical-align: middle;
        }
        .guild-point-history-table th {
            color: #d8b06a;
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .55px;
            font-weight: 900;
            background: rgba(0,0,0,.22);
        }
        .guild-point-history-table td {
            color: #ead9bd;
            font-size: .8rem;
            font-weight: 700;
        }
        .guild-point-history-table tbody tr:last-child td { border-bottom: 0; }
        .guild-point-history-source {
            color: #34d399;
            font-weight: 900;
        }
        .guild-point-history-points {
            color: #fbbf24;
            font-weight: 900;
        }

        /* Max-level rule icon — ปุ่มเล็กในกรอบ hero card Lv.7 (เปิด modal) */
        .hero-rule-btn {
            position: absolute;
            bottom: 12px;
            right: 12px;
            z-index: 3;
            width: 34px; height: 34px;
            border-radius: 10px;
            border: 1.5px solid rgba(255,224,170,.55);
            background: linear-gradient(135deg, rgba(190,138,57,.85), rgba(216,176,106,.75));
            color: #1a120a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            cursor: pointer;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.2),
                0 0 12px rgba(251,191,36,.4),
                0 4px 10px rgba(0,0,0,.4);
            transition: transform .15s, box-shadow .15s;
        }
        .hero-rule-btn:hover {
            transform: translateY(-2px);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.25),
                0 0 16px rgba(251,191,36,.55),
                0 6px 14px rgba(0,0,0,.5);
        }
        .hero-rule-btn.is-warning {
            background: linear-gradient(135deg, #b91c1c, #f87171);
            color: #fff;
            border-color: rgba(255,200,200,.55);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.18),
                0 0 14px rgba(248,113,113,.55),
                0 4px 10px rgba(0,0,0,.4);
            animation: rulePulse 1.6s ease-in-out infinite;
        }
        @keyframes rulePulse {
            0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 12px rgba(248,113,113,.45), 0 4px 10px rgba(0,0,0,.4); }
            50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 22px rgba(248,113,113,.75), 0 4px 14px rgba(0,0,0,.5); }
        }

        /* Level-up panel — อัปเลเวลสำนัก */
        .level-up-panel {
            position: relative;
            border-radius: 18px;
            padding: 22px 22px 18px;
            margin-bottom: 22px;
            background:
                radial-gradient(circle at 15% -10%, rgba(255,215,140,.18), transparent 55%),
                linear-gradient(160deg, #1c150b 0%, #2a1d0f 55%, #14100a 100%);
            border: 2px solid #d8b06a;
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.16),
                0 0 22px rgba(216,176,106,.28),
                0 14px 36px rgba(0,0,0,.5);
            overflow: hidden;
        }
        .level-up-panel.is-max {
            border-color: #fbbf24;
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.18),
                0 0 26px rgba(251,191,36,.4),
                0 14px 36px rgba(0,0,0,.55);
        }
        .level-up-head {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }
        .level-up-icon {
            width: 48px; height: 48px;
            border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #be8a39, #fbbf24);
            color: #1a120a;
            font-size: 1.5rem;
            box-shadow: 0 4px 12px rgba(216,176,106,.35);
        }
        .level-up-title {
            font-size: 1.05rem;
            font-weight: 900;
            background: linear-gradient(90deg, #fff7d6, #d8b06a);
            -webkit-background-clip: text;
            color: transparent;
            margin: 0;
        }
        .level-up-sub {
            font-size: .76rem;
            color: #c5b293;
            font-weight: 700;
            margin-top: 2px;
        }

        .level-up-flow {
            display: flex;
            align-items: center;
            gap: 14px;
            background: rgba(0,0,0,.32);
            border: 1px solid rgba(216,176,106,.3);
            border-radius: 12px;
            padding: 14px 18px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }
        .level-pill {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 8px 18px;
            border-radius: 10px;
            background: linear-gradient(160deg, #211508, #14100a);
            border: 1.5px solid rgba(216,176,106,.45);
            min-width: 90px;
        }
        .level-pill.current { border-color: rgba(201,155,82,.6); }
        .level-pill.next {
            border-color: #fbbf24;
            background: linear-gradient(160deg, #2b1d0f, #15110a);
            box-shadow: 0 0 14px rgba(251,191,36,.25);
        }
        .level-pill .level-pill-label {
            font-size: .62rem;
            font-weight: 800;
            color: #a08060;
            letter-spacing: .6px;
            text-transform: uppercase;
        }
        .level-pill .level-pill-value {
            font-size: 1.55rem;
            font-weight: 900;
            background: linear-gradient(180deg, #fff7d6, #d8b06a);
            -webkit-background-clip: text;
            color: transparent;
            line-height: 1.1;
        }
        .level-pill.current .level-pill-value {
            background: linear-gradient(180deg, #f4ead7, #c5b293);
            -webkit-background-clip: text;
            color: transparent;
        }
        .level-up-arrow {
            color: #fbbf24;
            font-size: 1.8rem;
        }

        .level-up-gp-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }
        @media (max-width: 768px) { .level-up-gp-grid { grid-template-columns: 1fr; } }
        .level-up-gp-stat {
            background: rgba(0,0,0,.32);
            border: 1px solid rgba(216,176,106,.3);
            border-radius: 10px;
            padding: 10px 14px;
        }
        .level-up-gp-stat .gp-stat-label {
            font-size: .66rem;
            color: #a08060;
            font-weight: 800;
            letter-spacing: .5px;
            text-transform: uppercase;
        }
        .level-up-gp-stat .gp-stat-value {
            font-size: 1.15rem;
            font-weight: 800;
            color: #f0d39e;
            margin-top: 4px;
        }
        .level-up-gp-stat.current .gp-stat-value { color: #fbbf24; }
        .level-up-gp-stat.required .gp-stat-value { color: #f4ead7; }
        .level-up-gp-stat.short .gp-stat-value { color: #f87171; }
        .level-up-gp-stat.short.is-enough .gp-stat-value { color: #34d399; }

        .level-up-progress {
            position: relative;
            height: 10px;
            background: rgba(0,0,0,.5);
            border: 1px solid rgba(216,176,106,.28);
            border-radius: 999px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .level-up-progress-fill {
            position: absolute; inset: 0;
            width: 0%;
            background: linear-gradient(90deg, #be8a39, #fbbf24 60%, #fff7d6);
            border-radius: 999px;
            box-shadow: 0 0 10px rgba(251,191,36,.45);
            transition: width .4s ease;
        }
        .level-up-progress-fill.is-ready {
            background: linear-gradient(90deg, #34d399, #86efac);
            box-shadow: 0 0 12px rgba(52,211,153,.5);
        }

        /* ─── อัปเลเวลสำนัก (compact 4-layer redesign) ─── */
        .lvup {
            position: relative;
            padding: 14px 18px;
            margin-bottom: 22px;
            border-radius: 16px;
            background: linear-gradient(160deg, #1c150b 0%, #25180d 60%, #14100a 100%);
            border: 1.5px solid #d8b06a;
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.12),
                0 0 18px rgba(216,176,106,.22),
                0 10px 26px rgba(0,0,0,.45);
        }
        .lvup.is-max {
            border-color: #fbbf24;
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.16),
                0 0 22px rgba(251,191,36,.32),
                0 10px 26px rgba(0,0,0,.5);
        }

        /* 1. HEADER */
        .lvup-head {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .lvup-title {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 1rem;
            font-weight: 900;
            background: linear-gradient(90deg, #fff7d6, #d8b06a);
            -webkit-background-clip: text;
            color: transparent;
        }
        .lvup-title i {
            font-size: 1.25rem;
            color: #fbbf24;
            -webkit-text-fill-color: #fbbf24;
        }
        .lvup-transition {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            border-radius: 999px;
            background: rgba(0,0,0,.4);
            border: 1px solid rgba(216,176,106,.45);
            font-weight: 900;
            font-size: .92rem;
            white-space: nowrap;
        }
        .lvup-lv-from { color: #c5b293; }
        .lvup-transition > i { color: #fbbf24; font-size: 1.05rem; }
        .lvup-lv-to {
            background: linear-gradient(180deg, #fff7d6, #d8b06a);
            -webkit-background-clip: text;
            color: transparent;
        }
        .lvup-lv-desc {
            margin-left: 4px;
            font-size: .72rem;
            color: #a08060;
            font-weight: 700;
        }

        /* Compact notice (Lv.7 maintenance warning / max-level rule) */
        .lvup-note {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            margin-bottom: 10px;
            padding: 7px 12px;
            border-radius: 9px;
            background: rgba(251,191,36,.08);
            border: 1px solid rgba(251,191,36,.32);
            color: #fde68a;
            font-size: .78rem;
            font-weight: 600;
            line-height: 1.45;
        }
        .lvup-note i { color: #fbbf24; font-size: 1rem; margin-top: 1px; flex: 0 0 auto; }
        .lvup-note strong { color: #fbbf24; font-weight: 900; }

        /* 2. SUMMARY (single row: GP have/need + bar + status) */
        .lvup-summary {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(0,0,0,.32);
            border: 1px solid rgba(216,176,106,.3);
        }
        .lvup-gp {
            display: inline-flex;
            align-items: baseline;
            gap: 3px;
            font-weight: 900;
            font-size: .95rem;
            line-height: 1.1;
            white-space: nowrap;
        }
        .lvup-gp-have {
            font-size: 1.5rem;
            line-height: 1;
        }
        .lvup-gp-have.is-pass { color: #34d399; }
        .lvup-gp-have.is-fail { color: #fbbf24; }
        .lvup-gp-sep { color: #6a5040; font-weight: 600; margin: 0 2px; }
        .lvup-gp-need { color: #f4ead7; }
        .lvup-gp-label {
            margin-left: 5px;
            font-size: .7rem;
            color: #a08060;
            font-weight: 800;
            letter-spacing: .6px;
            text-transform: uppercase;
        }
        .lvup-bar {
            position: relative;
            flex: 1;
            min-width: 140px;
            height: 8px;
            background: rgba(0,0,0,.55);
            border: 1px solid rgba(216,176,106,.28);
            border-radius: 999px;
            overflow: hidden;
        }
        .lvup-bar-fill {
            position: absolute; inset: 0;
            width: 0%;
            background: linear-gradient(90deg, #be8a39, #fbbf24 60%, #fff7d6);
            border-radius: 999px;
            box-shadow: 0 0 8px rgba(251,191,36,.4);
            transition: width .4s ease;
        }
        .lvup-bar-fill.is-ready {
            background: linear-gradient(90deg, #34d399, #86efac);
            box-shadow: 0 0 10px rgba(52,211,153,.5);
        }
        .lvup-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 14px;
            border-radius: 999px;
            font-size: .82rem;
            font-weight: 800;
            white-space: nowrap;
        }
        .lvup-status.is-pass {
            background: rgba(52,211,153,.16);
            color: #34d399;
            border: 1px solid rgba(52,211,153,.5);
        }
        .lvup-status.is-fail {
            background: rgba(248,113,113,.14);
            color: #fda4a4;
            border: 1px solid rgba(248,113,113,.5);
        }

        /* 3. MISSING summary (1 line inline) */
        .lvup-missing {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            margin-top: 10px;
            padding: 8px 12px;
            border-radius: 10px;
            background: rgba(248,113,113,.06);
            border: 1px solid rgba(248,113,113,.3);
            color: #fecaca;
            font-size: .8rem;
            font-weight: 600;
            line-height: 1.5;
        }
        .lvup-missing i { color: #f87171; font-size: 1rem; margin-top: 2px; flex: 0 0 auto; }

        /* 3. REQUIREMENT grid — compact */
        .lvup-req-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 8px;
            margin-top: 10px;
            width: 100%;
            align-items: stretch;
        }
        .lvup-req-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 32px 8px 10px;
            border-radius: 10px;
            background: rgba(0,0,0,.3);
            border: 1px solid rgba(216,176,106,.28);
        }
        .lvup-req-card.is-pass { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.05); }
        .lvup-req-card.is-fail { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.04); }
        .lvup-req-card.is-locked { border-color: rgba(168,144,108,.4); opacity: .82; }

        .lvup-req-thumb {
            position: relative;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: linear-gradient(135deg, #2a1d0f, #1c150b);
            border: 1px solid rgba(216,176,106,.35);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            color: #d8b06a;
            flex: 0 0 auto;
            overflow: hidden;
        }
        .lvup-req-thumb img {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: pixelated;
        }
        .lvup-req-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #a08060;
            z-index: 1;
        }
        .lvup-req-thumb.is-gp       { color: #60a5fa; border-color: rgba(96,165,250,.45); }
        .lvup-req-thumb.is-money    { color: #fbbf24; border-color: rgba(251,191,36,.45); }
        .lvup-req-thumb.is-goodness { color: #34d399; border-color: rgba(52,211,153,.45); }
        .lvup-req-thumb.is-tooltipable { cursor: help; }
        .lvup-req-thumb.is-tooltipable:hover {
            border-color: #fbbf24;
            box-shadow: 0 0 8px rgba(251,191,36,.35);
        }

        .lvup-req-info { flex: 1; min-width: 0; }
        .lvup-req-name {
            font-size: .8rem;
            font-weight: 800;
            color: #f0d39e;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lvup-req-num {
            font-size: .78rem;
            font-weight: 800;
            margin-top: 2px;
            line-height: 1;
        }
        .lvup-req-have.is-pass { color: #34d399; }
        .lvup-req-have.is-fail { color: #f87171; }
        .lvup-req-sep { color: #6a5040; font-weight: 600; margin: 0 2px; }
        .lvup-req-need { color: #c5b293; font-weight: 700; }
        .lvup-req-locked {
            font-size: .72rem;
            color: #a08060;
            font-weight: 700;
            font-style: italic;
        }
        .lvup-req-flag {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 1.05rem;
        }
        .lvup-req-card.is-pass .lvup-req-flag   { color: #34d399; }
        .lvup-req-card.is-fail .lvup-req-flag   { color: #f87171; }
        .lvup-req-card.is-locked .lvup-req-flag { color: #a08060; }

        /* ─── 4. ACTION AREA (2-column: left=สถานะ, right=ปุ่ม) ─── */
        .lvup-action-area {
            display: grid;
            grid-template-columns: 60% 1fr;
            gap: 16px;
            align-items: stretch;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px dashed rgba(216,176,106,.25);
        }
        .lvup-action-left {
            min-width: 0;
        }
        .lvup-action-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            gap: 6px;
        }
        @media (max-width: 700px) {
            .lvup-action-area { grid-template-columns: 1fr; gap: 12px; }
        }
        .lvup-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 14px 22px;
            border-radius: 14px;
            font-size: 1rem;
            font-weight: 900;
            border: none;
            cursor: pointer;
            transition: filter .15s, transform .1s, box-shadow .15s;
        }
        .lvup-action-btn i { font-size: 1.15rem; }
        /* READY — เด่นสุดทั้ง section: gradient ทอง + glow + pulse */
        .lvup-action-btn.is-ready {
            background: linear-gradient(135deg, #be8a39 0%, #fbbf24 50%, #fff7d6 100%);
            color: #1a120a;
            box-shadow:
                0 0 18px rgba(251,191,36,.55),
                0 10px 22px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(255,255,255,.25);
            animation: lvupReadyPulse 2s ease-in-out infinite;
            text-shadow: 0 1px 0 rgba(255,255,255,.25);
        }
        .lvup-action-btn.is-ready:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }
        .lvup-action-btn.is-ready:active { transform: translateY(1px); }
        @keyframes lvupReadyPulse {
            0%, 100% { box-shadow: 0 0 18px rgba(251,191,36,.55), 0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); }
            50%      { box-shadow: 0 0 30px rgba(251,191,36,.85), 0 10px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3); }
        }
        /* DISABLED — เทาทึบ ไม่ดึงดูดสายตา */
        .lvup-action-btn.is-disabled,
        .lvup-action-btn.is-locked {
            background: rgba(40,28,18,.7);
            color: #6a5040;
            border: 1.5px dashed rgba(168,144,108,.35);
            cursor: not-allowed;
            box-shadow: none;
            text-shadow: none;
        }
        .lvup-action-btn.is-disabled i,
        .lvup-action-btn.is-locked i { color: #8a6f53; }

        .lvup-action-hint {
            font-size: .78rem;
            color: #c5b293;
            font-weight: 600;
            text-align: center;
            line-height: 1.4;
        }
        .lvup-action-hint.is-pass { color: #34d399; font-weight: 800; }

        /* MISSING LIST (ฝั่งซ้ายของ action area) */
        .lvup-missing-list {
            width: 100%;
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(248,113,113,.06);
            border: 1px solid rgba(248,113,113,.32);
        }

        /* READY BOX (ฝั่งซ้ายเมื่อครบทุกเงื่อนไข) */
        .lvup-ready-box {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            height: 100%;
            padding: 12px 16px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(52,211,153,.1), rgba(16,185,129,.05));
            border: 1px solid rgba(52,211,153,.45);
        }
        .lvup-ready-box > i {
            color: #34d399;
            font-size: 1.8rem;
            flex: 0 0 auto;
            text-shadow: 0 0 10px rgba(52,211,153,.5);
        }
        .lvup-ready-title {
            font-size: .95rem;
            font-weight: 900;
            color: #34d399;
            line-height: 1.2;
        }
        .lvup-ready-sub {
            font-size: .78rem;
            color: #86efac;
            font-weight: 600;
            margin-top: 3px;
        }
        .lvup-missing-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: .88rem;
            font-weight: 900;
            color: #fda4a4;
            margin-bottom: 8px;
        }
        .lvup-missing-title i { color: #f87171; font-size: 1.05rem; }
        .lvup-missing-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .lvup-missing-list li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .82rem;
            color: #fecaca;
            font-weight: 600;
            line-height: 1.45;
        }
        .lvup-missing-list li i {
            color: #f87171;
            font-size: .5rem;
            flex: 0 0 auto;
        }

        /* summary panel ตอน is-fail — ขอบ + glow แดงให้ status เด่น */
        .lvup-summary.is-fail {
            border-color: rgba(248,113,113,.4);
            background: linear-gradient(0deg, rgba(248,113,113,.04), rgba(0,0,0,.32));
        }
        .lvup-summary.is-pass {
            border-color: rgba(52,211,153,.45);
            background: linear-gradient(0deg, rgba(52,211,153,.05), rgba(0,0,0,.32));
        }

        @media (max-width: 600px) {
            .lvup { padding: 12px 14px; }
            .lvup-summary { gap: 10px; padding: 8px 12px; }
            .lvup-gp-have { font-size: 1.25rem; }
            .lvup-bar { width: 100%; flex-basis: 100%; }
            .lvup-status { width: 100%; justify-content: center; }
        }

        /* requirement block ฝังใน level-up panel — divider เหนือ checklist */
        .level-up-req {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px dashed rgba(216,176,106,.3);
        }
        .level-up-req-head {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .level-up-req-title {
            font-size: .92rem;
            font-weight: 800;
            color: #f0d39e;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .level-up-req-title i { color: #fbbf24; font-size: 1.05rem; }
        .level-up-req .wh-req-summary-badge { margin-left: auto; }
        .level-up-req .wh-missing-list { margin-bottom: 10px; }

        .level-up-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
            margin-top: 14px;
            flex-wrap: wrap;
        }
        .level-up-btn {
            border: none;
            border-radius: 12px;
            padding: 12px 28px;
            font-size: .95rem;
            font-weight: 900;
            cursor: pointer;
            background: linear-gradient(135deg, #be8a39, #fbbf24);
            color: #1a120a;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 6px 14px rgba(216,176,106,.32);
            transition: filter .15s, transform .1s;
        }
        .level-up-btn:hover:not(:disabled) { filter: brightness(1.1); }
        .level-up-btn:active:not(:disabled) { transform: translateY(1px); }
        .level-up-btn:disabled {
            background: rgba(255,255,255,.05);
            color: #6a5040;
            cursor: not-allowed;
            box-shadow: none;
            border: 1px solid rgba(216,176,106,.18);
        }

        .level-up-max-banner {
            text-align: center;
            padding: 18px;
            border-radius: 12px;
            background: linear-gradient(160deg, rgba(251,191,36,.12), rgba(190,138,57,.08));
            border: 1px solid rgba(251,191,36,.35);
        }
        .level-up-max-banner .max-title {
            font-size: 1.05rem;
            font-weight: 900;
            color: #fbbf24;
            margin-bottom: 6px;
        }
        .level-up-max-banner .max-title i { margin-right: 6px; }
        .level-up-max-banner .max-sub {
            font-size: .82rem;
            color: #fde68a;
            font-weight: 700;
            line-height: 1.55;
        }

        /* Upgrade panel — อัปเกรดโบนัสสำนัก */
        .upgrade-panel {
            background: linear-gradient(160deg, #1c150b 0%, #261a0e 60%, #15110a 100%);
            border: 2px solid rgba(216,176,106,.6);
            border-radius: 18px;
            padding: 22px 22px 16px;
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.12),
                0 12px 30px rgba(0,0,0,.5),
                0 0 18px rgba(216,176,106,.18);
            margin-bottom: 24px;
        }
        .upgrade-panel-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .upgrade-panel-title {
            font-size: 1.05rem;
            font-weight: 900;
            background: linear-gradient(90deg, #fff7d6, #d8b06a);
            -webkit-background-clip: text;
            color: transparent;
            margin: 0;
        }
        .upgrade-panel-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(216,176,106,.4), transparent);
        }
        .upgrade-pool-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 999px;
            background: rgba(0,0,0,.35);
            border: 1px solid rgba(216,176,106,.45);
            color: #fbbf24;
            font-size: .78rem;
            font-weight: 800;
        }
        .upgrade-pool-badge i { color: #fbbf24; }

        .upgrade-notice {
            margin: 0 0 14px;
            padding: 10px 14px;
            border-radius: 10px;
            background: rgba(248,113,113,.08);
            border: 1px solid rgba(248,113,113,.3);
            color: #fda4a4;
            font-size: .82rem;
            font-weight: 700;
        }
        .upgrade-notice i { margin-right: 6px; color: #f87171; }

        .upgrade-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }
        @media (max-width: 992px) { .upgrade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 480px) { .upgrade-grid { grid-template-columns: 1fr; } }

        .upgrade-card {
            position: relative;
            padding: 16px 16px 14px;
            border-radius: 14px;
            background: linear-gradient(160deg, #20180c 0%, #2c1e10 70%, #15100a 100%);
            border: 1.5px solid rgba(216,176,106,.5);
            box-shadow: inset 0 0 0 1px rgba(255,232,180,.08), 0 4px 14px rgba(0,0,0,.4);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .upgrade-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .upgrade-card-title {
            font-size: .82rem;
            font-weight: 800;
            color: #f0d39e;
            letter-spacing: .5px;
        }
        .upgrade-card-title small {
            display: block;
            font-size: .65rem;
            color: #c5b293;
            font-weight: 600;
            margin-top: 1px;
        }
        .upgrade-card-icon {
            width: 32px; height: 32px;
            border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, rgba(216,176,106,.32), rgba(190,138,57,.18));
            border: 1px solid rgba(216,176,106,.45);
            color: #fbbf24;
            font-size: 1rem;
        }
        .upgrade-card-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-weight: 800;
            font-size: 1.05rem;
            color: #f4ead7;
        }
        .upgrade-card-arrow .from   { color: #c5b293; }
        .upgrade-card-arrow .to     {
            background: linear-gradient(180deg, #fff7d6, #d8b06a);
            -webkit-background-clip: text;
            color: transparent;
            font-size: 1.2rem;
        }
        .upgrade-card-arrow .cap-suffix {
            color: #a08060;
            font-size: .85rem;
            font-weight: 700;
        }
        .upgrade-card-arrow i       { color: #d8b06a; font-size: 1rem; }

        .upgrade-progress {
            position: relative;
            height: 8px;
            background: rgba(0,0,0,.45);
            border: 1px solid rgba(216,176,106,.25);
            border-radius: 999px;
            overflow: hidden;
        }
        .upgrade-progress-fill {
            position: absolute; inset: 0;
            width: 0%;
            background: linear-gradient(90deg, #be8a39, #fbbf24 60%, #fff7d6);
            border-radius: 999px;
            box-shadow: 0 0 8px rgba(251,191,36,.4);
            transition: width .4s ease;
        }
        .upgrade-progress-fill.is-full {
            background: linear-gradient(90deg, #34d399, #86efac);
            box-shadow: 0 0 10px rgba(52,211,153,.45);
        }
        .upgrade-progress-text {
            font-size: .68rem;
            color: #c5b293;
            text-align: right;
            margin-top: 4px;
            font-weight: 700;
        }

        .upgrade-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .74rem;
            color: #c5b293;
        }
        .upgrade-card-cost {
            display: inline-flex; align-items: center; gap: 4px;
            color: #fbbf24;
            font-weight: 800;
        }
        .upgrade-card-cost i { font-size: .9rem; }
        .upgrade-card-limit { font-size: .72rem; color: #a08060; }

        .upgrade-card-btn {
            margin-top: 4px;
            border: none;
            border-radius: 10px;
            padding: 9px 12px;
            font-size: .82rem;
            font-weight: 800;
            cursor: pointer;
            background: linear-gradient(135deg, #be8a39, #d8b06a);
            color: #1a120a;
            transition: filter .15s, transform .1s;
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        }
        .upgrade-card-btn:hover:not(:disabled) {
            filter: brightness(1.08);
        }
        .upgrade-card-btn:active:not(:disabled) {
            transform: translateY(1px);
        }
        .upgrade-card-btn:disabled {
            background: rgba(255,255,255,.06);
            color: #6a5040;
            cursor: not-allowed;
            border: 1px solid rgba(216,176,106,.18);
        }
        .upgrade-card-btn .reason {
            font-size: .68rem;
            font-weight: 700;
        }

        /* Member table panel */
        .guild-members-panel {
            background: rgba(33,24,17,.92);
            border: 1px solid rgba(201,155,82,.26);
            border-radius: 18px;
            padding: 22px 22px 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,.4);
        }
        .guild-members-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .guild-members-title {
            font-size: 1.05rem;
            font-weight: 800;
            background: linear-gradient(90deg, #f0d39e, #be8a39);
            -webkit-background-clip: text;
            color: transparent;
            margin: 0;
        }
        .guild-members-count {
            font-size: .76rem;
            color: #c5b293;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 999px;
            background: rgba(201,155,82,.12);
            border: 1px solid rgba(201,155,82,.25);
        }

        .guild-members-table-wrap {
            width: 100%;
            overflow-x: auto;
        }
        .guild-members-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .88rem;
        }
        .guild-members-table thead th {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .5px;
            color: #a08060;
            text-transform: uppercase;
            padding: 10px 12px;
            border-bottom: 1px solid rgba(201,155,82,.2);
            text-align: left;
            background: transparent;
            white-space: nowrap;
        }
        .guild-members-table tbody td {
            padding: 12px;
            color: #f4ead7;
            border-bottom: 1px solid rgba(201,155,82,.1);
            vertical-align: middle;
        }
        .guild-members-table tbody tr:hover td {
            background: rgba(216,176,106,.06);
        }
        .guild-members-table tbody tr.is-master td {
            background: linear-gradient(90deg, rgba(216,176,106,.16), transparent 70%);
            border-bottom-color: rgba(216,176,106,.3);
        }
        .guild-members-table tbody tr.is-me td {
            box-shadow: inset 3px 0 0 0 #34d399;
        }

        .member-name-cell {
            display: flex; align-items: center; gap: 10px;
            font-weight: 700;
        }
        .member-name-text { color: #f0d39e; }
        .member-job-cell {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-width: 118px;
            white-space: nowrap;
        }
        .member-job-icon {
            width: 34px;
            height: 34px;
            object-fit: contain;
            flex: 0 0 34px;
            border-radius: 8px;
            background: rgba(0,0,0,.28);
            border: 1px solid rgba(216,176,106,.32);
            box-shadow: inset 0 1px 0 rgba(255,232,180,.12), 0 2px 8px rgba(0,0,0,.28);
        }
        .member-job-name {
            color: #f0d39e;
            font-weight: 800;
        }
        .member-join-cell {
            display: inline-flex;
            flex-direction: column;
            gap: 2px;
            min-width: 150px;
        }
        .member-join-date {
            color: #f4ead7;
            font-weight: 800;
            white-space: nowrap;
        }
        .member-join-duration {
            color: #c5b293;
            font-size: .75rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .member-badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 9px;
            border-radius: 999px;
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .3px;
            white-space: nowrap;
        }
        .member-badge.badge-master {
            background: linear-gradient(135deg, #be8a39, #d8b06a);
            color: #1a120a;
            box-shadow: 0 2px 8px rgba(216,176,106,.4);
        }
        .member-badge.badge-me {
            background: rgba(52,211,153,.18);
            color: #34d399;
            border: 1px solid rgba(52,211,153,.4);
        }
        .member-badge.badge-rank {
            background: rgba(201,155,82,.14);
            color: #d8b06a;
            border: 1px solid rgba(201,155,82,.3);
        }
        .member-badge.badge-senior {
            background: linear-gradient(135deg, rgba(216,176,106,.32), rgba(190,138,57,.18));
            color: #f0d39e;
            border: 1px solid rgba(216,176,106,.55);
            box-shadow: 0 0 10px rgba(216,176,106,.18);
        }
        .member-badge.badge-member {
            background: rgba(168,144,108,.12);
            color: #c5b293;
            border: 1px solid rgba(168,144,108,.28);
        }

        .member-job-pill {
            display: inline-block;
            padding: 2px 9px;
            border-radius: 6px;
            font-size: .76rem;
            font-weight: 700;
            color: #fff;
        }
        .member-level-num {
            font-weight: 800;
            color: #fbbf24;
        }
        .member-offline-text {
            color: #6a5040;
            font-style: italic;
        }

        /* Empty state */
        .guild-empty-state {
            text-align: center;
            padding: 60px 30px;
            border-radius: 22px;
            background: linear-gradient(160deg, #15110d, #211508 80%);
            border: 1px dashed rgba(201,155,82,.4);
        }
        .guild-empty-icon {
            width: 90px; height: 90px;
            border-radius: 50%;
            margin: 0 auto 18px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(201,155,82,.1);
            border: 1px solid rgba(201,155,82,.3);
            color: #d8b06a;
            font-size: 2.6rem;
        }
        .guild-empty-title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #f0d39e;
            margin-bottom: 6px;
        }
        .guild-empty-sub {
            font-size: .88rem;
            color: #c5b293;
            line-height: 1.6;
            max-width: 480px;
            margin: 0 auto;
        }

        /* row ห่อ label + ปุ่มดินสอ — flex inline, wrap เมื่อขยาย */
        .guild-hero-label-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;
            margin-bottom: 10px;
        }
        .guild-hero-label-row .guild-hero-label {
            margin-bottom: 0;
        }
        .guild-display-editor {
            position: relative;
            z-index: 2;
            flex: 1 1 100%;
            margin-top: 4px;
            padding-top: 12px;
            border-top: 1px dashed rgba(216,176,106,.35);
        }
        /* collapsed: ย่อเหลือแค่ปุ่มดินสอ inline กับ label */
        .guild-display-editor.is-collapsed {
            flex: 0 0 auto;
            border-top: none;
            margin-top: 0;
            padding-top: 0;
            display: inline-flex;
            align-items: center;
        }
        .guild-display-editor.is-collapsed .guild-display-editor-body {
            display: none;
        }
        .guild-display-editor:not(.is-collapsed) .guild-display-edit-icon {
            display: none;
        }
        .guild-display-edit-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 7px;
            border: 1px solid rgba(216,176,106,.45);
            background: rgba(216,176,106,.1);
            color: #d8b06a;
            font-size: .9rem;
            cursor: pointer;
            transition: all .15s;
            padding: 0;
        }
        .guild-display-edit-icon:hover {
            border-color: #fbbf24;
            color: #fbbf24;
            background: rgba(251,191,36,.15);
            box-shadow: 0 0 10px rgba(251,191,36,.25);
        }
        .guild-display-editor-label {
            font-size: .72rem;
            color: #c5b293;
            font-weight: 800;
            letter-spacing: .8px;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        .guild-display-editor-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .guild-display-editor-row .form-control {
            min-height: 42px;
            border-radius: 12px;
            background: rgba(16,11,7,.88);
            border: 1px solid rgba(201,155,82,.35);
            color: #f4ead7;
        }
        .guild-display-editor-row .form-control::placeholder {
            color: rgba(197,178,147,.75);
        }
        .guild-display-editor-help {
            margin-top: 7px;
            font-size: .72rem;
            color: #c5b293;
            line-height: 1.45;
        }

        /* ─── Warehouse / requirement redesign ─── */
        .wh-section {
            position: relative;
            padding: 16px 18px;
            border-radius: 16px;
            background: linear-gradient(160deg, #1c150b 0%, #261a0e 60%, #14100a 100%);
            border: 1.5px solid rgba(216,176,106,.4);
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.08),
                0 8px 22px rgba(0,0,0,.42);
            margin-bottom: 18px;
        }
        .wh-section-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .wh-footer-note-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: .72rem;
            color: #a08060;
            font-weight: 700;
            margin-left: auto;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(216,176,106,.08);
            border: 1px solid rgba(216,176,106,.25);
        }
        .wh-footer-note-inline i { color: #d8b06a; font-size: .9rem; }
        .wh-items-subhead {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: .8rem;
            color: #d8b06a;
            font-weight: 800;
            letter-spacing: .3px;
            margin: 14px 0 8px;
            padding-top: 12px;
            border-top: 1px dashed rgba(216,176,106,.25);
        }
        .wh-items-subhead i { color: #fbbf24; }
        .wh-section-head > div:first-of-type { flex: 1; min-width: 0; }
        .wh-section-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(216,176,106,.28), rgba(190,138,57,.14));
            border: 1px solid rgba(216,176,106,.45);
            color: #fbbf24;
            font-size: 1.2rem;
            flex: 0 0 auto;
        }
        .wh-section-title {
            font-size: 1rem;
            font-weight: 900;
            background: linear-gradient(90deg, #fff7d6, #d8b06a);
            -webkit-background-clip: text;
            color: transparent;
        }
        .wh-section-sub {
            font-size: .76rem;
            color: #c5b293;
            font-weight: 600;
            margin-top: 2px;
            line-height: 1.4;
        }
        .wh-footer-note {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .76rem;
            color: #a08060;
            font-weight: 600;
            padding: 2px 4px;
        }
        .wh-footer-note i { color: #d8b06a; font-size: .95rem; }

        /* ทรัพยากร: 2 ใบ inline compact */
        .wh-resource-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .wh-resource-grid.is-compact .wh-resource-card { padding: 10px 14px; gap: 10px; }
        .wh-resource-grid.is-compact .wh-resource-icon { width: 38px; height: 38px; font-size: 1.3rem; }
        .wh-resource-grid.is-compact .wh-resource-value { font-size: 1.2rem; }
        @media (max-width: 600px) { .wh-resource-grid { grid-template-columns: 1fr; } }
        .wh-resource-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            border-radius: 12px;
            background: rgba(0,0,0,.32);
            border: 1px solid rgba(216,176,106,.3);
        }
        .wh-resource-icon {
            width: 46px; height: 46px;
            border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.6rem;
            flex: 0 0 auto;
        }
        .wh-resource-card.is-money .wh-resource-icon {
            background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(190,138,57,.1));
            border: 1px solid rgba(251,191,36,.45);
            color: #fbbf24;
        }
        .wh-resource-card.is-goodness .wh-resource-icon {
            background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(16,185,129,.08));
            border: 1px solid rgba(52,211,153,.45);
            color: #34d399;
        }
        .wh-resource-label {
            font-size: .74rem;
            color: #a08060;
            font-weight: 800;
            letter-spacing: .6px;
            text-transform: uppercase;
        }
        .wh-resource-value {
            font-size: 1.55rem;
            font-weight: 900;
            line-height: 1.1;
            margin-top: 4px;
            background: linear-gradient(180deg, #fff7d6, #d8b06a);
            -webkit-background-clip: text;
            color: transparent;
        }

        /* Section 2: requirement checklist */
        .wh-req-summary-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            border-radius: 999px;
            font-size: .82rem;
            font-weight: 800;
            letter-spacing: .3px;
            margin-left: auto;
        }
        .wh-req-summary-badge.is-pass {
            background: rgba(52,211,153,.15);
            color: #34d399;
            border: 1px solid rgba(52,211,153,.45);
        }
        .wh-req-summary-badge.is-fail {
            background: rgba(248,113,113,.15);
            color: #fda4a4;
            border: 1px solid rgba(248,113,113,.5);
        }
        .wh-missing-list {
            list-style: none;
            padding: 12px 14px;
            margin: 0 0 14px;
            border-radius: 10px;
            background: rgba(248,113,113,.06);
            border: 1px solid rgba(248,113,113,.3);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .wh-missing-list li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .85rem;
            color: #fecaca;
            font-weight: 600;
            line-height: 1.4;
        }
        .wh-missing-list li i { color: #f87171; font-size: 1rem; flex: 0 0 auto; }
        .wh-empty-note {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 14px;
            border-radius: 10px;
            background: rgba(216,176,106,.08);
            border: 1px dashed rgba(216,176,106,.35);
            color: #c5b293;
            font-size: .84rem;
            font-weight: 600;
        }
        .wh-empty-note i { color: #d8b06a; font-size: 1rem; }

        .wh-req-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 10px;
        }
        .wh-req-grid.is-compact {
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 8px;
        }
        .wh-req-grid.is-compact .wh-req-card { padding: 10px 12px; gap: 10px; }
        .wh-req-grid.is-compact .wh-req-thumb { width: 38px; height: 38px; font-size: 1.3rem; }
        .wh-req-grid.is-compact .wh-req-name { font-size: .82rem; }
        .wh-req-grid.is-compact .wh-req-amount { font-size: .82rem; }
        .wh-req-thumb.is-tooltipable,
        .wh-item-thumb.is-tooltipable { cursor: help; }
        .wh-req-thumb.is-tooltipable:hover,
        .wh-item-thumb.is-tooltipable:hover {
            border-color: #fbbf24;
            box-shadow: 0 0 10px rgba(251,191,36,.35);
        }
        .wh-req-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 12px;
            background: rgba(0,0,0,.3);
            border: 1.5px solid rgba(216,176,106,.3);
            transition: border-color .15s, transform .15s;
        }
        .wh-req-card:hover { transform: translateY(-1px); }
        .wh-req-card.is-pass { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.04); }
        .wh-req-card.is-fail { border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.04); }
        .wh-req-card.is-locked { border-color: rgba(168,144,108,.45); background: rgba(168,144,108,.06); opacity: .8; }

        .wh-req-status {
            position: absolute;
            top: 8px;
            right: 10px;
            font-size: 1.1rem;
            line-height: 1;
        }
        .wh-req-card.is-pass .wh-req-status   { color: #34d399; }
        .wh-req-card.is-fail .wh-req-status   { color: #f87171; }
        .wh-req-card.is-locked .wh-req-status { color: #a08060; }

        .wh-req-thumb {
            position: relative;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: linear-gradient(135deg, #2a1d0f, #1c150b);
            border: 1px solid rgba(216,176,106,.35);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: #d8b06a;
            flex: 0 0 auto;
            overflow: hidden;
        }
        .wh-req-thumb img {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: pixelated;
        }
        .wh-req-thumb .wh-req-thumb-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: #a08060;
            z-index: 1;
        }
        .wh-req-card.is-gp .wh-req-thumb       { color: #60a5fa; border-color: rgba(96,165,250,.45); }
        .wh-req-card.is-money .wh-req-thumb    { color: #fbbf24; border-color: rgba(251,191,36,.45); }
        .wh-req-card.is-goodness .wh-req-thumb { color: #34d399; border-color: rgba(52,211,153,.45); }

        .wh-req-body { flex: 1; min-width: 0; padding-right: 22px; }
        .wh-req-name {
            font-size: .88rem;
            font-weight: 800;
            color: #f0d39e;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .wh-req-amount {
            display: flex;
            align-items: baseline;
            gap: 4px;
            flex-wrap: wrap;
            margin-top: 4px;
            font-size: .9rem;
            font-weight: 800;
        }
        .wh-req-have.is-pass { color: #34d399; }
        .wh-req-have.is-fail { color: #f87171; }
        .wh-req-sep { color: #6a5040; font-weight: 600; }
        .wh-req-need { color: #c5b293; font-weight: 700; }
        .wh-req-short {
            margin-left: 6px;
            font-size: .7rem;
            font-weight: 700;
            color: #fda4a4;
            background: rgba(248,113,113,.12);
            border: 1px solid rgba(248,113,113,.35);
            padding: 2px 7px;
            border-radius: 999px;
            white-space: nowrap;
        }
        .wh-req-locked-text {
            font-size: .78rem;
            color: #a08060;
            font-weight: 700;
            font-style: italic;
        }

        /* Section 3: ไอเท็มในคลัง */
        .wh-item-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: flex-start;
            overflow-x: auto;
        }
        .wh-item-card {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(0,0,0,.3);
            border: 1px solid rgba(216,176,106,.3);
            transition: border-color .15s, transform .15s;
            flex: 0 0 auto;
            width: max-content;
        }
        .wh-item-card:hover {
            border-color: rgba(216,176,106,.55);
            transform: translateY(-1px);
        }
        .wh-item-thumb {
            position: relative;
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: linear-gradient(135deg, #2a1d0f, #1c150b);
            border: 1px solid rgba(216,176,106,.35);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            overflow: hidden;
        }
        .wh-item-thumb img {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: pixelated;
        }
        .wh-item-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #a08060;
            font-size: 1.5rem;
            z-index: 1;
        }
        .wh-item-info {
            flex: 0 0 auto;
            min-width: 0;
        }
        .wh-item-name {
            font-size: .85rem;
            font-weight: 800;
            color: #f0d39e;
            line-height: 1.25;
            white-space: nowrap;
            overflow: visible;
            text-overflow: clip;
        }
        .wh-item-amount {
            font-size: .95rem;
            font-weight: 900;
            color: #fbbf24;
            margin-top: 2px;
        }

        .donate-item-card {
            position: relative;
            grid-column: 1 / -1;
            padding: 18px;
            border-radius: 16px;
            background:
                radial-gradient(circle at top left, rgba(96,165,250,.16), transparent 36%),
                linear-gradient(160deg, rgba(26,20,14,.98), rgba(12,10,7,.96));
            border: 1.5px solid rgba(96,165,250,.38);
            box-shadow:
                inset 0 0 0 1px rgba(255,232,180,.07),
                0 10px 24px rgba(0,0,0,.42),
                0 0 18px rgba(96,165,250,.12);
            overflow: hidden;
        }
        .donate-item-card::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(90deg, rgba(96,165,250,.14), transparent 42%, rgba(216,176,106,.08));
            opacity: .65;
        }
        .donate-item-card > * {
            position: relative;
            z-index: 1;
        }
        .donate-item-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 14px;
        }
        .donate-item-title {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }
        .donate-item-title-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #93c5fd;
            font-size: 1.65rem;
            background: linear-gradient(135deg, rgba(96,165,250,.24), rgba(216,176,106,.1));
            border: 1px solid rgba(96,165,250,.45);
            box-shadow: 0 0 18px rgba(96,165,250,.16);
            flex: 0 0 auto;
        }
        .donate-item-title-main {
            font-size: 1.04rem;
            font-weight: 950;
            color: #f4ead7;
            line-height: 1.2;
        }
        .donate-item-title-sub {
            margin-top: 3px;
            font-size: .78rem;
            font-weight: 650;
            color: #c5b293;
            line-height: 1.4;
        }
        .donate-item-have-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 12px;
            border-radius: 999px;
            background: rgba(96,165,250,.13);
            border: 1px solid rgba(96,165,250,.45);
            color: #bfdbfe;
            font-size: .78rem;
            font-weight: 900;
            white-space: nowrap;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
        }
        .donate-item-have-pill i {
            color: #93c5fd;
            font-size: 1rem;
        }
        .donate-item-empty {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 14px;
            border-radius: 12px;
            background: rgba(216,176,106,.08);
            border: 1px dashed rgba(216,176,106,.35);
            color: #c5b293;
            font-size: .84rem;
            font-weight: 700;
        }
        .donate-item-empty i { color: #d8b06a; font-size: 1rem; }

        /* ── Donate grid (new layout) ───────────────────────── */
        .donate-grid-section { margin-top: 12px; }
        .donate-grid-header {
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            margin-bottom: 10px; flex-wrap: wrap;
        }
        .donate-grid-prompt {
            color: #f0d39e; font-weight: 800; font-size: .92rem;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .donate-grid-prompt i { color: #fbbf24; font-size: 1.05rem; }
        .donate-grid-sub { color: #a08060; font-size: .75rem; font-weight: 700; }

        .donate-item-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 8px;
        }
        .donate-item-tile {
            position: relative; background: rgba(0,0,0,.32);
            border: 2px solid rgba(201,155,82,.32); border-radius: 12px;
            padding: 10px 8px 8px; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
            transition: transform .12s, border-color .12s, box-shadow .12s, background .12s;
            color: inherit; min-height: 124px;
        }
        .donate-item-tile:hover:not(.is-disabled) {
            border-color: #d8b06a; transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,.4);
        }
        .donate-item-tile.is-selected {
            border-color: #fbbf24; background: rgba(251,191,36,.16);
            box-shadow: 0 0 16px rgba(251,191,36,.32);
        }
        .donate-item-tile.is-disabled {
            opacity: .35; cursor: not-allowed; filter: grayscale(.6);
            border-style: dashed; border-color: rgba(201,155,82,.22);
        }
        .donate-item-tile .tile-thumb {
            width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
            background: #0b0907; border-radius: 8px; padding: 3px; flex-shrink: 0;
        }
        .donate-item-tile .tile-thumb img { max-width: 42px; max-height: 42px; object-fit: contain; }
        .donate-item-tile .tile-name {
            color: #f4ead7; font-weight: 800; font-size: .76rem; line-height: 1.2;
            width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; word-break: break-word;
        }
        .donate-item-tile .tile-have-badge {
            position: absolute; top: 6px; right: 6px;
            background: rgba(251,191,36,.95); color: #1a120a;
            font-size: .68rem; font-weight: 900; padding: 1px 7px; border-radius: 999px;
            min-width: 22px; text-align: center;
        }
        .donate-item-tile .tile-have-badge.is-zero {
            background: rgba(160,128,96,.7); color: #1a120a;
        }
        .donate-item-tile.is-selected .tile-have-badge {
            background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.6);
        }

        /* Selected preview card */
        .donate-selected-section {
            margin-top: 16px; padding: 14px;
            background: linear-gradient(135deg, rgba(251,191,36,.06), rgba(216,176,106,.02));
            border: 1px solid rgba(251,191,36,.32); border-radius: 12px;
        }
        .donate-selected-head {
            color: #fbbf24; font-weight: 800; font-size: .9rem;
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 10px;
            padding-bottom: 8px; border-bottom: 1px dashed rgba(251,191,36,.3);
        }
        .donate-selected-card {
            display: flex; align-items: center; gap: 14px; padding: 10px 12px;
            background: rgba(0,0,0,.32); border: 1px solid rgba(201,155,82,.28);
            border-radius: 10px; margin-bottom: 12px;
        }
        .donate-selected-thumb {
            width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
            background: #0b0907; border-radius: 10px; padding: 4px; position: relative; flex-shrink: 0;
            border: 1px solid rgba(216,176,106,.3);
        }
        .donate-selected-thumb img { max-width: 54px; max-height: 54px; object-fit: contain; position: relative; z-index: 2; }
        .donate-selected-fallback {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            color: rgba(216,176,106,.35); font-size: 1.8rem; z-index: 1;
        }
        .donate-selected-info { flex: 1; min-width: 0; }
        .donate-selected-kicker {
            color: #d8b06a; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
            display: inline-flex; align-items: center; gap: 4px;
        }
        .donate-selected-kicker i { font-size: .85rem; }
        .donate-selected-name {
            color: #f6e4b8; font-weight: 900; font-size: 1.05rem; line-height: 1.2; margin-top: 2px;
            overflow: hidden; text-overflow: ellipsis;
        }
        .donate-selected-meta { color: #c5b293; font-size: .8rem; font-weight: 700; margin-top: 4px; }
        .donate-selected-meta strong { color: #fbbf24; }
        .donate-selected-clear {
            background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4);
            color: #f87171; width: 32px; height: 32px; border-radius: 8px;
            font-size: 1.2rem; cursor: pointer; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            transition: background .12s, color .12s;
        }
        .donate-selected-clear:hover { background: rgba(248,113,113,.28); color: #fff; }

        .donate-amount-field { margin-bottom: 12px; }

        .donate-empty-prompt {
            margin-top: 14px; padding: 12px 14px; border-radius: 10px;
            background: rgba(0,0,0,.22); border: 1px dashed rgba(201,155,82,.28);
            color: #a08060; font-size: .85rem; font-weight: 700; text-align: center;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .donate-empty-prompt i { color: #d8b06a; font-size: 1.1rem; }

        .donate-item-form {
            display: grid;
            grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr) minmax(180px, .75fr) auto;
            gap: 12px;
            align-items: end;
        }
        .donate-item-preview-box {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 14px;
            background: rgba(0,0,0,.3);
            border: 1px solid rgba(96,165,250,.28);
        }
        .donate-item-preview-thumb {
            position: relative;
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #2a1d0f, #101827);
            border: 1px solid rgba(96,165,250,.42);
            overflow: hidden;
            flex: 0 0 auto;
        }
        .donate-item-preview-thumb[data-tooltip-html] { cursor: help; }
        .donate-item-preview-thumb:hover {
            border-color: rgba(147,197,253,.72);
            box-shadow: 0 0 14px rgba(96,165,250,.28);
        }
        .donate-item-preview-thumb img {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: pixelated;
        }
        .donate-item-preview-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #93c5fd;
            font-size: 1.65rem;
            z-index: 1;
        }
        .donate-item-preview-copy {
            min-width: 0;
        }
        .donate-item-kicker,
        .donate-item-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            color: #93c5fd;
            font-size: .72rem;
            font-weight: 900;
            letter-spacing: .3px;
            text-transform: uppercase;
        }
        .donate-item-name {
            color: #f0d39e;
            font-size: .92rem;
            font-weight: 900;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .donate-item-caption {
            margin-top: 3px;
            color: #a08060;
            font-size: .72rem;
            font-weight: 700;
            line-height: 1.35;
        }
        .donate-item-field {
            min-width: 0;
        }
        .donate-item-select,
        .donate-item-input {
            min-height: 48px;
            border-radius: 13px;
            background: rgba(13,10,7,.95) !important;
            border: 1px solid rgba(201,155,82,.4) !important;
            color: #f4ead7 !important;
            font-weight: 800;
            box-shadow: inset 0 0 0 1px rgba(255,232,180,.04);
        }
        .donate-item-select:focus,
        .donate-item-input:focus {
            border-color: rgba(96,165,250,.7) !important;
            box-shadow: 0 0 0 .18rem rgba(96,165,250,.13) !important;
        }
        .donate-item-amount-row {
            display: flex;
            gap: 8px;
        }
        .donate-item-input-wrap {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            gap: 8px;
            padding-left: 12px;
            border-radius: 13px;
            background: rgba(13,10,7,.95);
            border: 1px solid rgba(201,155,82,.4);
        }
        .donate-item-input-wrap i {
            color: #d8b06a;
            font-size: 1.05rem;
            flex: 0 0 auto;
        }
        .donate-item-input-wrap .donate-item-input {
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            padding-left: 0;
        }
        .donate-item-max {
            min-width: 58px;
            border-radius: 13px;
            background: rgba(96,165,250,.15);
            border: 1px solid rgba(96,165,250,.45);
            color: #bfdbfe;
            font-size: .78rem;
            font-weight: 950;
            cursor: pointer;
            transition: transform .15s, border-color .15s, background .15s;
        }
        .donate-item-max:hover {
            transform: translateY(-1px);
            background: rgba(96,165,250,.24);
            border-color: rgba(147,197,253,.68);
        }
        .donate-item-submit {
            min-height: 48px;
            padding: 0 18px;
            border: 0;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #171007;
            background: linear-gradient(135deg, #f4d58c, #d8b06a 45%, #be8a39);
            font-size: .9rem;
            font-weight: 950;
            white-space: nowrap;
            box-shadow: 0 10px 20px rgba(0,0,0,.32), 0 0 18px rgba(216,176,106,.18);
            cursor: pointer;
            transition: transform .15s, filter .15s;
        }
        .donate-item-submit:hover {
            transform: translateY(-1px);
            filter: brightness(1.05);
        }
        .donate-item-submit i { font-size: 1.05rem; }
        .donate-item-summary {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .donate-item-summary-cell {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(0,0,0,.28);
            border: 1px solid rgba(216,176,106,.22);
            min-width: 0;
        }
        .donate-item-summary-cell i {
            width: 28px;
            height: 28px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #d8b06a;
            background: rgba(216,176,106,.11);
            border: 1px solid rgba(216,176,106,.28);
            flex: 0 0 auto;
        }
        .donate-item-summary-cell.is-bag i {
            color: #93c5fd;
            background: rgba(96,165,250,.12);
            border-color: rgba(96,165,250,.32);
        }
        .donate-item-summary-cell.is-donate i {
            color: #fbbf24;
            background: rgba(251,191,36,.12);
            border-color: rgba(251,191,36,.32);
        }
        .donate-item-summary-cell.is-left i {
            color: #34d399;
            background: rgba(52,211,153,.1);
            border-color: rgba(52,211,153,.3);
        }
        .donate-item-summary-label {
            display: block;
            color: #a08060;
            font-size: .7rem;
            font-weight: 850;
            line-height: 1.2;
        }
        .donate-item-summary-value {
            display: block;
            margin-top: 2px;
            color: #f4ead7;
            font-size: .88rem;
            font-weight: 950;
            line-height: 1.2;
            white-space: nowrap;
        }

        @media (max-width: 480px) {
            .wh-section { padding: 14px; }
            .wh-section-head { gap: 10px; }
            .wh-section-title { font-size: .94rem; }
            .wh-resource-value { font-size: 1.3rem; }
        }

        @media (max-width: 1180px) {
            .donate-item-form {
                grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
            }
            .donate-item-submit { width: 100%; }
        }

        @media (max-width: 720px) {
            .donate-item-card { padding: 15px; }
            .donate-item-head { flex-direction: column; align-items: stretch; }
            .donate-item-have-pill { justify-content: center; }
            .donate-item-form { grid-template-columns: 1fr; }
            .donate-item-summary { grid-template-columns: 1fr; }
            .donate-item-submit { width: 100%; }
        }

        @media (max-width: 480px) {
            .guild-hero-card { padding: 16px 18px; }
            .guild-hero-card.is-level .guild-hero-value,
            .guild-hero-card.is-points .guild-hero-value { font-size: 1.9rem; }
            .guild-hero-card.is-name .guild-hero-value { font-size: 1.5rem; }
            .guild-display-editor-row { flex-direction: column; align-items: stretch; }
            .guild-display-editor-row .level-up-btn { width: 100%; }
            .guild-page-title { font-size: 1.1rem; }
        }