/*!
 * tqc-ui.css — TimeQL Consumer UI design system (tokens + components)
 *
 * SOURCE OF TRUTH (read in this order, do not improvise values):
 *   1. docs/architecture/timeql-consumer-ui-redesign.md   — binding design-system spec
 *   2. docs/design/timeql-consumer-2026-07/analysis-proto.json    — exact_css per component (verbatim)
 *   3. docs/design/timeql-consumer-2026-07/analysis-redesign.json — dark values / PC layouts / night room / plan-lock
 *   4. docs/design/timeql-consumer-2026-07/spec.dc.html   — confirmed product spec (visual/motion rules §5)
 *   5. docs/design/timeql-consumer-2026-07/prototype.dc.html — reference when exact_css is ambiguous
 *
 * Namespace: all classes `.tqc-*`, all custom properties `--tqc-*`, all keyframes `tqc-*`.
 * Never use bare `tq-`/`tql-` or unprefixed `--bg` style vars — collides with dash-common.css / timeql.css.
 *
 * RELEASE NOTE: this file is served flat from /app/ (app.mount("/app", ...)). Every page reference
 * MUST include a `?v=<release>` query string, or the asset falls into the 7-day stale-while-revalidate
 * cache lane. When this file changes in a production-bound commit, bump sw.js RELEASE and make sure
 * this path is present in STATIC_SHELL in the same commit.
 *
 * No @import for Google Fonts here — pages/gallery load 'M PLUS Rounded 1c' + 'JetBrains Mono' via
 * <link rel="preconnect">/<link rel="stylesheet"> in the HTML head. This file only *references* the
 * font-family names.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* -- 14 theme variables (light) -- */
  --tqc-bg: #fbf8f3;
  --tqc-card: #ffffff;
  --tqc-line: #efe9de;
  --tqc-tx: #111113;
  --tqc-tx2: #56565c;
  --tqc-tx3: #6f6d68;
  --tqc-mut: #76736d;
  --tqc-chip: #f0ebe1;
  --tqc-ink: #17171b;
  --tqc-heroA: #3a3dbe;
  --tqc-heroB: #6c4bb4;
  --tqc-navbg: #ffffff;
  --tqc-accent: #6c4bb4;
  --tqc-selbg: #efeafa;

  /* -- semantic fixed colors (theme-independent, §2.2) -- */
  --tqc-good: #1f8a5b;
  --tqc-good-bright: #4fc98a;
  --tqc-good-soft: #e7f4ec;
  --tqc-good-line: #cfe8da;
  --tqc-good-hero: #a8f0c8;
  --tqc-good-sel: #16a34a;

  --tqc-warn: #c9453f;
  --tqc-warn-hero-1: #ff9e9e;
  --tqc-warn-hero-2: #ffc9c9;
  --tqc-warn-chip-bg: rgba(224, 102, 102, .28);
  --tqc-warn-chip-border: rgba(255, 150, 150, .5);

  --tqc-unread: #e0663f;
  --tqc-unread-pulse: rgba(224, 102, 63, .55);

  --tqc-amber: #d9a441;
  --tqc-amber-chip-tx: #8c5a11;
  --tqc-amber-chip-bg: #fdeeca;
  --tqc-gold-chip-tx: #ffd794;
  --tqc-gold-chip-bg: rgba(255, 215, 148, .25);
  --tqc-streak: #c96a2e;
  --tqc-icon-gold: #ffc457;

  --tqc-tag-chara-bg: #e7f4ec;
  --tqc-tag-info-bg: #eeeef8;
  --tqc-done-bg: #e7f4ec;

  /* カレンダー日別カテゴリ着色 (旧cat-lucky/bad/mixed移植)。card基準のcolor-mixなので
     ダークテーマは自動追従 — darkレーンでの上書き不要 */
  --tqc-cal-lucky-bg: color-mix(in srgb, var(--tqc-amber) 12%, var(--tqc-card));
  --tqc-cal-lucky-line: color-mix(in srgb, var(--tqc-amber) 40%, transparent);
  --tqc-cal-mixed-line: color-mix(in srgb, var(--tqc-amber) 32%, transparent);
  --tqc-cal-care-bg: color-mix(in srgb, var(--tqc-tx3) 11%, var(--tqc-card));
  --tqc-cal-tag-bad-bg: color-mix(in srgb, var(--tqc-warn) 12%, var(--tqc-card));

  /* room (夜空) — theme-independent, always dark */
  --tqc-room-bg: linear-gradient(180deg, #141220, #1a1830);
  --tqc-room-row: linear-gradient(135deg, #1a1830, #2c2450);
  --tqc-room-lavender: #9d8bd4;
  --tqc-room-chip-tx: #b4a8e0;
  --tqc-room-bubble-tx: #e8e5f2;
  --tqc-room-card-bg: #f5f2ff;
  --tqc-room-card-tx: #454060;
  --tqc-room-star: #ffd794;
  --tqc-room-send: linear-gradient(135deg, #9d8bd4, #6c4bb4);
  --tqc-room-avatar-bg: #0f0e1c;
  --tqc-room-avatar-border: #3d3566;
  --tqc-room-muted: #8e8d8a;

  /* ink panel internals */
  --tqc-ink-deep: #0f0f12;
  --tqc-ink-line: #2a2a30;
  --tqc-ink-mut: #8e8d8a;
  --tqc-ink-tx: #f5f4f1;

  /* weekday */
  --tqc-sun: #c9453f;
  --tqc-sat: #3a3dbe;

  /* avatar gradients (all 135deg) */
  --tqc-grad-user: linear-gradient(135deg, #c9b5f0, #6c4bb4);
  --tqc-grad-talking: linear-gradient(135deg, #a8e0c2, #1f8a5b);
  --tqc-grad-coach: linear-gradient(135deg, #2a2a30, #17171b);
  --tqc-grad-un: linear-gradient(135deg, #3a3dbe, #6c4bb4);
  --tqc-grad-warm: linear-gradient(135deg, #f0c7a8, #c96a2e);
  --tqc-grad-dream: linear-gradient(135deg, #b5c8f0, #3a3dbe);
  --tqc-grad-pink: linear-gradient(135deg, #e8b3d8, #a4508b);

  /* hero gradients (button/FAB/me-bubble direction is reversed vs hero-card direction) */
  --tqc-hero-card-grad: linear-gradient(135deg, var(--tqc-heroA), var(--tqc-heroB));
  --tqc-hero-btn-grad: linear-gradient(135deg, var(--tqc-heroB), var(--tqc-heroA));
}

/* Dark via explicit attribute */
:root[data-tqc-theme="dark"] {
  --tqc-bg: #141218;
  --tqc-card: #1d1a24;
  --tqc-line: #2e2a38;
  --tqc-tx: #f5f4f1;
  --tqc-tx2: #b4b2ab;
  --tqc-tx3: #b0aea9;
  --tqc-mut: #9b989e;
  --tqc-chip: #262230;
  --tqc-ink: #0b0a0e;
  --tqc-heroA: #4b4ed6;
  --tqc-heroB: #7a54cc;
  --tqc-navbg: #1d1a24;
  --tqc-accent: #9d8bd4;
  --tqc-selbg: rgba(157, 139, 212, .14);

  --tqc-good-soft: rgba(79, 201, 138, .12);

  --tqc-tag-chara-bg: rgba(79, 201, 138, .12);
  --tqc-tag-info-bg: rgba(123, 126, 240, .14);
  --tqc-done-bg: rgba(79, 201, 138, .15);

  /* legacy-token bridge: 共有モジュール(chara-challenge-ui)が dash-common の
     --bg-elev (light固定) を参照するため、tqcダークでは card に付け替える */
  --bg-elev: var(--tqc-card);
}

/* Dark via prefers-color-scheme (auto mode) — only applies when no explicit light override */
@media (prefers-color-scheme: dark) {
  :root:not([data-tqc-theme="light"]) {
    --tqc-bg: #141218;
    --tqc-card: #1d1a24;
    --tqc-line: #2e2a38;
    --tqc-tx: #f5f4f1;
    --tqc-tx2: #b4b2ab;
    --tqc-tx3: #b0aea9;
    --tqc-mut: #9b989e;
    --tqc-chip: #262230;
    --tqc-ink: #0b0a0e;
    --tqc-heroA: #4b4ed6;
    --tqc-heroB: #7a54cc;
    --tqc-navbg: #1d1a24;
    --tqc-accent: #9d8bd4;
    --tqc-selbg: rgba(157, 139, 212, .14);

    --tqc-good-soft: rgba(79, 201, 138, .12);

    --tqc-tag-chara-bg: rgba(79, 201, 138, .12);
    --tqc-tag-info-bg: rgba(123, 126, 240, .14);
    --tqc-done-bg: rgba(79, 201, 138, .15);

    --bg-elev: var(--tqc-card);
  }
}

/* ==========================================================================
   2. BASE SCOPE
   ========================================================================== */

.tqc-app {
  background: var(--tqc-bg);
  color: var(--tqc-tx);
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  transition: background .35s;
  scrollbar-width: none;
}

.tqc-app * {
  scrollbar-width: none;
}

.tqc-app *::-webkit-scrollbar {
  display: none;
}

/* Components set their own display (flex/inline-flex), which would defeat the
   UA's [hidden] { display: none } — enforce it inside the tqc scope. */
.tqc-app [hidden] {
  display: none !important;
}

.tqc-app a {
  color: var(--tqc-accent);
  text-decoration: none;
}

.tqc-app a:hover {
  color: color-mix(in srgb, var(--tqc-accent) 70%, black);
}

:root[data-tqc-theme="dark"] .tqc-app a:hover {
  color: color-mix(in srgb, var(--tqc-accent) 80%, white);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tqc-theme="light"]) .tqc-app a:hover {
    color: color-mix(in srgb, var(--tqc-accent) 80%, white);
  }
}

.tqc-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Library-level keyboard focus indicator — components below set
   outline:none/border:none for the mouse/touch appearance, so
   :focus-visible must be restored explicitly at this specificity. */
.tqc-composer input:focus-visible,
.tqc-composer textarea:focus-visible,
.tqc-field input:focus-visible,
.tqc-field textarea:focus-visible,
.tqc-btn:focus-visible,
.tqc-chip:focus-visible,
.tqc-nav-item:focus-visible,
.tqc-thread-row:focus-visible {
  outline: 2px solid var(--tqc-accent);
  outline-offset: 2px;
}

/* Page-specific styles frequently remove native outlines. Keep one reliable
   keyboard affordance across migrated and legacy controls. */
.tqc-app :where(a[href], button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--tqc-accent) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   3. KEYFRAMES (verbatim from analysis-proto.json "motions")
   ========================================================================== */

@keyframes tqc-fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes tqc-popIn {
  0% { transform: scale(.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes tqc-slideUp {
  from { transform: translateY(103%); }
  to { transform: none; }
}

@keyframes tqc-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tqc-dotB {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-4px); opacity: 1; }
}

@keyframes tqc-pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(224, 102, 63, .55); }
  100% { box-shadow: 0 0 0 9px rgba(224, 102, 63, 0); }
}

@keyframes tqc-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

@keyframes tqc-spark {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.1) rotate(40deg); opacity: 0; }
}

@keyframes tqc-shimmer {
  from { background-position: -260px 0; }
  to { background-position: 260px 0; }
}

@keyframes tqc-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes tqc-spin {
  to { transform: rotate(360deg); }
}

@keyframes tqc-fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes tqc-slideDown {
  from { transform: none; }
  to { transform: translateY(103%); }
}

@keyframes tqc-popOut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.5); opacity: 0; }
}

/* ==========================================================================
   4. SHELL
   ========================================================================== */

.tqc-screen {
  position: absolute;
  inset: 44px 0 0 0;
  overflow-y: auto;
  padding-bottom: 120px;
  animation: tqc-fadeUp .32s ease-out;
}

.tqc-bottom-nav {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--tqc-navbg);
  border: 1.5px solid var(--tqc-line);
  border-radius: 28px;
  padding: 4px 8px;
  box-shadow: 0 16px 34px -16px rgba(17, 17, 19, .35);
  transition: background .35s;
}

.tqc-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  cursor: pointer;
  transition: transform .15s, color .2s;
  color: var(--tqc-tx2);
  background: none;
  border: none;
}

.tqc-nav-item svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
}

.tqc-nav-item .tqc-nav-label {
  font: 800 9px 'M PLUS Rounded 1c', sans-serif;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .tqc-bottom-nav {
    left: 12px;
    right: 12px;
    padding-inline: 6px;
  }

  .tqc-nav-item {
    min-width: 0;
    padding-inline: 8px;
  }
}

.tqc-nav-item.is-active {
  color: var(--tqc-accent);
}

.tqc-nav-item:active {
  transform: scale(.88);
}

.tqc-nav-fab {
  position: relative;
  margin-top: -34px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--tqc-hero-btn-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 12px 24px -8px rgba(58, 61, 190, .65), 0 0 0 5px var(--tqc-bg);
  cursor: pointer;
  animation: tqc-floaty 3.2s ease-in-out infinite;
  border: none;
}

.tqc-nav-fab svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}

.tqc-nav-fab:active {
  transform: scale(.88);
}

.tqc-unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  background: var(--tqc-unread);
  color: #17171b;
  font: 800 10.5px/19px 'M PLUS Rounded 1c', sans-serif;
  text-align: center;
  border: 2px solid var(--tqc-bg);
  animation: tqc-pulseDot 2s infinite;
  padding: 0 2px;
}

/* smaller unread badges (nav item / top nav pill) reuse the same class with a size modifier */
.tqc-unread-badge--sm {
  min-width: 16px;
  height: 16px;
  font: 800 9.5px/16px 'M PLUS Rounded 1c', sans-serif;
}

.tqc-top-nav {
  display: none;
}

@media (min-width: 1080px) {
  .tqc-top-nav {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    align-items: center;
    gap: 18px;
    padding: 0 24px;
    border-bottom: 1.5px solid var(--tqc-line);
    z-index: 15;
    background: var(--tqc-navbg);
    transition: background .35s;
  }

  .tqc-screen {
    inset: 60px 0 0 0;
    padding: 24px max(28px, calc(50% - 560px)) 60px;
  }

  .tqc-screen--talklist {
    position: absolute;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 404px;
    overflow-y: auto;
    padding: 0 0 30px;
    animation: tqc-fadeUp .32s ease-out;
  }

  .tqc-bottom-nav {
    display: none;
  }
}

.tqc-top-nav .tqc-top-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 800 14px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

.tqc-top-nav .tqc-top-logo img {
  width: 22px;
  height: 22px;
}

:root[data-tqc-theme="dark"] .tqc-top-nav .tqc-top-logo img {
  filter: invert(1) brightness(1.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tqc-theme="light"]) .tqc-top-nav .tqc-top-logo img {
    filter: invert(1) brightness(1.4);
  }
}

.tqc-top-nav .tqc-top-clock {
  margin-left: auto;
  font: 800 13px 'JetBrains Mono', monospace;
  color: var(--tqc-tx3);
}

.tqc-top-nav .tqc-top-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tqc-grad-user);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 13px 'M PLUS Rounded 1c', sans-serif;
  color: #fff;
}

.tqc-pill-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--tqc-chip);
  border-radius: 999px;
  padding: 4px;
}

.tqc-pill-tab {
  position: relative;
  padding: 8px 17px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s;
  color: var(--tqc-tx2);
  font: 700 12px 'M PLUS Rounded 1c', sans-serif;
  background: none;
  border: none;
}

.tqc-pill-tab.is-active {
  background: var(--tqc-hero-btn-grad);
  color: #fff;
  font: 800 12px 'M PLUS Rounded 1c', sans-serif;
}

.tqc-pill-tab:active {
  transform: scale(.95);
}

.tqc-pill-tab .tqc-unread-badge--sm {
  top: -4px;
  right: -2px;
}

.tqc-section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tqc-section-h .tqc-section-h-title {
  font: 800 15px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

.tqc-section-h .tqc-section-h-link {
  font: 700 12px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-accent);
  cursor: pointer;
}

/* ==========================================================================
   5. SURFACES
   ========================================================================== */

.tqc-card {
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  border-radius: 24px;
  box-shadow: 0 4px 12px -8px rgba(17, 17, 19, .12);
  padding: 17px;
  transition: transform .15s, background .35s;
}

.tqc-card:active {
  transform: scale(.98);
}

.tqc-card--ink {
  background: var(--tqc-ink);
  color: var(--tqc-ink-tx);
  border: none;
  border-radius: 26px;
}

.tqc-card--hero {
  background: var(--tqc-hero-card-grad);
  color: #fff;
  border: none;
  border-radius: 28px;
  box-shadow: 0 14px 30px -16px rgba(58, 61, 190, .55);
}

.tqc-card--night {
  background: var(--tqc-room-row);
  color: var(--tqc-ink-tx);
  border: none;
}

.tqc-list-card {
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  border-radius: 24px;
  overflow: hidden;
}

.tqc-list-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--tqc-line);
  cursor: pointer;
}

.tqc-list-row:last-child {
  border-bottom: none;
}

.tqc-list-row:active {
  opacity: .7;
}

.tqc-list-row .tqc-list-row-icon {
  width: 17px;
  height: 17px;
  stroke: var(--tqc-tx2);
  stroke-width: 2;
}

.tqc-list-row .tqc-list-row-label {
  flex: 1;
  font: 800 12.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

.tqc-list-row .tqc-list-row-value {
  font: 700 11px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx3);
}

.tqc-list-row .tqc-list-row-value--on {
  color: var(--tqc-good);
}

.tqc-disclaimer {
  text-align: center;
  font: 600 10px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx2);
}

.tqc-disclaimer--thread {
  margin-top: 7px;
  font: 500 9px 'M PLUS Rounded 1c', sans-serif;
}

/* ==========================================================================
   6. CONTROLS
   ========================================================================== */

.tqc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font: 800 12.5px 'M PLUS Rounded 1c', sans-serif;
  padding: 9px 20px;
  cursor: pointer;
  transition: transform .15s;
  border: none;
  white-space: nowrap;
}

.tqc-btn--primary {
  background: var(--tqc-hero-btn-grad);
  color: #fff;
}

.tqc-btn--primary:active {
  transform: scale(.97);
}

.tqc-btn--float {
  box-shadow: 0 12px 26px -10px rgba(58, 61, 190, .5);
}

.tqc-btn--done {
  background: var(--tqc-done-bg);
  color: #1f8a5b;
}

.tqc-btn--ghost {
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  color: var(--tqc-tx2);
  font: 700 12.5px 'M PLUS Rounded 1c', sans-serif;
  padding: 9px 16px;
}

.tqc-btn--ghost:active {
  transform: scale(.96);
}

.tqc-btn--text {
  background: none;
  color: var(--tqc-accent);
  font: 700 12px 'M PLUS Rounded 1c', sans-serif;
  padding: 6px 4px;
}

.tqc-btn--text:active {
  transform: scale(.95);
}

.tqc-btn--sm {
  padding: 6px 13px;
  font-size: 11px;
}

.tqc-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 15px;
  font: 700 12px 'M PLUS Rounded 1c', sans-serif;
  cursor: pointer;
  transition: transform .15s;
  white-space: nowrap;
  border: 1.5px solid var(--tqc-line);
  background: var(--tqc-card);
  color: var(--tqc-tx2);
}

.tqc-chip:active {
  transform: scale(.94);
}

.tqc-chip--filter {
  padding: 8px 15px;
}

.tqc-chip--filter.is-on {
  background: var(--tqc-tx);
  color: var(--tqc-bg);
  font: 800 12px 'M PLUS Rounded 1c', sans-serif;
  border: none;
}

.tqc-chip--locked {
  background: transparent;
  border: 1.5px dashed var(--tqc-line);
  color: var(--tqc-tx3);
  cursor: default;
}

.tqc-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font: 800 9.5px 'M PLUS Rounded 1c', sans-serif;
  padding: 2px 9px;
  white-space: nowrap;
}

.tqc-badge--live {
  color: var(--tqc-ink-deep);
  background: var(--tqc-good-bright);
  font-size: 10px;
  padding: 2px 8px;
}

.tqc-badge--plan {
  color: var(--tqc-accent);
  background: var(--tqc-selbg);
}

.tqc-badge--streak {
  color: var(--tqc-amber-chip-tx);
  background: var(--tqc-amber-chip-bg);
  animation: tqc-popIn .45s;
}

.tqc-badge--mood {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 13px;
  background: var(--tqc-card);
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  line-height: 1;
}

.tqc-toggle {
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  padding: 3px;
  transition: background .25s;
  background: #d9d1c0;
  cursor: pointer;
  border: none;
  flex: none;
}

.tqc-toggle.is-on {
  background: #9d8bd4;
}

.tqc-toggle .tqc-toggle-knob {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s cubic-bezier(.3, 1.4, .4, 1);
  transform: translateX(0);
}

.tqc-toggle.is-on .tqc-toggle-knob {
  transform: translateX(19px);
}

.tqc-field {
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  border-radius: 18px;
  padding: 12px 15px;
}

.tqc-field .tqc-field-label {
  font: 800 10px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx3);
  letter-spacing: .04em;
}

.tqc-field input,
.tqc-field textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  border: none;
  outline: none;
  background: none;
  font: 600 13.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

.tqc-mono-box {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  background: var(--tqc-chip);
  border-radius: 12px;
  padding: 9px 12px;
  color: var(--tqc-tx);
}

.tqc-lock {
  opacity: .62;
  position: relative;
}

.tqc-lock .tqc-badge--plan {
  margin-left: auto;
}

/* ==========================================================================
   7. HOME
   ========================================================================== */

.tqc-now {
  margin: 16px 22px 0;
  background: var(--tqc-ink);
  border-radius: 26px;
  padding: 15px 18px;
  color: var(--tqc-ink-tx);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform .15s;
}

.tqc-now:active {
  transform: scale(.98);
}

.tqc-now .tqc-now-label {
  font: 800 9.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-ink-mut);
  letter-spacing: .1em;
}

.tqc-now .tqc-now-clock {
  font: 800 21px 'JetBrains Mono', monospace;
  color: #fff;
}

.tqc-now .tqc-now-koku {
  font: 800 9px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-good-bright);
  background: rgba(79, 201, 138, .14);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.tqc-now .tqc-now-divider {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: var(--tqc-ink-line);
}

.tqc-now .tqc-now-dirlabel {
  font: 800 12px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-ink-mut);
}

.tqc-now .tqc-now-dir {
  font: 800 24px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-good-bright);
}

.tqc-now .tqc-now-dir-suffix {
  font: 700 11.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-ink-mut);
}

.tqc-now .tqc-now-note {
  font: 600 10.5px/1.6 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-ink-mut);
}

.tqc-now .tqc-now-note b {
  color: var(--tqc-room-lavender);
}

.tqc-now .tqc-now-compass {
  animation: tqc-sway 5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.tqc-week {
  margin: 14px 22px 0;
  background: var(--tqc-hero-card-grad);
  border-radius: 28px;
  padding: 20px;
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(58, 61, 190, .55);
}

.tqc-week .tqc-week-title {
  font: 800 16px 'M PLUS Rounded 1c', sans-serif;
}

.tqc-week .tqc-week-status {
  font: 800 10.5px 'M PLUS Rounded 1c', sans-serif;
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 3px 12px;
}

.tqc-week .tqc-week-range {
  font: 700 10.5px 'M PLUS Rounded 1c', sans-serif;
  opacity: .75;
}

.tqc-week .tqc-week-summary {
  margin-top: 10px;
  font: 700 14px/1.75 'M PLUS Rounded 1c', sans-serif;
}

.tqc-week .tqc-week-note {
  margin-top: 10px;
  background: rgba(255, 255, 255, .13);
  border-radius: 16px;
  padding: 10px 14px;
  font: 700 12px/1.7 'M PLUS Rounded 1c', sans-serif;
  animation: tqc-fadeUp .25s ease-out;
}

.tqc-week .tqc-week-days {
  display: flex;
  gap: 5px;
  margin-top: 16px;
}

.tqc-week .tqc-week-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tqc-day {
  flex: 1;
  border-radius: 16px;
  padding: 8px 0 6px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s, background .2s;
  background: rgba(255, 255, 255, .16);
}

.tqc-day:active {
  transform: scale(.93);
}

.tqc-day .tqc-day-label {
  font: 800 9.5px 'M PLUS Rounded 1c', sans-serif;
  opacity: .85;
}

.tqc-day .tqc-day-grade {
  font: 800 16px 'M PLUS Rounded 1c', sans-serif;
  color: #fff;
}

.tqc-day .tqc-day-grade--dim {
  color: rgba(255, 255, 255, .75);
}

.tqc-day .tqc-day-grade--good {
  color: var(--tqc-good-hero);
}

.tqc-day .tqc-day-sub {
  font: 800 8px 'M PLUS Rounded 1c', sans-serif;
  white-space: nowrap;
  opacity: .75;
}

.tqc-day.is-sel {
  background: rgba(255, 255, 255, .95);
  color: #111113;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3);
}

.tqc-day.is-sel .tqc-day-label {
  color: #6c4bb4;
  opacity: 1;
}

.tqc-day.is-sel .tqc-day-grade--good {
  color: var(--tqc-good-sel);
}

.tqc-day.is-sel .tqc-day-sub {
  color: var(--tqc-amber-chip-tx);
  opacity: 1;
}

.tqc-day.is-warn {
  background: var(--tqc-warn-chip-bg);
  border: 1px solid var(--tqc-warn-chip-border);
}

.tqc-day.is-warn .tqc-day-label {
  color: var(--tqc-warn-hero-2);
  opacity: 1;
}

.tqc-day.is-warn .tqc-day-grade {
  color: var(--tqc-warn-hero-1);
}

.tqc-day.is-warn .tqc-day-sub {
  color: var(--tqc-warn-hero-2);
  opacity: 1;
}

.tqc-almanac-chip {
  font: 800 10.5px 'M PLUS Rounded 1c', sans-serif;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.tqc-almanac-chip--gold {
  background: var(--tqc-gold-chip-bg);
  color: var(--tqc-gold-chip-tx);
}

.tqc-almanac-chip--red {
  background: rgba(224, 102, 102, .25);
  color: var(--tqc-warn-hero-2);
}

.tqc-almanac-chip--white {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.tqc-avatar-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
}

.tqc-avatar-row .tqc-avatar-row-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 62px;
  cursor: pointer;
  transition: transform .15s;
}

.tqc-avatar-row .tqc-avatar-row-item:active {
  transform: scale(.93);
}

.tqc-avatar-row .tqc-avatar-row-name {
  font: 700 10.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

/* ==========================================================================
   8. TALK
   ========================================================================== */

.tqc-avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 800 17px 'M PLUS Rounded 1c', sans-serif;
  flex: none;
}

.tqc-avatar-letter {
  font-weight: 800;
  color: #fff;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* Brand-mark image inside a gradient avatar (UN etc.) — always inverted for dark surfaces */
.tqc-avatar-img {
  display: block;
  filter: invert(1) brightness(1.4);
}

.tqc-avatar--xs {
  width: 30px;
  height: 30px;
}

.tqc-avatar--xs .tqc-avatar-letter {
  font-size: 12px;
}

.tqc-avatar--sm {
  width: 36px;
  height: 36px;
}

.tqc-avatar--sm .tqc-avatar-letter {
  font-size: 14px;
}

.tqc-avatar--md {
  width: 44px;
  height: 44px;
}

.tqc-avatar--md .tqc-avatar-letter {
  font-size: 16px;
}

.tqc-avatar--lg {
  width: 46px;
  height: 46px;
}

.tqc-avatar--lg .tqc-avatar-letter {
  font-size: 17px;
}

.tqc-avatar--xl {
  width: 56px;
  height: 56px;
}

.tqc-avatar--xl .tqc-avatar-letter {
  font-size: 19px;
}

.tqc-avatar--ring-unread {
  box-shadow: 0 0 0 2px var(--tqc-bg), 0 0 0 4px rgba(224, 102, 63, .45);
}

.tqc-avatar--ring-read {
  box-shadow: 0 0 0 2px var(--tqc-bg), 0 0 0 4px var(--tqc-line);
}

.tqc-avatar--room {
  background: var(--tqc-room-avatar-bg);
  border: 1px solid var(--tqc-room-avatar-border);
}

.tqc-avatar--room .tqc-avatar-ring {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(157, 139, 212, .5);
}

.tqc-avatar--xl.tqc-avatar--room .tqc-avatar-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(157, 139, 212, .5);
}

.tqc-avatar--lg.tqc-avatar--room .tqc-avatar-ring {
  width: 31px;
  height: 31px;
  border: 1.5px solid rgba(157, 139, 212, .5);
}

.tqc-avatar--room .tqc-avatar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tqc-room-star);
}

/* Prototype rhythm: first sheet card 13px below header, subsequent cards 9px apart */
.tqc-sheet-option + .tqc-sheet-option {
  margin-top: 9px;
}

.tqc-unread-badge--avatar {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--tqc-unread);
  color: #fff;
  font: 800 10px/17px 'M PLUS Rounded 1c', sans-serif;
  text-align: center;
  border: 2px solid var(--tqc-bg);
}

.tqc-mood-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 13px;
  background: var(--tqc-card);
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  line-height: 1;
}

.tqc-thread-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 22px;
  padding: 11px 13px;
  cursor: pointer;
  transition: transform .15s;
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  box-shadow: 0 4px 12px -8px rgba(17, 17, 19, .1);
}

.tqc-thread-row:active {
  transform: scale(.975);
}

.tqc-thread-row .tqc-thread-row-name {
  font: 800 13.5px 'M PLUS Rounded 1c', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--tqc-tx);
}

.tqc-thread-row .tqc-thread-row-time {
  margin-left: auto;
  font: 700 9.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx2);
}

.tqc-thread-row .tqc-thread-row-sub {
  margin-top: 2px;
  font: 600 11px/1.5 'M PLUS Rounded 1c', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tqc-tx3);
}

.tqc-thread-row .tqc-thread-row-unread {
  flex: none;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  background: var(--tqc-unread);
  color: #fff;
  font: 800 10.5px/19px 'M PLUS Rounded 1c', sans-serif;
  text-align: center;
  animation: tqc-popIn .4s;
}

.tqc-thread-row--ink {
  background: var(--tqc-ink);
  color: var(--tqc-ink-tx);
  border: none;
}

.tqc-thread-row--ink .tqc-thread-row-name {
  color: var(--tqc-ink-tx);
}

.tqc-thread-row--ink .tqc-thread-row-sub {
  color: #b4b2ab;
}

.tqc-thread-row--night {
  background: var(--tqc-room-row);
  color: var(--tqc-ink-tx);
  border: none;
}

.tqc-thread-row--night .tqc-thread-row-name {
  color: var(--tqc-ink-tx);
}

.tqc-thread-row--night .tqc-thread-row-sub {
  color: #b4b2ab;
}

.tqc-thread-tag {
  font: 800 8.5px 'M PLUS Rounded 1c', sans-serif;
  border-radius: 999px;
  padding: 2px 7px;
  flex: none;
}

.tqc-thread-tag--room {
  color: #0f0f12;
  background: #9d8bd4;
}

.tqc-thread-tag--coach {
  color: #ffc457;
  background: rgba(255, 196, 87, .14);
}

.tqc-thread-tag--chara {
  color: #1f8a5b;
  background: var(--tqc-tag-chara-bg);
}

.tqc-thread-tag--reading {
  color: var(--tqc-accent);
  background: var(--tqc-selbg);
}

.tqc-thread-tag--info {
  color: #3a3dbe;
  background: var(--tqc-tag-info-bg);
}

.tqc-bubble {
  border-radius: 20px 20px 20px 7px;
  padding: 12px 15px;
  font: 600 13px/1.75 'M PLUS Rounded 1c', sans-serif;
  animation: tqc-fadeUp .3s ease-out;
  max-width: 86%;
}

.tqc-bubble--them {
  background: var(--tqc-card);
  border: 1px solid var(--tqc-line);
  color: var(--tqc-tx);
  box-shadow: 0 2px 8px -6px rgba(17, 17, 19, .15);
}

.tqc-bubble--me {
  align-self: flex-end;
  max-width: 80%;
  background: var(--tqc-hero-btn-grad);
  border-radius: 20px 20px 7px 20px;
  color: #fff;
}

.tqc-night .tqc-bubble--them {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(157, 139, 212, .25);
  color: var(--tqc-room-bubble-tx);
}

.tqc-typing {
  display: flex;
  gap: 9px;
  animation: tqc-fadeUp .25s ease-out;
}

.tqc-typing .tqc-typing-bubble {
  border-radius: 20px 20px 20px 7px;
  padding: 14px 16px;
  display: flex;
  gap: 5px;
  align-items: center;
  background: var(--tqc-card);
  border: 1px solid var(--tqc-line);
  color: var(--tqc-mut);
}

.tqc-night .tqc-typing .tqc-typing-bubble {
  background: rgba(255, 255, 255, .07);
  border: none;
  color: var(--tqc-room-lavender);
}

.tqc-typing .tqc-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: tqc-dotB 1.1s infinite;
}

.tqc-typing .tqc-typing-dot:nth-child(2) { animation-delay: .18s; }
.tqc-typing .tqc-typing-dot:nth-child(3) { animation-delay: .36s; }

.tqc-quick {
  display: inline-flex;
  align-items: center;
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  border-radius: 999px;
  padding: 8px 15px;
  font: 800 11.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-accent);
  cursor: pointer;
  transition: transform .15s;
  box-shadow: 0 2px 8px -5px rgba(17, 17, 19, .2);
}

.tqc-quick:active {
  transform: scale(.93);
}

.tqc-night .tqc-quick {
  background: rgba(157, 139, 212, .15);
  border: 1.5px solid rgba(157, 139, 212, .4);
  color: var(--tqc-room-chip-tx);
  box-shadow: none;
}

.tqc-quick--number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 8px 16px;
}

.tqc-quick-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 2px 10px;
  animation: tqc-fadeUp .3s ease-out;
}

.tqc-card-msg {
  max-width: 90%;
  border-radius: 20px;
  padding: 14px 16px;
  animation: tqc-fadeUp .35s ease-out;
  background: var(--tqc-selbg);
  color: var(--tqc-tx);
}

.tqc-card-msg .tqc-card-msg-label {
  font: 800 9.5px 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: .08em;
  color: var(--tqc-accent);
}

.tqc-card-msg .tqc-card-msg-title {
  margin-top: 4px;
  font: 800 13.5px 'M PLUS Rounded 1c', sans-serif;
}

.tqc-card-msg .tqc-card-msg-body {
  margin-top: 4px;
  font: 600 12px/1.75 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx2);
}

.tqc-night .tqc-card-msg {
  background: var(--tqc-room-card-bg);
  color: #141220;
}

.tqc-night .tqc-card-msg .tqc-card-msg-label {
  color: #6c4bb4;
}

.tqc-night .tqc-card-msg .tqc-card-msg-body {
  color: var(--tqc-room-card-tx);
}

.tqc-composer {
  flex: none;
  padding: 8px 16px 14px;
}

.tqc-composer .tqc-composer-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tqc-composer input {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  padding: 13px 18px;
  font: 600 13px 'M PLUS Rounded 1c', sans-serif;
  outline: none;
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  color: var(--tqc-tx);
}

.tqc-night .tqc-composer input {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(157, 139, 212, .3);
  color: var(--tqc-ink-tx);
}

.tqc-composer .tqc-composer-send {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tqc-hero-btn-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(58, 61, 190, .6);
  cursor: pointer;
  flex: none;
  border: none;
  transition: transform .15s;
}

.tqc-composer .tqc-composer-send:active {
  transform: scale(.88);
}

.tqc-night .tqc-composer .tqc-composer-send {
  background: var(--tqc-room-send);
  color: #141220;
  box-shadow: 0 8px 18px -8px rgba(157, 139, 212, .6);
}

/* ==========================================================================
   9. OVERLAYS
   ========================================================================== */

.tqc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 19, .4);
  z-index: 220;
  animation: tqc-fadeIn .25s;
}

.tqc-scrim.is-closing,
.tqc-modal-scrim.is-closing {
  animation: tqc-fadeOut .25s ease-out forwards;
}

.tqc-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 221;
  max-width: 460px;
  margin: 0 auto;
  background: var(--tqc-bg);
  border-radius: 32px 32px 0 0;
  padding: 14px 20px 30px;
  animation: tqc-slideUp .38s cubic-bezier(.28, 1.3, .45, 1);
  box-shadow: 0 -18px 44px -20px rgba(17, 17, 19, .4);
}

.tqc-sheet.is-closing {
  animation: tqc-slideDown .3s ease-in forwards;
}

.tqc-sheet .tqc-grabber,
.tqc-grabber {
  width: 42px;
  height: 5px;
  border-radius: 3px;
  background: var(--tqc-line);
  margin: 0 auto;
}

.tqc-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 231;
  width: 320px;
  background: var(--tqc-bg);
  border-radius: 28px;
  padding: 24px;
  animation: tqc-popIn .35s cubic-bezier(.3, 1.3, .45, 1);
  text-align: center;
}

.tqc-modal.is-closing {
  animation: tqc-popOut .25s ease-in forwards;
}

.tqc-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 19, .45);
  z-index: 230;
  animation: tqc-fadeIn .25s;
}

.tqc-sheet:focus-visible,
.tqc-modal:focus-visible {
  outline: 2px solid var(--tqc-accent);
  outline-offset: -5px;
}

.tqc-sheet-option {
  margin-top: 13px;
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  border-radius: 22px;
  padding: 15px;
}

.tqc-sheet-option .tqc-sheet-option-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.tqc-sheet-option .tqc-sheet-option-icon--talking {
  background: var(--tqc-grad-talking);
}

.tqc-sheet-option .tqc-sheet-option-icon--reading {
  background: var(--tqc-grad-un);
}

.tqc-sheet-option .tqc-sheet-option-title {
  font: 800 13px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

.tqc-sheet-option .tqc-sheet-option-sub {
  font: 600 10px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx3);
}

/* ==========================================================================
   10. STATES
   ========================================================================== */

.tqc-spinner {
  position: relative;
  border-radius: 50%;
  border: 3px solid var(--tqc-line);
  border-top-color: var(--tqc-accent);
  animation: tqc-spin 1s linear infinite;
}

.tqc-shimmer {
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(157, 139, 212, .1) 25%, rgba(157, 139, 212, .25) 50%, rgba(157, 139, 212, .1) 75%);
  background-size: 260px 100%;
  animation: tqc-shimmer 1.1s linear infinite;
}

.tqc-shimmer + .tqc-shimmer {
  animation-delay: .15s;
}

.tqc-dots {
  display: flex;
  gap: 6px;
}

.tqc-dots .tqc-dot {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: var(--tqc-line);
}

.tqc-dots .tqc-dot.is-past {
  background: var(--tqc-accent);
}

.tqc-dots .tqc-dot.is-now {
  background: var(--tqc-hero-btn-grad);
}

.tqc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--tqc-tx2);
  text-align: center;
  padding: 40px 20px;
}

.tqc-empty .tqc-empty-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px dashed var(--tqc-mut);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tqc-empty .tqc-empty-label {
  font: 800 13px 'M PLUS Rounded 1c', sans-serif;
}

.tqc-spark {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  animation: tqc-spark .9s ease-out forwards;
}

/* ==========================================================================
   11. CALENDAR / COMPASS
   ========================================================================== */

.tqc-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tqc-cal-weekday {
  font: 800 9.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx3);
  text-align: center;
}

.tqc-cal-weekday--sun {
  color: var(--tqc-sun);
}

.tqc-cal-weekday--sat {
  color: var(--tqc-sat);
}

.tqc-cal-cell {
  border-radius: 12px;
  padding: 7px 2px 5px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, background .2s;
  min-height: 52px;
  border: 1.5px solid var(--tqc-line);
  background: var(--tqc-card);
}

.tqc-cal-cell:active {
  transform: scale(.9);
}

.tqc-cal-cell .tqc-cal-num {
  font: 800 12px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

.tqc-cal-cell .tqc-cal-num--sun {
  color: var(--tqc-sun);
}

.tqc-cal-cell .tqc-cal-num--sat {
  color: var(--tqc-sat);
}

.tqc-cal-cell .tqc-cal-rokuyo {
  font: 600 8px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx3);
}

.tqc-cal-cell .tqc-cal-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.tqc-cal-cell .tqc-cal-dot--good {
  background: var(--tqc-good);
}

.tqc-cal-cell .tqc-cal-dot--warn {
  background: var(--tqc-warn);
}

.tqc-cal-cell .tqc-cal-dot--mixed {
  background: var(--tqc-amber);
}

/* 日別カテゴリ着色 — 旧calendar.htmlの cat-lucky/bad/mixed を移植 (koyomi API day.category)。
   吉日=琥珀テント、要注意=沈み、混合=琥珀→灰グラデ。ドットより情報量が多いので
   カテゴリが取れるページではこちらを正とし、ドットは簡易表示用に残す。 */
.tqc-cal-cell--lucky {
  background: var(--tqc-cal-lucky-bg);
  border-color: var(--tqc-cal-lucky-line);
}

.tqc-cal-cell--care {
  background: var(--tqc-cal-care-bg);
  opacity: .82;
}

.tqc-cal-cell--mixed {
  background: linear-gradient(160deg, var(--tqc-cal-lucky-bg) 0%, transparent 55%, var(--tqc-cal-care-bg) 100%);
  border-color: var(--tqc-cal-mixed-line);
}

/* 暦注ミニチップ (万倍/天恩/寅/巳/己巳/甲子/庚申/天赦/不成就 — 最大3個) */
.tqc-cal-cell .tqc-cal-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: 2px;
  min-height: 12px;
}

.tqc-cal-tag {
  font: 800 8px 'M PLUS Rounded 1c', sans-serif;
  border-radius: 999px;
  padding: 1px 5px;
  white-space: nowrap;
  color: var(--tqc-amber-chip-tx);
  background: var(--tqc-amber-chip-bg);
}

.tqc-cal-tag--bad {
  color: var(--tqc-warn);
  background: var(--tqc-cal-tag-bad-bg);
}

.tqc-cal-tag--tensha {
  color: #fff;
  background: var(--tqc-amber);
}

/* 宿曜リズム行 (登録済みユーザーのみ、day.un.label) */
.tqc-cal-cell .tqc-cal-un {
  margin-top: 1px;
  font: 700 8px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tqc-cal-cell .tqc-cal-un--good { color: var(--tqc-good); }
.tqc-cal-cell .tqc-cal-un--bad { color: var(--tqc-warn); }

/* 凡例行 */
.tqc-cal-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 22px 0;
  font: 700 10px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx3);
}

.tqc-cal-legend .tqc-cal-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1.5px solid var(--tqc-line);
  margin-right: 4px;
  vertical-align: -2px;
}

.tqc-cal-legend .tqc-cal-legend-swatch--lucky {
  background: var(--tqc-cal-lucky-bg);
  border-color: var(--tqc-cal-lucky-line);
}

.tqc-cal-legend .tqc-cal-legend-swatch--mixed {
  background: linear-gradient(160deg, var(--tqc-cal-lucky-bg), var(--tqc-cal-care-bg));
  border-color: var(--tqc-cal-mixed-line);
}

.tqc-cal-legend .tqc-cal-legend-swatch--care {
  background: var(--tqc-cal-care-bg);
}

.tqc-cal-cell.is-today {
  background: var(--tqc-selbg);
}

.tqc-cal-cell.is-sel {
  border: 2px solid var(--tqc-accent);
  background: var(--tqc-selbg);
  box-shadow: 0 4px 10px -6px rgba(108, 75, 180, .4);
  padding: 7px 2px 5px;
}

.tqc-cal-cell.is-sel .tqc-cal-num {
  color: var(--tqc-accent);
}

.tqc-cal-cell--out {
  border-color: transparent;
  background: transparent;
  opacity: .35;
  cursor: default;
}

.tqc-cal-detail {
  margin: 16px 22px 0;
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  border-radius: 24px;
  padding: 17px;
  box-shadow: 0 4px 12px -8px rgba(17, 17, 19, .12);
  animation: tqc-fadeUp .3s ease-out;
}

.tqc-cal-detail .tqc-cal-detail-title {
  font: 800 15px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

.tqc-cal-detail .tqc-cal-detail-badge {
  font: 800 10px 'M PLUS Rounded 1c', sans-serif;
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
}

.tqc-cal-detail .tqc-cal-detail-badge--warn { background: var(--tqc-warn); }
.tqc-cal-detail .tqc-cal-detail-badge--good { background: #166b46; }
.tqc-cal-detail .tqc-cal-detail-badge--neutral { background: var(--tqc-tx3); }

.tqc-cal-detail .tqc-cal-detail-meta {
  display: flex;
  gap: 12px;
  font: 700 11.5px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx2);
}

.tqc-cal-detail .tqc-cal-detail-meta b {
  color: var(--tqc-tx);
}

.tqc-cal-detail .tqc-cal-detail-note {
  margin-top: 9px;
  font: 600 12px/1.8 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx2);
}

.tqc-cal-detail .tqc-cal-detail-cta {
  margin-top: 13px;
  background: var(--tqc-hero-btn-grad);
  color: #fff;
  border-radius: 999px;
  padding: 10px 0;
  text-align: center;
  font: 800 12.5px 'M PLUS Rounded 1c', sans-serif;
  cursor: pointer;
  transition: transform .15s;
}

.tqc-cal-detail .tqc-cal-detail-cta:active {
  transform: scale(.97);
}

.tqc-compass {
  margin: 14px 22px 0;
  background: var(--tqc-ink);
  border-radius: 28px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tqc-compass .tqc-compass-svg {
  width: 270px;
  height: 270px;
}

.tqc-compass .tqc-compass-needle {
  transition: transform .9s cubic-bezier(.3, 1.4, .4, 1);
  transform-origin: 100px 100px;
}

.tqc-compass .tqc-compass-sector {
  transition: opacity .5s;
}

.tqc-baro {
  display: block;
  width: 100%;
  height: auto;
}

.tqc-compass-mini {
  display: block;
}

.tqc-compass .tqc-compass-note {
  margin-top: 10px;
  font: 700 12px/1.7 'M PLUS Rounded 1c', sans-serif;
  color: #b4b2ab;
  text-align: center;
  animation: tqc-fadeUp .3s ease-out;
}

.tqc-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  padding: 11px 14px;
  cursor: pointer;
  transition: transform .15s, background .2s;
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
}

.tqc-slot:active {
  transform: scale(.97);
}

.tqc-slot .tqc-slot-time {
  font: 800 11px 'JetBrains Mono', monospace;
  color: var(--tqc-tx3);
}

.tqc-slot .tqc-slot-dir {
  flex: 1;
  font: 800 13px 'M PLUS Rounded 1c', sans-serif;
  color: var(--tqc-tx);
}

.tqc-slot .tqc-slot-now {
  font: 800 9px 'M PLUS Rounded 1c', sans-serif;
  color: #fff;
  background: #166b46;
  border-radius: 999px;
  padding: 2px 8px;
}

.tqc-slot.is-sel {
  background: var(--tqc-good-soft);
  border: 1.5px solid var(--tqc-good-line);
}

.tqc-slot.is-sel .tqc-slot-dir {
  color: var(--tqc-good);
}

:root[data-tqc-theme="dark"] .tqc-slot.is-sel {
  border-color: rgba(79, 201, 138, .35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tqc-theme="light"]) .tqc-slot.is-sel {
    border-color: rgba(79, 201, 138, .35);
  }
}

/* ==========================================================================
   12. PC (>=1080px) ADJUSTMENTS
   ========================================================================== */

@media (min-width: 1080px) {
  .tqc-now {
    border-radius: 24px;
    padding: 16px 22px;
    gap: 20px;
  }

  .tqc-now .tqc-now-clock {
    font-size: 23px;
  }

  .tqc-now .tqc-now-dir {
    font-size: 25px;
  }

  .tqc-week {
    padding: 24px;
    box-shadow: 0 18px 40px -22px rgba(58, 61, 190, .55);
  }

  .tqc-week .tqc-week-title {
    font-size: 18px;
  }

  .tqc-week .tqc-week-summary {
    font: 700 14.5px/1.8 'M PLUS Rounded 1c', sans-serif;
    max-width: 560px;
  }

  .tqc-week .tqc-week-days {
    gap: 7px;
  }

  .tqc-day {
    border-radius: 18px;
    padding: 11px 0 9px;
  }

  .tqc-day .tqc-day-grade {
    font-size: 21px;
  }

  .tqc-card {
    padding: 18px;
    box-shadow: 0 8px 20px -14px rgba(17, 17, 19, .15);
  }

  .tqc-compass .tqc-compass-svg {
    width: 380px;
    height: 380px;
  }
}

/* ==========================================================================
   13. REDUCED MOTION KILL-SWITCH
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tqc-app,
  .tqc-app * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}



/* iframe埋め込み(2ペイン右側): シェルchromeが無いので tqc-screen の予約余白を除去 */
.tqc-app.tqc-embed .tqc-screen,
.tqc-app.tqc-embed .main.tqc-screen {
  inset: 0;
  padding-top: 0;
  padding-bottom: 24px;
}

/* aタグにtqc-btnを載せたとき .tqc-app a のリンク色に負けない (dashboard/profileのCTA) */
.tqc-app a.tqc-btn { color: var(--tqc-tx); }
.tqc-app a.tqc-btn--primary,
.tqc-app a.tqc-btn--float { color: #fff; }
.tqc-app a.tqc-btn--text { color: var(--tqc-accent); }

/* ページ本文セクションの標準リズム (dashboard/settings/profile等で共用) */
.tqc-home-section { margin: 14px 22px 0; }

/* ==========================================================================
   14. SHELL (tqc-shell.js) — appended by B1, do not edit rules above this
   marker. Production pages have no device frame (unlike the phone-frame
   prototype the section-4 SHELL rules above were authored against), so the
   shell chrome here is pinned to the viewport. Overrides are scoped under
   .tqc-app (two-class selector — higher specificity than the base
   single-class rules above) so declarations are overridden cleanly without
   editing the original rule bodies.
   ========================================================================== */

.tqc-app {
  position: relative;
}

/* Top strip: .tqc-top-nav (section 4) is the base "PC pill nav" bar.
   tqc-shell.js reuses the same element for BOTH breakpoints — a 44px thin
   bar on mobile (brand + badges + bell + avatar only) and the existing
   60px pill-nav bar at >=1080px (untouched @media(min-width:1080px) block
   in section 4 still governs display/height/padding there). */
.tqc-app .tqc-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  border-bottom: 1.5px solid var(--tqc-line);
  background: var(--tqc-navbg);
  z-index: 200;
}

@media (max-width: 1079.98px) {
  .tqc-app .tqc-top-nav {
    display: flex;
    height: 44px;
    padding: 0 14px;
    gap: 10px;
  }

  .tqc-app .tqc-top-logo {
    min-width: 0;
    flex: 0 1 auto;
  }

  .tqc-app .tqc-top-logo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.tqc-top-nav-center {
  display: none;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
}

@media (min-width: 1080px) {
  .tqc-top-nav-center {
    display: flex;
  }
}

.tqc-top-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Notification and public-profile actions always form the right edge. */
  margin-left: auto;
  flex: 0 0 auto;
}

/* .tqc-top-nav .tqc-top-clock (section 4) has margin-left:auto for the
   case where it is a direct flex child of .tqc-top-nav; nested inside our
   own right-side cluster instead, so its own auto margin is neutralized. */
.tqc-top-nav-right .tqc-top-clock {
  margin-left: 0;
}

.tqc-top-avatar-link {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.tqc-top-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

/* Bottom nav: pin to the viewport instead of the prototype's
   absolute-inside-device-frame positioning (section 4). */
.tqc-app .tqc-bottom-nav {
  position: fixed;
  z-index: 200;
}

/* Thread pages (chara.html etc.) own the full viewport below the top strip
   and have no room for a floating bottom tab bar over the composer — the
   page's own back chevron (top-left of its header) is the return affordance. */
.tqc-app.tqc-thread-page .tqc-bottom-nav {
  display: none;
}

/* トーク FAB highlight when a talk-family page (reading/coach/dream/
   time-space-room/chara) is active — section 4 defines .tqc-nav-fab but no
   .is-active variant since the prototype's FAB has no such state. */
.tqc-nav-fab.is-active {
  box-shadow: 0 12px 24px -8px rgba(58, 61, 190, .65), 0 0 0 5px var(--tqc-bg), 0 0 0 8px var(--tqc-accent);
}

/* The generic .tqc-app a rule is more specific than the base FAB rule.
   Keep the Talk glyph white on the bright gradient in both themes. */
.tqc-app a.tqc-nav-fab,
.tqc-app a.tqc-nav-fab:hover,
.tqc-app a.tqc-nav-fab:focus-visible {
  color: #fff;
}

.tqc-app a.tqc-nav-fab svg {
  color: #fff;
  stroke: currentColor;
}

/* DEMO / ADMIN badges (top strip) — new modifiers on the existing
   .tqc-badge base (section 5). */
.tqc-badge--demo {
  color: var(--tqc-warn);
  background: var(--tqc-warn-chip-bg);
}

.tqc-badge--admin {
  color: var(--tqc-accent);
  background: var(--tqc-selbg);
}

/* Notification bell button — HomeHeader bell spec (analysis-proto.json). */
.tqc-notif-wrap {
  position: relative;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.tqc-notif-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--tqc-card);
  border: 1.5px solid var(--tqc-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tqc-tx2);
  cursor: pointer;
}

/* Preserve a 44px hit area while keeping the visible square clear of the
   44px mobile header's top and bottom edges. */
.tqc-notif-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
}

/* Reposition the notification dropdown (#dashNotifPanel) to hang directly
   under the shell's bell button. Its own background/border/row styling is
   intentionally left on the existing .dash-notif-* classes from
   dash-common.css per P1 plan item 7 (migrates to tqc- in P2) — this only
   overrides the anchor/position, which the base dash-common.css rule pins
   to the old fixed topbar height via a viewport-corner fixed position. */
.tqc-app .dash-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  background: var(--tqc-card);
  border-color: var(--tqc-line);
  color: var(--tqc-tx);
}

.tqc-app .dash-notif-panel-header,
.tqc-app .dash-notif-panel-footer,
.tqc-app .dash-notif-row {
  border-color: var(--tqc-line);
}

.tqc-app .dash-notif-panel-title,
.tqc-app .dash-notif-title {
  color: var(--tqc-tx);
}

.tqc-app .dash-notif-excerpt {
  color: var(--tqc-tx2);
}

.tqc-app .dash-notif-time,
.tqc-app .dash-notif-empty {
  color: var(--tqc-tx3);
}

.tqc-app .dash-notif-mark-all,
.tqc-app .dash-notif-see-all {
  color: var(--tqc-accent);
}

.tqc-app .dash-notif-mark-all:hover,
.tqc-app .dash-notif-row:hover,
.tqc-app .dash-notif-row:focus-visible,
.tqc-app .dash-notif-visual {
  background: var(--tqc-chip);
}

.tqc-app .dash-notif-row.is-unread {
  background: var(--tqc-selbg);
}

.tqc-app .dash-notif-dot {
  background: var(--tqc-unread);
}

.tqc-app .dash-notif-kind-icon {
  color: var(--tqc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@media (max-width: 1079.98px) {
  .tqc-app .dash-notif-panel {
    right: -8px;
    width: min(320px, calc(100vw - 24px));
  }
}

/* Home content area (dashboard.html's <div class="main tqc-screen">) — the
   base .main rule (dash-common.css) is authored for the old sidebar layout
   (margin-left:var(--sidebar-w), a capped max-width, large top/side
   padding) and leaks into the new full-bleed home screen. Neutralize every
   layout property it sets; .main.loaded's opacity transition is left
   completely untouched (do not add/override opacity here). */
.tqc-app .main.tqc-screen {
  margin-left: 0;
  max-width: none;
  width: auto;
  padding: 0 0 120px;
}

/* Conversation pages do not use .tqc-screen because they own a fixed-height
   message scroller. They still inherit the legacy dashboard sidebar offset
   from dash-common.css unless it is reset explicitly. */
.tqc-app.tqc-thread-page .main {
  margin-left: 0;
  max-width: none;
  width: auto;
}

@media (min-width: 1080px) {
  .tqc-app .main.tqc-screen {
    padding: 24px max(28px, calc(50% - 560px)) 60px;
  }
}

/* .tqc-home-section wrapper (dashboard.html inline <style>) already carries
   the 14px section rhythm margin; .tqc-week (section 7) additionally sets
   its own 14px/22px margin, doubling the gutter when nested inside a
   .tqc-home-section. Kill the inner margin so the wrapper's margin is the
   single source of truth. */
.tqc-app .tqc-home-section .tqc-week {
  margin: 0;
}

/* NowPanel clock column (F3) — label/clock/koku pill stacked and centered. */
.tqc-now-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
}

.tqc-now .tqc-now-koku {
  display: inline-flex;
  align-items: center;
}

/* Greeting-header avatar — double ring so it reads distinctly from the
   plain read-ring avatars in the talk row (F4). */
.tqc-avatar--me {
  box-shadow: 0 0 0 3px var(--tqc-bg), 0 0 0 5px rgba(108, 75, 180, .3);
}

/* Coach card "answered today" badge (F10) — reuses the .tqc-btn--done
   palette instead of the LIVE/pulse-green .tqc-badge--live treatment,
   since this is a static past-tense state, not a live indicator. */
.tqc-badge--done {
  background: var(--tqc-done-bg);
  color: var(--tqc-good);
}

/* ==========================================================================
   15. RICH ASYNC STATES + MY PAGE MANAGEMENT SURFACES
   ========================================================================== */

/* Compact card loader from the loading reference. It is deliberately a
   factory-backed component (TQC.sectionLoaderHTML) so pages can retain their
   own async lifecycle and accessible status text. */
.tqc-section-loader {
  min-height: 170px;
  padding: 28px 22px;
  border: 1.5px solid var(--tqc-line);
  border-radius: 22px;
  background: var(--tqc-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: center;
  box-shadow: 0 18px 38px -32px rgba(17, 17, 19, .42);
}

.tqc-section-loader-orbit {
  position: relative;
  width: 56px;
  height: 56px;
  flex: none;
  animation: tqc-floaty 3.4s ease-in-out infinite;
}

.tqc-section-loader-ring,
.tqc-section-loader-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.tqc-section-loader-ring {
  border: 1.5px dashed color-mix(in srgb, var(--tqc-accent) 34%, transparent);
  animation: tqc-spin 12s linear infinite;
}

.tqc-section-loader-track {
  animation: tqc-spin 2.6s cubic-bezier(.45, .1, .55, .9) infinite;
}

.tqc-section-loader-dot {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tqc-icon-gold);
  box-shadow: 0 0 9px color-mix(in srgb, var(--tqc-icon-gold) 70%, transparent);
  transform: translateX(-50%);
}

.tqc-section-loader-core {
  position: absolute;
  inset: 13px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tqc-line);
  border-radius: 50%;
  background: var(--tqc-card);
}

.tqc-section-loader-core img {
  width: 13px;
  height: 13px;
}

.tqc-section-loader-copy {
  color: var(--tqc-tx2);
  font: 700 12.5px/1.65 'M PLUS Rounded 1c', sans-serif;
}

/* The reference pairs the thinking bubble with a small TimeQL avatar. */
.tqc-typing-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--tqc-line);
  border-radius: 50%;
  background: var(--tqc-card);
  box-shadow: 0 6px 16px -10px rgba(17, 17, 19, .5);
}

.tqc-typing-avatar img {
  width: 15px;
  height: 15px;
}

.tqc-typing-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tqc-typing .tqc-typing-dot:nth-child(1) { color: var(--tqc-accent); }
.tqc-typing .tqc-typing-dot:nth-child(2) { color: var(--tqc-good-bright); }
.tqc-typing .tqc-typing-dot:nth-child(3) { color: var(--tqc-icon-gold); }

.tqc-button-busy-spinner {
  width: 15px;
  height: 15px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, .42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tqc-spin .8s linear infinite;
}

.tqc-btn[aria-busy="true"],
.tqc-app .checkout-primary[aria-busy="true"] {
  gap: 8px;
  cursor: wait;
  pointer-events: none;
}

/* Management-page token bridge. The legacy management screens retain their
   functional DOM/IDs while inheriting the attached My Page palette. */
.tqc-mypage-page {
  --bg: var(--tqc-bg);
  --bg-elev: var(--tqc-card);
  --bg-subtle: var(--tqc-chip);
  --text: var(--tqc-tx);
  --text-secondary: var(--tqc-tx2);
  --text-tertiary: var(--tqc-tx3);
  --border: var(--tqc-line);
  --hairline: var(--tqc-line);
  --primary: var(--tqc-accent);
  --primary-dim: var(--tqc-selbg);
  --indigo: var(--tqc-accent);
  --indigo-soft: var(--tqc-selbg);
  background: var(--tqc-bg);
}

.tqc-mypage-sidebar {
  display: none;
}

/* Master-only ADMIN navigation. Desktop places it immediately below the
   Settings item in the My Page sidebar. Mobile has no sidebar by design, so
   the equivalent disclosure is injected directly below the settings surface. */
.tqc-admin-disclosure {
  color: var(--tqc-tx);
}

.tqc-admin-summary {
  display: flex;
  min-height: 48px;
  padding: 0 14px;
  align-items: center;
  gap: 10px;
  border-radius: 15px;
  color: var(--tqc-accent);
  font: 800 12.5px/1.3 'M PLUS Rounded 1c', sans-serif;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background .18s, color .18s, transform .15s;
}

.tqc-admin-summary::-webkit-details-marker { display: none; }
.tqc-admin-summary::marker { content: ''; }

.tqc-admin-summary:hover,
.tqc-admin-disclosure[open] > .tqc-admin-summary {
  background: var(--tqc-selbg);
}

.tqc-admin-summary:active { transform: scale(.98); }

.tqc-admin-summary:focus-visible,
.tqc-admin-nav-item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tqc-accent) 30%, transparent);
  outline-offset: 2px;
}

.tqc-admin-summary-icon,
.tqc-admin-nav-icon,
.tqc-admin-chevron {
  display: inline-flex;
  flex: none;
}

.tqc-admin-chevron {
  margin-left: auto;
  transform: rotate(-90deg);
  transition: transform .18s ease;
}

.tqc-admin-disclosure[open] .tqc-admin-chevron { transform: rotate(90deg); }

.tqc-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px 9px 30px;
}

.tqc-app a.tqc-admin-nav-item {
  display: flex;
  min-height: 44px;
  padding: 0 10px;
  align-items: center;
  gap: 9px;
  border-radius: 13px;
  color: var(--tqc-tx2);
  font: 700 12px/1.45 'M PLUS Rounded 1c', sans-serif;
  overflow-wrap: anywhere;
  transition: background .16s, color .16s, transform .15s;
}

.tqc-app a.tqc-admin-nav-item:hover,
.tqc-app a.tqc-admin-nav-item:focus-visible {
  background: var(--tqc-chip);
  color: var(--tqc-accent);
}

.tqc-app a.tqc-admin-nav-item:active { transform: scale(.98); }

.tqc-mobile-admin {
  margin-top: 16px;
  padding: 6px;
  border: 1.5px solid color-mix(in srgb, var(--tqc-accent) 25%, var(--tqc-line));
  border-radius: 20px;
  background: var(--tqc-card);
  box-shadow: 0 16px 34px -30px rgba(17, 17, 19, .48);
}

.tqc-mobile-admin .tqc-admin-nav {
  padding: 5px 8px 9px;
}

/* Management editors and compatibility dialogs must cover the mobile global
   navigation. Their page-local layers predate the TQC shell's z-index scale. */
.tqc-app :is(.ps-modal-bg, .ch-modal-bg, .cx-modal-overlay, .compat-modal-overlay) {
  z-index: 320;
}

.tqc-mypage-page :is(
  .ps-card, .ps-gate,
  .ch-card,
  .cx-row, .cx-req-strip,
  .fr-card, .fr-form-card,
  .card, .dash-card,
  .checkout-panel, .checkout-summary
) {
  border-color: var(--tqc-line);
  border-radius: 22px;
  background: var(--tqc-card);
  box-shadow: 0 16px 34px -30px rgba(17, 17, 19, .48);
}

.tqc-mypage-page :is(.ps-title, .ch-title, .fr-title, .page-title, .dash-page-title) {
  color: var(--tqc-tx);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

.tqc-mypage-page :is(.ps-sub, .ch-sub, .fr-intro, .dash-page-sub) {
  color: var(--tqc-tx2);
}

.tqc-mypage-page :is(
  .form-input, .cx-conn-search, .payment-input, .payment-field,
  .modal-input, input, select, textarea
) {
  border-color: var(--tqc-line);
  border-radius: 14px;
  background: var(--tqc-card);
  color: var(--tqc-tx);
}

.tqc-mypage-page :is(.tq-btn-primary, .checkout-primary, .fr-save, .cx-btn-primary) {
  border-color: transparent;
  border-radius: 999px;
  background: var(--tqc-hero-btn-grad);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(58, 61, 190, .65);
}

.tqc-mypage-page :is(.tq-btn-ghost, .checkout-secondary, .fr-new, .cx-btn) {
  border-color: var(--tqc-line);
  border-radius: 999px;
  background: var(--tqc-card);
  color: var(--tqc-tx2);
}

@media (min-width: 1080px) {
  .tqc-mypage-sidebar {
    position: fixed;
    z-index: 12;
    top: 84px;
    bottom: 24px;
    left: max(24px, calc(50% - 590px));
    width: 236px;
    display: block;
    overflow-y: auto;
  }

  .tqc-mypage-sidebar-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px;
    border: 1.5px solid var(--tqc-line);
    border-radius: 24px;
    background: var(--tqc-card);
    box-shadow: 0 22px 42px -34px rgba(17, 17, 19, .5);
  }

  .tqc-mypage-sidebar-title {
    padding: 0 10px 12px;
    color: var(--tqc-tx);
    font: 800 17px/1.3 'M PLUS Rounded 1c', sans-serif;
  }

  .tqc-mypage-nav-item {
    min-height: 42px;
    padding: 0 11px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tqc-tx2) !important;
    font: 700 12.5px/1.3 'M PLUS Rounded 1c', sans-serif;
    transition: background .18s, color .18s, transform .15s;
  }

  .tqc-mypage-nav-item:hover {
    background: var(--tqc-chip);
    color: var(--tqc-tx) !important;
  }

  .tqc-mypage-nav-item.is-active {
    background: var(--tqc-selbg);
    color: var(--tqc-accent) !important;
  }

  .tqc-mypage-nav-item:active { transform: scale(.98); }
  .tqc-mypage-nav-icon { display: inline-flex; }

  .tqc-mypage-admin {
    display: block;
    margin-top: 3px;
    padding-top: 5px;
    border-top: 1px solid var(--tqc-line);
  }

  .tqc-mypage-admin .tqc-admin-summary {
    min-height: 42px;
    padding: 0 11px;
    border-radius: 14px;
  }

  .tqc-mypage-admin .tqc-admin-nav {
    padding: 5px 0 7px 20px;
  }

  .tqc-mypage-admin .tqc-admin-nav-item {
    min-height: 40px;
  }

  .tqc-mobile-admin { display: none; }

  .tqc-app.tqc-mypage-page .main.tqc-screen {
    padding: 24px max(24px, calc(50% - 590px)) 70px max(284px, calc(50% - 330px));
  }

  .tqc-mypage-page--profile .pf-page-header {
    margin-right: 0;
    margin-left: 0;
  }

  .tqc-mypage-page--profile .pf-content {
    max-width: 812px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }

  .tqc-mypage-page--profile .pf-content > .tqc-home-section {
    margin: 0;
  }

  .tqc-mypage-page--profile :is(#qrCard, #qrNeedsHandle) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) and (max-height: 760px) {
  .tqc-mypage-sidebar-card {
    gap: 3px;
    padding: 14px;
  }

  .tqc-mypage-sidebar-title {
    padding-bottom: 8px;
  }

  .tqc-mypage-nav-item {
    min-height: 38px;
  }
}

@media (max-width: 640px) {
  .tqc-mypage-page :is(
    .ps-card, .ps-gate,
    .ch-card,
    .cx-row, .cx-req-strip,
    .fr-card, .fr-form-card,
    .card, .dash-card,
    .checkout-panel, .checkout-summary
  ) {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tqc-section-loader-orbit,
  .tqc-section-loader-ring,
  .tqc-section-loader-track,
  .tqc-button-busy-spinner,
  .tqc-typing-dot {
    animation: none !important;
  }
}