@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Oswald:wght@300;400;500;600&display=swap');

* { box-sizing:border-box; margin:0; padding:0; }
html { font-size:20px; }
body { background:#070908; color:#a8b89a; font-family:'Share Tech Mono',monospace; min-height:100vh; display:flex; flex-direction:column; }

.scanlines { position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px); pointer-events:none; z-index:999; }

/* ═══ HEADER ═══ */
.app-header { background:#0d1008; border-bottom:1px solid #2a3818; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.logo     { font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:600; color:#c8d4b0; letter-spacing:4px; }
.logo-sub { font-size:0.75rem; color:#4a5a3a; letter-spacing:2px; margin-top:2px; }
.pts-wrap { display:flex; align-items:center; gap:8px; }
.pts-lbl  { font-size:0.75rem; color:#5a6a4a; letter-spacing:1px; text-align:right; }

/* SPECIAL очки в хедере */
.special-pts-wrap { display:flex; align-items:center; gap:8px; padding-right:16px; border-right:1px solid #2a3818; }
.special-pts-lbl  { font-size:0.75rem; color:#c8a830; letter-spacing:1px; text-align:right; }
.special-pts-num  { font-family:'Oswald',sans-serif; font-size:2rem; font-weight:600; min-width:36px; text-align:right; transition:color 0.25s; }
.special-pts-num.ok   { color:#c8b840; }
.special-pts-num.warn { color:#e8a030; }
.special-pts-num.bad  { color:#e84a4a; }
.pts-num  { font-family:'Oswald',sans-serif; font-size:2rem; font-weight:600; min-width:36px; text-align:right; transition:color 0.25s; }
.pts-num.ok   { color:#7ec45a; }
.pts-num.warn { color:#e8c44a; }
.pts-num.bad  { color:#e84a4a; }

/* ═══ TWO-PANE ═══
   Левая (builder) = 50%, правая (sheet) = 50%
   Можно поменять на 33% / 67% заменив 1fr 1fr → 1fr 2fr  */
.two-pane {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ← главная пропорция */
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 57px);       /* вычитаем высоту хедера */
}

/* ═══ BUILDER PANE ═══
   Внутри: профессии фиксированные 160px, перки поровну оставшееся */
.builder-pane {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;  /* ← сжатые перки */
  border-right: 1px solid #1e2818;
  overflow: hidden;
}

/* professions */
.prof-panel { background:#0b0e08; border-right:1px solid #1a2210; overflow-y:auto; }

.panel-hdr {
  font-size:0.65rem; letter-spacing:2px; color:#5a6a4a;
  padding:7px 10px 5px; border-bottom:1px solid #161e10;
  text-transform:uppercase; position:sticky; top:0; z-index:2;
  background:#0b0e08;
}

.prof-item {
  display:flex; align-items:center; gap:6px;
  padding:7px 10px; cursor:pointer;
  border-bottom:1px solid #10140c; transition:background 0.12s;
}
.prof-item:hover  { background:#121a0c; }
.prof-item.active { background:#182010; border-left:2px solid #6ab040; }

.prof-icon {
  width:26px; height:26px; border-radius:3px;
  background:#161e10; border:1px solid #252e18;
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; flex-shrink:0; overflow:hidden;
}
.prof-icon img { width:100%; height:100%; object-fit:cover; }

.prof-name { font-size:0.75rem; color:#c0d0a0; font-family:'Oswald',sans-serif; line-height:1.2; }
.prof-cost { font-size:0.65rem; margin-top:1px; }
.prof-cost.neg { color:#e84a4a; }
.prof-cost.pos { color:#7ec45a; }
.prof-cost.neu { color:#5a6a4a; }

.rdot { width:6px; height:6px; border-radius:50%; border:1px solid #3a4a2a; flex-shrink:0; transition:all 0.2s; }
.prof-item.active .rdot { background:#6ab040; border-color:#6ab040; }

/* trait columns */
.trait-col { background:#0d0f0b; overflow-y:auto; border-right:1px solid #1a2010; }
.trait-col:last-child { border-right:none; }

.trait-hdr {
  font-size:0.6rem; letter-spacing:1.5px;
  padding:6px 8px 5px; border-bottom:1px solid #1a2010;
  text-transform:uppercase; position:sticky; top:0; z-index:2;
}
.trait-hdr.pos { color:#7ec45a; background:#0c1309; }
.trait-hdr.neg { color:#e84a4a; background:#110d0d; }

.trait-item {
  display:flex; align-items:center; gap:5px;
  padding:5px 8px; cursor:pointer;
  border-bottom:1px solid #10130e; transition:background 0.12s;
}
.trait-item:hover    { background:#121710; }
.trait-item.sel-pos  { background:#0e1c0c; border-left:2px solid #6ab040; }
.trait-item.sel-neg  { background:#1c0d0d; border-left:2px solid #e84a4a; }
.trait-item.locked   { opacity:0.4; cursor:default; }
.trait-item.locked::after { content:'🔒'; font-size:0.5rem; margin-left:auto; }

.t-ico { width:16px; height:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:10px; }
.t-ico img { width:16px; height:16px; object-fit:cover; border-radius:2px; }

.t-name { font-size:0.65rem; color:#b0c090; flex:1; line-height:1.3; }
.t-cost { font-size:0.65rem; font-weight:500; white-space:nowrap; }
.t-cost.pos { color:#7ec45a; }
.t-cost.neg { color:#e84a4a; }

/* ═══ SHEET PANE ═══ */
.sheet-pane { background:#0a0d08; overflow-y:auto; padding:14px 16px; }
.sheet-wrap { background:#0e1209; border:1px solid #253220; border-radius:4px; padding:16px; min-height:100%; }

.sheet-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #1e2a18;
}
.sheet-callsign { font-family:'Oswald',sans-serif; font-size:1.6rem; font-weight:600; color:#d0e0a0; letter-spacing:2px; line-height:1; }
.sheet-realname { font-size:0.75rem; color:#7a9060; margin-top:3px; letter-spacing:1px; }
.badge-icon { font-size:1.2rem; display:block; text-align:right; }
.badge-icon img { width:30px; height:30px; object-fit:cover; border-radius:3px; float:right; }
.badge-name { font-family:'Oswald',sans-serif; font-size:0.8rem; color:#c0d0a0; letter-spacing:1px; text-align:right; }
.badge-rank { font-size:0.7rem; color:#6a7a5a; text-align:right; }

.s-section { margin-bottom:11px; }
.s-title {
  font-size:0.6rem; letter-spacing:3px; color:#4a5a3a;
  text-transform:uppercase; margin-bottom:6px; padding-bottom:3px;
  border-bottom:1px solid #1a2418; display:flex; align-items:center; gap:5px;
}
.s-title::before { content:'//'; color:#2e4020; }

.field-row { display:grid; grid-template-columns:95px 1fr; gap:3px 8px; margin-bottom:4px; align-items:start; }
.field-label { font-size:0.7rem; color:#5a6a4a; padding-top:2px; }
.field-value {
  font-size:0.75rem; color:#b8cca0; background:transparent; border:none; outline:none;
  font-family:'Share Tech Mono',monospace; width:100%; resize:none; line-height:1.5;
  border-bottom:1px solid #1e2a18; padding-bottom:2px;
}
.field-value:focus { border-bottom-color:#4a6030; color:#d0e0b0; }

/* стартовые перки */
.starter-perks { display:flex; flex-wrap:wrap; gap:3px; margin-top:5px; }
.starter-tag {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 6px; border-radius:2px; font-size:0.65rem;
  background:#111e10; border:1px solid #2a4820; color:#88b870;
}
.starter-tag img { width:11px; height:11px; object-fit:cover; border-radius:1px; }

.perk-tags { display:flex; flex-wrap:wrap; gap:3px; }
.perk-tag {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; border-radius:2px; font-size:0.65rem;
}
.perk-tag.pos { background:#0d2208; border:1px solid #224a18; color:#7ec45a; }
.perk-tag.neg { background:#220d0d; border:1px solid #4a1818; color:#e84a4a; }

.no-sel { font-size:0.7rem; color:#3a4a2a; font-style:italic; }

.btn-row { display:flex; gap:6px; margin-top:12px; }
.btn {
  flex:1; padding:6px;
  background:transparent; border:1px solid #3a5020; color:#7ec45a;
  font-family:'Share Tech Mono',monospace; font-size:0.7rem;
  cursor:pointer; letter-spacing:1px; text-transform:uppercase;
  transition:background 0.15s;
}
.btn:hover  { background:#1a2a10; }
.btn.danger { border-color:#5a2020; color:#e84a4a; }
.btn.danger:hover { background:#2a1010; }
.copy-ok { font-size:0.65rem; color:#7ec45a; margin-top:4px; display:none; }

/* error state */
.db-warn {
  font-size:0.75rem; color:#e8c44a;
  padding:8px 12px; border:1px solid #5a4a10;
  background:#1a1608; border-radius:2px; margin:8px;
}

/* tooltip */
.tip-box {
  display:none; position:fixed;
  background:#0e1809; border:1px solid #3a5020;
  padding:6px 10px; font-size:0.7rem; line-height:1.6;
  color:#a0b880; max-width:220px; z-index:1001; pointer-events:none;
}

/* ═══ S.P.E.C.I.A.L. ═══ */
.special-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.sp-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 2px; border-radius: 3px;
  border: 1px solid #1e2a18; background: #0f1509;
  gap: 1px; cursor: default;
}
.sp-controls { display:flex; align-items:center; gap:3px; }
.sp-btn {
  width:14px; height:14px; border-radius:2px;
  border:1px solid #2a3820; background:#0d1209;
  color:#7a9060; font-size:0.7rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.1s; padding:0; flex-shrink:0;
}
.sp-btn:hover:not(:disabled) { background:#1e3018; color:#b0d080; }
.sp-btn:disabled { opacity:0.25; cursor:default; }
.sp-letter {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  line-height: 1;
}
.sp-val {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem; font-weight: 600;
  line-height: 1;
}
.sp-name { font-size: 0.5rem; color: #5a6a4a; letter-spacing: 0.5px; text-align: center; line-height: 1.2; }

.sp-high { border-color: #2a5020; background: #0d1a0a; }
.sp-high .sp-letter, .sp-high .sp-val { color: #7ec45a; }

.sp-mid  { border-color: #3a3a18; background: #111208; }
.sp-mid  .sp-letter, .sp-mid  .sp-val { color: #c8b840; }

.sp-low  { border-color: #4a1a18; background: #160d0d; }
.sp-low  .sp-letter, .sp-low  .sp-val { color: #e84a4a; }

/* мини-счётчик в хедере */
.special-counter {
  display: flex; gap: 5px; align-items: center;
}
.sp-mini {
  display: flex; flex-direction: column; align-items: center;
  padding: 3px 5px; border-radius: 2px;
  border: 1px solid #1e2a18; background: #0f1509;
  min-width: 26px;
}
.sp-mini-letter {
  font-family: 'Oswald', sans-serif;
  font-size: 0.6rem; font-weight: 600; line-height: 1;
}
.sp-mini-val {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem; font-weight: 600; line-height: 1;
}
.sp-mini.sp-high { border-color: #2a5020; background: #0d1a0a; }
.sp-mini.sp-high .sp-mini-letter, .sp-mini.sp-high .sp-mini-val { color: #7ec45a; }
.sp-mini.sp-mid  { border-color: #3a3a18; background: #111208; }
.sp-mini.sp-mid  .sp-mini-letter, .sp-mini.sp-mid  .sp-mini-val { color: #c8b840; }
.sp-mini.sp-low  { border-color: #4a1a18; background: #160d0d; }
.sp-mini.sp-low  .sp-mini-letter, .sp-mini.sp-low  .sp-mini-val { color: #e84a4a; }

/* scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:#080a06; }
::-webkit-scrollbar-thumb { background:#2a3820; border-radius:2px; }