@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
 
:root {
  --maple-bg: #c8d4e8;
  --maple-panel: #dce8f8;
  --maple-panel-dark: #b0c0d8;
  --maple-border-light: #ffffff;
  --maple-border-dark: #7890b0;
  --maple-border-mid: #9aaec8;
  --maple-accent: #cc3300;
  --maple-text: #1a2040;
  --maple-text2: #405080;
  --maple-text-light: #6880a8;
  --warrior: #d04030;
  --archer:  #30a040;
  --mage:    #5060d0;
  --thief:   #c06010;
}
 
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
 
body {
  font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif;
  background: #8090a8 url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='rgba(0,0,0,0.08)'/%3E%3C/svg%3E");
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
}
 
/* ── OUTER WINDOW ── */
.maple-window {
  width: 100%;
  max-width: 1100px;
  background: var(--maple-panel);
  border: 2px solid;
  border-color: var(--maple-border-light) var(--maple-border-dark) var(--maple-border-dark) var(--maple-border-light);
  box-shadow: 2px 2px 0 #405878, inset 1px 1px 0 rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
}
 
.title-bar {
  background: linear-gradient(180deg, #9aaed0 0%, #6880b0 40%, #5870a0 100%);
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid var(--maple-border-dark);
  user-select: none;
}
.title-bar-icon { font-size: 13px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5)); }
.title-bar-text {
  flex: 1;
  font-size: 11px; font-weight: 800;
  color: #ffffff;
  text-shadow: 1px 1px 0 #304060, 0 0 6px rgba(100,140,200,0.6);
  letter-spacing: 0.5px;
}
.title-bar-btn {
  width: 16px; height: 16px;
  background: linear-gradient(180deg, #e0e8f8, #a0b0cc);
  border: 1px solid; border-color: #ffffff #6878a0 #6878a0 #ffffff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #203050;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
 
/* ── LAYOUT ── */
.app { display: flex; flex: 1; }
 
.cat-label {
  padding: 6px 10px 3px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--maple-text-light);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  background: linear-gradient(180deg, rgba(180,200,224,0.6), rgba(160,180,208,0.3));
  border-bottom: 1px solid rgba(120,144,180,0.3);
  border-top: 1px solid rgba(255,255,255,0.5);
  margin-top: 2px;
}
.cat-label:first-child { margin-top: 0; }
 
.char-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px; font-weight: 700;
  color: var(--maple-text);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  background: transparent;
  border: none; width: 100%; text-align: left;
  border-left: 3px solid transparent;
  transition: background 0.08s;
  font-family: inherit;
}
.char-btn:hover { background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2)); }
.char-btn.active {
  border-left-color: var(--maple-accent);
  background: linear-gradient(90deg, rgba(255,240,220,0.8), rgba(240,220,200,0.4));
  color: var(--maple-accent);
}
.char-btn .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);
}
.cat-warrior .dot { background: radial-gradient(circle at 35% 35%, #ff8070, var(--warrior)); }
.cat-archer  .dot { background: radial-gradient(circle at 35% 35%, #60d870, var(--archer)); }
.cat-mage    .dot { background: radial-gradient(circle at 35% 35%, #8090ff, var(--mage)); }
.cat-thief   .dot { background: radial-gradient(circle at 35% 35%, #e08040, var(--thief)); }
 
/* ── MAIN AREA ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--maple-panel);
  overflow-y: auto;
}
 
/* ── EMPTY STATE ── */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; gap: 10px; color: var(--maple-text-light); padding: 40px; text-align: center;
}
.empty-icon { font-size: 40px; opacity: 0.4; }
 
/* ── SIM AREA ── */
#sim-area { display: flex; flex-direction: column; }
 
/* ── TOP BAR (character name + level + reset) ── */
.top-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px;
  background: linear-gradient(180deg, #d8e4f4 0%, #c4d4e8 100%);
  border-bottom: 2px solid;
  border-color: var(--maple-border-mid) var(--maple-border-mid) var(--maple-border-dark);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 4px rgba(64,88,120,0.2);
}
.top-bar h2 {
  font-size: 13px; font-weight: 800;
  color: var(--maple-text);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  padding: 2px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(200,215,235,0.3));
  border: 1px solid;
  border-color: rgba(255,255,255,0.8) rgba(120,144,176,0.5) rgba(120,144,176,0.5) rgba(255,255,255,0.8);
}
.lv-wrap { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.lv-label { font-size: 11px; font-weight: 800; color: var(--maple-text2); text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
.lv-input {
  width: 52px; padding: 2px 5px;
  background: #ffffff;
  border: 2px solid;
  border-color: var(--maple-border-dark) var(--maple-border-light) var(--maple-border-light) var(--maple-border-dark);
  color: var(--maple-text); font-size: 12px; font-weight: 800; font-family: inherit;
  text-align: center;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}
.lv-input:focus { outline: none; }
 
.pt-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.pt-badge {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 800;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(200,215,235,0.5));
  border: 1px solid;
  border-color: rgba(255,255,255,0.9) rgba(100,120,160,0.6) rgba(100,120,160,0.6) rgba(255,255,255,0.9);
  color: var(--maple-text);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
.pt-badge.tier1 { color: #304090; }
.pt-badge.tier2 { color: #205040; }
.pt-badge.tier3 { color: #805010; }
.pt-badge.tier4 { color: #601060; }
.pt-badge .pt-avail { font-size: 13px; color: var(--maple-accent); }
.pt-badge .pt-sep { color: var(--maple-text-light); }
.pt-badge .pt-total { font-size: 10px; color: var(--maple-text2); }
 
.btn-reset {
  padding: 3px 10px;
  background: linear-gradient(180deg, #f08080, #d04040);
  border: 1px solid; border-color: #ffb0b0 #a02020 #a02020 #ffb0b0;
  color: #ffffff; font-size: 11px; font-weight: 800; font-family: inherit;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  margin-left: auto;
}
.btn-reset:hover { background: linear-gradient(180deg, #ff9090, #e05050); }
 
/* ── SKILL INVENTORY WINDOW (per tier) ── */
.tier-section {
  padding: 10px;
}
 
/* Tier header with book icon + tabs */
.inv-window {
  border: 2px solid;
  border-color: #fff #7890b0 #7890b0 #fff;
  background: #c8d4e8;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
 
.inv-titlebar {
  background: linear-gradient(180deg, #6888cc 0%, #4060a8 100%);
  padding: 3px 5px;
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid #3050a0;
}
.inv-titlebar-text {
  flex:1; font-size: 10px; font-weight: 800; color: #fff;
  text-shadow: 1px 1px 0 #203060; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.inv-titlebar-btn {
  width: 12px; height: 12px;
  background: linear-gradient(180deg, #e0e8f8, #9090b8);
  border: 1px solid; border-color: #fff #5060a0 #5060a0 #fff;
  font-size: 7px; font-weight: 800; color: #203050;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
 
.inv-tabs {
  display: flex;
  background: #b0c0d8;
  border-bottom: 1px solid #7890b0;
  padding: 3px 3px 0;
  gap: 2px;
}
.inv-tab {
  padding: 2px 12px;
  font-size: 10px; font-weight: 800;
  color: #405080;
  background: #c8d4e8;
  border: 1px solid; border-color: #fff #7890b0 transparent #fff;
  cursor: pointer;
  border-radius: 2px 2px 0 0;
  transition: background 0.1s;
}
.inv-tab.active {
  background: #dce8f8;
  color: #070f80;
  border-color: #fff #7890b0 #dce8f8 #fff;
  position: relative; z-index:1;
}
 
.inv-book-header {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  background: linear-gradient(180deg, #ccd8e8 0%, #b8ccdf 100%);
  border-bottom: 1px solid #9aaec8;
}
.inv-book-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #8060b0, #604090);
  border: 2px solid; border-color: #c090f0 #4020a0 #4020a0 #c090f0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inv-book-inner {
  width: 14px; height: 18px;
  background: #d0a040;
  border: 1px solid #906010;
  position: relative;
}
.inv-book-inner::after {
  content: '';
  display: block;
  width: 8px; height: 1px;
  background: #806020;
  position: absolute; top: 4px; left: 3px;
  box-shadow: 0 3px 0 #806020, 0 6px 0 #806020, 0 9px 0 #806020;
}
.inv-book-title {
  font-size: 12px; font-weight: 800;
  color: #1a2040;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
 
/* ── SKILL LIST (vertical, no scroll) ── */
.inv-body {
  background: #003a86;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  overflow-x: hidden;
}
.inv-body::-webkit-scrollbar { width: 12px; }
.inv-body::-webkit-scrollbar-track {
  background: #c0cee0;
  border-left: 1px solid #7890b0;
}
.inv-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a0b4cc, #7890a8);
  border: 1px solid;
  border-color: #c0d0e0 #6878a0 #6878a0 #c0d0e0;
}
.fit-content {
  transform: none !important;
  transform-origin: top left;
  width: 100%;
}
.sim-shell {
  width: 100%;
}
 
.sk {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-bottom: 1px solid #b0c4d8;
  background: #dce8f8;
  position: relative;
}
.sk:hover { background: #e8f0fc; }
.sk.maxed { background: linear-gradient(90deg, #e8f8e8, #d8eed8); }
.sk.locked { opacity: 0.4; pointer-events: none; }
.sk.maxed::after {
  content: 'MAX';
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 8px; font-weight: 800; color: #205030;
  background: linear-gradient(180deg, #80e890, #40b050);
  border: 1px solid; border-color: #b0ffb8 #208030 #208030 #b0ffb8;
  padding: 1px 4px;
}
 
.sk-icon-box {
  width: 34px; height: 34px;
  background: #a0b0c8;
  border: 2px solid; border-color: #fff #7080a0 #7080a0 #fff;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #303050;
  overflow: hidden;
}
 
 
.sk-icon-box {
  position: relative;
  background: linear-gradient(180deg, #eff5ff 0%, #c8d8ec 100%);
}
.sk-icon-box img.skill-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  object-fit: cover;
}
.sk-icon-box img.skill-icon-img.custom-icon {
  background: rgba(0,0,0,0.04);
}
.sk-icon-fallback {
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 9px;
  font-weight: 800;
  color: #24324f;
  letter-spacing: -0.2px;
  text-align:center;
  line-height: 1.05;
  padding: 2px;
}
 
.sk-info { flex: 1; min-width: 0; }
.sk-name {
  font-size: 11px; font-weight: 800;
  color: var(--maple-text);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 1px;
}
.sk-tags { display: flex; gap: 3px; flex-wrap: wrap; }
.sk-tag { font-size: 8px; padding: 0px 4px; font-weight: 800; border: 1px solid; }
.sk-tag.master {
  background: linear-gradient(180deg, #d8e4f4, #b8cce0);
  border-color: rgba(255,255,255,0.8) rgba(100,130,170,0.5) rgba(100,130,170,0.5) rgba(255,255,255,0.8);
  color: var(--maple-text2);
}
.sk-tag.req {
  background: linear-gradient(180deg, #f8d8c8, #e8b8a0);
  border-color: #ffa880 #c04020 #c04020 #ffa880; color: #803020;
}
.sk-tag.cd {
  background: linear-gradient(180deg, #f8e8b8, #e8c870);
  border-color: #ffe890 #906020 #906020 #ffe890; color: #604010;
}
 
/* controls */
.sk-controls { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.sk-lv-btn {
  width: 26px; height: 26px;
  background: linear-gradient(180deg, #e8f0fc, #c8d8ec);
  border: 1px solid;
  border-color: rgba(255,255,255,0.9) rgba(80,110,160,0.6) rgba(80,110,160,0.6) rgba(255,255,255,0.9);
  color: var(--maple-text2);
  font-size: 13px; font-weight: 800; font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.sk-lv-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #f8e8c0, #e8c870);
  border-color: rgba(255,240,160,0.9) rgba(160,100,0,0.6) rgba(160,100,0,0.6) rgba(255,240,160,0.9);
  color: #604000;
}
.sk-lv-btn:active:not(:disabled) {
  border-color: rgba(80,110,160,0.6) rgba(255,255,255,0.9) rgba(255,255,255,0.9) rgba(80,110,160,0.6);
}
.sk-lv-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sk-lv-btn.plus-10 { font-size: 9px; width: 34px; }
.sk-lv-btn.minus-10 { font-size: 9px; width: 34px; }
 
.sk-lv-display {
  min-width: 44px; text-align: center;
  font-size: 10px; font-weight: 800;
  background: #ffffff;
  border: 2px solid;
  border-color: rgba(80,110,160,0.5) rgba(255,255,255,0.9) rgba(255,255,255,0.9) rgba(80,110,160,0.5);
  padding: 1px 4px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
  color: var(--maple-text);
}
.sk-lv-display .cur { font-size: 13px; color: var(--maple-accent); font-weight: 800; }
.sk-lv-display .sep { color: var(--maple-text-light); font-size: 9px; margin: 0 1px; }
.sk-lv-display .max { font-size: 9px; color: var(--maple-text2); }
 
/* progress bar below skill item */
.sk-bar-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(100,130,170,0.2);
}
.sk-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4080d0, #60b0f8, #4080d0);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  transition: width 0.2s;
}
.sk.maxed .sk-bar-fill {
  background: linear-gradient(90deg, #30a050, #60e080, #30a050);
  background-size: 200% 100%;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
 
/* SP bar at bottom of each inv window */
.inv-sp-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 7px;
  background: #b8cce0;
  border-top: 2px solid #7890b0;
}
.inv-sp-label { font-size: 10px; font-weight: 800; color: #1a2040; letter-spacing: 0.5px; }
.inv-sp-input {
  width: 48px; height: 16px;
  background: #fff;
  border: 2px solid; border-color: #7890b0 #fff #fff #7890b0;
  font-size: 10px; font-weight: 800; text-align: center; color: #cc3300;
  font-family: inherit;
}
 
 
.sk.selected {
  background: linear-gradient(180deg, #fff3c8 0%, #f7dea0 100%);
  outline: 1px solid #c08a20;
}
 
.sk-inline-desc {
  margin: 2px 0 4px 40px;
  border: 1px solid;
  border-color: #fff #8ca0bc #8ca0bc #fff;
  background: linear-gradient(180deg, #eef5ff 0%, #d9e7fa 100%);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.65);
}
.sk-inline-desc-header {
  padding: 3px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(210,225,245,0.75));
  border-bottom: 1px solid #a8bdd8;
}
.sk-inline-desc-title {
  font-size: 11px;
  font-weight: 800;
  color: #1a2040;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
}
.sk-inline-desc-level {
  font-size: 10px;
  font-weight: 800;
  color: #405080;
}
.sk-inline-desc-body { font-size: 13px;
  padding: 4px 8px 6px;
  color: #1a2040;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}
.sk-inline-desc-level-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 3px 0;
  border-top: 1px dashed rgba(120,144,180,0.45);
}
.sk-inline-desc-level-block:first-child {
  border-top: none;
  padding-top: 0;
}
.sk-inline-desc-level-name {
  flex: 0 0 44px;
  font-size: 10px;
  font-weight: 800;
  color: #405080;
  margin-bottom: 0;
  line-height: 1.3;
}
.sk-inline-desc-level-name.current {
  color: #cc3300;
}
.sk-inline-desc-level-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.sk-inline-desc-empty {
  color: #7a8daa;
  font-size: 10px;
}
.sk-inline-desc-meta {
  color: #5a6f95;
  font-size: 10px;
  margin-top: 4px;
  line-height: 1.35;
}
.sk-level-edit {
  display: flex;
  align-items: stretch;
  gap: 3px;
}
.sk-level-input {
  width: 52px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--maple-accent);
  background: #ffffff;
  border: 2px solid;
  border-color: rgba(80,110,160,0.5) rgba(255,255,255,0.9) rgba(255,255,255,0.9) rgba(80,110,160,0.5);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
  font-family: inherit;
  padding: 0;
}
.sk-level-input:focus { outline: none; }
.sk-spin {
  width: 22px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sk-spin-btn {
  flex: 1;
  min-height: 14px;
  padding: 0;
  background: linear-gradient(180deg, #e8f0fc, #c8d8ec);
  border: 1px solid;
  border-color: rgba(255,255,255,0.9) rgba(80,110,160,0.6) rgba(80,110,160,0.6) rgba(255,255,255,0.9);
  color: var(--maple-text2);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.sk-spin-btn:active {
  border-color: rgba(80,110,160,0.6) rgba(255,255,255,0.9) rgba(255,255,255,0.9) rgba(80,110,160,0.6);
}
 
.skill-desc-panel {
  margin-top: 8px;
  border: 2px solid;
  border-color: #fff #7890b0 #7890b0 #fff;
  background: #dce8f8;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.22);
}
.skill-desc-header {
  padding: 4px 7px;
  background: linear-gradient(180deg, #ccd8e8 0%, #b8ccdf 100%);
  border-bottom: 1px solid #9aaec8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.skill-desc-title {
  font-size: 11px;
  font-weight: 800;
  color: #1a2040;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.skill-desc-level {
  font-size: 10px;
  font-weight: 800;
  color: #405080;
}
.skill-desc-body { font-size: 14px;
  padding: 8px 10px 10px;
  color: #1a2040;
  font-size: 11px;
  line-height: 1.55;
  min-height: 78px;
  white-space: pre-line;
}
.skill-desc-meta {
  color: #5a6f95;
  font-size: 10px;
  margin-top: 5px;
}
 
/* lock message */
.tier-locked {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #f8e0d8, #ecc8b8);
  border: 1px solid; border-color: #ffa880 #c04020 #c04020 #ffa880;
  margin-top: 4px;
  font-size: 11px; font-weight: 700; color: #803020;
}
 
/* ===== compact full-screen overrides ===== */
html, body { height: 100%; overflow: hidden; }
body { padding: 0; }
.maple-window { width: 100vw !important; height: 100vh !important; max-width: none !important; box-shadow: none !important; }
.app { height: calc(100vh - 28px); }
.main { overflow: hidden !important; position: relative; background: linear-gradient(180deg, #dce8f8 0%, #cfdbed 100%); }
#sim-area { width: 100%; height: 100%; display: none; align-items: flex-start; justify-content: center; overflow: hidden; padding: 8px; }
.fit-stage { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
.fit-content { transform-origin: top center; will-change: transform; }
.sim-shell { width: 1560px; padding: 0 4px 8px; }
.top-bar { position: relative !important; top: auto !important; margin-bottom: 8px; }
.tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; }
.tier-section { padding: 0 !important; min-width: 0; }
.inv-window { min-height: 100%; display: flex; flex-direction: column; }
.inv-tabs { gap: 1px !important; padding: 2px 2px 0 !important; }
.inv-tab { padding: 2px 0 !important; text-align: center; min-width: 0; }
.inv-book-header { padding: 4px 5px !important; gap: 5px !important; }
.inv-book-icon { width: 24px !important; height: 24px !important; }
.inv-book-title { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-body { display: flex; flex-direction: column; }
.sk { gap: 4px !important; padding: 3px 4px 5px !important; min-height: 36px; }
.sk-icon-box { width: 28px !important; height: 28px !important; font-size: 9px !important; }
.sk-name { font-size: 10px !important; margin-bottom: 0 !important; }
.sk-tag { font-size: 7px !important; padding: 0 3px !important; }
.sk-controls { gap: 2px !important; }
.sk-lv-btn { width: 24px !important; height: 24px !important; font-size: 12px !important; }
.sk-lv-btn.plus-10, .sk-lv-btn.minus-10 { width: 20px !important; font-size: 7px !important; }
.sk-lv-display { min-width: 36px !important; padding: 0 2px !important; font-size: 9px !important; }
.sk-lv-display .cur { font-size: 11px !important; }
.sk-lv-display .max { font-size: 8px !important; }
.inv-sp-bar { padding: 3px 6px !important; margin-top: auto; }
.tier-locked { font-size: 10px !important; padding: 6px 7px !important; margin: 4px !important; }
.skill-help { margin-left: 8px; font-size: 11px; color: var(--maple-text2); font-weight: 700; }
 
 
/* one-tier view */
.sim-shell { width: 760px !important; padding: 0 8px 12px; }
.tiers-grid { display: block !important; }
.tier-section { padding: 0 !important; min-width: 0; }
.inv-window { width: 100%; max-width: 760px; margin: 0 auto; }
.inv-tabs .inv-tab { min-width: 46px; text-align: center; }
 
 
/* ===== screenshot-like skill window overrides ===== */
body { background: #95a8c2; }
.top-bar.compact-top-bar { padding: 4px 6px; gap: 6px; border-bottom-width: 1px; }
.top-bar.compact-top-bar h2 { font-size: 11px; padding: 1px 6px; }
.top-bar.compact-top-bar .pt-badges { display: none; }
.top-bar.compact-top-bar .lv-wrap { margin-left: auto; }
.top-bar.compact-top-bar .lv-label { font-size: 10px; }
.top-bar.compact-top-bar .lv-input { width: 68px; height: 26px; font-size: 12px; padding: 0 6px; }
.top-bar.compact-top-bar .btn-reset { padding: 2px 6px; font-size: 10px; margin-left: 4px; }
 
.sim-shell { width: 100% !important; padding: 0 !important; }
.inv-window { width: 100%; box-shadow: 1px 1px 0 rgba(0,0,0,0.28); }
.inv-titlebar { padding: 2px 4px; background: linear-gradient(180deg, #4f78c8 0%, #2f5eaf 100%); }
.inv-titlebar-text { font-size: 11px; letter-spacing: 0; }
.inv-titlebar-btn { width: 10px; height: 10px; font-size: 7px; padding: 0; }
.inv-titlebar-btn.mini { background: linear-gradient(180deg, #f3f6ff, #b7c3df); }
.inv-titlebar-btn.close { background: linear-gradient(180deg, #f4d2d2, #c59797); }
 
.inv-tabs { padding: 2px 6px 0; gap: 1px; background: #b7c8dd; }
.inv-tab { min-width: 36px !important; padding: 1px 0 !important; font-size: 10px; border-radius: 0; background: #cdd8e8; }
.inv-tab.active { color: #d05927; background: #edf2f8; }
 
.inv-book-header { padding: 5px 7px; background: #d7d3de; border-bottom: 1px solid #9fb1c7; }
.inv-book-icon { width: 34px !important; height: 34px !important; border-width: 2px; }
.inv-book-inner { width: 20px; height: 22px; }
.theme-mage .inv-book-icon { background: linear-gradient(135deg, #8464b8, #5b3f97); border-color: #c8b6ea #3d2676 #3d2676 #c8b6ea; }
.theme-thief .inv-book-icon { background: linear-gradient(135deg, #7d9151, #587030); border-color: #bdd59b #395118 #395118 #bdd59b; }
.theme-archer .inv-book-icon { background: linear-gradient(135deg, #5d9d54, #3d6f31); border-color: #a8d9a0 #244f1d #244f1d #a8d9a0; }
.theme-warrior .inv-book-icon { background: linear-gradient(135deg, #b36f46, #8f4920); border-color: #efc39d #693114 #693114 #efc39d; }
.inv-book-title {
  color: #fff;
  font-size: 12px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
  background: linear-gradient(180deg, #f5a03d 0%, #cc7022 100%);
  border: 1px solid #c28a56;
  border-radius: 2px;
  padding: 8px 10px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}
.inv-body { max-height: calc(100vh - 150px); background: #d8e4f2; }
.sk { gap: 5px !important; padding: 4px 5px 6px !important; min-height: 44px; background: #d7e3f1; }
.sk:hover { background: #dfebf8; }
.sk.selected { background: #d1def0; outline: none; }
.sk-tier-badge {
  width: 14px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #c9d6e8, #aec0d8);
  border: 1px solid #93a6be;
  color: #6d8097;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.sk-icon-box { width: 32px !important; height: 32px !important; border-width: 1px; }
.sk-name { font-size: 11px !important; margin-bottom: 1px !important; }
.sk-tags { gap: 2px; }
.sk-tag.master { background: transparent; border: none; padding: 0; color: #9aa7b8; font-size: 9px !important; }
.sk-tag.req { font-size: 8px !important; padding: 0 2px !important; }
 
.sk-controls { gap: 2px !important; }
.sk-lv-btn { width: 24px !important; height: 24px !important; font-size: 12px !important; }
.sk-level-edit { gap: 1px; }
.sk-level-input { width: 46px; height: 24px; font-size: 13px; }
.sk-spin { width: 20px; gap: 1px; }
.sk-spin-btn { min-height: 11px; font-size: 8px; }
.sk-lv-display { min-width: 40px !important; height: 24px; display: flex; align-items: center; justify-content: center; }
.sk-inline-desc { margin: 0 4px 4px 21px; background: #dde6f2; }
.sk-inline-desc-header { padding: 3px 6px; }
.sk-inline-desc-title { font-size: 11px; }
.sk-inline-desc-body { font-size: 13px; padding: 4px 6px 5px; font-size: 10px; }
.sk-inline-desc-level-block { gap: 8px; padding: 2px 0; }
.sk-inline-desc-level-name { flex-basis: 50px; }
.sk-inline-desc-meta { font-size: 9px; color: #7083a0; }
.inv-sp-bar { padding: 4px 6px !important; background: linear-gradient(180deg, #b7cee3, #9fb7d4); }
.inv-sp-label { font-size: 10px; }
.inv-sp-input { width: 40px; height: 18px; font-size: 14px; }
 
 
/* ===== 2026 redesign override ===== */
:root{
  --ui-bg-1:#0b1020;
  --ui-bg-2:#121a31;
  --ui-panel:#18233f;
  --ui-panel-2:#223154;
  --ui-panel-3:#2b3d66;
  --ui-line:rgba(255,255,255,0.09);
  --ui-line-strong:rgba(255,255,255,0.18);
  --ui-text:#eef4ff;
  --ui-sub:#b1bfdc;
  --ui-accent:#7c9cff;
  --ui-accent-2:#5eead4;
  --ui-warm:#ffb86c;
  --ui-danger:#ff7b87;
  --ui-shadow:0 18px 40px rgba(0,0,0,0.32);
}
 
html, body{
  background:
    radial-gradient(circle at 15% 20%, rgba(124,156,255,0.20), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(94,234,212,0.16), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255,184,108,0.12), transparent 30%),
    linear-gradient(180deg, var(--ui-bg-1), #0f172d 45%, #0a1020 100%) !important;
  color: var(--ui-text);
  font-family: 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', sans-serif !important;
}
 
body{
  padding: 14px !important;
}
 
.maple-window{
  width:min(96vw, 1680px) !important;
  height:calc(100vh - 28px) !important;
  border:none !important;
  border-radius:24px;
  overflow:hidden;
  background:rgba(15,23,45,0.72) !important;
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(10px);
}
 
.title-bar{
  background:
    linear-gradient(90deg, rgba(124,156,255,0.28), rgba(94,234,212,0.18)),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)) !important;
  border-bottom:1px solid var(--ui-line-strong) !important;
  padding:12px 16px !important;
  gap:10px !important;
}
 
.title-bar-icon{ font-size:16px; }
.title-bar-text{
  font-size:13px !important;
  letter-spacing:0.8px !important;
  color:var(--ui-text) !important;
  text-shadow:none !important;
}
.title-bar-btn{
  width:28px !important;
  height:28px !important;
  border:none !important;
  border-radius:10px;
  background:rgba(255,255,255,0.08) !important;
  color:var(--ui-text) !important;
  box-shadow:none !important;
}
.title-bar-btn:hover{ background:rgba(255,255,255,0.16) !important; }
 
.app{
  height:calc(100% - 52px) !important;
  background:transparent !important;
}
 
.cat-label{
  background:transparent !important;
  border:none !important;
  color:#7f90b7 !important;
  font-size:11px !important;
  letter-spacing:1.4px !important;
  padding:16px 18px 8px !important;
  text-shadow:none !important;
}
.char-btn{
  margin:4px 10px !important;
  width:calc(100% - 20px) !important;
  border:none !important;
  border-radius:14px;
  padding:12px 14px !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:#e8eeff !important;
  background:transparent !important;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.char-btn:hover{
  background:rgba(255,255,255,0.06) !important;
  transform:translateX(3px);
}
.char-btn.active{
  background:linear-gradient(135deg, rgba(124,156,255,0.26), rgba(94,234,212,0.18)) !important;
  color:#ffffff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 10px 18px rgba(0,0,0,0.16);
}
.char-btn .dot{
  width:10px !important;
  height:10px !important;
  border:none !important;
  box-shadow:0 0 0 4px rgba(255,255,255,0.04);
}
 
.main{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    linear-gradient(180deg, #10192f 0%, #121d36 100%) !important;
}
 
.empty{
  color:var(--ui-sub) !important;
}
.empty-icon{
  font-size:56px !important;
  opacity:0.8 !important;
}
 
#sim-area{
  padding:16px !important;
}
 
.fit-stage,
.fit-content,
.sim-shell{
  width:100% !important;
}
 
.top-bar,
.top-bar.compact-top-bar{
  background:linear-gradient(135deg, rgba(24,35,63,0.95), rgba(35,49,84,0.95)) !important;
  border:none !important;
  border-radius:20px;
  padding:14px 16px !important;
  gap:12px !important;
  box-shadow:0 14px 28px rgba(0,0,0,0.24);
  margin-bottom:14px !important;
}
.top-bar.compact-top-bar h2,
.top-bar h2{
  font-size:16px !important;
  padding:10px 14px !important;
  border:none !important;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(124,156,255,0.24), rgba(94,234,212,0.12)) !important;
  color:#fff !important;
  text-shadow:none !important;
}
.top-bar.compact-top-bar .pt-badges{ display:flex !important; }
 
.lv-wrap{
  gap:8px !important;
}
.lv-label{
  font-size:12px !important;
  color:var(--ui-sub) !important;
  text-shadow:none !important;
}
.lv-input,
.top-bar.compact-top-bar .lv-input{
  width:88px !important;
  height:42px !important;
  border:none !important;
  border-radius:14px;
  background:rgba(7,12,24,0.72) !important;
  color:#fff !important;
  font-size:18px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
 
.pt-badges{
  gap:8px !important;
}
.pt-badge{
  padding:8px 12px !important;
  border:none !important;
  border-radius:14px;
  background:rgba(7,12,24,0.46) !important;
  color:var(--ui-text) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
  text-shadow:none !important;
}
.pt-badge .pt-avail{
  color:#8fb3ff !important;
  font-size:16px !important;
}
.btn-reset,
.top-bar.compact-top-bar .btn-reset{
  border:none !important;
  border-radius:14px;
  padding:10px 14px !important;
  font-size:12px !important;
  background:linear-gradient(135deg, #ff7b87, #ff9966) !important;
  box-shadow:0 10px 22px rgba(255,123,135,0.25);
}
.btn-reset:hover{ filter:brightness(1.06); }
 
.tiers-grid{
  gap:16px !important;
}
 
.inv-window{
  background:linear-gradient(180deg, rgba(17,25,47,0.96), rgba(19,29,55,0.98)) !important;
  border:none !important;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 34px rgba(0,0,0,0.28) !important;
}
.inv-titlebar{
  background:linear-gradient(135deg, rgba(124,156,255,0.26), rgba(94,234,212,0.12)) !important;
  border-bottom:1px solid var(--ui-line) !important;
  padding:10px 12px !important;
}
.inv-titlebar-text{
  color:#eef4ff !important;
  text-shadow:none !important;
  font-size:12px !important;
}
.inv-titlebar-btn{
  width:18px !important;
  height:18px !important;
  border:none !important;
  border-radius:7px;
  background:rgba(255,255,255,0.10) !important;
  color:#fff !important;
}
.inv-titlebar-btn.close{
  background:rgba(255,123,135,0.28) !important;
}
 
.inv-tabs{
  background:transparent !important;
  border-bottom:none !important;
  padding:10px 12px 0 !important;
  gap:8px !important;
}
.inv-tab{
  min-width:auto !important;
  border:none !important;
  border-radius:999px;
  background:rgba(255,255,255,0.05) !important;
  color:#9fb0d0 !important;
  padding:7px 12px !important;
  font-size:11px !important;
}
.inv-tab.active{
  background:linear-gradient(135deg, rgba(124,156,255,0.26), rgba(94,234,212,0.18)) !important;
  color:#fff !important;
}
 
.inv-book-header{
  background:transparent !important;
  border-bottom:1px solid var(--ui-line) !important;
  padding:12px 14px !important;
}
.inv-book-icon{
  width:42px !important;
  height:42px !important;
  border:none !important;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
}
.inv-book-title{
  background:linear-gradient(135deg, rgba(124,156,255,0.16), rgba(255,255,255,0.06)) !important;
  border:none !important;
  border-radius:14px;
  padding:11px 14px !important;
  color:#fff !important;
  text-shadow:none !important;
  font-size:14px !important;
}
 
.inv-body{
  background:transparent !important;
  max-height:calc(100vh - 210px) !important;
  padding:8px 10px 12px !important;
}
.inv-body::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.04) !important;
  border:none !important;
}
.inv-body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(124,156,255,0.65), rgba(94,234,212,0.45)) !important;
  border:none !important;
  border-radius:999px;
}
 
.sk{
  border:none !important;
  border-radius:18px;
  padding:10px 12px 12px !important;
  margin-bottom:10px;
  min-height:62px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
}
.sk:hover{
  background:linear-gradient(180deg, rgba(124,156,255,0.12), rgba(255,255,255,0.05)) !important;
}
.sk.selected{
  background:linear-gradient(180deg, rgba(124,156,255,0.20), rgba(94,234,212,0.08)) !important;
  box-shadow:inset 0 0 0 1px rgba(124,156,255,0.38), 0 10px 20px rgba(0,0,0,0.15);
}
.sk.maxed{
  background:linear-gradient(180deg, rgba(94,234,212,0.15), rgba(255,255,255,0.04)) !important;
}
.sk.maxed::after{
  right:12px !important;
  border:none !important;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(94,234,212,0.9), rgba(124,156,255,0.9)) !important;
  color:#09111e !important;
  padding:3px 8px !important;
  font-size:9px !important;
}
.sk-tier-badge{
  width:18px !important;
  border:none !important;
  border-radius:10px;
  background:rgba(255,255,255,0.05) !important;
  color:#9eb3d9 !important;
}
 
.sk-icon-box{
  width:42px !important;
  height:42px !important;
  border:none !important;
  border-radius:14px;
  background:rgba(255,255,255,0.08) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.sk-name{
  font-size:13px !important;
  color:#fff !important;
  text-shadow:none !important;
}
.sk-tag.master{
  color:#a6b6d8 !important;
}
.sk-tag.req{
  background:rgba(255,184,108,0.14) !important;
  color:#ffd096 !important;
  border:none !important;
  border-radius:999px;
  padding:2px 7px !important;
}
.sk-tag.cd{
  background:rgba(255,123,135,0.14) !important;
  color:#ffb0b8 !important;
  border:none !important;
  border-radius:999px;
  padding:2px 7px !important;
}
 
.sk-controls{
  gap:6px !important;
}
.sk-lv-btn{
  width:34px !important;
  height:34px !important;
  border:none !important;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)) !important;
  color:#fff !important;
  font-size:16px !important;
}
.sk-lv-btn.plus-10,
.sk-lv-btn.minus-10{
  width:46px !important;
  font-size:12px !important;
}
.sk-lv-btn:hover:not(:disabled){
  background:linear-gradient(135deg, rgba(124,156,255,0.42), rgba(94,234,212,0.24)) !important;
  color:#fff !important;
}
.sk-lv-btn:disabled{
  opacity:0.28 !important;
}
 
.sk-level-edit{
  gap:4px !important;
}
.sk-level-input{
  width:62px !important;
  height:34px !important;
  border:none !important;
  border-radius:12px;
  background:rgba(6,10,20,0.76) !important;
  color:#fff !important;
  font-size:15px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
}
.sk-spin{
  width:26px !important;
  gap:4px !important;
}
.sk-spin-btn{
  min-height:15px !important;
  border:none !important;
  border-radius:9px;
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
  font-size:10px !important;
}
.sk-lv-display{
  min-width:62px !important;
  height:34px !important;
  border:none !important;
  border-radius:12px;
  background:rgba(6,10,20,0.76) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
}
.sk-lv-display .cur{
  color:#9cc0ff !important;
  font-size:15px !important;
}
.sk-lv-display .max,
.sk-lv-display .sep{
  color:#8ea2c7 !important;
}
 
.sk-bar-wrap{
  left:12px !important;
  right:12px !important;
  bottom:6px !important;
  height:4px !important;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,0.06) !important;
}
.sk-bar-fill{
  background:linear-gradient(90deg, #7c9cff, #5eead4, #7c9cff) !important;
}
.sk.maxed .sk-bar-fill{
  background:linear-gradient(90deg, #5eead4, #9bf7d0, #5eead4) !important;
}
 
.sk-inline-desc,
.skill-desc-panel{
  border:none !important;
  border-radius:18px;
  background:rgba(255,255,255,0.05) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
}
.sk-inline-desc{
  margin:4px 0 10px 28px !important;
}
.sk-inline-desc-header,
.skill-desc-header{
  background:rgba(255,255,255,0.04) !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  padding:10px 12px !important;
}
.sk-inline-desc-title,
.skill-desc-title{
  color:#fff !important;
  text-shadow:none !important;
}
.sk-inline-desc-body,
.skill-desc-body{
  color:#d8e4ff !important;
  font-size:11px !important;
}
.sk-inline-desc-level,
.skill-desc-level,
.sk-inline-desc-level-name,
.sk-inline-desc-meta,
.skill-desc-meta{
  color:#9eb3d9 !important;
}
 
.inv-sp-bar{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  border-top:1px solid rgba(255,255,255,0.06) !important;
  padding:10px 12px !important;
}
.inv-sp-label{
  color:#dfe9ff !important;
}
.inv-sp-input{
  width:58px !important;
  height:32px !important;
  border:none !important;
  border-radius:12px;
  background:rgba(6,10,20,0.76) !important;
  color:#9cc0ff !important;
}
 
.tier-locked{
  margin:10px !important;
  border:none !important;
  border-radius:16px;
  padding:12px 14px !important;
  background:rgba(255,184,108,0.12) !important;
  color:#ffd096 !important;
}
 
.skill-help{
  color:#9eb3d9 !important;
}
 
@media (max-width: 1100px){
  body{ padding:0 !important; }
  .maple-window{
    width:100vw !important;
    height:100vh !important;
    border-radius:0;
  }
 
  .char-btn{
    font-size:13px !important;
    padding:10px 12px !important;
  }
  .sk-lv-btn{
    width:30px !important;
    height:30px !important;
  }
  .sk-lv-btn.plus-10,
  .sk-lv-btn.minus-10{
    width:40px !important;
  }
}
 
 
/* ===== requested inline skill layout tweak ===== */
.sk{
  align-items: flex-start !important;
}
.sk-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.sk-name{
  font-size:16px !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.sk-tags{
  margin-top:1px;
}
.sk-tag.master{
  font-size:11px !important;
}
.sk-tag.req,
.sk-tag.cd{
  font-size:10px !important;
}
.sk{
  display:block !important;
  padding:10px 12px 10px !important;
}
.sk-main{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.sk-info{
  flex:1;
  min-width:0;
}
.sk-controls{
  align-self:flex-start;
  flex-shrink:0;
  margin-left:10px;
}
.sk-desc-inline{
  width:100%;
  font-size:14px !important;
  line-height:1.5 !important;
  color:#d8e4ff;
  margin-top:8px;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.sk-desc-inline-base,
.sk-desc-inline-item{
  display:block;
}
.sk-desc-inline-list{
  margin-top:6px;
}
.sk-inline-desc,
.skill-desc-panel,
.sk-level-edit,
.sk-spin{
  display:none !important;
}
.sk-lv-display{
  min-width:74px !important;
  font-size:14px !important;
}
.sk-lv-display .cur{
  font-size:18px !important;
}
.sk-lv-display .sep,
.sk-lv-display .max{
  font-size:13px !important;
}
.sk-bar-wrap{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin-top:10px;
}
@media (max-width: 900px){
  .sk-main{
    gap:8px;
  }
  .sk-controls{
    margin-left:8px;
  }
}
 
 
 
/* ===== overflow fix for inline skill descriptions ===== */
.sk{
  height:auto !important;
  overflow:hidden !important;
}
.sk-main{
  width:100% !important;
  min-width:0 !important;
}
.sk-info{
  min-width:0 !important;
  width:100% !important;
}
.sk-desc-inline{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  overflow:hidden !important;
}
.sk-desc-inline-base,
.sk-desc-inline-list,
.sk-desc-inline-item{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}
.sk-desc-inline-item{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  column-gap:8px !important;
  align-items:start !important;
}
.sk-desc-inline-lv{
  display:inline-block !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
.sk-bar-wrap{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
 
 
 
/* ===== height fix for visible level descriptions ===== */
.sk{
  height:auto !important;
  min-height:unset !important;
  overflow:visible !important;
}
.sk-main{
  margin-bottom:8px !important;
}
.sk-bar-wrap{
  position:relative !important;
  display:block !important;
  width:100% !important;
  margin:8px 0 10px !important;
}
.sk-desc-inline{
  display:block !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;
  margin-top:0 !important;
  padding-bottom:2px !important;
}
.sk-desc-inline-list{
  display:block !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  margin-top:8px !important;
}
.sk-desc-inline-item{
  display:grid !important;
  grid-template-columns:140px minmax(0,1fr) !important;
  align-items:start !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  margin-top:4px !important;
  column-gap:10px !important;
}
.sk-desc-inline-lv{
  display:block !important;
  min-width:0 !important;
  white-space:normal !important;
  line-height:1.45 !important;
}
.sk-desc-inline-text{
  min-width:0 !important;
  line-height:1.45 !important;
}
.sk-desc-inline-item.current{
  font-weight:800 !important;
}
.sk-desc-inline-item.current .sk-desc-inline-lv{
  color:#ffd166 !important;
  font-weight:900 !important;
}
.sk-desc-inline-item.current{
  color:#ffffff !important;
}
.sk-desc-inline-item.current .sk-desc-inline-text{
  color:#ffffff !important;
  font-weight:800 !important;
}
@media (max-width: 768px){
  .sk-desc-inline-item{
    grid-template-columns:110px minmax(0,1fr) !important;
  }
}
.inv-body{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
 
 
/* ===== layout fix: keep full inventory visible ===== */
#sim-area{
  overflow:auto !important;
  padding-bottom:18px !important;
}
.fit-stage{
  height:auto !important;
  min-height:100% !important;
  overflow:visible !important;
  align-items:flex-start !important;
  padding-bottom:18px !important;
}
.fit-content{
  overflow:visible !important;
}
.sim-shell{
  padding-bottom:18px !important;
}
.tiers-grid{
  align-items:stretch !important;
}
.tier-section{
  width:100% !important;
}
.inv-window{
  max-width:760px;
  margin:0 auto;
  max-height:calc(100vh - 210px) !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
.inv-tier-points{
  padding:10px 12px 0 !important;
}
.inv-tier-badges{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}
.inv-tier-badge{
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  color:#dfe9ff;
  padding:10px 12px;
  min-width:0;
  cursor:pointer;
  text-align:left;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
.inv-tier-badge.active{
  background:linear-gradient(135deg, rgba(124,156,255,0.26), rgba(94,234,212,0.16));
  box-shadow:inset 0 0 0 1px rgba(124,156,255,0.24);
}
.inv-tier-badge-top{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
}
.inv-tier-badge-label{
  font-size:11px;
  font-weight:800;
  color:#f2f6ff;
}
.inv-tier-badge-main{
  font-size:13px;
  font-weight:900;
  color:#9cc0ff;
}
.inv-tier-badge-sub{
  margin-top:3px;
  font-size:11px;
  color:#8ea2c7;
  white-space:normal;
  word-break:keep-all;
}
.inv-book-header{
  margin-top:10px;
}
.inv-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding-bottom:12px !important;
}
.inv-sp-bar{
  margin-top:0 !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}
.inv-sp-main{
  display:flex;
  align-items:center;
  gap:8px;
}
.inv-sp-totals{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.inv-sp-total-badge{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:none;
  border-radius:999px;
  background:rgba(6,10,20,0.58);
  color:#dfe9ff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  font-size:11px;
  line-height:1;
}
.inv-sp-total-badge.active{
  background:linear-gradient(135deg, rgba(124,156,255,0.30), rgba(94,234,212,0.18));
  box-shadow:inset 0 0 0 1px rgba(124,156,255,0.28);
}
.inv-sp-total-label{
  color:#9eb3d9;
  font-weight:700;
}
.inv-sp-total-value{
  color:#ffffff;
  font-weight:900;
}
.top-bar.compact-top-bar{
  width:min(100%, 900px) !important;
  margin:0 auto 12px !important;
  justify-content:center !important;
  padding:10px 14px !important;
  gap:10px !important;
}
.top-bar.compact-top-bar h2{
  margin-right:auto;
}
.top-bar.compact-top-bar .lv-wrap{
  margin-left:0 !important;
}
.top-bar.compact-top-bar .pt-badges{
  display:none !important;
}
@media (max-width: 900px){
  .inv-window{
    max-height:calc(100vh - 220px) !important;
  }
  .inv-tier-badges{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .inv-sp-bar{
    justify-content:center !important;
  }
  .inv-sp-main,
  .inv-sp-totals{
    width:100%;
    justify-content:center;
  }
}
@media (max-width: 900px){
  .inv-window{
    max-height:calc(100vh - 220px) !important;
  }
  .inv-tier-badges{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
 
 
/* ===== inventory header controls ===== */
.inv-book-header{
  align-items:center !important;
  justify-content:space-between;
  gap:12px !important;
}
.inv-book-meta{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.inv-book-title-row{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.inv-book-job{
  flex-shrink:0;
  padding:9px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  color:#dfe9ff;
  font-size:12px;
  font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  white-space:nowrap;
}
.inv-book-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}
.inv-level-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px 6px 12px;
  border-radius:14px;
  background:rgba(7,12,24,0.54);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
.inv-level-label{
  font-size:12px;
  font-weight:800;
  color:#b9c8e4;
  white-space:nowrap;
}
.inv-level-input{
  width:86px;
  height:38px;
  border:none;
  border-radius:12px;
  background:rgba(7,12,24,0.88);
  color:#ffffff;
  font-size:16px;
  font-weight:800;
  text-align:center;
  font-family:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.inv-level-input:focus{
  outline:none;
}
.inv-reset-btn{
  height:38px;
  border:none;
  border-radius:14px;
  padding:0 16px;
  font-size:12px;
  font-weight:800;
  font-family:inherit;
  color:#fff;
  background:linear-gradient(135deg, #ff7b87, #ff9966);
  box-shadow:0 10px 22px rgba(255,123,135,0.22);
  cursor:pointer;
  white-space:nowrap;
}
.inv-reset-btn:hover{
  filter:brightness(1.06);
}
@media (max-width: 900px){
  .inv-book-header{
    align-items:flex-start !important;
  }
  .inv-book-meta{
    flex-direction:column;
    align-items:stretch;
  }
  .inv-book-title-row,
  .inv-book-controls{
    width:100%;
  }
  .inv-book-controls{
    justify-content:space-between;
  }
}
@media (max-width: 640px){
  .inv-book-title-row{
    flex-direction:column;
    align-items:stretch;
  }
  .inv-book-job{
    width:100%;
    text-align:center;
  }
  .inv-book-controls{
    flex-direction:column;
    align-items:stretch;
  }
  .inv-level-wrap{
    justify-content:space-between;
  }
  .inv-level-input,
  .inv-reset-btn{
    width:100%;
  }
}
 
 
 
/* ===== final page-scroll expansion override ===== */
html, body{
  height:auto !important;
  min-height:100% !important;
  overflow:auto !important;
}
body{
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
.maple-window{
  height:auto !important;
  min-height:calc(100vh - 28px) !important;
}
.app{
  height:auto !important;
  min-height:calc(100vh - 96px) !important;
}
.main{
  overflow:visible !important;
}
#sim-area{
  height:auto !important;
  overflow:visible !important;
  padding-bottom:40px !important;
}
.fit-stage,
.fit-content,
.sim-shell,
.tiers-grid,
.tier-section{
  height:auto !important;
  overflow:visible !important;
}
.inv-window{
  max-height:none !important;
  min-height:0 !important;
}
.inv-body{
  flex:0 0 auto !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
  padding-bottom:18px !important;
}
 
 
 
/* ===== header + top menu redesign ===== */
.title-bar,
.cat-label{
  display:none !important;
}
 
body{
  padding:24px !important;
}
 
.maple-window.layout-modern{
  width:min(96vw, 1700px) !important;
  height:auto !important;
  min-height:calc(100vh - 48px);
  display:flex;
  flex-direction:column;
  gap:18px;
  border-radius:34px !important;
  padding:24px;
  overflow:visible !important;
  background:
    radial-gradient(circle at top left, rgba(124,156,255,0.18), transparent 32%),
    linear-gradient(180deg, rgba(12,18,35,0.96), rgba(13,20,38,0.96)) !important;
}
 
.maple-window.layout-modern{
  width:min(1180px, calc(100vw - 32px)) !important;
  height:auto !important;
  min-height:calc(100vh - 28px);
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  overflow:visible !important;
}
 
.hero-header{
  position:relative;
  overflow:hidden;
  max-width:760px;
  margin:0 auto 28px;
  border-radius:34px;
  padding:34px 36px 36px;
  text-align:center;
  background:
    linear-gradient(90deg, rgba(3,7,18,0.98) 0%, rgba(8,14,30,0.96) 50%, rgba(3,7,18,0.98) 100%),
    radial-gradient(circle at 30% 20%, rgba(124,156,255,0.16), transparent 28%);
  box-shadow:0 24px 50px rgba(0,0,0,0.34);
}
.hero-header::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), transparent 45%),
    linear-gradient(90deg, transparent 0%, rgba(124,156,255,0.10) 50%, rgba(94,234,212,0.08) 100%);
  pointer-events:none;
}
.hero-badge{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:5px 14px;
  border-radius:999px;
  background:linear-gradient(90deg, #5d84ff, #8d6bff);
  color:#f4f7ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.7px;
}
.hero-title{
  position:relative;
  z-index:1;
  margin:14px 0 10px;
  font-size:60px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-2.4px;
  color:#ffffff;
}
.hero-title span{ color:#35a6ff; }
.hero-subtitle{
  position:relative;
  z-index:1;
  margin:0;
  color:#b3c0de;
  font-size:16px;
  line-height:1.7;
}
 
.content-shell{
  max-width:1120px;
  margin:0 auto;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}
 
.job-topbar{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:18px;
  padding:18px 20px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(11,18,39,0.98), rgba(10,16,34,0.96));
  box-shadow:0 16px 34px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(90,117,189,0.22);
}
.job-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.job-group-title{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  padding:10px 13px;
  border-radius:14px;
  font-size:13px;
  font-weight:900;
  color:#d6e3ff;
  background:linear-gradient(135deg, rgba(124,156,255,0.18), rgba(255,255,255,0.05));
  letter-spacing:0.2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
.job-topbar .char-btn{
  width:auto !important;
  margin:0 !important;
  padding:11px 16px !important;
  border-radius:14px;
  font-size:14px !important;
  background:rgba(255,255,255,0.03) !important;
  justify-content:center;
}
.job-topbar .char-btn:hover{ transform:translateY(-1px) !important; }
 
.app.app-single{
  height:auto !important;
  display:block !important;
  background:transparent !important;
}
.app.app-single .main{
  border-radius:24px;
  overflow:visible !important;
  min-height:560px;
  padding:18px !important;
  background:linear-gradient(180deg, rgba(11,18,39,0.98), rgba(8,13,29,0.98)) !important;
  box-shadow:0 22px 44px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(90,117,189,0.18);
}
#sim-area{ padding:0 !important; }
.empty{
  min-height:500px;
  border-radius:22px;
  background:rgba(255,255,255,0.03);
}
 
.inv-window{ max-width:none !important; }
.inv-body{ max-height:none !important; }
 
@media (max-width: 1100px){
  .hero-header{ max-width:100%; }
  .hero-title{ font-size:48px; }
}
@media (max-width: 768px){
  body{ padding:14px !important; }
  .maple-window.layout-modern{ width:calc(100vw - 20px) !important; }
  .hero-header{ padding:24px 20px 26px; border-radius:24px; margin-bottom:20px; }
  .hero-title{ font-size:36px; }
  .hero-subtitle{ font-size:14px; }
  .job-topbar{ gap:10px; padding:14px; }
  .job-row{ align-items:flex-start; }
  .job-group-title{ min-width:64px; }
  .app.app-single .main{ padding:12px !important; }
  .job-topbar .char-btn{ flex:1 1 calc(50% - 8px); justify-content:center; }
}
 
 
/* ===== container size tweak ===== */
.maple-window{
  width:min(88vw, 1400px) !important;
  height:calc(100vh - 60px) !important;
}
 
#sim-area{
  padding:10px !important;
}
 
.inv-window{
  max-width:680px !important;
}
 
 
 
/* ===== job selector collapse toggle ===== */
.job-selector-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.job-selector-title{
  font-size:15px;
  font-weight:900;
  color:#eef4ff;
  letter-spacing:0.2px;
}
.job-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  color:#eef4ff;
  background:linear-gradient(135deg, rgba(124,156,255,0.22), rgba(94,234,212,0.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.job-toggle-btn:hover{
  filter:brightness(1.06);
}
.job-toggle-icon{
  font-size:12px;
  line-height:1;
  transition:transform .18s ease;
}
.job-topbar.is-collapsed .job-toggle-icon{
  transform:rotate(-180deg);
}
.job-selector-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  max-height:420px;
  opacity:1;
  transition:max-height .25s ease, opacity .2s ease, margin .2s ease;
}
.job-topbar.is-collapsed .job-selector-body{
  max-height:0;
  opacity:0;
  pointer-events:none;
}
.job-topbar.is-collapsed{
  padding-bottom:16px;
}
 
 
 
/* ===== compatibility + job selector collapse patch ===== */
.job-topbar {
  transition: padding 0.18s ease, margin-bottom 0.18s ease, border-radius 0.18s ease;
}
 
.job-selector-body {
  transition: opacity 0.18s ease;
}
 
.job-topbar.collapsed {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
  min-height: 0 !important;
}
 
.job-topbar.collapsed .job-selector-head {
  margin-bottom: 0 !important;
  min-height: 34px;
  align-items: center;
}
 
.job-topbar.collapsed .job-selector-title {
  font-size: 13px !important;
  line-height: 1.1 !important;
}
 
.job-topbar.collapsed .job-toggle-btn {
  min-height: 28px !important;
  padding: 4px 10px !important;
}
 
.job-topbar.collapsed .job-selector-body {
  display: none !important;
}
 
/* slightly slimmer head even when open */
.job-selector-head {
  min-height: 40px;
}
 
 
/* ===== inv-tabs-bar: tabs + sp badges in one row ===== */
.inv-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 0;
  flex-wrap: wrap;
}
.inv-tabs {
  display: flex;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  flex-shrink: 0;
}
.inv-tab {
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
.inv-tabs-sp {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.inv-sp-total-badge-remaining {
  background: linear-gradient(135deg, rgba(94,234,212,0.28), rgba(124,156,255,0.18)) !important;
  box-shadow: inset 0 0 0 1px rgba(94,234,212,0.30) !important;
}
 
/* ===== job-topbar height: match toggle button ===== */
.job-topbar {
  padding: 10px 16px !important;
  gap: 10px !important;
}
.job-selector-head {
  min-height: 0 !important;
}
.job-topbar.collapsed {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-bottom: 8px !important;
}
.job-topbar.collapsed .job-selector-head {
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
 
 
 
/* ===== job-topbar height: half ===== */
.job-topbar {
  padding: 6px 16px !important;
  gap: 8px !important;
}
.job-selector-title {
  font-size: 13px !important;
}
.job-toggle-btn {
  padding: 4px 12px !important;
  font-size: 12px !important;
}
.job-toggle-icon {
  font-size: 11px !important;
}
.job-selector-head {
  min-height: 0 !important;
  margin-bottom: 10px !important;
}
.job-topbar.collapsed {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  margin-bottom: 8px !important;
}
.job-topbar.collapsed .job-selector-head {
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
 
/* ===== inv-window width expand ===== */
.inv-window {
  max-width: 860px !important;
}
 
/* ===== char-btn image style: image top, text bottom ===== */
.job-topbar .char-btn {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  text-align: center !important;
  min-width: 72px;
}
.char-btn-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  flex-shrink: 0;
}
.char-btn-label {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  line-height: 1.2;
}
 
/* ===== job category + sub-menu layout ===== */
.job-selector-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job-category-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.job-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  background: rgba(255,255,255,0.05);
  color: #e8eeff;
  min-width: 80px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: background 0.15s ease, transform 0.15s ease;
}
.job-cat-btn:hover {
  background: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}
.job-cat-btn.active {
  background: linear-gradient(135deg, rgba(124,156,255,0.30), rgba(94,234,212,0.18));
  box-shadow: inset 0 0 0 1px rgba(124,156,255,0.28);
  color: #fff;
}
.job-cat-btn .char-btn-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.job-cat-btn .char-btn-label {
  font-size: 13px;
  font-weight: 800;
}
 
/* 하위 직업 메뉴 */
.job-sub-row {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.job-sub-row.open {
  display: flex;
}
.job-sub-row .char-btn {
  flex-direction: row \!important;
  align-items: center \!important;
  padding: 8px 16px \!important;
  width: auto \!important;
  margin: 0 \!important;
  font-size: 13px \!important;
  font-weight: 700 \!important;
  gap: 0 \!important;
  border-radius: 10px \!important;
  background: rgba(255,255,255,0.05) \!important;
}
.job-sub-row .char-btn:hover {
  background: rgba(255,255,255,0.10) \!important;
  transform: none \!important;
}
.job-sub-row .char-btn.active {
  background: linear-gradient(135deg, rgba(124,156,255,0.26), rgba(94,234,212,0.14)) \!important;
  color: #fff \!important;
}