/* ===== Premium sports / dark mode / basketball ===== */
  :root{
    /* backgrounds */
    --bg:#06132F;
    --bg-deep:#04102A;
    --bg-2:#081B3D;
    --card:#0C2450;
    --card-2:#102D60;
    /* blues */
    --blue:#075DE8;
    --blue-electric:#087BFF;
    --blue-light:#2E8BFF;
    --card-border:#174A91;
    /* oranges */
    --orange:#FF780B;
    --orange-2:#FF9A18;
    /* text */
    --text:#F5F7FF;
    --text-2:#A9BCE4;
    --text-3:#7F95C3;
    /* states */
    --ok:#2FA37A;
    --ok-bg:rgba(47,163,122,.16);
    --warn:#FF9A18;
    --warn-bg:rgba(255,154,24,.16);
    --mute-bg:rgba(127,149,195,.14);
    /* geometry */
    --r-card:22px; --r-btn:22px; --r-photo:14px; --r-sheet:26px;
    --shadow-card:0 12px 28px rgba(2,10,30,.50);
    --shadow-glow-blue:0 10px 26px rgba(8,123,255,.38);
    --shadow-sheet:0 -14px 44px rgba(0,0,0,.60);
    --pad:20px;
    --font:"Manrope","Inter","Onest","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    --dur:190ms; --ease:cubic-bezier(.2,0,0,1);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    min-height:100dvh; color:var(--text); font-family:var(--font);
    background:
      radial-gradient(120% 55% at 18% -6%, rgba(8,123,255,.20), transparent 58%),
      radial-gradient(95% 55% at 104% 104%, rgba(255,120,11,.12), transparent 62%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
  }

  /* ===== decorative backdrop (CSS + SVG only) ===== */
  .bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
  .bg__ball{position:absolute; top:0; right:calc((100vw - min(100vw,430px)) / 2);
            width:min(74vw,306px); height:auto; opacity:.98;
            -webkit-mask-image:radial-gradient(140% 125% at 100% 0%, #000 60%, transparent 100%);
            mask-image:radial-gradient(140% 125% at 100% 0%, #000 60%, transparent 100%)}
  .bg__scrim{position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(6,19,47,.58) 0%, rgba(6,19,47,.28) 18%, rgba(6,19,47,0) 36%)}
  .bg__court{position:absolute; left:-140px; bottom:-150px; width:min(105vw,430px); height:auto; opacity:.6}
  .bg__stripes{position:absolute; inset:0;
    background:
      linear-gradient(115deg, transparent 60%, rgba(8,123,255,.10) 60% 64%, transparent 64%),
      linear-gradient(295deg, transparent 68%, rgba(255,120,11,.09) 68% 70%, transparent 70%),
      linear-gradient(125deg, transparent 86%, rgba(8,123,255,.07) 86% 88%, transparent 88%);
  }

  .app{position:relative; z-index:1; width:100%; max-width:430px; margin:0 auto;
       padding-bottom:calc(28px + env(safe-area-inset-bottom))}

  /* ===== header ===== */
  .topbar{display:flex; align-items:center; gap:12px; padding:calc(16px + env(safe-area-inset-top)) var(--pad) 4px}
  .crest{width:56px; height:56px; flex:0 0 auto; border-radius:50%; overflow:hidden;
         box-shadow:0 8px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(46,139,255,.35)}
  .crest img{width:100%; height:100%; object-fit:cover; display:block}
  .team{min-width:0}
  .team__name{font-size:clamp(21px,6.4vw,27px); font-weight:800; line-height:1.1; letter-spacing:-.01em}
  .team__sub{font-size:12.5px; color:var(--text-2); margin-top:3px; line-height:1.3}
  .players{margin-left:auto; display:flex; align-items:center; gap:8px; padding-left:12px;
           border-left:1px solid rgba(23,74,145,.75); color:var(--text-2); font-size:14px; font-weight:700; white-space:nowrap}
  .team__name,.team__sub,.players{text-shadow:0 1px 10px rgba(2,10,30,.8)}
  .players svg{color:var(--blue-light); flex:0 0 auto}

  /* ===== «Мой ребёнок» (только родителю, которому привязан ребёнок) ===== */
  .mykid{margin:16px var(--pad) 0; display:flex; align-items:center; gap:13px;
         text-align:left; cursor:pointer; font-family:inherit; color:var(--text);
         padding:13px 15px; border-radius:20px; border:1px solid rgba(255,154,24,.40);
         background:linear-gradient(150deg, rgba(255,154,24,.20) 0%, rgba(255,255,255,0) 48%),
                    linear-gradient(160deg, rgba(16,45,96,.52), rgba(10,31,73,.32));
         box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-card);
         backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
         transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)}
  .mykid:hover{border-color:rgba(255,180,80,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 16px 34px rgba(2,10,30,.6)}
  .mykid:active{transform:scale(.99)}
  .mykid:focus-visible{outline:2px solid var(--orange-2); outline-offset:2px}
  .mykid__ava{width:48px; height:48px; flex:0 0 auto; border-radius:50%; overflow:hidden;
              background:var(--card-2); display:grid; place-items:center; color:var(--text-2);
              font-weight:800; font-size:17px; box-shadow:0 0 0 1px rgba(255,154,24,.5)}
  .mykid__ava img{width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block}
.mykid__ava video{width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block}
  .mykid__t{display:flex; flex-direction:column; min-width:0}
  .mykid__lab{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-2)}
  .mykid__name{font-size:16.5px; font-weight:800; line-height:1.2; margin-top:3px}
  .mykid__chev{margin-left:auto; flex:0 0 auto; color:var(--orange-2); transition:transform var(--dur) var(--ease)}
  .mykid:hover .mykid__chev{transform:translateX(3px)}

  /* Плитки НЕ липкие. Липкими были вкладки-полоска в 45px, для крупной
     панели это вредно: она занимала четверть экрана и висела при прокрутке.
     Четыре плитки в один ряд — шапка компактнее двух рядов. */
  .home{display:grid;
        grid-template-columns:repeat(4, minmax(0,1fr));
        gap:16px 6px; margin:16px var(--pad) 0; padding:16px 10px 18px;
        border-radius:26px;
        background:rgba(7,24,56,.86); border:1px solid rgba(150,190,255,.26);
        backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
        box-shadow:0 8px 22px rgba(2,10,30,.45), inset 0 1px 0 rgba(255,255,255,.10)}
  .tile{display:flex; flex-direction:column; align-items:center; gap:7px;
       background:none; border:0; padding:0; cursor:pointer; font-family:inherit; min-width:0}
  .tile__ico{width:56px; height:56px; border-radius:17px; display:grid; place-items:center;
    color:#fff;
    background:linear-gradient(160deg, rgba(16,45,96,.95), rgba(10,31,73,.95));
    border:1px solid rgba(150,190,255,.30);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(2,10,30,.5);
    transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
               background var(--dur) var(--ease), border-color var(--dur) var(--ease)}
  .tile__ico svg{width:28px; height:28px}
  .tile__name{font-size:11.5px; font-weight:700; line-height:1.15; text-align:center;
    color:var(--text-2); max-width:100%; overflow-wrap:anywhere}
  .tile.is-on .tile__ico{background:linear-gradient(160deg,#0A6DEB,#0750D6);
    border-color:rgba(150,200,255,.55);
    box-shadow:0 10px 24px rgba(8,123,255,.45), inset 0 1px 0 rgba(255,255,255,.30)}
  .tile.is-on .tile__name{color:#fff}
  .tile:hover .tile__ico{border-color:rgba(150,200,255,.55)}
  .tile:active .tile__ico{transform:scale(.95)}
  .tile:focus-visible{outline:2px solid var(--blue-light); outline-offset:4px; border-radius:18px}

  /* ===== panes ===== */
  .pane{display:none}
  .pane.is-on{display:block; animation:fade .26s var(--ease) both}
  @keyframes fade{from{opacity:0} to{opacity:1}}

  /* ===== title ===== */
  .hero{padding:20px var(--pad) 4px}
  /* Заголовок — flex-строка ради косой черты. Но слово целиком должно
     оставаться одним текстовым потоком: если <em> окажется отдельным
     flex-элементом, между «Объяв» и «ления» появится зазор — слово
     развалится на глазах. Поэтому текст заворачиваем в <span>, а <em>
     внутри него остаётся обычной строчной подсветкой. */
  .hero__title{display:flex; align-items:center; gap:12px; margin:0; color:var(--text);
               font-size:clamp(30px,8.6vw,40px); font-weight:800; line-height:1.04; letter-spacing:-.015em}
  .hero__title > span:not(.slash){min-width:0}
  .hero__title em{color:var(--orange); font-style:normal; white-space:nowrap}
  .slash{display:inline-block; width:9px; height:clamp(26px,8vw,34px); flex:0 0 auto; border-radius:2px;
         background:linear-gradient(180deg,var(--orange-2),var(--orange)); transform:skewX(-20deg)}
  .slash--sm{width:6px; height:15px}

  /* ===== action button ===== */
  .actions{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px var(--pad) 0}
  .act{display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; font-family:inherit;
       padding:16px; border-radius:var(--r-btn); border:1px solid transparent; color:var(--text);
       font-size:16px; font-weight:700;
       backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
       transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
  .act b{flex:1; min-width:0; font-weight:700}
  .act__ico{flex:0 0 auto}
  .act__chev{flex:0 0 auto; transition:transform var(--dur) var(--ease)}
  .act--photo{background:
                linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
                linear-gradient(135deg, rgba(16,45,96,.46), rgba(8,27,61,.36));
              border-color:rgba(150,190,255,.32);
              box-shadow:inset 0 1px 0 rgba(255,255,255,.20)}
  .act--photo .act__chev{color:var(--blue-light)}
  .act:hover{filter:brightness(1.05)}
  .act:hover .act__chev{transform:translateX(3px)}
  .act:active{transform:scale(.97); filter:brightness(1.08)}
  .act:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .act--wide{grid-column:1 / -1}

  /* Две плитки альбомов в шапке: иконка сверху, подпись и счётчик снизу. */
  .act--half{flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; padding:16px}
  .act--half b{flex:0; font-size:15px; line-height:1.2}
  .act--half .act__ico{width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
    background:rgba(150,200,255,.14); border:1px solid rgba(150,190,255,.24)}
  .act--video{background:
                 linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
                 linear-gradient(135deg, rgba(120,58,12,.46), rgba(46,22,6,.40));
               border-color:rgba(255,178,110,.30);
               box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
  .act--video .act__ico{background:rgba(255,154,24,.18); border-color:rgba(255,178,110,.28)}
  .act__n{font-size:12px; font-weight:600; color:var(--text-3); letter-spacing:.1px}

  /* ===== section label ===== */
  .sect{display:flex; align-items:center; gap:10px; padding:28px var(--pad) 12px;
        text-transform:uppercase; letter-spacing:.08em; font-size:16px; font-weight:800; color:var(--text-2)}

  /* ===== coach card ===== */
  .coach{display:flex; align-items:center; gap:14px; width:calc(100% - 2*var(--pad)); margin:0 var(--pad);
         text-align:left; cursor:pointer; font-family:inherit; color:var(--text);
         background:
           linear-gradient(155deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 44%),
           linear-gradient(160deg, rgba(16,45,96,.40), rgba(10,31,73,.30));
         border:1px solid rgba(150,190,255,.30);
         border-radius:24px; padding:16px;
         box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), var(--shadow-card);
         backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
         transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)}
  .coach:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.07), 0 16px 36px rgba(2,10,30,.6); border-color:rgba(150,200,255,.5)}
  .coach:active{transform:scale(.99)}
  .coach:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .coach__ava{width:74px; height:74px; flex:0 0 auto; border-radius:50%; padding:3px;
              background:conic-gradient(from 150deg, var(--orange), var(--blue-electric), var(--orange));
              box-shadow:0 0 20px rgba(8,123,255,.35)}
  .coach__ava img{width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 20%;
                  border:2px solid var(--bg); display:block}
  .coach__txt{display:flex; flex-direction:column; min-width:0}
  .coach__name{font-size:clamp(20px,5.6vw,23px); font-weight:800; line-height:1.15}
  .coach__role{margin-top:6px; font-size:14px; line-height:1.45; color:var(--text-2)}
  .coach__chev{margin-left:auto; flex:0 0 auto; color:var(--blue-light); transition:transform var(--dur) var(--ease)}
  .coach:hover .coach__chev{transform:translateX(3px)}

  /* ===== roster grid ===== */
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 var(--pad)}
  .card{display:flex; flex-direction:column; gap:7px; text-align:left; cursor:pointer; font-family:inherit;
        color:var(--text);
        background:
          linear-gradient(155deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
          linear-gradient(160deg, rgba(16,45,96,.40), rgba(10,31,73,.28));
        border:1px solid rgba(150,190,255,.30); border-radius:var(--r-card); padding:10px;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), var(--shadow-card);
        backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
        animation:rise .42s var(--ease) both;
        transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)}
  .card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.07), 0 16px 34px rgba(2,10,30,.6); border-color:rgba(150,200,255,.5)}
  .card:active{transform:scale(.98)}
  .card:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .card__media{position:relative; display:block; width:100%; aspect-ratio:5 / 6; border-radius:var(--r-photo); overflow:hidden; background:var(--card)}
  .card__media img{width:100%; height:100%; object-fit:cover; object-position:center 14%; display:block}
.card__media video{width:100%; height:100%; object-fit:cover; object-position:center 14%; display:block}
  .ph{display:grid; place-items:center; width:100%; height:100%}
  .ph__c{width:74%; aspect-ratio:1; border-radius:50%; background:var(--card-2); display:grid; place-items:center;
         color:var(--text-2); font-weight:800; font-size:clamp(17px,5.6vw,24px)}
  .cap{position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
       display:grid; place-items:center; font-size:13px; font-weight:800; color:#06132F;
       background:linear-gradient(180deg,#FFD75A,#FF9A18);
       box-shadow:0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.55)}
  .badge{align-self:flex-start; padding:3px 9px; border-radius:999px; color:var(--bg); font-weight:800; font-size:13px;
         background:linear-gradient(180deg,var(--orange-2),var(--orange))}
  .card__name{font-size:14px; font-weight:700; line-height:1.22}
  .card__age{font-size:12.5px; color:var(--text-2); margin-top:-2px}
  .empty{padding:40px 20px; text-align:center; color:var(--text-2); font-weight:600}
  .grid .empty{grid-column:1/-1}

  .foot{padding:26px var(--pad) 0; font-size:12.5px; line-height:1.55; color:var(--text-3)}

  @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

  /* ===== ближайшая тренировка ===== */
  .next{margin:18px var(--pad) 0; padding:17px 18px; border-radius:22px;
        background:linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 44%),
                   linear-gradient(160deg, rgba(10,109,235,.44), rgba(7,58,146,.32));
        border:1px solid rgba(170,205,255,.42);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.26), var(--shadow-card)}
  .next__lab{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#BFD8FF}
  .next__wd{margin-top:7px; font-size:clamp(26px,7.6vw,32px); font-weight:800; line-height:1.05}
  .next__when{margin-top:6px; font-size:14px; color:var(--text-2); line-height:1.45}
  .next__tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}

  /* ===== расписание: дни ===== */
  .day{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid rgba(23,74,145,.55)}
  .day:last-child{border-bottom:0}
  .day__wd{flex:0 0 48px; text-align:center; font-size:13px; font-weight:800; color:var(--text-2);
           padding:5px 0; border-radius:11px; background:var(--mute-bg)}
  .day--today .day__wd{background:linear-gradient(180deg,var(--orange-2),var(--orange)); color:#06132F}
  .day__body{min-width:0; flex:1}
  .day__time{font-size:15.5px; font-weight:700; line-height:1.25}
  .day__note{margin-top:3px; font-size:13px; color:var(--text-2); line-height:1.35}
  .day__flag{flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
             color:var(--orange-2)}

  /* ===== альбом ===== */
  .album{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
  .album__wrap{position:relative; display:block}
  .album__wrap .album__it{width:100%}
  .album__del{position:absolute; top:6px; right:6px; z-index:2; width:28px; height:28px; border-radius:50%;
              display:grid; place-items:center; cursor:pointer; color:#fff;
              background:rgba(6,19,47,.74); border:1px solid rgba(255,120,120,.55);
              backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
              box-shadow:0 2px 8px rgba(0,0,0,.35); transition:background var(--dur) var(--ease)}
  .album__del:hover{background:rgba(200,40,40,.88)}
  .album__del:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .album__it{position:relative; border-radius:var(--r-photo); overflow:hidden; aspect-ratio:5 / 6;
             background:var(--card); border:1px solid rgba(150,190,255,.28); cursor:pointer; padding:0;
             transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease)}
  .album__it:hover{border-color:rgba(150,200,255,.55)}
  .album__it:active{transform:scale(.97)}
  .album__it:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .album__it img{width:100%; height:100%; object-fit:cover; object-position:center 14%; display:block}
  .album__cap{position:absolute; left:0; right:0; bottom:0; padding:18px 8px 7px; font-size:11.5px;
              font-weight:700; text-align:left; color:var(--text);
              background:linear-gradient(180deg, transparent, rgba(4,16,42,.90));
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* Фото крупно */
  .zoom{margin:0}
  .zoom img{width:100%; max-height:64vh; object-fit:contain; border-radius:var(--r-photo); display:block;
            background:rgba(0,0,0,.25)}
  .zoom figcaption{margin-top:12px; font-size:14.5px; color:var(--text-2); line-height:1.45}
  .zoom__date{display:block; font-size:12.5px; color:var(--text-3); margin-bottom:3px}

  /* ===== просмотр фото на весь экран ===== */
  .lightbox{position:fixed; inset:0; z-index:40; display:flex; flex-direction:column;
            background:rgba(2,6,18,.97); opacity:0; transition:opacity 200ms var(--ease)}
  .lightbox[hidden]{display:none}
  .lightbox.is-open{opacity:1}
  .lb__bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
           padding:calc(12px + env(safe-area-inset-top)) 16px 8px}
  .lb__count{font-size:13.5px; font-weight:700; color:var(--text-2); letter-spacing:.02em}
  .lb__close{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
             color:var(--text); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
             transition:background var(--dur) var(--ease)}
  .lb__close:hover{background:rgba(255,255,255,.18)}
  .lb__close:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .lb__stage{flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
             overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none}
  .lb__img{max-width:100%; max-height:100%; object-fit:contain; display:block;
           will-change:transform; touch-action:none; -webkit-user-drag:none; cursor:zoom-in}
  .lb__bottom{padding:10px 18px calc(16px + env(safe-area-inset-bottom))}
  .lb__cap{font-size:14.5px; line-height:1.45; color:var(--text); text-align:center}
  .lb__hint{font-size:12px; color:var(--text-3); text-align:center; margin-top:4px}
  .lb__del{display:block; margin:12px auto 0; padding:9px 18px; border-radius:999px; cursor:pointer;
           font-size:13.5px; font-weight:700; color:#ffc9c9;
           background:rgba(220,60,60,.16); border:1px solid rgba(255,120,120,.45);
           transition:background var(--dur) var(--ease)}
  .lb__del[hidden]{display:none}
  .lb__del:hover{background:rgba(200,40,40,.45); color:#fff}
  .lb__del:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
           display:grid; place-items:center; cursor:pointer; font-size:28px; line-height:1; color:var(--text);
           background:rgba(6,19,47,.55); border:1px solid rgba(150,190,255,.30);
           backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
  .lb__nav[hidden]{display:none}
  .lb__nav--prev{left:8px}
  .lb__nav--next{right:8px}
  .lb__nav:hover{background:rgba(24,60,120,.75)}
  .lb__nav:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}

  /* Видео */
  .vids{display:flex; flex-direction:column; gap:18px}
  .vid video{width:100%; border-radius:var(--r-photo); display:block; background:#000;
             border:1px solid rgba(150,190,255,.22)}
  .vid__meta{margin-top:9px}
  .vid__cap{font-size:14.5px; font-weight:700; line-height:1.35}
  .vid__date{font-size:12.5px; color:var(--text-3); margin-top:2px}

  /* ===== дни рождения ===== */
  .bd{padding:0 var(--pad)}
  .bdcard{display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-bottom:1px solid rgba(23,74,145,.55)}
  .bdcard:last-child{border-bottom:0}
  .bdcard__cake{flex:0 0 auto; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
                font-size:23px; background:linear-gradient(150deg, rgba(255,154,24,.20), rgba(16,45,96,.42));
                border:1px solid rgba(255,154,24,.34)}
  .bdcard__t{flex:1; min-width:0}
  .bdcard__name{font-size:16px; font-weight:800; line-height:1.25}
  .bdcard__when{margin-top:3px; font-size:13px; color:var(--text-2)}
  .bdcard__text{margin-top:10px; font-size:14px; line-height:1.5; color:var(--text)}
  .bdcard__in{flex:0 0 auto; align-self:center; font-size:12px; font-weight:800; color:var(--text-2);
              padding:5px 11px; border-radius:999px; background:var(--mute-bg); white-space:nowrap}
  .bdcard__in--today{background:linear-gradient(180deg,var(--orange-2),var(--orange)); color:#06132F}

  /* ===== detail sheet ===== */
  .scrim{position:fixed; inset:0; z-index:20; background:rgba(2,8,24,.62); opacity:0; transition:opacity var(--dur) var(--ease)}
  .scrim.is-open{opacity:1}
  .sheet{position:fixed; z-index:21; left:50%; bottom:0; transform:translateX(-50%) translateY(102%);
         width:100%; max-width:430px; max-height:94dvh; overflow:auto;
         background:
           linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%),
           linear-gradient(180deg, rgba(10,31,73,.80), rgba(6,19,47,.90)),
           url('assets/hero.jpg');
         background-size:auto, auto, cover;
         background-position:center, center, center 30%;
         background-repeat:no-repeat;
         backdrop-filter:blur(30px) saturate(170%); -webkit-backdrop-filter:blur(30px) saturate(170%);
         border:1px solid rgba(150,190,255,.30); border-bottom:0;
         border-radius:var(--r-sheet) var(--r-sheet) 0 0; box-shadow:var(--shadow-sheet);
         transition:transform 260ms var(--ease)}
  .sheet.is-open{transform:translateX(-50%) translateY(0)}
  .grip{width:40px; height:4px; border-radius:999px; background:#1E4E92; margin:10px auto 4px}
  .sheet__head{display:flex; align-items:center; gap:12px; padding:8px var(--pad) 12px}
  .sheet__head b{flex:1; font-size:16px; font-weight:800; color:var(--text)}
  .iconbtn{width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(150,190,255,.34);
           background:
             linear-gradient(160deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 50%),
             rgba(16,45,96,.58);
           color:var(--text); display:grid; place-items:center; cursor:pointer;
           box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
           backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
           transition:background var(--dur) var(--ease)}
  .iconbtn:hover{background:rgba(24,60,120,.78)}
  .iconbtn:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .sheet__body{padding:0 var(--pad) calc(26px + env(safe-area-inset-bottom))}

  .phero{display:flex; gap:16px; align-items:center}
  .phero__photo{width:106px; height:106px; flex:0 0 auto; border-radius:20px; overflow:hidden; background:var(--card);
                box-shadow:0 0 0 1px rgba(46,139,255,.35)}
  .phero__photo--ring{padding:3px; border-radius:50%; background:conic-gradient(from 150deg,var(--orange),var(--blue-electric),var(--orange))}
  .phero__photo--ring img{border-radius:50%; border:2px solid var(--bg)}
  .phero__photo img{width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block}
.phero__photo video{width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block}
  .phero__photo--ring img{object-position:center 20%}
  .phero h2{margin:0; font-size:clamp(19px,5.2vw,21px); font-weight:800; color:var(--text); line-height:1.18}
  .chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
  .chip{padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--card-2); color:var(--text-2)}
  .chip--num{background:linear-gradient(180deg,var(--orange-2),var(--orange)); color:var(--bg)}
  .chip--cap{background:linear-gradient(180deg,#FFD75A,#FF9A18); color:#06132F}
  .phero__dob{margin-top:10px; font-size:13.5px; color:var(--text-2)}

  .list{margin-top:22px; border-top:1px solid rgba(23,74,145,.55)}
  .list__title{padding:16px 0 4px; font-size:12px; font-weight:800; letter-spacing:.08em;
               text-transform:uppercase; color:var(--text-2)}
  .row{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
       padding:12px 0; border-bottom:1px solid rgba(23,74,145,.55)}
  .row span{font-size:13.5px; color:var(--text-3)}
  .row b{font-size:15px; font-weight:700; color:var(--text); text-align:right}
  .row b.is-empty{color:var(--text-3); font-weight:500}
  .row--link{text-decoration:none; color:inherit}
  .row--link:active b{color:var(--blue-light)}
  .note{padding:12px 2px 0; font-size:12.5px; line-height:1.55; color:var(--text-3)}

  .stat{display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid rgba(23,74,145,.55)}
  .stat__ico{width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center}
  .stat__ico--ok{background:var(--ok-bg); color:var(--ok)}
  .stat__ico--no{background:var(--warn-bg); color:var(--warn)}
  .stat__ico--unknown{background:var(--mute-bg); color:var(--text-3)}
  .stat__name{font-size:15px; font-weight:700; color:var(--text); line-height:1.25}
  .stat__line{margin-top:3px; font-size:13px; color:var(--text-2)}
  .stat__hint{margin-top:3px; font-size:12px; color:var(--text-3)}

  .btn{width:100%; margin-top:22px; height:54px; border:0; border-radius:var(--r-btn); cursor:pointer;
       font-family:inherit; font-size:16px; font-weight:800; color:#fff;
       display:inline-flex; align-items:center; justify-content:center; gap:10px;
       background:linear-gradient(135deg,#0A6DEB,#0750D6); box-shadow:var(--shadow-glow-blue);
       transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease)}
  .btn:hover{filter:brightness(1.06)}
  .btn:active{transform:scale(.99); filter:brightness(1.1)}
  .btn:focus-visible{outline:2px solid var(--blue-light); outline-offset:3px}

  /* ===== responsive ===== */
  @media (max-width:359px){
    :root{--pad:16px}
    .topbar{gap:10px}
    .crest{width:48px; height:48px; border-radius:14px}
    .players{font-size:12.5px; gap:6px; padding-left:10px}
    .team__sub{font-size:12px}
    .grid{grid-template-columns:repeat(2,1fr)}
    /* Плитки компактнее: четыре в ряд на узком экране, подписи переносятся. */
    .home{gap:13px 4px; padding:14px 8px 16px; grid-template-columns:repeat(4, minmax(0,1fr))}
    .tile__ico{width:46px; height:46px; border-radius:14px}
    .tile__ico svg{width:23px; height:23px}
    .tile__name{font-size:10.5px}
    .act{font-size:14.5px; padding:14px; gap:9px}
  }
  @media (max-width:299px){
    .grid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important}
  }


  /* ===== ближайшая игра (главный экран) ===== */
  .nextgame{display:block; width:calc(100% - 2*var(--pad)); margin:16px var(--pad) 0;
    text-align:left; cursor:pointer; font-family:inherit; color:var(--text);
    padding:17px 18px; border-radius:22px;
    background:linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 44%),
               linear-gradient(160deg, rgba(10,109,235,.44), rgba(7,58,146,.32));
    border:1px solid rgba(150,190,255,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-card);
    backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
    transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease)}
  .nextgame:hover{border-color:rgba(150,200,255,.55)}
  .nextgame:active{transform:scale(.992)}
  .nextgame:focus-visible{outline:2px solid var(--blue-light); outline-offset:3px}
  .nextgame__lab{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#BFD8FF}
  .nextgame__when{margin-top:7px; font-size:clamp(23px,6.8vw,29px); font-weight:800; line-height:1.06}
  .nextgame__vs{margin-top:4px; font-size:15px; font-weight:700; color:#DCE9FF}
  .nextgame__meta{margin-top:8px; font-size:13.5px; color:var(--text-2); line-height:1.45}
  .nextgame__tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
  .nextgame__cd{margin-left:auto; flex:0 0 auto; text-align:right; padding-left:12px}
  .nextgame__num{font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
  .nextgame__cd .u{display:block; margin-top:3px; font-size:10.5px; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase; color:#BFD8FF}

  /* ===== чип ближайшего дня рождения ===== */
  .bdchip{display:flex; align-items:center; gap:9px; width:calc(100% - 2*var(--pad));
    margin:12px var(--pad) 0; padding:11px 15px; border-radius:16px;
    font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text);
    text-align:left; cursor:pointer; border:1px solid rgba(255,154,24,.34);
    background:linear-gradient(140deg, rgba(255,154,24,.14) 0%, rgba(255,255,255,0) 60%),
               rgba(16,45,96,.34);
    transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
  .bdchip:hover{border-color:rgba(255,180,80,.6)}
  .bdchip:active{transform:scale(.995)}
  .bdchip:focus-visible{outline:2px solid var(--orange-2); outline-offset:2px}
  .bdchip__cake{font-size:17px; flex:0 0 auto}
  .bdchip__in{margin-left:auto; flex:0 0 auto; font-size:12px; font-weight:800; color:var(--orange-2)}

  /* ===== матчи ===== */
  .mcard{display:flex; gap:13px; align-items:center; width:100%; text-align:left; cursor:pointer;
    font-family:inherit; color:var(--text); padding:14px; margin-top:12px;
    border-radius:20px; border:1px solid rgba(150,190,255,.26);
    background:linear-gradient(155deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 46%),
               linear-gradient(160deg, rgba(16,45,96,.40), rgba(10,31,73,.26));
    transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease)}
  .mcard:hover{border-color:rgba(150,200,255,.5)}
  .mcard:active{transform:scale(.994)}
  .mcard:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .mcard__mono{width:52px; height:52px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center;
    font-size:16px; font-weight:800; letter-spacing:.02em;
    background:linear-gradient(160deg, rgba(255,154,24,.30), rgba(255,120,11,.16));
    border:1px solid rgba(255,154,24,.44); color:#FFD9B0}
  .mcard__mono--past{background:linear-gradient(160deg, rgba(150,190,255,.20), rgba(16,45,96,.26));
    border-color:rgba(150,190,255,.34); color:#DCE9FF}
  .mcard__t{min-width:0; flex:1}
  .mcard__name{font-size:15px; font-weight:700; line-height:1.25}
  .mcard__meta{margin-top:4px; font-size:12.5px; color:var(--text-2); line-height:1.4}
  .mcard__in{flex:0 0 auto; text-align:right; font-size:12px; font-weight:800; color:var(--orange-2)}
  .mcard__score{flex:0 0 auto; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums}
  .mcard__score--w{color:var(--ok)}
  .mcard__score--l{color:#FF8A8A}

  .season{display:flex; flex-wrap:wrap; gap:9px; margin-top:14px}
  .season__it{padding:9px 13px; border-radius:14px; background:rgba(150,190,255,.10);
    border:1px solid rgba(150,190,255,.20); font-size:12.5px; color:var(--text-2)}
  .season__it b{color:var(--text); font-weight:800}

  /* карточка матча в шторке */
  .matchday{padding:4px 0 0}
  .matchday__day{font-size:clamp(24px,7vw,30px); font-weight:800; line-height:1.08}
  .matchday__time{margin-top:5px; font-size:16px; font-weight:700; color:#DCE9FF}
  .matchday__where{margin-top:10px; font-size:13.5px; color:var(--text-2); line-height:1.5}
  .matchday__score{display:flex; align-items:center; gap:14px; margin-top:16px}
  .matchday__num{font-size:40px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
  .matchday__sep{font-size:22px; color:var(--text-2)}
  .matchday__res{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
  .matchday__res--w{color:var(--ok)} .matchday__res--l{color:#FF8A8A}

  .checks{display:flex; flex-direction:column; gap:8px; padding-top:6px}
  .check{display:flex; align-items:center; gap:11px; cursor:pointer; font-size:14.5px; font-weight:600;
    padding:11px 13px; border-radius:14px; border:1px solid rgba(150,190,255,.20);
    background:rgba(150,190,255,.08)}
  .check input{width:20px; height:20px; flex:0 0 auto; accent-color:var(--blue-electric)}
  .check.is-done{color:var(--text-2); text-decoration:line-through}

  /* всплывающая подсказка («файл сохранён», «не удалось») */
  .toast{position:fixed; z-index:31; left:50%; bottom:calc(26px + env(safe-area-inset-bottom));
    transform:translateX(-50%) translateY(14px); opacity:0; pointer-events:none;
    max-width:min(92vw,420px); padding:13px 18px; border-radius:16px;
    background:rgba(7,24,56,.94); border:1px solid rgba(150,190,255,.34);
    color:var(--text); font-size:14px; font-weight:600; text-align:center;
    box-shadow:0 14px 34px rgba(0,0,0,.5); backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px); transition:opacity 200ms var(--ease), transform 200ms var(--ease)}
  .toast.is-on{opacity:1; transform:translateX(-50%) translateY(0)}

  .foot--in{padding-top:22px}


  /* ===== посещаемость тренировки ===== */
  .att{margin:16px var(--pad) 0; padding:17px 18px; border-radius:22px;
    border:1px solid rgba(150,190,255,.30);
    background:linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
               linear-gradient(160deg, rgba(16,45,96,.46), rgba(10,31,73,.30));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20), var(--shadow-card);
    backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%)}
  .att__lab{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
  .att__when{margin-top:7px; font-size:17px; font-weight:800; line-height:1.25}
  .att__meta{margin-top:4px; font-size:13px; color:var(--text-2)}

  /* Сводка: «14 из 25 подтвердили». Без имён — так видят все. */
  .att__sum{margin-top:14px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
  .att__num{font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
  .att__of{font-size:14px; color:var(--text-2); font-weight:600}
  .att__bar{margin-top:10px; height:8px; border-radius:999px; background:rgba(127,149,195,.22); overflow:hidden}
  .att__fill{height:100%; border-radius:999px; background:linear-gradient(90deg,#0A6DEB,#2E8BFF);
    transition:width 300ms var(--ease)}
  .att__legend{margin-top:8px; display:flex; gap:14px; font-size:12.5px; color:var(--text-2); flex-wrap:wrap}
  .att__legend b{color:var(--text); font-weight:800}

  .att__q{margin-top:14px; font-size:14.5px; font-weight:700}
  .att__btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
  .att__btn{display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 10px; border-radius:18px; cursor:pointer; font-family:inherit;
    font-size:14.5px; font-weight:700; color:var(--text);
    border:1px solid rgba(150,190,255,.30); background:rgba(150,190,255,.08);
    transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
               background var(--dur) var(--ease)}
  .att__btn:hover{border-color:rgba(150,200,255,.55)}
  .att__btn:active{transform:scale(.98)}
  .att__btn:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .att__btn.is-on{color:#fff; border-color:transparent;
    box-shadow:0 8px 20px rgba(8,123,255,.30)}
  .att__btn--yes.is-on{background:linear-gradient(135deg,#1E9E6A,#177A52)}
  .att__btn--no.is-on{background:linear-gradient(135deg,#C4574F,#9E423B)}
  .att__mine{margin-top:11px; font-size:12.5px; color:var(--text-3)}

  /* Таблица с именами — только администратору. */
  .att__admin{margin-top:16px; padding-top:14px; border-top:1px solid rgba(23,74,145,.55)}
  .att__admin__head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .att__admin__hint{font-size:12.5px; color:var(--text-3)}
  .att__row{display:flex; align-items:center; gap:10px; padding:9px 0;
    border-bottom:1px solid rgba(23,74,145,.35); font-size:13.5px}
  .att__row:last-child{border-bottom:0}
  .att__row b{flex:1; min-width:0; font-weight:600}
  .att__tag{flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.04em;
    text-transform:uppercase; padding:4px 9px; border-radius:999px}
  .att__tag--yes{color:#8FE3BE; background:rgba(47,163,122,.20)}
  .att__tag--no{color:#FFB3AE; background:rgba(196,87,79,.22)}
  .att__tag--none{color:var(--text-3); background:var(--mute-bg)}

  .att__xls{margin-top:14px; height:48px; border:0; border-radius:16px; cursor:pointer;
    font-family:inherit; font-size:15px; font-weight:800; color:#fff;
    display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
    background:linear-gradient(135deg,#1F8A4C,#146B39)}
  .att__xls:hover{filter:brightness(1.06)}
  .att__xls:active{transform:scale(.99)}
  .att__xls:disabled{opacity:.7}
  .att__xls:focus-visible{outline:2px solid var(--blue-light); outline-offset:3px}
  .att__xhint{margin-top:8px; font-size:12px; color:var(--text-3); text-align:center}


  /* ===== объявления ===== */
  .pcard{margin-top:12px; padding:16px 17px; border-radius:20px;
    border:1px solid rgba(150,190,255,.26);
    background:linear-gradient(155deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 46%),
               linear-gradient(160deg, rgba(16,45,96,.42), rgba(10,31,73,.26))}
  .pcard--imp{border-color:rgba(255,154,24,.44);
    background:linear-gradient(150deg, rgba(255,154,24,.16) 0%, rgba(255,255,255,0) 52%),
               linear-gradient(160deg, rgba(16,45,96,.42), rgba(10,31,73,.26))}
  .pcard--pin{box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 10px 26px rgba(2,10,30,.45)}

  .pcard__top{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
  .pcard__tag{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    padding:4px 9px; border-radius:999px; background:var(--mute-bg); color:var(--text-2)}
  .pcard__tag--imp{background:linear-gradient(180deg,var(--orange-2),var(--orange)); color:#3A1B00}
  .pcard__pin{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-2)}
  .pcard__date{margin-left:auto; font-size:12px; color:var(--text-3); white-space:nowrap}

  .pcard__title{margin-top:9px; font-size:16.5px; font-weight:800; line-height:1.28}
  .pcard__body{margin-top:7px; font-size:14px; line-height:1.55; color:var(--text-2);
    white-space:pre-wrap; word-break:break-word}
  .pcard__by{margin-top:11px; font-size:12px; color:var(--text-3)}

  .pcard__acts{display:flex; gap:9px; margin-top:13px; flex-wrap:wrap}
  .pcard__act{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    font-family:inherit; font-size:12.5px; font-weight:700; color:var(--text-2);
    padding:9px 13px; border-radius:12px; border:1px solid rgba(150,190,255,.24);
    background:rgba(150,190,255,.08);
    transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease)}
  .pcard__act:hover{border-color:rgba(150,200,255,.5); color:var(--text)}
  .pcard__act:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .pcard__act--del:hover{border-color:rgba(196,87,79,.6); color:#FFB3AE}

  /* форма публикации — только у администратора */
  .pub{margin-top:18px; padding:16px 17px; border-radius:20px;
    border:1px dashed rgba(150,190,255,.38); background:rgba(150,190,255,.05)}
  .pub__h{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2)}
  .pub__f{display:flex; flex-direction:column; gap:9px; margin-top:12px}
  .pub__in, .pub__ta{width:100%; font-family:inherit; font-size:14.5px; color:var(--text);
    padding:13px 14px; border-radius:14px; border:1px solid rgba(150,190,255,.26);
    background:rgba(7,24,56,.55); outline:none; resize:vertical}
  .pub__ta{min-height:104px; line-height:1.5}
  .pub__in::placeholder, .pub__ta::placeholder{color:var(--text-3)}
  .pub__in:focus, .pub__ta:focus{border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(46,139,255,.20)}
  .pub__row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--text-2)}
  .pub__row input[type=checkbox]{width:19px; height:19px; accent-color:var(--orange)}
  .pub__go{margin-top:12px; height:50px; border:0; border-radius:16px; cursor:pointer; width:100%;
    font-family:inherit; font-size:15.5px; font-weight:800; color:#fff;
    background:linear-gradient(135deg,#0A6DEB,#0750D6);
    display:inline-flex; align-items:center; justify-content:center; gap:9px}
  .pub__go:hover{filter:brightness(1.06)}
  .pub__go:active{transform:scale(.99)}
  .pub__go:disabled{opacity:.6; cursor:default}
  .pub__go:focus-visible{outline:2px solid var(--blue-light); outline-offset:3px}
  .pub__hint{margin-top:9px; font-size:12px; color:var(--text-3); line-height:1.5}

  /* чип объявления на главном */
  /* Здесь только каркас. Кнопка-строка (.news__open) и кнопки правки
     (.news__acts) описаны ниже и перекрывают padding — иначе вложенные
     кнопки наследовали бы внешний отступ и вылезали за экран. */
  .news{width:calc(100% - 2*var(--pad)); margin:12px var(--pad) 0;
    padding:0; border-radius:16px;
    font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text);
    border:1px solid rgba(150,190,255,.30);
    background:rgba(16,45,96,.34);
    transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
  .news:hover{border-color:rgba(150,200,255,.55)}
  .news--imp{border-color:rgba(255,154,24,.42);
    background:linear-gradient(140deg, rgba(255,154,24,.14) 0%, rgba(255,255,255,0) 60%), rgba(16,45,96,.34)}
  .news__ico{flex:0 0 auto; font-size:16px}
  .news__t{min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; text-align:left}
  .news__title{font-size:14px; font-weight:700; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  /* Текст обрезается по трём строкам: полное объявление до 2000 знаков
     растянуло бы главный экран и отодвинуло состав. Целиком — по тапу. */
  .news__body{font-size:12.5px; font-weight:500; color:var(--text-2); line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .news__title--solo{font-weight:600; font-size:13.5px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .news__meta{margin-top:2px; font-size:11.5px; font-weight:700; color:var(--text-3)}
  .news__right{margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:8px;
    align-self:center}
  .news__chev{color:var(--text-3); transition:transform var(--dur) var(--ease)}
  .news__open:hover .news__chev{transform:translateX(3px)}
  /* Точка «не прочитано» — единственный акцент, и он статичный. */
  .news__dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;
    background:var(--orange); box-shadow:0 0 0 3px rgba(255,120,11,.22)}


  /* ===== материалы для детей ===== */
  /* Крупный текст и большие интервалы: с этим работают дети 8–9 лет,
     мелкий шрифт и плотные абзацы они просто не станут читать. */
  .mat__lead{margin:14px var(--pad) 0; font-size:14.5px; line-height:1.6; color:var(--text-2)}

  .mat__card{margin-top:12px; padding:15px 17px; border-radius:20px;
    border:1px solid rgba(150,190,255,.26);
    background:linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 48%),
               rgba(16,45,96,.34)}
  .mat__q{font-size:16.5px; font-weight:800; line-height:1.3}
  .mat__a{margin-top:8px; font-size:15px; line-height:1.62; color:var(--text-2)}
  .mat__a b{color:var(--text)}

  /* Схема расстановки: наша половина площадки, кольцо сверху. */
  .court{margin-top:14px; border-radius:20px; overflow:hidden;
    border:1px solid rgba(150,190,255,.30); background:rgba(7,24,56,.45)}
  .court svg{display:block; width:100%; height:auto}
  .court__cap{padding:11px 14px; font-size:13px; color:var(--text-2);
    border-top:1px solid rgba(23,74,145,.5); line-height:1.5}
  .court__name{padding:12px 14px 0; font-size:13px; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text-2)}

  .mat__back{margin-top:6px}
  .mat__sec{cursor:pointer; font-family:inherit; color:var(--text)}

  /* индекс материалов: раздел одной строкой */
  .mats{margin-top:22px; border-top:1px solid rgba(23,74,145,.55)}
  .matrow{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
    cursor:pointer; font-family:inherit; color:var(--text); min-width:0;
    padding:15px 0; border:0; border-bottom:1px solid rgba(23,74,145,.35);
    background:transparent}
  .matrow:last-child{border-bottom:0}
  .matrow:hover .matrow__name{color:var(--blue-light)}
  .matrow:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px; border-radius:10px}
  .matrow__ico{width:42px; height:42px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center;
    font-size:20px; background:rgba(150,200,255,.12); border:1px solid rgba(150,190,255,.24)}
  .matrow__t{min-width:0; flex:1}
  .matrow__name{font-size:15.5px; font-weight:700; line-height:1.25;
    transition:color var(--dur) var(--ease)}
  /* was: nowrap — длинный лид не влезал и распирал строку на узком экране.
     Теперь он переносится и обрезается по двум строкам. */
  .matrow__sub{margin-top:3px; font-size:12.5px; color:var(--text-3);
    overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .matrow__chev{flex:0 0 auto; color:var(--text-3)}


  /* ===== одно объявление на главном ===== */
  /* Продолжение каркаса .news выше: строка объявления и кнопки правки. */
  .news__open{display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left;
    cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text);
    background:none; border:0; padding:13px 15px; border-radius:16px}
  .news__open:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px; border-radius:16px}
  .news__acts{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:0 15px 11px; min-width:0}
  .news__more{font-size:11.5px; color:var(--text-3); font-weight:700}
  .news__act{cursor:pointer; font-family:inherit; font-size:12px; font-weight:700;
    color:var(--text-2); padding:8px 12px; border-radius:11px; white-space:nowrap;
    border:1px solid rgba(150,190,255,.24); background:rgba(150,190,255,.08)}
  .news__act:hover{border-color:rgba(150,200,255,.5); color:var(--text)}
  .news__act:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .news__act--del:hover{border-color:rgba(196,87,79,.6); color:#FFB3AE}

  /* поздравление в день рождения — тёплый акцент вместо отсчёта */
  .bdchip--today{border-color:rgba(255,154,24,.55);
    background:linear-gradient(140deg, rgba(255,154,24,.22) 0%, rgba(255,255,255,0) 62%), rgba(16,45,96,.40)}


  /* ===== медиа: фото, видео и база ===== */
  /* Корень раздела — три крупные карточки. Внутри каждого подраздела
     кнопка возврата: без неё из «Фото» не выйти иначе как через шапку. */
  .mediaroot{display:flex; flex-direction:column; gap:12px;
    padding:14px var(--pad) 0}
  .mroot{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
    cursor:pointer; font-family:inherit; color:var(--text); padding:16px;
    border-radius:20px; border:1px solid rgba(150,190,255,.28);
    background:linear-gradient(155deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 46%),
               linear-gradient(160deg, rgba(16,45,96,.44), rgba(10,31,73,.28));
    backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
    transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease)}
  .mroot:hover{border-color:rgba(150,200,255,.5); filter:brightness(1.04)}
  .mroot:active{transform:scale(.99)}
  .mroot:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}
  .mroot__ico{width:52px; height:52px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center;
    color:var(--blue-light);
    background:rgba(150,200,255,.14); border:1px solid rgba(150,190,255,.24)}
  .mroot__t{min-width:0; flex:1; display:flex; flex-direction:column; gap:3px}
  .mroot__t b{font-size:16px; font-weight:700; line-height:1.2}
  .mroot__n{font-size:12.5px; color:var(--text-3)}
  .mroot__chev{flex:0 0 auto; color:var(--text-3); transition:transform var(--dur) var(--ease)}
  .mroot:hover .mroot__chev{transform:translateX(3px)}

  .backbtn{display:inline-flex; align-items:center; gap:7px; margin:14px var(--pad) 0;
    cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700;
    color:var(--text-2); padding:10px 15px; border-radius:14px;
    border:1px solid rgba(150,190,255,.24); background:rgba(150,190,255,.08);
    transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease)}
  .backbtn:hover{border-color:rgba(150,200,255,.5); color:var(--text)}
  .backbtn:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px}


  /* ===== подсказка привязки ребёнка ===== */
  /* Нейтральный тон, без тревожного оранжевого: это не ошибка и не проблема,
     а просто приглашение. Пропадает, как только появится привязка. */
  .linkhint{display:flex; align-items:flex-start; gap:12px;
    width:calc(100% - 2*var(--pad)); margin:12px var(--pad) 0; padding:14px 16px;
    border-radius:18px; border:1px dashed rgba(150,190,255,.38);
    background:rgba(150,190,255,.06)}
  .linkhint__ico{font-size:19px; line-height:1.2; flex:0 0 auto; opacity:.9}
  .linkhint__t{min-width:0; display:flex; flex-direction:column; gap:4px}
  .linkhint__t b{font-size:14px; font-weight:700}
  .linkhint__t span{font-size:12.5px; line-height:1.5; color:var(--text-2)}

/* ===== Мобильная вёрстка: реальные телефоны 360-430px =====
   Прежний порог был 359px, поэтому типичный Android (360px) и iPhone (390-430px)
   показывали десктопную раскладку в 3-4 колонки — карточки распирали строку.
   Ниже — только для узких экранов; широкие не затрагиваются. */
@media (max-width:430px){
  .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .album{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .card__name{font-size:13.5px; line-height:1.25; word-break:break-word}
  .card__age{font-size:11.5px}
  .tile__name{font-size:11px; line-height:1.2}
  .hero__title{font-size:clamp(26px,7.4vw,34px); gap:9px}
  .hero__title em{white-space:normal}
  .phero{gap:13px}
  .phero h2{font-size:18px; line-height:1.25; word-break:break-word}
  .att__btns{grid-template-columns:1fr; gap:8px}
}
@media (max-width:400px){
  .home{gap:13px 4px; padding:14px 8px 16px}
  .tile__ico{width:48px; height:48px; border-radius:14px}
  .tile__ico svg{width:24px; height:24px}
  .act{font-size:14.5px; padding:14px; gap:9px}
  .coach{gap:12px}
  .mykid{gap:11px}
}