/* Canonical LVL theme layer.
   Single source of truth: html[data-theme="light|dark"] */

html,body{
  background:var(--canvas);
  color:var(--text-primary);
}

button,
input,
select,
textarea,
a{
  -webkit-tap-highlight-color:transparent;
}

button{
  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    transform .08s ease,
    opacity .14s ease;
}

button:not(:disabled):active{
  transform:translateY(1px) scale(.992);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
}

button:disabled,
button[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.48;
  box-shadow:none!important;
  transform:none!important;
}

:is(
  [data-ui="primary-button"],
  [data-ui="primary-wide"],
  [data-ui="focus-continue"],
  [data-ui="lesson-finish"]
){
  background:var(--button-primary-bg)!important;
  color:var(--button-primary-text)!important;
  border:1px solid color-mix(in srgb,var(--button-primary-bg) 84%,white 16%)!important;
  box-shadow:var(--button-shadow)!important;
}

:is(
  [data-ui="primary-button"],
  [data-ui="primary-wide"],
  [data-ui="focus-continue"],
  [data-ui="lesson-finish"]
):not(:disabled):hover{
  background:var(--button-primary-hover)!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 24%,transparent)!important;
}

:is(
  [data-ui="primary-button"],
  [data-ui="primary-wide"],
  [data-ui="focus-continue"],
  [data-ui="lesson-finish"]
):not(:disabled):active{
  background:var(--button-primary-active)!important;
  box-shadow:0 2px 7px color-mix(in srgb,var(--accent) 18%,transparent)!important;
}

:is(
  [data-ui="chip"],
  [data-ui="profile-link"],
  [data-ui="setting-row"],
  [data-ui="course-detail-lesson"],
  [data-ui="room-row"],
  [data-ui="friend-row"],
  [data-ui="discovery-card"]
){
  background:var(--button-secondary-bg)!important;
  color:var(--button-secondary-text)!important;
  border-color:var(--button-border)!important;
  box-shadow:var(--shadow-sm);
}

:is(
  [data-ui="chip"],
  [data-ui="profile-link"],
  [data-ui="setting-row"],
  [data-ui="course-detail-lesson"],
  [data-ui="room-row"],
  [data-ui="friend-row"],
  [data-ui="discovery-card"]
):not(:disabled):hover{
  background:var(--button-secondary-hover)!important;
  border-color:var(--border-strong)!important;
}

:is(
  [data-ui="chip"],
  [data-ui="profile-link"],
  [data-ui="setting-row"],
  [data-ui="course-detail-lesson"],
  [data-ui="room-row"],
  [data-ui="friend-row"],
  [data-ui="discovery-card"]
):not(:disabled):active{
  background:var(--button-secondary-active)!important;
  box-shadow:none;
}

button[data-active="true"],
button[data-selected="true"],
button[aria-pressed="true"],
button[aria-checked="true"],
[data-ui="chip"][data-active="true"]{
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
  border-color:var(--accent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),var(--shadow-sm)!important;
}

[data-ui="level-tabs"] button{
  background:var(--surface-raised)!important;
  color:var(--text-primary)!important;
  border-color:var(--border-soft)!important;
  box-shadow:var(--shadow-sm);
}

[data-ui="level-tabs"] button[data-active="true"]{
  background:linear-gradient(145deg,var(--accent-active),var(--accent))!important;
  color:var(--accent-contrast)!important;
  border-color:color-mix(in srgb,var(--accent) 80%,white 20%)!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 26%,transparent)!important;
}

[data-ui="level-tabs"] button:not(:disabled):active{
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 20%,transparent)!important;
}

[data-ui="arena-cards"]>button,
[data-ui="quick-study-grid"]>button,
[data-ui="language-program-card"],
[data-ui="course-list-card"]{
  background:var(--surface-raised)!important;
  color:var(--text-primary)!important;
  border-color:var(--border-soft)!important;
  box-shadow:var(--shadow-sm)!important;
}

[data-ui="arena-cards"]>button:not(:disabled):hover,
[data-ui="quick-study-grid"]>button:not(:disabled):hover,
[data-ui="language-program-card"]:not(:disabled):hover,
[data-ui="course-list-card"]:not(:disabled):hover{
  background:var(--surface-hover)!important;
  border-color:var(--border-strong)!important;
  box-shadow:var(--shadow-md)!important;
}

[data-ui="arena-cards"]>button:not(:disabled):active,
[data-ui="quick-study-grid"]>button:not(:disabled):active,
[data-ui="language-program-card"]:not(:disabled):active,
[data-ui="course-list-card"]:not(:disabled):active{
  background:var(--surface-active)!important;
  box-shadow:var(--shadow-sm)!important;
}

:is(
 [data-ui="auth-card"],
 [data-ui="home-focus-card"],
 [data-ui="current-course"],
 [data-ui="course-detail-module"],
 [data-ui="level-panel"],
 [data-ui="lesson-player"],
 [data-ui="lesson-body"],
 [data-ui="settings-card"],
 [data-ui="pronunciation-card"],
 [data-ui="scenario-card"],
 [data-ui="radio-now"]
){
  background:var(--surface-raised)!important;
  color:var(--text-primary)!important;
  border-color:var(--border-soft)!important;
  box-shadow:var(--shadow-md);
}

input,
textarea,
select{
  background:var(--surface)!important;
  color:var(--text-primary)!important;
  border-color:var(--border-strong)!important;
}

input::placeholder,
textarea::placeholder{
  color:var(--text-disabled);
}

svg{
  color:inherit;
}

@media (hover:none),(pointer:coarse){
  button:not(:disabled):active{
    filter:brightness(.96);
  }
}


/* High-frequency mobile controls */
:is(
  [data-ui="icon-button"],
  [data-ui="avatar-button"],
  [data-ui="subpage-head"]>button,
  [data-ui="lesson-top"]>button,
  [data-ui="photo-change-button"]
){
  background:var(--button-secondary-bg)!important;
  color:var(--button-secondary-text)!important;
  border:1px solid var(--button-border)!important;
  box-shadow:var(--button-shadow)!important;
}

:is(
  [data-ui="icon-button"],
  [data-ui="avatar-button"],
  [data-ui="subpage-head"]>button,
  [data-ui="lesson-top"]>button,
  [data-ui="photo-change-button"]
):not(:disabled):hover{
  background:var(--button-secondary-hover)!important;
  border-color:var(--border-strong)!important;
}

:is(
  [data-ui="icon-button"],
  [data-ui="avatar-button"],
  [data-ui="subpage-head"]>button,
  [data-ui="lesson-top"]>button,
  [data-ui="photo-change-button"]
):not(:disabled):active{
  background:var(--button-secondary-active)!important;
  box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 14%,transparent)!important;
}

[data-ui="dock-button"]{
  color:var(--text-secondary)!important;
  border:1px solid transparent!important;
  background:transparent!important;
  border-radius:12px;
}

[data-ui="dock-button"][aria-current="page"]{
  color:var(--accent)!important;
  background:var(--accent-soft)!important;
  border-color:color-mix(in srgb,var(--accent) 24%,transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)!important;
}

[data-ui="dock-button"]:not(:disabled):active{
  color:var(--accent)!important;
  background:var(--surface-active)!important;
}

:is(
  [data-ui="community-tabs"] button,
  [data-ui="scenario-list"] button,
  [data-ui="radio-list"] button,
  [data-ui="pronunciation-actions"] button,
  [data-ui="lesson-practice"] button,
  [data-ui="course-row"],
  [data-ui="preference-row"]
){
  background:var(--button-secondary-bg)!important;
  color:var(--button-secondary-text)!important;
  border-color:var(--button-border)!important;
  box-shadow:var(--shadow-sm)!important;
}

:is(
  [data-ui="community-tabs"] button,
  [data-ui="scenario-list"] button,
  [data-ui="radio-list"] button,
  [data-ui="pronunciation-actions"] button,
  [data-ui="lesson-practice"] button,
  [data-ui="course-row"],
  [data-ui="preference-row"]
):not(:disabled):hover{
  background:var(--button-secondary-hover)!important;
  border-color:var(--border-strong)!important;
}

:is(
  [data-ui="community-tabs"] button,
  [data-ui="scenario-list"] button,
  [data-ui="radio-list"] button,
  [data-ui="pronunciation-actions"] button,
  [data-ui="lesson-practice"] button,
  [data-ui="course-row"],
  [data-ui="preference-row"]
):not(:disabled):active{
  background:var(--button-secondary-active)!important;
  box-shadow:none!important;
}

[data-ui="community-tabs"] button[data-active="true"],
[data-ui="scenario-list"] button[data-active="true"],
[data-ui="preference-row"][aria-pressed="true"]{
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
  border-color:var(--accent)!important;
}

[data-ui="appearance-switch"],
[data-ui="preference-toggle"]{
  background:var(--surface-active)!important;
  border-color:var(--border-strong)!important;
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;
}

[data-ui="appearance-switch"][data-checked="true"],
[data-ui="preference-toggle"][data-checked="true"]{
  background:var(--accent)!important;
  border-color:var(--accent-hover)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);
}

:root[data-theme="dark"] [data-ui="topbar"],
:root[data-theme="dark"] [data-ui="dock"]{
  background:color-mix(in srgb,var(--surface) 92%,transparent)!important;
  border-color:var(--border-soft)!important;
}


/* Interaction reliability — decorative layers never own pointer input */
[data-ui="lesson-player"]::before,
[data-ui="lesson-player"]::after,
[data-ui="home-focus-card"]::after,
[data-ui="news-card"]::before,
[data-ui="news-card"]::after{
  pointer-events:none!important;
}

[data-ui="lesson-player"]>[data-ui="native-lesson-video"]{
  position:relative!important;
  z-index:4!important;
  pointer-events:auto!important;
}

[data-ui="native-video-stage"],
[data-ui="native-video-controls"],
[data-ui="native-video-controls"] button{
  position:relative;
  z-index:2;
  pointer-events:auto!important;
  touch-action:manipulation;
}

[data-ui="lesson-standard-card"],
[data-ui="lesson-standard-card"] button,
[data-ui="lesson-standard-card"] input{
  pointer-events:auto;
  touch-action:manipulation;
}