:root {
  --bg: #181f2e;
  --fg: #fff;
  --primary: #51c8fa;
  --secondary: #e4ca86;
  --bar-expert: linear-gradient(90deg,#ffe066,#ffdc4a 80%,#ffe066);
  --bar-proficient: linear-gradient(90deg,#51c8fa 40%,#2ed4a7 100%);
  --bar-familiar: linear-gradient(90deg,#bfc7d6,#8dd9f6 70%,#bfc7d6);
}
body {
  background: radial-gradient(ellipse at 40% 0, #273b59 0%, var(--bg) 80%);
  font-family: 'Inter', Segoe UI, Arial, sans-serif;
  color: var(--fg);
  margin:0;
  min-height:100vh;
  transition: background 0.3s, color 0.3s;
}
body.lightmode {
  --bg: #f2f2f2;
  --fg: #23273a;
  --primary: #1e8acb;
  --secondary: #ad8d1c;
  --bar-expert: linear-gradient(90deg,#ffe066,#ffdc4a 80%,#ffe066);
  --bar-proficient: linear-gradient(90deg,#1e8acb 40%,#3ad29f 100%);
  --bar-familiar: linear-gradient(90deg,#bfc7d6,#8dd9f6 70%,#bfc7d6);
}
.container {
  max-width: 620px;
  margin: 46px auto 24px auto;
  background: rgba(20, 26, 40, 0.93);
  border-radius: 20px;
  padding: 36px 28px 40px 28px;
  box-shadow: 0 2px 24px #111a3b22;
  transition: background 0.4s;
}
body.lightmode .container {
  background: #fff;
}
h1 {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -1px;
}
.subtitle {
  color: #2ed4a7;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.exp {
  color: var(--secondary);
  font-weight: 600;
  font-size: 1.13rem;
  margin-bottom: 24px;
}
.cols {
  display: flex;
  gap: 44px;
  margin-bottom: 32px;
}
.cols > div { flex: 1; }
.cols div h3 {
  margin-bottom: 8px;
  font-size: 1.08rem;
  font-weight: 600;
}
.section-title {
  font-size: 1.8rem;
  margin-bottom: 18px;
  color: #58d2b6;
  opacity:0;
  animation: fade-in 1s forwards;
}
@keyframes fade-in {
  to { opacity: 1; }
}
.category {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #8dd9f6;
  font-weight: 600;
  opacity: 0;
  animation: fade-in 1s forwards;
}
.bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.bar-title {
  width: 140px;
  font-size: 1rem;
}
.bar-icon {
  margin-right: 8px;
  width: 18px;
  text-align: center;
  color: inherit;
}
.bar-wrap {
  flex: 1;
  height: 14px;
  background: #23273a;
  border-radius: 7px;
  overflow: hidden;
  margin: 0 16px;
}
.bar-fill {
  height: 14px;
  width: 0;
  border-radius: 7px;
  transition: width 1.2s cubic-bezier(.85,0,.22,1);
}
.bar-fill.expert      { background: var(--bar-expert); }
.bar-fill.proficient  { background: var(--bar-proficient);}
.bar-fill.familiar    { background: var(--bar-familiar);}
.level-label {
  width: 80px;
  font-size: 1rem;
  text-align: right;
}
.since-badge {
  display: inline-block;
  background: #3339;
  color: #ffdc4a;
  border-radius: 7px;
  font-size: 0.95rem;
  margin-left: 8px;
  padding: 1px 8px;
  font-weight: 500;
}
.toolbar {
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  align-items:center;
  padding: 18px 38px 0 38px;
  max-width: 700px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.toolbar button,
.toolbar input {
  border:none;
  outline:none;
  background: #222;
  color:#fff;
  padding:7px 16px;
  border-radius:7px;
  font-size:1rem;
  margin:0 1px;
  cursor:pointer;
  transition: background .2s, color .2s;
}
.toolbar button:hover,
.toolbar input:focus {
  background:#444;
  color:#ffd700;
}
.toolbar input {
  min-width:180px;
  color:#23273a;
  background:#eee;
  border:1px solid #bbb;
}
body.lightmode .toolbar button {
  background:#eee;
  color:#23273a;
}
body.lightmode .toolbar button:hover {
  background:#ffe066;
  color:#23273a;
}
body.lightmode .toolbar input {
  color:#23273a;
  background:#fff;
  border:1px solid #aaa;
}
@media (max-width:700px) {
  .toolbar {padding: 14px 7px 0 7px;}
  .container {padding: 20px 8px;}
  h1 { font-size: 1.7rem;}
  .bar-title { width: 100px;}
  .level-label {font-size: 0.98rem;}
  .since-badge { font-size:0.85rem;}
}