:root {
  color-scheme: dark;
  --bg-primary: #000000;
  --bg-secondary: #060606;
  --bg-elevated: #0d0d0d;
  --bg-hover: #161616;
  --text-primary: #f0f2f5;
  --text-secondary: #a3a3a3;
  --text-tertiary: #737373;
  --accent-primary: #e3e8ef;
  --accent-ai: #bbc7d9;
  --accent-success: #64d69b;
  --accent-info: #c3cfdf;
  --accent-warning: #e9a15f;
  --accent-danger: #eb7580;
  --divider: #ffffff0f;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --radius: 10px;
  --radius-card: 12px;
  --radius-sheet: 18px;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --accent-glow: rgba(210, 225, 255, .09);
  --ease: cubic-bezier(.2,.8,.2,1);
  --press: .1s;
  --tab: .17s;
  --expand: .2s;
  --sheet: .24s;
  --nav-height: 64px;
  --content-width: 760px;
  --sidebar-width: 216px;
  --safe-top: max(env(safe-area-inset-top, 0px),var(--bc-safe-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px),var(--bc-safe-bottom, 0px));
  --safe-content-top: var(--bc-content-top, 0px);
  --page-padding: 16px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-primary);
  scroll-padding-top: var(--s6);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font: 15px/1.47 var(--font);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

button, input, textarea, select {
  font: inherit;
}

button, a, input, textarea, select, summary, [role="button"], .voice-history-item, .material-row {
  -webkit-tap-highlight-color: transparent;
}

button {
  -webkit-user-select: none;
  user-select: none;
  color: inherit;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  min-width: 44px;
  min-height: 44px;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  transition: transform var(--press) var(--ease),filter var(--press) var(--ease);
  touch-action: manipulation;
  border: 0;
}

button:active:not(:disabled) {
  transform: scale(.98);
}

button:disabled {
  opacity: .4;
  cursor: default;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--bg-hover);
}

a {
  color: var(--accent-info);
}

svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

svg:not([fill]) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

img, video, iframe {
  max-width: 100%;
}

h1, h2, h3, p {
  margin: 0;
}

h1 {
  letter-spacing: -.7px;
  font-size: 28px;
  font-weight: 650;
  line-height: 34px;
}

h2 {
  letter-spacing: -.25px;
  font-size: 20px;
  font-weight: 650;
  line-height: 26px;
}

h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

p {
  line-height: 1.5;
}

small, time, .caption {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 16px;
}

b, strong {
  font-weight: 600;
}

ul, ol {
  padding-left: var(--s6);
}

[hidden], .hidden, .is-hidden {
  display: none !important;
}

[inert] {
  pointer-events: none;
}

.muted {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
}

.eyebrow {
  color: var(--text-secondary);
  margin-bottom: var(--s2);
  font-size: 12px;
  display: block;
}

.sr-only, .blackos-sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.ui-icon {
  vertical-align: middle;
}

.is-danger {
  color: var(--accent-danger);
}

.app-root {
  max-width: var(--content-width);
  padding: calc(var(--safe-top) + var(--safe-content-top) + var(--s6)) var(--page-padding) calc(var(--nav-height) + var(--safe-bottom) + var(--s8));
  min-height: 100dvh;
  margin: 0 auto;
}

.page-heading {
  margin-bottom: var(--s6);
}

.daily-page, .ai-page, .profile-page, .progress-page, .materials-stack {
  gap: var(--s8);
  flex-direction: column;
  display: flex;
}

.daily-page section, .ai-page section, .progress-content > section {
  min-width: 0;
}

.daily-page h2, .ai-page h2 {
  margin-bottom: var(--s3);
}

.section-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  display: flex;
}

.section-head h2 {
  margin: 0;
}

.daily-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  display: flex;
}

.daily-header h1 {
  margin-top: var(--s2);
  font-size: 24px;
  line-height: 30px;
}

.avatar {
  background: var(--bg-elevated);
  width: 48px;
  height: 48px;
  color: var(--accent-primary);
  border-radius: 16px;
  flex-shrink: 0;
  place-items: center;
  font-size: 20px;
  display: grid;
}

.progress-line, .blackos-progress-line, .material-progress-track, .slip-horizontal-track {
  background: var(--bg-hover);
  width: 100%;
  height: 4px;
  margin: var(--s3) 0;
  border-radius: 4px;
  display: block;
  overflow: hidden;
}

.progress-line > span, .blackos-progress-line > span, .material-progress-fill, .slip-horizontal-bar {
  background: var(--accent-primary);
  border-radius: inherit;
  height: 100%;
  display: block;
}

.blackos-progress-line > span {
  width: var(--progress, 0);
}

.bento {
  gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.metric {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  padding: var(--s4);
  justify-content: center;
  align-items: flex-start;
  gap: var(--s2);
  text-align: left;
  font-variant-numeric: tabular-nums;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.metric strong {
  letter-spacing: -1px;
  font-size: 38px;
  font-weight: 650;
  line-height: 44px;
}

.metric strong small {
  letter-spacing: 0;
  font-size: 13px;
}

.metric > span {
  color: var(--text-secondary);
  font-size: 13px;
}

.metric > b {
  font-size: 20px;
  line-height: 26px;
}

.metric > .ui-icon {
  color: var(--accent-primary);
}

.next-action, .list-row {
  align-items: center;
  gap: var(--s3);
  text-align: left;
  width: 100%;
  padding: var(--s4) var(--s3);
  border-bottom: 1px solid var(--divider);
  border-radius: var(--radius);
  background: none;
  display: flex;
}

.next-action {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--s4);
  border: 0;
}

.next-action > span, .list-row > span {
  gap: var(--s1);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.next-action b, .list-row b {
  font-size: 15px;
}

.list-row small {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  overflow: hidden;
}

.list-row > svg:first-child {
  color: var(--text-secondary);
}

.list-row > time {
  flex-shrink: 0;
  max-width: 70px;
}

.quick-ai {
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  color: var(--text-secondary);
  text-align: left;
  display: flex;
}

.quick-ai > span {
  flex: 1;
}

.quick-ai > svg:first-child {
  color: var(--accent-ai);
}

.membership-line {
  color: var(--text-secondary);
  padding: var(--s3);
  border-top: 1px solid var(--divider);
  border-radius: var(--radius);
  background: none;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  display: flex;
}

.continue-reading {
  padding: var(--s4);
  border-radius: var(--radius-card);
  background: var(--bg-secondary);
}

.continue-reading h3 {
  margin: var(--s3) 0;
}

.continue-reading h2 {
  font-size: 16px;
}

.text-button {
  align-items: center;
  gap: var(--s2);
  color: var(--accent-primary);
  padding: var(--s2) 0;
  background: none;
  display: inline-flex;
}

.icon-button {
  padding: var(--s3);
  background: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.btn {
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  border-radius: var(--radius);
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
}

.btn-gold, .primary {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.btn-ghost {
  background: none;
}

.btn-full {
  width: 100%;
}

.btn-danger, .danger {
  background: var(--accent-danger);
  color: var(--bg-primary);
}

.floating-tab-menu-root {
  z-index: 40;
  background: var(--bg-secondary);
  border-top: 1px solid var(--divider);
  padding-bottom: var(--safe-bottom);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.tab-menu {
  height: var(--nav-height);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 760px;
  margin: auto;
  display: grid;
}

.tab-button {
  gap: var(--s1);
  padding: var(--s2) 0;
  min-width: 0;
  color: var(--text-secondary);
  background: none;
  border-radius: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  position: relative;
}

.tab-button.is-active {
  color: var(--text-primary);
}

.tab-button.is-active:before {
  content: "";
  background: var(--accent-primary);
  border-radius: 0 0 2px 2px;
  width: 24px;
  height: 2px;
  position: absolute;
  top: 0;
}

.tab-button-icon {
  display: flex;
}

.tab-button-svg {
  width: 20px;
  height: 20px;
}

.tab-content {
  transition: opacity var(--tab) var(--ease);
}

.is-switching-out {
  opacity: .2;
}

.is-switching-in {
  opacity: .4;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  width: 100%;
  min-width: 0;
  min-height: 48px;
  color: var(--text-primary);
  outline-offset: 2px;
  border: 0;
  padding: 14px;
  display: block;
}

input::placeholder, textarea::placeholder {
  color: var(--text-secondary);
}

textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 22px;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-primary);
  flex-shrink: 0;
}

label {
  color: var(--text-secondary);
  font-size: 13px;
}

.habit-form-label {
  margin: var(--s5) 0 var(--s2);
  display: block;
}

.habit-form-actions {
  gap: var(--s3);
  margin-top: var(--s5);
  background: var(--bg-secondary);
  padding: var(--s3) 0;
  display: flex;
  position: sticky;
  bottom: 0;
}

.habit-form-actions > * {
  flex: 1;
}

.habit-form-counter, [class$="field-counter"], .voice-about-counter {
  color: var(--text-secondary);
  text-align: right;
  margin-top: var(--s1);
  font-size: 12px;
}

.context-menu {
  flex-shrink: 0;
  position: relative;
}

.context-menu summary {
  cursor: pointer;
  place-items: center;
  width: 44px;
  height: 44px;
  list-style: none;
  display: grid;
}

.context-menu summary::-webkit-details-marker {
  display: none;
}

.context-menu > div {
  z-index: 25;
  min-width: 160px;
  padding: var(--s1);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  position: absolute;
  top: 44px;
  right: 0;
  box-shadow: 0 8px 28px #0006;
}

.context-menu button {
  text-align: left;
  white-space: nowrap;
  background: none;
  width: 100%;
  min-height: 44px;
}

.segmented, .materials-view-switch {
  background: var(--bg-secondary);
  padding: var(--s1);
  border-radius: var(--radius);
  gap: var(--s1);
  scrollbar-width: none;
  display: flex;
  overflow-x: auto;
}

.segmented button, .materials-view-button {
  white-space: nowrap;
  padding: var(--s2);
  min-width: max-content;
  min-height: 40px;
  color: var(--text-secondary);
  background: none;
  border-radius: 10px;
  flex: 1;
  font-size: 13px;
}

.segmented .is-active, .materials-view-button.is-active {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.progress-page > .page-heading {
  margin-bottom: 0;
}

.progress-page {
  gap: var(--s5);
}

.progress-content {
  gap: var(--s5);
  flex-direction: column;
  display: flex;
}

.progress-content > .section-head {
  margin: 0;
}

.progress-content > .progress-line {
  margin-top: calc(-1 * var(--s3));
  margin-bottom: calc(-1 * var(--s3));
}

.habit-row {
  align-items: center;
  gap: var(--s3);
  border-bottom: 1px solid var(--divider);
  min-height: 72px;
  padding: var(--s3) 0;
  display: flex;
}

.habit-emoji {
  flex-shrink: 0;
  width: 28px;
  font-size: 22px;
}

.habit-copy {
  flex: 1;
  min-width: 0;
}

.habit-copy small, .habit-copy p {
  margin-top: var(--s1);
  color: var(--text-secondary);
  font-size: 13px;
  display: block;
}

.habit-check {
  width: 44px;
  height: 44px;
  padding: var(--s3);
  background: none;
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.habit-check[aria-pressed="true"] {
  color: var(--accent-success);
  background: var(--bg-elevated);
}

.check-outline {
  border: 0;
  border-radius: 7px;
  width: 22px;
  height: 22px;
}

.habit-row.is-complete h3 {
  color: var(--text-secondary);
}

.empty-state, .error-state, [class*="empty-card"], [class$="empty-state"] {
  padding: var(--s6) 0;
  color: var(--text-secondary);
}

.empty-state h3, [class*="empty-card"] h3 {
  color: var(--text-primary);
  margin-bottom: var(--s2);
}

.skeleton-stack {
  gap: var(--s3);
  padding: var(--s3) 0;
  display: grid;
}

.skeleton {
  border-radius: var(--radius);
  background: var(--bg-elevated);
  height: 56px;
}

.skeleton:nth-child(2) {
  opacity: .7;
}

.skeleton:nth-child(3) {
  opacity: .4;
}

.event-row {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--divider);
}

.event-row h3 {
  margin-top: var(--s1);
}

.event-row > p + p {
  margin-top: var(--s2);
}

.analytics-details {
  margin-top: var(--s4);
}

.analytics-details > summary {
  min-height: 44px;
  padding: var(--s3) 0;
  cursor: pointer;
  color: var(--text-secondary);
}

.blackos-section-head, .habit-chart-head, .slip-chart-head, .voice-section-head, .habit-card-top, .habit-card-main, .habit-card-meta, .habit-card-tools {
  align-items: center;
  gap: var(--s3);
  display: flex;
}

.blackos-section-head, .habit-chart-head, .slip-chart-head, .voice-section-head, .habit-card-top {
  justify-content: space-between;
}

.blackos-kicker, .habit-chart-kicker, .slip-insight-label, .habit-stat-label, .habit-stat-note, .habit-chart-side-note, .habit-card-meta, .slip-insight-note {
  color: var(--text-secondary);
  font-size: 12px;
}

.blackos-tracker-report {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--divider);
}

.blackos-report-number {
  font-variant-numeric: tabular-nums;
  margin: var(--s3) 0;
  font-size: 38px;
  font-weight: 650;
}

.blackos-report-number > span {
  color: var(--text-secondary);
  font-size: 16px;
}

.blackos-habit-report-meta {
  color: var(--text-secondary);
  justify-content: space-between;
  font-size: 13px;
  display: flex;
}

.blackos-matrix-section {
  margin-top: var(--s6);
}

.blackos-matrix {
  gap: var(--s1);
  margin-top: var(--s3);
  grid-template-columns: minmax(90px, 2fr) repeat(7, minmax(0, 1fr));
  align-items: center;
  font-size: 11px;
  display: grid;
}

.blackos-matrix-cell, .blackos-matrix-day {
  text-align: center;
}

.blackos-matrix-cell {
  padding: var(--s2) 0;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-radius: 4px;
}

.blackos-matrix-cell.is-complete {
  color: var(--accent-success);
}

.blackos-matrix-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.blackos-matrix-note {
  color: var(--text-secondary);
  margin-top: var(--s2);
  font-size: 12px;
}

.habit-stats-grid, .slip-stats-grid {
  gap: var(--s3);
  margin: var(--s5) 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.habit-stat-card, .slip-stat-card {
  padding: var(--s4);
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
}

.habit-stat-value, .slip-stat-value {
  font-variant-numeric: tabular-nums;
  margin: var(--s2) 0;
  font-size: 36px;
  font-weight: 650;
}

.habit-chart-card, .slip-chart-card, .my-success-analysis-card {
  margin: var(--s6) 0;
}

.habit-chart, .slip-chart {
  gap: var(--s2);
  height: 140px;
  margin: var(--s5) 0;
  align-items: flex-end;
  display: flex;
}

.habit-chart-item, .slip-chart-item {
  text-align: center;
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

.habit-chart-bar-wrap, .slip-chart-bar-wrap {
  justify-content: center;
  align-items: flex-end;
  height: 84px;
  display: flex;
}

.habit-chart-bar, .slip-chart-bar {
  background: var(--accent-primary);
  border-radius: 4px 4px 0 0;
  width: 60%;
}

.habit-chart-value, .slip-chart-value {
  font-variant-numeric: tabular-nums;
  margin: var(--s1) 0;
}

.habit-chart-label, .slip-chart-label {
  color: var(--text-secondary);
}

.slip-insight-card {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--divider);
}

.slip-insight-grid, .slip-analytics-grid {
  gap: var(--s4);
  display: grid;
}

.slip-horizontal-top {
  margin-top: var(--s3);
  justify-content: space-between;
  font-size: 13px;
  display: flex;
}

.slip-summary-button, .slip-previous-week-button {
  width: 100%;
  margin: var(--s3) 0;
}

.habit-card-main {
  min-width: 0;
}

.habit-card-title {
  overflow-wrap: anywhere;
}

.my-success-event-card {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--divider);
}

.habit-card-emoji {
  font-size: 20px;
}

.habit-icon-button {
  padding: var(--s3);
  background: none;
  place-items: center;
  display: grid;
}

.my-success-analysis-text {
  margin-top: var(--s3);
}

.os-achievement {
  gap: var(--s3);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--divider);
  display: flex;
}

.os-achievement-icon {
  background: var(--bg-elevated);
  border-radius: 12px;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 1;
  display: grid;
}

.os-achievement-copy {
  flex: 1;
  min-width: 0;
}

.os-achievement-heading {
  gap: var(--s2);
  align-items: center;
  display: flex;
}

.os-achievement p {
  color: var(--text-secondary);
  margin: var(--s2) 0;
  font-size: 13px;
}

.os-achievement-meta {
  color: var(--text-secondary);
  justify-content: space-between;
  font-size: 12px;
  display: flex;
}

.os-achievement.is-unlocked .os-achievement-icon, .os-achievement.is-unlocked h3 {
  color: var(--accent-primary);
}

/* Pending awards stay readable but clearly differ from earned ones. */
.os-achievement.is-locked {
  border-bottom-color: #ffffff08;
}

.os-achievement.is-locked .os-achievement-icon {
  filter: grayscale(1);
  opacity: .35;
  background: transparent;
}

.os-achievement.is-locked h3 {
  color: #777777;
}

.os-achievement.is-locked p {
  color: #707070;
}

.os-achievement.is-locked .os-achievement-meta,
.os-achievement.is-locked .os-achievement-meta time,
.os-achievement.is-locked .os-achievement-new {
  color: #626262;
}

.os-achievement-new {
  color: var(--accent-primary);
  font-size: 12px;
}

.ai-entry {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  padding: var(--s4);
}

.ai-entry textarea {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  min-height: 128px;
  padding: var(--s3);
}

.ai-entry-actions {
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  display: flex;
}

.ai-entry-actions > span {
  flex: 1;
}

.ai-page > .page-heading {
  margin-bottom: 0;
}

.ai-page .eyebrow {
  color: var(--accent-ai);
}

.voice-chat-screen {
  height: calc(var(--visual-height, 100dvh) - var(--safe-top) - var(--safe-content-top) - var(--nav-height) - var(--safe-bottom));
  flex-direction: column;
  display: flex;
}

.voice-chat-shell {
  background: var(--bg-primary);
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}

.voice-chat-header {
  align-items: center;
  gap: var(--s2);
  border-bottom: 1px solid var(--divider);
  padding: var(--s3) 0;
  flex-shrink: 0;
  display: flex;
}

.voice-chat-title-wrap {
  flex: 1;
  min-width: 0;
}

.voice-chat-title {
  letter-spacing: 0;
  font-size: 16px;
  line-height: 21px;
}

.voice-chat-online {
  color: var(--text-secondary);
  font-size: 12px;
}

.voice-nav-button, .voice-clear-button {
  padding: var(--s2);
  border-radius: var(--radius);
  background: none;
  font-size: 13px;
}

.voice-nav-button b {
  display: none;
}

.voice-nav-button span {
  font-size: 28px;
}

.voice-assistant-avatar, .voice-avatar, .psychologist-avatar {
  background: var(--bg-elevated);
  width: 36px;
  height: 36px;
  color: var(--accent-ai);
  border-radius: 12px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.voice-chat-body {
  overscroll-behavior: contain;
  min-height: 0;
  padding: var(--s5) 0;
  scrollbar-width: thin;
  flex: 1;
  overflow-y: auto;
}

.voice-chat-list {
  gap: var(--s5);
  flex-direction: column;
  display: flex;
}

.voice-message-row {
  gap: var(--s2);
  display: flex;
}

.voice-message-row.is-user {
  justify-content: flex-end;
}

.voice-message-row.is-assistant > [class*="avatar"] {
  display: none;
}

.voice-message-card {
  min-width: 0;
  max-width: 100%;
}

.voice-message-card.is-user {
  background: var(--bg-elevated);
  max-width: 82%;
  padding: var(--s3) var(--s4);
  border-radius: 16px 16px 4px;
}

.voice-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.voice-message-time {
  color: var(--text-secondary);
  text-align: right;
  margin-top: var(--s2);
  font-size: 11px;
}

.voice-date-divider {
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
}

.voice-transcribed-badge {
  color: var(--text-secondary);
  font-size: 11px;
}

.voice-composer {
  padding: var(--s3) 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--divider);
  flex-shrink: 0;
}

.voice-text-form {
  align-items: flex-end;
  gap: var(--s2);
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: var(--s1);
  display: flex;
}

.voice-text-form .voice-text-input {
  resize: none;
  background: none;
  border: 0;
  min-height: 48px;
  max-height: 144px;
  padding: 12px;
}

.voice-action-button {
  background: var(--accent-ai);
  color: var(--bg-primary);
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 2px;
  padding: 0;
  line-height: 1;
  display: grid;
}

.voice-action-button svg {
  fill: none;
  stroke: currentColor;
  width: 20px;
  height: 20px;
  display: block;
}

.voice-action-button.is-recording {
  background: var(--accent-danger);
}

.voice-record-panel {
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  display: flex;
}

.voice-record-dot, .signal-dot {
  background: var(--accent-success);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  display: inline-block;
}

.voice-record-dot {
  background: var(--accent-danger);
}

.voice-record-time {
  font-variant-numeric: tabular-nums;
}

.voice-record-cancel-button {
  color: var(--accent-danger);
  background: none;
  margin-left: auto;
}

.voice-history-item {
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  min-height: 72px;
  display: flex;
}

.voice-history-copy {
  flex: 1;
  min-width: 0;
}

.voice-history-title, .voice-history-text {
  display: block;
}

.voice-history-title {
  font-weight: 600;
}

.voice-history-text {
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  overflow: hidden;
}

.voice-history-date {
  color: var(--text-secondary);
  max-width: 60px;
  font-size: 11px;
}

.voice-history-delete {
  padding: var(--s3);
  color: var(--accent-danger);
  background: none;
}

.voice-lobby-top, .voice-lobby-main {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
  display: flex;
}

.voice-lobby-main {
  justify-content: flex-start;
}

.voice-lobby-title {
  font-size: 24px;
}

.voice-lobby-text {
  color: var(--text-secondary);
  margin-bottom: var(--s5);
}

.voice-about-summary-card, .voice-history-card {
  margin-top: var(--s8);
}

.voice-about-summary-card p {
  color: var(--text-secondary);
  margin-top: var(--s2);
}

.voice-link-button {
  color: var(--accent-ai);
  background: none;
}

.voice-audio-button {
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  max-width: 100%;
  display: flex;
}

.voice-audio-wave {
  flex: 1;
  align-items: center;
  gap: 2px;
  height: 24px;
  display: flex;
}

.voice-audio-wave span {
  background: var(--text-secondary);
  width: 3px;
  height: var(--bar-height, 12px);
}

.voice-audio-duration {
  font-size: 12px;
}

.materials-stack {
  gap: var(--s5);
}

.materials-stack > .page-heading {
  margin: 0;
}

.blackos-library-controls {
  gap: var(--s3);
  display: grid;
}

.blackos-library-search {
  background: var(--bg-elevated);
  padding-left: var(--s4);
  border-radius: var(--radius);
  align-items: center;
  gap: var(--s2);
  display: flex;
}

.blackos-library-search input {
  background: none !important;
}

.materials-category-scroll, .professor-question-category-filters {
  gap: var(--s2);
  scrollbar-width: none;
  max-width: 100%;
  padding-bottom: var(--s1);
  display: flex;
  overflow-x: auto;
}

.materials-chip, .professor-question-category-filter {
  white-space: nowrap;
  padding: var(--s2) var(--s3);
  background: none;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 13px;
}

.materials-chip.is-active, .professor-question-category-filter.is-active {
  background: var(--bg-elevated);
  color: var(--accent-primary);
}

.material-row {
  align-items: center;
  gap: var(--s2);
  border-bottom: 1px solid var(--divider);
  min-height: 88px;
  display: flex;
}

.material-main-button {
  text-align: left;
  align-items: flex-start;
  gap: var(--s1);
  min-width: 0;
  padding: var(--s3) 0;
  background: none;
  flex-direction: column;
  flex: 1;
  display: flex;
}

.material-main-button b {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  line-height: 21px;
  display: -webkit-box;
  overflow: hidden;
}

.material-main-button .caption {
  font-size: 11px;
}

.material-favorite-button, .material-reader-favorite,
.material-favorite-button.is-active, .material-reader-favorite.is-active {
  color: #edaa62;
}

.material-favorite-button.is-active svg, .material-reader-favorite.is-active svg {
  fill: currentColor;
  stroke: currentColor;
}

.material-reader-overlay {
  z-index: 70 !important;
  padding: 0 !important;
}

.material-reader-overlay .modal-backdrop {
  background: var(--bg-primary);
}

.material-reader-overlay .material-reader-sheet {
  background: var(--bg-primary);
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: none;
}

.material-reader-overlay .blackos-sheet-toolbar {
  display: none;
}

.material-reader-card {
  flex-direction: column;
  height: 100%;
  max-height: none;
  display: flex;
  padding: 0 !important;
  overflow: hidden !important;
}

.material-reader-header {
  padding: calc(var(--safe-top) + var(--safe-content-top) + var(--s2)) var(--s5) var(--s2);
  background: var(--bg-primary);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin: auto;
  display: flex;
}

.material-reader-header button {
  background: none;
}

.material-reader-progress {
  flex-shrink: 0;
}

.material-reader-progress-row {
  display: none;
}

.material-reader-progress .material-progress-track {
  height: 2px;
  margin: 0;
}

.material-reader-body {
  overscroll-behavior: contain;
  min-height: 0;
  padding: var(--s6) var(--s5) calc(var(--s8) + var(--safe-bottom));
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: auto;
  overflow-y: auto;
}

.material-reader-title {
  margin-bottom: var(--s6);
}

.material-markdown {
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 1.65;
}

.material-markdown p {
  margin: 0 0 var(--s5);
  line-height: 1.65;
}

.material-markdown h2, .material-markdown h3 {
  margin: var(--s8) 0 var(--s4);
}

.material-markdown img {
  border-radius: var(--radius);
  width: 100%;
  height: auto;
}

.material-markdown button {
  background: none;
  width: 100%;
  padding: 0;
}

.material-markdown blockquote {
  border-left: 2px solid var(--accent-primary);
  padding-left: var(--s4);
  margin: var(--s5) 0;
  color: var(--text-secondary);
}

.material-markdown pre {
  background: var(--bg-elevated);
  padding: var(--s4);
  border-radius: var(--radius);
  overflow: auto;
}

.material-markdown table {
  border-collapse: collapse;
  display: block;
  overflow: auto;
}

.material-markdown td, .material-markdown th {
  padding: var(--s2);
  border: 0;
}

.material-media iframe, .material-media video {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 0;
  width: 100%;
}

.material-reactions-grid {
  gap: var(--s2);
  margin: var(--s6) 0;
  flex-wrap: wrap;
  display: flex;
}

.material-reaction-button.is-active {
  outline: none;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-elevated));
  box-shadow: none;
}

.material-reaction-button.is-active .material-reaction-count {
  color: var(--text-primary);
  font-weight: 700;
}

.material-complete-button {
  margin-top: var(--s6);
}

.material-image-viewer-overlay {
  z-index: 120;
  background: #000;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.material-image-viewer-overlay img {
  object-fit: contain;
  max-height: 90dvh;
}

.material-image-viewer-close {
  top: var(--s4);
  right: var(--s4);
  position: absolute;
}

.modal-open {
  overflow: hidden;
}

.modal-overlay {
  z-index: 100;
  padding-top: calc(var(--safe-top) + var(--s4));
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal-backdrop {
  opacity: 0;
  transition: opacity var(--sheet) var(--ease);
  background: #0000008c;
  position: absolute;
  inset: 0;
}

.modal-sheet {
  width: 100%;
  max-height: min(92dvh,var(--visual-height, 92dvh));
  background: var(--bg-secondary);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overscroll-behavior: contain;
  padding: var(--s4) var(--s5) calc(var(--s5) + var(--safe-bottom));
  opacity: 0;
  transition: transform var(--sheet) var(--ease),opacity var(--sheet) var(--ease);
  position: relative;
  overflow-y: auto;
  transform: translateY(24px);
}

/* Keep form actions flush with the sheet edge while its content scrolls. */
.modal-sheet:is(.habit-editor-sheet, .slip-editor-sheet, .solution-minute-sheet, .voice-about-sheet, .my-success-editor-sheet) {
  padding-bottom: 0;
}

.modal-sheet .habit-form-actions {
  z-index: 1;
  margin-inline: calc(-1 * var(--s5));
  padding: var(--s3) var(--s5) calc(var(--s3) + var(--safe-bottom));
  isolation: isolate;
}

.modal-sheet:before {
  content: "";
  background: var(--text-tertiary);
  width: 36px;
  height: 4px;
  margin: 0 auto var(--s2);
  border-radius: 4px;
  display: block;
}

.is-visible .modal-backdrop {
  opacity: 1;
}

.is-visible .modal-sheet {
  opacity: 1;
  transform: translateY(0);
}

.is-closing .modal-sheet {
  opacity: 0;
  transform: translateY(24px);
}

.is-closing .modal-backdrop {
  opacity: 0;
}

.blackos-sheet-toolbar {
  margin-bottom: var(--s2);
  background: none;
  justify-content: flex-end;
  display: flex;
  position: relative;
}

.blackos-sheet-toolbar button {
  padding: var(--s3);
  background: none;
  place-items: center;
  display: grid;
}

.blackos-sheet-body {
  min-width: 0;
}

.modal-sheet h2 {
  margin-bottom: var(--s3);
}

.modal-drag-handle {
  display: none;
}

.habit-editor-kicker, .bonus-info-kicker, .card-kicker, .function-header-kicker, .subscription-purchase-kicker {
  color: var(--text-secondary);
  margin-bottom: var(--s2);
  font-size: 12px;
}

.habit-emoji-grid {
  gap: var(--s2);
  margin: var(--s3) 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  display: grid;
}

.habit-emoji-button {
  padding: var(--s2);
  font-size: 22px;
}

.habit-emoji-button.is-selected, .habit-emoji-button.is-active {
  outline: none;
  color: var(--accent-primary);
  background: var(--bg-elevated);
}

.slip-option-grid, .solution-minute-type-grid {
  gap: var(--s2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.slip-option-button, .solution-minute-type-button {
  align-items: center;
  gap: var(--s2);
  text-align: left;
  padding: var(--s3);
  min-width: 0;
  font-size: 13px;
  display: flex;
}

.slip-option-button.is-active, .solution-minute-type-button.is-active {
  box-shadow: none;
  background: var(--bg-elevated);
  color: var(--accent-primary);
}

.slip-step-indicator, .solution-minute-step-indicator, .subscription-purchase-progress {
  gap: var(--s1);
  margin: var(--s4) 0;
  display: flex;
}

.slip-step-dot {
  background: var(--bg-hover);
  border-radius: 3px;
  flex: 1;
  height: 3px;
}

.slip-step-dot.is-active, .slip-step-dot.is-complete {
  background: var(--accent-primary);
}

.time-wheel-wrap {
  justify-content: center;
  align-items: center;
  gap: var(--s5);
  margin: var(--s6) 0;
  display: flex;
}

.time-wheel {
  gap: var(--s2);
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  flex-direction: column;
  height: 180px;
  padding: 68px 0;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.time-wheel-item {
  scroll-snap-align: center;
  width: 76px;
  height: 44px;
  padding: var(--s2);
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: none;
  flex: 0 0 44px;
  font-size: 24px;
  display: block;
}

.time-wheel-title {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--s2);
  font-size: 13px;
}

.solution-minute-type-custom-wrap {
  margin-top: var(--s3);
}

.solution-minute-question-title {
  margin: var(--s5) 0;
  font-size: 20px;
}

.solution-minute-thinking {
  text-align: center;
  padding: var(--s8) 0;
}

.solution-minute-thinking-step {
  padding: var(--s2);
  color: var(--text-secondary);
}

.solution-minute-thinking-step.is-active {
  color: var(--text-primary);
}

.solution-minute-card {
  border-bottom: 1px solid var(--divider);
}

.solution-minute-summary-row {
  align-items: center;
  display: flex;
}

.solution-minute-summary {
  align-items: center;
  gap: var(--s3);
  text-align: left;
  padding: var(--s4) 0;
  background: none;
  flex: 1;
  display: flex;
}

.solution-minute-summary-copy {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.solution-minute-date {
  color: var(--text-secondary);
  font-size: 12px;
}

.solution-minute-delete {
  color: var(--accent-danger);
  background: none;
}

.solution-minute-body {
  height: 0;
  transition: height var(--expand) var(--ease);
  overflow: hidden;
}

.solution-minute-body-inner {
  padding: var(--s3) 0 var(--s6);
}

.solution-minute-answers {
  color: var(--text-secondary);
  margin-bottom: var(--s5);
  font-size: 13px;
}

.solution-minute-result {
  overflow-wrap: anywhere;
  line-height: 1.65;
}

.solution-minute-result p {
  margin-bottom: var(--s4);
}

.solution-minute-result h3 {
  margin: var(--s6) 0 var(--s3);
}

.function-screen > p {
  margin-bottom: var(--s5);
}

.function-screen > .btn {
  margin-bottom: var(--s4);
}

.function-header {
  margin-bottom: var(--s6);
}

.function-header-row {
  margin-bottom: var(--s4);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.function-back-button {
  padding: var(--s2) 0;
  color: var(--text-secondary);
  background: none;
}

.function-header-text {
  color: var(--text-secondary);
  margin-top: var(--s3);
}

.function-header-title {
  font-size: 28px;
}

.anonymous-question-card {
  margin-top: var(--s5);
}

.anonymous-question-counter {
  text-align: right;
  color: var(--text-secondary);
  margin: var(--s2) 0;
  font-size: 12px;
}

.anonymous-question-success {
  padding: var(--s5);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  color: var(--accent-success);
}

.question-dialog {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  padding: calc(var(--safe-top) + var(--s5)) var(--s5) calc(var(--safe-bottom) + var(--s5));
  border: 0;
  margin: 0;
  inset: 0;
  overflow: auto;
}

.question-dialog::backdrop {
  background: #0000008c;
}

.dialog-close {
  margin-left: auto;
  display: flex;
}

.professor-question-composer-title {
  margin-bottom: var(--s5);
}

.professor-question-select-chevron {
  display: none;
}

.professor-question-author-option {
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 0;
  min-height: 44px;
  display: flex;
}

.professor-question-composer > .muted {
  margin: var(--s4) 0;
}

.professor-question-feed-head {
  margin: var(--s6) 0 var(--s4);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.professor-question-feed-subtitle {
  color: var(--text-secondary);
  margin-top: var(--s2);
  font-size: 13px;
}

.professor-question-feed-head .card-kicker {
  display: none;
}

.professor-question-card {
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--divider);
  overflow-wrap: anywhere;
}

.professor-question-card-head, .professor-question-card-top, .professor-question-card-footer, .professor-question-card-actions {
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  display: flex;
}

.professor-question-category-badge, .professor-question-status, .professor-question-author, .professor-question-date {
  color: var(--text-secondary);
  font-size: 12px;
}

.professor-question-topic {
  margin: var(--s3) 0;
  font-size: 16px;
}

.professor-question-text, .professor-question-answer-text {
  line-height: 1.6;
}

.professor-question-answer {
  padding-top: var(--s5);
  margin-top: var(--s4);
  border-top: 1px solid var(--divider);
}

.professor-question-payment-box {
  padding: var(--s4);
  margin: var(--s4) 0;
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.professor-question-payment-timer {
  color: var(--accent-warning);
  font-variant-numeric: tabular-nums;
}

.profile-identity {
  align-items: center;
  gap: var(--s4);
  display: flex;
}

.profile-identity .avatar {
  width: 60px;
  height: 60px;
  font-size: 26px;
}

.profile-identity p {
  margin-top: var(--s1);
}

.membership {
  padding: var(--s5);
  border-radius: var(--radius-card);
  background: var(--bg-secondary);
  border-top: 2px solid var(--accent-primary);
}

.membership h2 {
  color: var(--accent-primary);
  font-size: 24px;
}

.membership p {
  color: var(--text-secondary);
  margin: var(--s2) 0 var(--s5);
  font-size: 13px;
}

.profile-bento .metric {
  min-height: 136px;
}

.blackos-capital {
  padding: var(--s4) 0;
}

.blackos-capital-score {
  gap: var(--s3);
  margin: var(--s5) 0;
  align-items: center;
  display: flex;
}

.blackos-capital-score strong {
  font-size: 38px;
}

.blackos-capital-score > span {
  color: var(--text-secondary);
  font-size: 12px;
}

.blackos-capital-rank {
  padding: var(--s3) 0;
  justify-content: space-between;
  display: flex;
}

.blackos-capital-metrics {
  gap: var(--s5);
  margin-top: var(--s5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.blackos-capital-metrics > div {
  gap: var(--s1);
  flex-direction: column;
  display: flex;
}

.blackos-capital-metrics span {
  color: var(--text-secondary);
  font-size: 12px;
}

.blackos-capital-metrics b {
  font-size: 20px;
}

.subscription-purchase-brand {
  color: var(--accent-primary);
  letter-spacing: 1px;
  font-size: 12px;
}

.subscription-purchase-headline {
  color: var(--text-secondary);
  margin-top: var(--s1);
  font-size: 13px;
}

.subscription-purchase-title {
  font-size: 24px;
  line-height: 30px;
}

.subscription-purchase-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--s5);
  font-size: 13px;
}

.subscription-purchase-progress-item {
  height: 32px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: flex;
}

.subscription-purchase-progress-item.is-current, .subscription-purchase-progress-item.is-done {
  color: var(--accent-primary);
}

.subscription-period-list, .subscription-method-list {
  gap: var(--s3);
  display: grid;
}

.subscription-period-option, .subscription-method-option {
  text-align: left;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--bg-elevated);
  border: 0;
  display: flex;
}

.subscription-period-option.is-selected, .subscription-method-option.is-selected {
  border-color: var(--accent-primary);
}

.subscription-period-main, .subscription-method-copy {
  gap: var(--s2);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.subscription-period-title-row b {
  font-size: 16px;
}

.subscription-period-rates, .subscription-period-rates > span, .subscription-period-caption, .subscription-method-copy small {
  color: var(--text-secondary);
  font-size: 12px;
  display: block;
}

.subscription-period-price {
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  display: flex;
}

.subscription-period-price strong {
  font-size: 20px;
}

.subscription-period-price s {
  color: var(--text-secondary);
  font-size: 12px;
}

.subscription-option-check {
  display: none;
}

.is-selected > .subscription-option-check {
  color: var(--accent-primary);
  display: block;
}

.subscription-purchase-actions {
  gap: var(--s3);
  margin-top: var(--s5);
  background: var(--bg-secondary);
  padding: var(--s3) 0;
  display: flex;
  position: sticky;
  bottom: 0;
}

.subscription-purchase-actions > * {
  flex: 1;
}

.subscription-summary-row, .subscription-summary-total {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  display: flex;
}

.subscription-summary-row {
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
}

.subscription-summary-row span {
  color: var(--text-secondary);
}

.subscription-summary-total strong {
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
}

.subscription-purchase-note, .subscription-bonus-caption {
  color: var(--text-secondary);
  font-size: 12px;
}

.subscription-bonus-toggle-row {
  gap: var(--s3);
  padding: var(--s4) 0;
  align-items: center;
  display: flex;
}

.subscription-bonus-copy {
  gap: var(--s2);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.subscription-bonus-switch {
  display: none;
}

.notification-preference-row {
  gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--divider);
  align-items: center;
  display: flex;
}

.notification-preference-copy {
  flex: 1;
  min-width: 0;
}

.notification-preference-copy b, .notification-preference-copy small {
  display: block;
}

.notification-preference-copy small {
  margin-top: var(--s1);
}

.notification-preference-switch {
  display: none;
}

.bonus-info-text, .bonus-info-note {
  color: var(--text-secondary);
  margin: var(--s4) 0;
}

.share-card-preview {
  border-radius: var(--radius);
  width: 100%;
}

.share-card-preview img {
  width: 100%;
  height: auto;
}

.blackos-topbar, .blackos-system-label {
  color: var(--text-secondary);
  font-size: 12px;
}

.blackos-topbar {
  justify-content: space-between;
  display: flex;
}

.blackos-member-stamp {
  gap: var(--s2);
  background: none;
  font-size: 12px;
  display: flex;
}

.blackos-guest {
  gap: var(--s6);
  display: grid;
}

.blackos-page-intro p {
  color: var(--text-secondary);
  margin-top: var(--s3);
}

.blackos-guest-access, .blackos-access-gate {
  padding: var(--s5);
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  gap: var(--s3);
  flex-direction: column;
  display: flex;
}

.blackos-access-gate {
  margin-top: var(--s6);
}

.blackos-guest-access button, .blackos-access-gate button {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.blackos-guest-metrics {
  justify-content: space-between;
  font-size: 13px;
  display: flex;
}

.blackos-guest-metrics > div {
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.blackos-guest-metrics span {
  color: var(--text-secondary);
  font-size: 12px;
}

.blackos-row-list > button {
  text-align: left;
  border-bottom: 1px solid var(--divider);
  background: none;
  border-radius: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.blackos-row-list > button > span {
  gap: var(--s1);
  flex-direction: column;
  display: flex;
}

.blackos-row-list small {
  color: var(--text-secondary);
}

.blackos-row-list i {
  font-style: normal;
}

.miniapp-toast {
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--s4));
  z-index: 150;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  opacity: 0;
  width: max-content;
  max-width: calc(100% - 32px);
  transition: opacity var(--expand) var(--ease),transform var(--expand) var(--ease);
  font-size: 13px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 8px);
  box-shadow: 0 8px 24px #0005;
}

.miniapp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%);
}

.miniapp-toast.is-danger {
  color: var(--accent-danger);
}

/* Preserve each control's surface, text contrast and corner shape on hover. */
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled), summary:hover, a:hover {
    filter: brightness(1.12);
  }
}

@media (width <= 479px) {
  .progress-content > .section-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .progress-content > .section-head h2 {
    font-size: 20px;
  }

  .segmented button {
    padding: 8px 5px;
    font-size: 12px;
  }

  .profile-bento .metric {
    min-height: 124px;
  }

  .habit-row {
    gap: 8px;
  }

  .habit-emoji {
    width: 24px;
  }

  .habit-stats-grid > .habit-stat-card:last-child {
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .habit-stats-grid > .habit-stat-card:last-child .habit-stat-value {
    font-size: 24px;
  }
}

@media (width >= 480px) and (width <= 719px) {
  :root {
    --page-padding: 20px;
    --content-width: 600px;
  }
}

@media (width >= 720px) {
  :root {
    --page-padding: 24px;
  }

  .modal-overlay {
    padding: var(--s6);
    align-items: center;
  }

  .modal-sheet {
    border-radius: var(--radius-sheet);
    width: 540px;
    max-width: 100%;
    max-height: 90dvh;
    padding: var(--s5) var(--s6);
  }

  .modal-sheet:before {
    display: none;
  }

  .confirm-sheet {
    width: 440px;
  }

  .question-dialog {
    border-radius: var(--radius-sheet);
    width: 540px;
    max-width: calc(100% - 48px);
    height: auto;
    max-height: 90dvh;
    padding: var(--s6);
    margin: auto;
  }

  .material-reader-sheet {
    width: 100% !important;
  }

  .slip-insight-grid, .slip-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .habit-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >= 960px) {
  :root {
    --nav-height: 0px;
  }

  .app-root {
    margin-left: calc(var(--sidebar-width) + max(0px,(100vw - var(--sidebar-width) - var(--content-width))/2));
    padding-top: var(--s10);
    margin-right: auto;
  }

  .floating-tab-menu-root {
    width: var(--sidebar-width);
    border-top: 0;
    border-right: 1px solid var(--divider);
    padding: var(--s8) var(--s4);
    top: 0;
    bottom: 0;
    right: auto;
  }

  .floating-tab-menu-root:before {
    content: "BLACK CLUB";
    letter-spacing: 1.2px;
    color: var(--accent-primary);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s10);
    font-size: 14px;
    font-weight: 650;
    display: block;
  }

  .tab-menu {
    gap: var(--s2);
    flex-direction: column;
    height: auto;
    display: flex;
  }

  .tab-button {
    justify-content: flex-start;
    gap: var(--s3);
    border-radius: var(--radius);
    padding: var(--s3) var(--s4);
    flex-direction: row;
    min-height: 48px;
    font-size: 14px;
  }

  .tab-button.is-active {
    background: var(--bg-elevated);
  }

  .tab-button.is-active:before {
    border-radius: 2px;
    width: 2px;
    height: 20px;
    top: 14px;
    left: 0;
  }

  .voice-chat-screen {
    height: calc(var(--visual-height, 100dvh) - var(--s10) - var(--s8));
  }

  .voice-chat-open .app-root {
    padding-top: var(--s5);
  }

  .miniapp-toast {
    bottom: var(--s6);
  }

  .material-reader-overlay {
    left: var(--sidebar-width);
  }
}

@media (width <= 959px) {
  body.keyboard-open .floating-tab-menu-root {
    display: none;
  }

  body.keyboard-open {
    --nav-height: 0px;
  }

  .voice-chat-open .app-root {
    padding-top: calc(var(--safe-top) + var(--safe-content-top));
    padding-bottom: 0;
  }

  .voice-chat-open {
    overflow: hidden;
  }
}

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

  button:active:not(:disabled) {
    transform: none;
  }
}

.habit-emoji-picker {
  gap: var(--s2);
  margin: var(--s4) 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  display: grid;
}

.notification-preference-text {
  color: var(--text-secondary);
  margin-top: var(--s1);
  font-size: 12px;
}

.notification-preference-toggle {
  background: none;
  flex-shrink: 0;
  width: 48px;
  min-width: 48px;
  padding: 10px 0;
  position: relative;
}

.notification-preference-toggle:before {
  content: "";
  background: var(--bg-hover);
  border-radius: 20px;
  width: 48px;
  height: 24px;
  position: absolute;
  top: 10px;
  left: 0;
}

.notification-preference-toggle span {
  background: var(--text-secondary);
  width: 18px;
  height: 18px;
  transition: transform var(--tab) var(--ease);
  border-radius: 50%;
  position: absolute;
  top: 13px;
  left: 3px;
}

.notification-preference-toggle.is-enabled:before {
  background: var(--accent-primary);
}

.notification-preference-toggle.is-enabled span {
  background: var(--bg-primary);
  transform: translateX(24px);
}

.notification-settings-limit {
  color: var(--text-secondary);
  margin-top: var(--s5);
  font-size: 12px;
}

.voice-audio-row {
  gap: var(--s3);
  margin-top: var(--s3);
  background: var(--bg-elevated);
  width: 220px;
  max-width: 100%;
  padding: var(--s2);
  border-radius: var(--radius);
  align-items: center;
  display: flex;
}

.voice-audio-content {
  flex: 1;
  min-width: 0;
}

.voice-audio-progress {
  height: 28px;
  color: var(--text-tertiary);
  margin-top: 0;
  display: block;
  position: relative;
}

.voice-audio-progress > .voice-audio-played {
  width: 0;
  color: var(--accent-ai);
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
}

.voice-audio-progress svg {
  stroke: currentColor;
  fill: none;
  width: 100%;
  height: 28px;
  display: block;
}

.voice-audio-played svg {
  width: var(--wave-width, 140px);
  max-width: none;
}

.time-wheel-item.is-active {
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-weight: 650;
}

.current-tariff {
  margin-left: var(--s2);
  color: var(--accent-primary);
}

.center-screen {
  padding: var(--s10) 0;
}

.center-screen h1 {
  margin: var(--s5) 0;
}

.hero-topline, .hero-badge {
  color: var(--text-secondary);
  font-size: 12px;
}

.hero-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--s5);
}

.cta-row {
  gap: var(--s3);
  flex-wrap: wrap;
  display: flex;
}

.solution-minute-card.is-open .solution-minute-body {
  height: auto;
}

.professor-question-full-copy {
  display: none;
}

.professor-question-card.is-expanded .professor-question-full-copy {
  display: block;
}

.professor-question-card.is-expanded .professor-question-collapsed-copy {
  display: none;
}

.professor-question-label {
  color: var(--text-secondary);
  margin: var(--s3) 0 var(--s2);
  font-size: 12px;
}

.professor-question-title {
  margin: var(--s2) 0;
}

.professor-question-answer-heading {
  align-items: center;
  gap: var(--s2);
  display: flex;
}

.professor-question-section + .professor-question-section {
  margin-top: var(--s4);
}

.professor-question-card-bottom, .professor-question-left-controls {
  align-items: center;
  gap: var(--s2);
  display: flex;
}

.professor-question-card-bottom {
  margin-top: var(--s4);
  justify-content: space-between;
}

.professor-question-card-meta {
  color: var(--text-secondary);
  text-align: right;
  font-size: 12px;
}

.professor-question-like, .professor-question-owner-delete, .professor-question-gear {
  padding: var(--s3);
  align-items: center;
  gap: var(--s1);
  background: none;
  display: flex;
}

.professor-question-like.is-liked {
  color: var(--accent-danger);
}

.professor-question-card.is-archive-locked .professor-question-body {
  display: none;
}

.professor-question-lock-overlay {
  padding: var(--s4);
  background: var(--bg-elevated);
  border-radius: var(--radius);
  gap: var(--s3);
  align-items: center;
  display: flex;
}

.professor-question-empty {
  gap: var(--s3);
  padding: var(--s6) 0;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.professor-question-answer-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  display: flex;
}

.professor-question-payment-note {
  gap: var(--s3);
  margin-top: var(--s4);
  flex-direction: column;
  font-size: 13px;
  display: flex;
}

.professor-question-settings-card {
  gap: var(--s3);
  flex-direction: column;
  display: flex;
}

.professor-question-pending-chip {
  color: var(--accent-warning);
  display: block;
}

.professor-question-category-filter.is-active {
  color: var(--accent-primary);
}

.page-link-share-host {
  position: relative;
}

.page-link-share-button {
  padding: var(--s3);
  color: var(--text-secondary);
  background: none;
  place-items: center;
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
}

.voice-lobby-top .page-link-share-button, .function-header-actions .page-link-share-button {
  flex: 0 0 44px;
  position: static;
}

.voice-lobby-top > :first-child {
  margin-right: auto;
}

.page-link-share-host.page-heading {
  padding-right: 48px;
}

.page-link-share-button svg {
  fill: none;
  stroke: currentColor;
}

.voice-record-stop-dot {
  background: var(--bg-primary);
  border-radius: 3px;
  width: 16px;
  height: 16px;
  display: block;
}

.voice-chat-header .context-menu > div {
  top: 44px;
}

.voice-chat-header .context-menu {
  z-index: 30;
}

.anonymous-question-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0;
  display: flex;
}

.club-preview-carousel {
  scroll-snap-type: x mandatory;
  gap: var(--s4);
  display: flex;
  overflow-x: auto;
}

.club-preview-slide {
  scroll-snap-align: center;
  flex: 0 0 100%;
  margin: 0;
}

.club-preview-image {
  object-fit: contain;
  width: 100%;
  max-height: 65dvh;
  display: block;
}

.material-image-viewer-panel {
  position: relative;
  z-index: 1;
  min-height: 0;
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.material-image-viewer-toolbar {
  justify-content: flex-end;
  align-items: center;
  gap: var(--s2);
  padding: calc(var(--safe-top) + var(--s3)) var(--s3) var(--s3);
  z-index: 2;
  display: flex;
}

.material-image-viewer-toolbar .material-image-viewer-close {
  position: static;
}

.material-image-viewer-stage {
  touch-action: none;
  flex: 1;
  place-items: center;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.material-image-viewer-img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.material-image-viewer-hint {
  padding: var(--s4);
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
}

.material-image-viewer-overlay.is-closing {
  opacity: 0;
}

.segmented button, .materials-view-button {
  min-height: 44px;
}

.tab-button-label {
  line-height: 14px;
}

.voice-history-open {
  align-items: center;
  gap: var(--s3);
  text-align: left;
  border-radius: var(--radius);
  min-width: 0;
  padding: var(--s3);
  background: none;
  flex: 1;
  display: flex;
}

.voice-history-open .voice-history-copy {
  min-width: 0;
}

.form-error {
  color: var(--accent-danger);
  padding: var(--s3) 0;
  font-size: 13px;
}

.solution-minute-counter {
  color: var(--text-secondary);
  margin: var(--s2) 0;
  text-align: right;
  font-size: 12px;
}

.materials-stack > #materials-continue-root:empty {
  display: none;
}

.material-reaction-button {
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  display: inline-flex;
}

.voice-chat-screen .context-menu button {
  white-space: nowrap;
}

.professor-question-expand {
  text-align: left;
  padding: var(--s2) 0;
  background: none;
  border-radius: 0;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  display: block;
}

.voice-action-button .ui-icon {
  width: 20px;
  height: 20px;
}

.is-loading {
  cursor: progress;
}

.professor-question-card.is-archive-locked .professor-question-expand {
  color: var(--text-secondary);
}

.slip-stat-compact {
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 26px;
}

.slip-quick-points-grid, .slip-chart-grid {
  gap: var(--s4);
  display: grid;
}

.slip-quick-point, .slip-preview-card {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--divider);
}

.slip-quick-point-label, .slip-quick-point-note {
  color: var(--text-secondary);
  font-size: 12px;
}

.slip-quick-point-value {
  margin: var(--s2) 0;
  font-size: 16px;
  font-weight: 600;
}

.week-summary-card {
  gap: var(--s6);
  flex-direction: column;
  display: flex;
}

.week-summary-header-row {
  justify-content: space-between;
  gap: var(--s3);
  align-items: center;
  display: flex;
}

.week-summary-header-note, .week-summary-total-chip, .week-summary-hero-kicker, .week-summary-section-kicker, .week-summary-insight-title, .week-summary-insight-note, .week-summary-action-kicker {
  color: var(--text-secondary);
  font-size: 12px;
}

.week-summary-hero-title, .week-summary-section-title {
  margin: var(--s2) 0 var(--s3);
}

.week-summary-focus-grid, .week-summary-insights-grid {
  gap: var(--s4);
  display: grid;
}

.week-summary-insight-card {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--divider);
}

.week-summary-insight-value {
  margin: var(--s2) 0;
  font-size: 16px;
  font-weight: 600;
}

.week-summary-action-card {
  padding: var(--s4);
  background: var(--bg-elevated);
  border-radius: var(--radius);
}

.week-summary-action-text {
  margin-top: var(--s2);
}

.week-summary-launch-button, .previous-week-summary-button {
  gap: var(--s2);
  width: 100%;
  margin: var(--s4) 0;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.week-summary-launch-text, .previous-week-summary-button > span {
  color: var(--text-secondary);
  font-size: 13px;
}

.share-card-preview-wrap img, .share-card-preview-wrap canvas {
  max-width: 100%;
  height: auto;
  margin: auto;
  display: block;
}

.share-card-actions {
  margin-top: var(--s4);
}

.share-card-note {
  color: var(--text-secondary);
  margin-top: var(--s3);
  font-size: 12px;
}

@media (width >= 720px) {
  .slip-quick-points-grid, .slip-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.avatar {
  position: relative;
  overflow: hidden;
}

.avatar img {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.professor-question-category-badge {
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border-radius: var(--s2);
  color: var(--category-color, var(--accent-ai));
  background: color-mix(in srgb, var(--category-color, var(--accent-ai)) 12%, transparent);
  align-items: center;
  display: inline-flex;
}

.professor-question-category-badge.is-money {
  --category-color: #64d69b;
}

.professor-question-category-badge.is-work {
  --category-color: #81baff;
}

.professor-question-category-badge.is-relationships {
  --category-color: #eb7580;
}

.professor-question-category-badge.is-circle {
  --category-color: #72d5c5;
}

.professor-question-category-badge.is-decisions {
  --category-color: #e9a15f;
}

.member-status {
  border-top: 3px solid var(--status-color);
}

.member-status > b, .member-status > svg {
  color: var(--status-color);
}

.member-status.is-bronze {
  --status-color: var(--accent-warning);
}

.member-status.is-silver {
  --status-color: var(--text-secondary);
}

.member-status.is-gold {
  --status-color: var(--accent-primary);
}

.member-status.is-platinum {
  --status-color: var(--accent-info);
}

.voice-audio-toggle {
  background: none;
  flex: 0 0 44px;
  padding: 0;
}

.voice-audio-progress {
  touch-action: none;
  cursor: pointer;
  user-select: none;
  align-items: center;
  height: 44px;
  display: flex;
}

.voice-audio-progress > .voice-audio-played {
  align-items: center;
  height: 44px;
  display: flex;
}

.voice-audio-progress svg {
  pointer-events: none;
}

.next-action-controls {
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  flex-wrap: wrap;
  display: flex;
}

.next-actions .next-action small {
  margin-top: var(--s1);
  color: var(--text-secondary);
  font-size: 13px;
  display: block;
}

.next-actions .section-head {
  margin-bottom: var(--s3);
}

/* Networking follows the existing Mini App palette and controls. */
.net-sheet{width:min(100%,640px)}
.net-root{padding:0;overflow-y:auto;max-height:none;min-height:0;min-width:0;overscroll-behavior:contain}
.net-heading h2{margin:8px 0}.net-heading p,.net-note,.net-empty p{color:var(--text-secondary,#a5a5ac);line-height:1.5}
.net-toolbar,.net-filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.net-filter-row>*{flex:1;min-width:120px}
.net-label{display:block;font-size:14px;margin:18px 0 8px;color:var(--text-secondary,#a5a5ac)}
.net-root input:not([type=checkbox]),.net-root textarea,.net-root select{width:100%;box-sizing:border-box;border: 0;background:rgba(255,255,255,.04);color:inherit;border-radius:12px;padding:12px;font:inherit;margin-top:7px}
.net-root textarea{resize:vertical}.net-root select option{background:var(--bg-elevated);color:var(--text-primary)}
.net-list{display:grid;gap:12px}.net-card{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;padding:16px;border: 0;border-radius:16px;background:rgba(255,255,255,.025);color:inherit}
.net-avatar{width:48px;height:48px;object-fit:cover;flex-shrink:0;border-radius:50%}.net-initial{display:grid;place-items:center;background:rgba(227,232,239,.08);font-size:23px;color:var(--accent-primary)}
.net-card-copy{display:grid;gap:7px;flex:1;min-width:0}.net-card-copy span,.net-card-copy small{color:var(--text-secondary,#a5a5ac)}.net-card-copy em{font-style:normal;font-size:12px;color:var(--accent-primary)}
.net-card-copy>*{overflow-wrap:anywhere}.net-person{display:flex;align-items:center;gap:16px;margin:20px 0}.net-person h2{margin:0}.net-person p{margin:6px 0 0}
.net-tags{display:flex;flex-wrap:wrap;gap:7px}.net-tag{font-size:12px;padding:6px 9px;border-radius:20px;background:rgba(227,232,239,.06);color:var(--accent-primary)}
.net-detail-section{margin:24px 0}.net-detail-section h3{font-size:15px}.net-detail-section p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:14px;color:var(--text-secondary,#a5a5ac)}
.net-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin:22px 0}.net-consent input{margin-top:4px}
.net-admin{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;padding:0 8px 14px}.net-admin span{width:100%;color:var(--text-secondary,#a5a5ac)}.net-danger{color:#f08080}
.net-root[aria-busy=true] .net-list{opacity:.65}.net-empty{text-align:center;padding:32px 12px}

/* A restrained white accent; descriptive text stays in the main typeface. */
.ui-meta, time, .membership-line, .next-actions .section-head > .caption,
.habit-form-counter, [class$="field-counter"], .voice-about-counter,
.anonymous-question-counter, .solution-minute-counter,
.voice-message-time, .voice-date-divider, .voice-history-date, .voice-record-time,
.solution-minute-date, .professor-question-date, .professor-question-payment-timer,
.blackos-kicker, .blackos-matrix-day, .habit-chart-kicker,
.habit-stat-value, .slip-stat-value, .habit-chart-value, .slip-chart-value,
.slip-quick-point-value, .week-summary-insight-value,
.subscription-period-price, .subscription-period-rates, .time-wheel-item,
.tariff-expiry-note, .habit-copy > small, .metric > strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.btn-gold, .primary {
  box-shadow: 0 0 12px var(--accent-glow);
}

.text-button:not(.muted):not(.is-danger):not(.net-danger),
.tab-button.is-active, .avatar > span {
  text-shadow: 0 0 9px var(--accent-glow);
}

.progress-line, .blackos-progress-line, .material-progress-track,
.tab-button.is-active:before {
  box-shadow: 0 0 8px var(--accent-glow);
}

.net-card {
  border-radius: var(--radius-card);
  background: var(--bg-secondary);
}

.net-root input:not([type=checkbox]), .net-root textarea, .net-root select {
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

/* Function colors belong to the icon, keeping the controls dark. */
.function-icon[data-icon="heart"] { --icon-color: #ef93bc; }
.function-icon[data-icon="bolt"] { --icon-color: #f0cc7a; }
.function-icon[data-icon="message"], .function-icon[data-icon="mic"] { --icon-color: #81c7ff; }
.function-icon[data-icon="bookmark"] { --icon-color: #aca4ff; }
.function-icon[data-icon="award"] { --icon-color: #c2a1ff; }
.function-icon[data-icon="gift"] { --icon-color: #86dfb4; }
.function-icon[data-icon="calendar"], .function-icon[data-icon="bell"] { --icon-color: #8ebde8; }
.function-icon[data-icon="user"], .function-icon[data-icon="share"] { --icon-color: #7cdbce; }
[data-open-function="professor-question"] > .ui-icon:first-child { --icon-color: #b5a0ff; }
[data-open-function="anonymous-question"] > .ui-icon:first-child { --icon-color: #79d5c8; }
.function-icon[data-icon="shield"] { --icon-color: #aebdd4; }
.ui-icon.function-icon[data-icon] {
  color: var(--icon-color, inherit);
}
.ui-icon.function-icon[data-icon] {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--icon-color) 22%, transparent));
}
/* Colored strokes only; white submit controls keep their dark icon contrast. */
.primary > .ui-icon[data-icon], .btn-gold > .ui-icon[data-icon] {
  color: inherit;
  filter: none;
}

.member-status.is-bronze { --status-color: #e79b6e; }
.member-status.is-silver { --status-color: #c7d5e5; }
.member-status.is-gold { --status-color: #f3ca70; }
.member-status.is-platinum { --status-color: #c39aff; }
.member-status {
  border: 0;
  border-top: 3px solid var(--status-color);
  background: linear-gradient(145deg, color-mix(in srgb, var(--status-color) 8%, #060606), #060606 72%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--status-color) 6%, transparent);
}
.member-status > b, .member-status > .ui-icon[data-icon] {
  color: var(--status-color);
  --icon-color: var(--status-color);
  text-shadow: 0 0 10px color-mix(in srgb, var(--status-color) 16%, transparent);
}
.member-status > small {
  font-family: var(--font-mono);
  color: var(--status-color);
}

.is-tier-black { --tier-color: #b8c1cd; --tier-glow: rgba(184, 193, 205, .04); }
.is-tier-plus { --tier-color: #83cbff; --tier-glow: rgba(131, 203, 255, .07); }
.is-tier-private { --tier-color: #c3a0ff; --tier-glow: rgba(195, 160, 255, .10); }
.subscription-tariff-option {
  position: relative;
  border: 0;
  border-left: 3px solid var(--tier-color);
  background: var(--bg-secondary);
  box-shadow: 0 0 14px var(--tier-glow);
}
.subscription-tariff-option.is-tier-plus, .tariff-membership.is-tier-plus {
  background: linear-gradient(135deg, #0c151c, #060606 75%);
}
.subscription-tariff-option.is-tier-private, .tariff-membership.is-tier-private {
  background: linear-gradient(135deg, #191023, #060606 75%);
}
.subscription-tariff-option .subscription-period-title-row > b,
.tariff-membership > h2, .membership-line[class*="is-tier-"] {
  color: var(--tier-color);
  text-shadow: 0 0 10px var(--tier-glow);
}
.subscription-tariff-option.is-selected {
  border-color: var(--tier-color);
  box-shadow: 0 0 18px var(--tier-glow);
}
.subscription-tariff-option.is-selected .subscription-option-check {
  color: var(--bg-primary);
  background: var(--tier-color);
}
.tariff-membership {
  border: 0;
  border-top: 3px solid var(--tier-color);
  box-shadow: 0 0 16px var(--tier-glow);
}
.tariff-membership > .btn-gold {
  background: var(--tier-color);
  box-shadow: 0 0 12px var(--tier-glow);
}

.professor-question-category-badge.is-psychology {
  --category-color: #bd9aff;
}

.professor-question-category-badge.is-other {
  --category-color: #a3a3a3;
}

/* Newcomer quest and earned reward chips. */
.newcomer-quest-card {
  border: 0;
  border-radius: var(--radius-card);
  padding: var(--s5);
  background: var(--bg-secondary);
}
.quest-card-heading, .quest-task-heading {display:flex; align-items:center; gap:var(--s2); justify-content:space-between;}
.quest-card-heading h2 {margin:0;}
.quest-collapse {background:none; color:var(--text-tertiary); margin:-8px -8px -8px 0;}
.newcomer-quest-card p, .quest-modal-heading p {color:var(--text-secondary); margin:var(--s2) 0 var(--s4);}
.quest-progress-meta {font-size:12px; color:var(--text-secondary); margin-bottom:var(--s2);}
.newcomer-quest-card .btn {margin-top:var(--s4);}
.newcomer-quest-card.is-complete {border-color:#64d69b30;}
.quest-collapsed {display:flex; align-items:center; gap:var(--s3); width:100%; padding:var(--s3) var(--s4); background:var(--bg-secondary); border: 0; text-align:left;}
.quest-collapsed small {margin-left:auto; color:var(--text-secondary); font-size:11px;}
.quest-modal-heading {margin-bottom:var(--s5);}
.quest-modal-heading .ui-meta {color:var(--text-secondary); margin-bottom:var(--s2);}
.quest-task {display:flex; gap:var(--s3); padding:var(--s4) 0; border-bottom:1px solid var(--divider);}
.quest-task:last-child {border-bottom:0;}
.quest-task>div {flex:1; min-width:0;}
.quest-task-number {width:28px; height:28px; display:grid; place-items:center; flex-shrink:0; border: 0; border-radius:8px; color:var(--text-secondary); font-size:12px;}
.quest-task h3 {margin:0; font-size:15px;}
.quest-task p {margin:var(--s2) 0; color:var(--text-secondary); font-size:13px;}
.quest-task-heading {flex-wrap:wrap; justify-content:flex-start;}
.quest-optional-label {color:var(--text-tertiary); font:10px var(--font-mono); border: 0; border-radius:5px; padding:3px 5px;}
.quest-task.is-done .quest-task-number {color:var(--accent-success); border-color:#64d69b40; background:#64d69b0a;}
.quest-done-label {color:var(--accent-success); font-size:11px;}
.achievement-reward-badges {display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px;}
.achievement-reward-badge {font:12px/1.2 var(--font-mono); border-radius:6px; padding:5px 7px; border: 0;}
.achievement-reward-badge.is-money {color:#64d69b; background:#64d69b0a; border-color:#64d69b30; box-shadow:0 0 7px #64d69b08;}
.achievement-reward-badge.is-days {color:#81baff; background:#81baff0a; border-color:#81baff30; box-shadow:0 0 7px #81baff08;}

.quest-replay-profile {display:block; margin:var(--s5) auto 0; padding:var(--s2) var(--s3); background:none; color:var(--text-tertiary); font-size:12px; font-weight:400;}
.quest-replay-note {display:block; text-align:center; color:var(--text-tertiary); font-size:10px; margin:0 0 var(--s4);}

.achievement-difficulty-row {display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:7px 0;}
.achievement-difficulty {font:10px/1.2 var(--font-mono); border-radius:5px; padding:4px 6px; border: 0;}
.achievement-difficulty.is-level-1 {color:#9ca3ad; border-color:#9ca3ad25; background:#9ca3ad08;}
.achievement-difficulty.is-level-2 {color:#81baff; border-color:#81baff30; background:#81baff08;}
.achievement-difficulty.is-level-3 {color:#bd9aff; border-color:#bd9aff38; background:#bd9aff0a;}
.achievement-special-label {color:var(--text-tertiary); font:10px var(--font-mono);}
.os-achievement.is-unlocked.difficulty-3 {border-color:#bd9aff38;}
.os-achievement.is-unlocked.difficulty-3 .os-achievement-icon {border: 0; box-shadow:0 0 8px #bd9aff08;}
.os-achievement.is-locked .achievement-difficulty {color:#686868; border-color:#ffffff0d; background:none;}

/* Payment selector marks keep a fixed shape and do not squeeze beside prices. */
.subscription-option-check {display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border-radius:50%; visibility:hidden; background:var(--accent-primary); color:var(--bg-primary);}
.is-selected > .subscription-option-check {display:grid; visibility:visible; color:var(--bg-primary);}
.subscription-option-check .ui-icon {width:14px; height:14px; display:block;}
.subscription-period-price {white-space:nowrap;}
.subscription-purchase-sheet:has(.subscription-purchase-footer) {padding-bottom:0;}
.subscription-purchase-footer {display:flex; align-items:stretch; gap:var(--s3); margin:var(--s5) calc(-1 * var(--s5)) 0; padding:var(--s4) var(--s5) calc(var(--s3) + var(--safe-bottom)); background:var(--bg-secondary); position:sticky; bottom:0; z-index:1;}
.subscription-purchase-footer > button {flex:1; min-width:0;}
.achievement-difficulty, .achievement-reward-badge, .os-achievement.is-locked .achievement-difficulty {border: 0;}


/* Structured text replies for both AI helpers. */
.voice-message-text { overflow-wrap: anywhere; }
.voice-message-text:has(.ai-text-line, ul, ol, blockquote) { white-space: normal; }
.voice-message-text .ai-paragraph-gap { height: 0.65em; }
.voice-message-text ul, .voice-message-text ol { margin: 0.4em 0; padding-left: 1.5em; }
.voice-message-text li + li { margin-top: 0.25em; }
.voice-message-text blockquote { margin: 0.5em 0; padding-left: 0.8em; border-left: 2px solid #666; }
.voice-message-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.voice-message-text u { text-underline-offset: 3px; }
.voice-message-text code { font-family: monospace; padding: 0.08em 0.25em; border-radius: 3px; }


/* Networking: one scroll area, with the close control always visible. */
.modal-sheet.net-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(90dvh, var(--visual-height, 90dvh));
}
.net-sheet::before, .net-sheet > .blackos-sheet-toolbar { flex-shrink: 0; }
.net-sheet > .net-root { flex: 1 1 auto; }
.net-person > div { min-width: 0; flex: 1; }
.net-person h2, .net-person p, .net-tag, .net-consent, #net-edit > p {
  overflow-wrap: anywhere;
}
.net-tag { min-width: 0; max-width: 100%; }
.net-filter-row > select { min-width: 0; flex: 1 1 120px; }
.net-search-status { color: var(--text-secondary); margin: 12px 0; }
.net-search-status:empty { display: none; }
@media (width <= 479px) {
  .net-sheet .net-toolbar { gap: 8px 12px; }
  #net-search .net-toolbar > .btn[type="submit"] { flex: 1 0 100%; }
}


/* Article typography is scoped to the material reader. */
.material-reader-body .material-reader-title {
  font-family: var(--font-mono);
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.7px;
  margin-bottom: 30px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.material-reader-body .material-reader-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 20px;
  border-radius: 2px;
  background: var(--accent-primary);
  opacity: 0.6;
}
.material-reader-body .material-markdown {
  color: #d0d2d6;
  font-size: 17px;
  line-height: 1.72;
}
.material-reader-body .material-markdown p { margin-bottom: 20px; line-height: inherit; }
.material-reader-body .material-markdown :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.3;
  margin: 34px 0 14px;
  letter-spacing: -0.25px;
  text-wrap: balance;
}
.material-reader-body .material-markdown :is(h1, h2, h3, h4) {
  font-family: var(--font-mono);
}
.material-reader-body .material-markdown h1 { font-size: 28px; font-weight: 800; }
.material-reader-body .material-markdown h2 { font-size: 24px; font-weight: 700; }
.material-reader-body .material-markdown h3 { font-size: 20px; font-weight: 500; }
.material-reader-body .material-markdown :is(h4, h5, h6) { font-size: 18px; }
.material-reader-body .material-markdown h4 { font-weight: 400; }
.material-reader-body .material-markdown > :first-child { margin-top: 0; }
.material-reader-body .material-markdown :is(strong, b) { color: #f7f8fa; font-weight: 700; }
.material-reader-body .material-markdown :is(em, i) { color: #bac1cc; }
.material-reader-body .material-markdown u {
  text-decoration-color: #8a94a2;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
}
.material-reader-body .material-markdown a {
  color: #bdcede;
  text-decoration-line: underline;
  text-decoration-color: #bdcede70;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
  border-radius: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.material-reader-body .material-markdown a:active {
  color: #f0f4fa;
  text-decoration-color: currentColor;
}
.material-reader-body .material-markdown blockquote {
  margin: 24px 0;
  padding: 16px 18px;
  border-left: 2px solid #8897a9;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-elevated);
  color: #c3cad3;
  line-height: 1.7;
}
.material-reader-body .material-markdown :is(ul, ol) { margin: 18px 0 24px; padding-left: 26px; }
.material-reader-body .material-markdown li { padding-left: 5px; }
.material-reader-body .material-markdown li + li { margin-top: 10px; }
.material-reader-body .material-markdown li::marker { color: #8d99aa; }
.material-reader-body .material-markdown ol > li::marker {
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-weight: 600;
}
.material-reader-body .material-markdown hr {
  height: 1px;
  border: 0;
  margin: 30px 0;
  background: linear-gradient(90deg, #ffffff24, #ffffff08);
}
.material-reader-body .material-markdown :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: #d4dce6;
  background: var(--bg-elevated);
  padding: 2px 5px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.material-reader-body .material-markdown pre { margin: 24px 0; line-height: 1.6; }
.material-reader-body .material-markdown pre code { font: 14px/1.6 var(--font-mono); }
@media (hover: hover) and (pointer: fine) {
  .material-reader-body .material-markdown a:hover {
    color: #eef3fa;
    text-decoration-color: currentColor;
  }
}
@media (width <= 479px) {
  .material-reader-body .material-markdown h2 { font-size: 22px; }
  .material-reader-body .material-markdown blockquote { padding: 14px; }
}

/* Open edges: selection stays visible without enclosing strokes. */
.check-outline {
  background: var(--bg-elevated);
}
.material-markdown td, .material-markdown th {
  border-bottom: 1px solid var(--divider);
}
.net-root input:not([type=checkbox]), .net-root textarea, .net-root select {
  border-bottom: 0;
}
.quest-task-number {
  background: var(--bg-elevated);
}
.subscription-period-option.is-selected, .subscription-method-option.is-selected {
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-elevated));
  color: var(--accent-primary);
}

/* Shared assistant and psychologist composer: no focus underline. */
.voice-text-form .voice-text-input:focus,
.voice-text-form .voice-text-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Shared selection treatment for pickers, filters and option buttons. */
.habit-emoji-button:is(.is-active, .is-selected),
.slip-option-button.is-active,
.solution-minute-type-button.is-active,
.materials-chip.is-active,
.materials-view-button.is-active,
.professor-question-category-filter.is-active,
.professor-question-category-option.is-active,
.segmented button:is(.is-active, [aria-selected="true"]),
.subscription-period-option.is-selected,
.subscription-method-option.is-selected {
  background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-elevated));
  color: var(--text-primary);
  box-shadow: none;
}
.subscription-tariff-option.is-selected {
  background: color-mix(in srgb, var(--tier-color) 18%, var(--bg-elevated));
  box-shadow: none;
}
.habit-check[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent-success) 16%, var(--bg-elevated));
  color: var(--accent-success);
}
.material-favorite-button.is-active, .material-reader-favorite.is-active {
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-elevated));
}

/* Article images use the full text column instead of default figure margins. */
.material-reader-body .material-markdown .material-image {
  width: 100%;
  margin: 24px 0;
}
.material-reader-body .material-image-open-button,
.material-reader-body .material-image-open-button img {
  display: block;
  width: 100%;
}
.material-image-viewer-backdrop {
  position: absolute;
  inset: 0;
}
.material-image-viewer-overlay .material-image-viewer-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Message editing and contact publication consent. */
.voice-message-meta { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:6px; }
.voice-message-meta .voice-message-time { margin:0; }
.ai-message-edit { appearance:none; border:0; background:none; color:var(--text-secondary); font:inherit; font-size:12px; cursor:pointer; padding:5px 0; min-height:28px; }
.ai-message-edit:hover, .ai-message-edit:focus-visible { color:var(--accent-primary); }
.ai-message-edit:disabled { opacity:.4; cursor:default; }
.net-consent #net-consent { appearance:none; -webkit-appearance:none; flex:0 0 20px; width:20px; height:20px; border:0; outline:0; border-radius:5px; box-shadow:none; background:rgba(255,255,255,.16); cursor:pointer; }
.net-consent #net-consent:checked { background-color:var(--accent-primary); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='%23101010' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:18px; background-position:center; background-repeat:no-repeat; }
.net-consent #net-consent:focus-visible { box-shadow:none; filter:brightness(1.25); }

/* Dialog attachments, editing and plain favorite icons. */
#voice-image-input[hidden], #ai-edit-image-input[hidden] { display:none; }
.ai-image-attach { appearance:none; display:flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:44px; padding:4px; color:var(--text-secondary); background:none; border:0; box-shadow:none; cursor:pointer; }
.ai-image-attach:hover, .ai-image-attach:focus-visible { color:var(--text-primary); background:none; }
.ai-image-attach:disabled { opacity:.35; cursor:default; }
.ai-image-attach .ui-icon { width:21px; height:21px; }
.ai-image-draft:empty { display:none; }
.ai-image-draft { margin:0 0 8px; }
.ai-image-preview { position:relative; display:inline-flex; margin:10px 12px 20px 10px; transform:translateY(10px) rotate(var(--image-angle,5deg)); transform-origin:center; }
.ai-image-preview img { display:block; width:58.8px; height:58.8px; object-fit:cover; border-radius:8px; }
.ai-image-preview button { position:absolute; top:4px; right:4px; width:20px; height:20px; min-width:0; min-height:0; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(0,0,0,.8); color:white; cursor:pointer; }
.ai-image-preview button .ui-icon { width:14px; height:14px; }
.ai-message-image { display:block; width:100%; max-width:360px; padding:0; margin:0 0 8px; border:0; background:none; box-shadow:none; cursor:zoom-in; }
.ai-message-image img { display:block; width:100%; max-height:340px; object-fit:contain; border-radius:10px; }
.voice-message-card:has(.ai-message-image) { width:min(100%,360px); }
#ai-message-edit-form .voice-about-note { margin:0 0 16px; }
.ai-edit-image-choose { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.material-favorite-button.is-active, .material-reader-favorite.is-active,
.material-favorite-button.is-active:hover, .material-reader-favorite.is-active:hover,
.material-favorite-button.is-active:focus-visible, .material-reader-favorite.is-active:focus-visible { background:none; box-shadow:none; color:#edaa62; }
.material-favorite-button.is-active .ui-icon, .material-reader-favorite.is-active .ui-icon { fill:currentColor; }

/* Suppress native tap and text selection artifacts while seeking audio. */
.voice-audio-row, .voice-audio-row * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.voice-audio-progress:focus { outline:none; }
.voice-audio-progress:focus-visible { outline:1px solid var(--accent-primary); outline-offset:2px; border-radius:4px; }
.voice-audio-row ::selection { background:transparent; }

.ai-image-draft, #ai-edit-image-preview { display:flex; flex-wrap:wrap; gap:0; }
.ai-message-images { display:grid; gap:8px; margin-bottom:8px; }
.ai-message-images.image-count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ai-message-images.image-count-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ai-message-images .ai-message-image { min-width:0; margin:0; }
.ai-message-images:not(.image-count-1) .ai-message-image img { height:110px; object-fit:cover; }

/* Shared touch image viewer. Close control has a large transparent hit target. */
.material-image-viewer-toolbar { flex:0 0 auto; padding:calc(var(--safe-top) + 8px) 12px 0; }
.material-image-viewer-overlay .material-image-viewer-close,
.material-image-viewer-overlay .material-image-viewer-close:hover,
.material-image-viewer-overlay .material-image-viewer-close:active,
.material-image-viewer-overlay .material-image-viewer-close:focus-visible {
  display:grid; place-items:center; width:48px; height:48px; padding:8px;
  background:none; border:0; box-shadow:none; color:var(--text-primary);
}
.material-image-viewer-overlay .material-image-viewer-close .ui-icon { width:32px; height:32px; stroke-width:2.2; }
.material-image-viewer-stage { margin:12px 12px calc(var(--safe-bottom) + 12px); padding:0; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:default; overscroll-behavior:contain; }
.material-image-viewer-stage.is-zoomed { cursor:grab; }
.material-image-viewer-stage.is-zoomed:active { cursor:grabbing; }
.material-image-viewer-overlay .material-image-viewer-img { transform-origin:center; will-change:transform; pointer-events:none; }

.voice-composer:has(.ai-image-draft), .ai-image-draft, #ai-edit-image-preview, .ai-image-preview { background:none; border:0; box-shadow:none; }

/* Attachment previews float over the conversation instead of reserving a composer strip. */
.voice-chat-shell > .voice-composer { position:relative; background:transparent; border:0; box-shadow:none; }
#voice-image-draft { position:absolute; left:0; right:0; bottom:100%; z-index:4; margin:0; padding:0; background:transparent; border:0; box-shadow:none; pointer-events:none; }
#voice-image-draft .ai-image-preview { pointer-events:auto; background:transparent; }

/* Subtle depth for draft thumbnails; keep their surrounding area transparent. */
.ai-image-preview img { box-shadow:0 2px 6px rgba(0,0,0,.45), 0 0 5px 1px rgba(185,193,205,.14); }
#voice-image-draft { bottom:calc(100% - 8px); }