/* ASY OS V161 — Global Home Theme + Readability + Mobile Consistency
   Visual-only layer. No data, schema, storage, routes, or feature logic changes. */

:root{
  --bg:#030303;
  --bg-soft:#070707;
  --panel:#0b0b0a;
  --panel2:#0f0e0d;
  --panel3:#15120e;
  --line:#24211c;
  --line2:#3a3022;
  --text:#f3efe7;
  --muted:#9a9389;
  --muted2:#6f6961;
  --brand:#d6b36a;
  --brand-strong:#b9904a;
  --brand-deep:#18130d;
  --brand-deeper:#100d08;
  --brand-text:#ead09a;
  --gold:#d6b36a;
  --gold2:#b9904a;
  --blue:#c7a766;
  --purple:#a88958;
  --shadow:0 22px 64px rgba(0,0,0,.34);
}

/* Global shell: same warm black / gold language used on Home. */
html{background:#030303}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 88% -8%,rgba(214,179,106,.075),transparent 30%),
    radial-gradient(circle at -10% 82%,rgba(133,91,41,.055),transparent 30%),
    #030303!important;
  font-size:16px;
}
.sidebar{
  background:#070706!important;
  border-right-color:#211d17!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.brand{color:#f3efe7}
.brand-sub,.user-chip span,.system-line{color:#8f887f!important}
.nav-section{color:#6f6961!important}
.nav button{font-size:14.5px}
.nav button:hover{background:#0f0d0a!important;color:#f3efe7!important}
.nav button.active,
.nav-group.has-active>.nav-group-toggle,
.nav .nav-child.active{
  background:linear-gradient(90deg,#17130d,#0d0c0a)!important;
  color:#f3efe7!important;
  box-shadow:inset 3px 0 0 #d6b36a;
}
.nav button.active .ico,
.nav-group.has-active>.nav-group-toggle .ico,
.nav .nav-child.active .ico{color:#d6b36a!important}
.avatar{
  background:linear-gradient(145deg,#17130d,#0b0a08)!important;
  border-color:#31291e!important;
  color:#d6b36a!important;
}
.topbar{
  border-color:rgba(214,179,106,.09)!important;
}
.eyebrow{color:#d6b36a!important}
.date-chip,.version-chip{
  color:#aaa298!important;
  border-color:#2a241b!important;
  background:#0b0a08!important;
}
.icon-btn,.btn{
  border-color:#2b261f!important;
  background:#0e0c0a!important;
  color:#eee9df!important;
}
.icon-btn:hover,.btn:hover{
  border-color:#4a3b28!important;
  background:#15110c!important;
}
.btn.gold{
  background:linear-gradient(135deg,#b9904a,#e0c17b)!important;
  color:#171108!important;
  border-color:transparent!important;
}
.btn.green{border-color:#294b39!important}
.input,.select,.textarea{
  background:#090908!important;
  color:#f2eee6!important;
  border-color:#28231c!important;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:#8f713e!important;
  box-shadow:0 0 0 3px rgba(214,179,106,.08)!important;
}
.card{
  border-color:#24211c;
  background:
    radial-gradient(circle at 100% 0%,rgba(214,179,106,.045),transparent 28%),
    linear-gradient(150deg,#0c0c0b,#070707 76%,#0b0805);
}
.card.hero{
  background:
    radial-gradient(circle at 88% 0%,rgba(214,179,106,.075),transparent 32%),
    linear-gradient(145deg,#11100e,#060606 70%,#0c0905)!important;
}
.card.soft{background:rgba(12,12,11,.76)!important}
.card.gold-edge{border-color:#4a3923!important}
.tab{background:#0b0a09!important;border-color:#27221b!important}
.tab.active{
  background:#17130d!important;
  color:#f4efe5!important;
  border-color:#5a4529!important;
}
.pill.gold{
  color:#e2c17d!important;
  border-color:#4a3923!important;
  background:#151109!important;
}
.bar{background:#1d1a16}
.fill{background:linear-gradient(90deg,#9d783d,#d6b36a)!important}
.callout{
  border-color:#4a3923!important;
  background:linear-gradient(135deg,#151109,#090807)!important;
}
.callout b{color:#e2c17d!important}

/* Readability: slightly larger system typography without changing content density. */
h1{font-size:30px}
.label{font-size:11.5px!important}
.section-title{font-size:18px!important}
.section-sub{font-size:12.5px!important}
.small{font-size:13.5px!important}
.tiny{font-size:11.5px!important}
.task-title{font-size:14.5px!important}
.task-note{font-size:11.5px!important}
.statline{font-size:13.5px!important}
.goal-title{font-size:14.5px!important}
.list-item b{font-size:13.5px!important}
.table th,.table td{font-size:12.5px}
#app small{font-size:max(10.5px,.70rem)}
#app [class*="-kicker"]{font-size:max(10.5px,.70rem)!important}
#app [class*="-eyebrow"]{font-size:max(10px,.68rem)!important}

/* Core circular indicators: a little larger, same data and logic. */
@media(min-width:781px){
  .ring{width:122px;height:122px}
  .progress-circle-small{width:54px;height:54px}
  .home-v152-metric-ring{width:104px;height:104px}
  .home-v88-mini-ring{width:118px;height:118px}
  .piano-score-ring{width:130px;height:130px}
  .mh-score-ring{width:174px;height:174px}
  .gent-ring{width:158px;height:158px}
  .fitness-readiness{width:162px;height:162px}
  .novel-ring{width:172px;height:172px}
  .courses-hero-score{width:158px;height:158px}
}

/* Planning: replace the cold blue system accent with Home gold. */
.planning-page{
  --plan-blue:#d6b36a;
  --plan-blue-soft:rgba(214,179,106,.10);
  --plan-purple:#a98a58;
  --plan-purple-soft:rgba(169,138,88,.10);
  --plan-gold:#e2c17d;
  --plan-gold-soft:rgba(226,193,125,.10);
}
.planning-page .card{
  border-color:#24211c!important;
  background:linear-gradient(145deg,#0c0c0b,#070707)!important;
}
.planning-glance{
  border-color:#4a3923!important;
  background:
    radial-gradient(circle at 78% -10%,rgba(214,179,106,.08),transparent 34%),
    linear-gradient(145deg,#11100e,#070707)!important;
}
.planning-icon-box{
  color:#e0c17b!important;
  background:#151109!important;
  border-color:#4a3923!important;
  box-shadow:inset 0 0 24px rgba(214,179,106,.055)!important;
}
.planning-glance-metrics>div span,
.planning-glance-metrics>.planning-metric-button span,
.planning-glance-metrics .metric-blue span,
.planning-glance-metrics .metric-blue b{color:#d6b36a!important}
.planning-glance-metrics>div,
.planning-glance-metrics>.planning-metric-button{border-left-color:#28231c!important}

/* Routines: keep green/red status semantics, make primary accent warm. */
.routine-v133-page{--rt-accent:#d6b36a!important}
.routine-command-card{
  background:
    radial-gradient(circle at 82% 12%,rgba(214,179,106,.07),transparent 33%),
    linear-gradient(145deg,#0c0c0b,#070707)!important;
}
.routine-command-copy .label,
.routine-section-head .label,
.routine-section-title-row .label,
.routine-ai-panel .label,
.routine-system-icon,
.routine-card-icon,
.routine-empty-icon{color:#d6b36a!important}
.routine-chip,
.routine-mini.primary,
.routine-range button.active{
  color:#e4c98f!important;
  border-color:rgba(214,179,106,.28)!important;
  background:rgba(214,179,106,.07)!important;
}
.routine-timeline-item.due .routine-line i{background:#d6b36a!important;box-shadow:0 0 15px rgba(214,179,106,.26)!important}
.routine-heatmap i.lv1,.routine-heatmap-legend i.lv1{background:#3b2d1a!important}
.routine-heatmap i.lv2,.routine-heatmap-legend i.lv2{background:#6a4e28!important}
.routine-heatmap i.lv3,.routine-heatmap-legend i.lv3{background:#9e783d!important}
.routine-heatmap i.lv4,.routine-heatmap-legend i.lv4{background:#d6b36a!important}

/* Master Calendar: same Home accent, semantic event colors remain distinct. */
.master-calendar-page{
  --mc-blue:#d6b36a;
  --mc-blue2:#e4c98f;
  --mc-cyan:#c7ad79;
  --mc-purple:#a98a58;
}
.master-calendar-page .card{
  background:linear-gradient(145deg,#0c0c0b,#070707)!important;
  border-color:#24211c!important;
}
.mc-controls{
  border-color:#3b3022!important;
  background:linear-gradient(135deg,#0f0d0a,#080807)!important;
}
.mc-view-switch{border-color:#2c261d!important;background:#090807!important}
.mc-view-switch button.active{
  color:#171108!important;
  background:linear-gradient(180deg,#e0c17b,#b9904a)!important;
  box-shadow:0 5px 18px rgba(214,179,106,.16)!important;
}

/* Audiobooks + Podcasts: keep source identity colors, unify primary UI accent. */
.audio-v99-page{
  --audio-gold:#d6b36a;
  --audio-gold-2:#b9904a;
  --audio-manual:#ad8b57;
  --audio-card:#090908;
  --audio-card-2:#0d0c0a;
}
.pod-v102-page{
  --pod-gold:#d6b36a;
  --pod-gold-2:#b9904a;
  --pod-blue:#d6b36a;
  --pod-purple:#a98a58;
  --pod-card:#090908;
}

/* Series + Piano: remove legacy blue glow from hero surfaces. */
.series-hero{
  background:
    radial-gradient(circle at 86% 0,rgba(214,179,106,.08),transparent 34%),
    linear-gradient(135deg,#11100e,#070707 64%,#0b0805)!important;
  border-color:#4a3923!important;
}
.series-hero:after{border-color:rgba(214,179,106,.10)!important}
.series-tab.active{border-color:#4a3923!important;background:#151109!important}

.piano-tab.active{
  border-color:#4a3923!important;
  background:#151109!important;
}
.piano-hero,.piano-training-hero,.piano-keyboard-hero{
  background:
    radial-gradient(circle at 88% 0%,rgba(214,179,106,.07),transparent 32%),
    linear-gradient(135deg,#11100e,#070707 62%,#0b0805)!important;
  border-color:#2a241b!important;
}
.piano-hero:after,.piano-training-hero:after,.piano-keyboard-hero:after{
  background:radial-gradient(circle,rgba(214,179,106,.10),transparent 68%)!important;
}
.piano-kpis>div,.piano-period{background:#0c0b0a!important;border-color:#24211c!important}
.piano-score-ring{background:conic-gradient(#d6b36a calc(var(--score)*1%),#211d17 0)!important}

/* Already-warm pages: align small remaining cool gradients to the same family. */
.courses-hero,.course-detail-hero,
.fitness-hero,.fitness-workout-head,
.novel-hero{
  background:
    radial-gradient(circle at 82% 18%,rgba(214,179,106,.07),transparent 30%),
    linear-gradient(135deg,#11100e,#050505 62%)!important;
}
.course-progress i,.course-goal i,.course-bar-row i,
.fitness-bar i,.novel-bars i{
  background:linear-gradient(90deg,#9d783d,#d6b36a)!important;
}

/* Mobile consistency across every page. */
@media(max-width:780px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important;
  }
  body{font-size:16px!important}
  .app-shell,.main,#app,#app>*,
  .planning-page,.routine-v133-page,.master-calendar-page,
  .audio-v99-page,.pod-v102-page,.series-page,.piano-center,
  .courses-page,.fitness-page,.novel-studio,.my-hours,.habits-pro,.gent-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .main{
    margin:0!important;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
  #app img,#app video,#app canvas,#app iframe{max-width:100%!important}
  #app h2{line-height:1.08}
  #app small{font-size:max(10.5px,.70rem)!important}
  .label{font-size:11px!important}
  .section-title{font-size:17px!important}
  .section-sub{font-size:12px!important}
  .small{font-size:13px!important}
  .tiny{font-size:11px!important}
  .input,.select,.textarea{font-size:16px!important}
  .card{padding:15px;border-radius:18px}
  .ring{width:108px;height:108px}
  .progress-circle-small{width:50px;height:50px}
  .home-v152-metric-ring{width:88px!important;height:88px!important}

  .planning-glance{display:grid!important;gap:14px!important}
  .planning-glance-copy{min-width:0!important}
  .planning-glance-metrics,
  .planning-glance-metrics.six{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .planning-glance-metrics>div,
  .planning-glance-metrics>.planning-metric-button{
    min-width:0!important;
    border-left:0!important;
    border-top:1px solid #28231c!important;
    padding:10px 8px!important;
  }
  .planning-main-grid,.planning-main-grid.week-layout{grid-template-columns:1fr!important}

  .routine-command-card,.routine-main-grid,.routine-intel-bottom{grid-template-columns:1fr!important}
  .routine-command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .mc-controls{grid-template-columns:1fr!important}
  .mc-filters{width:100%!important;overflow-x:auto!important}

  .audio-v99-row-one,.audio-v99-row-two,.audio-v99-row-three,
  .pod-v102-row-one,.pod-v102-row-two,.pod-v102-row-three{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .series-kpis,.piano-kpis,.courses-kpis,.fitness-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .series-grid{grid-template-columns:minmax(0,1fr)!important}
  .series-card{grid-column:1!important}
  .series-continue{grid-template-columns:1fr!important}

  .piano-hero,.piano-training-hero,.piano-keyboard-hero{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:18px!important;
    padding:18px!important;
  }
  .piano-score{min-width:0!important}
  .piano-score-ring{width:112px!important;height:112px!important}

  .mh-grid.two{grid-template-columns:1fr!important}
  .mh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .gent-hero{grid-template-columns:1fr!important;padding:20px!important}
  .gent-hero-score{justify-self:start!important;width:100%!important}
  .gent-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gent-pillar{grid-template-columns:38px minmax(0,1fr) auto!important}

  .table-wrap,.hb-matrix,.novel-kanban,.piano-keyboard-scroll,
  .mc-calendar-card,.ytx-session-scroll{
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media(max-width:390px){
  .planning-glance-metrics,
  .planning-glance-metrics.six,
  .routine-command-kpis,
  .series-kpis,.piano-kpis,.courses-kpis,.fitness-kpis,.mh-kpis,.gent-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .home-v152-metric-ring{width:82px!important;height:82px!important}
}

/* Keep motion cheap on touch devices; no functionality is removed. */
@media(max-width:1100px) and (hover:none) and (pointer:coarse){
  .card,.btn,.icon-btn,.nav button,
  [class*="-card"],[class*="-panel"],[class*="-tile"]{
    transition-duration:.08s!important;
  }
}


/* V167 · Global phone completion layer
   Layout-only overrides: no data, actions, storage, or page logic are changed. */
@media(max-width:900px){
  html,body,.app-shell,.main,#app{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #app>*,#app>*:first-child{min-width:0!important;max-width:100%!important}
  #app img,#app video,#app canvas,#app iframe,#app svg{
    max-width:100%!important;
  }
  #app pre,#app code{
    max-width:100%!important;
    overflow-x:auto!important;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
  }
}

@media(max-width:780px){
  html,body{
    margin:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .app-shell{
    display:block!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .main{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding-left:max(11px,env(safe-area-inset-left))!important;
    padding-right:max(11px,env(safe-area-inset-right))!important;
    padding-bottom:max(24px,env(safe-area-inset-bottom))!important;
  }
  #app{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #app *,#app *::before,#app *::after{
    box-sizing:border-box;
    min-width:0;
  }
  #app p,#app li,#app span,#app small,#app b,#app strong,#app h2,#app h3,#app h4{
    overflow-wrap:anywhere;
  }

  /* Keep the mobile header inside the viewport and retain Home access. */
  .topbar{
    width:auto!important;
    max-width:none!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
  }
  .topbar-copy{flex:1 1 120px!important;min-width:0!important}
  .topbar-copy h1{
    max-width:100%!important;
    font-size:20px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .eyebrow{font-size:9.5px!important}
  .top-actions{
    flex:0 1 auto!important;
    max-width:52%!important;
    min-width:0!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:6px!important;
    flex-wrap:wrap!important;
  }
  .top-actions .global-home-btn{
    display:grid!important;
    width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:8px!important;
    flex:none!important;
  }
  .top-actions .date-chip{display:none!important}
  .top-actions .version-chip{
    display:inline-flex!important;
    flex:none!important;
    height:28px!important;
    min-width:38px!important;
    font-size:10px!important;
  }
  .top-actions .page-primary-action{
    max-width:116px!important;
    min-height:38px!important;
    padding:8px 10px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:11.5px!important;
  }

  /* Universal content sizing. */
  .grid{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:11px!important;
  }
  .s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9,.s12{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:100%!important;
  }
  .card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:15px!important;
    border-radius:17px!important;
  }
  .row{max-width:100%!important}
  .row.between,.mobile-stack{
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }
  .row.between>*{min-width:0!important}
  .section-title{font-size:17px!important;line-height:1.25!important}
  .section-sub{font-size:12px!important;line-height:1.55!important}
  .label{font-size:10.5px!important;line-height:1.35!important}
  .small{font-size:12.5px!important;line-height:1.45!important}
  .tiny{font-size:11.5px!important;line-height:1.45!important}
  .pill{
    max-width:100%!important;
    white-space:normal!important;
    line-height:1.25!important;
  }

  /* Forms and dialogs should never extend beyond the phone. */
  .form-grid,.form-grid.three,
  .language-filters,
  .piano-inputs.three{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  .field,.field>*{max-width:100%!important}
  .input,.select,.textarea,
  input,select,textarea{
    max-width:100%!important;
    font-size:16px!important;
  }
  .modal-backdrop{
    padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))!important;
    align-items:center!important;
  }
  .modal{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 20px)!important;
    overflow:auto!important;
    padding:16px!important;
    border-radius:18px!important;
  }
  .modal-actions{
    width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .modal-actions .btn{flex:1 1 130px!important;min-height:44px!important}

  /* Make all major two-/three-column workspaces become a clear phone stack. */
  #app :is(
    .home-v152-commandbar,.home-v152-hero-grid,.home-v152-chronos,
    .audio-v99-row-one,.audio-v99-row-two,.audio-v99-row-three,.audio-v99-overview-grid,
    .pod-v102-row-one,.pod-v102-row-two,.pod-v102-row-three,.pod-v102-intake,
    .gent-hero,.gent-workspace,
    .hb-main-grid,.ib-layout,.mc-layout,.mh-grid.two,
    .novel-hero,.piano-learn,.piano-songs-layout,
    .planning-main-grid,.planning-main-grid.week-layout,.weekly-strategy-grid,
    .routine-command-card,
    .ytx-intake,.ytx-main,.ytx-class-grid,
    .duo-system-link
  ){
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    gap:12px!important;
  }

  /* Generic named page layouts also get a one-column safety fallback. */
  #app [class*="-hero-grid"],
  #app [class*="-main-grid"],
  #app [class*="-overview-grid"],
  #app [class*="-split-grid"],
  #app [class*="-row-one"],
  #app [class*="-row-two"],
  #app [class*="-row-three"]{
    grid-template-columns:minmax(0,1fr)!important;
    max-width:100%!important;
  }

  /* KPI/metric blocks remain compact but readable. */
  .kpi-grid,.report-kpis,.movie-kpis,.book-kpis,
  .audio-v99-kpis,.pod-v102-kpis,.courses-kpis,.fitness-kpis,
  .gent-kpis,.hb-kpis,.ib-kpis,.mh-kpis,.novel-kpis,.piano-kpis,
  .routine-command-kpis,.routine-intel-kpis,.series-kpis,
  .duo-kpis,.duo-kpis-top,.duo-metric-grid,.duo-compare-grid,.duo-info-grid,
  .ytx-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .kpi,.duo-metric,.duo-compare-grid>div{
    min-width:0!important;
    padding:12px!important;
  }
  .kpi b,.duo-metric>b{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  /* Libraries and large card galleries use one clean column on phones. */
  #app [class*="library-grid"],
  #app :is(.certificate-grid,.series-library,.gent-pillars,.gent-roadmap-grid,
    .routine-card-grid,.routine-template-grid,.novel-cards,.novel-acts,
    .piano-models,.piano-audio-engines,.fitness-library-group>div){
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }

  /* Local horizontal scrolling only where seven-day/tables really need it. */
  #app :is(
    .table-wrap,.hb-matrix,.mh-table,.mh-ledger,.duo-archive-table,
    .ytx-table,.ytx-session-scroll,.pod-v102-session-scroll,
    .mc-calendar-card,.piano-keyboard-scroll
  ),
  #app [class$="-table"],
  #app [class$="-ledger"]{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .planning-week-grid,.mc-week-view{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(7,minmax(105px,1fr))!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .mc-month-grid,.mc-weekdays{
    min-width:620px!important;
  }
  .hb-matrix-head,.hb-matrix-row{
    min-width:470px!important;
  }
  .duo-archive-head,.duo-archive-row{
    min-width:820px!important;
  }
  .audio-v99-history-head,.audio-v99-history-row,
  .pod-v102-episode-head,.pod-v102-episode-row,
  .pod-v102-session-head,.pod-v102-session-row,
  .ytx-table-head,.ytx-table-row,
  .ytx-session-head,.ytx-session-row{
    min-width:680px!important;
  }

  /* Media and charts fill available width instead of forcing the page wider. */
  #app img,#app video,#app canvas,#app iframe{
    width:auto;
    max-width:100%!important;
  }
  #app iframe,#app video{width:100%!important}
  .chart-wrap,[class*="-chart"]{
    max-width:100%!important;
  }
  .chart-wrap canvas{width:100%!important}
  .duo-chart-wide{max-width:100%!important;overflow-x:auto!important}

  /* High-density page specifics. */
  .language-workspace-grid{grid-template-columns:minmax(0,1fr)!important}
  .language-workspace-items{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .language-profile-grid{grid-template-columns:minmax(0,1fr)!important}
  .language-today-grid{grid-template-columns:minmax(0,1fr)!important}
  .duo-course-grid,.duo-insight-grid{grid-template-columns:minmax(0,1fr)!important}

  .courses-kpis,.fitness-kpis,.gent-kpis,.mh-kpis,.novel-kpis,.piano-kpis,.series-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .fitness-plan-days{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .piano-chords,.piano-ear-answers,.piano-rhythm-live,.piano-periods{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .routine-card-grid,.routine-template-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Prevent old fixed widths from clipping content. */
  #app [style*="width:"],
  #app [style*="min-width:"]{
    max-width:100%;
  }
}

@media(max-width:420px){
  .main{
    padding-left:max(9px,env(safe-area-inset-left))!important;
    padding-right:max(9px,env(safe-area-inset-right))!important;
  }
  .card{padding:13px!important;border-radius:15px!important}
  .topbar{gap:7px!important}
  .mobile-menu-button{width:38px!important;height:38px!important}
  .top-actions{max-width:50%!important}
  .top-actions .page-primary-action{max-width:96px!important;font-size:10.5px!important}
  .kpi-grid,.report-kpis,.movie-kpis,.book-kpis,
  .audio-v99-kpis,.pod-v102-kpis,.courses-kpis,.fitness-kpis,
  .gent-kpis,.hb-kpis,.ib-kpis,.mh-kpis,.novel-kpis,.piano-kpis,
  .routine-command-kpis,.routine-intel-kpis,.series-kpis,
  .duo-kpis,.duo-kpis-top,.duo-metric-grid,.duo-compare-grid,.duo-info-grid,
  .ytx-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .language-workspace-items{grid-template-columns:minmax(0,1fr)!important}
}