/*
 * Copyright 2026 学记宝 / heanbian
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root{
    --brand:#2f9a68;
    --brand-strong:#248556;
    --brand-soft:#e5f5ec;
    --bg:#eef6f1;
    --bg-2:#f7faf8;
    --surface:#ffffff;
    --ink:#1f2a24;
    --muted:#5f6f66;
    --line:#d7e5dc;
    --ring:#cfe0d6;
    --safe:#2f9a68;
    --warn:#c9862d;
    --warn-soft:#fff6e8;
    --danger:#d2554a;
    --danger-soft:#ffefed;
    --radius-sm:12px;
    --radius:14px;
    --space:8px;
    --space-2:12px;
    --space-3:16px;
    --space-4:20px;
    --fs-xs:0.75rem;
    --fs-sm:0.875rem;
    --fs-base:1rem;
    --fs-lg:1.1875rem;
    --lh-body:1.55;
    --font:"Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
    --control-h:52px;
    --safe-top:env(safe-area-inset-top, 0px);
    --safe-bottom:env(safe-area-inset-bottom, 0px);
    --safe-left:env(safe-area-inset-left, 0px);
    --safe-right:env(safe-area-inset-right, 0px);
    color-scheme:light;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{
    height:100%;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    margin:0;
    min-height:100%;
    min-height:100dvh;
    font-family:var(--font);
    font-size:var(--fs-base);
    line-height:var(--lh-body);
    color:var(--ink);
    background:
      radial-gradient(900px 420px at 50% -8%, #dff0e6 0%, transparent 60%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 52%, #f4f8f5 100%);
    transition:background-color .35s ease;
    overscroll-behavior:none;
  }
  body.warn{
    background:
      radial-gradient(900px 420px at 50% -8%, #ffe9c8 0%, transparent 60%),
      linear-gradient(180deg, var(--warn-soft) 0%, #fffaf2 100%);
  }
  body.danger{
    background:
      radial-gradient(900px 420px at 50% -8%, #ffd7d2 0%, transparent 60%),
      linear-gradient(180deg, var(--danger-soft) 0%, #fff7f6 100%);
  }

  /* —— 手机端（默认）—— */
  .app{
    --app-pad-x:20px;
    --app-pad-y:18px;
    --dial-size:min(72vw, 280px);
    --row-h:40px;
    width:100%;
    max-width:400px;
    margin:0 auto;
    min-height:100dvh;
    min-height:100svh;
    padding:
      calc(var(--safe-top) + var(--app-pad-y))
      calc(var(--safe-right) + var(--app-pad-x))
      calc(var(--safe-bottom) + var(--app-pad-y))
      calc(var(--safe-left) + var(--app-pad-x));
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:space-between;
    gap:20px;
  }

  .topbar{
    --topbar-h:36px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:var(--space-2);
    width:100%;
    min-height:var(--topbar-h);
    flex-shrink:0;
  }
  .brand{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin:0;
    min-width:0;
    height:var(--topbar-h);
    line-height:1;
  }
  .brand img{
    height:22px;
    width:auto;
    aspect-ratio:108 / 32;
    display:block;
    flex-shrink:0;
  }
  .brand h1{
    margin:0;
    padding:0;
    height:var(--topbar-h);
    font-size:var(--fs-lg);
    font-weight:600;
    letter-spacing:0.01em;
    color:var(--ink);
    line-height:var(--topbar-h);
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .top-tools{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:4px;
    height:var(--topbar-h);
    min-width:0;
  }
  .lang,
  .ambient{
    position:relative;
    margin:0;
    display:flex;
    align-items:center;
    height:var(--topbar-h);
  }
  .icon-btn{
    display:inline-grid;
    place-items:center;
    width:var(--topbar-h);
    height:var(--topbar-h);
    min-height:var(--topbar-h);
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:var(--muted);
    flex-shrink:0;
    line-height:0;
  }
  .icon-btn svg{
    display:block;
  }
  .icon-btn[aria-expanded="true"],
  .icon-btn.is-on{
    color:var(--brand-strong);
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .lang-trigger{
    height:var(--topbar-h);
    min-height:var(--topbar-h);
    max-width:42vw;
    padding:0 2px 0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--muted);
    white-space:nowrap;
    line-height:1;
  }
  .lang-trigger[aria-expanded="true"]{
    color:var(--brand-strong);
  }
  .lang-trigger span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1;
  }
  .lang-trigger .lang-caret{
    display:block;
    flex-shrink:0;
    color:var(--muted);
    transition:transform .15s ease;
  }
  .lang-trigger[aria-expanded="true"] .lang-caret{
    transform:rotate(180deg);
    color:var(--brand-strong);
  }
  .menu-panel{
    position:absolute;
    top:calc(100% + 6px);
    inset-inline-end:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:7.5rem;
    max-height:min(70vh, 420px);
    overflow:auto;
    overscroll-behavior:contain;
    padding:4px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    box-shadow:0 8px 24px rgba(31, 42, 36, 0.1);
  }
  .menu-panel[hidden]{display:none}
  .menu-panel button{
    width:100%;
    height:36px;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:start;
    padding:0 10px;
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--muted);
    background:transparent;
    border:none;
    border-radius:8px;
    box-shadow:none;
  }
  .menu-panel button.active{
    color:var(--brand-strong);
    background:var(--brand-soft);
  }
  .visually-hidden{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
  }
  /* 藏文：优先系统 / 本机藏文字体 */
  html[lang="bo"] body,
  html[lang="bo"] button,
  html[lang="bo"] select{
    font-family:"Noto Sans Tibetan","Kailasa","Microsoft Himalaya","Jomolhari","Noto Sans SC",system-ui,sans-serif;
    line-height:1.7;
  }
  /* 阿拉伯文：系统阿拉伯字体 + RTL 逻辑属性 */
  html[lang="ar"] body,
  html[lang="ar"] button,
  html[lang="ar"] select{
    font-family:"Noto Sans Arabic","Segoe UI","Tahoma","Noto Sans SC",system-ui,sans-serif;
    line-height:1.65;
  }
  html[dir="rtl"] .topbar{
    grid-template-columns:auto 1fr;
  }
  html[dir="rtl"] .brand{
    order:2;
    justify-self:end;
    justify-content:flex-end;
  }
  html[dir="rtl"] .top-tools{
    order:1;
    justify-self:start;
  }
  html[dir="rtl"] .lang-trigger{
    padding:0 6px 0 2px;
  }
  html[dir="rtl"] .scene-list button,
  html[dir="rtl"] .menu-panel button{
    text-align:right;
  }

  .stage{
    flex:1 1 auto;
    width:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:4px 0;
  }
  .dial{
    position:relative;
    width:var(--dial-size);
    max-width:100%;
    aspect-ratio:1;
    display:grid;
    place-items:center;
  }
  .dial > svg{
    position:absolute;inset:0;width:100%;height:100%;
    transform:rotate(-90deg);
  }
  .track{fill:none;stroke:var(--ring);stroke-width:8.5}
  .progress{
    fill:none;
    stroke:var(--safe);
    stroke-width:8.5;
    stroke-linecap:round;
    transition:stroke .35s ease;
  }
  .time{
    position:relative;
    z-index:1;
    width:min(64%, 220px);
    aspect-ratio:144 / 48;
    line-height:0;
    pointer-events:none;
    color:var(--ink);
    transition:color .3s ease;
  }
  body.warn .time{color:var(--warn)}
  body.danger .time{color:var(--danger)}
  .time svg{
    display:block;
    width:100%;
    height:auto;
  }
  .progress.is-warn{stroke:var(--warn)}
  .progress.is-danger{stroke:var(--danger)}
  .progress.is-safe{stroke:var(--safe)}

  /* 状态区：无卡片，居中短文案 + 一行统计 */
  .cue{
    width:100%;
    max-width:18rem;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
  }
  .status{
    margin:0;
    max-width:16em;
    font-size:var(--fs-sm);
    font-weight:500;
    color:var(--muted);
    line-height:1.5;
    transition:color .3s ease;
  }
  .cue[data-tone="warn"] .status{color:var(--warn)}
  .cue[data-tone="danger"] .status{color:var(--danger); font-weight:600}
  .cue-meta{
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px 8px;
    min-height:1.2em;
    font-size:var(--fs-xs);
    color:var(--muted);
    letter-spacing:0.01em;
  }
  .cue-meta:empty{display:none}
  .cue-meta-label{
    font-weight:500;
  }
  .cue-meta-vals{
    display:inline-flex;
    align-items:center;
    gap:0;
    font-weight:600;
    color:var(--ink);
  }
  .cue-meta-vals strong{
    font-weight:700;
    color:var(--brand-strong);
    font-variant-numeric:tabular-nums;
  }
  .cue[data-tone="warn"] .cue-meta-vals strong{color:var(--warn)}
  .cue[data-tone="danger"] .cue-meta-vals strong{color:var(--danger)}
  .cue-meta-sep{color:var(--muted); font-weight:500}
  .cue-meta.is-empty{
    color:var(--muted);
    font-weight:500;
  }

  .actions{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex-shrink:0;
  }
  .controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  button{
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    height:var(--control-h);
    min-height:44px;
    padding:0 var(--space-3);
    border-radius:var(--radius);
    border:1px solid transparent;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  button:active:not(:disabled){transform:scale(0.98)}
  button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
  button:focus-visible{
    outline:2px solid var(--brand);
    outline-offset:3px;
  }
  .primary{
    background:var(--brand);
    color:#fff;
    box-shadow:none;
  }
  .primary:active:not(:disabled){
    background:var(--brand-strong);
  }
  .ghost{
    background:#e8ecea;
    color:#6b7570;
    border-color:#d5dbd7;
  }
  .ghost:active:not(:disabled){
    background:#dde3e0;
    border-color:#c8d0cc;
    color:#4a554f;
  }

  /* 时长 + 场景：同一设置组，等高对齐 */
  .setup{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .presets{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
    padding:0;
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .presets button{
    height:var(--row-h);
    min-height:var(--row-h);
    min-width:0;
    padding:0 6px;
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--muted);
    background:var(--surface);
    border:none;
    border-right:1px solid var(--line);
    border-radius:0;
    box-shadow:none;
    line-height:1.2;
  }
  .presets button:last-child{border-right:none}
  .presets button:active:not(:disabled):not(.active){
    color:var(--ink);
    background:color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
  }
  .presets button.active{
    background:var(--brand-soft);
    color:var(--brand-strong);
    box-shadow:none;
  }
  .presets button:disabled{opacity:.4}

  .scene-select{
    position:relative;
    width:100%;
  }
  .scene-trigger{
    width:100%;
    height:var(--row-h);
    min-height:var(--row-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 14px;
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:none;
    line-height:1;
  }
  .scene-trigger .scene-caret{
    display:block;
    flex-shrink:0;
    color:var(--muted);
    transition:transform .15s ease;
  }
  .scene-trigger[aria-expanded="true"] .scene-caret{
    transform:rotate(180deg);
    color:var(--brand-strong);
  }
  .scene-trigger:disabled{
    opacity:.4;
  }
  .scene-trigger[aria-expanded="true"]{
    border-color:color-mix(in srgb, var(--brand) 35%, var(--line));
    color:var(--brand-strong);
  }
  .scene-trigger-label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .scene-trigger.is-placeholder .scene-trigger-label{
    color:var(--muted);
  }
  .scene-list{
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 6px);
    z-index:30;
    margin:0;
    padding:6px 4px;
    list-style:none;
    max-height:min(52vh, 360px);
    overflow:auto;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 10px 28px rgba(31, 42, 36, 0.12);
    overscroll-behavior:contain;
  }
  .scene-list[hidden]{display:none}
  .scene-list > li{margin:0}
  .scene-group{
    padding:0 2px 4px;
  }
  .scene-group + .scene-group{
    margin-top:2px;
  }
  .scene-group-label{
    position:sticky;
    top:0;
    z-index:1;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 2px;
    padding:7px 10px;
    font-size:0.6875rem;
    font-weight:700;
    letter-spacing:0.08em;
    line-height:1.2;
    color:var(--brand-strong);
    background:color-mix(in srgb, var(--brand-soft) 72%, var(--surface));
    border:1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
    border-radius:8px;
    user-select:none;
    pointer-events:none;
  }
  .scene-group-label::before{
    content:"";
    width:3px;
    height:0.85em;
    border-radius:2px;
    background:var(--brand);
    flex-shrink:0;
  }
  .scene-group-list{
    margin:0;
    padding:0 2px;
    list-style:none;
  }
  .scene-group-list li{margin:0}
  .scene-list button{
    width:100%;
    height:38px;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 12px;
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--muted);
    background:transparent;
    border:none;
    border-radius:calc(var(--radius-sm) - 1px);
    box-shadow:none;
    text-align:left;
  }
  .scene-list button.active{
    color:var(--brand-strong);
    background:var(--brand-soft);
  }
  .scene-list button:active:not(.active){
    color:var(--ink);
    background:color-mix(in srgb, var(--brand-soft) 55%, transparent);
  }

  .footnote{
    margin:0;
    flex-shrink:0;
    font-size:var(--fs-xs);
    color:var(--muted);
    text-align:center;
    line-height:1.65;
  }
  .footnote a{
    color:var(--brand-strong);
    text-decoration:none;
  }
  .beian{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px 16px;
    margin:4px 0 0;
    flex-shrink:0;
    font-size:0.75rem;
    color:var(--muted);
    text-align:center;
    line-height:1.5;
  }
  .beian a{
    display:inline-flex;
    align-items:center;
    gap:4px;
    height:17px;
    color:var(--muted);
    text-decoration:none;
    line-height:17px;
  }
  .beian img,
  .beian-icon{
    display:block;
    width:16px;
    height:17px;
    max-width:none;
    flex:0 0 16px;
    object-fit:contain;
  }

  /* 平板竖屏 */
  @media (min-width: 600px){
    .app{
      --app-pad-x:24px;
      --app-pad-y:28px;
      --dial-size:min(62vw, 320px);
      max-width:480px;
      gap:var(--space-4);
    }
    .brand h1{font-size:1.25rem}
    .brand img{height:24px}
    .topbar{grid-template-columns:1fr auto}
    .time{width:min(58%, 220px)}
    .status{font-size:var(--fs-base)}
    .cue{max-width:20rem}
  }

  /* PC / 大屏：居中单栏，更大表盘与悬停态 */
  @media (min-width: 900px){
    body{
      background:
        radial-gradient(1100px 520px at 50% -12%, #dff0e6 0%, transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, #f4f8f5 100%);
    }
    .app{
      --app-pad-x:32px;
      --app-pad-y:40px;
      --dial-size:min(42vh, 360px);
      --control-h:48px;
      max-width:520px;
      justify-content:center;
      gap:28px;
    }
    .stage{flex:0 0 auto; padding:8px 0 4px}
    .brand{gap:12px}
    .brand h1{font-size:1.35rem}
    .brand img{height:26px}
    .lang-trigger{font-size:0.9375rem}
    .menu-panel button:hover:not(.active){
      color:var(--ink);
      background:color-mix(in srgb, var(--brand-soft) 70%, transparent);
    }
    .lang-trigger:hover{
      color:var(--brand-strong);
    }
    .time{width:min(56%, 240px)}
    .status{font-size:var(--fs-base)}
    .cue{max-width:22rem}
    .footnote{font-size:0.8125rem; max-width:36em; margin-inline:auto}
    .app{--row-h:38px}

    button:active:not(:disabled){transform:translateY(1px) scale(1)}
    .primary:hover:not(:disabled){
      background:var(--brand-strong);
    }
    .ghost:hover:not(:disabled){
      background:#dde3e0;
      border-color:#c8d0cc;
      color:#4a554f;
    }
    .presets button:hover:not(:disabled):not(.active){
      color:var(--ink);
      background:color-mix(in srgb, var(--surface) 88%, transparent);
    }
    .scene-trigger:hover:not(:disabled){
      border-color:color-mix(in srgb, var(--brand) 28%, var(--line));
      color:var(--brand-strong);
    }
    .scene-list button:hover:not(.active){
      color:var(--ink);
      background:color-mix(in srgb, var(--brand-soft) 55%, transparent);
    }
    .icon-btn:hover{
      color:var(--brand-strong);
      background:transparent;
    }
    .footnote a:hover{text-decoration:underline}
    .beian a:hover{text-decoration:underline; color:var(--brand-strong)}
  }

  /* 矮屏横屏手机：压缩纵向 */
  @media (orientation: landscape) and (max-height: 480px){
    .app{
      --dial-size:min(42vh, 200px);
      --app-pad-y:8px;
      justify-content:flex-start;
      gap:var(--space-2);
      max-width:640px;
    }
    .brand h1{font-size:1rem}
    .brand img{height:20px}
    .stage{padding:0; gap:var(--space-2); flex:0 0 auto}
    .time{width:min(58%, 160px)}
    .cue,
    .setup,
    .footnote{display:none}
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation:none!important;
      transition:none!important;
    }
  }