/*
 * TT Phone · Quiet app theme
 * --------------------------
 * A single late-loading visual layer for every in-phone app.  Feature CSS
 * keeps layout/behaviour; this file owns the shared pale, low-contrast look.
 */

:root {
  --soft-app-bg: #fdfdfc;
  --soft-app-surface: #f7f7f5;
  --soft-app-surface-2: #f1f1ef;
  --soft-app-line: rgba(63, 63, 58, .105);
  --soft-app-ink: #343431;
  --soft-app-muted: #969690;
  --soft-app-faint: #b8b8b2;
  --soft-app-radius: 20px;
  --soft-app-control-radius: 14px;
}

html,
body {
  background: var(--soft-app-bg);
}

.app-modal {
  background: rgba(247, 247, 245, .28) !important;
}

.app-modal .modal-panel {
  background: var(--soft-app-bg) !important;
  color: var(--soft-app-ink);
  box-shadow: none !important;
}

.app-modal .modal-close {
  border: 1px solid rgba(70, 70, 65, .06) !important;
  background: var(--soft-app-surface) !important;
  color: #5d5d58 !important;
  box-shadow: none !important;
}

:is(
  .utility-app,
  .workspace-app,
  .focus-app,
  .memory-app,
  .university-schedule,
  .music-app,
  .character-studio.ai-room,
  .api-settings
) {
  background: var(--soft-app-bg) !important;
  color: var(--soft-app-ink) !important;
}

:is(
  .utility-app,
  .workspace-app,
  .focus-app,
  .memory-app,
  .university-schedule,
  .music-app,
  .character-studio.ai-room,
  .api-settings
) button {
  box-shadow: none !important;
}

:is(
  .utility-app,
  .workspace-app,
  .focus-app,
  .memory-app,
  .university-schedule,
  .music-app,
  .character-studio.ai-room,
  .api-settings
) :is(input, textarea, select) {
  border-color: var(--soft-app-line) !important;
  background: rgba(248, 248, 246, .82) !important;
  color: var(--soft-app-ink) !important;
  box-shadow: none !important;
}

:is(
  .utility-app,
  .workspace-app,
  .focus-app,
  .memory-app,
  .university-schedule,
  .music-app,
  .character-studio.ai-room,
  .api-settings
) :is(input, textarea)::placeholder {
  color: #b2b2ad;
}

/* Backup + appearance ---------------------------------------------------- */
.utility-app {
  padding-right: 3px !important;
  padding-left: 3px !important;
}

.utility-app-head {
  min-height: 76px;
  align-items: flex-end;
  padding: 10px 3px 17px !important;
  border: 0 !important;
}

.utility-app-head small {
  margin-bottom: 7px !important;
  color: var(--soft-app-faint) !important;
  font-size: 7px !important;
  font-weight: 500;
  letter-spacing: .2em !important;
}

.utility-app-head strong {
  color: #393936;
  font-size: 23px !important;
  font-weight: 500 !important;
  letter-spacing: -.035em;
}

.utility-app-head > span {
  color: #aaa9a4 !important;
  font-size: 8px !important;
}

.utility-intro {
  margin: 1px 3px 22px !important;
  color: #979791 !important;
  font-size: 9px !important;
  line-height: 1.75 !important;
}

.utility-card {
  margin-bottom: 11px !important;
  padding: 17px !important;
  border: 0 !important;
  border-radius: var(--soft-app-radius) !important;
  background: var(--soft-app-surface) !important;
  box-shadow: none !important;
}

.utility-card-title strong,
.beauty-editor-heading strong {
  color: #494945;
  font-size: 11px !important;
  font-weight: 550;
}

.utility-card-title small,
.beauty-editor-heading small {
  color: #aaa9a4 !important;
  line-height: 1.55 !important;
}

.utility-card-title > button,
.beauty-editor-tools button,
.utility-actions button,
.utility-file-button,
.backup-history button,
.import-review-actions button {
  border: 0 !important;
  border-radius: var(--soft-app-control-radius) !important;
  background: #fff !important;
  color: #65655f !important;
}

.utility-actions button.primary,
.utility-file-button,
.import-review-actions .primary {
  background: #e9e9e6 !important;
  color: #393936 !important;
}

.backup-app-grid {
  gap: 8px !important;
}

.backup-choice,
.import-map-row,
.backup-history article {
  border: 0 !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .82) !important;
}

.backup-choice {
  min-height: 58px !important;
  padding: 11px 12px !important;
}

.backup-choice i {
  border-color: #cecec9 !important;
  border-radius: 6px !important;
}

.backup-choice input:checked + i {
  border-color: #777771 !important;
  background: #777771 !important;
}

.utility-switch,
.utility-switch.warning {
  border: 0 !important;
  border-radius: 16px !important;
  background: #efefec !important;
}

.utility-switch small {
  color: #9e9e98 !important;
}

.beauty-scope-tabs {
  gap: 6px !important;
  margin-bottom: 20px !important;
  padding: 2px 2px 7px !important;
  border: 0 !important;
}

.beauty-scope-tabs button {
  height: 34px !important;
  border-radius: 17px !important;
  background: #eeeeeb !important;
  color: #898984 !important;
  box-shadow: none !important;
}

.beauty-scope-tabs button.active {
  background: #fff !important;
  color: #4a4a46 !important;
  box-shadow: inset 0 0 0 1px rgba(70, 70, 65, .08) !important;
}

#beautyCssInput {
  border: 0 !important;
  border-radius: 17px !important;
  background: #fff !important;
}

.beauty-scope-manual,
.beauty-guide {
  border-color: var(--soft-app-line) !important;
  background: transparent !important;
}

.beauty-manual-start,
.beauty-manual-boundary,
.beauty-function-guard,
.beauty-guide-lead,
.beauty-guide-index button {
  border: 0 !important;
  background: rgba(255, 255, 255, .7) !important;
}

/* Calendar, writing and notes ------------------------------------------ */
.workspace-app {
  --workspace-ink: #3b3b38 !important;
  --workspace-muted: #a1a19b !important;
  --workspace-line: var(--soft-app-line) !important;
  --workspace-soft: #f3f3f0 !important;
  padding: 7px 4px calc(34px + env(safe-area-inset-bottom)) !important;
}

.workspace-head {
  min-height: 72px !important;
  padding: 7px 2px 15px !important;
  border: 0 !important;
}

.workspace-head::after {
  display: none !important;
}

.workspace-head small {
  color: var(--soft-app-faint) !important;
  font-size: 7px !important;
  letter-spacing: .18em !important;
}

.workspace-head strong {
  color: #3c3c39;
  font-size: 24px !important;
  font-weight: 500 !important;
}

.workspace-head > button,
.workspace-wide,
.workspace-actions button,
.workspace-card > header button,
.writing-project-picker button,
.writing-chapter-bar button,
.writing-footer button,
.notes-layout main footer button {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--soft-app-surface-2) !important;
  color: #686863 !important;
}

.workspace-primary {
  border: 0 !important;
  background: #e7e7e4 !important;
  color: #383835 !important;
}

.workspace-card {
  padding: 15px !important;
  border: 0 !important;
  border-radius: var(--soft-app-radius) !important;
  background: var(--soft-app-surface) !important;
}

.workspace-card > header {
  border: 0 !important;
}

.planner-month-head {
  margin-top: 13px !important;
  padding: 4px 0;
  border-radius: 18px;
  background: var(--soft-app-surface);
}

.planner-month-head button {
  border: 0 !important;
  color: #999994 !important;
}

.planner-calendar {
  padding: 6px;
  border: 0 !important;
  border-radius: 20px;
  background: #fafaf8 !important;
}

.planner-calendar button {
  border: 0 !important;
  border-radius: 14px;
}

.planner-calendar button.selected span,
.planner-calendar button.selected.today span {
  border-color: #e4e4e1 !important;
  background: #e4e4e1 !important;
  color: #3e3e3a !important;
}

.planner-calendar button.selected i {
  background: #777771 !important;
}

.planner-day {
  margin-top: 14px !important;
}

.planner-event {
  margin-top: 7px;
  padding: 13px 11px !important;
  border: 0 !important;
  border-radius: 15px;
  background: #fff;
}

.planner-event::before {
  background: #b4b4ae !important;
}

.workspace-tabs {
  gap: 4px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 18px;
  background: #efefec;
}

.workspace-tabs button {
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 15px !important;
}

.workspace-tabs button.active {
  background: #fff !important;
  color: #4b4b47 !important;
  box-shadow: none !important;
}

.workspace-tabs button.active::after {
  display: none !important;
}

.writing-project-bar,
.writing-chapter-bar {
  gap: 8px !important;
}

.writing-project-bar select,
.writing-chapter-bar select,
.writing-title,
.notes-title {
  border: 0 !important;
  border-radius: 14px !important;
  background: #f7f7f5 !important;
}

.writing-project-bar select,
.writing-chapter-bar select {
  padding-left: 12px !important;
}

.writing-title,
.notes-title {
  margin-top: 11px !important;
  padding: 13px 15px !important;
}

.writing-symbol-strip {
  gap: 5px !important;
  margin-top: 7px;
  border: 0 !important;
}

.writing-symbol-strip button {
  border: 0 !important;
  border-radius: 13px !important;
  background: #f1f1ef !important;
}

.writing-editor,
#writingOutline,
#writingSymbols,
#notesBody {
  margin-top: 9px;
  padding: 17px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fbfbfa !important;
}

.writing-footer,
.notes-layout main footer {
  border: 0 !important;
}

.notes-layout,
.notes-layout aside {
  border: 0 !important;
}

.notes-layout aside input {
  border: 0 !important;
  background: #f2f2f0 !important;
}

#notesList button {
  border: 0 !important;
  border-radius: 15px !important;
  background: #f7f7f5 !important;
}

#notesList button.active {
  background: #e8e8e5 !important;
  color: #41413d !important;
}

#notesList button.active small {
  color: #969690 !important;
}

.workspace-sheet {
  background: var(--soft-app-bg) !important;
}

.workspace-sheet header {
  border: 0 !important;
}

.workspace-sheet header button {
  border: 0 !important;
  background: var(--soft-app-surface) !important;
}

/* Schedule -------------------------------------------------------------- */
.university-schedule {
  --schedule-ink: #73736d !important;
  --schedule-soft: #eeeeeb !important;
  --schedule-card-1: #f0f0ed !important;
  --schedule-card-2: #f5f5f2 !important;
  --schedule-card-3: #e9e9e6 !important;
  --schedule-card-text: #696963 !important;
}

.university-schedule > header {
  background: rgba(253, 253, 252, .94) !important;
}

.university-schedule > header > button,
.schedule-head-actions button,
.university-schedule > header .week-picker {
  border: 0 !important;
  background: #f1f1ef !important;
  color: #777771 !important;
}

.schedule-head-actions #openClassEditor {
  background: #e6e6e3 !important;
  color: #565651 !important;
}

.term-date-strip {
  border: 0 !important;
  background: rgba(253, 253, 252, .96) !important;
}

.period-axis {
  background: #fafaf8 !important;
}

.period-axis > div,
.course-grid-lines {
  border-color: var(--soft-app-line) !important;
}

.course-grid-lines {
  opacity: .55;
}

.course-block {
  border: 1px solid rgba(75, 75, 70, .035) !important;
  border-radius: 11px !important;
}

.schedule-week-sheet,
.university-course-editor,
.schedule-theme-panel {
  border: 0 !important;
  background: rgba(252, 252, 250, .98) !important;
  box-shadow: 0 18px 55px rgba(45, 45, 40, .08) !important;
}

#scheduleWeekOptions button,
.schedule-theme-presets button,
.schedule-css-actions button,
.schedule-theme-panel > button,
.schedule-editor-actions button {
  border: 0 !important;
  background: #f1f1ee !important;
  color: #666660 !important;
}

#scheduleWeekOptions button.selected,
.schedule-editor-actions button[type="submit"] {
  background: #e4e4e1 !important;
  color: #3f3f3b !important;
}

/* Focus + memory -------------------------------------------------------- */
.focus-app,
.focus-ai-picker {
  background: var(--soft-app-bg) !important;
}

.focus-head,
.focus-date,
.focus-group,
.focus-quadrant-tools {
  border: 0 !important;
}

.focus-head button,
.focus-ai-picker header button {
  background: #f2f2ef !important;
  color: #777771 !important;
}

.focus-start-card,
.focus-step,
.focus-group,
.focus-task,
.focus-session-setup,
.focus-session-running,
.focus-companion-room,
.focus-ai-grid > button {
  border: 0 !important;
  background: #f7f7f5 !important;
  box-shadow: none !important;
}

.focus-start-card button,
.focus-add,
#focusCreate,
#focusSave,
.focus-room-actions button {
  border: 0 !important;
  background: #ededeb !important;
  color: #62625d !important;
}

.focus-view[data-focus-view="plan"] nav {
  background: #efefec !important;
}

.focus-view[data-focus-view="plan"] nav button.active {
  background: #fff !important;
}

.memory-app {
  padding: 18px 19px !important;
}

.memory-app > header {
  border: 0 !important;
}

.memory-app > header button {
  border: 0 !important;
  background: #f1f1ee !important;
  color: #777771 !important;
}

.memory-policy {
  color: #999993 !important;
}

.memory-toolbar input,
.memory-toolbar select {
  border: 0 !important;
  border-radius: 14px !important;
  background: #f3f3f0 !important;
}

.memory-list article {
  border: 0 !important;
  border-radius: 18px !important;
  background: #f8f8f6 !important;
}

.memory-list article textarea,
.memory-card-controls select,
.memory-tags input {
  border: 0 !important;
  background: #fff !important;
}

.memory-list article footer {
  border-color: var(--soft-app-line) !important;
}

/* Music ----------------------------------------------------------------- */
.music-header {
  border: 0 !important;
}

.music-header #musicBack,
.music-header > button {
  border: 0 !important;
  background: #f2f2ef !important;
}

.netease-connect,
.music-accordion,
.music-library,
.netease-shortcuts {
  border-color: var(--soft-app-line) !important;
  background: transparent !important;
}

.music-search form {
  border: 0 !important;
  background: #f1f1ee !important;
}

.music-search form > button,
.netease-connect > button,
.music-accordion .music-new-playlist {
  border: 0 !important;
  background: #e7e7e4 !important;
  color: #555550 !important;
}

.music-now {
  margin-top: 9px !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #f7f7f5 !important;
  color: #494945 !important;
}

.music-cover {
  border: 10px solid #efefec !important;
  background-color: #d9d9d5 !important;
  box-shadow: 0 12px 32px rgba(42, 42, 38, .08) !important;
}

.music-cover::before {
  border-color: rgba(120, 120, 114, .22) !important;
  background: #f8f8f6 !important;
}

.music-cover::after {
  background: #aaa9a4 !important;
}

.music-meta strong,
.music-meta span,
.music-lyric,
.music-time,
.music-controls button {
  color: #666660 !important;
}

.music-controls .music-play,
.music-controls #musicMode[data-mode="shuffle"],
.music-controls #musicMode[data-mode="one"] {
  background: #e2e2df !important;
  color: #4a4a46 !important;
}

.music-mode-label,
.music-own-playlists button,
.music-search-results,
.music-save-list button {
  border: 0 !important;
  background: #f2f2ef !important;
}

.music-sheet > div {
  border: 0 !important;
  background: rgba(253, 253, 252, .98) !important;
  box-shadow: 0 18px 50px rgba(42, 42, 38, .08) !important;
}

/* AI room + API settings ------------------------------------------------ */
.character-studio.ai-room {
  --room-line: var(--soft-app-line) !important;
  --room-ink: #3d3d39 !important;
  --room-muted: #989892 !important;
}

.ai-room-header,
.ai-room-tabs {
  border: 0 !important;
}

.ai-room-tabs {
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 18px !important;
  background: #efefec !important;
}

.ai-room-tabs button {
  min-height: 39px !important;
  border-radius: 15px !important;
  color: #8d8d87 !important;
}

.ai-room-tabs button[aria-selected="true"] {
  background: #fff !important;
  color: #454541 !important;
  box-shadow: none !important;
}

.ai-room-tabs button[aria-selected="true"]::after {
  display: none !important;
}

.ai-room-import,
.ai-room .character-card-form,
.ai-room-library > article,
.ai-room-review,
.ai-room-scope,
.ai-room-entry,
.ai-room-empty {
  border: 0 !important;
  background: #f7f7f5 !important;
  box-shadow: none !important;
}

.ai-room-import button,
.ai-room .character-card-form > #saveStudioCharacter,
.ai-room-review-actions #characterImportConfirm {
  border: 0 !important;
  background: #e5e5e2 !important;
  color: #42423e !important;
}

.ai-room-section-head > button,
.ai-room-asset > header > button,
.ai-room-asset-actions button,
.ai-room-add-entry,
.ai-room-review-name button,
.ai-room-review-ai button,
.ai-room-review-actions button {
  border: 0 !important;
  background: #f0f0ed !important;
  color: #62625d !important;
}

.api-settings > .eyebrow {
  color: var(--soft-app-faint) !important;
}

.api-settings > h2 {
  color: #3c3c39 !important;
  font-weight: 500 !important;
}

.api-settings .settings-fold,
.api-lab-card,
.api-settings .preset-box {
  border: 0 !important;
  border-radius: 18px !important;
  background: #f7f7f5 !important;
  box-shadow: none !important;
}

.api-settings .settings-fold-body {
  border-color: var(--soft-app-line) !important;
}

.api-settings input,
.api-settings select,
.api-settings textarea,
.api-settings .pretty-select-trigger,
.api-settings-search input,
.api-preference-grid select,
.api-preference-grid input,
.api-compare-controls input,
.api-compare-controls textarea,
.api-compare-controls select {
  border: 0 !important;
  border-radius: 13px !important;
  background: #fff !important;
}

.api-settings .preset-actions button,
.api-settings .preset-minor button,
.api-settings .key-row button,
.api-settings .model-row > button,
.api-settings .notification-settings > button,
.api-settings .notification-tests button,
.api-settings .test-model,
.api-lab-card button {
  border: 0 !important;
  background: #ecece9 !important;
  color: #5f5f5a !important;
}

.api-diagnostic-result,
.api-compare-output,
.writing-ai-result,
#notesStudyResult {
  border: 0 !important;
  border-radius: 15px !important;
  background: #f1f1ee !important;
}

@media (max-width: 430px), (pointer: coarse) {
  .app-modal .modal-panel {
    background: #fff !important;
  }

  .utility-card {
    padding: 15px !important;
  }

  .workspace-app,
  .utility-app,
  .character-studio.ai-room,
  .api-settings {
    padding-right: 2px !important;
    padding-left: 2px !important;
  }
}