/* Halaman akun: login + dashboard. Token, tombol, card, tile, badge & alert ada di ../assets/site.css */
.akun { display: grid; align-items: center; padding: 48px 0; }
.akun:has(> .dash) { align-items: start; padding-top: 32px; }
.akun + .footer { margin-top: 0; }

/* ================================================================ login */
.login__card { width: min(420px, 100%); margin-inline: auto; padding: 32px 28px; }
.login__title { font-size: 24px; margin-bottom: 6px; }
.login__lead { margin-bottom: 24px; color: var(--muted); }
.login__hint { margin-top: 10px; color: var(--muted); font-size: 12.5px; text-align: center; }
.login__hint b { color: var(--text); }
.login__form { display: grid; gap: 14px; }
.login__form .btn { margin-top: 4px; }
.login__or { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.login__or::before, .login__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ================================================================ dashboard */
.dash { display: grid; gap: 16px; }
.amount { font-weight: 800; color: var(--gold-hi); white-space: nowrap; }

/* ---------- profile */
.hero-card {
    --tier: var(--gold);
    display: flex; gap: 24px; padding: 24px 28px;
    border-top: 3px solid var(--tier);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 9%, transparent), transparent 140px), var(--surface);
}
.hero-card__skin { flex: none; display: grid; place-items: end center; width: 112px; padding: 8px 0; border-radius: var(--radius-sm); background: var(--bg-2); }
.hero-card__skin img { width: 80px; height: auto; image-rendering: pixelated; }
.hero-card__main { flex: 1; min-width: 0; display: grid; gap: 12px; align-content: center; }
.hero-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-card__name { font-size: 28px; overflow-wrap: anywhere; }
.hero-card__name em { font-style: normal; color: var(--tier); }

.tier-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 99px;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tier); background: color-mix(in srgb, var(--tier) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent);
}
.tier-badge .ico { width: 14px; height: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.chip .ico { width: 14px; height: 14px; }
.chip--premium { color: var(--gold-hi); border-color: rgba(217, 180, 90, .4); }
.chip--bedrock { color: #9be7a8; border-color: rgba(95, 220, 138, .35); }
.chip--on { color: #c9cdff; border-color: rgba(88, 101, 242, .45); }

.tier-progress { display: grid; gap: 6px; max-width: 560px; }
.tier-progress__label { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12.5px; }
.tier-progress__label b { color: var(--text); }
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--tier); }

/* ---------- stats (memakai .tile dari site.css) */
.dash-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dash-stats .tile strong { font-size: 20px; }

/* ---------- tabs */
.tabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap; transition: color .15s, background-color .15s; }
.tab .ico { width: 16px; height: 16px; }
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.is-active { color: #1a1408; background: var(--gold); }
.tab__dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.panel { display: grid; gap: 16px; }

/* ---------- boxes & lists */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.box { min-width: 0; padding: 20px 22px; }
.box__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.box__head h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.box__head h3 .ico { color: var(--gold); }
.box__head a { color: var(--teal); font-size: 13px; font-weight: 700; }
.box__head .muted { font-size: 12.5px; }

.list { display: grid; margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; padding-top: 0; }
.list li > div:first-child { display: grid; gap: 2px; min-width: 0; }
.list b { display: flex; align-items: center; gap: 8px; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.list small { color: var(--muted); font-size: 12px; }
.list__end { display: flex; flex: none; align-items: center; gap: 10px; }

.kv { display: grid; margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.kv div:first-child { border-top: 0; padding-top: 0; }
.kv dt { flex: none; color: var(--muted); }
.kv dd { min-width: 0; margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.ptype { display: inline-block; flex: none; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ptype--ban { color: #ffb0b0; background: rgba(255, 107, 107, .16); }
.ptype--mute { color: #ffc98a; background: rgba(255, 159, 67, .16); }
.ptype--kick { color: #a9c4ff; background: rgba(92, 124, 250, .18); }
.ptype--warning { color: #ffe58a; background: rgba(255, 212, 59, .14); }

.empty { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; text-align: center; }
.empty .ico { width: 32px; height: 32px; margin-bottom: 4px; color: var(--gold-lo); }
.empty h4 { font-size: 15px; }
.empty p { max-width: 360px; color: var(--muted); font-size: 13.5px; }
.empty a { color: var(--teal); font-weight: 700; }

.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-stats--4 { grid-template-columns: repeat(4, 1fr); }
.mini-stats .card { display: grid; gap: 6px; padding: 16px 18px; }
.mini-stats span { justify-self: start; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mini-stats strong { font-size: 20px; font-weight: 800; }

/* ---------- table */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { padding: 0 10px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-2); }

/* ---------- punishment timeline */
.timeline { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 18px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline__item { --c: var(--muted); position: relative; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.timeline__item::before { content: ""; position: absolute; left: -19px; top: 18px; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.timeline__item--ban { --c: #ff6b6b; }
.timeline__item--mute { --c: #ff9f43; }
.timeline__item--kick { --c: #5c7cfa; }
.timeline__item--warning { --c: #ffd43b; }
.timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timeline__head time { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.timeline__reason { margin: 8px 0 4px; font-weight: 700; }
.timeline__item small { color: var(--muted); font-size: 12.5px; }
.timeline__item small b { color: var(--text); }

/* ---------- kingdom */
.kbanner { --k: var(--gold); display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--k) 30%, var(--line)); border-radius: var(--radius-sm); background: linear-gradient(110deg, color-mix(in srgb, var(--k) 14%, transparent), transparent 70%); }
.kbanner__crest {
    flex: none; display: grid; place-items: center; width: 56px; height: 64px;
    font-family: var(--pixel); font-size: 15px; color: #111; background: var(--k);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.kbanner__body { flex: 1; min-width: 0; }
.kbanner h4 { margin-bottom: 4px; font-size: 18px; }
.kbanner h4 span { color: var(--k); font-family: var(--pixel); font-size: 14px; font-weight: 400; }
.kbanner p { color: var(--muted); font-size: 13.5px; }
.kbanner__desc { margin-top: 8px !important; color: var(--text) !important; }
.kbanner__rank { flex: none; text-align: center; font-family: var(--pixel); font-size: 24px; line-height: 1; color: var(--k); }
.kbanner__rank small { display: block; margin-bottom: 4px; color: var(--muted); font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kbanner--compact .kbanner__crest { width: 44px; height: 50px; font-size: 13px; }
.kbanner--compact h4 { font-size: 16px; }
.kbanner--compact .kbanner__rank { font-size: 20px; }
.kfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.kfacts span { padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--muted); font-size: 12px; text-align: center; }
.kfacts b { display: block; color: var(--text); font-size: 15px; }

.kstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kstats .card { display: grid; gap: 2px; min-width: 0; padding: 16px 18px; }
.kstats .ico { margin-bottom: 6px; color: var(--gold); }
.kstats span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kstats strong { overflow: hidden; font-size: 20px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.kstats small { color: var(--muted); font-size: 12px; }

.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.member-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.member-chip img { flex: none; border-radius: 6px; image-rendering: pixelated; }
.member-chip div { display: grid; min-width: 0; }
.member-chip b { overflow: hidden; font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.member-chip small { color: var(--muted); font-size: 12px; }

/* ---------- economy */
.econ-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.econ-card { --c: var(--gold); display: grid; gap: 6px; padding: 22px 24px; border-top: 3px solid var(--c); }
.econ-card span { display: flex; align-items: center; gap: 8px; color: var(--c); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.econ-card strong { font-size: 28px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.econ-card small { color: var(--muted); font-size: 12.5px; }
.econ-card--gold { --c: #f2c94c; }
.econ-card--teal { --c: var(--teal); }

/* ================================================================ responsive */
@media (max-width: 1080px) {
    /* 5 tiles: 3 on top, 2 wider below */
    .dash-stats { grid-template-columns: repeat(6, 1fr); }
    .dash-stats .tile { grid-column: span 2; }
    .dash-stats .tile:nth-child(n + 4) { grid-column: span 3; }
    .kstats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .akun:has(> .dash) { padding-top: 20px; }
    .grid-2, .econ-hero { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-stats .tile, .dash-stats .tile:nth-child(n + 4) { grid-column: auto; }
    .dash-stats .tile:last-child { grid-column: 1 / -1; }
    .mini-stats, .mini-stats--4 { grid-template-columns: repeat(2, 1fr); }
    .hero-card { flex-direction: column; align-items: center; gap: 14px; padding: 20px 18px; text-align: center; }
    .hero-card__skin { width: 96px; }
    .hero-card__skin img { width: 48px; }
    .hero-card__main { width: 100%; }
    .hero-card__top, .chips { justify-content: center; }
    .hero-card__name { font-size: 22px; }
    .tier-progress { width: 100%; margin-inline: auto; }
    .tier-progress__label { flex-direction: column; align-items: center; gap: 2px; }
    /* tables become stacked cards */
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .table tr:last-child { border-bottom: 0; }
    .table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px; border: 0; text-align: right; }
    .table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700; text-align: left; }
    .mini-stats strong { font-size: 16px; }
}
@media (max-width: 600px) {
    .akun { padding: 28px 0; }
    .login__card { padding: 24px 18px; }
    .box { padding: 16px; }
    .kfacts { grid-template-columns: repeat(2, 1fr); }
    .kbanner { flex-wrap: wrap; }
}
@media (max-width: 340px) {
    .dash-stats { grid-template-columns: 1fr; }
    .dash-stats .tile:last-child { grid-column: auto; }
}