:root{
  --bg:#0b0f17;
  --card:#121a29;
  --card2:#0f1623;
  --text:#e7eefc;
  --muted:#9fb0d0;
  --border:#22304d;
  --accent:#7aa7ff;
  --danger:#ff6b6b;
  --ok:#35d07f;
}
.hidden__ {
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Tahoma;
  background: radial-gradient(1200px 800px at 10% 0%, #111a2b 0%, var(--bg) 50%) fixed;
  color:var(--text);
}

.container{max-width:1100px;margin:0 auto;padding:16px}

.topbar{
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,26,41,.9) 0%, rgba(11,15,23,.7) 100%);
  position:sticky;top:0;backdrop-filter: blur(10px);
  z-index:10;
}

.title h1{margin:0;font-size:18px;letter-spacing:.08em}
.title p{margin:6px 0 0;color:var(--muted);font-size:13px}

.controls{margin-top:14px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:12px;align-items:start}
@media (max-width:1000px){.controls{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.controls{grid-template-columns:1fr}}

.control-block{
  border:1px solid var(--border);
  background: rgba(18,26,41,.55);
  border-radius:14px;
  padding:12px;
}

.label{font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:8px}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.btn{
  border:1px solid var(--border);
  background: rgba(15,22,35,.85);
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-size:12px;
}
.btn:hover{border-color:rgba(122,167,255,.7)}
.btn:active{transform: translateY(1px)}
.btn-ghost{background: transparent}
.search{
  width:100%;
  border:1px solid var(--border);
  background: rgba(15,22,35,.85);
  color:var(--text);
  border-radius:10px;
  padding:10px 10px;
  outline:none;
}
.search:focus{border-color:rgba(122,167,255,.8)}

.hint{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.35}

.segmented{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--border);
  background: rgba(15,22,35,.75);
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  user-select:none;
}
.chip:hover{border-color:rgba(122,167,255,.7)}
.chip.active{
  border-color: rgba(122,167,255,.95);
  box-shadow: 0 0 0 2px rgba(122,167,255,.18) inset;
}
.status{font-size:12px;color:var(--muted)}
.status.ok{color:var(--ok)}
.status.err{color:var(--danger)}

.toolbar{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}
.count{color:var(--muted);font-size:13px}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:960px){.grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width:620px){.grid{grid-template-columns: 1fr;}}

.card{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,26,41,.9) 0%, rgba(15,22,35,.75) 100%);
  border-radius:16px;
  overflow:hidden;
}
.card-header{
  padding:12px 12px 10px;
  display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  border-bottom:1px solid rgba(34,48,77,.6);
}
.card-title{margin:0;font-size:15px;line-height:1.2}
.badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(34,48,77,.9);
  background: rgba(11,15,23,.35);
  color: var(--muted);
}
.badge strong{color:var(--text);font-weight:600}

.skills{padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px}
.skill{
  background: rgba(11,15,23,.35);
  border:1px solid rgba(34,48,77,.65);
  border-radius:12px;
  padding:10px;
}
.skill-top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.skill-order{
  font-size:11px;color:var(--muted);
  border:1px solid rgba(34,48,77,.9);
  padding:2px 6px;border-radius:999px;
}
.skill-name{font-weight:650}
.skill-desc{margin-top:6px;color:var(--muted);font-size:16px;line-height:1.45;white-space:pre-wrap}

.howto{
  margin:22px 0 30px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background: rgba(18,26,41,.45);
  color:var(--muted);
}
.howto summary{cursor:pointer;color:var(--text)}
pre{background: rgba(11,15,23,.6);border:1px solid rgba(34,48,77,.8);padding:10px;border-radius:12px;overflow:auto;color:var(--text)}
code{color:var(--text)}

.card-right{display:flex;align-items:flex-start;gap:8px;justify-content:flex-end}
.collapse-toggle{
  width:30px;height:30px;
  border-radius:10px;
  border:1px solid rgba(34,48,77,.9);
  background: rgba(11,15,23,.35);
  color: var(--text);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex: 0 0 auto;
}
.collapse-toggle:hover{border-color:rgba(122,167,255,.7)}
.collapse-toggle:active{transform: translateY(1px)}
.collapse-toggle .chev{
  display:inline-block;
  transform: rotate(-90deg); /* collapsed = right arrow */
  transition: transform .15s ease;
  font-size:16px;
  line-height:1;
  opacity:.9;
}
.collapse-toggle.is-open .chev{transform: rotate(0deg);} /* open = down arrow */



/* COLLAPSE SKILLS (DEFAULT: COLLAPSED) */
.card.is-collapsed .skills{display:none}
.collapse-toggle{position:relative; z-index:2}
.collapse-toggle .chev{display:inline-block; transition: transform .18s ease}
.collapse-toggle.is-open .chev{transform: rotate(180deg)}