:root{
      --bg: #0b1020;
      --bg2:#0a0f1a;
      --card: rgba(255,255,255,.01);
      --border: rgba(255,255,255,.04);
      --text:#eaf0f7;
      --muted:#98a6bd;
      --brand:#7c9eff;
      --brand2:#7c3aed;
      --ok:#22c55e; --warn:#f59e0b;
      --shadow: 0 20px 60px rgba(0,0,0,.35);
    }
    /* Обновлённая светлая тема: мягкий фон, контрастные элементы */
    html.theme-light{
      --bg:#ffffffee; 
      --bg2:#d8d8d8; 
      --card:#f1f1f1; 
      --border:#cfd8e3;
      --text:#0e1624; 
      --muted:#455567; 
      --brand:#3b82f6; 
      --brand2:#7c3aed;
      --shadow: 0 10px 30px rgba(8,15,35,.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
      background: radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
                  radial-gradient(900px 500px at 110% 20%, rgba(51,92,255,.18), transparent 60%),
                  linear-gradient(180deg, var(--bg), var(--bg2));
      overflow-x:hidden;
    }
    .wrap{max-width:1200px; margin:0 auto; padding:22px 16px 40px}
    .layout{
      display:grid; grid-template-columns: 300px 1fr 320px; gap:16px; align-items:start;
    }
    @media (max-width:1100px){ .layout{grid-template-columns: 260px 1fr; } .right{grid-column: 1 / -1; } }
    @media (max-width:820px){ .layout{grid-template-columns: 1fr; } .left,.center,.right{grid-column:1; } }
    .card{
      background: var(--card);
      border:1px solid var(--border);
      border-radius:16px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      padding:16px;
      animation: enter .4s ease both;
    }
    @keyframes enter{ from{opacity:0; transform: translateY(8px)} }
    h1{margin:0 0 8px; font-size: clamp(28px, 4.2vw, 36px); letter-spacing:.2px}
    h2{margin:0 0 10px; font-size:18px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.8px}
    p{margin:0}
    .muted{color:var(--muted)}

    a {
      text-decoration: none;
    }

    .left-column {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

/* ----- MEDIA PLAYER ----- */

.player {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0b0b0c;
  color: #f3f4f6;
  /* Настройки визуала бордера и прогресса */
  --accent: #16a34a;
  --track-color: rgba(255,255,255,0.16);
  --glow-outer: rgba(22,163,74,0.65);
  --glow-inner: rgba(22,163,74,0.35);
  --stroke: 3px;   /* толщина линии прогресса */

}

/* Полупрозрачная обложка */
.player .cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
}
.player .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px);
}

/* Контент поверх */
.player > *:not(.cover):not(.unlock):not(.player-border) {
  position: relative;
  z-index: 1;
}

/* Оверлей запуска с блюром */
.player .unlock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font: 600 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  color: #fff;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 0;
  cursor: pointer;
  transition: opacity 240ms ease;
}
.player .unlock.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Небольшая типографика */
.player h2 {
  font-size: 18px;
  letter-spacing: 0.2px;
}
.player .track-info .artist {
  opacity: 0.9;
  font-size: 14px;
  color: gray;
}

/* Оверлей */
.unlock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font: bold 18px sans-serif;
  color: #fff;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  border: none;
  cursor: pointer;
}
.unlock.hidden {
  display: none;
}


    /* Actions + компактные кнопки */
    .actions{display:flex; gap:10px; justify-content:flex-end; margin-bottom:12px}
    .btn{
      appearance:none; border:1px solid var(--border); background:rgba(255,255,255,.01);
      color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:800;
      text-decoration:none; display:inline-flex; align-items:center; line-height:1; font-size:14px; min-height:36px;
      transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.01);
    }
    .btn:hover{transform: translateY(-1px); border-color: rgba(124,58,237,.35)}
    .btn.primary{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      border-color: transparent; color: #fff;
      box-shadow: 0 10px 22px rgba(124,58,237,.14);
    }

    .chips{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px}
    .chip{padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:13px}
    .chip.live{border-color: rgba(34,197,94,.35); color:#a6f3bf}

    /* Left: time/date/weather */
    .time{font-size:32px; font-weight:800; letter-spacing:.5px}
    .date{margin-top:6px}
    .wx{margin-top:10px; display:flex; align-items:center; gap:8px}
    .wx-badge{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.05)}

    /* Center: intro */
    .tech{color:var(--muted); margin-top:4px}
    .intro p{margin-top:12px}
    .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

    /* Right: skills */
    .list{display:flex; flex-direction:column; gap:10px; margin-top:8px}
    .row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.04)}
    .badge{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border)}
    .badge.ok{color:#b4f5c7; border-color: rgba(34,197,94,.35)}
    .badge.wip{color:#ffd7a1; border-color: rgba(245,158,11,.35)}

    .view-all{margin-top:12px; display:inline-flex; gap:8px; align-items:center; color:var(--brand); text-decoration:none; font-weight:700}

    /* Footer */
    footer{margin-top:18px; text-align:center; color:var(--muted); font-size:13px}

    /* Tiny toast for copy feedback */
    .toast{
      position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
      background: rgba(10,14,24,.9); border:1px solid var(--border); color:var(--text);
      padding:10px 14px; border-radius:12px; display:none; box-shadow: var(--shadow); z-index:20
    }