/* ============================================================
   OTO — DESIGN SYSTEM (oto-ds.css)
   Извлечено из реальных скринов приложения OTO (app v4.3.817, dark theme).
   Единый CSS для всех кликабельных прототипов (Трек E).
   Источник токенов: APP-MAP.md + vision-анализ скринов 01-home, 06-explore,
   08-assessment, 14-paywall, 16-lesson-flow, 17-courses.
   ⚠️ Значения цветов — аппроксимации с растровых скринов.
   ============================================================ */

:root{
  /* --- Палитра: поверхности --- */
  --bg:            #0d0d0f;   /* основной фон экрана (near-black) */
  --surface:       #1c1d1f;   /* карточки/плитки */
  --surface-2:     #2a2a2a;   /* приподнятая поверхность (lesson row, breakdown) */
  --surface-3:     #121214;   /* phone body */
  --hairline:      rgba(255,255,255,.08); /* тонкие границы */

  /* --- Палитра: акцент (sage/teal — брендовый) --- */
  --accent:        #8fa89e;   /* CTA, активные кнопки */
  --accent-strong: #7ba8a0;   /* hover/насыщенный */
  --accent-bg:     #2d3a3a;   /* upgrade-banner, тёмный sage-фон */
  --on-accent:     #14201c;   /* тёмный текст на sage-кнопке */

  /* --- Палитра: текст --- */
  --text:          #f5f5f6;   /* основной */
  --text-2:        #9da0a3;   /* вторичный/мета */
  --text-3:        #6e747a;   /* приглушённый */

  /* --- Категории Explore --- */
  --cat-calm:      #67768f;
  --cat-focus:     #8c99a8;
  --cat-sleep:     #2c3a52;

  /* --- Семантика серьёзности (TFI score ranges) --- */
  --sev-none:      #4caf72;   /* 0-17  Not a problem */
  --sev-small:     #8bc34a;   /* 18-31 Small problem */
  --sev-moderate:  #f5a623;   /* 32-53 Moderate (amber) */
  --sev-big:       #f15a29;   /* 54-72 Big (orange) */
  --sev-vbig:      #e23b30;   /* 73-100 Very big (red) */
  --track:         #d8d8d8;   /* незаполненная дорожка кольца/бара */

  /* --- Радиусы --- */
  --r-phone:  42px;
  --r-card:   22px;   /* карточки курса/программы */
  --r-tile:   18px;   /* плитки, баннеры */
  --r-row:    16px;   /* строка урока */
  --r-pill:   999px;  /* кнопки-капсулы, mini-player */

  /* --- Типографика --- */
  --font: -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Arial,sans-serif;
  --fs-display: 30px; /* заголовки секций/экранов */
  --fs-title:   26px; /* заголовок карточки/урока */
  --fs-h:       20px; /* подзаголовок */
  --fs-body:    15px;
  --fs-meta:    13px; /* Chapter X • 5 min */
  --fs-nav:     10px;
  --tracking-tight: -.03em;

  /* --- Отступы (8pt-сетка) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* --- Тени --- */
  --shadow-card: 0 18px 46px rgba(0,0,0,.2);
  --shadow-phone: 0 30px 80px rgba(0,0,0,.28), 0 0 0 10px #111;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);-webkit-font-smoothing:antialiased;
     background:var(--bg);color:var(--text)}
button{font:inherit;cursor:pointer}
a{color:inherit}

/* ============ PHONE SHELL ============ */
.phone{width:390px;min-height:844px;border-radius:var(--r-phone);overflow:hidden;
       background:var(--surface-3);box-shadow:var(--shadow-phone);
       margin:36px auto;position:relative;display:flex;flex-direction:column}
.phone .scroll{flex:1;overflow-y:auto;padding-bottom:104px}
.status{height:34px;display:flex;align-items:center;justify-content:space-between;
        padding:0 22px;font-weight:700;font-size:13px;color:#fff;background:transparent}
.homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
         width:134px;height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.25);z-index:5}

/* ============ HEADER ============ */
.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px 8px}
.app-header svg{width:26px;height:26px;fill:#fff}
.app-header .back{font-size:24px;color:#fff;text-decoration:none;font-weight:700}
.screen-title{font-size:var(--fs-h);font-weight:800;text-align:center;flex:1;letter-spacing:var(--tracking-tight)}
.content{padding:0 16px}

/* ============ ТИПОГРАФИКА ============ */
.display{font-size:var(--fs-display);font-weight:800;letter-spacing:var(--tracking-tight);margin:22px 0 8px}
.section-header{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--sp-5)}
.section-header h2{font-size:var(--fs-display);font-weight:800;letter-spacing:var(--tracking-tight);margin:0}
.section-header .link{color:var(--text-2);font-size:14px;font-weight:700;text-decoration:none}
.meta{font-size:var(--fs-meta);color:var(--text-2);font-weight:600}

/* ============ UPGRADE BANNER ============ */
.upgrade-banner{display:flex;align-items:center;gap:12px;background:var(--accent-bg);
                border-radius:var(--r-tile);padding:14px;margin:12px 0;text-decoration:none;color:#fff}
.upgrade-banner .icon{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);
                      display:grid;place-items:center;flex:none}
.upgrade-banner .icon svg{width:20px;height:20px;fill:#fff}
.upgrade-banner .text{flex:1;font-weight:700;font-size:14px}
.upgrade-banner .chevron{opacity:.7;font-size:20px}

/* ============ PROGRAM / COURSE CARD (фото-фон) ============ */
.media-card{position:relative;min-height:220px;border-radius:var(--r-card);overflow:hidden;
            padding:18px;display:flex;flex-direction:column;justify-content:flex-end;
            color:#fff;margin-top:10px;text-decoration:none;
            background-size:cover;background-position:center}
.media-card::after{content:"";position:absolute;inset:0;
                   background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));z-index:0}
.media-card>*{position:relative;z-index:1}
.media-card .kicker{font-size:13px;font-weight:700;opacity:.85}
.media-card .title{font-size:var(--fs-title);font-weight:800;line-height:1.1;letter-spacing:var(--tracking-tight);margin:4px 0 0}
.media-card .play{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:1;
                  width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);
                  display:grid;place-items:center;background:rgba(0,0,0,.2);backdrop-filter:blur(4px)}
.play-tri{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;
          border-color:transparent transparent transparent #fff;margin-left:3px}

/* ============ QUICK-ACCESS TILES (2 cols) ============ */
.quick-access{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.qa-btn{display:flex;align-items:center;gap:10px;background:var(--surface);
        border:1px solid var(--hairline);border-radius:var(--r-row);padding:16px;
        color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.qa-btn svg{width:20px;height:20px;fill:#fff;opacity:.9}

/* ============ CATEGORY TILES (Explore) ============ */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.cat-tile{aspect-ratio:1/1;border-radius:var(--r-tile);display:flex;flex-direction:column;
          align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:700;
          font-size:15px;text-decoration:none}
.cat-tile.calm{background:var(--cat-calm)} .cat-tile.focus{background:var(--cat-focus)} .cat-tile.sleep{background:var(--cat-sleep)}
.cat-tile svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.6}

/* ============ FEATURED CAROUSEL ============ */
.carousel{display:flex;gap:14px;overflow-x:auto;padding:4px 0 8px;scroll-snap-type:x mandatory}
.carousel::-webkit-scrollbar{display:none}
.course-card{flex:0 0 260px;height:170px;border-radius:var(--r-card);overflow:hidden;
             position:relative;scroll-snap-align:start;text-decoration:none;color:#fff;
             background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.course-card::after{content:"";position:absolute;inset:0;
                    background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6));z-index:0}
.course-card>*{position:relative;z-index:1}
.course-card .title{font-size:22px;font-weight:800;letter-spacing:var(--tracking-tight)}
.course-card .desc{font-size:13px;opacity:.9;margin-top:4px;line-height:1.3}

/* ============ BROWSE-ALL LIST CARD ============ */
.browse-card{display:block;height:96px;border-radius:var(--r-card);overflow:hidden;position:relative;
             margin-top:12px;text-decoration:none;color:#fff;background-size:cover;background-position:center;padding:16px;
             display:flex;flex-direction:column;justify-content:center}
.browse-card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:0}
.browse-card>*{position:relative;z-index:1}
.browse-card .title{font-size:18px;font-weight:800}
.browse-card .desc{font-size:12px;opacity:.9;margin-top:2px}

/* ============ LESSON ROW (course/chapter list) ============ */
.chapter-h{font-size:var(--fs-h);font-weight:800;margin:20px 0 8px;letter-spacing:var(--tracking-tight)}
.lesson-row{display:flex;align-items:center;gap:12px;background:var(--surface-2);
            border-radius:var(--r-row);padding:14px;margin-top:8px;text-decoration:none;color:#fff}
.lesson-row .picon{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
                   display:grid;place-items:center;flex:none}
.lesson-row .body{flex:1;min-width:0}
.lesson-row .name{font-weight:700;font-size:15px;line-height:1.2}
.lesson-row .dur{font-size:13px;color:var(--text-2);margin-top:2px}
.lesson-row.completed .picon{background:var(--accent);border-color:var(--accent)}
.lesson-row.completed .check{color:var(--on-accent);font-weight:900}
.lesson-row.locked{opacity:.55}
.lesson-row.locked .picon{border-color:var(--text-3)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     border:none;border-radius:var(--r-pill);padding:16px 22px;font-weight:800;font-size:16px;
     text-decoration:none;width:100%}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:transparent;border:1.5px solid var(--hairline);color:#fff}
.btn-pill-sticky{position:absolute;left:16px;right:16px;bottom:104px}
.btn .lock{width:16px;height:16px;fill:currentColor}

/* ============ TOGGLE (Goals/Preferences) ============ */
.toggle-row{display:flex;align-items:center;justify-content:space-between;
            background:var(--surface);border-radius:var(--r-row);padding:16px;margin-top:10px}
.toggle-row .label{font-weight:700;font-size:15px}
.switch{width:50px;height:30px;border-radius:var(--r-pill);background:#3a3b3e;position:relative;border:none;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:var(--accent)} .switch.on::after{left:23px}

/* ============ SLIDER (TFI questionnaire) ============ */
.q-progress{height:5px;border-radius:var(--r-pill);background:var(--surface-2);margin:8px 16px}
.q-progress>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.slider-track{height:8px;border-radius:var(--r-pill);background:var(--surface-2);position:relative;margin:24px 0}
.slider-track>i{position:absolute;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;
                border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.slider-anchors{display:flex;justify-content:space-between;color:var(--text-2);font-size:12px}

/* ============ DONUT SCORE (TFI result) ============ */
.donut{width:160px;height:160px;border-radius:50%;margin:8px auto;display:grid;place-items:center;
       /* fill % и цвет задаются inline через --val и --c */
       background:conic-gradient(var(--c,var(--sev-big)) calc(var(--val,51)*1%),var(--track) 0)}
.donut .hole{width:124px;height:124px;border-radius:50%;background:var(--bg);display:grid;place-items:center}
.donut .num{font-size:44px;font-weight:800}

/* ============ SUBSCALE / BREAKDOWN BAR ============ */
.subscale{display:flex;align-items:center;gap:12px;margin-top:14px}
.subscale .badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
                 color:#fff;font-weight:800;font-size:13px;flex:none}
.subscale .col{flex:1}
.subscale .bar{height:8px;border-radius:var(--r-pill);background:var(--surface-2);margin-top:6px;overflow:hidden}
.subscale .bar>i{display:block;height:100%;border-radius:var(--r-pill)}

/* ============ TRIAL TIMELINE (paywall) ============ */
.timeline{margin-top:20px}
.tl-step{display:flex;gap:14px;padding-bottom:22px;position:relative}
.tl-step:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:var(--surface-2)}
.tl-step .marker{width:36px;height:36px;border-radius:50%;background:var(--surface-2);
                 display:grid;place-items:center;font-weight:800;flex:none;z-index:1}
.tl-step.active .marker{background:#9dbec4;color:var(--bg)}
.tl-step .ttl{font-weight:800;font-size:15px}
.tl-step .sub{color:var(--text-2);font-size:13px;margin-top:2px}

/* ============ MINI-PLAYER ============ */
.mini-player{position:absolute;left:12px;right:12px;bottom:92px;height:56px;
             background:rgba(30,30,32,.85);backdrop-filter:blur(10px);border-radius:var(--r-pill);
             display:flex;align-items:center;gap:12px;padding:0 16px;z-index:6}
.mini-player .mp-title{flex:1;font-weight:700;font-size:14px}
.mini-player svg{width:22px;height:22px;fill:#fff}

/* ============ BOTTOM TAB-BAR ============ */
.tab-bar{position:absolute;bottom:0;left:0;right:0;height:88px;display:flex;
         justify-content:space-around;align-items:center;padding-bottom:24px;
         background:rgba(18,18,18,.85);backdrop-filter:blur(10px);z-index:6}
.tab-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-3);
          font-size:var(--fs-nav);font-weight:600;text-decoration:none}
.tab-item svg{width:24px;height:24px;fill:currentColor}
.tab-item.active{color:#fff}

/* ============ TABS (Sounds: All/Favourites/Coloured) ============ */
.seg{display:flex;gap:8px;padding:0 16px;margin-top:12px}
.seg a{flex:1;text-align:center;padding:8px;border-radius:var(--r-pill);font-weight:700;font-size:13px;
       color:var(--text-2);text-decoration:none;background:var(--surface)}
.seg a.active{background:var(--accent);color:var(--on-accent)}

/* ============ SOUND GRID ============ */
.sound-section{font-size:12px;letter-spacing:.08em;color:var(--text-2);font-weight:800;
               text-transform:uppercase;margin:18px 0 8px}
.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sound-cell{aspect-ratio:1/1;border-radius:var(--r-tile);background:var(--surface);
            display:flex;align-items:flex-end;padding:10px;font-weight:700;font-size:13px;
            color:#fff;text-decoration:none}