/* =====================================================================
   RO Control Studio — Bright theme
   ===================================================================== */
:root {
  --bg: #f4f5fb;
  --bg-tint: #eef0fb;
  --surface: #ffffff;
  --surface-2: #f8f9fd;
  --ink: #1b1f3b;
  --ink-2: #3a3f63;
  --muted: #6b7194;
  --faint: #9aa0bf;
  --line: #e6e8f2;
  --line-2: #d9dcec;

  --primary: #6c4cf5;
  --primary-2: #8b5cf6;
  --primary-soft: #efeaff;
  --primary-ink: #4a2fd0;

  --coral: #ff6b6b;   --coral-soft: #ffeded;
  --sun: #f5a524;     --sun-soft: #fff4dd;
  --mint: #10b981;    --mint-soft: #e3f8ef;
  --sky: #3b82f6;     --sky-soft: #e6f0ff;
  --pink: #ec4899;    --pink-soft: #fde8f3;
  --teal: #0ea5a4;    --teal-soft: #dff6f5;
  --slate: #64748b;   --slate-soft: #eef1f6;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 2px rgba(27, 31, 59, .06), 0 1px 1px rgba(27, 31, 59, .04);
  --shadow: 0 6px 24px -8px rgba(40, 30, 120, .16), 0 2px 6px rgba(27, 31, 59, .05);
  --shadow-lg: 0 24px 60px -16px rgba(40, 30, 120, .30);
  --ring: 0 0 0 4px rgba(108, 76, 245, .18);

  --font: "IBM Plex Sans Thai", "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Plus Jakarta Sans", "IBM Plex Sans Thai", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --sidebar: 248px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(139, 92, 246, .10), transparent 60%),
    radial-gradient(700px 420px at 10% 110%, rgba(16, 185, 129, .08), transparent 60%),
    radial-gradient(600px 380px at 60% 50%, rgba(245, 165, 36, .05), transparent 60%);
}
a { color: var(--primary-ink); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--primary-soft); color: var(--primary-ink); padding: 1px 6px; border-radius: 6px; }
::selection { background: rgba(108, 76, 245, .2); }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- Layout ---------------- */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 20px 14px;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; }
.brand-logo {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, #8b5cf6, #6c4cf5 45%, #ec4899);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .5px;
  box-shadow: 0 8px 20px -6px rgba(108, 76, 245, .6);
}
.brand-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.15; }
.brand-sub { font-size: 11.5px; color: var(--muted); }

.nav-group { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .8px; padding: 14px 12px 6px; }
.nav-link {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: 11px; border: 0; background: none; cursor: pointer;
  color: var(--ink-2); font-weight: 500; text-align: left; transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--bg-tint); color: var(--ink); }
.nav-link.active { background: var(--primary-soft); color: var(--primary-ink); font-weight: 650; }
.nav-link.active .icon { color: var(--primary); }
.nav-link .count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--coral); color: #fff; border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }

.side-status { margin-top: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
.side-status-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.svc { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.on { background: var(--mint); box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.dot.off { background: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 107, .15); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; padding: 14px 28px;
  background: rgba(244, 245, 251, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(230, 232, 242, .7);
}
.btn.menu-btn { display: none; }
.page-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.page-sub { font-size: 12.5px; color: var(--muted); }
.topbar-search { margin-left: auto; position: relative; width: min(420px, 40vw); }
.topbar-search input { padding-left: 38px; padding-right: 54px; background: var(--surface); }
.topbar-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--faint); border: 1px solid var(--line-2); border-radius: 6px; padding: 0 6px; background: var(--surface-2); }
.content { padding: 24px 28px 60px; max-width: 1560px; width: 100%; }
.page { display: none; animation: fadeUp .25s ease; }
.page.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- Primitives ---------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; }
.card + .card { margin-top: 18px; }
.grid > .card + .card { margin-top: 0; }   /* side-by-side cards: the stacking gap above pushed the 2nd card down */
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-title { font-family: var(--font-display); font-size: 16px; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.card-desc { color: var(--muted); font-size: 13px; margin-top: 2px; }
.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.hidden { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: transform .08s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--primary-2), var(--primary)); color: #fff; box-shadow: 0 6px 16px -6px rgba(108, 76, 245, .65); }
.btn-primary:hover { box-shadow: 0 10px 22px -8px rgba(108, 76, 245, .75); }
.btn-sun { background: linear-gradient(135deg, #ffc145, var(--sun)); color: #3d2600; box-shadow: 0 6px 16px -6px rgba(245, 165, 36, .7); }
.btn-mint { background: linear-gradient(135deg, #34d399, var(--mint)); color: #fff; box-shadow: 0 6px 16px -6px rgba(16, 185, 129, .6); }
.btn-coral { background: linear-gradient(135deg, #ff8787, var(--coral)); color: #fff; box-shadow: 0 6px 16px -6px rgba(255, 107, 107, .6); }
.btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); }
.btn-soft { background: var(--primary-soft); color: var(--primary-ink); }
.btn-soft:hover { background: #e3dbff; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 7px; }
.btn-icon { padding: 8px; }
.btn-block { width: 100%; }
.btn-lg { padding: 13px 20px; font-size: 15px; border-radius: 14px; }

.input, .select, textarea.input {
  width: 100%; padding: 10px 13px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus { border-color: var(--primary); box-shadow: var(--ring); }
.input-sm { padding: 7px 10px; font-size: 13px; border-radius: 9px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7194' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12.5px; font-weight: 650; color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hint { font-size: 12px; color: var(--muted); }
.search { position: relative; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search .input { padding-left: 38px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 550;
  color: var(--ink-2); cursor: pointer; transition: all .15s; user-select: none;
}
.chip:hover { border-color: var(--primary); color: var(--primary-ink); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip .n { font-size: 11px; opacity: .7; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--slate-soft); color: var(--slate); white-space: nowrap; }
.b-primary { background: var(--primary-soft); color: var(--primary-ink); }
.b-mint { background: var(--mint-soft); color: #08875f; }
.b-coral { background: var(--coral-soft); color: #d63b3b; }
.b-sun { background: var(--sun-soft); color: #a86500; }
.b-sky { background: var(--sky-soft); color: #1f5fcf; }
.b-pink { background: var(--pink-soft); color: #c0267a; }

.seg { display: inline-flex; background: var(--bg-tint); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button.active { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-sm); }
.seg.full { display: flex; flex-wrap: nowrap; } .seg.full button { flex: 1; justify-content: center; padding: 7px 6px; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 550; font-size: 13px; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s; }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

.callout { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; background: var(--sky-soft); color: #1d4ea8; }
.callout.warn { background: var(--sun-soft); color: #8a5400; }
.callout.danger { background: var(--coral-soft); color: #b42d2d; }
.callout.ok { background: var(--mint-soft); color: #0a7553; }
.callout .icon { margin-top: 1px; }

table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child { border-top-left-radius: 12px; } th:last-child { border-top-right-radius: 12px; }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #fafaff; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty .big { font-size: 34px; margin-bottom: 6px; }

/* ---------------- Dashboard ---------------- */
.hero {
  position: relative; overflow: hidden; border-radius: 24px; padding: 28px 30px; color: #fff; margin-bottom: 20px;
  background: linear-gradient(120deg, #7c3aed 0%, #6c4cf5 35%, #ec4899 80%, #f59e0b 120%);
  box-shadow: var(--shadow-lg);
}
.hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 340px; height: 340px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.hero h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.3px; }
.hero p { opacity: .9; margin-top: 4px; max-width: 620px; }
.hero .row { margin-top: 18px; position: relative; z-index: 1; }
.hero .btn-ghost { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.hero .btn-white { background: #fff; color: var(--primary-ink); }

.stat { display: flex; align-items: center; gap: 14px; }
.stat-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.stat-ico .icon { width: 22px; height: 22px; }
.stat-num { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.stat-label { font-size: 12.5px; color: var(--muted); font-weight: 550; }

.showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.showcase .tcg { cursor: pointer; }

.log-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.log-item:last-child { border-bottom: 0; }
.log-icons { display: flex; }
.log-icons img { width: 26px; height: 26px; object-fit: contain; background: var(--surface-2); border: 2px solid #fff; border-radius: 8px; margin-left: -6px; }
.log-icons img:first-child { margin-left: 0; }

/* ---------------- Item visuals ---------------- */
.ico-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); flex: none; border: 1px solid var(--line); }
.ico-tile img { width: 32px; height: 32px; object-fit: contain; image-rendering: auto; }
.ico-tile.sm { width: 34px; height: 34px; border-radius: 10px; }
.ico-tile.sm img { width: 24px; height: 24px; }
.ico-tile.lg { width: 64px; height: 64px; border-radius: 16px; }
.ico-tile.lg img { width: 44px; height: 44px; }

/* category colour hooks */
[data-cat="weapon"]   { --cat: #ff6b6b; --cat-soft: #ffeded; }
[data-cat="armor"]    { --cat: #3b82f6; --cat-soft: #e6f0ff; }
[data-cat="headgear"] { --cat: #ec4899; --cat-soft: #fde8f3; }
[data-cat="shield"]   { --cat: #6366f1; --cat-soft: #ebebff; }
[data-cat="garment"]  { --cat: #0ea5a4; --cat-soft: #dff6f5; }
[data-cat="footgear"] { --cat: #d97706; --cat-soft: #fff1dc; }
[data-cat="accessory"]{ --cat: #8b5cf6; --cat-soft: #f1ebff; }
[data-cat="card"]     { --cat: #e0a100; --cat-soft: #fff6d6; }
[data-cat="enchant"]  { --cat: #10b981; --cat-soft: #e3f8ef; }
[data-cat="healing"]  { --cat: #f43f5e; --cat-soft: #ffe6eb; }
[data-cat="usable"]   { --cat: #22a34a; --cat-soft: #e5f7ea; }
[data-cat="ammo"]     { --cat: #64748b; --cat-soft: #eef1f6; }
[data-cat="costume"]  { --cat: #c026d3; --cat-soft: #fbe8fd; }
[data-cat="shadow"]   { --cat: #475569; --cat-soft: #e9edf3; }
[data-cat="pet"]      { --cat: #f97316; --cat-soft: #ffeedf; }
[data-cat="etc"]      { --cat: #78716c; --cat-soft: #f2f0ee; }
.cat-dot { width: 10px; height: 10px; border-radius: 4px; background: var(--cat, var(--faint)); flex: none; }
.cat-badge { background: var(--cat-soft); color: var(--cat); }

/* ---------------- Item library ---------------- */
.lib { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 20px; align-items: start; }
.filters { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 16px; }
.filters::-webkit-scrollbar { width: 6px; } .filters::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
.filter-block + .filter-block { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.filter-title { font-size: 12px; font-weight: 750; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.cat-list { display: flex; flex-direction: column; gap: 2px; }
.cat-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; font-weight: 550; color: var(--ink-2); border: 0; background: none; width: 100%; text-align: left; }
.cat-item:hover { background: var(--bg-tint); }
.cat-item.active { background: var(--cat-soft, var(--primary-soft)); color: var(--cat, var(--primary-ink)); font-weight: 700; }
.cat-item .n { margin-left: auto; font-size: 11.5px; color: var(--faint); font-weight: 600; }
.cat-item.active .n { color: inherit; opacity: .8; }

.lib-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lib-toolbar .search { flex: 1; min-width: 220px; }
.result-count { font-size: 13px; color: var(--muted); }
.result-count b { color: var(--ink); }

.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.item-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.item-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--cat, var(--primary)) 45%, var(--line)); }
.item-card .top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.item-card .ico-tile { background: var(--cat-soft); border-color: transparent; }
.item-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item-meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.stat-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.sp { font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.sp.atk { color: #d63b3b; background: var(--coral-soft); border-color: transparent; }
.sp.matk { color: #6d28d9; background: #f1ebff; border-color: transparent; }
.sp.def { color: #1f5fcf; background: var(--sky-soft); border-color: transparent; }
.sp.slot { color: #a86500; background: var(--sun-soft); border-color: transparent; }
.quick-add { position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity .15s; }
.item-card:hover .quick-add, .tcg:hover .quick-add { opacity: 1; }

/* trading-card style for cards (real monster art) */
.card-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.tcg {
  position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #fff7db, #ffe7a8);
  border: 1px solid #f3d27a; cursor: pointer; transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column;
}
.tcg:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 18px 36px -14px rgba(160, 110, 0, .45); }
.tcg .art { aspect-ratio: 3 / 4; background: #fff3c9; display: grid; place-items: center; overflow: hidden; }
.tcg .art img { width: 100%; height: 100%; object-fit: cover; }
.tcg .art img.sprite { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; image-rendering: pixelated; }
.tcg .cap { padding: 9px 11px 11px; background: rgba(255, 255, 255, .85); }
.tcg .cap .item-name { font-size: 12.5px; -webkit-line-clamp: 1; display: block; white-space: nowrap; }
.tcg .cap .item-meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tcg.enchant { background: linear-gradient(160deg, #e9fbf3, #c9f1df); border-color: #9be2c3; }
.tcg.enchant .art { background: #e3f8ef; }

.item-list .item-row { display: grid; grid-template-columns: 44px minmax(0, 2fr) 1fr 1fr 110px; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.item-list .item-row:hover { background: #fafaff; }
.load-more { display: flex; justify-content: center; margin-top: 18px; }

/* ---------------- Drawer (item detail) ---------------- */
.scrim { position: fixed; inset: 0; background: rgba(27, 31, 59, .32); backdrop-filter: blur(2px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(620px, 100vw); background: var(--surface); z-index: 70;
  box-shadow: var(--shadow-lg); transform: translateX(104%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.drawer-body { overflow-y: auto; padding: 0 0 30px; flex: 1; }
.drawer-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; background: var(--surface-2); flex-wrap: wrap; }

.detail-hero { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px; background: linear-gradient(180deg, var(--cat-soft, var(--primary-soft)), transparent); }
.detail-visual { border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; min-height: 200px; overflow: hidden; }
.detail-visual img { max-width: 100%; max-height: 270px; object-fit: contain; }
.detail-visual.cardart { aspect-ratio: 3 / 4; min-height: 0; background: #fff3c9; border-color: #f3d27a; box-shadow: 0 14px 30px -14px rgba(160, 110, 0, .5); }
.detail-visual.cardart img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.detail-visual img.sprite,
.detail-visual.cardart img.sprite { width: auto; height: auto; min-width: 96px; max-width: 75%; max-height: 75%; object-fit: contain; image-rendering: pixelated; }
.slot.filled img.art.sprite { object-fit: contain; image-rendering: pixelated; padding: 12px 8px 28px; }
.ico-tile img.sprite { image-rendering: pixelated; }
.detail-name { font-family: var(--font-display); font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.2px; }
.detail-section { padding: 18px 20px 0; }
.detail-section h4 { font-size: 12.5px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.prop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prop { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.prop .k { font-size: 11px; color: var(--muted); font-weight: 600; }
.prop .v { font-weight: 750; font-size: 14px; overflow-wrap: anywhere; }
.desc-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; line-height: 1.75; font-size: 13.5px; }
.desc-box .rule { border-top: 1px dashed var(--line-2); margin: 6px 0; height: 0; }
.script-box { background: #1e1b3a; color: #e5e1ff; border-radius: 12px; padding: 12px 14px; font-family: var(--font-mono); font-size: 12.5px; white-space: pre-wrap; overflow-x: auto; line-height: 1.6; }
.script-box .lbl { color: #a99cf5; font-weight: 700; display: block; margin-bottom: 2px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list .badge { font-weight: 600; }

.mob-card { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.mob-card .sprite-box { height: 92px; display: grid; place-items: center; background: #fff; border-radius: 12px; border: 1px solid var(--line); }
.mob-card .sprite-box img { max-width: 84px; max-height: 84px; image-rendering: pixelated; }
.drop-list { display: flex; flex-direction: column; gap: 6px; }
.drop-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line); }
.drop-row img { max-width: 38px; max-height: 38px; image-rendering: pixelated; justify-self: center; }
.rate-bar { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; width: 90px; margin-top: 4px; }
.rate-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--sky)); }

/* ---------------- Forge studio ---------------- */
.forge { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 20px; align-items: start; }
.picker { position: relative; }
.picker-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 30; max-height: 380px; overflow-y: auto; padding: 6px; }
.picker-opt { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 10px; cursor: pointer; }
.picker-opt:hover, .picker-opt.hl { background: var(--primary-soft); }
.forge-preview { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background: linear-gradient(120deg, var(--cat-soft, var(--primary-soft)), #fff); border: 1px solid var(--line); }
.forge-preview .ico-tile { background: #fff; }
.refine-num { font-family: var(--font-display); font-weight: 800; font-size: 22px; min-width: 56px; text-align: center; color: var(--primary-ink); }
.refine-num.hot { color: #e85d04; text-shadow: 0 0 18px rgba(255, 140, 0, .45); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--primary) var(--p, 50%), var(--line) var(--p, 50%)); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: var(--shadow); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); cursor: pointer; }

.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.slot {
  position: relative; border: 2px dashed var(--line-2); border-radius: 14px; aspect-ratio: 3 / 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: var(--surface-2); padding: 6px; text-align: center; overflow: hidden; transition: border-color .15s, background .15s;
}
.slot:hover { border-color: var(--primary); background: var(--primary-soft); }
.slot .slot-n { position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 750; color: var(--faint); }
.slot .slot-kind { font-size: 11px; color: var(--muted); font-weight: 600; }
.slot.filled { border-style: solid; border-color: #f3d27a; background: #fff7db; padding: 0; }
.slot.filled img.art { width: 100%; height: 100%; object-fit: cover; }
.slot.filled .slot-label { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10.5px; font-weight: 700; background: rgba(255, 255, 255, .9); padding: 4px; line-height: 1.2; }
.slot .x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(27, 31, 59, .7); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.slot.locked { opacity: .45; cursor: not-allowed; }
.slot.enchant-slot:not(.filled) { border-color: #9be2c3; }

.opt-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px 34px; gap: 8px; align-items: center; }
.opt-row.as-row { grid-template-columns: minmax(0, 1fr) 70px 82px 96px 34px; }
@media (max-width: 560px) { .opt-row.as-row { grid-template-columns: 1fr 1fr 34px; } .opt-row.as-row [data-as-pick] { grid-column: 1 / -1; } }

.terminal { display: flex; align-items: center; gap: 10px; background: #1e1b3a; color: #c9f7d9; border-radius: 12px; padding: 10px 12px 10px 14px; font-family: var(--font-mono); font-size: 13px; }
.terminal span { flex: 1; overflow-x: auto; white-space: nowrap; }
.terminal .btn { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .15); }

.cart { position: sticky; top: 84px; }
.cart-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.cart-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 84px 28px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.cart-item .nm { font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item .cfg { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kit { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; min-width: 0; }
.kit:hover { border-color: var(--primary); background: var(--primary-soft); }
.kit .em { font-size: 20px; }
.kit .nm { font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit .del { margin-left: auto; opacity: 0; border: 0; background: none; color: var(--coral); cursor: pointer; font-size: 16px; }
.kit:hover .del { opacity: 1; }

.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.method button { border: 1.5px solid var(--line-2); background: var(--surface); border-radius: 14px; padding: 10px; text-align: left; cursor: pointer; transition: all .15s; }
.method button b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.method button small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }
.method button.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--ring); }

/* ---------------- Characters ---------------- */
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; font-family: var(--font-display); flex: none; }
.who { display: flex; align-items: center; gap: 12px; }
.who b { display: block; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.inv-item { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--surface); }
.inv-item .nm { font-weight: 650; font-size: 13px; }
.inv-item .x { margin-left: auto; }

/* ---------------- Modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(27, 31, 59, .38); backdrop-filter: blur(3px); }
.modal.open { display: flex; animation: fadeUp .2s ease; }
.modal-card { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); width: min(680px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal-card.wide { width: min(980px, 100%); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.x-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--bg-tint); cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.x-btn:hover { background: var(--coral-soft); color: var(--coral); }

/* ---------------- Rates ---------------- */
.rate-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--surface); }
.rate-card .mult { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--primary-ink); }
.conf-pre { background: #1e1b3a; color: #d9d3ff; border-radius: 14px; padding: 16px; font-family: var(--font-mono); font-size: 12.5px; max-height: 520px; overflow: auto; white-space: pre; }

/* ---------------- Toasts ---------------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-lg); font-size: 13.5px; animation: toastIn .25s ease; }
.toast.success { border-left-color: var(--mint); } .toast.error { border-left-color: var(--coral); } .toast.warn { border-left-color: var(--sun); }
.toast .t-ico { font-size: 18px; line-height: 1.2; }
.toast.out { opacity: 0; transform: translateY(8px); transition: all .25s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.skeleton { background: linear-gradient(90deg, var(--surface-2), #eef0f8, var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 16px; min-height: 96px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------- Responsive ---------------- */
@media (max-width: 1280px) {
  .forge { grid-template-columns: 1fr; }
  .cart { position: static; }
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .lib { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 90; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow-lg); background: #fff; }
  .sidebar.open { transform: none; }
  .btn.menu-btn { display: inline-flex; }
  .topbar { padding: 12px 16px; }
  .topbar-search { width: auto; flex: 1; }
  .kbd { display: none; }
  .content { padding: 18px 16px 50px; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-visual.cardart { max-width: 220px; margin: 0 auto; }
  .prop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-list .item-row { grid-template-columns: 44px minmax(0, 1fr) 90px; }
  .item-list .item-row .hide-sm { display: none; }
  .page-sub { display: none; }
}
@media (max-width: 560px) {
  .g-4, .g-5 { grid-template-columns: 1fr 1fr; }
  .method { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot { aspect-ratio: auto; min-height: 120px; }
  .item-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-title { font-size: 17px; }
  .hero { padding: 22px 20px; }
  .hero h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ================= Launch Game Button ================= */
.btn-launch-game {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(16, 185, 129, .35);
  cursor: pointer;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  text-decoration: none;
  font-size: 13.5px;
}
.btn-launch-game:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, .5);
}
.btn-launch-game:active {
  transform: translateY(0);
}
.btn-launch-game .pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ---------------- Forge steps & quick picks ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.step { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); color: var(--muted); transition: all .2s; }
.step b { display: block; color: var(--ink-2); font-size: 14px; }
.step small { font-size: 12px; }
.step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--bg-tint); color: var(--muted); flex: none; }
.step.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--ring); }
.step.active .n { background: var(--primary); color: #fff; }
.step.active b { color: var(--primary-ink); }
.step.done .n { background: var(--mint); color: #fff; font-size: 0; }
.step.done .n::after { content: "✓"; font-size: 15px; }
.step-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; margin-right: 4px; flex: none; }
.section-title { font-family: var(--font-display); font-weight: 750; font-size: 15px; display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; transition: all .15s; min-width: 0; }
.pick:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.pick b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick small { color: var(--muted); font-size: 11.5px; }
details.adv { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
details.adv summary { cursor: pointer; font-weight: 650; list-style: none; }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary::before { content: "▸ "; color: var(--primary); }
details.adv[open] summary::before { content: "▾ "; }

/* ---------------- Job & skill editor ---------------- */
.job-current { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: linear-gradient(120deg, var(--primary-soft), #fff); border: 1px solid var(--line); }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.job-btn { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; text-align: left; font-weight: 550; font-size: 13px; transition: all .12s; }
.job-btn:hover:not([disabled]) { border-color: var(--primary); color: var(--primary-ink); }
.job-btn.current { background: var(--mint-soft); border-color: #9be2c3; }
.job-btn.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.job-btn.selected .badge { background: rgba(255,255,255,.25); color: #fff; }
.job-btn[disabled] { opacity: .4; cursor: not-allowed; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.skill-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.skill-row img { width: 24px; height: 24px; image-rendering: pixelated; }
.skill-row b { font-size: 13px; }
.skill-row.on { border-color: #c9bbff; background: #faf8ff; }
.skill-row.bad { border-color: var(--coral); background: var(--coral-soft); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.stepper button { width: 28px; height: 28px; border: 0; background: var(--surface-2); cursor: pointer; font-size: 16px; font-weight: 700; color: var(--primary-ink); }
.stepper button:hover:not([disabled]) { background: var(--primary-soft); }
.stepper button[disabled] { opacity: .4; cursor: not-allowed; }
.stepper span { min-width: 46px; text-align: center; font-weight: 750; font-size: 13px; }
.stepper small { color: var(--faint); font-weight: 600; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } .skill-grid { grid-template-columns: 1fr; } }

.sp { white-space: nowrap; }
.stat-pills { align-items: flex-start; }

/* ---------------- Game tweaks ---------------- */
.tabs-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.helper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.helper { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 38px; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: all .15s; }
.helper:hover { border-color: var(--primary); }
.helper.on { border-color: var(--primary); background: linear-gradient(120deg, var(--primary-soft), #fff); box-shadow: var(--ring); }
.helper input { position: absolute; opacity: 0; pointer-events: none; }
.helper .hi { width: 46px; height: 46px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; border: 1px solid var(--line); }
.helper .hi img { max-width: 32px; max-height: 32px; image-rendering: pixelated; }
.helper b { display: block; font-size: 14px; }
.helper small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.helper .track { width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; }
.helper .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s; }
.helper.on .track { background: var(--primary); }
.helper.on .track::after { transform: translateX(16px); }
.emo { font-size: 22px; line-height: 1; }
.buff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.buff-grid.one { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.buff { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: all .12s; }
.buff:hover { border-color: var(--primary); }
.buff.on { border-color: #c9bbff; background: #faf8ff; }
.buff.locked { opacity: .5; cursor: not-allowed; }
.buff input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); }
.buff .bi { display: grid; place-items: center; }
.buff .bi img { max-width: 26px; max-height: 26px; image-rendering: pixelated; }
.buff .bi .emo { font-size: 18px; }
.buff .bn b { display: block; font-size: 13px; }
.buff .bn small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buff .input { width: 74px; padding: 5px 8px; }
.save-bar { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; box-shadow: var(--shadow-lg); z-index: 5; }
.tweak-list { display: flex; flex-direction: column; gap: 10px; }
.tweak { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.tweak > input[type=checkbox], .tweak > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.tweak > .track { width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; flex: none; margin-top: 2px; }
.tweak > .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s; }
.tweak > input:checked + .track { background: var(--primary); }
.tweak > input:checked + .track::after { transform: translateX(16px); }
.tweak b { display: block; font-size: 14px; }
.tweak small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.5; }

.rate-default { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.rate-default .btn { margin-left: auto; }
.rate-card.custom { border-color: #f8dca4; background: linear-gradient(180deg, #fffaf0, #fff); }

/* ---------------- Data table ---------------- */
.dt-card { padding: 0; overflow: hidden; }
.dt-wrap { overflow: auto; max-height: calc(100vh - 260px); }
table.dt { font-size: 13px; }
table.dt th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
table.dt th.sortable { cursor: pointer; user-select: none; }
table.dt th.sortable:hover { color: var(--primary-ink); }
table.dt th.sorted { color: var(--primary-ink); background: var(--primary-soft); }
table.dt th .arr { font-size: 10px; opacity: .6; }
table.dt td { padding: 8px 12px; }
table.dt tbody tr { cursor: pointer; }
table.dt tbody tr:nth-child(even) { background: #fbfbfe; }
table.dt tbody tr:hover { background: var(--primary-soft); }
table.dt td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dt td.atk { color: #d63b3b; font-weight: 650; } table.dt td.matk { color: #6d28d9; font-weight: 650; } table.dt td.def { color: #1f5fcf; font-weight: 650; }
.dt-name { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.dt-name b { font-weight: 650; }
.dt-act { white-space: nowrap; text-align: right; }
.dt-act .btn + .btn { margin-left: 4px; }
.dt-foot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; background: var(--surface); }
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#f-loc .chip { font-size: 12px; padding: 4px 9px; }

/* ---------------- Info buttons & drawer above modals ---------------- */
.info-btn { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--primary); background: #fff; color: var(--primary-ink);
  font: 700 12px/1 Georgia, serif; font-style: italic; display: inline-grid; place-items: center; cursor: pointer; transition: all .15s; padding: 0; }
.info-btn:hover { background: var(--primary); color: #fff; transform: scale(1.08); }
.info-btn.on-art { position: absolute; top: 8px; left: 8px; z-index: 3; box-shadow: var(--shadow); }
.slot .info-btn.slot-info { top: 5px; left: auto; right: 32px; width: 22px; height: 22px; }
.tcg .info-btn.on-art { opacity: .9; }
.scrim { z-index: 92; }
.drawer { z-index: 95; }

.dot.wait { background: var(--sun); box-shadow: 0 0 0 3px rgba(245, 165, 36, .25); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------------- Town map ---------------- */
.townmap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.map-box { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #e9edf5; user-select: none; }
.map-box img { display: block; width: 100%; height: auto; }
.mk { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: pointer; padding: 0; transition: transform .12s; z-index: 2; }
.mk:hover { transform: scale(1.5); z-index: 4; }
.mk.big { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-width: 3px; animation: mkpulse 1.6s infinite; z-index: 3; }
.mk-shop { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 1px; }
.mk-spawn { background: #111827; border-radius: 3px; transform: rotate(45deg); }
@keyframes mkpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.mk-label { position: absolute; transform: translate(-50%, 14px); background: rgba(27, 31, 59, .85); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 3; }
.map-pop { position: absolute; transform: translate(-50%, calc(-100% - 16px)); background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-lg); z-index: 6; min-width: 190px; font-size: 13px; }
.map-pop::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.map-legend i.spawn { background: #111827; border-radius: 2px; transform: rotate(45deg); }
.tm-list { display: flex; flex-direction: column; gap: 4px; max-height: 640px; overflow-y: auto; }
.tm-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.tm-item:hover { background: var(--bg-tint); }
.tm-item.sel { background: var(--primary-soft); }
.tm-item b { font-size: 13px; }
.feat { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; border-left: 4px solid var(--c); }
.feat-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); flex: none; }
@media (max-width: 1100px) { .townmap { grid-template-columns: 1fr; } }

/* ---------------- World map list ---------------- */
.wm-group { margin-bottom: 18px; }
.wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.wm-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.wm-thumb { position: relative; aspect-ratio: 4 / 3; background: #e9edf5; display: grid; place-items: center; overflow: hidden; }
.wm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wm-thumb.noimg::after { content: "🗺️"; font-size: 34px; opacity: .45; }
.wm-body { padding: 10px 12px 12px; }
.wm-body b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.user-chip { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.user-chip b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- Card picker table ---------------- */
.cp-table { max-height: calc(100vh - 330px); }
.cp-table .dt-name { min-width: 180px; }
.cp-table td.cp-effect { font-size: 12.5px; line-height: 1.5; color: var(--ink-2, #3b3f5c); min-width: 320px; }
.cp-table td.cp-mob { white-space: nowrap; }
.cp-table mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 2px; }
.opt-val { position: relative; }
.opt-val .input { padding-right: 26px; }
.opt-val .input:disabled { opacity: .45; }
.opt-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 650; color: var(--muted); pointer-events: none; }
.cp-table td.cp-sub { white-space: nowrap; }
.cp-pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
  padding: 10px 2px; background: var(--surface); border-top: 1px solid var(--line); }
.cp-pager:empty { display: none; }
.lib-grid-foot { margin-top: 16px; border-top: 0; border-radius: var(--radius, 16px); }

/* ---------------- Monster database ---------------- */
[data-rank="mvp"]      { --cat: #ef4444; --cat-soft: #ffeded; }
[data-rank="miniboss"] { --cat: #f59e0b; --cat-soft: #fff4dd; }
[data-rank="normal"]   { --cat: #6c4cf5; --cat-soft: #efeaff; }
.mob-item { cursor: pointer; }
.mob-item .tag-list { gap: 4px; }
.mob-tile { background: #fff; overflow: hidden; }
.item-card .mob-tile { background: #fff; border-color: var(--line); }
.mob-tile img.sprite { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.ico-tile.lg.mob-tile img.sprite { max-width: 58px; max-height: 58px; }
.mob-ph { display: grid; place-items: center; font-size: 26px; line-height: 1; width: 100%; height: 100%; }
.ico-tile.sm .mob-ph, .mob-ph.sm { font-size: 18px; }
.mob-ph.sm { width: 38px; height: 38px; justify-self: center; }
.detail-visual.mob-visual .mob-ph { font-size: 72px; min-height: 200px; }
.mob-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 8px; }
.mob-stats .prop { text-align: center; padding: 7px 4px; }
.drop-row.clickable, .mob-card.clickable, tr[data-mob] { cursor: pointer; }
.drop-row.clickable:hover, .mob-card.clickable:hover { border-color: var(--primary); background: var(--surface-2); }
.drop-row .ico-tile.sm { justify-self: center; }
@media (max-width: 560px) { .mob-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Auto Hunt: skill picker (app.js abLoadSkills) */
.ab-skill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; max-height: 340px; overflow: auto; }
.ab-skill { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; cursor: pointer; background: var(--card, #fff); text-align: left; font: inherit; }
.ab-skill:hover { border-color: var(--primary, #6366f1); box-shadow: 0 2px 10px rgba(99, 102, 241, .15); }
.ab-skill img { width: 24px; height: 24px; flex: none; }
.ab-skill .sn { font-weight: 600; line-height: 1.25; }
.ab-skill .sm { font-size: 11px; color: var(--muted, #64748b); line-height: 1.35; }
.ab-skill.added { opacity: .5; cursor: default; }
.ab-skill.unusable { opacity: .55; border-style: dashed; }
.ab-skill-group { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--muted, #64748b); margin-top: 4px; }

/* Auto Hunt: items never sold (app.js abKeepNames) */
.ab-keep-box { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.ab-keep-box > summary { cursor: pointer; list-style: revert; }
.ab-keep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-top: 8px; max-height: 260px; overflow: auto; }
.ab-keep-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.ab-keep-item .kn { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-keep-item .kn small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.ab-keep-item a { text-decoration: none; color: var(--muted); font-size: 16px; padding: 0 4px; }
.ab-keep-item a:hover { color: #e11d48; }

/* character guide overview (app.js cgRender) */
.cg-stars { color: #f59e0b; letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.cg-stars .off { color: var(--line, #e5e7eb); }
.cg-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cg-path-step { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.cg-path-step.now { background: var(--primary, #6366f1); border-color: var(--primary, #6366f1); color: #fff; }
.cg-path-arrow { color: var(--muted); font-size: 12px; }
.cg-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.cg-rate { padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cg-facts th { width: 130px; white-space: nowrap; text-align: left; color: var(--muted); font-weight: 600; }
.cg-bar { height: 6px; border-radius: 6px; background: var(--surface-2); margin-top: 6px; max-width: 260px; overflow: hidden; }
.cg-bar span { display: block; height: 100%; background: #10b981; }
.cg-steps { margin: 8px 0 0 20px; line-height: 1.9; font-size: 13.5px; }
.cg-skilltable td { vertical-align: middle; }
.cg-more > summary { cursor: pointer; list-style: revert; }

/* destructive action button (job modal: reset character) */
.btn-danger { background: #e11d48; color: #fff; border-color: #e11d48; }
.btn-danger:hover { background: #be123c; border-color: #be123c; }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }

/* world map: monster filters + per-map monster summary; map monster list; Auto Hunt map picker */
.wm-filters { margin-top: 10px; gap: 8px 12px; }
.wm-card.clickable { cursor: pointer; }
.wm-mon { margin-top: 6px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.wm-mon .badge { font-size: 10.5px; padding: 1px 6px; }
.wm-mon.none { color: var(--faint); }
.mm-sprites { display: flex; gap: 4px; }
.mm-spr { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.mm-spr img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.mm-spr.big { width: 44px; height: 44px; border-radius: 10px; }
.mm-rows { display: flex; flex-direction: column; gap: 6px; }
.mm-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mm-row.is-mvp { background: var(--coral-soft); border-color: transparent; }
.mm-name { flex: 1; min-width: 0; line-height: 1.3; }
.mm-name a { text-decoration: none; color: inherit; }
.mm-name a:hover b { color: var(--primary-ink); text-decoration: underline; }
.mm-name small, .mm-num small { display: block; color: var(--muted); font-size: 11.5px; }
.mm-num { text-align: right; line-height: 1.3; white-space: nowrap; }
.abm-list { display: flex; flex-direction: column; gap: 8px; }
.abm-opt { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; background: var(--surface); }
.abm-opt:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.abm-opt.current { border-color: var(--primary); background: var(--primary-soft); }
.abm-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.abm-label { color: var(--muted); font-size: 12.5px; }
.abm-mobs { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; }
.abm-mob { display: inline-flex; align-items: center; gap: 6px; }
.abm-mob small { color: var(--muted); }

/* character creation: look pickers */
.nc-look { display: flex; gap: 16px; align-items: flex-start; }
.nc-preview { flex: none; width: 280px; text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.nc-preview img { width: 128px; height: 200px; image-rendering: pixelated; display: block; margin: 0 auto; }
.nc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; max-height: 196px; overflow: auto; padding: 2px; }
.nc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-opt { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; padding: 2px 2px 0; text-align: center; font-size: 11px; color: var(--muted); }
.nc-opt:hover { border-color: var(--primary); }
.nc-opt.active { outline: 2px solid var(--primary); color: var(--text); font-weight: 600; }
.nc-opt img { width: 48px; height: 48px; image-rendering: pixelated; display: block; margin: 0 auto; }
.nc-row .nc-opt img { width: 40px; height: 40px; }
@media (max-width: 640px) { .nc-look { flex-direction: column; } }

/* dashboard: features overview */
.feat-box > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.feat-box > summary::-webkit-details-marker { display: none; }
.feat-box .feat-toggle::after { content: "ดูทั้งหมด ▾"; }
.feat-box[open] .feat-toggle::after { content: "ย่อ ▴"; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.feat-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.feat-card .feat-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.feat-card .feat-emo { font-size: 20px; }
.feat-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.6; flex: 1; }
.feat-card .btn { align-self: flex-start; }

/* Forge: auto-cast skill picker (app.js asOpenPicker) + limits box */
.as-pick { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; min-width: 0; overflow: hidden; white-space: nowrap; }
.as-pick img { width: 22px; height: 22px; flex: none; }
.as-pick span { overflow: hidden; text-overflow: ellipsis; }
.as-pick small { color: var(--muted); }
.as-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.as-list { max-height: 52vh; }
.ab-skill.as-cur { border-color: var(--primary); background: var(--primary-soft); }
.as-limits { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--surface-2); font-size: 12.5px; }
.as-limits > summary { cursor: pointer; font-weight: 600; list-style: revert; }
.as-limits-body { margin-top: 8px; line-height: 1.6; }
.as-limits-body ul { margin: 2px 0 8px 18px; padding: 0; }
.as-limits-body code { font-size: 11.5px; }

/* แผนที่ & วาร์ป: dungeon guide (app.js renderDungeons) */
.dg-fresh { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: var(--surface-2); }
.dg-fresh-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.dg-floors { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.dg-floor { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface); }
.dg-mobs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dg-mob { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.dg-mob small { color: var(--muted); }
.dg-mob.mvp { background: #fff4d6; border-color: #f5c451; font-weight: 600; }
.dg-table td { vertical-align: middle; }
.ab-skill.as-off { opacity: .45; cursor: not-allowed; border-style: dashed; background: var(--surface-2); }
.ab-skill.as-off:hover { border-color: var(--line); box-shadow: none; }

/* Forge cart: per-item details (app.js cartDetail) */
.cart-more { grid-column: 1 / -1; font-size: 12px; margin-top: -2px; }
.cart-more > summary { cursor: pointer; color: var(--primary-ink); font-weight: 600; list-style: revert; }
.cart-detail { width: 100%; margin-top: 6px; border-collapse: collapse; }
.cart-detail th { width: 64px; text-align: left; vertical-align: top; color: var(--muted); font-weight: 600; padding: 3px 8px 3px 0; white-space: nowrap; }
.cart-detail td { padding: 3px 0; line-height: 1.5; }
.cart-detail tr + tr th, .cart-detail tr + tr td { border-top: 1px dashed var(--line); }

/* world map: category overview tiles + table view (app.js renderWorldOverview / WM.view) */
.wm-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.wm-ov { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; font: inherit; }
.wm-ov b { font-size: 20px; line-height: 1.1; }
.wm-ov .wm-ov-t { font-weight: 700; font-size: 13px; }
.wm-ov:hover { border-color: var(--primary); }
.wm-ov.active { border-color: var(--primary); background: var(--primary-soft); }
.wm-table td { vertical-align: middle; }
.wm-table tr.wm-grow td { background: var(--surface-2); font-weight: 700; font-size: 12.5px; }
.wm-table .wm-act { white-space: nowrap; text-align: right; }
.cart-link { color: var(--primary-ink); text-decoration: underline dotted; text-underline-offset: 2px; }
.cart-link:hover { text-decoration-style: solid; }
.asi-title { display: flex; align-items: center; gap: 8px; }
.asi-title img { width: 24px; height: 24px; }

/* forge: favourites + history loader (app.js renderFavs / forgeLoadConfig) */
.fav-btn { border: 0; background: none; font-size: 17px; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 4px; }
.fav-btn.on, .fav-big.on { color: #f59e0b; }
.fav-btn:hover { color: #f59e0b; }
.forge-examples { margin-top: 14px; }
.forge-examples > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); list-style: revert; }
.log-names { font-weight: 600; line-height: 1.5; }

/* Forge: kit editor (app.js openKitEditor) + random option picker (app.js optOpenPicker) */
.kit .kit-acts { margin-left: auto; display: flex; gap: 2px; flex: none; }
.kit .kit-acts .del { margin-left: 0; }
.kit .edit { opacity: 0; color: var(--primary-ink); cursor: pointer; font-size: 14px; padding: 0 4px; }
.kit:hover .edit { opacity: 1; }
@media (hover: none) { .kit .edit, .kit .del { opacity: 1; } }
.kit-items { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.cart-item.kit-row { grid-template-columns: 34px minmax(0, 1fr) 84px auto; }
.kit-row-acts { display: flex; gap: 4px; }
@media (max-width: 560px) { .cart-item.kit-row { grid-template-columns: 34px minmax(0, 1fr) 72px; } .kit-row-acts { grid-column: 1 / -1; justify-content: flex-end; } }
.kit-edit-bar { position: sticky; top: 84px; z-index: 5; box-shadow: 0 6px 20px rgba(99, 102, 241, .18); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--primary); background: var(--primary-soft); font-size: 13px; }

/* Skill detail modal (app.js showSkill) + job & skill page (app.js jsRender) */
.info-btn.sk-i { width: 20px; height: 20px; font-size: 11px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; }
.as-pick .sk-i { flex: none; }
.sk-lv { font-size: 12.5px; }
.sk-lv th, .sk-lv td { white-space: nowrap; text-align: center; padding: 5px 8px; }
.sk-lv tr.sk-cur td { background: var(--primary-soft); font-weight: 700; }
.sk-desc { font-size: 12.5px; line-height: 1.55; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; max-height: 46vh; overflow: auto; color: #333; }
.sk-learn { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sk-learn:last-child { border-bottom: 0; }
.js-jobs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.js-job { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; text-align: left; }
.js-job small { color: var(--muted); font-size: 11px; }
.js-job:hover { border-color: var(--primary); }
.js-job.active { border-color: var(--primary); background: var(--primary-soft); }
.js-build { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface-2); }
.js-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.js-skill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; text-decoration: none; color: inherit; }
.js-skill img { width: 20px; height: 20px; }
.js-skill:hover { border-color: var(--primary); color: var(--primary-ink); }
.js-tree > summary { cursor: pointer; }
.js-tree-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }
.js-node { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit; min-width: 0; }
.js-node:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(99, 102, 241, .15); }
.js-node img { width: 26px; height: 26px; flex: none; }
.js-node .nm { font-weight: 650; font-size: 13px; line-height: 1.25; }
.js-kind { font-weight: 600; color: var(--primary-ink); }
.js-req { font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.js-weapons { display: flex; flex-wrap: wrap; gap: 6px; }
.js-weapon { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; }
.js-weapon small { color: var(--muted); font-size: 11px; }
.js-bonus-lv { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; color: var(--muted); }
a.cg-path-step { text-decoration: none; color: inherit; }
a.cg-path-step:hover { border-color: var(--primary); }

/* Animated character preview (app.js lookPlayer, look.php?anim=1) */
.lk { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lk-stage { position: relative; width: 260px; height: 260px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden;
  background-color: #f4f5fb; background-image: linear-gradient(45deg, #e9ebf5 25%, transparent 25%, transparent 75%, #e9ebf5 75%), linear-gradient(45deg, #e9ebf5 25%, transparent 25%, transparent 75%, #e9ebf5 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.lk-sprite { position: absolute; background-repeat: no-repeat; image-rendering: pixelated; }
.lk-msg { position: absolute; inset: auto 8px 8px 8px; font-size: 12px; color: var(--muted); text-align: center; }
.lk-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.lk-dir { min-width: 92px; text-align: center; }
.lk-acts .chip { font-size: 12px; padding: 3px 9px; }
.lk-job { max-width: 260px; }
.lk-note { text-align: center; max-width: 320px; }
.lk [data-lk="spin"].active { background: var(--primary); color: #fff; }
.nc-preview { width: 280px; }
.nc-preview .lk-stage { width: 260px; height: 240px; }

/* Job & skill page v2: picker table, skill tree tables, skill modal layout */
.js-pick { width: 100%; font-size: 13px; }
.js-pick th, .js-pick td { vertical-align: top; padding: 6px 8px; }
.js-pick tbody th { text-align: left; white-space: nowrap; font-weight: 650; }
.js-pick tbody tr.cur { background: var(--primary-soft); }
.js-pick td .js-job { display: inline-block; margin: 2px 4px 2px 0; padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.js-pick td .js-job small { font-size: 10.5px; color: var(--muted); }
.js-tree { border-top: 1px solid var(--line); padding: 8px 0; }
.js-tree:first-of-type { border-top: 0; }
.js-tree > summary { padding: 4px 0; }
.js-tree-t { width: 100%; font-size: 13px; margin-top: 6px; }
.js-tree-t td, .js-tree-t th { padding: 6px 8px; vertical-align: middle; }
.js-sk { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: inherit; font-weight: 600; }
.js-sk img { width: 24px; height: 24px; }
.js-sk:hover span { color: var(--primary-ink); text-decoration: underline; }
.js-builds { width: 100%; font-size: 13px; }
.js-builds td { vertical-align: top; padding: 10px 8px; }
.js-builds td:first-child { min-width: 180px; max-width: 280px; }
.js-builds .js-skills { margin-top: 0; }
.js-mini { font-size: 13px; }
.js-mini th, .js-mini td { text-align: center; padding: 5px 10px; }
.sk-sec { font-weight: 700; font-size: 13px; margin: 16px 0 8px; }
.sk-const { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sk-const span { display: flex; flex-direction: column; padding: 5px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
.sk-const small { font-size: 11px; color: var(--muted); }
.sk-lv td.sk-eff, .sk-lv th.sk-eff { text-align: left; white-space: normal; min-width: 220px; }
.sk-lv td.sk-eff div { display: inline; }
.sk-lv td.sk-eff div + div::before { content: ' '; }
.sk-desc { max-height: none; }
.sk-learn { padding: 4px 0; }
#js-body { scroll-margin-top: 90px; }

/* helpers & town look-alikes (inc/helpers.php) */
.hl-spr { max-width: 72px; max-height: 80px; image-rendering: pixelated; display: block; margin: 0 auto; }
.hl-spr.big { max-width: 140px; max-height: 150px; transform: scale(1.4); transform-origin: center bottom; }
.hl-how { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); font-size: 13px; line-height: 1.65; }
.hl-how ol, .hl-how ul { margin: 6px 0 0; padding-left: 20px; }
.hl-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.hl-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: center; min-height: 150px; justify-content: flex-end; }
.hl-slot:hover { border-color: var(--primary); }
.hl-slot.empty { border-style: dashed; cursor: default; justify-content: center; color: var(--muted, #8a8fa8); }
.hl-slot.empty small { font-size: 11px; }
.hl-slot-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; font-size: 12px; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hl-card { position: relative; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .15s, transform .15s; }
.hl-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.hl-card.in-team { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.hl-card.changed::after { content: "แก้แล้ว"; position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--sun, #f5c542) 40%, transparent); }
.hl-card-img { height: 86px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.hl-badge { position: absolute; top: 6px; right: 6px; font-size: 10px; }
.hl-edit { display: flex; gap: 20px; align-items: flex-start; }
.hl-edit-side { width: 190px; flex: none; text-align: center; }
.hl-edit-img { height: 200px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; border-radius: 14px; background: var(--surface-2); padding-bottom: 14px; }
.hl-sub { font-weight: 650; margin: 14px 0 8px; }
.hl-maps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.hl-maps .chip.hl-town { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.hl-edit .input.hl-changed, .hl-edit .select.hl-changed { background: color-mix(in srgb, var(--sun, #f5c542) 22%, transparent); }
.hl-savebar { position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--shadow-lg); }
@media (max-width: 760px) { .hl-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hl-edit { flex-direction: column; } .hl-edit-side { width: 100%; } }
.hl-job { font-size: 12px; font-weight: 600; color: var(--primary); margin-top: 2px; }
.hl-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin: 3px 0; }
.hl-roles span { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--bg-tint, rgba(120,120,160,.12)); }
.hl-abil { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; }
.hl-abil .hl-job { font-size: 14px; } .hl-abil .hl-roles { justify-content: flex-start; } .hl-abil .hl-roles span { font-size: 12px; }
.hl-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-skills .chip { font-size: 12px; }

/* tweaks page: section jump bar + special helpers table */
.tw-jump { position: sticky; top: 64px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 16px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); }
.tw-jump:empty { display: none; }
.tw-jump .chip { cursor: pointer; font-size: 12.5px; }
.tw-jump .chip:hover { border-color: var(--primary); color: var(--primary); }
.card.tw-flash { animation: twFlash 1.2s ease; }
@keyframes twFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--primary); } 100% { box-shadow: none; } }
.bf-htable td { vertical-align: middle; }
.bf-htable tr.on td { background: var(--primary-soft); }
.bf-htable .hi { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; border: 1px solid var(--line); }
.bf-htable .hi img { max-width: 28px; max-height: 28px; image-rendering: pixelated; }.hl-tbl td { vertical-align: middle; }
.hl-tbl tbody tr { cursor: pointer; }
.hl-tbl tbody tr:hover td { background: var(--surface-2); }
.hl-tbl tr.in-team td { background: var(--primary-soft); }
.hl-tbl-img { width: 56px; }
.hl-tbl-img .hl-spr { max-width: 44px; max-height: 52px; }.hl-slot-no { position: absolute; top: 6px; left: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--primary); color: #fff; }
.hl-slot.empty .hl-slot-no { background: var(--line-2); color: var(--muted); }
.hl-slot-move { display: flex; gap: 4px; min-height: 24px; }
/* quest guide (inc/quests.php) */
.qg-list { display: flex; flex-direction: column; gap: 8px; }
.qg-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: border-color .15s; }
.qg-row:hover { border-color: var(--primary); }
.qg-row.off { opacity: .6; }
.qg-row-img { width: 54px; height: 64px; flex: none; display: flex; align-items: flex-end; justify-content: center; }
.qg-npc { max-width: 54px; max-height: 64px; image-rendering: pixelated; }
.qg-npc.big { max-width: 120px; max-height: 140px; }
.qg-row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qg-row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qg-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.qg-tags span { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--bg-tint, rgba(120,120,160,.12)); }
.qg-tags .qg-chain { background: var(--primary-soft); color: var(--primary); }
.qg-off { color: var(--coral, #e5484d) !important; }
.qg-where { display: inline-block; font-size: 12px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--mint, #2fb37a) 15%, transparent); cursor: copy; white-space: nowrap; }
.qg-where:hover { background: color-mix(in srgb, var(--mint, #2fb37a) 30%, transparent); }
.qg-item { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; margin: 1px 2px; cursor: pointer; vertical-align: middle; }
.qg-item img { width: 22px; height: 22px; }
.qg-mob { max-width: 34px; max-height: 38px; image-rendering: pixelated; vertical-align: middle; }
.qg-mobchip { display: inline-flex; align-items: center; gap: 4px; }
.qg-detail { display: flex; gap: 20px; align-items: flex-start; }
.qg-side { width: 230px; flex: none; }
.qg-side-npc { text-align: center; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.qg-map { position: relative; margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.qg-map img { width: 100%; display: block; }
.qg-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #ff3b3b; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(255,59,59,.35); animation: qgPulse 1.4s infinite; }
@keyframes qgPulse { 50% { box-shadow: 0 0 0 7px rgba(255,59,59,.15); } }
.qg-h { font-weight: 700; margin: 14px 0 8px; }
.qg-steps { margin: 0; padding-left: 22px; line-height: 1.75; }
.qg-steps li { margin-bottom: 6px; }
.qg-rewards { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qg-rw { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sun, #f5c542) 22%, transparent); }
.qg-links > div { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qg-chainlist { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.qg-step { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; }
.qg-step:hover { border-color: var(--primary); }
.qg-step.cur { background: var(--primary-soft); border-color: var(--primary); }
.qg-step-no { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--line-2); }
.qg-step.cur .qg-step-no { background: var(--primary); color: #fff; }
.qg-step-t { flex: 1; min-width: 0; }
.qg-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.qg-goal { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.qg-goal:hover { border-color: var(--primary); }
.qg-goal-rw { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.qg-rgroup { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 8px; }
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 760px) { .qg-detail { flex-direction: column; } .qg-side { width: 100%; } .qg-goals { grid-template-columns: 1fr; } }
/* quest guide v2: overview, sets, checklist, filters, by map */
.qg-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.qg-catcard { text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 3px; }
.qg-catcard small { color: var(--muted); font-size: 11.5px; }
.qg-catcard:hover { border-color: var(--primary); }
.qg-catcard.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; background: var(--primary-soft); }
.qg-bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin: 4px 0 2px; }
.qg-bar.big { height: 10px; }
.qg-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint, #2fb37a), var(--primary)); border-radius: 999px; }
.qg-group { margin-bottom: 16px; }
.qg-group-h { font-weight: 700; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.qg-setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.qg-set { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.qg-set:hover { border-color: var(--primary); }
.qg-set-done { background: color-mix(in srgb, var(--mint, #2fb37a) 10%, var(--surface-2)); }
.qg-set-active { border-color: color-mix(in srgb, var(--primary) 60%, var(--line)); }
.qg-set-t { line-height: 1.35; }
.qg-st { font-size: 15px; line-height: 1; }
.qg-check { display: flex; flex-direction: column; gap: 6px; }
.qg-ck { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.qg-ck-done { background: color-mix(in srgb, var(--mint, #2fb37a) 9%, var(--surface)); }
.qg-ck-done b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--mint, #2fb37a) 70%, transparent); }
.qg-ck-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.qg-ck-no { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.qg-ck-act { display: flex; flex-direction: column; gap: 4px; flex: none; }
.qg-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.qg-filters .field { margin: 0; }
.qg-mapview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.qg-map.big { margin-top: 0; }
.qg-map.noimg { min-height: 300px; background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px); }
.qg-map.noimg img { display: none; }
.qg-pin.num { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 11px; font-weight: 700; color: #fff; display: grid; place-items: center; cursor: pointer; animation: none; }
.qg-pin-no { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #ff3b3b; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.qg-npcs { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow: auto; padding-right: 4px; }
.qg-npccard { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.qg-npcq { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.qg-npcq-row { display: flex; gap: 6px; align-items: center; text-align: left; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; }
.qg-npcq-row:hover { border-color: var(--primary); }
.qg-statusbox { margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.qg-tips { margin: 0 0 4px; padding-left: 18px; line-height: 1.7; font-size: 13.5px; }
.qg-tips .qg-tip-warn { color: var(--coral, #e5484d); }
.qg-tips .qg-tip-cat { color: var(--muted); }
@media (max-width: 900px) { .qg-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qg-mapview { grid-template-columns: 1fr; } }
/* daily quests page */
.qb-dim { opacity: .55; }
.qb-mtable td { vertical-align: middle; }
.qb-prev { margin: 0; padding-left: 20px; line-height: 1.6; }
.qb-prev li { margin-bottom: 8px; }
.qb-pc { padding: 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--surface-2); }
.qb-pq { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; margin-top: 6px; }
.qg-setrew small { margin-right: 6px; }
/* quest guide tables */
.qg-tbl td { vertical-align: middle; }
.qg-tbl tbody tr[data-qg-set], .qg-tbl tbody tr[data-qg-open] { cursor: pointer; }
.qg-tbl tbody tr:hover td { background: var(--surface-2); }
.qg-tbl tr.qg-tr-done td { background: color-mix(in srgb, var(--mint, #2fb37a) 8%, transparent); }
.qg-tbl tr.qg-tr-off td { opacity: .6; }
/* job paths */
.jp-flow { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.jp-node { flex: 1 0 128px; display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); text-align: left; font: inherit; cursor: pointer; }
.jp-node:hover { border-color: var(--primary); }
.jp-node.sel { box-shadow: 0 0 0 2px var(--primary) inset; border-color: var(--primary); }
.jp-node small { font-size: 11px; }
.jp-start { cursor: default; flex: 0 0 88px; justify-content: center; }
.jp-tier { font-size: 11px; font-weight: 700; color: var(--primary); }
.jp-off { color: var(--mint, #2fb37a); }
.jp-done { background: color-mix(in srgb, var(--mint, #2fb37a) 12%, var(--surface-2)); }
.jp-current { background: var(--primary-soft); border-color: var(--primary); }
.jp-next { border-style: dashed; border-color: var(--primary); }
.jp-skip { opacity: .55; }
.jp-arrow { align-self: center; font-size: 22px; color: var(--muted); }
.jp-detail-h { font-size: 16px; font-weight: 700; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jp-req { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.jp-req > div { flex: 1; min-width: 160px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.jp-box { padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.jp-npcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.jp-npc { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 6px; border-radius: 10px; background: var(--surface-2); }
.jp-tbl td { vertical-align: top; font-size: 13px; }
.jp-tbl td.jp-c-done { background: color-mix(in srgb, var(--mint, #2fb37a) 10%, transparent); }
.jp-tbl td.jp-c-current { background: var(--primary-soft); font-weight: 700; }
.jp-tbl td.jp-c-skip { opacity: .5; }
.jp-wnpc { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 8px; }
.jp-wrows { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0 4px; font-size: 13px; }
.jp-dlg { margin-top: 6px; }
.jp-dlg summary { cursor: pointer; font-size: 13px; color: var(--primary); }
.jp-dlg-body { max-height: 360px; overflow: auto; padding: 8px 10px; margin-top: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.jp-say { font-weight: 700; margin-top: 6px; color: var(--primary); }
.jp-sel { margin: 4px 0; font-size: 12.5px; }
.jp-sel span { display: inline-block; padding: 1px 8px; margin: 2px; border-radius: 999px; background: var(--primary-soft); }
.jp-cut { border: 0; border-top: 1px dashed var(--line); margin: 6px 0; }.jp-sum { margin: 0 0 8px; padding-left: 22px; line-height: 1.9; font-size: 13.5px; }
.jp-sum li { margin-bottom: 4px; }
.jp-quiz { margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.jp-quiz summary { cursor: pointer; font-weight: 700; }
.jp-quiz ol { margin: 8px 0 4px; padding-left: 22px; max-height: 420px; overflow: auto; font-size: 13px; line-height: 1.6; }
.jp-quiz li { margin-bottom: 8px; }
.jp-ans { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.jp-ans span { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.jp-ans span.ok { border-color: var(--mint, #2fb37a); background: color-mix(in srgb, var(--mint, #2fb37a) 16%, var(--surface)); font-weight: 700; }.jp-quiz ol { list-style: none; padding-left: 4px; }

.qg-total { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sun, #f5c542) 14%, var(--surface-2)); border: 1px solid var(--line); margin-bottom: 10px; }

/* daily quests v2 */
.qb-set { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.qb-set:last-child { border-bottom: 0; }
.qb-set > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qb-set small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.qb-own { display: flex; gap: 6px; flex-wrap: wrap; }
.qb-own label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.qb-own input { width: 92px; }
.qb-pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 480px; overflow: auto; }
.qb-pk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font: inherit; text-align: center; }
.qb-pk:hover { border-color: var(--primary); }
.qb-pk.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; background: var(--primary-soft); }
.qb-pk.on::before { content: "✅"; position: absolute; }
.qb-pk { position: relative; }
.qb-pk-img { height: 54px; display: flex; align-items: flex-end; }
.qb-pk small { color: var(--muted); font-size: 11px; }
.qg-catcard.qg-link { border-style: dashed; }
.qg-catcard.qg-link small { color: var(--primary); }

.qg-story { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--sky, #3b82f6) 8%, var(--surface-2)); margin-bottom: 10px; font-size: 13.5px; line-height: 1.6; }
.qg-story .chip { font-size: 12px; }

.qb-adv { margin-top: 12px; border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; }
.qb-adv summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }

/* tweaks page: main tabs vs. section bar, clearly different */
#tw-tab { padding: 5px; background: var(--primary); border-radius: 14px; gap: 4px; }
#tw-tab button { color: #fff; opacity: .85; font-size: 14px; padding: 9px 16px; border-radius: 10px; background: transparent; }
#tw-tab button:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
#tw-tab button.active { opacity: 1; background: #fff; color: var(--primary); font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tw-jump { background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); }
.tw-jump .chip { background: var(--surface); }
.tw-jump-label { font-size: 12px; font-weight: 700; color: var(--primary); margin-right: 4px; }
.mob-item .mob-pick-btn { position: absolute; top: 8px; left: 8px; z-index: 2; }
.mob-item { position: relative; }

.hl-opts { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }

/* pets */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pt-card { position: relative; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.pt-card:hover { border-color: var(--primary); }
.pt-img { height: 80px; display: flex; align-items: flex-end; justify-content: center; }
.pt-spr { max-width: 72px; max-height: 80px; image-rendering: pixelated; }
.pt-spr.sm { max-width: 40px; max-height: 44px; }
.pt-spr.big { max-width: 130px; max-height: 150px; }
.pt-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12.5px; }
.pt-bonus { color: var(--primary); min-height: 18px; }
.pt-badge { position: absolute; top: 6px; right: 6px; font-size: 10px; }
.pt-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pt-facts > div { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.pt-btbl td { vertical-align: middle; }
.pt-evo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }.feat-card .feat-new { background: var(--mint-soft); color: var(--mint); margin-left: auto; font-size: 10.5px; }

.qg-link { cursor: pointer; }
.qg-link:hover { color: var(--primary); text-decoration: underline; }
.ab-mob-results { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ab-mob-results:empty { display: none; }
.ab-target > summary { cursor: pointer; }
.ab-sk-info { flex: none; align-self: flex-start; padding: 0 2px; border-radius: 6px; opacity: .65; cursor: help; }
.ab-sk-info:hover { opacity: 1; background: var(--surface-2); }