/* 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%);
}
/* 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-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 16px; border-radius: 6px; border: none; font-weight: 600; font-size: 13px;
  color: #fff; background: #5865F2; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.discord-btn:hover { filter: brightness(1.1); }
.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-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; }
.tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.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); }
.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; }

/* ---------- 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); }

/* 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; }

/* 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 */
.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; }
}
.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; }
.mk-item-price .base-fill { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.mk-item-price .base-fill:hover { color: var(--gold); }
.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); }

/* 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; }