:root{
  --lcb-bg: #0f1420;
  --lcb-card: #12182a;
  --lcb-card2: #101624;
  --lcb-border: rgba(124,58,237,.45);
  --lcb-muted: #9bb0d9;
  --lcb-text: #eaf0ff;
  --lcb-green: #00e3a2;
  --lcb-red: #ff7b7b;
  --lcb-gold: #ffb84d;
  --lcb-gradient: linear-gradient(135deg,#7c3aed,#06b6d4,#ec4899);
}
body .lcb-wrap{ max-width: 1280px; margin: 0 auto; color: var(--lcb-text); font-family: Inter, system-ui, sans-serif; }
.lcb-title{ font: 700 28px/1.2 Montserrat,Inter,sans-serif; margin: 0 0 14px; background: var(--lcb-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align:center }

.lcb-grid{ display:grid; grid-template-columns: 2fr 1.5fr; gap: 18px; align-items: start; }
.lcb-card{ background: linear-gradient(180deg, var(--lcb-card) 0%, #0d1322 100%); border: 1px solid var(--lcb-border); border-radius: 14px; box-shadow: 0 0 20px rgba(124,58,237,.2); padding: 16px; }
.lcb-card--right{ background: linear-gradient(180deg,#181e2f 0%, var(--lcb-card2) 100%); border-color: rgba(255,184,77,.55); box-shadow: 0 0 18px rgba(255,184,77,.18); color:#ffe9b3 }
.lcb-card h3{ margin:0 0 10px; font:700 16px/1.2 Montserrat,Inter,sans-serif; color:var(--lcb-muted) }
.lcb-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #243052; background:#0b1326; border-radius:10px; font-weight:600 }

.lcb-ua{ display:grid; grid-template-columns: 230px 1fr; gap:16px; align-items:start }
.lcb-unit{ border-radius: 12px; border:2px solid #9b46ff; padding:8px; position:relative; background:#0b0f19 }
.lcb-unit img{ width:100%; display:block; border-radius:10px; box-shadow: 0 0 18px rgba(124,58,237,.35) }
.lcb-unit .lcb-unit-name{ position:absolute; left:10px; top:0px; transform:translateY(-100%); background:#1a1330; border:1px solid #7c3aed; color:#caa9ff; padding:4px 10px; border-radius:10px; font-weight:700; font-size:12px }
.lcb-x{ position:absolute; right:10px; top:10px; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:#201e2e; border:1px solid #3a345e; cursor:pointer }
.lcb-x:hover{ background:#2b2548 }

.lcb-arks{ display:grid; grid-template-columns: repeat(4, minmax(24px, 1fr)); gap:3px }
.lcb-ark{ position:relative; border:1px solid #3bd78d; border-radius:3px; padding:1.5px; background:#0c111d }
.lcb-ark img{ width: 100%; border-radius:8px; display:block; box-shadow: 0 0 12px rgba(59,215,141,.3) }

.lcb-head{ display:flex; align-items:center; justify-content:space-between; margin: 14px 0 }
.lcb-btn{ background: var(--lcb-gradient); color:#fff; border:none; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer; transition: transform .15s ease }
.lcb-btn:hover{ transform: translateY(-1px) }

.lcb-skill-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:2px }
.lcb-skill{ display:flex; align-items:center; gap:10px; border:1px solid #243052; background:#0b1326; border-radius:10px; padding:8px 10px; position:relative }
.lcb-skill img{ width:22px; height:22px; border-radius:6px }
.lcb-skill .lcb-badge{ margin-left:auto; font-size:11px; color:#8fb5ff; background:#0d1832; border:1px solid #28437a; padding:2px 5px; border-radius:8px }
.lcb-skill .lcb-x{ position:absolute; right:8px; top:8px }

.lcb-eq{ display:grid; grid-template-columns: 1fr 1fr; gap:10px }
.lcb-eq-row{ display:flex; align-items:center; gap:10px; border:1px solid #243052; background:#0b1326; border-radius:10px; padding:10px }
.lcb-eq-row img{ width:40px; height:40px; border-radius:8px }
.lcb-eq-row h4{ margin:0; font:700 13px/1.2 Montserrat,Inter,sans-serif; color:#b9c7e8; width:90px }

.lcb-review h3{ color: var(--lcb-gold) }
.lcb-input { width:100%; background:#0b1326; color:#eaf0ff; border:1px solid #2a3551; border-radius:10px; padding:10px 5px; font-family: Inter, sans-serif; font-size:14px; resize:none; overflow:auto; line-height:1.5; transition:border-color .2s, box-shadow .2s; box-shadow: inset 0 0 8px rgba(124,58,237,0.15); }
.lcb-input:focus { border-color:#7c3aed; box-shadow:0 0 8px rgba(124,58,237,0.4); outline:none; }
#lcb-review-unit,#lcb-review-skill { display:block; min-height:280px; max-height:320px; width:100%; max-width:100%; overflow-x:hidden; }

.lcb-modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.55); z-index:9999 }
.lcb-modal.show{ display:grid }
.lcb-dialog{ width:min(920px, 92vw); max-height:86vh; overflow:hidden; background:#0b0f19; border:1px solid var(--lcb-border); border-radius:14px; box-shadow: 0 0 30px rgba(124,58,237,.35) }
.lcb-dialog .lcb-dialog-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #2a3551 }
.lcb-dialog h4{ margin:0; font:700 16px/1.2 Montserrat,Inter,sans-serif }
.lcb-dialog .lcb-search{ width:320px; background:#0b1020; color:#fff; border:1px solid #2a3551; border-radius:10px; padding:8px 10px }
.lcb-list{ padding:12px; display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; overflow:auto; max-height:70vh }
.lcb-item{ background:#0c1222; border:1px solid #243052; border-radius:12px; padding:10px; cursor:pointer; display:flex; gap:10px; align-items:center }
.lcb-item img{ width:44px; height:44px; border-radius:8px }
.lcb-item:hover{ border-color:#3e4f8a }
.lcb-item.selected { border-color: #3bd78d; box-shadow: 0 0 8px rgba(59,215,141,.5); }

.lcb-row{ margin:12px 0 }
.lcb-mt12{ margin-top:12px }
.lcb-flex{ display:flex; gap:10px; align-items:center }

@media (max-width: 980px){ .lcb-grid{ grid-template-columns: 1fr } }