:root{
    --ink:#15120f;
    --ink-2:#1c1712;
    --parchment:#f2e8d3;
    --parchment-dim:#e6d9bb;
    --parchment-faint:#a89a7c;
    --amber:#e0a545;
    --amber-soft:rgba(224,165,69,0.18);
    --ember:#c9713a;
    --danger:#c2564a;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:radial-gradient(ellipse at top, var(--ink-2), var(--ink) 70%);
    color:var(--parchment);
    font-family:'Literata', serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    padding-bottom:64px;
  }
  .wrap{max-width:640px;margin:0 auto;padding:28px 20px 40px;}

  header{text-align:center;margin-bottom:28px;}
  header h1{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:2rem;
    letter-spacing:0.02em;
    margin:0 0 4px;
    color:var(--parchment);
  }
  header .kanji{color:var(--amber);font-size:1.1em;margin-right:8px;}
  header p{
    font-family:'Space Grotesk', sans-serif;
    color:var(--parchment-faint);
    font-size:0.85rem;
    margin:0;
  }

  /* ── Access gate ─────────────────────────────────────────── */
  #gate{
    background:var(--ink-2);
    border:1px solid rgba(224,165,69,0.25);
    border-radius:16px;
    padding:28px 24px;
    text-align:center;
  }
  #gate p{font-family:'Space Grotesk',sans-serif;color:var(--parchment-faint);font-size:0.9rem;}
  #gate input{
    width:100%;
    background:var(--ink);
    border:1px solid var(--parchment-faint);
    color:var(--parchment);
    font-family:'Space Grotesk',sans-serif;
    padding:12px 14px;
    border-radius:10px;
    font-size:1rem;
    margin:12px 0;
    text-align:center;
  }
  #gate .err{color:var(--danger);font-size:0.85rem;min-height:1.2em;}
  #gateDisclaimer{
    font-family:'Space Grotesk',sans-serif;font-size:0.68rem;line-height:1.45;
    color:var(--parchment-faint);margin-top:16px;text-align:left;
  }

  button{
    font-family:'Space Grotesk', sans-serif;
    cursor:pointer;
    border:none;
    border-radius:10px;
  }
  .btn-primary{
    background:var(--amber);
    color:var(--ink);
    font-weight:600;
    padding:12px 22px;
    font-size:0.95rem;
  }
  .btn-primary:disabled{opacity:0.5;cursor:not-allowed;}
  .btn-ghost{
    background:transparent;
    color:var(--parchment-faint);
    border:1px solid rgba(242,232,211,0.2);
    padding:8px 14px;
    font-size:0.85rem;
  }

  /* ── Record panel ─────────────────────────────────────────── */
  #app{display:none;}
  #recordPanel{
    text-align:center;
    margin:20px 0 32px;
  }
  #recordBtn{
    position:relative;
    width:96px;height:96px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #eab866, var(--ember));
    box-shadow:0 0 0 0 rgba(224,165,69,0.5), 0 6px 24px rgba(0,0,0,0.4);
    display:flex;align-items:center;justify-content:center;
    padding:4px;
    transition:transform 0.15s ease;
  }
  #recordBtn:active{transform:scale(0.94);}
  #recordBtnIcon{
    width:100%;height:100%;border-radius:50%;
    object-fit:cover;display:block;
    transition:opacity 0.3s ease;
  }
  #recordBtn.recording{
    background:radial-gradient(circle at 35% 30%, #ff8a6b, var(--danger));
    animation:pulseRec 1.4s ease-in-out infinite;
  }
  #recordBtn.recording #recordBtnIcon{opacity:0;}
  #recordBtn.recording::after{
    content:"";
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:24px;height:24px;border-radius:5px;
    background:var(--parchment);
    box-shadow:0 2px 8px rgba(0,0,0,0.4);
  }
  /* Paused mid-recording — stop the red pulse, swap to a steady amber ring
     so it reads as "held", not "stopped" or "still actively recording". */
  #recordBtn.recording.paused{
    animation:none;
    background:radial-gradient(circle at 35% 30%, #eab866, var(--ember));
  }
  #recordBtn.recording.paused::after{background:var(--ink);}
  @keyframes pulseRec{
    0%,100%{box-shadow:0 0 0 0 rgba(194,86,74,0.55), 0 6px 24px rgba(0,0,0,0.4);}
    50%{box-shadow:0 0 0 16px rgba(194,86,74,0), 0 6px 24px rgba(0,0,0,0.4);}
  }
  #recordStatus{
    font-family:'Space Grotesk',sans-serif;
    color:var(--parchment-faint);
    font-size:0.85rem;
    margin-top:12px;
    min-height:1.2em;
  }
  #recordTimer{color:var(--amber);font-variant-numeric:tabular-nums;}
  #stopBtn{
    display:none;
    margin:14px auto 0;
    border-color:rgba(194,86,74,0.4);
    color:var(--danger);
  }
  #stopBtn.show{display:inline-block;}
  #liveWave{
    display:none;
    width:100%;max-width:320px;height:64px;
    margin:14px auto 0;
    background:var(--ink-2);
    border:1px solid rgba(224,165,69,0.2);
    border-radius:12px;
  }
  #liveWave.show{display:block;}

  /* ── Draft / transcribing state ──────────────────────────── */
  #draftCard{
    display:none;
    background:var(--parchment-dim);
    color:var(--ink);
    border-radius:14px;
    padding:18px;
    margin-bottom:24px;
  }
  #draftCard textarea{
    width:100%;
    min-height:100px;
    font-family:'Literata', serif;
    font-size:1rem;
    line-height:1.5;
    border:1px solid rgba(0,0,0,0.15);
    border-radius:8px;
    padding:10px;
    background:#fbf6ea;
    color:var(--ink);
    resize:vertical;
  }
  #draftMeta{
    font-family:'Space Grotesk',sans-serif;
    font-size:0.78rem;
    color:#6b5f47;
    margin:8px 0 12px;
  }
  #draftActions{display:flex;gap:10px;justify-content:flex-end;}

  /* ── Trim before saving ───────────────────────────────────────── */
  #trimSection{display:none;margin:12px 0;}
  #trimSection.ready{display:block;}
  #trimLabel{
    font-family:'Space Grotesk',sans-serif;font-size:0.78rem;color:#6b5f47;
    display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;
  }
  #trimResetBtn{
    background:none;border:none;color:var(--amber);font-size:0.76rem;
    cursor:pointer;text-decoration:underline;padding:0;font-family:'Space Grotesk',sans-serif;
  }
  #trimResetBtn:disabled{opacity:0.35;text-decoration:none;cursor:default;}
  #trimCanvas{
    width:100%;height:56px;display:block;border-radius:8px;
    background:#fbf6ea;touch-action:none;cursor:pointer;
  }

  #capsuleRow{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;margin:10px 0;flex-wrap:wrap;
  }
  #capsuleLabel{
    display:flex;align-items:center;gap:6px;
    font-family:'Space Grotesk',sans-serif;font-size:0.82rem;color:#6b5f47;
    cursor:pointer;user-select:none;
  }
  #capsuleDate{
    font-family:'Space Grotesk',sans-serif;font-size:0.85rem;
    padding:6px 8px;border-radius:6px;border:1px solid rgba(0,0,0,0.15);
    background:#fbf6ea;color:var(--ink);
  }
  #capsuleDate:disabled{opacity:0.4;}

  /* ── Reminder / appointment picker ───────────────────────────── */
  #reminderRow{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;margin:10px 0;flex-wrap:wrap;
  }
  #reminderLabel{
    display:flex;align-items:center;gap:6px;
    font-family:'Space Grotesk',sans-serif;font-size:0.82rem;color:#6b5f47;
    cursor:pointer;user-select:none;
  }
  #reminderDateTime{
    font-family:'Space Grotesk',sans-serif;font-size:0.85rem;
    padding:6px 8px;border-radius:6px;border:1px solid rgba(0,0,0,0.15);
    background:#fbf6ea;color:var(--ink);
  }
  #reminderDateTime:disabled{opacity:0.4;}

  /* ── Calendar ─────────────────────────────────────────────────── */
  #calendarToggleBtn{width:100%;margin-bottom:12px;}
  #calendarWidget{
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.2);
    border-radius:12px;padding:14px;margin-bottom:18px;
  }
  #calendarHeader{
    display:flex;align-items:center;justify-content:space-between;
    font-family:'Fraunces',serif;font-weight:600;color:var(--parchment);
    margin-bottom:10px;
  }
  #calendarHeader .icon-btn{font-size:1.3rem;color:var(--amber);}
  #calendarWeekdays{
    display:grid;grid-template-columns:repeat(7,1fr);
    font-family:'Space Grotesk',sans-serif;font-size:0.68rem;color:var(--parchment-faint);
    text-align:center;margin-bottom:4px;
  }
  #calendarGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
  .cal-day{
    position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-size:0.78rem;color:var(--parchment);
    border-radius:6px;cursor:pointer;background:transparent;
  }
  .cal-day:hover{background:rgba(224,165,69,0.12);}
  .cal-day.cal-empty{cursor:default;}
  .cal-day.cal-empty:hover{background:transparent;}
  .cal-day.cal-today{border:1px solid var(--amber);font-weight:700;}
  .cal-day.cal-selected{background:var(--amber);color:var(--ink);font-weight:700;}
  .cal-day-dots{
    position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
    display:flex;gap:2px;
  }
  .cal-dot{width:4px;height:4px;border-radius:50%;background:var(--ember);}
  .cal-dot.reminder-dot{background:#5ab4e0;}
  #calendarDayPanel{
    margin-top:10px;padding:10px;border-radius:8px;background:var(--amber-soft);
    font-family:'Space Grotesk',sans-serif;font-size:0.8rem;color:var(--parchment);
  }
  #calendarDayPanel .cal-day-entry{
    padding:6px 0;border-top:1px solid rgba(224,165,69,0.15);cursor:pointer;
  }
  #calendarDayPanel .cal-day-entry:first-child{border-top:none;}
  #calendarUpcoming{
    margin-top:12px;font-family:'Space Grotesk',sans-serif;font-size:0.78rem;color:var(--parchment);
  }
  #calendarUpcoming .cal-upcoming-item{
    display:flex;justify-content:space-between;gap:8px;padding:5px 0;
    border-top:1px solid rgba(224,165,69,0.12);
  }
  #calendarUpcoming .cal-upcoming-item:first-child{border-top:none;}
  #calendarDisclaimer{
    font-family:'Space Grotesk',sans-serif;font-size:0.68rem;line-height:1.4;
    color:var(--parchment-faint);margin-top:10px;
  }

  /* ── Sealed Time Capsule entry ───────────────────────────────── */
  .entry.sealed{
    background:linear-gradient(135deg, var(--parchment-dim), var(--parchment));
    text-align:center;
  }
  .entry.sealed .entry-text{display:none;}
  .entry.sealed .entry-controls{display:none;}
  .seal-body{padding:8px 4px 4px;}
  .seal-glyph{font-size:1.6rem;margin-bottom:4px;}
  .seal-title{
    font-family:'Fraunces',serif;font-weight:600;color:#6b5f47;font-size:0.95rem;
  }
  .seal-countdown{
    font-family:'Space Grotesk',sans-serif;font-size:0.78rem;color:#8a7a54;
    margin-top:4px;
  }

  /* ── On This Day memory card ─────────────────────────────────── */
  .entry.on-this-day{
    margin:20px 0 28px;
    border:1px solid rgba(224,165,69,0.4);
    box-shadow:0 4px 18px rgba(224,165,69,0.15), 0 4px 14px rgba(0,0,0,0.25);
  }
  .on-this-day .entry-head{color:var(--ember);font-weight:600;}

  /* ── Entry list ───────────────────────────────────────────── */
  #entries{margin-top:8px;}
  .entry{
    background:var(--parchment);
    color:var(--ink);
    border-radius:14px;
    padding:16px 16px 12px;
    margin-bottom:14px;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
  }
  .entry-head{
    display:flex;justify-content:space-between;align-items:center;
    font-family:'Space Grotesk',sans-serif;
    font-size:0.75rem;
    color:#7a6d52;
    margin-bottom:8px;
  }
  .entry-text{
    font-family:'Literata', serif;
    font-size:1rem;
    line-height:1.55;
    white-space:pre-wrap;
    margin-bottom:10px;
  }
  .entry-text-edit{
    width:100%;
    min-height:80px;
    font-family:'Literata', serif;
    font-size:1rem;
    line-height:1.55;
    border:1px solid rgba(0,0,0,0.15);
    border-radius:8px;
    padding:8px 10px;
    resize:vertical;
    background:rgba(255,255,255,0.6);
    color:var(--ink);
    margin-bottom:8px;
    box-sizing:border-box;
  }
  .entry-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;}
  .entry-edit-actions button{padding:6px 14px;font-size:0.85rem;}
  .waveform{position:relative;display:flex;align-items:flex-end;gap:2px;height:28px;flex:1;margin-right:10px;padding-left:28px;cursor:pointer;}
  .wf-icon{
    position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:22px;height:22px;border-radius:50%;
    background:rgba(21,18,15,0.75);color:var(--parchment);
    display:flex;align-items:center;justify-content:center;
    font-size:0.65rem;pointer-events:none;
    box-shadow:0 1px 4px rgba(0,0,0,0.3);
  }
  .waveform span{
    flex:1;background:var(--ember);border-radius:2px;min-width:2px;
    transition:background 0.2s;
  }
  .waveform.playing span{background:var(--amber);}
  .waveform.playing span:not(.wf-played){animation:barBreathe 0.9s ease-in-out infinite;}
  .waveform span.wf-played{opacity:0.32;}
  @keyframes barBreathe{0%,100%{opacity:0.6;}50%{opacity:1;}}
  .entry-controls{display:flex;align-items:center;gap:10px;}
  .icon-btn{
    background:none;border:none;font-size:1.1rem;color:#7a6d52;padding:4px 6px;
  }
  .icon-btn:hover{color:var(--ember);}

  #empty{
    text-align:center;color:var(--parchment-faint);
    font-family:'Space Grotesk',sans-serif;font-size:0.9rem;
    padding:40px 10px;
  }

  /* ── Mode toggle (Diary / Manuscript) ────────────────────────── */
  #modeToggle{
    display:flex;justify-content:center;gap:8px;margin-bottom:18px;
  }
  .mode-btn{
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.2);
    color:var(--parchment-faint);
    font-family:'Space Grotesk',sans-serif;font-size:0.85rem;font-weight:500;
    padding:9px 18px;border-radius:20px;
    transition:background 0.2s,color 0.2s,border-color 0.2s;
  }
  .mode-btn.active{
    background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:600;
  }

  /* ── Room profile selector (Lecture & Meeting mode) ──────────── */
  #roomProfileToggle{
    display:none;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:14px;
  }
  #roomProfileToggle.show{display:flex;}
  .profile-btn{
    background:transparent;border:1px solid rgba(224,165,69,0.3);
    color:var(--parchment-faint);
    font-family:'Space Grotesk',sans-serif;font-size:0.72rem;font-weight:500;
    padding:5px 12px;border-radius:14px;
    transition:background 0.2s,color 0.2s,border-color 0.2s;
  }
  .profile-btn.active{
    background:var(--amber-soft);color:var(--amber);border-color:var(--amber);font-weight:600;
  }

  /* ── Manual gain / Auto Level control (Lecture & Meeting mode) ── */
  #gainControl{
    display:none;flex-direction:column;align-items:center;gap:8px;
    margin-bottom:14px;
  }
  #gainControl.show{display:flex;}
  #gainSliderRow{
    display:flex;align-items:center;gap:10px;width:100%;max-width:280px;
  }
  #gainSlider{
    flex:1;accent-color:var(--amber);
  }
  #gainSlider:disabled{opacity:0.35;}
  #gainSliderValue{
    font-family:'Space Grotesk',sans-serif;font-size:0.78rem;color:var(--parchment-faint);
    min-width:56px;text-align:right;
  }

  /* ── Music quality preset selector ───────────────────────────── */
  #musicQualityRow{
    display:none;align-items:center;justify-content:center;gap:10px;
    margin-bottom:14px;font-family:'Space Grotesk',sans-serif;
  }
  #musicQualityRow.show{display:flex;}
  #musicQualityRow label{font-size:0.78rem;color:var(--parchment-faint);}
  #musicQualitySelect{
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.3);
    color:var(--parchment);font-family:'Space Grotesk',sans-serif;font-size:0.82rem;
    padding:6px 10px;border-radius:8px;
  }

  /* ── Lecture & Meeting live level meter ──────────────────────── */
  #meetingMeter{
    display:none;width:100%;max-width:320px;margin:14px auto 0;
    text-align:center;
  }
  #meetingMeter.show{display:block;}
  #meetingMeterReading{
    font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--parchment);
    margin-bottom:6px;
  }
  #meetingMeterDb{font-size:2.4rem;color:var(--amber);}
  #meetingMeterUnit{font-size:0.9rem;color:var(--parchment-faint);margin-left:4px;}
  #meetingMeterBar{
    position:relative;height:14px;border-radius:7px;overflow:hidden;
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.2);
  }
  #meetingMeterFill{
    position:absolute;inset:0;width:0%;
    background:linear-gradient(90deg,#2ecc71 0%,#2ecc71 55%,#e0a545 75%,#c9713a 100%);
    transition:width 0.12s linear;
  }
  #meetingMeterNeedle{
    position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--parchment);
    left:0%;transition:left 0.12s linear;
  }
  #meetingMeterMinMax{
    display:flex;justify-content:space-between;
    font-family:'Space Grotesk',sans-serif;font-size:0.72rem;color:var(--parchment-faint);
    margin:6px 2px 8px;
  }
  #meetingMeterHistory{width:100%;height:40px;display:block;}

  /* ── Bonus-feature tools row (Check My Room / LUFS / Calibrate / Venue Report) ──
     One consistent compact-pill row instead of a stack of mismatched full-width
     bars + orphaned small buttons. */
  #toolsRow{
    display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:18px;
  }
  .tool-btn{
    background:transparent;border:1px solid rgba(242,232,211,0.2);
    color:var(--parchment-faint);
    font-family:'Space Grotesk',sans-serif;font-size:0.78rem;font-weight:500;
    padding:8px 14px;border-radius:18px;
    transition:background 0.2s,color 0.2s,border-color 0.2s;
  }
  .tool-btn:hover{border-color:rgba(224,165,69,0.4);color:var(--parchment);}
  .tool-btn.tool-hidden{display:none;}

  /* ── Pre-recording Check ──────────────────────────────────────── */
  #preCheckPresetRow{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
  .preset-btn{
    flex:1;min-width:100px;
    background:none;border:1px solid rgba(224,165,69,0.35);color:var(--parchment);
    border-radius:8px;padding:10px 8px;font-family:'Space Grotesk',sans-serif;
    font-size:0.8rem;text-align:center;
  }
  .preset-btn:hover{background:rgba(224,165,69,0.12);border-color:var(--amber);}
  #preCheckLiveSection{border-top:1px solid rgba(242,232,211,0.12);padding-top:16px;}
  #preCheckStartBtn{width:100%;margin-bottom:14px;}
  #preCheckMeterWrap{text-align:center;}
  #preCheckReading{
    font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--parchment);
    margin-bottom:8px;
  }
  #preCheckDb{font-size:2rem;color:var(--amber);}
  #preCheckUnit{font-size:0.85rem;color:var(--parchment-faint);margin-left:4px;}
  #preCheckBar{
    position:relative;height:16px;border-radius:8px;overflow:visible;
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.2);
  }
  #preCheckFill{
    position:absolute;inset:0;width:0%;border-radius:8px;overflow:hidden;
    background:linear-gradient(90deg,#2ecc71 0%,#2ecc71 55%,#f1c40f 78%,#e74c3c 100%);
    transition:width 0.1s linear;
  }
  #preCheckNeedle{
    position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--parchment);
    left:0%;transition:left 0.1s linear;
  }
  #preCheckFloorMarker{
    display:none;position:absolute;top:-5px;bottom:-5px;width:2px;
    background:var(--ember);left:0%;box-shadow:0 0 4px rgba(201,113,58,0.8);
  }
  #preCheckFloorMarker::after{
    content:"noise floor";position:absolute;top:-18px;left:50%;transform:translateX(-50%);
    font-family:'Space Grotesk',sans-serif;font-size:0.62rem;color:var(--ember);white-space:nowrap;
  }
  #preCheckStatus{
    margin-top:14px;font-family:'Space Grotesk',sans-serif;font-size:0.85rem;
    padding:8px 10px;border-radius:8px;
  }
  #preCheckStatus.good{background:rgba(46,204,113,0.12);color:#3fae6a;}
  #preCheckStatus.ok{background:rgba(224,165,69,0.12);color:var(--amber);}
  #preCheckStatus.warn{background:rgba(231,76,60,0.12);color:#c0392b;}
  #preCheckResults{margin-top:16px;text-align:left;}
  #preCheckRecoList{
    font-family:'Space Grotesk',sans-serif;font-size:0.82rem;color:var(--parchment);
    line-height:1.8;margin:8px 0 14px;
  }
  #preCheckApplyBtn{width:100%;}

  /* ── LUFS Meter (ITU-R BS.1770-4) ────────────────────────────────── */
  #lufsReadout{
    font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700;
    color:var(--amber);margin:14px 0 6px;
  }
  #lufsUnit{font-size:1rem;color:#6b5f47;margin-left:6px;}
  #lufsMeterWrap{display:flex;justify-content:center;margin:10px 0;}
  #lufsCanvas{background:var(--ink-2);border-radius:8px;}
  #lufsRefNote{
    font-family:'Space Grotesk',sans-serif;font-size:0.76rem;color:#6b5f47;
    margin:10px 0 4px;line-height:1.5;
  }
  #lufsRefNote b{color:var(--amber);}

  /* ── Room Resonance Calibration ──────────────────────────────────── */
  #calibrateRoomBtn{display:none;}
  #calibrateRoomBtn.show{display:inline-block;}
  #calibrateResult{
    display:none;margin-top:16px;text-align:left;
    font-family:'Space Grotesk',sans-serif;font-size:0.85rem;color:var(--parchment);
    background:rgba(224,165,69,0.1);border-radius:8px;padding:12px;line-height:1.7;
  }
  #calibrateResult.show{display:block;}
  #calibrateResult b{color:var(--amber);}
  #calibrateActiveNote{
    display:none;margin-top:10px;font-family:'Space Grotesk',sans-serif;
    font-size:0.78rem;color:#3fae6a;background:rgba(46,204,113,0.1);
    border-radius:8px;padding:8px 10px;
  }
  #calibrateActiveNote.show{display:block;}
  #calibrateMeterWrap{text-align:center;margin-top:14px;}
  #calibrateReading{
    font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--parchment);
    margin-bottom:8px;
  }
  #calibrateDb{font-size:2rem;color:var(--amber);}
  #calibrateUnit{font-size:0.85rem;color:var(--parchment-faint);margin-left:4px;}
  #calibrateBar{
    position:relative;height:16px;border-radius:8px;overflow:visible;
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.2);
  }
  #calibrateFill{
    position:absolute;inset:0;width:0%;border-radius:8px;overflow:hidden;
    background:linear-gradient(90deg,#2ecc71 0%,#2ecc71 55%,#f1c40f 78%,#e74c3c 100%);
    transition:width 0.1s linear;
  }
  #calibrateNeedle{
    position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--parchment);
    left:0%;transition:left 0.1s linear;
  }
  #calibrateLiveStatus{
    margin-top:10px;font-family:'Space Grotesk',sans-serif;font-size:0.8rem;
    color:var(--amber);
  }

  /* ── Venue SLM Report ────────────────────────────────────────── */
  #venueNameInput{
    width:100%;box-sizing:border-box;margin-bottom:14px;
  }
  #venueTimerNote{
    font-family:'Space Grotesk',sans-serif;font-size:0.8rem;color:var(--amber);
    margin-top:8px;min-height:1.2em;
  }
  #venueResult{
    display:none;margin-top:16px;text-align:left;
    font-family:'Space Grotesk',sans-serif;font-size:0.85rem;color:var(--parchment);
    background:rgba(224,165,69,0.1);border-radius:8px;padding:12px;line-height:1.7;
  }
  #venueResult.show{display:block;}
  #venueResult b{color:var(--amber);}

  #roomReportCard{
    background:var(--amber-soft);border:1px solid rgba(224,165,69,0.3);
    border-radius:12px;padding:12px 14px;margin-bottom:14px;
    font-family:'Space Grotesk',sans-serif;font-size:0.82rem;color:var(--parchment);
  }
  #roomReportCard b{color:var(--amber);}
  .entry-tag{
    display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:0.68rem;
    font-weight:600;color:var(--ink);background:var(--amber);
    padding:2px 8px;border-radius:10px;margin-left:8px;vertical-align:middle;
  }
  .entry-tag.clarity-tag{
    background:var(--amber-soft);color:var(--amber);
  }

  /* ── Vocal Clarity trend (Diary mode) ────────────────────────── */
  #clarityTrend{
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.2);
    border-radius:12px;padding:12px 14px;margin-bottom:18px;
  }
  #clarityTrendHeader{
    font-family:'Space Grotesk',sans-serif;font-size:0.82rem;font-weight:600;
    color:var(--parchment);margin-bottom:8px;
  }
  #clarityTrendCanvas{width:100%;height:48px;display:block;}
  #clarityTrendDisclaimer{
    font-family:'Space Grotesk',sans-serif;font-size:0.68rem;line-height:1.4;
    color:var(--parchment-faint);margin-top:8px;
  }

  /* ── Manuscript view ─────────────────────────────────────────── */
  #manuscriptMeta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
  .manuscript-input{
    flex:1;min-width:140px;
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.25);
    color:var(--parchment);font-family:'Fraunces',serif;font-size:0.95rem;
    padding:10px 12px;border-radius:8px;
  }
  .manuscript-input::placeholder{color:var(--parchment-faint);}
  #manuscriptTitle{font-weight:600;flex:2;}

  #manuscriptStats{
    display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-size:0.75rem;color:var(--amber);
    margin-bottom:10px;
  }
  #manuscriptStats span{
    background:var(--amber-soft);padding:4px 10px;border-radius:12px;
  }

  .manuscript-hint{
    font-family:'Space Grotesk',sans-serif;font-size:0.75rem;line-height:1.5;
    color:var(--parchment-faint);text-align:center;
    margin:0 0 18px;padding:0 6px;
  }
  .manuscript-hint b{color:var(--parchment);}

  #manuscriptDraftCard{
    background:var(--parchment-dim);color:var(--ink);
    border-radius:14px;padding:18px;margin-bottom:20px;
  }
  #manuscriptDraftMeta{
    font-family:'Space Grotesk',sans-serif;font-size:0.78rem;
    color:#6b5f47;margin-bottom:10px;
  }
  #manuscriptDraftPreview{
    font-family:'Literata',serif;font-size:0.95rem;line-height:1.6;
    white-space:pre-wrap;background:#fbf6ea;border:1px solid rgba(0,0,0,0.12);
    border-radius:8px;padding:12px;max-height:240px;overflow-y:auto;
    margin-bottom:12px;
  }
  #manuscriptDraftPreview .preview-chapter{
    font-family:'Fraunces',serif;font-weight:600;color:var(--ember);
    display:block;margin:6px 0;
  }
  #manuscriptDraftActions{display:flex;gap:10px;justify-content:flex-end;}

  #manuscriptChapters{margin-bottom:16px;}
  .chapter-card{
    background:var(--parchment);color:var(--ink);
    border-radius:14px;padding:16px;margin-bottom:14px;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
  }
  .chapter-card-head{
    display:flex;align-items:center;gap:10px;margin-bottom:10px;
  }
  .chapter-title-input{
    flex:1;font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;
    background:transparent;border:none;border-bottom:1px dashed rgba(0,0,0,0.2);
    color:var(--ink);padding:4px 2px;
  }
  .chapter-word-count{
    font-family:'Space Grotesk',sans-serif;font-size:0.72rem;color:#8a7a54;
    white-space:nowrap;
  }
  .chapter-body{
    width:100%;min-height:120px;font-family:'Literata',serif;font-size:0.95rem;
    line-height:1.6;border:1px solid rgba(0,0,0,0.12);border-radius:8px;
    padding:10px;background:#fbf6ea;color:var(--ink);resize:vertical;
  }
  .chapter-delete{
    align-self:flex-start;background:none;border:none;color:#7a6d52;
    font-size:1.05rem;padding:4px 6px;
  }
  .chapter-delete:hover{color:var(--danger);}

  #manuscriptEmpty{
    text-align:center;color:var(--parchment-faint);
    font-family:'Space Grotesk',sans-serif;font-size:0.9rem;
    padding:30px 10px;
  }

  #manuscriptActions{
    display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
    margin:8px 0 16px;
  }

  #nameDriftResults{
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.2);
    border-radius:10px;padding:14px;margin-bottom:16px;
    font-family:'Space Grotesk',sans-serif;font-size:0.82rem;
  }
  .drift-cluster{
    padding:8px 0;border-bottom:1px solid rgba(242,232,211,0.1);
  }
  .drift-cluster:last-child{border-bottom:none;}
  .drift-cluster-names{color:var(--amber);font-weight:600;}
  .drift-cluster-meta{color:var(--parchment-faint);font-size:0.74rem;margin-top:2px;}

  #manuscriptDangerRow{text-align:center;margin-top:8px;}
  #manuscriptDangerRow .btn-ghost{opacity:0.55;font-size:0.78rem;}
  #manuscriptDangerRow .btn-ghost:hover{opacity:1;color:var(--danger);}

  footer{
    text-align:center;margin-top:36px;
    font-family:'Space Grotesk',sans-serif;
    font-size:0.78rem;color:var(--parchment-faint);
  }
  footer a{color:var(--amber);text-decoration:none;}
  footer .quota{margin-top:6px;font-size:0.72rem;opacity:0.7;}
  .mfl-sig{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:7px;}
  .mfl-sig-icon{width:18px;height:18px;object-fit:contain;opacity:0.75;}
  .mfl-sig-link{font-family:'Space Grotesk',sans-serif;font-size:0.72rem;color:var(--parchment-faint);
    text-decoration:none;border-bottom:1px dotted transparent;transition:border-color 0.18s ease,color 0.18s ease;}
  .mfl-sig-link:hover{color:var(--amber);border-bottom-color:var(--amber);}

  .toast{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    background:var(--ink-2);color:var(--parchment);
    border:1px solid var(--amber-soft);
    padding:10px 18px;border-radius:10px;
    font-family:'Space Grotesk',sans-serif;font-size:0.85rem;
    opacity:0;pointer-events:none;transition:opacity 0.25s;
    z-index:50;
  }
  .toast.show{opacity:1;}

  .undo-toast{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    background:var(--ink-2);color:var(--parchment);
    border:1px solid var(--amber-soft);
    padding:10px 10px 10px 18px;border-radius:10px;
    font-family:'Space Grotesk',sans-serif;font-size:0.85rem;
    opacity:0;pointer-events:none;transition:opacity 0.25s;
    z-index:50;display:flex;align-items:center;gap:14px;
  }
  .undo-toast.show{opacity:1;pointer-events:auto;}
  .undo-toast button{
    background:none;border:1px solid var(--amber-soft);color:var(--amber);
    border-radius:6px;padding:5px 12px;font-family:'Space Grotesk',sans-serif;
    font-size:0.8rem;font-weight:600;
  }
  .undo-toast button:hover{background:rgba(224,165,69,0.15);}

  /* ── Adjustment panel ────────────────────────────────────────── */
  #settingsBtn{
    position:absolute;top:24px;right:20px;
    background:none;border:1px solid rgba(242,232,211,0.2);
    color:var(--parchment-faint);
    width:36px;height:36px;border-radius:50%;
    font-size:1.05rem;line-height:1;
    display:flex;align-items:center;justify-content:center;
  }
  #settingsBtn:hover{color:var(--amber);border-color:var(--amber-soft);}
  #housekeepingBtn{
    position:absolute;top:24px;right:66px;
    background:none;border:1px solid rgba(242,232,211,0.2);
    color:var(--parchment-faint);
    width:36px;height:36px;border-radius:50%;
    font-size:1.05rem;line-height:1;
    display:flex;align-items:center;justify-content:center;
  }
  #housekeepingBtn:hover{color:var(--amber);border-color:var(--amber-soft);}
  .wrap{position:relative;}

  .modal-overlay{
    display:none;
    position:fixed;inset:0;background:rgba(6,9,12,0.72);
    align-items:center;justify-content:center;
    padding:20px;z-index:60;
  }
  .modal-overlay.show{display:flex;}
  .modal-box{
    background:var(--ink-2);border:1px solid rgba(224,165,69,0.25);
    border-radius:16px;padding:24px;max-width:420px;width:100%;
    max-height:85vh;overflow-y:auto;
  }
  .modal-box h2{
    font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;
    margin:0 0 4px;color:var(--parchment);
  }
  .modal-sub{
    font-family:'Space Grotesk',sans-serif;font-size:0.82rem;
    color:var(--parchment-faint);margin:0 0 18px;
  }
  .settings-toggle{
    display:flex;align-items:center;justify-content:space-between;
    font-family:'Space Grotesk',sans-serif;font-size:0.9rem;
    color:var(--parchment);padding:10px 0;
    border-bottom:1px solid rgba(242,232,211,0.1);
    cursor:pointer;user-select:none;
  }
  .settings-toggle input{width:18px;height:18px;accent-color:var(--amber);}
  .settings-slider{padding:14px 0;border-bottom:1px solid rgba(242,232,211,0.1);}
  .settings-slider label{
    display:block;font-family:'Space Grotesk',sans-serif;font-size:0.85rem;
    color:var(--parchment);margin-bottom:8px;
  }
  .settings-slider label span{color:var(--amber);font-variant-numeric:tabular-nums;}
  .settings-slider input[type="range"]{
    width:100%;accent-color:var(--amber);
  }
  .settings-hint{
    font-family:'Space Grotesk',sans-serif;font-size:0.72rem;
    color:var(--parchment-faint);margin:6px 0 0;
  }
  .settings-select{
    display:none;
    width:100%;
    background:var(--ink);border:1px solid rgba(242,232,211,0.2);
    color:var(--parchment);font-family:'Space Grotesk',sans-serif;
    font-size:0.85rem;padding:8px 10px;border-radius:8px;margin:8px 0;
  }
  .settings-backup-row{
    display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;
  }
  #accessCodeSection{border-top:1px solid rgba(242,232,211,0.12);padding-top:16px;}
  #accessCodeInput{
    flex:1 1 160px;min-width:0;box-sizing:border-box;
  }
  #accessCodeResetBtn{margin-top:10px;width:100%;}
  .settings-actions{
    display:flex;gap:10px;justify-content:space-between;margin-top:20px;
  }

  /* ── 声 Voice Diary Plus — Housekeeping dashboard ────────────────── */
  #housekeepingBox{max-width:640px;}
  #housekeepingBox h2{display:flex;align-items:center;gap:8px;}
  .hk-plus-badge{
    font-family:'Space Grotesk',sans-serif;font-size:0.62rem;font-weight:700;
    color:var(--ink);background:var(--amber);padding:2px 8px;border-radius:10px;
    vertical-align:middle;
  }
  #hkStats{
    display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 16px;
  }
  .hk-stat{
    flex:1;min-width:90px;background:var(--ink);border:1px solid rgba(224,165,69,0.2);
    border-radius:10px;padding:10px 12px;text-align:center;
  }
  .hk-stat-value{
    font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;color:var(--amber);
    display:block;
  }
  .hk-stat-label{
    font-family:'Space Grotesk',sans-serif;font-size:0.65rem;color:var(--parchment-faint);
  }
  #hkControls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  #hkSearch{
    flex:1;min-width:140px;
    background:var(--ink);border:1px solid rgba(242,232,211,0.2);
    color:var(--parchment);font-family:'Space Grotesk',sans-serif;font-size:0.85rem;
    padding:8px 10px;border-radius:8px;
  }
  #hkFilterRow{display:flex;gap:6px;flex-wrap:wrap;}
  .hk-filter-btn{
    background:var(--ink);border:1px solid rgba(224,165,69,0.25);
    color:var(--parchment-faint);font-family:'Space Grotesk',sans-serif;font-size:0.72rem;
    padding:6px 12px;border-radius:14px;
  }
  .hk-filter-btn.active{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:600;}
  #hkList{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;}
  .hk-row{
    background:var(--ink);border:1px solid rgba(242,232,211,0.12);
    border-radius:10px;padding:10px 12px;
  }
  .hk-row-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .hk-row-type{font-size:0.9rem;}
  .hk-row-title{
    flex:1;font-family:'Fraunces',serif;font-size:0.92rem;color:var(--parchment);
    background:none;border:none;border-bottom:1px dashed transparent;
    padding:1px 2px;min-width:0;
  }
  .hk-row-title:hover, .hk-row-title:focus{border-bottom-color:rgba(224,165,69,0.4);outline:none;}
  .hk-row-date{
    font-family:'Space Grotesk',sans-serif;font-size:0.68rem;color:var(--parchment-faint);
    white-space:nowrap;
  }
  .hk-row-snippet{
    font-family:'Space Grotesk',sans-serif;font-size:0.78rem;color:var(--parchment-faint);
    line-height:1.4;margin:4px 0 6px;
  }
  .hk-row-actions{display:flex;gap:6px;flex-wrap:wrap;}
  .hk-action-btn{
    background:none;border:1px solid rgba(224,165,69,0.25);color:var(--parchment-faint);
    font-family:'Space Grotesk',sans-serif;font-size:0.68rem;
    padding:4px 9px;border-radius:10px;
  }
  .hk-action-btn:hover{color:var(--amber);border-color:var(--amber);}
  #hkEmpty{
    text-align:center;color:var(--parchment-faint);font-family:'Space Grotesk',sans-serif;
    font-size:0.85rem;padding:24px 10px;
  }

  /* ── Transcript quality warning ──────────────────────────────── */
  #draftWarning{
    display:none;align-items:center;justify-content:space-between;
    gap:10px;flex-wrap:wrap;
    background:rgba(194,86,74,0.12);border:1px solid rgba(194,86,74,0.35);
    color:#8a4438;border-radius:8px;
    padding:8px 12px;margin:0 0 12px;
    font-family:'Space Grotesk',sans-serif;font-size:0.78rem;
  }
  #draftWarning .draft-clean-btn{
    background:none;border:1px solid rgba(194,86,74,0.45);color:#8a4438;
    border-radius:6px;padding:5px 10px;font-size:0.74rem;white-space:nowrap;
  }
  #draftWarning .draft-clean-btn:hover{background:rgba(194,86,74,0.15);}

  /* ═══════════════════════════════════════════════════════════════════
     THE LITTLE KEROSENE LAMP · corner widget
     A quiet, breathing invitation — not a toolbar button. Opens ボッキ's
     own words before it ever asks for support. Draggable, position
     persisted per-device. Ported from Kagami-Mirai / Aion's corner lamp,
     re-themed to Voice Diary's own amber/parchment palette.
     ═══════════════════════════════════════════════════════════════════ */
  #vdLampWidget{
    position:fixed;z-index:60;width:50px;height:50px;
    padding:0;margin:0;-webkit-appearance:none;appearance:none;outline:none;
    touch-action:none;user-select:none;-webkit-user-select:none;
    border-radius:50%;border:1px solid rgba(224,165,69,0.55);cursor:grab;
    background:radial-gradient(circle at 50% 42%,#5a3208,#2a1604 65%,#1a0d02 100%);
    display:flex;align-items:center;justify-content:center;line-height:0;
    box-shadow:0 0 14px 2px rgba(224,165,69,0.30),0 2px 10px rgba(0,0,0,0.35);
    animation:vdLampBreathe 3.6s ease-in-out infinite;transition:transform 0.15s;
  }
  #vdLampWidget svg{filter:drop-shadow(0 0 5px rgba(255,170,60,0.85));pointer-events:none;}
  #vdLampWidget:hover{transform:scale(1.08);}
  #vdLampWidget:active{transform:scale(0.97);}
  #vdLampWidget.dragging{
    cursor:grabbing;animation:none;transition:none;
    box-shadow:0 0 22px 6px rgba(224,165,69,0.55),0 4px 16px rgba(0,0,0,0.45);
  }
  @keyframes vdLampBreathe{
    0%,100%{box-shadow:0 0 14px 2px rgba(224,165,69,0.30),0 2px 10px rgba(0,0,0,0.35);}
    50%{box-shadow:0 0 26px 7px rgba(255,190,90,0.55),0 2px 10px rgba(0,0,0,0.35);}
  }
  @media (prefers-reduced-motion:reduce){#vdLampWidget{animation:none;}}
  @media print{#vdLampWidget{display:none!important;}}

  .lamp-modal{
    position:fixed;inset:0;z-index:9300;
    display:none;align-items:center;justify-content:center;padding:24px;
  }
  .lamp-modal.show{display:flex;}
  .lamp-modal-backdrop{
    position:absolute;inset:0;
    background:radial-gradient(ellipse at center, rgba(20,14,4,0.88), rgba(2,2,8,0.96));
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .lamp-modal-shell{
    position:relative;width:min(480px,95vw);max-height:88vh;overflow-y:auto;
    background:var(--ink-2);border-radius:16px;
    box-shadow:0 24px 80px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(224,165,69,0.22);
    padding:26px 28px 28px;
  }
  .lamp-modal-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;position:relative;}
  .lamp-modal-ttl h3{
    font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:var(--amber);margin:0;
  }
  .lamp-modal-sub{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--parchment-faint);letter-spacing:0.04em;margin-top:2px;}
  .lamp-modal-close{
    position:absolute;top:-4px;right:-6px;width:30px;height:30px;
    background:rgba(194,86,74,0.18);color:#ff8aa6;
    border:1px solid rgba(194,86,74,0.4);border-radius:50%;cursor:pointer;
    font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
    transition:background 0.15s;
  }
  .lamp-modal-close:hover{background:rgba(194,86,74,0.32);}
  .lamp-hero{font-family:'Fraunces',serif;font-size:18px;color:var(--parchment);margin:14px 0 12px;text-align:center;}
  .lamp-copy{font-family:'Literata',serif;font-size:13.5px;color:var(--parchment-dim);line-height:1.7;text-align:left;}
  .lamp-copy p{margin:0 0 12px;}
  .lamp-copy em{color:var(--amber);font-style:italic;}
  .lamp-sign{margin-top:6px;font-family:'Literata',serif;font-size:12.5px;color:var(--parchment-faint);font-style:italic;text-align:right;}
  .lamp-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
  .lamp-btn{
    padding:11px 20px;border-radius:100px;font-family:'Space Grotesk',sans-serif;
    font-size:12.5px;letter-spacing:0.02em;text-decoration:none;cursor:pointer;
    transition:all 0.15s;border:1.5px solid rgba(224,165,69,0.35);color:var(--parchment);background:transparent;
  }
  .lamp-btn:hover{border-color:rgba(224,165,69,0.7);transform:translateY(-1px);}
  .lamp-btn-primary{
    background:linear-gradient(180deg, rgba(224,165,69,0.28), rgba(180,130,40,0.16));
    border-color:rgba(224,165,69,0.6);color:#fff5d4;
    box-shadow:0 0 14px rgba(224,165,69,0.25);
  }
  .lamp-btn-primary:hover{box-shadow:0 0 24px rgba(224,165,69,0.5);}