/* Legacy Companion — dark Lineage 2 fantasy theme */
:root {
  --bg:        #0c0d12;
  --bg-2:      #14161f;
  --panel:     #1a1d29;
  --panel-2:   #20242f;
  --border:    #2c3142;
  --border-2:  #3a4155;
  --text:      #e6e8ef;
  --text-dim:  #9aa0b3;
  --text-faint:#6b7186;
  --gold:      #c8a45a;
  --gold-2:    #e7c884;
  --gold-soft: rgba(200,164,90,0.12);
  --red:       #c75450;
  --green:     #6fbf73;
  --blue:      #5b8fd6;
  --shadow:    0 10px 30px rgba(0,0,0,0.45);
  --radius:    12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(200,164,90,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(91,143,214,0.08), transparent 60%),
    linear-gradient(rgba(12,13,18,0.70), rgba(12,13,18,0.82)),
    url('../assets/c1background.png') center top / cover no-repeat fixed,
    var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.hidden { display: none !important; }
h1, h2, h3, .brand-name, .login-title { font-family: 'Cinzel', Georgia, serif; }
a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Buttons / inputs ---------- */
button { font-family: inherit; cursor: pointer; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1408; border: none; border-radius: 8px; padding: 10px 16px;
  font-weight: 700; letter-spacing: .3px; transition: filter .15s, transform .05s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--gold); }
.btn-sm { padding: 5px 9px; font-size: 12px; }
input, select, textarea {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: 14px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.field + .field { margin-top: 12px; }

/* ---------- Login (Lineage 2 "Harbingers of War" style) ---------- */
/* Drop the real screenshot into assets/login.jpg for the exact background;
   until then the sunset gradient below stands in. */
.login-screen {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px;
  background:
    url('../assets/c1background.png') center/cover no-repeat,
    linear-gradient(180deg, #4a3a2c 0%, #6b4a30 45%, #d98a55 78%, #2a2018 100%);
}
/* Looping video background — covers the screen, sits behind everything (the
   login window keeps its grid-centered position; z-index:-1 avoids touching any
   child's positioning). */
.login-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0c0a12; z-index: -1; pointer-events: none; }
/* CHRONICLE 1 / Harbingers of War — top-left, like the client */
.l2-chronicle { position: absolute; top: 22px; left: 26px; color: #f3f1ea; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.l2-chronicle-num { font-size: 11px; letter-spacing: 3px; opacity: .85; }
.l2-chronicle-name { font-family: 'Cinzel', Georgia, serif; font-size: 22px; font-weight: 700; margin-top: 2px; }

/* Lineage-II-style stacked logo */
.l2-logo {
  position: absolute; top: 7vh; left: 0; right: 0; display: flex; flex-direction: column;
  align-items: center; gap: 2px; pointer-events: none;
  color: #f6f3ea; text-shadow: 0 2px 14px rgba(0,0,0,.5), 0 0 30px rgba(255,235,190,.25);
}
.l2-logo-line { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(26px, 5vw, 52px); letter-spacing: 8px; line-height: .98; }
.l2-logo-bar { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(30px, 6vw, 64px); color: var(--gold-2); line-height: .8; }
.l2-logo-sub { margin-top: 8px; font-size: 12px; letter-spacing: 5px; opacity: .85; text-transform: uppercase; }

/* The in-game grey "Log In" window */
.l2-login-window {
  width: 300px; border-radius: 3px; overflow: hidden;
  background: linear-gradient(180deg, #4c4c4c, #3a3a3a);
  border: 1px solid #1d1d1d;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.55);
}
.l2-titlebar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: linear-gradient(180deg, #343434, #262626);
  border-bottom: 1px solid #1a1a1a; color: #d9d4c6; font-size: 12.5px; letter-spacing: .5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.l2-titlebar-dot { width: 10px; height: 10px; border-radius: 2px; background: radial-gradient(circle at 35% 30%, #d9b56b, #7a5a23); box-shadow: 0 0 4px rgba(217,181,107,.6); }
.l2-login-body { padding: 16px 16px 14px; }
.l2-row { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.l2-row label { margin: 0; color: #c8c3b4; font-size: 12px; letter-spacing: 1px; text-align: right; }
.l2-row input {
  width: 100%; background: #161616; border: 1px solid #0d0d0d; border-radius: 2px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.7); color: #ece8dc; padding: 7px 9px;
}
.l2-row input:focus { outline: none; border-color: var(--gold); box-shadow: inset 1px 1px 2px rgba(0,0,0,.7), 0 0 0 2px var(--gold-soft); }
.l2-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.l2-btn {
  min-width: 86px; padding: 7px 14px; color: #efe9da; font-size: 13px; border-radius: 2px;
  background: linear-gradient(180deg, #5a5a5a, #444); border: 1px solid #222;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.45);
  transition: filter .12s, transform .04s;
}
.l2-btn:hover { filter: brightness(1.18); }
.l2-btn:active { transform: translateY(1px); box-shadow: inset 1px 1px 3px rgba(0,0,0,.5); }
.l2-oauth { margin-top: 12px; text-align: center; }
/* Discord-only login: centered button inside the grey L2 window. */
.l2-login-discord { text-align: center; padding: 24px 16px 20px; }
.l2-login-lead { margin: 0 0 15px; color: #c8c3b4; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.discord-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 20px; border-radius: 3px; font-weight: 600; font-size: 13px; letter-spacing: .3px;
  color: #efe9da; background: linear-gradient(180deg, #5a5a5a, #444); border: 1px solid #222;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.4);
  transition: filter .12s, transform .04s; }
.discord-btn:hover { filter: brightness(1.18); }
.discord-btn:active { transform: translateY(1px); }
.discord-btn.hidden { display: none; }
.discord-ic { font-size: 15px; }
.login-error { color: #ff8d7a; font-size: 12.5px; min-height: 16px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.login-hint { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.78); font-size: 11px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.l2-copyright { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.55); font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.l2-music-btn {
  position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border-radius: 50%;
  font-size: 18px; line-height: 1; color: #efe9da;
  background: linear-gradient(180deg, rgba(60,60,60,.7), rgba(30,30,30,.7));
  border: 1px solid rgba(0,0,0,.6);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.15), 0 4px 14px rgba(0,0,0,.4);
  backdrop-filter: blur(4px); transition: filter .15s, transform .05s; z-index: 5;
}
.l2-music-btn:hover { filter: brightness(1.2); }
.l2-music-btn:active { transform: translateY(1px); }
.l2-music-btn.muted { opacity: .65; }

/* ---------- App shell ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 18px; padding: 10px 18px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(26,29,41,0.95), rgba(20,22,31,0.9));
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-link { cursor: pointer; }
.brand-link:hover .brand-name { color: var(--gold-2); }
.brand-mark { font-size: 22px; color: var(--gold-2); }
.brand-name { font-size: 16px; letter-spacing: 1.5px; color: var(--text); }
.chronicle-switch { display: flex; align-items: center; gap: 8px; }
.chronicle-switch label { margin: 0; }
.chronicle-switch select { width: auto; min-width: 180px; }
/* Members can't change the chronicle — shown as a static label (admins get the
   dropdown above). */
.chronicle-static { font-family: 'Cinzel', Georgia, serif; color: var(--gold-2); font-size: 14px; letter-spacing: .3px; white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.tab {
  background: transparent; color: var(--text-dim); border: 1px solid transparent;
  border-radius: 8px; padding: 8px 13px; font-weight: 600; font-size: 13px;
}
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active { color: var(--gold-2); background: var(--gold-soft); border-color: var(--border-2); }
.tab-hidden { display: none !important; }
/* Companion / Clan world switch — a segmented control that splits the app into
   the game companion and the clan CMS. Sits left of the tab bar. */
/* World switch sits on the LEFT, right next to the brand logo. */
.world-switch { display: inline-flex; margin-left: 6px; border: 1px solid var(--border); border-radius: 9px; padding: 2px; background: var(--panel-2); gap: 2px; }
.world-btn { background: transparent; color: var(--text-dim); border: 0; border-radius: 7px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; letter-spacing: .3px; }
.world-btn:hover { color: var(--text); }
.world-btn.on { color: var(--gold-2); background: var(--gold-soft); }
/* Companion (game tools) is gold-accented to set it apart from the clan buttons. */
.world-btn.world-companion { color: var(--gold-2); font-weight: 800; }
.world-btn.world-companion:hover { color: var(--gold); }
.world-btn.world-companion.on { color: #1a1c22; background: var(--gold); }
/* Divider between the Companion (game tools) and the alliance's clans. */
.world-sep { width: 1px; align-self: stretch; margin: 3px 5px; background: var(--border); }
@media (max-width: 820px) { .world-switch { order: 2; margin-left: 0; } }
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 36px; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; margin-left: auto; }
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--text-dim); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Entity deep-link anchors (#item/#mob/#quest): keep the app's look (no underline)
   and make children pointer-transparent so a right-click hits the <a> — giving the
   browser's link menu ("open in new tab"), not the icon's image menu. */
:where(a[href^="#item/"], a[href^="#mob/"], a[href^="#quest/"]) { color: inherit; text-decoration: none; }
a[href^="#item/"] > *, a[href^="#mob/"] > *, a[href^="#quest/"] > * { pointer-events: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.who { color: var(--text); font-size: 13px; font-weight: 600; }

/* User menu (top-right) */
.user-menu { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; transition: border-color .15s;
}
.user-btn:hover { border-color: var(--gold); }
.user-av {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; color: var(--gold-2);
  background: radial-gradient(circle at 50% 35%, rgba(200,164,90,0.3), transparent 70%);
  border: 1px solid var(--gold);
}
.user-caret { color: var(--text-faint); font-size: 11px; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border-2);
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px; overflow: hidden;
}
.user-item {
  display: block; width: 100%; text-align: left; background: transparent; color: var(--text);
  border: none; border-radius: 7px; padding: 9px 11px; font-size: 13px;
}
.user-item:hover { background: var(--gold-soft); color: var(--gold-2); }
.user-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.user-pw { padding: 8px 6px 4px; display: flex; flex-direction: column; gap: 6px; }
.user-pw input { font-size: 13px; padding: 7px 9px; }
.user-pw-row { display: flex; align-items: center; gap: 10px; }
.user-pw-msg { font-size: 12px; }
.user-pw-msg.ok { color: var(--green); }
.user-pw-msg.err { color: var(--red); }

.view { flex: 1; padding: 22px; max-width: 1280px; width: 100%; margin: 0 auto; }
.footer {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap;
  border-top: 1px solid var(--border); color: var(--text-faint); font-size: 12px;
}
.footer span { flex: 1; }
.footer a { color: var(--text-dim); text-decoration: none; }
.footer a:hover { color: var(--gold-2); }

/* ---------- Generic components ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 22px; color: var(--text); }
.page-head p { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; transition: border-color .15s, transform .08s;
}
.card:hover { border-color: var(--border-2); }
.card h3 { margin: 0 0 6px; font-size: 15px; color: var(--gold-2); }
.card .big { font-size: 26px; font-weight: 700; color: var(--text); font-family: 'Cinzel', serif; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }

.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.panel h3 { margin: 0 0 12px; font-size: 16px; color: var(--text); }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 200px; max-width: 420px; }
.toolbar .spacer { flex: 1; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.tbl th { color: var(--text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; background: var(--bg-2); }
.tbl tbody tr:hover { background: var(--panel-2); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .name { font-weight: 600; color: var(--text); }

/* item w/ icon */
.item { display: flex; align-items: center; gap: 9px; }
.icon {
  width: 32px; height: 32px; border-radius: 6px; flex: none; object-fit: cover;
  background: var(--bg) center/60% no-repeat; border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 14px; color: var(--text-faint);
}
.icon.sm { width: 24px; height: 24px; border-radius: 5px; }
.icon.lg { width: 44px; height: 44px; }

/* badges / chips */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-2); color: var(--text-dim); }
.badge.gold { color: var(--gold-2); border-color: var(--gold); background: var(--gold-soft); }
.badge.green { color: var(--green); border-color: rgba(111,191,115,0.4); background: rgba(111,191,115,0.1); }
.badge.red { color: var(--red); border-color: rgba(199,84,80,0.4); background: rgba(199,84,80,0.1); }
.badge.blue { color: var(--blue); border-color: rgba(91,143,214,0.4); background: rgba(91,143,214,0.1); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; cursor: pointer; }
.chip:hover { border-color: var(--gold); }
.chip.active { color: var(--gold-2); background: var(--gold-soft); border-color: var(--gold); }
/* Craft badge in the item list: solid for actual products, muted for the parts
   & recipe books that merely belong to a craft. */
.sp-craft { color: var(--gold-2); text-decoration: none; white-space: nowrap; }
.sp-craft.sp-craft-part { color: var(--text-dim); opacity: .8; }
.sp-craft.sp-craft-part:hover { color: var(--gold-2); opacity: 1; }

/* Inner sub-tab bar (Crafts & Profit, etc.) */
.subtabs { display: flex; gap: 4px; margin: -4px 0 16px; border-bottom: 1px solid var(--border); }
.subtab {
  background: transparent; color: var(--text-dim); border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-weight: 600; font-size: 13px; margin-bottom: -1px;
}
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--gold-2); border-bottom-color: var(--gold); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.profit-pos { color: var(--green); font-weight: 700; }
.profit-neg { color: var(--red); font-weight: 700; }

/* AI chat */
.chat { display: flex; flex-direction: column; gap: 12px; }
.bubble { padding: 12px 14px; border-radius: 12px; max-width: 90%; white-space: pre-wrap; }
.bubble.user { align-self: flex-end; background: var(--gold-soft); border: 1px solid var(--gold); }
.bubble.bot { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); }
.bubble.bot h1, .bubble.bot h2, .bubble.bot h3 { font-size: 15px; margin: 8px 0 4px; color: var(--gold-2); }
.bubble.bot code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }
/* AI-answer entity links (items / mobs) — reuse the global tooltip + click-open */
.ai-ent { cursor: pointer; border-bottom: 1px dotted var(--gold); color: var(--gold-2); }
.ai-ent:hover { border-bottom-style: solid; background: var(--gold-soft); border-radius: 3px; }
.chat-input { display: flex; gap: 10px; margin-top: 14px; }
.chat-input textarea { resize: vertical; min-height: 48px; }
.step { color: var(--text-faint); font-size: 12px; font-style: italic; }
.bubble-img { display: block; max-width: 320px; max-height: 240px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 8px; }

/* AI screenshot attach zone */
.ai-attach { margin-top: 14px; }
.ai-attach-hint { border: 1px dashed var(--border-2); border-radius: 10px; padding: 10px 14px; color: var(--text-dim); font-size: 12.5px; background: rgba(255,255,255,.015); }
.ai-attach-hint b { color: var(--text); }
.linklike { background: none; border: none; color: var(--gold); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.ai-attach-thumb { position: relative; display: inline-block; }
.ai-attach-thumb img { max-height: 120px; max-width: 200px; border-radius: 8px; border: 1px solid var(--border); display: block; }
.ai-attach-thumb button { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: #1c2030; color: var(--text); cursor: pointer; font-size: 12px; line-height: 1; }
.ai-attach-thumb button:hover { background: #2a2f40; }

.empty { text-align: center; color: var(--text-faint); padding: 40px 20px; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-2); border-top-color: var(--gold-2); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-x { overflow-x: auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } .tabs { order: 3; width: 100%; } }

.kbd { font-size: 11px; color: var(--text-faint); }
/* 3D viewer modal */
.modal3d-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(3px); }
.modal3d { width: min(680px, 92vw); background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.modal3d-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-family: 'Cinzel', serif; color: var(--gold-2); }
.modal3d-close { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; width: 30px; height: 30px; }
.modal3d-close:hover { border-color: var(--gold); }
.modal3d-body { height: min(560px, 70vh); background: radial-gradient(circle at 50% 40%, rgba(200,164,90,.06), transparent 70%); }
.modal3d-body canvas { display: block; width: 100% !important; height: 100% !important; }
.modal3d-hint { text-align: center; padding: 8px; font-size: 12px; border-top: 1px solid var(--border); }

/* In-game-style item tooltip */
.item-tip {
  position: fixed; z-index: 200; pointer-events: none; max-width: 260px;
  background: linear-gradient(180deg, #1c2030, #12151f); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 11px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); font-size: 12.5px;
}
.item-tip .tip-head { display: flex; align-items: flex-start; gap: 9px; }
.item-tip .tip-head .tip-icon { flex: none; width: 32px; height: 32px; font-size: 22px; }
.item-tip .tip-head .tip-icon.icon { display: inline-flex; align-items: center; justify-content: center; }
.item-tip .tip-head-main { min-width: 0; flex: 1; }
.item-tip .tip-name { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 14px; color: #e6e8ef; }
.item-tip .tip-type { color: var(--text-dim); font-size: 11.5px; margin-top: 1px; }
.item-tip .tip-stats { width: 100%; border-collapse: collapse; margin-top: 7px; }
.item-tip .tip-stats td { padding: 1px 0; }
.item-tip .tip-stats td:first-child { color: var(--text-faint); padding-right: 14px; }
.item-tip .tip-stats td:last-child { text-align: right; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.item-tip .tip-buy { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text); }
.item-tip .tip-buy-h { color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.item-tip .tip-buytbl { width: 100%; border-collapse: collapse; }
.item-tip .tip-buytbl td { padding: 1px 0; }
.item-tip .tip-buytbl td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.item-tip .tip-buytbl tr.tip-cheap td { color: var(--green); font-weight: 600; }
.item-tip .tip-desc { margin-top: 5px; font-size: 12px; color: var(--text-dim); line-height: 1.35; font-style: italic; }
.item-tip .tip-src-wrap { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); }
.item-tip .tip-src-h { color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.item-tip .tip-src { font-size: 11.5px; color: var(--text); line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-tip .tip-src-k { display: inline-block; min-width: 32px; text-align: center; font-size: 9.5px; text-transform: uppercase; border-radius: 4px; padding: 0 4px; margin-right: 4px; }
.item-tip .tip-src-k.drop { color: var(--green); background: rgba(111,191,115,.12); }
.item-tip .tip-src-k.spoil { color: var(--gold-2); background: rgba(200,164,90,.14); }
.craft-recipe { cursor: help; }
.craft-recipe .name { color: var(--gold-2); }
.craft-recipe-ic { width: 16px; height: 16px; font-size: 12px; }
/* Item-detail "Quests" block */
.qsrc-line { margin: 2px 0 8px; font-size: 13px; color: var(--text-dim); }
.qsrc-line b { color: var(--text); font-weight: 600; margin-right: 4px; }
.sp-qlink { color: var(--gold-2); text-decoration: none; cursor: pointer; }
.sp-qlink:hover { text-decoration: underline; }

.cd-item { cursor: pointer; }
.cd-item:hover .name { color: var(--gold-2); text-decoration: underline; }
.craft-reciperow { background: rgba(200,164,90,.05); }
/* Craft tree: expandable, indented sub-crafts */
.cd-nm { display: inline-flex; align-items: center; gap: 5px; }
.cd-caret { flex: none; width: 15px; text-align: center; cursor: pointer; color: var(--text-dim); font-size: 10px; user-select: none; border-radius: 3px; }
.cd-caret:hover { color: var(--gold-2); background: var(--panel-2); }
.cd-caret-none { visibility: hidden; cursor: default; }
.cd-subrow > td { background: rgba(255,255,255,.018); }
.cd-subrow .name { font-size: 12.5px; }
.cd-craftcost { color: var(--text-faint); font-style: italic; font-size: 12px; }

/* NPC tooltip (hover a mob/npc link) */
.npc-tip {
  position: fixed; z-index: 200; pointer-events: none; width: 230px;
  background: linear-gradient(180deg, #1c2030, #12151f); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); font-size: 12.5px;
}
.npc-tip .npc-tip-name { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 14px; color: var(--gold-2); }
.npc-tip .npc-tip-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.npc-tip .npc-tip-loc { margin-top: 6px; color: var(--text-dim); font-size: 11.5px; }
.npc-tip .npc-tip-3d { width: 100%; height: 160px; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(200,164,90,.06), transparent 70%); }
.npc-tip .npc-tip-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.npc-tip .npc-tip-media { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.npc-tip .npc-tip-media .npc-tip-3d { flex: 1 1 0; margin-top: 0; }
.npc-tip .npc-tip-shot { flex: 0 0 84px; width: 84px; height: 160px; object-fit: cover; object-position: 50% 30%; border: 1px solid var(--border); border-radius: 6px; background: #0c0e15; }
.npc-tip .npc-tip-media:not(:has(.npc-tip-3d)) .npc-tip-shot { flex: 1 1 auto; width: 100%; height: 150px; object-fit: contain; }
.npc-tip .npc-tip-q { margin-top: 6px; font-size: 11px; color: var(--text-dim); line-height: 1.35; }
.npc-tip .npc-tip-q .npc-tip-qlbl { color: var(--gold); font-weight: 600; }
.npc-tip .npc-tip-hint { margin-top: 7px; font-size: 10.5px; color: var(--gold); text-align: center; }
[data-npc-id] { cursor: help; }

/* ===== Universal Overview search =========================================== */
/* Dashboard: push the search down so the L2 logo in the background shows above it. */
.dash-hero-wrap { margin-top: 250px; }
.dash-title { text-align: center; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 26px; color: var(--gold-2); letter-spacing: .04em; margin: 0 0 14px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.us-hero { margin: 6px auto 22px; max-width: 820px; }
.us-box {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #1b1f2e, #12151f);
  border: 1px solid var(--border-2); border-radius: 14px;
  padding: 14px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .15s, box-shadow .15s;
}
.us-box:focus-within { border-color: var(--gold); box-shadow: 0 8px 34px rgba(0,0,0,.5), 0 0 0 3px rgba(200,164,90,.12); }
.us-ic { font-size: 22px; opacity: .8; }
#us-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 20px; font-family: 'Cinzel', Georgia, serif; }
#us-input::placeholder { color: var(--text-dim); font-family: 'Inter', sans-serif; font-size: 17px; }
.us-clear { background: transparent; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.us-clear:hover { color: var(--text); background: rgba(255,255,255,.05); }
.us-hint { text-align: center; margin-top: 10px; font-size: 12.5px; }
/* AI advisor embedded below the dashboard search */
/* ---------- Dashboard: welcome tour + status cards ---------- */
.dash-welcome { position: relative; margin: 26px 0 6px; padding: 20px 22px; border: 1px solid var(--border-2); border-radius: 14px;
  background: linear-gradient(160deg, rgba(200,164,90,.10), rgba(26,29,41,.6)); }
.dash-welcome-h { font-family: 'Cinzel', Georgia, serif; color: var(--gold-2); font-size: 22px; margin: 0 0 4px; }
.dash-welcome-lead { color: var(--text-dim); margin: 0 0 14px; max-width: 760px; }
.dash-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); cursor: pointer; }
.dash-x:hover { color: var(--text); border-color: var(--gold); }
.dash-tour { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.dash-tour-card { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); text-decoration: none; color: inherit; transition: border-color .15s, transform .1s; }
.dash-tour-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.dtc-ic { font-size: 20px; flex: none; line-height: 1.3; }
.dtc-body { display: flex; flex-direction: column; min-width: 0; }
.dtc-t { font-family: 'Cinzel', Georgia, serif; color: var(--gold-2); font-size: 14px; }
.dtc-d { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.dash-welcome-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 0; }
.dash-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.dash-card-h { font-family: 'Cinzel', Georgia, serif; color: var(--gold-2); font-size: 15px; margin-bottom: 8px; }
.dash-card-lead { color: var(--text-dim); font-size: 13px; margin: 6px 0 12px; }
.dash-charline { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.dash-progress { height: 7px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin: 6px 0 8px; }
.dash-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 999px; }
.dash-priceq .search { width: 100%; }
.dash-pq-hit { margin-top: 8px; }
.dash-pq-row { display: flex; align-items: center; gap: 8px; }
.dash-pq-ic { width: 24px; height: 24px; flex: none; }
.dash-pq-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dash-pq-row input { width: 92px; text-align: right; }
.dash-pq-msg { font-size: 12px; color: var(--green); min-width: 90px; }
@media (max-width: 760px) { .dash-tour { grid-template-columns: 1fr; } .dash-cards { grid-template-columns: 1fr; } }

.dash-advisor { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.dash-advisor-head { margin-bottom: 14px; }
.dash-advisor-head h3 { font-family: 'Cinzel', Georgia, serif; color: var(--gold-2); font-size: 18px; }
.dash-advisor-head p { margin-top: 2px; font-size: 12.5px; }
.ai-nokey { margin-bottom: 12px; padding: 9px 13px; border: 1px solid var(--border-2); border-left: 3px solid var(--gold); border-radius: 8px; background: rgba(200,164,90,.06); color: var(--text-dim); font-size: 12.5px; }
.ai-nokey b { color: var(--gold); }

/* AI advisor with chat sidebar (Claude-style) */
.adv { display: grid; grid-template-columns: 220px 1fr; padding: 0; overflow: hidden; }
.adv-side { border-right: 1px solid var(--border); padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,.14); min-width: 0; }
.adv-new { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: rgba(200,164,90,.10); color: var(--gold-2, var(--gold)); font: inherit; font-weight: 600; cursor: pointer; transition: background .12s; }
.adv-new:hover { background: rgba(200,164,90,.20); }
.adv-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; max-height: 56vh; }
.adv-item { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 7px; cursor: pointer; color: var(--text-dim); font-size: 12.5px; }
.adv-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.adv-item.active { background: rgba(200,164,90,.13); color: var(--text); }
.adv-item-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-item-del { flex: none; opacity: 0; border: none; background: none; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 4px; }
.adv-item:hover .adv-item-del { opacity: .65; }
.adv-item-del:hover { opacity: 1; color: #e2574c; background: rgba(226,87,76,.12); }
.adv-main { padding: 16px 18px; min-width: 0; }
.adv-empty { color: var(--text-faint); text-align: center; padding: 30px 16px; font-size: 13px; }
@media (max-width: 720px) {
  .adv { grid-template-columns: 1fr; }
  .adv-side { border-right: none; border-bottom: 1px solid var(--border); }
  .adv-list { max-height: 120px; flex-direction: row; flex-wrap: wrap; }
  .adv-item { max-width: 160px; }
}

/* ===================== MOBILE / RESPONSIVE (burger + stacking) ============= */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  /* Topbar → compact; tabs collapse into the burger dropdown */
  .topbar { gap: 8px 10px; padding: 8px 12px; }
  .brand-name { font-size: 13px; letter-spacing: 1px; }
  .chronicle-switch label { display: none; }
  .chronicle-switch select { min-width: 0; width: 128px; }
  .nav-burger { display: flex; }
  #tabs.tabs, #clan-tabs.tabs {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30; width: auto;
    flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0;
    background: var(--panel); border-bottom: 1px solid var(--border);
    padding: 8px; max-height: 78vh; overflow-y: auto; display: none;
    box-shadow: 0 14px 34px rgba(0,0,0,.55);
  }
  #tabs.tabs.tabs-open, #clan-tabs.tabs.tabs-open { display: flex; }
  .tab { width: 100%; text-align: left; padding: 12px 14px; font-size: 15px; border-radius: 8px; }
  .who { display: none; }
  .user-btn { padding: 6px 9px; }
  /* Views + panels */
  .view { padding: 14px 12px; }
  .page-head h2 { font-size: 21px; }
  .page-head p { font-size: 12.5px; }
  .panel { padding: 12px; }
  /* Stack every multi-column layout */
  .two-col, .adv { grid-template-columns: 1fr !important; }
  .cards { grid-template-columns: 1fr !important; }
  .mk-boxes { grid-template-columns: 1fr !important; }
  /* Wide tables scroll inside their own box, never the page */
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tbl { font-size: 12.5px; }
  table.tbl th, table.tbl td { padding: 7px 8px; }
  /* Toolbars / inputs wrap and never overflow */
  .toolbar { flex-wrap: wrap; gap: 8px; }
  input, select, textarea { max-width: 100%; }
  .search { min-width: 0; width: 100%; }
  /* Dashboard hero */
  .dash-title { font-size: 25px; }
  .us-hero, .us-box { width: 100%; max-width: 100%; }
  /* Skills tree: stack Fighter/Mystic so each uses full width (bigger, readable) */
  .sk-tree-wrap .sk-tree-scale { flex-direction: column; align-items: center; gap: 26px; }
  .sk-races { gap: 6px; }
  .sk-races .sk-race-btn { font-size: 12.5px; padding: 7px 13px; }
  /* Footer */
  .footer { flex-wrap: wrap; gap: 8px; font-size: 11px; }
}
@media (max-width: 460px) {
  .brand-name { display: none; }
  .page-head h2 { font-size: 19px; }
  .dash-title { font-size: 22px; }
  .chronicle-switch select { width: 104px; }
}
.us-results { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.us-empty { text-align: center; color: var(--text-dim); padding: 18px; }
.us-group { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.us-group-h { padding: 9px 14px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); background: rgba(200,164,90,.06); border-bottom: 1px solid var(--border); }
.us-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 14px; border: none; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.us-row:last-child { border-bottom: none; }
.us-row:hover { background: rgba(200,164,90,.07); }
.us-row-item { cursor: default; }
.us-row-item:hover { background: rgba(200,164,90,.04); }
.us-row-item .us-row-main { cursor: pointer; border-radius: 6px; }
.us-row-item .us-row-main:hover .us-row-name { color: var(--gold-2, var(--gold)); }
.us-row-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.us-row-ic { flex: none; }
.us-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-row-sub { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.us-row-npc .us-row-name, .us-row-quest .us-row-name { flex: 1; }
.us-row-go { color: var(--gold); font-size: 12px; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.us-row:hover .us-row-go { opacity: 1; }
.us-price { display: flex; align-items: center; gap: 6px; flex: none; }
.us-price-inp { width: 120px; padding: 5px 8px; font-size: 13px; background: var(--bg-2, #0e1119); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.us-price-save { padding: 5px 10px; font-size: 12px; cursor: pointer; background: rgba(200,164,90,.14); color: var(--gold); border: 1px solid var(--border); border-radius: 6px; }
.us-price-save:hover { background: rgba(200,164,90,.26); border-color: var(--gold); }
.us-price-msg { color: var(--profit-pos, #7ac77a); font-size: 13px; width: 14px; }

/* ===== Market Prices boxes ================================================= */
.mk-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.mk-results { margin-top: 12px; }
.mk-box { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2, var(--panel)); overflow: hidden; display: flex; flex-direction: column; }
.mk-box-h { padding: 9px 12px; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--gold); background: rgba(200,164,90,.06); border-bottom: 1px solid var(--border); }
.mk-box-body { max-height: 48vh; overflow: auto; }
.mk-box-body.mk-body-wide { max-height: 60vh; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 10px; }
.mk-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.mk-item:last-child { border-bottom: none; }
.mk-item-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.mk-item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.mk-item-price { display: flex; align-items: center; gap: 8px; flex: none; }
/* Fixed-width slot so the arrow (present or not) never shifts the input column. */
.mk-arrow-slot { flex: none; width: 56px; display: flex; justify-content: flex-end; }
.mk-arrow-slot .mkt-arrow { padding: 1px 4px; }
.mk-item-price input { width: 96px; padding: 4px 7px; font-size: 12.5px; text-align: right; background: var(--bg-2, #0e1119); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.mk-item-price input::placeholder { color: var(--text-faint); opacity: .7; }

/* Unified item grade colours: NG white · D blue · C green · B red · A silver · S gold */
.grade-d { color: #5b9bff; } .grade-c { color: #57d957; } .grade-b { color: #e2574c; }
.grade-a { color: #cbd3dd; } .grade-s { color: #edc74e; }

/* Coloured grade badge (the small D/C/B/A/S pill next to an item name, l2hub style) */
.gbadge {
  display: inline-block; min-width: 15px; text-align: center; box-sizing: border-box;
  padding: 0 4px; margin-left: 6px; border-radius: 4px; font-size: 10px; font-weight: 700;
  line-height: 15px; font-family: 'Inter', sans-serif; letter-spacing: .02em;
  border: 1px solid currentColor; vertical-align: middle;
}
.g-ng { color: #ffffff; } .g-d { color: #5b9bff; } .g-c { color: #57d957; }
.g-b { color: #e2574c; } .g-a { color: #cbd3dd; } .g-s { color: #edc74e; }

/* Crafting tab: type + grade filter chips */
.craft-filters { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 2px 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.cf-group { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cf-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2, #0e1119); color: var(--text-dim); cursor: pointer; user-select: none; transition: background .12s, border-color .12s, color .12s; }
.cf-chip:hover { border-color: var(--gold); color: var(--text); }
.cf-chip.active { background: rgba(200,164,90,.16); border-color: var(--gold); color: var(--gold-2); font-weight: 600; }
/* grade chips keep their grade colour even when active */
.cf-chip.g-d.active { color: #5b9bff; } .cf-chip.g-c.active { color: #57d957; }
.cf-chip.g-b.active { color: #e2574c; } .cf-chip.g-a.active { color: #cbd3dd; } .cf-chip.g-s.active { color: #edc74e; }

/* Luxury Shop tab */
/* Category blocks side by side (Weapons | Armor | …) — stack on small screens. */
.lux-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; align-items: start; }
.lux-cat-block { min-width: 0; overflow-x: auto; }
@media (max-width: 900px) { .lux-cats { grid-template-columns: 1fr; } }
.lux-cat { font-family: 'Cinzel', Georgia, serif; color: var(--gold-2); font-size: 15px; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.lux-cat-block:first-child .lux-cat, .lux-cat-block:nth-child(2) .lux-cat { margin-top: 4px; }
.lux-row-click { cursor: pointer; }
.lux-cryst { flex: none; width: 18px; height: 18px; font-size: 14px; }

/* Compact luxury table: hugs its content and sits left-aligned, so the crystal
   columns sit tight right next to the item names instead of stretched apart. */
.lux-tbl { width: auto; max-width: 100%; margin-bottom: 4px; }
.lux-tbl th, .lux-tbl td { padding: 6px 14px; border-bottom: 1px solid var(--border); }
.lux-tbl .lux-th-item { min-width: 230px; }
.lux-tbl tbody tr:hover td { background: rgba(255, 255, 255, .02); }

/* Crystal grade shown once, in the column header (icon + grade) — not repeated
   in every cell. */
.lux-th { text-transform: none !important; letter-spacing: 0 !important; text-align: center; white-space: nowrap; }
.lux-th .lux-cryst { vertical-align: middle; margin-right: 6px; }
.lux-th span { vertical-align: middle; color: var(--gold-2); font-size: 12px; }

.lux-pricec { text-align: center; white-space: nowrap; }
.lux-input { width: 84px; text-align: right; display: inline-block; font-variant-numeric: tabular-nums; }
.lux-input.lux-edited { border-color: var(--gold); color: var(--gold-2); }
.lux-pricec .edited-by-wrap { display: block; margin-top: 3px; text-align: center; }
.lux-pricec .edited-by { font-size: 9.5px; opacity: .65; }
/* crafts subtype filter row + inline subtype tag */
.cf-sub-group { flex-basis: 100%; gap: 5px; }
.cf-sub-group:empty { display: none; }
/* Skills view — race buttons + class tree */
.sk-races { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-race-btn { font-family: 'Cinzel', Georgia, serif; font-size: 14px; letter-spacing: .5px; padding: 8px 20px; border-radius: 7px; cursor: pointer; transition: all .12s;
  background: linear-gradient(180deg,#2a2f3a,#181b23); border: 1px solid var(--border); color: var(--text-dim); }
.sk-race-btn:hover { border-color: var(--gold); color: var(--text); }
.sk-race-btn.active { background: linear-gradient(180deg, rgba(200,164,90,.30), rgba(200,164,90,.10)); border-color: var(--gold); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(200,164,90,.25), 0 2px 10px rgba(0,0,0,.35); }
.sk-tree-wrap { overflow: hidden; padding: 16px 10px 20px; margin-bottom: 12px; }
.sk-tree-scale { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 48px; transform-origin: top left; width: max-content; margin: 0 auto; }
.sk-tree { display: inline-block; text-align: center; flex: none; }
.sk-tree ul { position: relative; padding: 22px 0 0 0; margin: 0; display: flex; justify-content: center; list-style: none; }
.sk-tree > ul { padding-top: 0; }
.sk-tree li { list-style: none; position: relative; padding: 22px 8px 0 8px; }
.sk-tree li::before, .sk-tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--border); width: 50%; height: 22px; }
.sk-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--border); }
.sk-tree li:only-child::before, .sk-tree li:only-child::after { display: none; }
.sk-tree li:only-child { padding-top: 0; }
.sk-tree li:first-child::before, .sk-tree li:last-child::after { border: 0 none; }
.sk-tree li:last-child::before { border-right: 2px solid var(--border); border-radius: 0 6px 0 0; }
.sk-tree li:first-child::after { border-radius: 6px 0 0 0; }
.sk-tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--border); width: 0; height: 22px; }
.sk-node { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 13px; border-radius: 6px; cursor: pointer; transition: all .12s;
  background: linear-gradient(180deg,#2b3038,#1b1f27); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 500; }
.sk-node:hover { border-color: var(--gold); color: var(--text); }
.sk-node.active { background: linear-gradient(180deg, rgba(200,164,90,.32), rgba(200,164,90,.12)); border-color: var(--gold); color: var(--gold-2); box-shadow: 0 0 12px rgba(200,164,90,.22); }
.sk-node-tier { font-size: 8.5px; opacity: .65; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; line-height: 1.4; }
.sk-node-ic { width: 22px; height: 22px; object-fit: contain; flex: none; }
.sk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-head-ic { width: 34px; height: 34px; object-fit: contain; flex: none; }
.sk-book-line { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sk-book { color: var(--gold-2); cursor: pointer; white-space: nowrap; }
.sk-book:hover { text-decoration: underline; color: var(--gold); }
/* skill table */
.sk-tbl .sk-lvhead td { background: var(--bg-2); color: var(--gold-2); font-family: 'Cinzel', Georgia, serif; font-size: 12.5px; letter-spacing: .5px; padding: 6px 10px; border-top: 1px solid var(--border); }
.sk-name-cell { display: flex; align-items: center; gap: 9px; }
.sk-nm .name { font-weight: 500; }
.sk-slvl { font-size: 10px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; white-space: nowrap; }
.sk-cost { font-size: 12px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-cost b { color: #7fb2ff; font-weight: 600; }
.sk-icon { width: 28px; height: 28px; border-radius: 5px; flex: none; background: rgba(0,0,0,.25); border: 1px solid var(--border); object-fit: cover; }
.sk-icon-none { display: inline-block; }
.sk-type { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.sk-type-p { color: #7fb2ff; border-color: rgba(127,178,255,.4); }
.sk-type-a { color: #e0a94c; border-color: rgba(224,169,76,.4); }
.sk-type-t { color: #57d957; border-color: rgba(87,217,87,.4); }
.craft-name-col { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; min-width: 0; }
.craft-sub-tag { font-size: 10.5px; color: var(--text-faint); }
.cd-est-tag { font-size: 9px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; margin-left: 4px; vertical-align: middle; text-transform: uppercase; letter-spacing: .5px; }
/* "who last changed this value" attribution tag */
.edited-by { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
.edited-by-wrap { margin-top: 2px; text-align: right; }
.mk-item-by { margin-top: 1px; text-align: right; }
.mk-item-by:empty, .edited-by-wrap:empty { display: none; }

/* Admin: Discord banner image uploads */
.ad-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 6px 0 8px; }
.ad-img-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--panel-2, rgba(255,255,255,.02)); }
.ad-img-label { font-weight: 600; font-size: .9em; margin-bottom: 6px; }
.ad-img-thumb { aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ad-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-img-actions { display: flex; gap: 6px; align-items: center; }
.ad-img-upl { cursor: pointer; display: inline-block; }

/* Alliance: clans admin list */
.ad-clans-list { display: flex; flex-direction: column; gap: 6px; }
.ad-clan-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.02); }
.ad-clan-nm { flex: 1; min-width: 140px; }