/* ===========================================================================
   MMOItem Dashboard — lớp giao diện riêng, đặt trên bộ system của Taste Skill.
   Một bảng màu (blue-black-cornflower), một bộ bán kính (--r-sm/md/lg/bàn tay),
   một cặp nút (btn--primary + btn--secondary), một công thức card (panel/card).
   Chữ nhỏ nhất 13px, không có accent tím.
   =========================================================================== */

:root {
    --p-bg: #0a0d14; --p-surface: #131824; --p-ink: #e9edf3; --p-muted: #8891a1;
    --p-accent: #5ab9fc; --p-accent-ink: #0a0d14; --p-action: #5ab9fc; --p-action-ink: #0a0d14;
    --p-inv-bg: #e9edf3; --p-inv-surface: #d7dbe1; --p-inv-ink: #0a0d14; --p-inv-muted: #54575f;
    --p-inv-accent: #0a0d14; --p-inv-accent-ink: #e9edf3; --p-inv-action: #0a0d14; --p-inv-action-ink: #e9edf3;

    --font-display: "Sora", system-ui, sans-serif;
    --font-text: "Figtree", system-ui, sans-serif;
    --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --display-weight: 500;
    --display-tracking: -0.035em;

    /* token riêng của dashboard, quy về token hệ thống */
    --danger: #ff7d7d;
    --warn: #ffc46b;
    --ok: #63d9a1;
    --topbar-h: 64px;
    --side-w: 264px;
    /* một nhịp lề cho mọi trang: topbar, toolbar, page-head, lưới, panel */
    --page-x: clamp(16px, 2.4vw, 24px);
    --page-y: 24px;
    --card-gap: 12px;
}

[hidden] { display: none !important; }

/* bộ hệ thống đặt --bg bằng màu giấy của mặt đất (.bg-paper); dashboard tự giữ nền tối của mình
   và tự vẽ khung .panel, nên trả các token về bảng màu và không nạp cards.css. */
:root, body { --bg: #0a0d14; --surface: #131824; --ink: #e9edf3; --muted: #8891a1; --card: #131824; }
main, .main, .shell, .panel, .sidebar, .topbar { --bg: #0a0d14; --surface: #131824; --ink: #e9edf3; --muted: #8891a1; --card: #131824; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 400 var(--t-body)/1.55 var(--font-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in oklab, var(--accent) 34%, transparent); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--ink) 16%, transparent); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--ink) 26%, transparent); }
::-webkit-scrollbar-track { background: transparent; }

code { font-family: var(--font-mono); font-size: 0.85em; padding: 1px 5px; border-radius: 5px; background: color-mix(in oklab, var(--ink) 8%, transparent); }

/* ------------------------------------------------------------ chữ & khối */

.kicker {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font: 500 var(--t-label)/1.4 var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--muted);
}
.lead { margin: 0; font-size: var(--t-lead); line-height: 1.55; color: color-mix(in oklab, var(--ink) 82%, var(--bg)); max-width: 54ch; text-wrap: pretty; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--muted); flex: none; }
.dot.is-on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 22%, transparent); }
.dot.is-off { background: color-mix(in oklab, var(--ink) 28%, var(--bg)); }

.mark {
    display: inline-grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: var(--r-md);
    background: color-mix(in oklab, var(--accent) 16%, var(--surface));
    color: var(--accent); font-size: 18px; line-height: 1;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 34%, transparent);
}

/* ================================================================ LOGIN */

/* cổng vào: một thẻ 400px giữa màn hình — dashboard nội bộ, một việc duy nhất */
.login {
    min-height: 100svh;
    display: grid; place-items: center;
    padding: 32px 16px;
    background:
        radial-gradient(120% 80% at 82% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 58%),
        var(--bg);
}
.login__card {
    width: min(100%, 400px);
    display: grid; gap: 14px;
    padding: 28px 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
}
.login__brand { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }
.login__wordmark { font: 500 var(--t-card)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.login__wordmark .muted { font-size: var(--t-label); font-weight: 400; font-family: var(--font-mono); letter-spacing: 0; }
#login-h { margin: 0; font: 500 20px/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.login__lead { margin: 0; font-size: var(--t-small); line-height: 1.5; color: color-mix(in oklab, var(--ink) 84%, var(--bg)); }
.login__fact {
    margin: 2px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
    font: 400 var(--t-label)/1.4 var(--font-mono); color: var(--muted); text-align: center;
}
.login__points {
    list-style: none; margin: 2px 0 0; padding: 0;
    display: grid; gap: 7px;
}
.login__points li {
    position: relative; padding-left: 20px;
    font-size: var(--t-label); line-height: 1.5;
    color: color-mix(in oklab, var(--ink) 76%, var(--bg));
}
.login__points li::before {
    content: "◇"; position: absolute; left: 0; top: 0;
    color: var(--accent); font-family: var(--font-mono);
}

.login__form { display: grid; gap: 12px; padding-top: 6px; }
.login__submit { width: 100%; }
.login__status { margin: 0; min-height: 1.4em; font-size: var(--t-label); color: var(--muted); }
.login__status:empty { min-height: 0; }
.login__error { margin: 0; }
.login__error:not([hidden]) { display: flex; }

@media (max-width: 480px) {
    .login { padding: 20px 14px; }
    .login__card { padding: 22px 18px 18px; }
}

/* ================================================================== APP */

.app {
    display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr);
    min-height: 100vh;
}

/* ---------------------------------------------------------------- sidebar */

.sidebar {
    position: sticky; top: 0; align-self: start;
    height: 100vh; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 12px 12px;
    border-right: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 94%, var(--surface));
    overflow: hidden;
}

.side-brand {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 2px 8px 12px; border: 0; background: none; color: var(--ink);
    text-align: left; cursor: pointer;
}
.side-brand .mark { width: 32px; height: 32px; font-size: 16px; border-radius: var(--r-sm); }
.side-brand__text { display: grid; line-height: 1.15; min-width: 0; }
.side-brand__name { font: 500 var(--t-small)/1.15 var(--font-display); letter-spacing: var(--display-tracking); }
.side-brand:hover .side-brand__name { color: var(--accent); }
.bsub { font: 400 var(--t-label)/1.3 var(--font-mono); color: var(--muted); }

.side-server-wrap { position: relative; margin-bottom: 4px; }
.side-server {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 44px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink); cursor: pointer;
    font: 500 var(--t-small)/1.2 var(--font-text);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.side-server:hover { border-color: var(--line-strong); background: color-mix(in oklab, var(--surface) 90%, var(--ink)); }
.ss-icon {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px; border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent);
}
.ss-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-swap { flex: none; color: var(--muted); }

.side-sec {
    padding: 12px 10px 4px;
    font: 500 var(--t-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.side-nav {
    display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--muted) 34%, transparent) transparent;
}
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--muted) 34%, transparent);
    border-radius: 999px;
}
.side-nav::-webkit-scrollbar-track { background: transparent; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.side-foot {
    flex: none; margin-top: 0; display: flex; align-items: center; gap: 8px;
    padding: 16px 10px 4px;
    border-top: 1px solid var(--line);
    font: 400 var(--t-label)/1.4 var(--font-mono); color: var(--muted);
}

/* ---------------------------------------------------------------- main col */

.main-col { min-width: 0; display: flex; flex-direction: column; }

/* Tab đầu tiên của app: nhảy thẳng vào nội dung, chỉ hiện khi được focus. */
.app-skip {
    position: fixed; left: 12px; top: 12px; z-index: 90;
    display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font: 500 var(--t-small)/1 var(--font-text); text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
}
.app-skip:focus-visible { transform: none; }

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    height: var(--topbar-h); padding: 0 max(12px, var(--page-x));
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.topbar__spacer { flex: 1; }

.crumbs {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    font: 400 var(--t-label)/1 var(--font-mono); color: var(--muted);
}
.crumb { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb.current { color: var(--ink); }
.crumb-sep { color: color-mix(in oklab, var(--muted) 55%, transparent); }
.crumb--link { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.crumb--link:hover { color: var(--ink); }

.search-wrap {
    display: flex; align-items: center; gap: 8px; flex: none;
    width: min(320px, 30vw); height: 36px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--muted);
}
.search-wrap:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in oklab, var(--action) 18%, transparent); }
.search-wrap input {
    flex: 1; min-width: 0; border: 0; background: none; outline: none;
    color: var(--ink); font: 400 var(--t-small)/1.4 var(--font-text);
}
.search-wrap input::placeholder { color: var(--muted); }

.who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-small); color: var(--muted); }
.who .ic { flex: none; }
.who__name { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch; }
.chip {
    flex: none; padding: 2px 7px; border-radius: 999px;
    font: 500 var(--t-label)/1.4 var(--font-mono); font-style: normal;
    color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent);
}

.toolbar {
    position: sticky; top: var(--topbar-h); z-index: 19;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    min-height: 52px; padding: 8px var(--page-x);
    border-bottom: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 94%, var(--surface));
}
.toolbar-stat { font: 400 var(--t-label)/1.4 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.toolbar .spacer { flex: 1; min-width: 0; }
.toolbar .btn { flex: none; }

.icon-btn {
    display: inline-grid; place-items: center; flex: none;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid transparent; border-radius: var(--r-sm);
    background: none; color: var(--muted); cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); border-color: var(--line); }
.icon-btn:active { transform: scale(.96); }

/* menu máy chủ dưới nút bánh răng */
.gear-menu {
    position: absolute; top: calc(var(--topbar-h) - 8px); right: var(--page-x); z-index: 30;
    width: min(300px, calc(100vw - 24px));
    display: flex; flex-direction: column; gap: 2px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
    box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.8);
}
.gear-menu__title { margin: 0; padding: 6px 10px; font: 500 var(--t-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

/* menu mở ngay dưới nút đổi máy chủ trong sidebar */
.gear-menu--side {
    top: calc(100% + 6px); left: 0; right: auto;
    width: 100%; min-width: 220px; max-width: 300px;
}
.gear-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px;
    border: 0; border-radius: var(--r-sm); background: none; color: var(--ink);
    font: 400 var(--t-small)/1.3 var(--font-text); text-align: left; cursor: pointer;
}
.gear-menu__item:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.gear-menu__item.is-current { color: var(--accent); }
.gear-menu hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- shell */

.nav-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 2px; align-items: center; }
.nav-row .nav-item { width: 100%; }
.nav-toggle {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid transparent; border-radius: var(--r-sm);
    background: none; color: var(--muted); cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-toggle:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); }
.nav-toggle:active { transform: scale(.96); }

.subnav { display: flex; flex-direction: column; gap: 1px; padding-left: 8px; margin-left: 8px; border-left: 1px solid var(--line); }
.subnav__empty { margin: 4px 0 4px 10px; font: 400 var(--t-label)/1.4 var(--font-mono); color: var(--muted); }
.nav-item--sub { min-height: 32px; padding: 0 10px; font-size: var(--t-label); }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 36px; padding: 0 12px;
    border: 1px solid transparent; border-radius: var(--r-sm);
    background: none; color: color-mix(in oklab, var(--ink) 78%, var(--bg));
    font: 400 var(--t-small)/1.3 var(--font-text); text-align: left; cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-item__ic { color: var(--muted); transition: color var(--dur) var(--ease); }
.nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }
.nav-item:hover .nav-item__ic { color: var(--ink); }
.nav-item.active {
    background: color-mix(in oklab, var(--accent) 12%, transparent);
    color: var(--ink);
    border-color: color-mix(in oklab, var(--accent) 26%, transparent);
}
.nav-item.active .nav-item__ic { color: var(--accent); }
.nav-item .count { font: 400 var(--t-label)/1 var(--font-mono); color: var(--muted); }

/* nội dung dùng trọn bề ngang còn lại sau sidebar — không căn giữa để hở khoảng trống */
.main {
    min-width: 0; flex: 1; width: 100%; padding-bottom: 64px; outline: none;
}

/* Nút và tiêu đề: Title Case (viết hoa chữ đầu sau mỗi dấu cách).
   Nội dung câu (mô tả, gợi ý, tên vật phẩm…) giữ nguyên, chỉ viết hoa chữ đầu
   như văn bản thường — nên các lớp nội dung KHÔNG nằm trong danh sách này. */
.page-head h2,
h1,
.modal__head h3,
.panel-head,
.panel h3,
.tabs .tab,
.btn,
.nav-item__label,
th,
.chip,
.stat-row__name,
.stat-pick__name,
.gear-menu__title,
.crumbs .crumb,
.field > .field__label,
.field > span:not(.field__hint) {
    text-transform: capitalize;
}

/* thanh tiêu đề trang */
.page-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    padding: 20px var(--page-x) 14px;
}
.page-head h2 {
    margin: 0; font: var(--display-weight) var(--t-h3)/1.15 var(--font-display);
    letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere;
}
.page-head .sub { font-size: var(--t-label); color: var(--muted); }
.page-head .sub.mono { font-family: var(--font-mono); }
.page-head .spacer { flex: 1; min-width: 0; }

.stat-search input:focus-visible {
    outline: none; border-color: var(--action);
    box-shadow: 0 0 0 1px var(--action), 0 0 0 4px color-mix(in oklab, var(--action) 20%, transparent);
}

/* ---------------------------------------------------------------- buttons */
/* chỉ hai kiểu: btn--primary (hành động chính) và btn--secondary (hành động phụ).
   btn--danger là biến thể của secondary dành cho việc xoá; btn--icon là nút tròn vuông. */

.btn.btn--danger { background: var(--bg); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
.btn.btn--danger:hover { background: color-mix(in oklab, var(--danger) 12%, var(--bg)); border-color: color-mix(in oklab, var(--danger) 60%, transparent); }
.btn--icon { width: var(--btn-h); padding: 0; font-size: 18px; }
.btn--icon.btn--secondary { width: 40px; height: 40px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* vòng focus chung: rõ trên nền tối, không bị cắt */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- panel */
/* một công thức: .panel = khung chứa, .panel-head = dòng tiêu đề, .panel-body = nội dung */

.panel {
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: clip;
    position: static;
    padding: 0;
    isolation: auto;
    flex: none;
}
.panel::before, .panel::after { content: none; }

.panel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font: 500 var(--t-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.panel-body { padding: 16px; min-width: 0; }
.panel-body--flush { padding: 0; }
.panel-body > * + * { margin-top: 10px; }

/* ---------------------------------------------------------------- servers */

.server-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--card-gap);
    padding: var(--page-y) var(--page-x) 48px;
}

.server-card {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    cursor: pointer; min-height: 80px;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.server-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--accent) 40%, transparent);
    background: color-mix(in oklab, var(--surface) 94%, var(--ink));
    box-shadow: 0 16px 32px -20px rgb(0 0 0 / 0.9);
}
.server-card:active { transform: translateY(0); }
.server-card .logo {
    display: grid; place-items: center; overflow: hidden;
    width: 44px; height: 44px; border-radius: var(--r-md);
    background: color-mix(in oklab, var(--accent) 12%, var(--bg));
    color: var(--accent); font-size: 20px;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 24%, transparent);
}
.server-card .logo img { width: 100%; height: 100%; object-fit: cover; }
.server-card .meta { min-width: 0; display: grid; gap: 2px; }
.server-card .meta h3 { margin: 0; font: 500 var(--t-body)/1.3 var(--font-text); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-card .meta p { margin: 0; font: 400 var(--t-label)/1.35 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.server-card .state { font: 400 var(--t-label)/1.4 var(--font-mono); white-space: nowrap; }
.server-card .state.is-on { color: var(--ok); }
.server-card .state.is-off { color: var(--muted); }

/* ---------------------------------------------------------------- items */

.item-grid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap);
    padding: var(--page-y) var(--page-x) 48px;
}
/* Tối đa 4 cột: thẻ rộng vừa đủ để tooltip đọc thoải mái. */
@media (min-width: 600px) { .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1086px) { .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Thanh lọc/sắp xếp trên lưới: nhóm tự tạo (chips) + kiểu sắp xếp. */
.items-bar {
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
    padding: 0 var(--page-x) 14px;
}
.items-bar__groups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.items-bar__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.items-bar__hint { font: 400 var(--t-label)/1.4 var(--font-text); color: var(--muted); }
.items-bar__sort {
    min-height: var(--btn-h-sm); padding: 0 10px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-small)/1.4 var(--font-text);
}
@media (max-width: 900px) { .items-bar__hint { display: none; } }

.group-chip {
    display: inline-flex; align-items: stretch; overflow: hidden;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: color-mix(in oklab, var(--surface) 88%, var(--bg));
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.group-chip:hover { border-color: color-mix(in oklab, var(--ink) 42%, transparent); }
.group-chip.is-active {
    border-color: color-mix(in oklab, var(--accent) 72%, transparent);
    background: color-mix(in oklab, var(--accent) 16%, var(--surface));
}
.group-chip.is-drop {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 32%, transparent);
}
.group-chip__main {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 30px; padding: 0 12px;
    border: 0; background: none;
    color: var(--ink); font: 500 var(--t-label)/1 var(--font-text); cursor: pointer;
}
.group-chip--editable .group-chip__main { padding-right: 8px; }
.group-chip__name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-chip__count { font: 400 var(--t-label)/1 var(--font-mono); color: var(--muted); }
.group-chip__act {
    width: 26px; border: 0; border-left: 1px solid var(--line);
    background: none; color: var(--muted); cursor: pointer; font: 400 var(--t-label)/1 var(--font-text);
}
.group-chip__act:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }
.group-add { gap: 6px; }

/* thẻ item: khung ngoài dùng đúng kiểu .mc-tooltip, bọc cả icon lẫn tooltip */
.item-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--bg) 88%, black);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.45), 0 12px 28px rgb(0 0 0 / 0.4);
    cursor: pointer; text-align: left;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.item-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--accent) 55%, transparent);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.45), 0 18px 32px -20px rgb(0 0 0 / 0.9);
}
.item-card:active { transform: translateY(0) scale(0.995); }
.item-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* kéo thả: thẻ đang kéo mờ đi, thẻ đích hiện vạch chèn bên trái/phải */
.item-card[draggable="true"] { cursor: grab; }
.item-card.is-dragging { opacity: 0.45; }
.item-card.drop-before::after,
.item-card.drop-after::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 3px;
    background: var(--accent);
    box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 70%, transparent);
}
.item-card.drop-before::after { left: 0; }
.item-card.drop-after::after { right: 0; }

/* icon pixel ở nửa trên, tooltip ở nửa dưới, chung một khung */
.item-card .item-visual {
    padding: 14px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(70% 70% at 50% 40%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
        color-mix(in oklab, var(--bg) 60%, var(--surface));
}
.item-card .item-visual img { width: 64px; height: 64px; }

.item-card .item-card__tip {
    flex: 1;
    margin: 0; padding: 10px 12px 12px;
    background: none; border: 0; box-shadow: none;
    font: inherit; white-space: normal; word-break: normal;
}
.item-card .mc-tooltip {
    padding: 0; background: none; border: 0; box-shadow: none;
    font-size: 12.5px; line-height: 1.25; border-radius: 0;
}
.item-card .mc-name {
    display: block; overflow-wrap: anywhere;
    font: 700 12.5px/1.4 var(--font-mono); color: var(--ink);
}

/* ---------------------------------------------------------------- item view */

.item-view {
    display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px;
    padding: var(--page-y) var(--page-x) 48px;
    align-items: start;
}

.tooltip-wrap { position: sticky; top: calc(var(--topbar-h) + 76px); display: flex; flex-direction: column; gap: 16px; }

.item-visual {
    display: grid; place-items: center; padding: 24px;
    background:
        radial-gradient(70% 70% at 50% 40%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
        color-mix(in oklab, var(--bg) 60%, var(--surface));
    border-bottom: 1px solid var(--line);
}
.item-visual img { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.6)); }

/* Cảnh báo preview: item dùng stat/lore-format mà máy chủ không có. */
.preview-notice {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in oklab, var(--warn, #d9a94a) 45%, transparent);
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--warn, #d9a94a) 10%, transparent);
    font-size: var(--t-label);
    line-height: 1.45;
    color: var(--text-muted, var(--text));
}
.preview-notice p { margin: 0; }
.preview-notice p + p { margin-top: 4px; }
.preview-notice code {
    font-family: var(--font-mono);
    font-size: 0.95em;
    padding: 0 4px;
    border-radius: 4px;
    background: rgb(0 0 0 / 0.28);
}

/* tooltip vật phẩm: khung tối kiểu trong game, nhưng dùng đúng bảng màu dashboard */
.mc-tooltip {
    padding: 10px 12px;
    background: color-mix(in oklab, var(--bg) 88%, black);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.45), 0 12px 28px rgb(0 0 0 / 0.4);
    /* Trong game mỗi dòng cao đúng 10 đơn vị font, chữ 8 đơn vị → bước dòng 1.25.
       Để 1.6 thì tooltip cao hơn hẳn bản gốc dù nội dung giống nhau. */
    font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.25;
    white-space: pre-wrap; word-break: break-word;
    image-rendering: pixelated;
}
.mc-tooltip .mc-name { font-weight: 700; }
/* Chữ không có mã màu trong game là trắng; MMOItems còn chèn §f đầu mỗi dòng. */
.mc-tooltip .mc-line { color: #fff; }
/* Dòng trống trong lore (bar rỗng, dòng ngăn cách) vẫn phải cao bằng một dòng
   như trong game; div rỗng mặc định cao 0 nên chèn một khoảng trắng. */
.mc-tooltip .mc-line:empty::before { content: '\00a0'; }
.mc-tooltip .mc-line b { color: #fff; font-weight: 500; }
.mc-tooltip .mc-empty { color: #8a8a96; font-style: italic; }
.mc-tooltip .muted { color: #8f8fa0; }

/* Glyph bitmap của resource pack: system.css đặt img{display:block} nên phải
   trả về inline để icon nằm cùng dòng chữ như trong game. */
.mc-tooltip img.mc-glyph {
    display: inline-block;
    max-width: none;
    image-rendering: pixelated;
}

.tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--surface) 92%, var(--bg)); }
.tab {
    height: 40px; padding: 0 14px;
    border: 0; border-bottom: 2px solid transparent; background: none;
    color: var(--muted); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tab:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
/* Design system tô nền đặc cho tab aria-selected; ở đây tab nằm trong panel nên
   chỉ cần gạch chân, giữ đúng bảng màu dashboard. */
.tabs .tab[aria-selected="true"] {
    background: transparent; color: var(--ink);
    border: 0; border-bottom: 2px solid var(--accent); border-radius: 0;
}
.tabs .tab[aria-selected="true"]:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); }

/* ô chỉ số: nhãn trên, giá trị dưới, cùng một chiều cao */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; padding: 16px; }
.stats-editor > .form-grid { padding-top: 0; }

.stat-group {
    grid-column: 1 / -1;
    margin-top: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font: 500 var(--t-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.stat-group:first-child { margin-top: 0; }

.stat-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat-field.wide { grid-column: 1 / -1; }
.stat-field label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: var(--t-label); font-weight: 500; color: var(--ink); }
.stat-field label span { min-width: 0; overflow-wrap: anywhere; }
.stat-field label em { font: 400 var(--t-label)/1.4 var(--font-mono); font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; margin-left: auto; }
.stat-field :is(input, select, textarea) {
    width: 100%; min-height: 40px; padding: 0 10px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-small)/1.4 var(--font-text);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat-field textarea { min-height: 84px; padding: 8px 10px; font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.6; resize: vertical; }
.stat-field :is(input, select, textarea):hover { border-color: color-mix(in oklab, var(--ink) 42%, transparent); }
.stat-field :is(input, select, textarea):focus-visible {
    outline: none; border-color: var(--action);
    box-shadow: 0 0 0 1px var(--action), 0 0 0 4px color-mix(in oklab, var(--action) 18%, transparent);
}
.stat-field.empty :is(input, select) { color: var(--muted); border-style: dashed; }
.stat-field textarea.bad { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.stat-field.empty.hidden { display: none; }
.stat-field .link-row { display: flex; gap: 8px; align-items: center; }
.stat-field .link-row .sub { font: 400 var(--t-label)/1.4 var(--font-mono); color: var(--muted); }

.stat-search {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px 8px;
}
.stat-search input {
    flex: 1; min-height: var(--btn-h-sm); padding: 0 12px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink); font: 400 var(--t-small)/1.4 var(--font-text);
}
.stat-search .count { font: 400 var(--t-label)/1 var(--font-mono); color: var(--muted); white-space: nowrap; }

.json-editor { padding: 16px; }
.json-editor textarea {
    width: 100%; min-height: 360px; padding: 12px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-label)/1.65 var(--font-mono); resize: vertical;
}
.json-editor textarea:focus-visible {
    outline: none; border-color: var(--action);
    box-shadow: 0 0 0 1px var(--action), 0 0 0 4px color-mix(in oklab, var(--action) 18%, transparent);
}

/* ---------------------------------------------------------------- sim */

.sim {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #0b1119; border-radius: var(--r-md); overflow: hidden;
    border: 1px solid var(--line);
}
.sim canvas { display: block; width: 100%; height: 100%; }
.sim-title {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 8px; border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    border: 1px solid var(--line);
    font: 400 var(--t-label)/1 var(--font-mono); color: var(--ink);
    backdrop-filter: blur(4px);
}
.sim-hud {
    position: absolute; inset: auto 0 0 0;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 10px;
    background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
}
.sim-chip {
    padding: 4px 8px; border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    border: 1px solid var(--line);
    font: 400 var(--t-label)/1.1 var(--font-mono); color: var(--ink);
    white-space: nowrap; backdrop-filter: blur(4px);
}
.sim-hud .btn { height: 32px; padding: 0 12px; font-size: var(--t-label); }

.sim-compact { aspect-ratio: 3 / 2; }
.sim-compact .sim-title { display: none; }
.sim-compact .sim-hud { padding: 6px 8px; gap: 4px; }
.sim-compact .sim-chip { font-size: 11px; padding: 3px 6px; }
.sim-compact .sim-hud .btn { height: 28px; padding: 0 10px; font-size: 11px; }

/* ---------------------------------------------------------------- skills */

.skill-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--card-gap);
    padding: var(--page-y) var(--page-x) 48px;
}

.skill-card {
    display: flex; flex-direction: column; gap: 6px; min-height: 128px;
    padding: 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.skill-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 40%, transparent); background: color-mix(in oklab, var(--surface) 94%, var(--ink)); }
.skill-card:active { transform: translateY(0); }
.skill-card:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.skill-card h4 { margin: 0; font: 500 var(--t-body)/1.3 var(--font-text); color: var(--ink); }
.skill-card p { margin: 0; font: 400 var(--t-label)/1.4 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }

/* Ô tìm kỹ năng ở đầu trang Kỹ Năng. */
.skill-search {
    flex: none; width: min(320px, 40vw); height: 36px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    font: 400 var(--t-small)/1.4 var(--font-text); outline: none;
}
.skill-search::placeholder { color: var(--muted); }
.skill-search:focus { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in oklab, var(--action) 18%, transparent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.tag {
    padding: 2px 8px; border-radius: 999px;
    background: color-mix(in oklab, var(--ink) 7%, transparent);
    border: 1px solid var(--line);
    font-size: var(--t-label); color: var(--muted); white-space: nowrap;
}

/* ---------------------------------------------------------------- table */

.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font: 500 var(--t-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.table td.row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- linh tinh */

.row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pad { padding: var(--page-y) var(--page-x) 48px; }
.pad > * + * { margin-top: 16px; }

.empty-state {
    grid-column: 1 / -1;
    padding: 48px 24px; text-align: center;
    border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
    color: var(--muted);
}
.empty-state h3 { margin: 0 0 6px; font: 500 var(--t-card)/1.3 var(--font-text); color: var(--ink); }
.empty-state p { margin: 0 auto; max-width: 46ch; font-size: var(--t-small); }

.banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--r-sm);
    font-size: var(--t-small);
}
.banner--ok { background: color-mix(in oklab, var(--ok) 12%, transparent); border: 1px solid color-mix(in oklab, var(--ok) 36%, transparent); color: var(--ok); }
.banner--warn { background: color-mix(in oklab, var(--warn) 12%, transparent); border: 1px solid color-mix(in oklab, var(--warn) 36%, transparent); color: var(--warn); }

kbd {
    padding: 1px 6px; border-radius: 5px;
    background: var(--bg); border: 1px solid var(--line-strong); border-bottom-width: 2px;
    font: 400 var(--t-label)/1.4 var(--font-mono);
}

/* mặt đất thứ hai của trang Nhật ký đồng bộ (moment iris-opens mở ra trên nó) */
.sync-ground {
    position: relative;
    display: grid; align-content: center;
    min-height: min(62vh, 520px);
    margin-top: 24px;
    padding-block: clamp(32px, 6vw, 72px);
    background: color-mix(in oklab, var(--surface) 62%, var(--bg));
    border-block: 1px solid var(--line);
}
.sync-ground__inner { display: grid; gap: 14px; align-content: center; min-height: 0; }
.sync-ground__inner > h3 {
    margin: 0; color: var(--ink);
    font: 500 var(--t-h3)/1.18 var(--font-display); letter-spacing: -0.02em;
}
.sync-ground__inner > .lead { max-width: 58ch; }
.sync-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px 24px; margin: 8px 0 0; }
.sync-facts dt { margin: 0; font: 500 var(--t-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.sync-facts dd { margin: 2px 0 0; font-size: var(--t-body); color: var(--ink); }

/* toast */
.toasts {
    position: fixed; right: 16px; bottom: 16px; z-index: 80;
    display: flex; flex-direction: column; gap: 8px;
    width: min(380px, calc(100vw - 32px));
}
.toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
    box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.9);
    font-size: var(--t-small); color: var(--ink);
    animation: toast-in 220ms var(--ease);
}
.toast__dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--accent); flex: none; }
.toast--error { border-color: color-mix(in oklab, var(--danger) 50%, transparent); }
.toast--error .toast__dot { background: var(--danger); }
.toast--warn { border-color: color-mix(in oklab, var(--warn) 50%, transparent); }
.toast--warn .toast__dot { background: var(--warn); }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hidden { display: none !important; }

/* ---------------------------------------------------------------- hẹp */

@media (max-width: 1099px) {
    .item-view { grid-template-columns: minmax(0, 1fr); }
    .tooltip-wrap { position: static; }
    .tooltip-wrap .panel:first-child { display: grid; grid-template-columns: 140px minmax(0, 1fr); }
    .tooltip-wrap .panel:first-child .item-visual { border-bottom: 0; border-right: 1px solid var(--line); }
}

@media (max-width: 1439px) {
    .crumbs .crumb:not(.crumb--home):not(.current), .crumbs .crumb-sep { display: none; }
    .crumbs .crumb--home::after { content: ' /'; color: color-mix(in oklab, var(--muted) 55%, transparent); }
    .search-wrap { width: min(280px, 26vw); }
}

@media (max-width: 1199px) {
    .crumbs { display: none; }
    .who__name { display: none; }
}

@media (max-width: 899px) {
    .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }

    .sidebar {
        position: static; height: auto; max-height: none;
        display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center;
        padding: 10px 12px;
        border-right: 0; border-bottom: 1px solid var(--line);
        overflow: visible;
    }
    .side-brand { grid-column: 1; padding: 0; width: auto; }
    .side-brand__text { display: none; }
    .side-server-wrap { grid-column: 2; margin: 0; min-width: 0; }
    .side-sec, .side-foot { display: none; }
    .side-nav {
        grid-column: 1 / -1;
        flex-direction: row; gap: 6px;
        overflow-x: auto; scrollbar-width: none;
    }
    .side-nav::-webkit-scrollbar { display: none; }
    .sidenav { display: contents; }
    .nav-row { display: flex; flex: none; align-items: center; gap: 2px; }
    .nav-item { width: auto; flex: none; min-height: 44px; padding: 0 12px; }
    .nav-item .count { margin-left: 2px; }
    .subnav {
        flex-direction: row; flex: none; gap: 6px;
        padding-left: 0; margin-left: 0; border-left: 0;
    }
    .nav-item--sub { min-height: 44px; }

    .crumbs { display: none; }
    .search-wrap { flex: 1; width: auto; min-width: 0; }
    .who { display: none; }
}

@media (max-width: 599px) {
    /* bảng: mỗi dòng thành một thẻ, nhãn lấy từ data-label */
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table thead { display: none; }
    .table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
    .table tbody tr:last-child { border-bottom: 0; }
    .table td {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 16px; padding: 3px 0; border: 0; text-align: right;
        flex-wrap: wrap; overflow-wrap: anywhere;
    }
    .table td::before {
        content: attr(data-label); flex: none;
        font: 500 var(--t-label)/1.4 var(--font-mono);
        text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
    }
    .table td.row { justify-content: flex-end; flex-wrap: wrap; }
    .table td.row::before { margin-right: auto; }
    .table td.mono, .table td.small { font-size: var(--t-label); }

    /* tooltip vật phẩm: xếp dọc để khung chữ rộng hết thẻ */
    .tooltip-wrap .panel:first-child { grid-template-columns: minmax(0, 1fr); }
    .tooltip-wrap .panel:first-child .item-visual { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 559px) {
    .topbar { gap: 6px; }
    .search-wrap { width: auto; flex: 1; }
    #logout span { display: none; }
    #logout { width: 40px; padding: 0; justify-content: center; }
    .toolbar-stat { display: none; }
    .toolbar { min-height: 0; }
    .page-head .btn { flex: none; }
}

@media print {
    .topbar, .toolbar, .sidebar, .toasts { display: none !important; }
}

/* ---------------------------------------------------------------- editor UI */

.page-head--editor { align-items: center; flex-wrap: wrap; row-gap: 10px; }
.page-head--editor .btn--icon { flex: none; }
.page-head__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-head__titles h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44ch; }
.dirty-flag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
    background: color-mix(in oklab, var(--accent) 12%, transparent);
    color: var(--accent); font: 500 var(--t-label)/1.4 var(--font-mono); white-space: nowrap;
}
.dirty-flag__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.editor-panel { min-width: 0; display: flex; flex-direction: column; }
.editor-body { min-width: 0; }
.editor-stack { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.tab__badge {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 7px;
    padding: 0 5px; border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 20%, transparent);
    color: var(--accent); font: 500 11px/1 var(--font-mono);
}

.editor-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.editor-card__head { padding: 13px 15px 11px; border-bottom: 1px solid var(--line); }
.editor-card__head h3 { margin: 0; font: 600 var(--t-small)/1.35 var(--font-text); color: var(--ink); }
.editor-card__head .sub { margin: 3px 0 0; }
.editor-card__body { display: flex; flex-direction: column; gap: 13px; padding: 14px 15px 15px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font: 500 var(--t-label)/1.3 var(--font-text); color: var(--ink); }
.field__hint { font: 400 var(--t-label)/1.5 var(--font-text); color: var(--muted); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 13px; }
.field-grid--single { grid-template-columns: minmax(0, 1fr); }
.field input, .field select, .field textarea,
.ability-card input, .ability-card select,
.gear-row input, .gear-row select {
    width: 100%; min-height: 40px; padding: 0 10px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-small)/1.4 var(--font-text);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.ability-card input:focus-visible, .ability-card select:focus-visible,
.gear-row input:focus-visible, .gear-row select:focus-visible {
    outline: none; border-color: var(--action);
    box-shadow: 0 0 0 1px var(--action), 0 0 0 4px color-mix(in oklab, var(--action) 16%, transparent);
}

.name-preview {
    padding: 10px 12px; border-radius: var(--r-sm);
    border: 1px dashed var(--line-strong);
    background: color-mix(in oklab, var(--bg) 80%, black);
    font: 700 var(--t-small)/1.5 var(--font-mono);
    overflow-wrap: anywhere;
}

/* Màu tên: 3 chế độ + khung chọn màu kiểu birdflop RGB + chuỗi mã xuất ra. */
.name-color {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--bg) 55%, var(--surface));
}
.name-color__modes {
    display: inline-flex; gap: 4px; padding: 3px; align-self: flex-start;
    border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg);
}
.name-color__mode {
    min-height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
    color: var(--muted); font: 500 var(--t-label)/1 var(--font-text); cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.name-color__mode:hover { color: var(--ink); }
.name-color__mode.is-active { background: var(--action); color: var(--action-ink); }
.name-color__pane { display: flex; flex-direction: column; gap: 9px; }
.name-color__pane[hidden] { display: none; }
.name-color__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.name-color__spacer { flex: 1; }
.name-color__toggle {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font: 400 var(--t-label)/1 var(--font-text); color: var(--ink);
}
.name-color__toggle input { width: 15px; height: 15px; accent-color: var(--action); }
.name-color__palette { display: inline-flex; align-items: center; gap: 8px; }
.name-color__strip {
    width: 84px; height: 12px; border-radius: 999px;
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.35);
}
.name-color__name { font: 400 var(--t-label)/1 var(--font-text); color: var(--muted); }
.name-color__field { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; white-space: nowrap; font: 400 var(--t-label)/1 var(--font-text); color: var(--muted); }
.name-color__select {
    height: 30px; padding: 0 8px;
    border: 1px solid var(--line-strong); border-radius: 6px;
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-label)/1 var(--font-text);
}
.name-color__hint { font: 400 var(--t-label)/1.4 var(--font-text); color: var(--muted); }
.name-color__tag {
    padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
    background: color-mix(in oklab, var(--bg) 70%, black);
    font: 500 var(--t-label)/1 var(--font-mono); color: var(--muted);
}
.name-color__out { display: flex; gap: 8px; align-items: stretch; }
.name-color__output {
    flex: 1; min-width: 0; min-height: 52px; max-height: 110px; resize: vertical;
    padding: 7px 9px; border-radius: 5px;
    background: color-mix(in oklab, var(--bg) 70%, black);
    border: 1px solid var(--line); color: var(--muted);
    font: 400 11.5px/1.5 var(--font-mono); overflow-wrap: anywhere;
}
.name-color__output:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }

/* Khung chọn màu kiểu birdflop.com/resources/rgb: dải màu + từng điểm dừng. */
.rgb-bar { height: 14px; border-radius: 999px; border: 1px solid var(--line-strong); }
.rgb-colors { display: flex; flex-direction: column; gap: 6px; }
.rgb-color { display: grid; grid-template-columns: 40px 104px minmax(90px, 1fr) 46px 28px; gap: 8px; align-items: center; }
.rgb-color__picker {
    width: 40px; height: 30px; padding: 2px; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg);
}
.rgb-color__hex {
    height: 30px; min-width: 0; padding: 0 9px;
    border: 1px solid var(--line-strong); border-radius: 6px;
    background: var(--bg); color: var(--ink);
    font: 500 var(--t-label)/1 var(--font-mono); text-transform: uppercase;
}
.rgb-color__hex:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.rgb-color__hex.bad { border-color: var(--danger); color: var(--danger); }
.rgb-color__pos { width: 100%; accent-color: var(--action); }
.rgb-color__pct { font: 400 var(--t-label)/1 var(--font-mono); color: var(--muted); text-align: right; }
.rgb-color__del {
    width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--line-strong); border-radius: 6px;
    background: var(--bg); color: var(--muted); cursor: pointer; font: 500 14px/1 var(--font-text);
}
.rgb-color__del:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.rgb-color__del:disabled { opacity: 0.4; cursor: not-allowed; }
.rgb-number {
    width: 62px; height: 30px; padding: 0 8px;
    border: 1px solid var(--line-strong); border-radius: 6px;
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-label)/1 var(--font-mono);
}
.rgb-styles { display: flex; flex-wrap: wrap; gap: 4px; }
.rgb-style {
    display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); color: var(--muted);
    font: 400 var(--t-label)/1 var(--font-text);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.rgb-style code { font: 500 10.5px/1 var(--font-mono); color: var(--muted); }
.rgb-style:hover { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 38%, transparent); }
.rgb-style.is-on { color: var(--action-ink); background: var(--action); border-color: var(--action); }
.rgb-style.is-on code { color: color-mix(in oklab, var(--action-ink) 78%, transparent); }

.lore-editor { display: flex; flex-direction: column; gap: 7px; }
.lore-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px 28px 28px; gap: 5px; align-items: center; }
.lore-row__index { font: 400 var(--t-label)/1 var(--font-mono); color: var(--muted); text-align: right; }
.lore-row input { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-small)/1.4 var(--font-mono); }
.lore-row input:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }

.icon-btn {
    display: inline-grid; place-items: center; flex: none;
    width: 28px; height: 28px; padding: 0; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--muted);
    font: 500 14px/1 var(--font-text);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink); }
.icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in oklab, var(--danger) 12%, transparent); }

/* ch? s?: ch? hi?n m?c d� d?t */
.stat-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.stat-summary__count { display: flex; align-items: baseline; gap: 5px; font: 400 var(--t-label)/1.2 var(--font-text); color: var(--muted); }
.stat-summary__count strong { font: 600 18px/1 var(--font-mono); color: var(--ink); }
.stat-search__input {
    flex: 1; min-width: 150px; max-width: 280px; min-height: var(--btn-h-sm); padding: 0 11px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink); font: 400 var(--t-small)/1.4 var(--font-text);
}
.stat-search__input:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.stat-list { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 18px; }
.stat-list .stat-group { margin: 6px 0 0; }
.stat-row {
    display: grid; grid-template-columns: minmax(140px, 1fr) minmax(110px, 190px) 26px;
    gap: 10px; align-items: center; min-width: 0;
    padding: 6px 8px 6px 11px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--surface) 86%, var(--bg));
    transition: border-color var(--dur) var(--ease);
}
.stat-row:focus-within { border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
.stat-row.is-empty { border-style: dashed; }
.stat-row__label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.stat-row__name {
    font: 500 var(--t-small)/1.3 var(--font-text); color: var(--ink);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-row__key {
    font: 400 10px/1.2 var(--font-mono); color: var(--muted);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-row__field { display: flex; min-width: 0; }
.stat-row__field > input, .stat-row__field > select {
    width: 100%; height: 32px; min-height: 32px; padding: 0 8px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-label)/1.5 var(--font-mono);
}
.stat-row__field > textarea {
    width: 100%; min-height: 72px; padding: 7px 9px; resize: vertical;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-label)/1.5 var(--font-mono);
}
.stat-row__field :is(input, select, textarea):focus-visible {
    outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action);
}
/* Chỉ số boolean: công tắc gạt thay cho ô chọn Mặc định/Bật/Tắt. */
.stat-switch { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.stat-switch__label {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer;
    font: 400 var(--t-label)/1.2 var(--font-text); color: var(--ink);
}
.stat-switch__input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}
.stat-switch__track {
    position: relative; flex: none; width: 38px; height: 20px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: color-mix(in oklab, var(--bg) 82%, black);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stat-switch__knob {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--muted);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.stat-switch.is-on .stat-switch__track { background: var(--action); border-color: var(--action); }
.stat-switch.is-on .stat-switch__knob { transform: translateX(18px); background: var(--action-ink); }
.stat-switch.is-unset .stat-switch__text { color: var(--muted); }
.stat-switch__input:focus-visible + .stat-switch__track {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--action) 55%, transparent);
}
.stat-switch__reset {
    padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--muted); font: 400 var(--t-label)/1.2 var(--font-text);
    text-decoration: underline; text-underline-offset: 2px;
}
.stat-switch__reset:hover { color: var(--ink); }
.stat-switch__reset[hidden] { display: none; }
.stat-row--wide { grid-template-columns: minmax(0, 1fr) 26px; }
.stat-row--wide .stat-row__field { grid-column: 1 / -1; grid-row: 2; }
.stat-row--wide .stat-row__remove { grid-column: 2; grid-row: 1; justify-self: end; }
.stat-row__remove {
    flex: none; width: 24px; height: 24px; padding: 0; cursor: pointer;
    justify-self: end; border: 0; border-radius: 5px; background: none; color: var(--muted);
    font: 500 15px/1 var(--font-text);
}
.stat-row__remove:hover { color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, transparent); }
.stat-row__remove-placeholder { width: 24px; }

/* Bố cục chỉ số: danh sách bên trái, cột chọn chỉ số bên phải (kéo thả). */
.stat-summary__hint { font: 400 var(--t-label)/1.5 var(--font-text); color: var(--muted); }
.stats-workbench {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(268px, 300px);
    gap: 14px; align-items: stretch; padding: 0 16px 18px;
    height: min(68vh, 720px);
}
.stats-workbench .stat-list {
    padding: 0 6px 0 0; min-height: 0; align-content: start;
    overflow: auto; scrollbar-width: thin;
}
.stats-workbench .stat-list::-webkit-scrollbar { width: 6px; }
.stats-workbench .stat-list::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--muted) 32%, transparent); border-radius: 999px;
}
.stat-list.is-dropping {
    outline: 2px dashed color-mix(in oklab, var(--accent) 70%, transparent);
    outline-offset: 6px;
    background: color-mix(in oklab, var(--accent) 7%, transparent);
    border-radius: var(--r-md);
}
.stat-list__drop {
    grid-column: 1 / -1;
    padding: 16px; text-align: center;
    border: 1px dashed color-mix(in oklab, var(--accent) 55%, transparent);
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--accent) 8%, transparent);
    color: var(--accent);
    font: 500 var(--t-label)/1.4 var(--font-text);
}
.stat-list__empty { grid-column: 1 / -1; }

.stat-sidebar {
    display: flex; flex-direction: column; gap: 9px; min-width: 0; max-height: 100%;
    padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: color-mix(in oklab, var(--surface) 88%, var(--bg));
    overflow: hidden;
}
.stat-sidebar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stat-sidebar__head h3 { margin: 0; font: 600 var(--t-small)/1.3 var(--font-text); color: var(--ink); }
.stat-sidebar__count { font: 500 var(--t-label)/1 var(--font-mono); color: var(--muted); }
.stat-sidebar__search {
    width: 100%; min-height: 38px; padding: 0 10px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink); font: 400 var(--t-small)/1.4 var(--font-text);
}
.stat-sidebar__search:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.stat-sidebar .chip { flex: none; white-space: nowrap; }
.stat-sidebar__list {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1; min-height: 0; overflow: auto; padding-right: 4px;
    scrollbar-width: thin;
}
.stat-sidebar__list::-webkit-scrollbar { width: 6px; }
.stat-sidebar__list::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--muted) 32%, transparent); border-radius: 999px;
}
.stat-sidebar__group {
    padding: 4px 2px 0;
    font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted);
}
.stat-pick {
    display: grid; gap: 3px; width: 100%; padding: 7px 9px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink); text-align: left; cursor: grab;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.stat-pick:hover, .stat-pick:focus-visible {
    outline: none; border-color: color-mix(in oklab, var(--accent) 55%, transparent);
    background: color-mix(in oklab, var(--accent) 6%, var(--bg));
}
.stat-pick.is-set { border-style: dashed; cursor: pointer; }
.stat-pick.is-set .stat-pick__name { color: var(--muted); }
.stat-pick.is-dragging { opacity: 0.45; }
.stat-pick__row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.stat-pick__name { flex: 1; font: 500 var(--t-label)/1.35 var(--font-text); min-width: 0; overflow-wrap: anywhere; }
.stat-pick__row .pill { flex: none; }
.stat-pick__add {
    flex: none; display: grid; place-items: center; width: 18px; height: 18px;
    border-radius: 50%; background: color-mix(in oklab, var(--accent) 18%, transparent);
    color: var(--accent); font: 600 12px/1 var(--font-mono);
}
.stat-pick__hint { font: 400 11px/1.4 var(--font-text); color: var(--muted); }
.stat-pick__hint code {
    margin-right: 5px; padding: 1px 4px; border-radius: 4px;
    background: color-mix(in oklab, var(--ink) 6%, transparent);
    font: 400 10px/1.5 var(--font-mono); color: var(--muted);
}

@media (max-width: 1000px) {
    .stats-workbench { grid-template-columns: minmax(0, 1fr); height: auto; align-items: start; }
    .stats-workbench .stat-list { overflow: visible; padding-right: 0; min-height: 160px; }
    .stat-sidebar { order: -1; max-height: none; }
    .stat-sidebar__list { flex: none; max-height: 45vh; }
}

.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font: 500 10.5px/1.6 var(--font-mono); white-space: nowrap; }
.pill--set { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }

/* modal + palette */
.modal {
    position: fixed; inset: 0; z-index: 1200;
    display: grid; place-items: center; padding: 20px;
    background: rgb(0 0 0 / 0.58); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity var(--dur) var(--ease);
}
.modal.open { opacity: 1; }
.modal__box {
    display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(84vh, 760px);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    background: var(--surface); box-shadow: 0 28px 70px -20px rgb(0 0 0 / 0.8);
    transform: translateY(8px) scale(0.99); transition: transform var(--dur) var(--ease);
}
.modal.open .modal__box { transform: none; }
.modal--wide .modal__box { width: min(760px, 100%); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid var(--line); }
.modal__titles h3 { margin: 0; font: 600 16px/1.3 var(--font-text); color: var(--ink); }
.modal__titles .sub { margin: 3px 0 0; }
.modal__close { flex: none; width: 30px; height: 30px; padding: 0; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--muted); font: 400 18px/1 var(--font-text); }
.modal__close:hover { color: var(--ink); border-color: var(--ink); }
.modal__body { flex: 1; min-height: 0; overflow: auto; padding: 15px 16px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.form-error { margin: 0; min-height: 18px; font: 400 var(--t-label)/1.4 var(--font-text); color: var(--danger); }
.confirm p { margin: 0 0 7px; }
.confirm p:last-child { margin-bottom: 0; }

.palette { display: flex; flex-direction: column; gap: 10px; }
.palette__search { display: flex; align-items: center; gap: 10px; }
.palette__search input { flex: 1; min-height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-small)/1.4 var(--font-text); }
.palette__search input:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.palette-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 9px; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--bg); color: var(--muted);
    font: 500 var(--t-label)/1 var(--font-text);
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip--active { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.chip__count { font: 400 10.5px/1 var(--font-mono); opacity: 0.8; }
.chip--static { cursor: default; color: var(--ink); }
.chip--static:hover { border-color: var(--line-strong); }
.chip__remove { width: 16px; height: 16px; padding: 0; cursor: pointer; border: 0; border-radius: 50%; background: color-mix(in oklab, var(--ink) 12%, transparent); color: var(--ink); font: 500 10px/1 var(--font-text); }
.chip__remove:hover { background: var(--danger); color: #fff; }
.chip-editor { display: flex; flex-direction: column; gap: 7px; }
.chip-editor__list { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-editor__add { display: flex; gap: 6px; }
.chip-editor__add input { flex: 1; min-height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-small)/1.4 var(--font-text); }
.chip-editor__add input:focus-visible { outline: none; border-color: var(--action); }

.palette-list { display: flex; flex-direction: column; gap: 4px; }
.palette-list .stat-group { margin-top: 8px; }
.palette-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
    width: 100%; padding: 9px 10px; cursor: pointer; text-align: left;
    border: 1px solid transparent; border-radius: var(--r-sm);
    background: none; color: var(--ink);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.palette-item:hover, .palette-item:focus-visible { outline: none; border-color: var(--line-strong); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.palette-item.is-set { border-color: color-mix(in oklab, var(--accent) 30%, transparent); background: color-mix(in oklab, var(--accent) 7%, transparent); }
.palette-item__name { font: 500 var(--t-small)/1.4 var(--font-text); }
.palette-item__meta { display: flex; align-items: center; gap: 6px; justify-self: end; }
.palette-item__meta code { font: 400 10.5px/1 var(--font-mono); color: var(--muted); }
.palette-item__hint { grid-column: 1 / -1; font: 400 var(--t-label)/1.45 var(--font-text); color: var(--muted); }

/* ph? ki?n */
.gear-rows { display: flex; flex-direction: column; gap: 7px; }
.gear-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 28px; gap: 6px; align-items: center; }
.gear-row input { text-align: center; }
#miniSim { padding: 12px; }

/* k? nang */
.ability-list { display: flex; flex-direction: column; gap: 10px; }
.ability-card { display: flex; flex-direction: column; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: color-mix(in oklab, var(--surface) 86%, var(--bg)); }
.ability-card__head { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.ability-card__skill {
    display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1;
    padding: 7px 10px; cursor: pointer; text-align: left;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink);
}
.ability-card__skill:hover { border-color: var(--accent); }
.ability-card__name { font: 500 var(--t-small)/1.3 var(--font-text); }
.ability-card__id { font: 400 10.5px/1.2 var(--font-mono); color: var(--muted); }
.ability-card__meta { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 8px; }
.ability-card__meta .field { gap: 3px; }
.ability-card__meta .field__label { font-size: 10.5px; color: var(--muted); }
.ability-card__lore { margin: 0; font: 400 var(--t-label)/1.5 var(--font-text); color: var(--muted); }
.ability-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 8px; }
.ability-mods .stat-field { gap: 3px; }
.ability-mods .stat-field label { font-size: 10.5px; }
.ability-mods .stat-field input { width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-label)/1.4 var(--font-mono); }
.ability-mods .stat-field input:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }

@media (max-width: 899px) {
    .stat-search__input { max-width: none; }
}

@media (max-width: 640px) {
    .stat-row {
        grid-template-columns: minmax(0, 1fr) minmax(88px, 120px) 24px;
        gap: 7px; padding: 5px 6px 5px 9px;
    }
    .stat-row__key { display: none; }
}