:root,
:root[data-theme="light"]{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel2:#f0f4f8;
  --text:#17202a;
  --muted:#667085;
  --line:#dfe5ec;
  --accent:#406b5a;
  --accent-soft:#e6efe9;
  --danger:#b42318;
  --shadow:0 14px 36px rgba(16,24,40,.08);

  /* Liquid Glass */
  --glass-surface:rgba(255,255,255,.38);
  --glass-inner:rgba(255,255,255,.76);
  --glass-inner-border:rgba(255,255,255,.84);
  --glass-border:rgba(255,255,255,.64);
  --glass-highlight:rgba(255,255,255,.82);
  --glass-shadow:0 9px 26px rgba(35,72,54,.075);
  --glass-inner-shadow:0 3px 10px rgba(35,72,54,.055), inset 0 1px 0 rgba(255,255,255,.52);
  --glass-btn-bg:rgba(255,255,255,.83);
  --glass-btn-border:rgba(87,118,103,.24);
  --glass-btn-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 2px 5px rgba(35,72,54,.075);
  --glass-btn-hover-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 3px 7px rgba(35,72,54,.10);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101613;
    --panel:#18201c;
    --panel2:#202a25;
    --text:#edf3ef;
    --muted:#a9b5ae;
    --line:#314038;
    --accent:#8fc0aa;
    --accent-soft:#24392f;
    --danger:#ffb4ab;
    --shadow:0 18px 48px rgba(0,0,0,.24);

    /* Liquid Glass */
    --glass-surface:rgba(30,45,38,.68);
    --glass-inner:rgba(47,66,56,.82);
    --glass-inner-border:rgba(190,225,204,.22);
    --glass-border:rgba(194,232,207,.19);
    --glass-highlight:rgba(230,255,236,.14);
    --glass-shadow:0 12px 30px rgba(0,0,0,.23);
    --glass-inner-shadow:0 3px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(230,255,236,.09);
    --glass-btn-bg:rgba(58,78,66,.78);
    --glass-btn-border:rgba(190,225,204,.25);
    --glass-btn-shadow:inset 0 1px 0 rgba(230,255,236,.12), 0 2px 6px rgba(0,0,0,.17);
    --glass-btn-hover-shadow:inset 0 1px 0 rgba(230,255,236,.17), 0 3px 8px rgba(0,0,0,.22);
  }
}

:root[data-theme="dark"]{
  --bg:#101613;
  --panel:#18201c;
  --panel2:#202a25;
  --text:#edf3ef;
  --muted:#a9b5ae;
  --line:#314038;
  --accent:#8fc0aa;
  --accent-soft:#24392f;
  --danger:#ffb4ab;
  --shadow:0 18px 48px rgba(0,0,0,.24);

  /* Liquid Glass */
  --glass-surface:rgba(30,45,38,.68);
  --glass-inner:rgba(47,66,56,.82);
  --glass-inner-border:rgba(190,225,204,.22);
  --glass-border:rgba(194,232,207,.19);
  --glass-highlight:rgba(230,255,236,.14);
  --glass-shadow:0 12px 30px rgba(0,0,0,.23);
  --glass-inner-shadow:0 3px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(230,255,236,.09);
  --glass-btn-bg:rgba(58,78,66,.78);
  --glass-btn-border:rgba(190,225,204,.25);
  --glass-btn-shadow:inset 0 1px 0 rgba(230,255,236,.12), 0 2px 6px rgba(0,0,0,.17);
  --glass-btn-hover-shadow:inset 0 1px 0 rgba(230,255,236,.17), 0 3px 8px rgba(0,0,0,.22);
}

/* ---------- Theme ---------- */

.theme-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  width:fit-content;

  padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
}

.theme-switch button{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:6px 9px;
  border-radius:999px;
  font-size:.72rem;
  cursor:pointer;
}

.theme-switch button:hover{
  color:var(--text);
}

.theme-switch button.active{
  background:var(--accent-soft);
  color:var(--accent);

  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 1px 4px rgba(0,0,0,.08);
}

.theme-switch button:active{
  transform:scale(.97);
}

/* ---------- Base ---------- */

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;

  background:
    radial-gradient(ellipse at 12% 8%,rgba(125,195,154,.24),transparent 42%),
    radial-gradient(ellipse at 88% 42%,rgba(132,176,215,.17),transparent 44%),
    radial-gradient(ellipse at 38% 94%,rgba(186,164,211,.12),transparent 42%),
    var(--bg);
  background-attachment:fixed;

  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;
}
button,input{font:inherit}
button{touch-action:manipulation}
.app{
  width:min(1120px,calc(100% - 28px));
  margin:0 auto;
  padding:36px 0 64px;
}
.hero{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:end;
  margin-bottom:22px;
}
.eyebrow{
  color:var(--accent);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
}
h1{
  margin:.35rem 0 .5rem;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1;
  letter-spacing:-.04em;
  
  display:flex;
  align-items:center;
  gap:10px;
}
.title-icon{
  width:.82em;
  height:.82em;

  flex:none;
  object-fit:cover;
  border-radius:50%;
}
.signature{
  margin-top:20px;
  margin-bottom:18px;
  font-size:0.8em;
  color:#8f7f68;
  opacity:0.65;
  letter-spacing:0.05em;
  text-align:center;
}
.hero-description{
  margin-top:8px;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.6;
}
.privacy-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.privacy-pill{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;

  border:1px solid var(--line);
  background:var(--panel);
  border-radius:999px;
  padding:7px 11px;

  font-size:.82rem;
  color:var(--muted);
  white-space:nowrap;
}
.grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:18px;
}

.grid > .card{
  min-width:0;
}

.card{
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-inner{padding:22px}
.card h2{
  margin:0;
  font-size:1.08rem;
  letter-spacing:-.01em;
}
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.86rem;
}
.status-dot{
  width:9px;height:9px;border-radius:50%;
  background:#98a2b3;
  box-shadow:0 0 0 4px color-mix(in srgb,#98a2b3 16%,transparent);
}
.status.recording .status-dot{
  background:#d92d20;
  box-shadow:0 0 0 5px color-mix(in srgb,#d92d20 16%,transparent);
  animation:pulse 1.2s infinite;
}
.status.ready .status-dot{
  background:#12b76a;
  box-shadow:0 0 0 5px color-mix(in srgb,#12b76a 14%,transparent);
}
@keyframes pulse{50%{transform:scale(1.35)}}
.recorder{
  min-height:245px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:16px 0 8px;
}
.timer{
  font-variant-numeric:tabular-nums;
  font-size:clamp(3rem,8vw,5.5rem);
  font-weight:650;
  letter-spacing:-.06em;
}
.hint{
  color:var(--muted);
  font-size:.9rem;
  margin-top:4px;
}
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:22px;
}
.btn{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 16px;
  cursor:pointer;
  background:var(--panel2);
  color:var(--text);
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{
  -webkit-appearance:none;
  appearance:none;

  background:var(--accent);
  border-color:var(--accent);
  color:#fff;

  box-shadow:0 2px 5px rgba(35,72,54,.12);

  -webkit-backdrop-filter:none;
  backdrop-filter:none;

  background-clip:padding-box;
}
.btn.danger{
  color:var(--danger);
}
.file-input{display:none}
.meter{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--panel2);
  border:1px solid var(--line);
  margin-top:18px;
}
.meter > span{
  display:block;
  width:0%;
  height:100%;
  background:var(--accent);
  transition:width .08s linear;
}

.reading-card{
  margin:18px auto 0;
  max-width:620px;
  text-align:left;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.reading-card.active{
  border-color:var(--glass-inner-border);
  background:var(--glass-inner);
}
.reading-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}
.reading-card-title{
  font-size:.78rem;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.02em;
}
.reading-card.active .reading-card-title{color:var(--accent)}
.reading-text{
  margin:0;
  color:var(--text);
  font-size:.98rem;
  line-height:1.8;
}
.mini-btn{
  appearance:none;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--muted);
  border-radius:999px;
  padding:5px 9px;
  font-size:.72rem;
  cursor:pointer;
}
.mini-btn:hover{color:var(--text)}

.audio-preview{
  display:none;
  margin:16px auto 0;
  max-width:620px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
  text-align:left;
}
.audio-preview.show{display:block}
.audio-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.audio-preview-title{
  font-size:.78rem;
  font-weight:700;
  color:var(--muted);
}
.audio-preview audio{
  width:100%;
  display:block;
}

.small-note{
  margin-top:15px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.6;
}
.result-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  padding:32px;
}
.result-empty strong{
  display:block;
  color:var(--text);
  font-size:1.05rem;
  margin-bottom:6px;
}
.results{display:none}
.voice-bars{
  display:grid;
  gap:16px;
}
.axis-row{display:grid;gap:7px}
.axis-label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:.82rem;
}
.axis{
  height:12px;
  border:1px solid var(--line);
  border-radius:999px;
  position:relative;
  background:linear-gradient(90deg,var(--panel2),var(--accent-soft));
}
.axis-marker{
  position:absolute;
  top:50%;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--accent);
  border:4px solid var(--panel);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transform:translate(-50%,-50%);
}
.axis-score{
  font-size:.78rem;
  color:var(--muted);
  text-align:center;
}
.metrics{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.metric{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.metric .k{
  color:var(--muted);
  font-size:.76rem;
  margin-bottom:4px;
}
.metric .v{
  font-size:1.12rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.metric .sub{
  color:var(--muted);
  font-size:.72rem;
  margin-top:3px;
}
.full{grid-column:1/-1}
.section{
  margin-top:18px;
}
.section-title{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:10px;
}
.wave-wrap{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
}
canvas{display:block;width:100%;height:92px}
.footer-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.presentation-card{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
}
.presentation-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}
.presentation-title strong{font-size:.95rem}
.presentation-scale{
  position:relative;
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(90deg,var(--accent-soft),var(--panel),var(--accent-soft));
}
.presentation-scale > span{
  position:absolute;
  top:50%;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--accent);
  border:4px solid var(--panel);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  transform:translate(-50%,-50%);
}
.presentation-labels{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:.72rem;
  margin-top:7px;
}
.commentary{
  margin-top:12px;
  color:var(--text);
  line-height:1.7;
  font-size:.9rem;
}
.commentary small{
  display:block;
  color:var(--muted);
  margin-top:7px;
  line-height:1.6;
}
.impression-card{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
}
.impression-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.impression-head strong{font-size:.95rem}
.impression-head small{
  color:var(--muted);
  font-size:.72rem;
  line-height:1.5;
}
.impression-bars{display:grid;gap:14px}
.impression-note{
  margin-top:12px;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.65;
}

/* ---------- Calibration Card ---------- */

.calibration-shell{
  grid-column:1 / -1;
}

.calibration-layout{
  display:grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.2fr);
  gap:16px;
}

.calibration-profile,
.calibration-progress-panel{
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel2);
}

.calibration-profile-head{
  display:flex;
  align-items:center;
  gap:14px;
}

.calibration-avatar{
  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border-radius:50%;

  background:var(--accent-soft);
  color:var(--accent);

  font-size:24px;
  font-weight:800;
}

.calibration-name{
  font-size:18px;
  font-weight:750;
}

.calibration-vector{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-top:16px;
}

.calibration-vector-item{
  padding:7px 10px;

  border:1px solid var(--line);
  border-radius:999px;

  background:var(--panel);

  font-size:13px;
}

.calibration-badge{
  padding:6px 10px;

  border-radius:999px;

  background:var(--panel2);
  color:var(--muted);

  font-size:12px;
  font-weight:700;
}

.calibration-progress{
  height:9px;

  margin:12px 0 8px;

  overflow:hidden;

  border-radius:999px;
  background:var(--line);
}

.calibration-progress > span{
  display:block;

  width:0;
  height:100%;

  border-radius:inherit;

  background:var(--accent);

  transition:width .25s ease;
}

.calibration-progress-text{
  font-weight:700;
}

.calibration-ready{
  margin-top:12px;
  padding:10px 12px;

  border-radius:12px;

  background:var(--accent-soft);
  color:var(--accent);

  font-weight:700;
}

@media(max-width:760px){

  .calibration-layout{
    grid-template-columns:1fr;
  }

}

#calibrationEmpty .notice{
  text-align:center;
}

#calibrationEmpty .notice > div:last-child{
  display:flex;
  justify-content:center;
}

.calibration-subtitle-note{
  text-align:center;
}

/* ---------- Baseline Audio ---------- */

.calibration-baseline-audio{
  margin-top:14px;
}

.calibration-baseline-audio audio{
  display:block;

  width:100%;

  margin-top:7px;
}


/* ---------- Character Earned ---------- */

.calibration-naming{
  margin-top:16px;
  padding:18px;

  text-align:center;

  border:1px solid var(--line);
  border-radius:18px;

  background:
    var(
      --glass-inner,
      var(--panel2)
    );
}

.calibration-naming[hidden]{
  display:none;
}

.calibration-earned-icon{
  margin-bottom:6px;

  color:var(--accent);

  font-size:28px;
}

.calibration-naming strong{
  display:block;

  font-size:1rem;
}

.calibration-naming p{
  max-width:560px;

  margin:7px auto 14px;

  color:var(--muted);

  font-size:.82rem;
  line-height:1.65;
}

.character-name-row{
  display:flex;

  max-width:520px;

  margin:0 auto;

  gap:8px;
}

.character-name-input{
  min-width:0;
  flex:1;

  padding:10px 14px;

  border:1px solid var(--line);
  border-radius:999px;

  background:var(--panel);
  color:var(--text);

  outline:none;
}

.character-name-input:focus{
  border-color:var(--accent);
}

/* ---------- Character Library ---------- */

.character-library-block{
  margin-top:22px;
  padding-top:10px;

  border-top:1px solid
    color-mix(
      in srgb,
      var(--glass-inner-border) 70%,
      transparent
    );
}


/* Details */

.character-library-details{
  width:100%;

  border:0;
  border-radius:0;

  background:transparent;
  box-shadow:none;
}


/* Header */

.character-library-details > summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;

  align-items:center;

  gap:10px;

  padding:12px 4px;

  font-weight:700;
}

.character-library-details > summary::after{
  justify-self:end;

  margin-left:2px;
}


/* Count */

.character-library-count{
  justify-self:end;

  color:var(--muted);

  font-size:.78rem;
  font-weight:500;

  font-variant-numeric:tabular-nums;

  white-space:nowrap;
}


/* Body */

.character-library-body{
  padding:6px 4px 4px;
}

.character-library-list{
  display:grid;

  gap:10px;
}

.character-library-empty{
  padding:24px 14px;

  text-align:center;

  color:var(--muted);

  font-size:.84rem;
}


/* Character Item */

.character-item{
  padding:14px 16px;

  border:1px solid
    var(
      --glass-inner-border,
      var(--line)
    );

  border-radius:16px;

  background:
    var(
      --glass-inner,
      var(--panel2)
    );
}

.character-item-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;
}

.character-item-name{
  font-size:.95rem;
  font-weight:750;
}

.character-item-meta{
  margin-top:4px;

  color:var(--muted);

  font-size:.72rem;
}

.character-item audio{
  width:100%;

  margin-top:10px;
}

.character-item-vector{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-top:10px;
}

.character-item-tag{
  padding:5px 8px;

  border:1px solid var(--line);
  border-radius:999px;

  background:var(--panel);

  color:var(--muted);

  font-size:.7rem;
}


/* Mobile */

@media(max-width:520px){

  .character-name-row{
    flex-direction:column;
  }

}

/* ---------- Header Switchs ---------- */

.header-switches{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;

  flex-wrap:wrap;
}

/* 避免既有 theme-switch 樣式把它撐滿 */
.header-switches .theme-switch{
  width:auto;
  margin:0;
  flex:0 0 auto;
}

/* 手機版仍然盡量維持同一排 */
@media (max-width:720px){

  .header-switches{
    width:100%;

    justify-content:flex-start;

    gap:8px;

    overflow-x:auto;

    flex-wrap:nowrap;

    scrollbar-width:none;
  }


  .header-switches::-webkit-scrollbar{
    display:none;
  }


  .header-switches .theme-switch{
    flex:0 0 auto;
  }

}

/* ---------- Summary Card ---------- */

.quick-summary-card{
  display:none;
  position:relative;

  margin-top:18px;
  padding:16px;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:22px;

  background:var(--accent-soft);
  text-align:left;
}

.quick-summary-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}

.quick-summary-heading{
  min-width:0;
}

.quick-summary-brand{
  color:var(--muted);
  font-size:.66rem;
  font-weight:750;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:3px;
}

.share-summary-btn{
  flex:none;
  background:var(--panel);
}

.share-summary-btn:disabled{
  opacity:.5;
}
.quick-summary-card.show{display:block}
.quick-summary-kicker{
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.quick-summary-text{
  margin:0;
  font-size:.95rem;
  line-height:1.75;
  white-space:pre-line;
}
.quick-summary-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:11px;
}
.quick-summary-tag{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 9px;
  background:var(--panel);
  color:var(--muted);
  font-size:.72rem;
}

/* ---------- Share Preview Wave ---------- */

.share-preview-wave-wrap{
  margin-top:14px;
  overflow:hidden;

  border-radius:16px;
}

#sharePreviewWaveCanvas{
  display:block;

  width:100%;
  height:118px;

  border-radius:16px;
}

/* ---------- Gradient Basis ---------- */

.share-gradient-basis-row{
  margin-top:10px;
  margin-bottom:20px;
  text-align:center;
}

.share-gradient-basis-title{
  margin-bottom:7px;

  color:var(--muted);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
}

.share-gradient-basis{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.gradient-basis-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;

  width:fit-content;

  padding:5px 9px;

  border:1px solid var(--line);
  border-radius:999px;

  background:color-mix(
    in srgb,
    var(--panel) 86%,
    transparent
  );

  color:var(--muted);

  font-size:.7rem;
}

.gradient-basis-swatch{
  width:11px;
  height:11px;

  flex:none;

  border:1px solid
    color-mix(
      in srgb,
      var(--text) 18%,
      transparent
    );

  border-radius:3px;
}

.gradient-basis-hex{
  color:var(--text);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    monospace;

  font-size:.67rem;
}

.quick-summary-footer{
  margin-top:14px;
  padding-top:11px;

  border-top:1px solid
    color-mix(
      in srgb,
      var(--line) 76%,
      transparent
    );

  color:var(--muted);
  font-size:.68rem;
  line-height:1.5;
}

/* ---------- Quality ---------- */

.analysis-quality{margin-top:12px;display:flex;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.analysis-quality-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:#98a2b3}
.analysis-quality.good .analysis-quality-dot{background:#12b76a}
.analysis-quality.usable .analysis-quality-dot{background:#f79009}
.analysis-quality.low .analysis-quality-dot,.analysis-quality.insufficient .analysis-quality-dot{background:#d92d20}
.analysis-quality-title{font-size:.8rem;font-weight:750;color:var(--text)}
.analysis-quality-note{margin-top:2px;font-size:.72rem;color:var(--muted);line-height:1.55}
.quality-warning{margin-bottom:10px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:.75rem;line-height:1.6;background:color-mix(in srgb,var(--panel) 80%,transparent)}

/* ---------- Voice Gain ---------- */

.analysis-processing{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  margin-top:12px;
  padding:14px 16px;

  border:1px solid var(--line);
  border-radius:16px;

  background:var(--panel);
}

.analysis-processing[hidden]{
  display:none;
}

.analysis-processing-text{
  min-width:0;
}

.analysis-processing-title{
  font-weight:700;
  font-size:.9rem;
}

.analysis-processing-note{
  margin-top:4px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.5;
}

/* Toggle */

.toggle-switch{
  position:relative;
  flex:0 0 auto;

  width:46px;
  height:26px;
}

.toggle-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.toggle-slider{
  position:absolute;
  inset:0;

  cursor:pointer;

  background:var(--line);
  border-radius:999px;

  transition:.2s;
}

.toggle-slider::before{
  content:"";

  position:absolute;
  width:20px;
  height:20px;

  left:3px;
  top:3px;

  border-radius:50%;
  background:var(--panel);

  box-shadow:0 1px 4px rgba(0,0,0,.18);

  transition:.2s;
}

.toggle-switch input:checked + .toggle-slider{
  background:var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before{
  transform:translateX(20px);
}

.toggle-switch input:disabled + .toggle-slider{
  opacity:.45;
  cursor:not-allowed;
}

/* ---------- History ---------- */

.history-section{
  margin-top:20px;
}
.history-details{
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel);
  overflow:hidden;
}
.history-details > summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  user-select:none;
}
.history-details > summary::-webkit-details-marker{display:none}
.history-summary-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.history-title{
  font-weight:700;
  font-size:.95rem;
}
.history-count{
  color:var(--muted);
  font-size:.78rem;
}
.history-body{
  border-top:1px solid var(--line);
  padding:14px;
}
.history-body > .notice{
  margin-top:0;
  margin-bottom:12px;
  padding:12px 14px;
}
.history-body > .notice .history-toolbar{
  margin-bottom:0;
}
.history-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.history-storage{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.72rem;
}
.history-audio{
  width:100%;
  margin-top:10px;
}
.history-audio-note{
  margin-top:6px;
  color:var(--muted);
  font-size:.7rem;
}

.history-help{
  color:var(--muted);
  font-size:.76rem;
  line-height:1.5;
}
.history-list{
  display:grid;
  gap:10px;
}
.history-empty{
  padding:24px 14px;
  text-align:center;
  color:var(--muted);
  font-size:.86rem;
}
.history-item{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
  overflow:hidden;
}
.history-item > summary{
  list-style:none;
  cursor:pointer;
  padding:13px 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.history-item > summary::-webkit-details-marker{display:none}
.history-item-main{
  min-width:0;
}
.history-item-title{
  font-size:.9rem;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.history-item-meta{
  margin-top:4px;
  color:var(--muted);
  font-size:.72rem;
  display:flex;
  flex-wrap:wrap;
  gap:5px 10px;
}
.history-badge{
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  background:var(--panel);
  color:var(--accent);
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}
.history-item-content{
  border-top:1px solid var(--line);
  padding:13px 14px;
}
.history-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.history-mini{
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
}
.history-mini .k{
  font-size:.68rem;
  color:var(--muted);
}
.history-mini .v{
  margin-top:3px;
  font-size:.88rem;
  font-weight:700;
}
.history-comment{
  margin-top:10px;
  color:var(--text);
  font-size:.8rem;
  line-height:1.65;
}
.history-actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.btn.small{
  padding:7px 11px;
  font-size:.76rem;
}
@media (max-width:520px){
  .history-mini-grid{grid-template-columns:1fr 1fr}
  .history-item > summary{grid-template-columns:minmax(0,1fr)}
  .history-badge{justify-self:start}
}

.notice{
  margin-top:18px;
  padding:14px 16px;
  border:1px dashed var(--line);
  border-radius:16px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.65;
}

/* ---------- Unified details ---------- */

.app-details{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
  overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}
.app-details[open]{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
}
.app-details > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  min-width:0;
  color:var(--text);
  transition:background .18s ease,color .18s ease;
}
.app-details > summary::-webkit-details-marker{display:none}
.app-details > summary::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .18s ease,border-color .18s ease;
  flex:none;
}
.app-details[open] > summary::after{transform:rotate(225deg)}
.app-details > summary:hover{
  background:color-mix(in srgb,var(--accent-soft) 58%,transparent);
}
.app-details > summary:hover::after{border-color:var(--accent)}

.history-chevron{display:none}

.reading-details{
  width:100%;
  background:transparent;
  border:none;
  border-radius:12px;
  overflow:visible;
}
.reading-details > summary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
}
.reading-details[open] > summary{color:var(--accent)}
.reading-details-content{
  padding:12px 4px 2px;
  text-align:center;
}

.history-details.app-details{
  border-radius:20px;
  background:var(--panel);
}
.history-details.app-details > summary{
  display:flex;
  align-items:center;
  gap:14px;
}
.history-details.app-details .history-summary-main{flex:1}

.history-item.app-details{
  border-radius:16px;
  background:var(--panel2);
}
.history-item.app-details > summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
}

/* ---------- Link Cards ---------- */

.link-card{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:0;

  margin-top:18px;
  padding:11px 14px;

  border:1px solid var(--glass-border);
  border-radius:16px;

  background:var(--glass-surface);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 5px 18px rgba(40,75,57,.055);

  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
}

.link-card-scroll{
  display:flex;
  gap:8px;

  width:fit-content;
  max-width:100%;

  margin-inline:auto;
  padding:8px 8px 12px;

  overflow-x:auto;
  overflow-y:hidden;

  box-sizing:border-box;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.link-card-title{
  flex:none;
  font-size:.72rem;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}

.link-card-scroll::-webkit-scrollbar{
  display:none;
}

.link-card a{
  flex:none;

  padding:8px 12px;
  border-radius:999px;

  background:var(--panel2);
  color:var(--muted);

  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 1px 3px rgba(40,75,57,.06);

  font-size:.72rem;
  font-weight:650;
  text-decoration:none;
  white-space:nowrap;
}

.link-card a:hover{
  color:var(--accent);
  background:var(--accent-soft);
}

.link-separator{
  display:inline-flex;
  align-items:center;

  flex:none;

  color:var(--muted);
  opacity:.4;

  font-size:.72rem;
  font-weight:400;
}

/* ---------- Modal Window ---------- */

.info-modal{
  position:fixed;
  inset:0;
  z-index:1000;

  display:none;
  place-items:center;

  padding:20px;
}

.info-modal.show{
  display:grid;
}

.info-modal-backdrop{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.info-modal-card{
  position:relative;
  z-index:1;

  width:min(520px,100%);
  max-height:min(80vh,700px);
  overflow:auto;

  padding:24px;

  border:1px solid var(--line);
  border-radius:22px;

  background:var(--panel);
  color:var(--text);

  box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.info-modal-card h3{
  margin:0 40px 14px 0;
  font-size:1.1rem;
}

.info-modal-card p{
  margin:0;
  line-height:1.75;
  color:var(--muted);
}

.info-modal-close{
  position:absolute;
  top:14px;
  right:14px;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:50%;

  background:var(--panel2);
  color:var(--muted);

  font-size:1.2rem;
  cursor:pointer;
}

#infoModalContent{
  white-space:pre-line;
  line-height:1.75;
}

/* ---------- Install Hint ---------- */

.install-hint{
  position:fixed;

  left:50%;
  bottom:18px;

  transform:translateX(-50%);

  z-index:1000;

  width:min(
    calc(100% - 24px),
    460px
  );

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:12px 14px;

  border:1px solid var(--line);
  border-radius:18px;

  background:var(--panel);
  color:var(--text);

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.12);
}

.install-hint[hidden]{
  display:none;
}

.install-hint-text{
  display:flex;
  flex-direction:column;
  gap:3px;

  min-width:0;
}

.install-hint-text strong{
  font-size:.86rem;
}

.install-hint-text span{
  font-size:.74rem;
  color:var(--muted);
  line-height:1.45;
}

.install-hint-actions{
  display:flex;
  align-items:center;
  gap:6px;

  flex:none;
}

.install-hint-close{
  width:32px;
  height:32px;

  border:0;
  border-radius:50%;

  background:transparent;
  color:var(--muted);

  font-size:1.2rem;
  cursor:pointer;
}

/* ---------- Screen Size ---------- */

@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .theme-switch{justify-self:start;}
  .privacy-pill{justify-self:start}
  .grid{grid-template-columns:1fr}
}

@media (max-width:520px){
  .app{width:min(100% - 18px,1120px);padding-top:22px}
  .card{border-radius:20px}
  .card-inner{padding:18px}
  .metrics{grid-template-columns:1fr 1fr}
  .btn{padding:10px 14px}
  .history-item.app-details > summary{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .history-item.app-details > summary::after{
    grid-column:2;
    grid-row:1;
    justify-self:end;
  }
  .history-item.app-details .history-badge{
    grid-column:1/-1;
    justify-self:start;
  }

  .link-card-scroll > :first-child{
    margin-left:auto;
  }
    
  .link-card-scroll > :last-child{
    margin-right:auto;
  }
}

/* ==========================================================
   Liquid Glass | visual layer
   Base component geometry stays above; visual effects live here.
   ========================================================== */

/* Outer glass surfaces */
.card,
.history-details,
.info-modal-card,
.install-hint{
  background:var(--glass-surface);
  border-color:var(--glass-border);

  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow);

  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
}

/* Inner glass surfaces */
.metric,
.reading-card,
.audio-preview,
.presentation-card,
.impression-card,
.quick-summary-card,
.wave-wrap,
.analysis-processing,
.history-item,
.history-mini,
.app-details:not(.reading-details):not(.character-library-details),
.privacy-pill,
.notice{
  background:var(--glass-inner);
  border-color:var(--glass-inner-border);
  box-shadow:var(--glass-inner-shadow);
}

/* Reading prompt / preview should stay simple, without nested blur. */
.reading-card,
.audio-preview{
  margin:16px auto 0;
  max-width:620px;
  padding:12px 14px;

  border:1px solid var(--glass-inner-border);
  border-radius:16px;

  text-align:left;

  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Details nested inside an existing card should not create a second glass shell. */
.reading-details,
.reading-details[open],
.character-library-details,
.character-library-details[open]{
  background:transparent;
  border:0;
  box-shadow:none;

  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Glass controls */
.btn:not(.primary),
.mini-btn,
.link-card a,
.theme-switch,
.quick-summary-tag,
.history-badge,
.gradient-basis-tag{
  background:var(--glass-btn-bg);
  border-color:var(--glass-btn-border);
  box-shadow:var(--glass-btn-shadow);

  -webkit-backdrop-filter:blur(12px) saturate(145%);
  backdrop-filter:blur(12px) saturate(145%);
}

.btn,
.mini-btn,
.link-card a{
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.primary{
    color:#101613;
  }
}

:root[data-theme="dark"] .btn.primary{
  color:#101613;
}

/* Interaction */
@media (hover:hover){
  .btn:hover:not(:disabled):not(.primary),
  .mini-btn:hover,
  .link-card a:hover{
    box-shadow:var(--glass-btn-hover-shadow);
  }

  .btn.primary:hover:not(:disabled){
    box-shadow:0 3px 7px rgba(35,72,54,.16);
  }
}

.btn:active:not(:disabled):not(.primary),
.mini-btn:active,
.link-card a:active{
  transform:scale(.98);
  box-shadow:var(--glass-btn-shadow);
}

.btn.primary:active:not(:disabled){
  transform:scale(.98);
  box-shadow:0 1px 3px rgba(35,72,54,.12);
}

@media (hover:hover){
  .link-card a:hover{
    box-shadow:var(--glass-btn-hover-shadow);
  }
}

/* Motion / compatibility */
@media (prefers-reduced-motion:reduce){
  .btn,
  .mini-btn,
  .link-card a,
  .theme-switch button{
    transition:none;
  }
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card,
  .history-details,
  .link-card,
  .info-modal-card,
  .install-hint{
    background:var(--panel);
  }

  .metric,
  .reading-card,
  .audio-preview,
  .presentation-card,
  .impression-card,
  .quick-summary-card,
  .wave-wrap,
  .analysis-processing,
  .history-item,
  .history-mini,
  .app-details:not(.reading-details):not(.character-library-details),
  .privacy-pill,
  .notice,
  .calibration-profile,
  .calibration-progress-panel,
  .calibration-naming,
  .character-item{
    background:var(--panel2);
  }
}