:root {
  /* DAY MODE */
  --color-bg: #F4F9FD;
  --color-text: #0B1D2B;
  --color-accent: #1E88E5;
  --color-border: #BFD6E6;
  --color-header: #D9ECF7;
}

/* DARK MODE */
.dark-mode {
  --color-bg: #0C1A26;
  --color-text: #E0F0FF;
  --color-border: #2C3E50;
  --color-header: #12344C;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

.container {
  width: 95%;
  margin: auto;
}

/* HEADER */
.header-container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--color-header);
  padding:10px;
}

.hamburger {
  font-size:20px;
  background:none;
  border:none;
}

.nav-collapsed {
  display:none;
}

/* MAIN LAYOUT */
.main-split {
  display:flex;
  gap:20px;
}

.left-panel {
  flex:1 1 40%;
}

.skills-panel {
  flex:1 1 60%;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.skills-section {
  flex:1 1 45%;
}

/* INPUT RULES */
input[type="text"] {
  width:3ch;
  text-align:center;
}

.counter-input {
  width:50px;
}

/* OVERRIDES */
.weapon-row input,
#armor-table input,
.expanding-text {
  width:100%;
  text-align:left;
}

/* SKILLS */
.skill-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:5px;
}

/* TEXTAREAS */
.expanding-text {
  min-height:100px;
  border:1px solid var(--color-border);
  background:var(--color-bg);
  color:var(--color-text);
}

/* BUTTONS */
button {
  background:var(--color-accent);
  color:white;
  border:none;
  padding:2px 6px;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .main-split { flex-direction:column; }
}