:root{
      --bg1:#06131a;
      --bg2:#0a2230;
      --card:rgba(255,255,255,.06);
      --stroke:rgba(255,255,255,.12);
      --text:#e9f4ff;
      --muted:rgba(233,244,255,.75);
      --neon:#55e1ff;
      --neon2:#2aa7ff;
      --danger:#ffb4b4;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
      color:var(--text);
      background:radial-gradient(1200px 800px at 50% 25%, rgba(85,225,255,.20), transparent 60%),
                 radial-gradient(900px 600px at 20% 80%, rgba(42,167,255,.18), transparent 55%),
                 linear-gradient(180deg, var(--bg2), var(--bg1));
      overflow-x:hidden;
    }

    /* ===== STARFIELD BACKGROUND (замена мерцания) ===== */
    .starfield{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      overflow:hidden;
    }
    .starfield .stars{
      position:absolute;
      inset:-60%;
      background-repeat:repeat;
      will-change:transform, opacity;
      animation-name: starDrift, starTwinkle;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
    }
    .starfield .s1{
      background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.95) 60%, transparent 61%),
        radial-gradient(1px 1px at 110px 80px, rgba(255,255,255,.75) 60%, transparent 61%),
        radial-gradient(1px 1px at 60px 140px, rgba(255,255,255,.85) 60%, transparent 61%),
        radial-gradient(1px 1px at 190px 30px, rgba(255,255,255,.70) 60%, transparent 61%),
        radial-gradient(1px 1px at 220px 160px, rgba(255,255,255,.65) 60%, transparent 61%),
        radial-gradient(1px 1px at 20px 160px, rgba(255,255,255,.75) 60%, transparent 61%),
        radial-gradient(1px 1px at 240px 110px, rgba(255,255,255,.55) 60%, transparent 61%),
        radial-gradient(1px 1px at 140px 170px, rgba(255,255,255,.60) 60%, transparent 61%);
      background-size:280px 210px;
      opacity:.60;
      animation-duration: 70s, 4.6s;
    }
    .starfield .s2{
      background-image:
        radial-gradient(1.5px 1.5px at 40px 60px, rgba(170,235,255,.90) 60%, transparent 61%),
        radial-gradient(1.5px 1.5px at 160px 20px, rgba(170,235,255,.70) 60%, transparent 61%),
        radial-gradient(1.5px 1.5px at 200px 130px, rgba(170,235,255,.80) 60%, transparent 61%),
        radial-gradient(1.5px 1.5px at 90px 150px, rgba(170,235,255,.65) 60%, transparent 61%),
        radial-gradient(1.5px 1.5px at 260px 90px, rgba(170,235,255,.55) 60%, transparent 61%);
      background-size:360px 260px;
      opacity:.38;
      filter:blur(.25px);
      animation-duration: 105s, 7.5s;
    }
    .starfield .s3{
      background-image:
        radial-gradient(2px 2px at 80px 90px, rgba(255,255,255,.55) 60%, transparent 61%),
        radial-gradient(2px 2px at 220px 40px, rgba(255,255,255,.45) 60%, transparent 61%),
        radial-gradient(2px 2px at 260px 170px, rgba(255,255,255,.40) 60%, transparent 61%),
        radial-gradient(2px 2px at 40px 180px, rgba(255,255,255,.35) 60%, transparent 61%);
      background-size:520px 380px;
      opacity:.22;
      filter:blur(.10px);
      animation-duration: 150s, 11s;
    }

    .nebula{
      position:fixed;
      inset:-30%;
      background:radial-gradient(420px 280px at 50% 110%, rgba(85,225,255,.22), transparent 70%);
      filter:blur(18px);
      opacity:.85;
      pointer-events:none;
      z-index:0;
      animation: nebulaPulse 8s ease-in-out infinite;
    }

    @keyframes starDrift{
      from { transform: translate3d(0,0,0); }
      to   { transform: translate3d(0,-40%,0); }
    }
    @keyframes starTwinkle{
      0%,100% { opacity:.22; }
      50%     { opacity:.85; }
    }
    @keyframes nebulaPulse{
      0%,100% { opacity:.65; transform: translate3d(0,0,0) scale(1); }
      50%     { opacity:.95; transform: translate3d(0,-1%,0) scale(1.03); }
    }

    .page{
      position:relative;
      z-index:1;
      width:min(960px, 96vw);
      margin:0 auto;
      padding:20px 12px 110px; /* место под нижнее меню */
    }

    .card{
      background:var(--card);
      border:1px solid var(--stroke);
      border-radius:20px;
      padding:16px;
      box-shadow:0 24px 70px rgba(0,0,0,.45);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      position:relative;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:20px;
      padding:1px;
      background:linear-gradient(135deg, rgba(85,225,255,.50), rgba(42,167,255,.10), rgba(85,225,255,.40));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
      opacity:.55;
    }

    h1{margin:0 0 10px; font-size:22px;}
    .muted{color:var(--muted)}

    .bottom-nav{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      bottom:18px;
      width:min(680px, 94vw);
      height:74px;
      border-radius:24px;
      background:rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 20px 60px rgba(0,0,0,.45);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display:flex;
      overflow:hidden;
      z-index:5;
    }

    .nav-item{
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      text-decoration:none;
      color:rgba(233,244,255,.78);
      font-weight:700;
      border-right:1px solid rgba(255,255,255,.08);
      position:relative;
    }

    /* если «nav-item» это <button>, убираем дефолтные стили кнопки */
    button.nav-item{
      appearance:none;
      -webkit-appearance:none;
      background:transparent;
      border:0;
      padding:0;
      margin:0;
      cursor:pointer;
      font:inherit;
    }
    .nav-item:last-child{border-right:0}

    .nav-item .ico{
      width:26px;
      height:26px;
      opacity:.92;
      filter: drop-shadow(0 0 10px rgba(85,225,255,.15));
    }
    .nav-item .label{font-size:13px; line-height:1}

    .nav-item.active{
      color:var(--text);
      background:linear-gradient(180deg, rgba(85,225,255,.14), rgba(42,167,255,.06));
      box-shadow: inset 0 0 0 1px rgba(85,225,255,.18);
    }
    .nav-item.active::after{
      content:"";
      position:absolute;
      top:-16px;
      left:20%;
      right:20%;
      height:2px;
      background:linear-gradient(90deg, transparent, rgba(85,225,255,.9), transparent);
      box-shadow:0 0 18px rgba(85,225,255,.35);
    }

    /* Оверлей с гифкой по кнопке «Нажми» */
    .dance-overlay{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease;
      z-index:9999;
    }
    .dance-overlay.is-visible{
      opacity:1;
      pointer-events:auto;
    }
    .dance-gif{
      width:min(520px, 82vw);
      height:auto;
      max-height:82vh;
      filter: drop-shadow(0 14px 40px rgba(0,0,0,.55));
    }

    /* формы */
    label{display:block; margin:10px 0 6px; color:var(--muted); font-size:13px;}
    input, textarea, select{
      width:100%;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.22);
      color:var(--text);
      outline:none;
    }
    textarea{resize:vertical}
    input:focus, textarea:focus, select:focus{
      border-color:rgba(85,225,255,.35);
      box-shadow:0 0 0 4px rgba(85,225,255,.12);
    }

    /* Не растягиваем чекбоксы/радиокнопки (иначе ломаются клики и верстка) */
    input[type="checkbox"],
    input[type="radio"]{
      width:auto;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
    }
    .btn{
      display:inline-block;
      padding:12px 14px;
      border-radius:14px;
      border:0;
      cursor:pointer;
      font-weight:800;
      text-decoration:none;
      text-align:center;
    }
    .btn.primary{
      background:linear-gradient(90deg, var(--neon2), rgba(85,225,255,.95));
      color:#05202b;
      box-shadow:0 12px 30px rgba(42,167,255,.22);
    }
    .btn.secondary{
      background:rgba(255,255,255,.08);
      color:var(--text);
      border:1px solid rgba(255,255,255,.14);
    }

    /* чекбоксы навыков */
    ul{margin:8px 0 0; padding-left:18px}

    /* «чипы» навыков на странице создания */
    .skills-grid{display:flex; flex-wrap:wrap; gap:10px;}

    .skill-chip{
      display:inline-flex;
      align-items:center;
      margin:0;
      position:relative;
      cursor:pointer;
      user-select:none;
    }

    .skill-chip input[type="checkbox"]{
      position:absolute;
      opacity:0;
      width:1px;
      height:1px;
      pointer-events:none;
    }

    .skill-chip__pill{
      display:inline-flex;
      align-items:center;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.16);
      color:rgba(233,244,255,.85);
      font-size:13px;
      transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .skill-chip input[type="checkbox"]:focus-visible + .skill-chip__pill{
      border-color:rgba(85,225,255,.35);
      box-shadow:0 0 0 4px rgba(85,225,255,.12);
    }

    .skill-chip input[type="checkbox"]:checked + .skill-chip__pill{
      background:linear-gradient(180deg, rgba(85,225,255,.18), rgba(42,167,255,.08));
      border-color:rgba(85,225,255,.30);
      box-shadow: inset 0 0 0 1px rgba(85,225,255,.10);
    }

    /* адаптация для очень узких экранов */
    @media (max-width:360px){
      .bottom-nav{height:68px}
      .nav-item .label{font-size:12px}
      .nav-item .ico{width:24px;height:24px}
    }
/* ===== helpers (reduce inline styles over time) ===== */
.spacer-14{height:14px}
.mt-14{margin-top:14px}
.mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px}
.m0{margin:0}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row-between{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.f1{flex:1}
.minw-220{min-width:220px}
.minw-240{min-width:240px}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Splash (panda) ===== */
.splash-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none; /* включаем через .show-splash на <html> */
  align-items:center;
  justify-content:center;
  background:#061824;
  overflow:hidden;
  pointer-events:auto; /* блокируем клики по странице под заставкой */
  touch-action:none;
}

.show-splash body{overflow:hidden;}

.show-splash .splash-overlay{display:flex;}

.splash-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 35%, rgba(0,0,0,0) 0%, rgba(6,24,36,.55) 55%, rgba(6,24,36,.92) 100%);
}

.splash-img{
  width:100%;
  height:100%;
  /* ВАЖНО: хотим видеть картинку целиком и на ПК, и на телефоне */
  object-fit:contain;
  /* небольшой эффект появления без кропа */
  animation:splashAppear 3s ease-in-out both;
}

.splash-overlay.is-hiding{
  opacity:0;
  transition:opacity .45s ease;
}

@keyframes splashAppear{
  0%{opacity:0; filter:blur(2px);}
  18%{opacity:1; filter:blur(0px);}
  100%{opacity:1;}
}