:root {
  color-scheme: light;
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-soft: #eef5f2;
  --ink: #15201e;
  --muted: #66716e;
  --line: #d9e0dd;
  --green: #176b57;
  --blue: #245f9c;
  --red: #c94949;
  --gold: #9a6a12;
  --cyan: #35a8b6;
  --shadow: 0 18px 46px rgba(20, 34, 32, 0.12);
}

/* Privacy control center refresh. */
.privacy-view.workspace-hub-view {
  --privacy-blue: #2563eb;
  --privacy-blue-dark: #1d4ed8;
  --privacy-blue-soft: #eff6ff;
  --privacy-cyan: #06b6d4;
  --privacy-green: #16a34a;
  --privacy-purple: #8b5cf6;
  --privacy-text: #0f172a;
  --privacy-muted: #64748b;
  --privacy-line: #d8e3f0;
  width: min(1280px, 100%);
  gap: 16px;
}

.privacy-view.workspace-hub-view::before {
  inset: -20px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(238, 246, 255, 0.92) 0%, rgba(248, 251, 255, 0.88) 45%, rgba(234, 244, 255, 0.9) 100%),
    linear-gradient(rgba(37, 99, 235, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.08) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  opacity: 1;
}

.privacy-view .hub-hero {
  position: relative;
  min-height: 136px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  padding: 26px 32px;
  border: 1px solid rgba(147, 197, 253, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 76% 22%, rgba(147, 197, 253, 0.34), transparent 32%),
    linear-gradient(135deg, #1e3a8a 0%, #2563eb 56%, #3b82f6 100%);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.16);
}

.privacy-view .hub-hero::after {
  content: "";
  position: absolute;
  right: clamp(24px, 8vw, 110px);
  top: 18px;
  width: 112px;
  height: 112px;
  clip-path: polygon(50% 0, 86% 16%, 82% 62%, 50% 100%, 18% 62%, 14% 16%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(147, 197, 253, 0.16)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.45);
  opacity: 0.68;
}

.privacy-view .hub-hero > div {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.privacy-view .hub-hero .eyebrow {
  display: none;
}

.privacy-view .hub-hero h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.05;
}

.privacy-view .hub-hero p {
  max-width: 760px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.6;
}

.privacy-view .privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.privacy-view .privacy-overview-card,
.privacy-view .privacy-card {
  min-width: 0;
  border: 1px solid var(--privacy-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.privacy-view .privacy-overview-card:hover,
.privacy-view .privacy-card:hover {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.privacy-view .privacy-overview-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  padding: 22px;
}

.privacy-section-title,
.privacy-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.privacy-section-title strong,
.privacy-card-copy strong,
.privacy-setting-box strong {
  color: var(--privacy-text);
  font-size: 20px;
  line-height: 1.2;
}

.privacy-ui-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.privacy-ui-icon-cyan {
  background: rgba(236, 254, 255, 0.9);
  color: #0891b2;
}

.privacy-ui-icon-green {
  background: rgba(240, 253, 244, 0.9);
  color: var(--privacy-green);
}

.privacy-ui-icon-purple {
  background: rgba(245, 243, 255, 0.94);
  color: var(--privacy-purple);
}

.privacy-flat-svg {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.privacy-flat-svg svg {
  display: block;
  width: 23px;
  height: 23px;
}

.privacy-mini-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.privacy-mini-icon .privacy-flat-svg svg {
  width: 15px;
  height: 15px;
}

.privacy-flat-svg {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.privacy-flat-svg svg {
  display: block;
  width: 23px;
  height: 23px;
}

.privacy-mini-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.privacy-mini-icon .privacy-flat-svg svg {
  width: 15px;
  height: 15px;
}

.privacy-overview-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.privacy-overview-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--privacy-line);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.78);
}

.privacy-overview-item strong,
.privacy-overview-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.privacy-overview-item strong {
  color: #1e293b;
  font-size: 15px;
}

.privacy-overview-item small {
  margin-top: 4px;
  color: var(--privacy-muted);
  font-size: 13px;
}

.privacy-view .privacy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-height: 210px;
  align-content: start;
  padding: 20px;
}

.privacy-view .privacy-treehole-card {
  min-height: 210px;
}

.privacy-card-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.privacy-card-copy p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
}

.privacy-card-copy small {
  color: var(--privacy-blue-dark);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.privacy-setting-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--privacy-line);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.72);
}

.privacy-setting-box small {
  display: block;
  margin-top: 8px;
  color: var(--privacy-blue-dark);
  font-weight: 900;
}

.privacy-setting-box small.is-on {
  color: var(--privacy-green);
}

.privacy-card-hint {
  margin: 0;
  color: var(--privacy-muted);
  font-size: 13px;
  line-height: 1.55;
}

.privacy-switch {
  position: relative;
  width: 58px;
  height: 34px;
  flex: 0 0 58px;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.18);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.privacy-switch span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.privacy-switch.is-on {
  background: linear-gradient(135deg, var(--privacy-blue), #3b82f6);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

.privacy-switch.is-on span {
  transform: translateX(24px);
}

.privacy-switch:hover {
  transform: translateY(-1px);
}

.privacy-view .privacy-choice-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.privacy-view .privacy-choice-toggle .secondary-button,
.privacy-view .privacy-treehole-actions .secondary-button,
.privacy-view .privacy-access-button {
  width: auto;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--privacy-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.privacy-view .privacy-choice-toggle .secondary-button {
  display: inline-flex;
  gap: 8px;
  width: 100%;
}

.privacy-view .privacy-choice-toggle .secondary-button b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--privacy-blue);
  font-size: 13px;
}

.privacy-view .privacy-choice-toggle .secondary-button.is-active {
  border-color: rgba(37, 99, 235, 0.28);
  background: linear-gradient(135deg, var(--privacy-blue), #3b82f6);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.privacy-preview {
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--privacy-line);
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.72);
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
}

.privacy-preview strong {
  color: var(--privacy-blue-dark);
  font-size: inherit;
}

.privacy-explain-list {
  display: grid;
  gap: 8px;
}

.privacy-explain-list p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--privacy-muted);
  font-size: 13px;
  line-height: 1.45;
}

.privacy-explain-list p span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue);
  font-size: 12px;
  font-weight: 900;
}

.privacy-explain-list p .privacy-mini-icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}

.privacy-search .privacy-mini-icon {
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: none;
  color: #64748b;
}

.privacy-search .privacy-mini-icon .privacy-flat-svg svg {
  width: 18px;
  height: 18px;
}

.privacy-search .privacy-mini-icon {
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: none;
  color: #64748b;
}

.privacy-search .privacy-mini-icon .privacy-flat-svg svg {
  width: 18px;
  height: 18px;
}

.privacy-explain-list p.is-active {
  color: #1e293b;
}

.privacy-treehole-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.privacy-treehole-actions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.privacy-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--privacy-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #94a3b8;
}

.privacy-search input {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--privacy-text);
}

.privacy-search input:focus {
  box-shadow: none;
}

.privacy-treehole-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(14px);
}

.privacy-treehole-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--privacy-text);
  text-align: left;
  cursor: pointer;
}

.privacy-treehole-option:hover,
.privacy-treehole-option.is-enabled {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(239, 246, 255, 0.78);
}

.privacy-treehole-option .friend-avatar {
  width: 38px;
  height: 38px;
}

.privacy-treehole-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 104px;
  overflow: auto;
  min-width: 0;
}

.privacy-treehole-selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 42px;
  padding: 5px 9px 5px 5px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.82);
  color: var(--privacy-text);
  font-weight: 900;
  cursor: pointer;
}

.privacy-treehole-selected:hover {
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(219, 234, 254, 0.9);
}

.privacy-treehole-selected .friend-avatar {
  width: 32px;
  height: 32px;
}

.privacy-treehole-selected span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.privacy-treehole-selected b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dbeafe;
  color: var(--privacy-blue-dark);
  font-size: 14px;
  line-height: 1;
}

.privacy-treehole-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.privacy-treehole-friend {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  padding: 12px;
  border: 1px solid var(--privacy-line);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.78);
}

.privacy-treehole-friend.is-enabled {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(239, 246, 255, 0.88);
}

.privacy-check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.privacy-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.privacy-check span {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #94a3b8;
  border-radius: 5px;
  background: #ffffff;
}

.privacy-check input:checked + span {
  border-color: var(--privacy-blue);
  background: var(--privacy-blue);
  box-shadow: inset 0 0 0 4px #ffffff;
}

.privacy-treehole-friend .friend-avatar {
  width: 42px;
  height: 42px;
}

.privacy-treehole-friend-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.privacy-treehole-friend-copy strong {
  color: var(--privacy-text);
  font-size: 15px;
  line-height: 1.2;
}

.privacy-treehole-friend-copy small {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--privacy-muted);
  font-size: 12px;
  font-weight: 800;
}

.privacy-treehole-friend-copy small.is-open {
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue-dark);
}

.privacy-view .privacy-access-button {
  min-width: 116px;
  color: var(--privacy-blue-dark);
}

.privacy-treehole-footer {
  display: flex;
  justify-content: flex-end;
}

.privacy-save-treehole {
  min-width: 188px;
  min-height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--privacy-blue), #3b82f6);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.privacy-treehole-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px dashed #bfdbfe;
  border-radius: 14px;
  background: rgba(239, 246, 255, 0.58);
  color: var(--privacy-muted);
  line-height: 1.6;
}

.privacy-treehole-empty strong {
  color: var(--privacy-text);
  font-size: 15px;
}

.privacy-treehole-empty.is-loading {
  color: var(--privacy-blue-dark);
}

.privacy-view :is(button, .secondary-button, .primary-button):disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.privacy-view :is(.secondary-button, .primary-button, .privacy-switch):active:not(:disabled) {
  transform: translateY(0);
}

@media (max-width: 920px) {
  .privacy-overview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .privacy-view.workspace-hub-view {
    width: 100%;
    gap: 12px;
  }

  .privacy-view .hub-hero {
    min-height: 132px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 18px;
  }

  .privacy-view .hub-hero::after {
    right: 18px;
    top: 20px;
    width: 72px;
    height: 72px;
    opacity: 0.46;
  }

  .privacy-view .hub-hero h2 {
    font-size: 30px;
  }

  .privacy-view .hub-hero p {
    display: block;
    max-width: calc(100% - 80px);
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .privacy-view .privacy-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .privacy-view .privacy-overview-card {
    margin-top: -22px;
    padding: 18px;
    border-radius: 24px;
  }

  .privacy-section-title strong,
  .privacy-card-copy strong,
  .privacy-setting-box strong {
    font-size: 20px;
  }

  .privacy-overview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .privacy-overview-item {
    min-height: 86px;
    padding: 12px;
  }

  .privacy-overview-item strong,
  .privacy-overview-item small {
    white-space: normal;
  }

  .privacy-view .privacy-card {
    min-height: 0;
    padding: 18px;
    border-radius: 18px;
  }

  .privacy-setting-box {
    min-height: 78px;
    padding: 12px;
  }

  .privacy-view .privacy-choice-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .privacy-view .privacy-choice-toggle .secondary-button {
    min-height: 34px;
    padding: 0 6px;
    font-size: 12px;
  }

  .privacy-treehole-actions {
    grid-template-columns: 1fr;
  }

  .privacy-view .privacy-treehole-actions .secondary-button {
    justify-self: end;
    min-width: 128px;
  }

  .privacy-treehole-list {
    max-height: none;
  }

  .privacy-treehole-friend {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 10px;
  }

  .privacy-view .privacy-access-button {
    grid-column: 3 / -1;
    justify-self: stretch;
    min-width: 0;
  }

  .privacy-treehole-footer {
    justify-content: stretch;
  }

  .privacy-save-treehole {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .privacy-overview-list {
    grid-template-columns: 1fr;
  }

  .privacy-view .privacy-choice-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.private-module-mode #memoView,
  #memoView {
    align-content: start;
    gap: 8px;
    padding: 8px 8px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  #memoView > .section-head {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 58px;
    max-height: none;
    justify-self: stretch;
    align-self: start;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 24px 58px rgba(91, 52, 31, 0.16);
  }

  #memoView > .section-head > div {
    gap: 7px;
  }

  #memoView > .section-head h2 {
    font-size: 22px;
    line-height: 1.1;
  }

  #memoView > .section-head > .secondary-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  #memoView .memo-intro {
    margin: -2px 2px 0;
    font-size: 12px;
    line-height: 1.35;
  }

  #memoView .memo-module-host {
    gap: 8px;
  }

  #memoView .memo-focus-panel {
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(var(--module-rgb), 0.1);
  }

  #memoView .memo-focus-copy {
    gap: 5px;
  }

  #memoView .memo-focus-copy > span {
    font-size: 11px;
  }

  #memoView .memo-focus-copy strong {
    font-size: 22px;
    line-height: 1.05;
  }

  #memoView .memo-focus-copy p {
    font-size: 12px;
    line-height: 1.35;
  }

  #memoView .memo-progress-line.large {
    height: 6px;
  }

  #memoView .memo-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #memoView .memo-stat-card {
    min-height: 52px;
    gap: 3px;
    padding: 7px 5px;
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(var(--module-rgb), 0.08);
  }

  #memoView .memo-stat-card strong {
    font-size: 18px;
    line-height: 1;
  }

  #memoView .memo-stat-card span,
  #memoView .memo-stat-card small {
    font-size: 10px;
    line-height: 1.15;
  }

  #memoView .memo-list > .memo-empty:not(.small) {
    min-height: clamp(190px, 28vh, 300px);
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(var(--module-rgb), 0.05)),
      rgba(255, 255, 255, 0.7);
  }
}

@media (max-width: 420px) {
  #memoView .memo-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  #memoView .memo-stat-card {
    padding: 6px 4px;
  }

  #memoView .memo-stat-card strong {
    font-size: 17px;
  }

  #memoView .memo-stat-card span,
  #memoView .memo-stat-card small {
    font-size: 9px;
  }

  #memoView > .section-head {
    width: 100%;
    height: auto;
    min-height: 56px;
    max-height: none;
  }

  #memoView > .section-head h2 {
    font-size: 20px;
  }
}

.privacy-view .privacy-flat-svg {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.privacy-view .privacy-flat-svg svg {
  display: block;
  width: 23px;
  height: 23px;
}

.privacy-view .privacy-mini-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.privacy-view .privacy-mini-icon .privacy-flat-svg svg {
  width: 15px;
  height: 15px;
}

.privacy-view .privacy-search .privacy-mini-icon {
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: none;
  color: #64748b;
}

.privacy-view .privacy-search .privacy-mini-icon .privacy-flat-svg svg {
  width: 18px;
  height: 18px;
}

.privacy-view .privacy-choice-toggle .secondary-button b .privacy-flat-svg svg {
  width: 14px;
  height: 14px;
}

.adaptive-display-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adaptive-display-name.is-truncated {
  cursor: help;
}

/* YOOKERD digital persona */
#digitalSelfView.digital-layout {
  grid-template-columns: minmax(0, 1fr);
}

.yookerd-head {
  align-items: end;
}

.yookerd-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.yookerd-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.yookerd-console {
  display: grid;
  grid-template-columns: minmax(320px, 1.12fr) minmax(280px, 0.88fr);
  gap: 18px;
  min-height: 680px;
}

.yookerd-chat-panel {
  min-height: 680px;
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.yookerd-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(32, 49, 59, 0.08);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(235, 250, 246, 0.86));
}

.yookerd-welcome strong {
  color: #173b35;
}

.yookerd-welcome span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.yookerd-empty {
  margin: auto;
  max-width: 360px;
  text-align: center;
}

.yookerd-avatar-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 680px;
  padding: 20px;
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(rgba(18, 118, 95, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 91, 158, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff, #f1fbf8);
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.yookerd-avatar-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 470px;
}

.yookerd-avatar {
  position: relative;
  width: min(72%, 340px);
  aspect-ratio: 0.72;
}

.avatar-hair,
.avatar-face,
.avatar-body,
.avatar-arm,
.avatar-violin,
.avatar-bow,
.music-note {
  position: absolute;
}

.avatar-hair {
  left: 25%;
  top: 4%;
  width: 50%;
  height: 22%;
  border-radius: 48% 48% 36% 36%;
  background: #273238;
  box-shadow: 0 12px 0 #273238;
  z-index: 3;
}

.avatar-face {
  left: 29%;
  top: 12%;
  width: 42%;
  height: 24%;
  border-radius: 48%;
  background: #ffd7b3;
  box-shadow: inset 0 -8px 0 rgba(190, 110, 70, 0.08);
  z-index: 4;
}

.avatar-eye {
  position: absolute;
  top: 43%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #253238;
  z-index: 5;
}

.avatar-eye.left {
  left: 32%;
}

.avatar-eye.right {
  right: 32%;
}

.avatar-mouth {
  position: absolute;
  left: 42%;
  bottom: 24%;
  width: 16%;
  height: 8px;
  border-bottom: 2px solid #a34f48;
  border-radius: 0 0 999px 999px;
  z-index: 5;
}

.avatar-body {
  left: 28%;
  top: 38%;
  width: 44%;
  height: 35%;
  border-radius: 38% 38% 22% 22%;
  background: linear-gradient(180deg, #34a989, #1f6d8e);
  z-index: 1;
}

.avatar-arm {
  top: 44%;
  width: 14%;
  height: 38%;
  border-radius: 999px;
  background: #ffd7b3;
  transform-origin: 50% 8%;
  z-index: 2;
}

.bow-arm {
  left: 21%;
  transform: rotate(38deg);
}

.violin-arm {
  right: 22%;
  transform: rotate(-48deg);
}

.avatar-violin {
  right: 6%;
  top: 35%;
  width: 34%;
  height: 18%;
  border-radius: 48% 42% 46% 42%;
  background: #b86633;
  transform: rotate(-12deg);
  box-shadow: inset 0 0 0 4px rgba(93, 47, 25, 0.18);
  z-index: 6;
}

.avatar-violin::after {
  content: "";
  position: absolute;
  right: -28%;
  top: 39%;
  width: 34%;
  height: 8%;
  border-radius: 999px;
  background: #5e3529;
}

.avatar-bow {
  left: 0;
  top: 38%;
  width: 72%;
  height: 3px;
  border-radius: 999px;
  background: #38454c;
  transform: rotate(-22deg);
  transform-origin: 20% 50%;
  z-index: 3;
}

.music-note {
  color: #1d7f8c;
  font-size: 30px;
  opacity: 0;
  z-index: 7;
}

.note-one {
  right: 14%;
  top: 15%;
}

.note-two {
  right: 2%;
  top: 28%;
}

.yookerd-avatar-stage[data-state="thinking"] .avatar-eye {
  height: 3px;
  margin-top: 3px;
}

.yookerd-avatar-stage[data-state="thinking"] .yookerd-avatar {
  animation: yookerd-think 1.2s ease-in-out infinite;
}

.yookerd-avatar-stage[data-state="speaking"] .avatar-mouth {
  height: 12px;
  border: 2px solid #a34f48;
  border-top: 0;
  background: rgba(163, 79, 72, 0.12);
  animation: yookerd-talk 0.34s ease-in-out infinite;
}

.yookerd-avatar-stage[data-state="violin_idle"] .avatar-bow,
.yookerd-avatar-stage[data-state="speaking"] .avatar-bow {
  animation: yookerd-bow 1.35s ease-in-out infinite;
}

.yookerd-avatar-stage[data-state="violin_idle"] .music-note,
.yookerd-avatar-stage[data-state="speaking"] .music-note {
  animation: yookerd-note 1.8s ease-in-out infinite;
}

.yookerd-avatar-stage[data-state="violin_idle"] .note-two,
.yookerd-avatar-stage[data-state="speaking"] .note-two {
  animation-delay: 0.45s;
}

.yookerd-avatar-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(32, 49, 59, 0.1);
}

.yookerd-avatar-copy strong {
  color: #173b35;
}

.yookerd-avatar-copy span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.yookerd-admin-tabs.segmented.compact-tabs {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid rgba(32, 49, 59, 0.08);
  background: rgba(246, 250, 251, 0.9);
}

.yookerd-admin-tabs .segment {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 36px;
  padding-inline: 16px;
  font-size: 13px;
  white-space: nowrap;
}

.yookerd-admin-overview {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  gap: 10px;
  margin-bottom: 12px;
}

.yookerd-admin-front-card,
.yookerd-admin-metrics article {
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 250, 255, 0.86));
  box-shadow: 0 14px 32px rgba(14, 116, 144, 0.1);
}

.yookerd-admin-front-card {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 86px;
  padding: 12px 14px;
}

.yookerd-admin-front-card h4 {
  margin: 0;
  color: #173b35;
  font-size: 18px;
}

.yookerd-admin-front-card strong,
.yookerd-admin-front-card p,
.yookerd-admin-preview-line small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.yookerd-admin-front-card strong {
  color: var(--blue);
  font-size: 20px;
}

.yookerd-admin-front-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.yookerd-admin-preview-line {
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(32, 49, 59, 0.08);
  padding-top: 6px;
}

.yookerd-admin-preview-line span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.yookerd-admin-preview-line small {
  color: #34444d;
  line-height: 1.5;
}

.yookerd-admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.yookerd-admin-metrics article {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 86px;
  padding: 10px 12px;
}

.yookerd-admin-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.yookerd-admin-metrics strong {
  min-width: 0;
  color: #173b35;
  font-size: clamp(18px, 2vw, 24px);
  overflow-wrap: anywhere;
}

.yookerd-admin-panel {
  display: grid;
  gap: 14px;
}

.yookerd-admin-list {
  display: grid;
  gap: 10px;
}

.yookerd-admin-item,
.yookerd-message-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  background: #fff;
}

.yookerd-admin-item strong,
.yookerd-message-row strong {
  display: block;
  color: #20313b;
}

.yookerd-admin-item span,
.yookerd-message-row span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.yookerd-admin-item p,
.yookerd-message-row p {
  margin: 8px 0 0;
  color: #34444d;
  line-height: 1.6;
  white-space: pre-wrap;
}

.yookerd-admin-item audio {
  max-width: min(100%, 280px);
}

.compact-note {
  padding: 10px 12px;
  text-align: left;
  line-height: 1.6;
}

[data-admin-panel="digital"] .settings-form {
  gap: 12px;
}

[data-admin-panel="digital"] .settings-form > label,
[data-admin-panel="digital"] .settings-form .two-col > label,
[data-admin-panel="digital"] .settings-form .toggle-row,
.yookerd-advanced-section {
  padding: 10px 12px;
  border: 1px solid rgba(32, 49, 59, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

[data-admin-panel="digital"] .settings-form > label:focus-within,
[data-admin-panel="digital"] .settings-form .two-col > label:focus-within,
.yookerd-advanced-section:focus-within {
  border-color: rgba(14, 116, 144, 0.24);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.08);
}

[data-admin-panel="digital"] .settings-form label span {
  color: #34444d;
  font-size: 12px;
}

[data-admin-panel="digital"] .settings-form input,
[data-admin-panel="digital"] .settings-form textarea,
[data-admin-panel="digital"] .settings-form select {
  border-color: transparent;
  background: #f8fbfc;
}

.yookerd-advanced-section {
  display: grid;
  gap: 12px;
}

.yookerd-advanced-section summary {
  cursor: pointer;
  color: #20313b;
  font-size: 13px;
  font-weight: 900;
  list-style-position: outside;
}

.yookerd-advanced-section:not([open]) {
  background: rgba(248, 251, 252, 0.84);
}

.yookerd-advanced-section[open] summary {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(32, 49, 59, 0.08);
}

.yookerd-simple-grid {
  align-items: stretch;
}

.yookerd-simple-grid .inline-check {
  align-content: center;
}

.yookerd-conversation-detail {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(32, 49, 59, 0.1);
}

@keyframes yookerd-think {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-2deg); }
}

@keyframes yookerd-talk {
  0%, 100% { transform: scaleY(0.72); }
  50% { transform: scaleY(1.18); }
}

@keyframes yookerd-bow {
  0%, 100% { transform: rotate(-30deg) translateX(-8px); }
  50% { transform: rotate(-12deg) translateX(14px); }
}

@keyframes yookerd-note {
  0% { opacity: 0; transform: translateY(18px) scale(0.8); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.1); }
}

@media (max-width: 920px) {
  .yookerd-console {
    grid-template-columns: 1fr;
  }

  .yookerd-chat-panel,
  .yookerd-avatar-panel {
    min-height: 560px;
  }

  .yookerd-admin-overview {
    grid-template-columns: 1fr;
  }

  .yookerd-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .yookerd-head {
    align-items: start;
  }

  .yookerd-head-actions,
  .yookerd-welcome,
  .yookerd-avatar-copy,
  .yookerd-admin-item,
  .yookerd-message-row {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .yookerd-console {
    min-height: 0;
  }

  .yookerd-chat-panel,
  .yookerd-avatar-panel {
    min-height: 480px;
  }

  .yookerd-avatar-stage {
    min-height: 320px;
  }

  [data-admin-panel="digital"] .panel-heading {
    align-items: stretch;
  }

  .yookerd-admin-tabs {
    display: flex;
    gap: 8px;
    margin: 0 -2px 12px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x proximity;
  }

  .yookerd-admin-tabs .segment {
    flex: 0 0 auto;
    min-width: 116px;
    min-height: 36px;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .yookerd-admin-front-card,
  .yookerd-admin-metrics article,
  .yookerd-admin-item,
  .yookerd-message-row {
    border-radius: 8px;
  }

  .yookerd-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yookerd-admin-metrics article {
    min-height: 78px;
    padding: 10px;
  }

  [data-admin-panel="digital"] .settings-form,
  [data-admin-panel="digital"] .two-col,
  [data-admin-panel="digital"] .people-controls,
  [data-admin-panel="digital"] .toggle-row {
    grid-template-columns: 1fr;
  }

  [data-admin-panel="digital"] .people-controls {
    align-items: stretch;
  }

  [data-admin-panel="digital"] .people-controls button,
  [data-admin-panel="digital"] .settings-form button[type="submit"],
  .yookerd-admin-item .people-row-actions,
  .yookerd-message-row .mini-button {
    width: 100%;
  }

  .yookerd-admin-item .people-row-actions {
    justify-content: stretch;
  }

  .yookerd-admin-item .people-row-actions .mini-button {
    flex: 1 1 0;
  }

  .yookerd-admin-item p,
  .yookerd-message-row p {
    max-height: 190px;
    overflow: auto;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(120deg, rgba(23, 107, 87, 0.08), rgba(36, 95, 156, 0.08), rgba(201, 73, 73, 0.04)),
    var(--bg);
  color: var(--ink);
  font-family:
    Inter, "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

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

button {
  border: 0;
  cursor: pointer;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

[hidden] {
  display: none !important;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 10;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.topbar.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-110%);
}

body.app-topbar-floating:not(.mobile-app-mode) .topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.mobile-topbar-toggle {
  display: none;
}

.mobile-topbar-toggle-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.mobile-topbar-toggle-icon::before,
.mobile-topbar-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: inherit;
  background: currentColor;
  transition: transform 0.18s ease;
}

.mobile-topbar-toggle-icon::before {
  transform: translateY(-6px);
}

.mobile-topbar-toggle-icon::after {
  transform: translateY(6px);
}

.mobile-topbar-toggle[aria-expanded="true"] .mobile-topbar-toggle-icon {
  background: transparent;
}

.mobile-topbar-toggle[aria-expanded="true"] .mobile-topbar-toggle-icon::before {
  transform: rotate(45deg);
}

.mobile-topbar-toggle[aria-expanded="true"] .mobile-topbar-toggle-icon::after {
  transform: rotate(-45deg);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 16px;
  letter-spacing: 0;
}

.brand span,
.panel-heading span {
  color: var(--muted);
  font-size: 13px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(260px, 36vw);
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  padding: 5px 11px 5px 6px;
  white-space: nowrap;
}

.user-chip > span:not(.avatar-badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-select {
  width: 128px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
}

.module-select.is-active {
  border-color: var(--blue);
  background: rgba(25, 91, 158, 0.08);
  color: var(--blue);
}

.avatar-badge,
.treehole-avatar,
.treehole-comment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8fff6, #dceeff);
  color: #175d50;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(43, 185, 138, 0.28);
}

.avatar-badge.avatar-generated {
  font-size: 18px;
}

.treehole-avatar.avatar-generated {
  font-size: 20px;
}

.treehole-comment-avatar.avatar-generated {
  font-size: 15px;
}

.avatar-badge img,
.treehole-avatar img,
.treehole-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.avatar-generated[data-avatar*="cartoon"] {
  background: linear-gradient(135deg, #fff7d6, #dff8ff);
}

.avatar-generated[data-avatar*="pet"] {
  background: linear-gradient(135deg, #e8fff1, #dff1ff);
}

.avatar-generated[data-avatar*="fruit"] {
  background: linear-gradient(135deg, #fff6d8, #e4ffd8);
}

.avatar-generated[data-avatar*="scifi"] {
  background: linear-gradient(135deg, #e8f3ff, #e8ffe9);
}

.avatar-generated[data-avatar*="game"] {
  background: linear-gradient(135deg, #ddfff4, #fff3c7);
}

.profile-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}

.avatar-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-choice {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.avatar-choice.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(23, 107, 87, 0.14);
}

.avatar-upload {
  width: max-content;
}

.profile-section-title {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.profile-details-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.profile-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.profile-fields-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.profile-fields-grid input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
}

.profile-request-note {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(180, 83, 9, 0.18);
  border-radius: 8px;
  background: #fff7ed;
  color: #92400e;
  font-size: 12px;
  padding: 9px;
}

.profile-request-note strong,
.profile-request-note span {
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .profile-fields-grid,
  .people-profile-fields {
    grid-template-columns: 1fr;
  }
}

.auth-screen {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 430px);
  gap: 34px;
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
  place-items: center;
  padding: 34px 24px;
  overflow: hidden;
}

.tech-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
  mask-image: linear-gradient(90deg, #000 0%, #000 74%, transparent 100%);
}

.scan-grid {
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(23, 107, 87, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 95, 156, 0.12) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: grid-drift 18s linear infinite;
}

.scan-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(53, 168, 182, 0.16), transparent);
  transform: translateY(-100%);
  animation: scan-sweep 5.5s ease-in-out infinite;
}

.circuit-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(23, 107, 87, 0.65), rgba(53, 168, 182, 0.3), transparent);
  transform-origin: left center;
}

.line-a {
  top: 18%;
  left: 4%;
  width: 52%;
  animation: signal-flow 4.2s ease-in-out infinite;
}

.line-b {
  top: 62%;
  left: 10%;
  width: 38%;
  animation: signal-flow 5s ease-in-out infinite 0.7s;
}

.line-c {
  top: 78%;
  left: 2%;
  width: 58%;
  animation: signal-flow 4.8s ease-in-out infinite 1.1s;
}

.auth-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  gap: 26px;
}

.hero-copy {
  display: grid;
  gap: 16px;
}

.hero-copy h1 {
  max-width: 720px;
  margin: 0;
  color: #12201e;
  font-size: clamp(46px, 6vw, 76px);
  line-height: 1.02;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-tags span {
  border: 1px solid rgba(23, 107, 87, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #263330;
  font-size: 13px;
  font-weight: 900;
  padding: 9px 12px;
  backdrop-filter: blur(10px);
}

.dashboard-preview {
  width: min(660px, 100%);
  border: 1px solid rgba(217, 224, 221, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 22px 58px rgba(20, 34, 32, 0.14);
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.preview-top {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.preview-top span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--green);
}

.preview-top span:nth-child(2) {
  background: var(--blue);
}

.preview-top span:nth-child(3) {
  background: var(--red);
}

.preview-grid {
  display: grid;
  grid-template-columns: 80px repeat(4, minmax(70px, 1fr));
  gap: 1px;
  background: var(--line);
  padding: 1px;
}

.preview-grid span {
  min-height: 76px;
  background: rgba(255, 255, 255, 0.86);
}

.preview-grid .device-name {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
}

.preview-grid .reserved {
  background: linear-gradient(135deg, #c94949, #df6761);
  animation: reserved-pulse 2.6s ease-in-out infinite;
}

.preview-grid .reserved.delay {
  animation-delay: 0.8s;
}

.auth-box {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(217, 224, 221, 0.95);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 22px;
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.auth-box::before {
  content: "";
  display: block;
  height: 5px;
  margin: -22px -22px 20px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--red));
}

.auth-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.auth-title-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.auth-title-copy {
  min-width: 0;
}

.auth-title h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.auth-title span {
  display: block;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}

.auth-title h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: #eef4f1;
  border-radius: 8px;
  margin-bottom: 16px;
}

.segment {
  min-height: 38px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.segment.is-active {
  background: #fff;
  color: var(--green);
  box-shadow: 0 2px 10px rgba(20, 34, 32, 0.08);
}

.auth-form,
.settings-form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
}

label span,
.panel-heading h3 {
  color: #263330;
  font-size: 13px;
  font-weight: 800;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  color: var(--ink);
  outline: none;
  padding: 11px 12px;
}

textarea {
  min-height: 46px;
  resize: vertical;
  line-height: 1.55;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(23, 107, 87, 0.14);
}

.password-field {
  position: relative;
  display: grid;
}

body.auth-mode #authScreen .password-field input {
  padding-right: 50px;
}

.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  transform: translateY(-50%);
}

.password-visibility-toggle:hover:not(:disabled) {
  background: rgba(52, 127, 224, 0.08);
  color: var(--blue);
  transform: translateY(-50%);
}

.password-visibility-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 136, 218, 0.18);
}

.password-toggle-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.password-toggle-icon-eye-off {
  display: none;
}

.password-visibility-toggle[aria-pressed="true"] .password-toggle-icon-eye {
  display: none;
}

.password-visibility-toggle[aria-pressed="true"] .password-toggle-icon-eye-off {
  display: block;
}

.primary-button,
.secondary-button,
.send-button,
.icon-button,
.mini-button,
.system-card {
  border-radius: 8px;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  font-weight: 800;
}

.primary-button {
  background: var(--green);
  color: #fff;
}

.secondary-button {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--line);
}

.secondary-button.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.compact {
  min-height: 36px;
  padding: 0 11px;
  font-size: 13px;
}

.icon-button,
.send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.icon-button {
  background: #f0f5f3;
  color: var(--green);
}

.send-button {
  background: var(--blue);
  color: #fff;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.app-main {
  flex: 1;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.view {
  display: grid;
  gap: 18px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-head h2 {
  margin: 3px 0 0;
  font-size: 24px;
}

.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.system-grid,
.device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.system-card {
  display: grid;
  gap: 10px;
  min-height: 160px;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(23, 107, 87, 0.08), transparent 45%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px;
}

.system-card:hover {
  border-color: rgba(23, 107, 87, 0.35);
  box-shadow: 0 22px 54px rgba(20, 34, 32, 0.14);
}

.system-card span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.system-card strong {
  font-size: 24px;
}

.system-card small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.plaz-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  color: var(--blue);
  background: #fff;
  border: 1px solid rgba(23, 107, 87, 0.22);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(20, 34, 32, 0.08);
  font-weight: 900;
}

.plaz-shortcut span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 22px;
}

.calorie-module-host {
  min-width: 0;
}

.calorie-module-host *,
.calorie-module-host *::before,
.calorie-module-host *::after {
  box-sizing: border-box;
}

.calorie-module-host input,
.calorie-module-host select,
.calorie-module-host button {
  font: inherit;
}

.calorie-fallback-card {
  display: grid;
  gap: 10px;
  min-height: 220px;
  align-content: center;
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(220, 252, 231, 0.92), rgba(255, 255, 255, 0.94)),
    var(--surface);
  box-shadow: var(--shadow);
  padding: 26px;
}

.calorie-fallback-card span {
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.calorie-fallback-card h2 {
  margin: 0;
  font-size: 28px;
}

.calorie-fallback-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.calorie-native {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.calorie-hero,
.calorie-card {
  border: 1px solid rgba(22, 163, 74, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.calorie-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background:
    linear-gradient(135deg, rgba(220, 252, 231, 0.92), rgba(255, 255, 255, 0.96) 55%, rgba(236, 253, 245, 0.92));
  padding: 22px;
}

.calorie-hero span,
.calorie-card-head span {
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.calorie-hero h2,
.calorie-card-head h3 {
  margin: 2px 0 0;
  color: #0f172a;
  font-weight: 900;
}

.calorie-hero h2 {
  font-size: 30px;
}

.calorie-hero p {
  margin: 8px 0 0;
  color: var(--muted);
}

.calorie-hero-tools {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: min(420px, 100%);
}

.calorie-hero-tools label,
.calorie-form label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.calorie-hero-tools input,
.calorie-form input,
.calorie-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  padding: 8px 10px;
  outline: none;
}

.calorie-hero-tools input:focus,
.calorie-form input:focus,
.calorie-form select:focus {
  border-color: rgba(22, 163, 74, 0.55);
  box-shadow: 0 0 0 4px rgba(187, 247, 208, 0.55);
}

.calorie-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 10px;
  padding: 8px 14px;
}

.calorie-status.is-good,
.calorie-window.is-active {
  background: #dcfce7;
  color: #15803d;
}

.calorie-status.is-close {
  background: #fef3c7;
  color: #b45309;
}

.calorie-status.is-over {
  background: #fee2e2;
  color: #dc2626;
}

.calorie-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.calorie-card {
  min-width: 0;
  padding: 16px;
}

.calorie-summary-card {
  display: grid;
  gap: 8px;
}

.calorie-summary-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.calorie-summary-card strong {
  font-size: 24px;
  font-weight: 900;
}

.tone-good {
  color: #16a34a;
}

.tone-move {
  color: #0284c7;
}

.tone-dark {
  color: #0f172a;
}

.tone-over {
  color: #dc2626;
}

.calorie-progress-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.calorie-ring {
  width: 136px;
  height: 136px;
  border-radius: 999px;
  background: conic-gradient(#16a34a calc(var(--progress) * 1%), #e2e8f0 0);
  display: grid;
  place-items: center;
}

.calorie-ring div {
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 14px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.calorie-ring strong {
  font-size: 26px;
  font-weight: 900;
}

.calorie-ring span,
.calorie-mini-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calorie-progress-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.calorie-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.calorie-progress-track .is-good {
  background: #16a34a;
}

.calorie-progress-track .is-close {
  background: #f59e0b;
}

.calorie-progress-track .is-over {
  background: #ef4444;
}

.calorie-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calorie-mini-grid div {
  border-radius: 12px;
  background: #f0fdf4;
  padding: 12px;
}

.calorie-mini-grid strong {
  display: block;
  color: #15803d;
  font-size: 18px;
  font-weight: 900;
}

.calorie-main-grid,
.calorie-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.calorie-bottom-grid {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.calorie-side-stack {
  display: grid;
  align-content: start;
  gap: 16px;
}

.calorie-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.calorie-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.calorie-form.single {
  grid-template-columns: 1fr;
}

.calorie-form .wide {
  grid-column: 1 / -1;
}

.calorie-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calorie-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: #f0fdf4;
  padding: 10px;
}

.calorie-check input {
  width: auto;
  min-height: 0;
}

.calorie-primary,
.calorie-secondary,
.calorie-entry-list button,
.calorie-tab-group button,
.calorie-food-db button {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 900;
  padding: 8px 12px;
}

.calorie-primary {
  background: #047857;
  color: #fff;
}

.calorie-secondary,
.calorie-tab-group button,
.calorie-food-db button {
  border-color: rgba(22, 163, 74, 0.18);
  background: #fff;
  color: #047857;
}

.calorie-entry-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.calorie-entry-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 12px;
}

.calorie-entry-list strong {
  display: block;
}

.calorie-entry-list span {
  color: var(--muted);
  font-size: 13px;
}

.calorie-entry-list button {
  min-height: 32px;
  border-color: #fecaca;
  color: #dc2626;
}

.calorie-empty {
  border: 1px dashed rgba(22, 163, 74, 0.28);
  border-radius: 12px;
  background: #f0fdf4;
  color: #15803d;
  margin-top: 14px;
  padding: 14px;
}

.calorie-empty.is-blue {
  border-color: rgba(2, 132, 199, 0.28);
  background: #eff6ff;
  color: #0369a1;
}

.calorie-tab-group {
  display: flex;
  gap: 8px;
}

.calorie-tab-group button.is-active {
  background: #047857;
  color: #fff;
}

.calorie-chart-wrap {
  width: 100%;
  overflow-x: auto;
}

.calorie-chart-svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

.calorie-chart-svg rect {
  fill: #f8fafc;
}

.calorie-chart-svg line {
  stroke: #cbd5e1;
  stroke-width: 1;
}

.calorie-chart-svg text {
  fill: #64748b;
  font-size: 12px;
}

.calorie-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.calorie-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calorie-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.calorie-chart-legend .is-good {
  background: #16a34a;
}

.calorie-chart-legend .is-dark {
  background: #0f172a;
}

.calorie-chart-legend .is-close {
  background: #f59e0b;
}

.calorie-chart-legend .is-move {
  background: #0284c7;
}

.calorie-window {
  display: grid;
  gap: 4px;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  padding: 14px;
}

.calorie-food-db {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calorie-food-db button {
  min-height: 34px;
  border-radius: 999px;
  background: #f0fdf4;
}

.calorie-redo {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.calorie-redo-hero,
.calorie-redo-card,
.calorie-redo-progress,
.calorie-redo-overview-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.calorie-redo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
  align-items: center;
  gap: 16px;
  background:
    linear-gradient(135deg, rgba(220, 252, 231, 0.86), rgba(255, 255, 255, 0.96) 58%, rgba(236, 253, 245, 0.9));
  padding: 20px;
}

.calorie-redo-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.calorie-redo-hero-copy {
  min-width: 0;
}

.calorie-redo-hero span,
.calorie-redo-card-head span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.calorie-redo-hero h2,
.calorie-redo-card-head h3 {
  margin: 3px 0 0;
  color: #0f172a;
}

.calorie-redo-hero h2 {
  font-size: 28px;
}

.calorie-redo-hero p,
.calorie-redo-note {
  color: var(--muted);
  line-height: 1.65;
  margin: 8px 0 0;
}

.calorie-redo-hero-progress {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(239, 246, 255, 0.9);
  color: #1e3a8a;
  text-align: center;
}

.calorie-redo-hero-progress strong {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.calorie-redo-hero-progress span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.calorie-redo-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(210px, auto);
  align-items: end;
  gap: 10px;
  min-width: min(480px, 100%);
}

.calorie-redo-toolbar label,
.calorie-redo-form label,
.calorie-redo-inline {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.calorie-redo-toolbar input,
.calorie-redo-form input,
.calorie-redo-form select,
.calorie-redo-inline select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 8px 10px;
  outline: none;
}

.calorie-redo-toolbar input:focus,
.calorie-redo-form input:focus,
.calorie-redo-form select:focus,
.calorie-redo-inline select:focus {
  border-color: rgba(23, 107, 87, 0.45);
  box-shadow: 0 0 0 4px rgba(184, 230, 209, 0.35);
}

.calorie-redo-window {
  display: grid;
  gap: 3px;
  min-height: 40px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  padding: 9px 12px;
}

.calorie-redo-window.is-active {
  background: #dcfce7;
  color: #166534;
}

.calorie-redo-window small {
  font-size: 12px;
}

.calorie-redo-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.calorie-redo-overview-card {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 14px;
}

.calorie-redo-overview-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.calorie-redo-overview-card strong {
  color: #0f172a;
  font-size: 21px;
  font-weight: 900;
}

.calorie-redo-overview-card.good strong,
.calorie-redo-overview-card.is-good strong {
  color: #15803d;
}

.calorie-redo-overview-card.blue strong {
  color: #0369a1;
}

.calorie-redo-overview-card.over strong,
.calorie-redo-overview-card.is-over strong {
  color: #dc2626;
}

.calorie-redo-overview-card.is-close strong {
  color: #b45309;
}

.calorie-redo-overview-card.is-muted strong {
  color: #64748b;
}

.calorie-redo-progress {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
}

.calorie-redo-progress > div {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #dcfce7;
  color: #14532d;
  text-align: center;
}

.calorie-redo-progress strong {
  font-size: 26px;
  font-weight: 900;
}

.calorie-redo-progress span {
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.calorie-redo-progress p {
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}

.calorie-redo-grid {
  display: grid;
  gap: 16px;
}

.calorie-redo-grid.two,
.calorie-redo-grid.trend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calorie-redo-card {
  min-width: 0;
  padding: 16px;
}

.calorie-redo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.calorie-redo-goal-head {
  flex-direction: row;
}

.calorie-redo-body-open {
  align-self: center;
  white-space: nowrap;
}

.calorie-redo-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid rgba(239, 68, 68, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, #dc334d, #f97368);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 10px;
  box-shadow: 0 10px 22px rgba(190, 24, 93, 0.16);
}

.calorie-redo-photo input {
  display: none;
}

.calorie-redo-photo.is-busy {
  cursor: wait;
  opacity: 0.72;
}

.calorie-redo-photo:disabled {
  cursor: wait;
}

.calorie-redo-photo-status {
  display: grid;
  gap: 4px;
  grid-column: 1 / -1;
  margin-top: 12px;
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 8px;
  background: #f0fdf4;
  color: #14532d;
  padding: 10px 12px;
}

.calorie-redo-photo-status strong {
  font-size: 14px;
}

.calorie-redo-photo-status span,
.calorie-redo-photo-status small {
  color: #476b5f;
  font-size: 13px;
  line-height: 1.5;
}

.calorie-redo-photo-status.is-loading {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

.calorie-redo-photo-status.is-error {
  background: #fff7ed;
  border-color: rgba(234, 88, 12, 0.22);
  color: #c2410c;
}

.calorie-redo-ai-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
}

.calorie-redo-ai-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(5px);
}

.calorie-redo-ai-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(220, 51, 77, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  padding: 16px;
}

.calorie-redo-body-dialog {
  width: min(760px, 100%);
}

.calorie-redo-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calorie-redo-ai-head span {
  color: #dc334d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.calorie-redo-ai-head h3 {
  margin: 0;
}

.calorie-redo-ai-form {
  display: grid;
  gap: 12px;
}

.calorie-redo-ai-form label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.calorie-redo-ai-form textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
  padding: 10px 12px;
}

.calorie-redo-ai-form textarea:focus {
  border-color: rgba(220, 51, 77, 0.38);
  outline: 3px solid rgba(220, 51, 77, 0.12);
}

.calorie-redo-ai-photo-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.calorie-redo-ai-photo-line span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.calorie-redo-ai-photo-line input {
  display: none;
}

.calorie-redo-ai-error {
  border-radius: 8px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  padding: 10px 12px;
}

.calorie-redo-ai-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.calorie-redo-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.calorie-redo-form label.calorie-redo-custom-exercise.is-hidden {
  display: none;
}

.calorie-redo-form label.calorie-redo-plan-date.is-hidden {
  display: none;
}

.calorie-redo-form.settings > .primary-button {
  grid-column: 1 / -1;
}

.calorie-redo-form.settings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
}

.calorie-redo-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
}

.calorie-redo-target-field input {
  background: #f8fafc;
  color: #dc334d;
  font-weight: 900;
}

.calorie-redo-target-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.calorie-redo-target-preview {
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
  align-self: stretch;
  border: 1px solid rgba(220, 51, 77, 0.18);
  border-radius: 8px;
  background: rgba(255, 241, 243, 0.72);
  padding: 10px 12px;
}

.calorie-redo-target-preview div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.calorie-redo-target-preview span {
  color: #9f1239;
  font-size: 12px;
  font-weight: 900;
}

.calorie-redo-target-preview strong {
  color: #dc334d;
  font-size: 22px;
}

.calorie-redo-target-preview p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.calorie-redo-body-import {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(220, 51, 77, 0.16);
}

.calorie-redo-body-dialog .calorie-redo-body-import {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.calorie-redo-body-dialog .calorie-redo-body-head {
  display: none;
}

.calorie-redo-body-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.calorie-redo-body-head span {
  color: #dc334d;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.calorie-redo-body-head h4 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
}

.calorie-redo-body-head small {
  color: #64748b;
  font-size: 12px;
}

.calorie-redo-body-form {
  display: grid;
  gap: 10px;
}

.calorie-redo-body-file-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.calorie-redo-body-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid rgba(220, 51, 77, 0.25);
  border-radius: 8px;
  background: #fff;
  color: #dc334d;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
}

.calorie-redo-body-file input {
  display: none;
}

.calorie-redo-body-file-line > span {
  min-width: 0;
  color: #64748b;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.calorie-redo-body-preview {
  display: block;
  width: min(260px, 100%);
  max-height: 360px;
  object-fit: contain;
  border: 1px solid rgba(220, 51, 77, 0.16);
  border-radius: 8px;
  background: #f8fafc;
}

.calorie-redo-body-form textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 10px 12px;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
}

.calorie-redo-body-form textarea:focus {
  border-color: rgba(23, 107, 87, 0.45);
  box-shadow: 0 0 0 4px rgba(184, 230, 209, 0.35);
}

.calorie-redo-body-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.calorie-redo-body-fields label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.calorie-redo-body-fields input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 8px 10px;
  outline: none;
}

.calorie-redo-body-fields input:focus {
  border-color: rgba(23, 107, 87, 0.45);
  box-shadow: 0 0 0 4px rgba(184, 230, 209, 0.35);
}

.calorie-redo-body-message {
  margin: 0;
  color: #dc334d;
  font-size: 13px;
  font-weight: 700;
}

.calorie-redo-body-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.calorie-redo-body-metrics div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(220, 51, 77, 0.14);
  border-radius: 8px;
  background: rgba(255, 241, 243, 0.5);
  padding: 10px;
}

.calorie-redo-body-metrics span,
.calorie-redo-body-advice > span {
  color: #9f1239;
  font-size: 12px;
  font-weight: 800;
}

.calorie-redo-body-metrics strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.calorie-redo-body-metrics small {
  color: #64748b;
  font-size: 12px;
}

.calorie-redo-body-advice {
  display: grid;
  gap: 7px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.calorie-redo-body-advice p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

.calorie-redo-analysis-advice {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.calorie-redo-target-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calorie-redo-target-preview-actions small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.calorie-redo-save-message {
  grid-column: 1 / -1;
  border-radius: 8px;
  background: #ecfdf5;
  color: #15803d;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 12px;
}

.calorie-redo-save-mask {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: #dc334d;
  text-align: center;
  backdrop-filter: blur(8px);
}

.calorie-redo-save-mask strong {
  font-size: 18px;
}

.calorie-redo-save-mask span {
  color: #64748b;
  font-size: 13px;
}

.calorie-redo-form .calorie-redo-note {
  grid-column: 1 / -1;
  font-size: 13px;
}

.calorie-redo-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #f0fdf4;
  padding: 10px;
}

.calorie-redo-form.settings .calorie-redo-check {
  align-self: end;
  min-height: 40px;
  padding: 8px 10px;
}

.calorie-redo-check input {
  width: auto;
  min-height: 0;
}

.calorie-redo-quick-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.calorie-redo-quick-list button {
  display: grid;
  gap: 2px;
  min-height: 58px;
  border: 1px solid rgba(23, 107, 87, 0.18);
  border-radius: 8px;
  background: #f0fdf4;
  color: #14532d;
  font-weight: 900;
  padding: 8px;
  text-align: left;
}

.calorie-redo-quick-list button.is-added {
  border-color: #dc334d;
  background: linear-gradient(135deg, #dc334d, #f97368);
  color: #fff;
  box-shadow: 0 12px 28px rgba(220, 51, 77, 0.24);
  transform: translateY(-1px);
}

.calorie-redo-quick-list button.is-added small {
  color: rgba(255, 255, 255, 0.86);
}

.calorie-redo-quick-list small {
  color: #64748b;
  font-size: 12px;
}

.calorie-redo-quick-status {
  margin-top: 10px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #15803d;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 12px;
}

.calorie-redo-quick-status.is-warning {
  background: #fff7ed;
  color: #c2410c;
}

.calorie-redo-food-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.calorie-redo-food-actions .calorie-redo-food-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 40px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  padding: 8px 12px;
  text-align: center;
}

.calorie-redo-recommend-toggle {
  white-space: nowrap;
}

.calorie-redo-recommend-toggle.is-active {
  border-color: rgba(220, 51, 77, 0.26);
  background: #fff1f3;
  color: #dc334d;
}

.calorie-redo-recommend-dialog {
  width: min(720px, 100%);
}

.calorie-redo-canteen-dialog {
  width: min(760px, 100%);
}

.calorie-redo-canteen-head {
  display: flex;
  justify-content: flex-end;
}

.calorie-redo-canteen-head .calorie-redo-inline {
  min-width: min(210px, 100%);
}

.calorie-redo-recommend {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  border: 1px solid rgba(14, 165, 233, 0.16);
  border-radius: 8px;
  background: rgba(248, 251, 255, 0.72);
  padding: 12px;
}

.calorie-redo-recommend-head {
  display: flex;
  justify-content: flex-end;
}

.calorie-redo-recommend-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.calorie-redo-recommend-actions .calorie-redo-inline {
  min-width: min(210px, 100%);
}

.calorie-redo-reroll {
  min-height: 40px;
  white-space: nowrap;
}

.calorie-redo-recommend-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 8px;
  background: #eff6ff;
  color: #075985;
  padding: 10px 12px;
}

.calorie-redo-recommend-summary strong {
  font-size: 15px;
  font-weight: 900;
}

.calorie-redo-recommend-summary span {
  color: #486581;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

.calorie-redo-recommend-summary.is-close {
  border-color: rgba(245, 158, 11, 0.22);
  background: #fffbeb;
  color: #92400e;
}

.calorie-redo-recommend-summary.is-tight {
  border-color: rgba(234, 88, 12, 0.22);
  background: #fff7ed;
  color: #9a3412;
}

.calorie-redo-recommend-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.calorie-redo-recommend-list button {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 96px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  background: #f8fbff;
  color: #0f172a;
  cursor: pointer;
  font-family: inherit;
  padding: 10px;
  text-align: left;
  overflow-wrap: anywhere;
}

.calorie-redo-recommend-list button:hover,
.calorie-redo-recommend-list button:focus-visible {
  border-color: rgba(14, 165, 233, 0.42);
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.calorie-redo-recommend-list strong {
  font-size: 14px;
  font-weight: 900;
}

.calorie-redo-recommend-list span {
  color: #0369a1;
  font-size: 13px;
  font-weight: 900;
}

.calorie-redo-recommend-list small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.calorie-redo-recommend-status {
  border-radius: 8px;
  background: #ecfdf5;
  color: #15803d;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 12px;
}

.calorie-redo-meal-group {
  display: grid;
  gap: 8px;
}

.calorie-redo-meal-group + .calorie-redo-meal-group {
  margin-top: 14px;
}

.calorie-redo-meal-group h4 {
  color: var(--green);
  margin: 0;
}

.calorie-redo-list {
  display: grid;
  gap: 8px;
}

.calorie-redo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
}

.calorie-redo-row strong {
  display: block;
}

.calorie-redo-row span {
  color: var(--muted);
  font-size: 13px;
}

.calorie-redo-row > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.calorie-redo-chart {
  display: block;
  width: 100%;
  min-width: 420px;
  height: auto;
}

.calorie-redo-chart rect {
  fill: #f8fafc;
}

.calorie-redo-chart line {
  stroke: #cbd5e1;
  stroke-width: 1;
}

.calorie-redo-chart line.zero {
  stroke: #f59e0b;
  stroke-dasharray: 4 4;
}

.calorie-redo-chart line.reference {
  stroke: #ef4444;
  stroke-dasharray: 5 5;
  stroke-width: 1.2;
}

.calorie-redo-chart line.standard {
  stroke: #16a34a;
  stroke-dasharray: 6 5;
  stroke-width: 1.5;
}

.calorie-redo-chart .standard-band {
  fill: rgba(22, 163, 74, 0.1);
  stroke: none;
}

.calorie-redo-chart polyline {
  stroke: #15803d;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calorie-redo-chart text {
  fill: #334155;
  stroke: none !important;
  font-family: "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400 !important;
  letter-spacing: 0;
  paint-order: normal;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
}

.calorie-redo-chart .value-label-chip rect {
  fill: rgba(255, 255, 255, 0.92);
  stroke: rgba(185, 28, 28, 0.12);
  stroke-width: 1;
}

.calorie-redo-chart text.value-label {
  fill: #991b1b;
  font-size: 13px;
  font-weight: 400 !important;
}

.calorie-redo-chart circle {
  fill: #fff;
  stroke: #dc334d;
  stroke-width: 2;
}

.calorie-redo-chart.is-body text {
  font-size: 11.5px;
}

.calorie-redo-chart.is-body text.value-label {
  font-size: 11.5px;
}

.calorie-redo-chart.is-body circle {
  r: 2.8px;
}

.calorie-redo-body-trend-card .calorie-redo-card-head {
  align-items: flex-start;
}

.calorie-redo-body-trend-latest {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
}

.calorie-redo-body-trend-latest strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.calorie-redo-body-standard {
  font-weight: 700;
}

.calorie-redo-body-standard.is-standard {
  color: #15803d;
}

.calorie-redo-body-standard.is-high {
  color: #dc2626;
}

.calorie-redo-body-standard.is-low {
  color: #2563eb;
}

.calorie-redo-analysis-head {
  align-items: center;
  flex-direction: row;
}

.calorie-redo-analysis-card {
  display: grid;
  gap: 12px;
}

.calorie-redo-advice-open {
  align-self: center;
  white-space: nowrap;
}

.calorie-redo-trend-start {
  display: grid;
  gap: 6px;
  width: min(320px, 100%);
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.calorie-redo-trend-start input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 7px 10px;
  outline: none;
}

.calorie-redo-trend-start input:focus {
  border-color: rgba(23, 107, 87, 0.45);
  box-shadow: 0 0 0 4px rgba(184, 230, 209, 0.35);
}

.calorie-redo-analysis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.calorie-redo-analysis div {
  border-radius: 8px;
  background: #f0fdf4;
  padding: 14px;
}

.calorie-redo-analysis span {
  color: #166534;
  font-size: 13px;
  font-weight: 800;
}

.calorie-redo-analysis strong {
  display: block;
  color: #14532d;
  font-size: 24px;
  font-weight: 900;
  margin-top: 4px;
}

.calorie-redo-advice-dialog {
  width: min(680px, 100%);
}

.calorie-redo-advice-dialog .calorie-redo-analysis-advice {
  margin-top: 0;
}

.calorie-redo-advice-dialog .calorie-redo-analysis-notes {
  gap: 8px;
}

.calorie-redo-advice-dialog .calorie-redo-settings-history {
  margin-top: 2px;
}

.calorie-redo-settings-history {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.calorie-redo-settings-history > span {
  color: #dc334d;
  font-size: 13px;
  font-weight: 900;
}

.calorie-redo-settings-history article {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
}

.calorie-redo-settings-history strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.calorie-redo-settings-history p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.calorie-redo-mobile-tabs {
  display: none;
}

.device-card,
.schedule-panel,
.chat-panel,
.settings-panel,
.mbti-result-card,
.mbti-form,
.admin-view,
.voice-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.device-card {
  overflow: hidden;
}

.device-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #edf2f4;
}

.device-copy {
  padding: 14px 16px 0;
}

.device-copy span {
  color: var(--muted);
  font-size: 13px;
}

.device-copy h3 {
  margin: 4px 0 0;
  font-size: 20px;
}

.device-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.booking-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.wide-field {
  grid-column: 1 / -1;
}

.booking-form button {
  grid-column: 1 / -1;
}

.booking-form textarea[name="note"] {
  min-height: 72px;
  line-height: 1.45;
  resize: vertical;
}

.schedule-panel {
  padding: 16px;
  overflow: auto;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-heading h3 {
  margin: 0;
  font-size: 16px;
}

.schedule-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.compact-tabs {
  width: 132px;
  margin: 0;
}

.schedule-grid {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.week-schedule {
  grid-template-columns: 180px repeat(7, minmax(120px, 1fr));
  min-width: 980px;
}

.month-schedule {
  grid-template-columns: repeat(7, minmax(132px, 1fr));
  min-width: 960px;
}

.schedule-cell {
  min-height: 74px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px;
  background: #fff;
}

.schedule-head {
  min-height: 44px;
  background: #f0f5f3;
  color: #263330;
  font-size: 13px;
  font-weight: 900;
}

.device-label {
  font-weight: 900;
}

.free-slot {
  color: #7a8582;
  font-size: 12px;
}

.reserved-block {
  display: grid;
  gap: 2px;
  width: 100%;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  margin-bottom: 6px;
  padding: 8px;
  text-align: left;
}

.reserved-block span {
  font-size: 12px;
}

.treehole-view {
  --tree-bg: #eefbf5;
  --tree-pink: #74e0b6;
  --tree-mint: #2bb98a;
  --tree-ink: #173a31;
  position: relative;
  isolation: isolate;
  width: min(1160px, 100%);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  padding: 8px;
}

.treehole-view::before,
.treehole-view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.treehole-view::before {
  background:
    linear-gradient(115deg, rgba(37, 191, 137, 0.16), rgba(53, 168, 182, 0.1) 42%, rgba(172, 244, 206, 0.2)),
    repeating-linear-gradient(90deg, rgba(23, 107, 87, 0.1) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(23, 107, 87, 0.08) 0 1px, transparent 1px 42px);
  animation: tree-grid-flow 18s linear infinite;
}

.treehole-view::after {
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 45%, transparent 58%),
    linear-gradient(180deg, transparent, rgba(43, 185, 138, 0.1), transparent);
  mix-blend-mode: screen;
  transform: translateX(-70%);
  animation: tree-scan-flow 7s ease-in-out infinite;
}

.treehole-view > * {
  position: relative;
  z-index: 1;
}

.treehole-view.is-composing {
  width: min(900px, 100%);
}

.treehole-view.is-composing .treehole-music-player {
  display: none;
}

.private-mode .topbar {
  display: none;
}

.private-mode .mobile-topbar-toggle {
  display: none !important;
}

.private-mode .app-main {
  width: min(1440px, 100%);
  padding: 0 18px 18px;
}

.private-mode .treehole-view {
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
  padding: 16px 18px 24px;
}

.private-mode .treehole-view .section-head {
  display: flex;
}

.treehole-composer,
.treehole-post,
.treehole-empty {
  min-width: 0;
  border: 1px solid rgba(80, 205, 156, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(222, 255, 240, 0.88), rgba(235, 255, 249, 0.76)),
    rgba(255, 255, 255, 0.86);
  box-shadow:
    0 18px 42px rgba(23, 107, 87, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
}

.treehole-composer {
  position: relative;
  width: min(820px, 100%);
  margin: 0;
  padding: 16px;
}

.treehole-composer[hidden] {
  display: none;
}

.treehole-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.treehole-composer-head span {
  color: #17775d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.treehole-composer-head h3 {
  margin: 2px 0 0;
  color: var(--tree-ink);
  font-size: 22px;
}

.treehole-composer.is-uploading {
  overflow: hidden;
}

.treehole-upload-mask,
.plaz-upload-mask {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  color: var(--green);
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  border-radius: inherit;
}

.treehole-upload-mask::before,
.plaz-upload-mask::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 4px solid rgba(23, 107, 87, 0.16);
  border-top-color: var(--green);
  border-radius: 999px;
  animation: upload-spin 0.9s linear infinite;
}

.treehole-upload-mask strong,
.plaz-upload-mask strong {
  color: var(--ink);
  font-size: 18px;
}

.treehole-upload-mask span,
.plaz-upload-mask span {
  color: var(--muted);
  font-size: 13px;
}

.action-busy-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 31, 44, 0.18);
  backdrop-filter: blur(6px);
}

.action-busy-card {
  display: grid;
  place-items: center;
  gap: 9px;
  width: min(300px, calc(100vw - 44px));
  padding: 22px 20px;
  border: 1px solid rgba(23, 107, 87, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 48px rgba(21, 48, 61, 0.2);
  color: var(--ink);
  text-align: center;
}

.action-busy-spinner {
  width: 34px;
  height: 34px;
  border: 4px solid rgba(23, 107, 87, 0.14);
  border-top-color: var(--green);
  border-radius: 999px;
  animation: upload-spin 0.9s linear infinite;
}

.action-busy-card strong {
  font-size: 17px;
}

.action-busy-card small {
  color: var(--muted);
  font-size: 13px;
}

.treehole-composer form {
  display: grid;
  gap: 12px;
}

.treehole-mood-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.mood-picker {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.treehole-submit-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 88px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 13px;
  white-space: nowrap;
}

.mood-picker label {
  display: block;
}

.mood-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mood-picker span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(85, 202, 158, 0.46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(23, 107, 87, 0.09);
}

.mood-picker input:checked + span {
  border-color: var(--tree-mint);
  background: #e8fff4;
  box-shadow: 0 0 0 3px rgba(43, 185, 138, 0.18);
}

#treeholeText {
  border-color: rgba(85, 202, 158, 0.48);
  background: rgba(250, 255, 252, 0.94);
}

.treehole-emoji-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.treehole-emoji-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(85, 202, 158, 0.48);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--tree-ink);
  font-size: 19px;
  line-height: 1;
}

.treehole-emoji-picker {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(85, 202, 158, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(23, 107, 87, 0.12);
}

.treehole-composer form.is-emoji-open .treehole-emoji-picker {
  display: grid;
}

.treehole-emoji-picker button {
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(85, 202, 158, 0.2);
  border-radius: 8px;
  background: #f8fbfa;
  font-size: 19px;
  line-height: 1;
}

.treehole-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.treehole-image-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 10px;
}

.treehole-upload-row > .treehole-emoji-picker,
.treehole-upload-row > #treeholeImageName {
  grid-column: 1 / -1;
}

.treehole-audio-row {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.file-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(85, 202, 158, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--tree-ink);
  font-weight: 800;
}

.file-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#treeholeImageName,
#treeholeAudioName {
  color: #52756a;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#treeholeAudioPreview {
  grid-column: 1 / -1;
  width: 100%;
}

.audio-edit-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.audio-edit-panel[hidden] {
  display: none;
}

.audio-edit-panel.compact {
  padding: 10px;
  box-shadow: none;
}

.audio-edit-head,
.audio-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.audio-edit-head strong {
  color: #0f172a;
  font-size: 14px;
  white-space: nowrap;
}

.audio-edit-head span,
.audio-edit-panel > span {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.audio-trim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.audio-trim-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.audio-trim-grid b {
  color: #2563eb;
  font-weight: 900;
}

.audio-trim-grid input[type="range"] {
  width: 100%;
  accent-color: #2563eb;
}

.treehole-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.treehole-preview-grid[hidden],
.treehole-drawing-panel[hidden] {
  display: none;
}

.treehole-preview-item {
  position: relative;
  min-height: 104px;
  overflow: hidden;
  border: 1px solid rgba(85, 202, 158, 0.42);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.treehole-preview-item > button:first-child {
  width: 100%;
  height: 104px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.treehole-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.treehole-preview-item .mini-button {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(255, 255, 255, 0.92);
}

.treehole-drawing-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(85, 202, 158, 0.45);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.treehole-drawing-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.treehole-drawing-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--tree-ink);
}

#treeholeDrawingCanvas {
  width: 100%;
  min-height: 240px;
  touch-action: none;
  border: 1px dashed rgba(23, 107, 87, 0.35);
  border-radius: 12px;
  background: #fff;
}

.retention-select {
  gap: 4px;
}

.retention-select span {
  font-size: 12px;
}

.retention-select select {
  min-height: 40px;
  padding: 7px 10px;
}

.treehole-feed {
  display: block;
  column-count: 1;
  column-gap: 14px;
}

@media (min-width: 900px) {
  .treehole-feed {
    column-count: 2;
  }

  .treehole-empty {
    column-span: all;
  }
}

@media (min-width: 1320px) {
  .treehole-feed {
    column-count: 3;
  }
}

.treehole-empty {
  color: #52756a;
  padding: 24px;
  text-align: center;
}

.treehole-post {
  width: 100%;
  min-height: 0;
  margin: 0 0 14px;
  break-inside: avoid;
  page-break-inside: avoid;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.treehole-post > *,
.treehole-comments,
.treehole-comment-form,
.treehole-comment-main,
.treehole-comment-main > div {
  max-width: 100%;
  min-width: 0;
}

.treehole-post.from-admin {
  border-color: rgba(62, 190, 139, 0.45);
  background:
    linear-gradient(135deg, rgba(198, 255, 226, 0.9), rgba(236, 255, 247, 0.82)),
    rgba(255, 255, 255, 0.88);
}

.treehole-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.treehole-avatar {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.treehole-post-head strong,
.treehole-post-head span {
  display: block;
}

.treehole-post-head span {
  color: #52756a;
  font-size: 12px;
}

.treehole-text {
  margin: 0;
  color: var(--tree-ink);
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.treehole-mood {
  margin-left: auto;
  font-size: 22px;
}

.treehole-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  max-width: 100%;
}

.treehole-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(85, 202, 158, 0.5);
  border-radius: 8px;
  background: #f4fff9;
  padding: 0;
}

.treehole-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.treehole-audio-card,
.admin-treehole-audio {
  display: grid;
  gap: 7px;
  max-width: 560px;
  border: 1px solid rgba(85, 202, 158, 0.5);
  border-radius: 8px;
  background: rgba(249, 255, 252, 0.88);
  padding: 10px;
}

.treehole-audio-card span,
.admin-treehole-audio span {
  color: #52756a;
  font-size: 13px;
  font-weight: 800;
}

.treehole-audio-card audio,
.admin-treehole-audio audio {
  width: 100%;
}

.treehole-ttl {
  align-self: center;
  margin-right: auto;
  color: #17775d;
  font-size: 12px;
  font-weight: 900;
}

.treehole-head {
  position: relative;
  overflow: hidden;
}

.treehole-head > div:first-child {
  position: relative;
  z-index: 1;
  padding-right: 88px;
}

.treehole-head #refreshTreeholeButton {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  margin: 0;
  white-space: nowrap;
}

.treehole-head .treehole-music-toggle {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  margin: 0;
}

.treehole-music-toggle {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  min-height: 54px;
  margin: 2px 0 10px auto;
  border: 1px solid rgba(85, 202, 158, 0.46);
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.22) 24%, transparent 26%),
    linear-gradient(135deg, #13765d, #43c893);
  box-shadow:
    0 14px 34px rgba(23, 107, 87, 0.22),
    inset 0 0 0 5px rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.treehole-music-toggle[hidden] {
  display: none;
}

.treehole-music-toggle:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 42px rgba(23, 107, 87, 0.28),
    inset 0 0 0 5px rgba(255, 255, 255, 0.25);
}

.treehole-music-toggle.is-expanded {
  box-shadow:
    0 10px 26px rgba(23, 107, 87, 0.18),
    0 0 0 5px rgba(85, 202, 158, 0.16),
    inset 0 0 0 5px rgba(255, 255, 255, 0.22);
}

.treehole-music-note {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #13765d;
  background: rgba(255, 255, 255, 0.92);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  transform-origin: center;
}

.treehole-music-toggle.is-playing .treehole-music-note {
  animation: treehole-music-spin 4s linear infinite;
}

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

.treehole-music-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(85, 202, 158, 0.45);
  border-radius: 8px;
  background: rgba(249, 255, 252, 0.9);
  box-shadow: 0 12px 30px rgba(29, 87, 69, 0.08);
  padding: 12px;
}

.treehole-music-player[hidden],
.treehole-music-player.is-collapsed {
  display: none;
}

.treehole-music-player.is-empty {
  border-style: dashed;
  opacity: 0.82;
}

.treehole-music-now {
  min-width: 0;
}

.treehole-music-now span,
.treehole-music-now strong {
  display: block;
}

.treehole-music-now span {
  color: #52756a;
  font-size: 12px;
  font-weight: 900;
}

.treehole-music-now strong {
  color: var(--tree-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#treeholeMusicAudio {
  display: none;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.treehole-music-deck {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(85, 202, 158, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(231, 252, 243, 0.72));
}

.treehole-music-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  overflow: hidden;
}

.treehole-music-wave span {
  flex: 1 1 0;
  min-width: 3px;
  max-width: 12px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(35, 170, 128, 0.86), rgba(21, 104, 82, 0.32));
  opacity: 0.7;
  transform-origin: center;
  animation: treehole-wave-pulse 1.3s ease-in-out infinite paused;
}

.treehole-music-wave.is-playing span {
  opacity: 0.96;
  animation-play-state: running;
}

.treehole-music-wave span:nth-child(2n) {
  height: 28px;
  animation-delay: -0.22s;
}

.treehole-music-wave span:nth-child(3n) {
  height: 34px;
  animation-delay: -0.44s;
}

.treehole-music-wave span:nth-child(4n) {
  height: 22px;
  animation-delay: -0.66s;
}

.treehole-music-wave span:nth-child(5n) {
  height: 38px;
  animation-delay: -0.88s;
}

@keyframes treehole-wave-pulse {
  0%,
  100% {
    transform: scaleY(0.58);
  }

  50% {
    transform: scaleY(1.12);
  }
}

.treehole-music-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

#treeholeMusicProgress {
  width: 100%;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  background:
    linear-gradient(90deg, #21a77d var(--music-progress, 0%), rgba(42, 160, 123, 0.16) 0);
  cursor: pointer;
}

#treeholeMusicProgress:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

#treeholeMusicProgress::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  appearance: none;
  background: #159f78;
  box-shadow: 0 4px 12px rgba(25, 121, 92, 0.28);
}

#treeholeMusicProgress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #159f78;
  box-shadow: 0 4px 12px rgba(25, 121, 92, 0.28);
}

#treeholeMusicTime {
  min-width: 92px;
  color: #52756a;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.treehole-music-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 28, 0.78);
  padding: 24px;
}

.image-lightbox img {
  max-width: min(100%, 1100px);
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.treehole-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.treehole-comments {
  display: grid;
  gap: 10px;
  border-top: 1px dashed rgba(85, 202, 158, 0.46);
  padding-top: 10px;
}

.treehole-comment-card {
  position: relative;
  display: grid;
  gap: 8px;
  border-radius: 8px;
  background: rgba(241, 255, 248, 0.9);
  border: 1px solid rgba(85, 202, 158, 0.3);
  padding: 9px 72px 9px 10px;
}

.treehole-comment-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.treehole-comment-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.treehole-comment-main > div {
  min-width: 0;
}

.treehole-comment-card strong,
.treehole-comment-card span {
  display: block;
}

.treehole-comment-card span {
  color: #64877b;
  font-size: 12px;
}

.treehole-comment-card p {
  color: var(--tree-ink);
  margin: 3px 0 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.treehole-comment-content {
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.treehole-comment-content:hover {
  background: rgba(27, 166, 113, 0.08);
}

.treehole-comment-content:focus-visible {
  outline: 2px solid rgba(27, 166, 113, 0.32);
  outline-offset: 2px;
}

.treehole-comment-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 0;
}

.treehole-comment-actions .mini-button,
.treehole-actions .mini-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-weight: 800;
}

.treehole-replies,
.treehole-comment-card.is-reply {
  margin-left: 42px;
}

.treehole-comment-empty {
  color: #64877b;
  font-size: 13px;
}

.treehole-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
}

.treehole-comment-form input {
  order: 1;
  width: 100%;
  min-width: 0;
}

.treehole-comment-emoji-toggle {
  order: 2;
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(85, 202, 158, 0.36);
  border-radius: 8px;
  background: #fff;
  color: var(--tree-ink);
  font-size: 17px;
  line-height: 1;
}

.treehole-comment-form > .mini-button {
  order: 3;
}

.treehole-comment-emoji-picker {
  order: 4;
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(85, 202, 158, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}

.treehole-comment-form.is-emoji-open .treehole-comment-emoji-picker {
  display: grid;
}

.treehole-comment-emoji-picker button {
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(85, 202, 158, 0.18);
  border-radius: 8px;
  background: #f8fbfa;
  font-size: 18px;
  line-height: 1;
}

.treehole-comment-form.reply {
  margin-left: 52px;
  max-width: calc(100% - 52px);
  padding: 8px;
  background: rgba(243, 255, 249, 0.88);
  border: 1px solid rgba(85, 202, 158, 0.28);
  border-radius: 8px;
}

.month-cell {
  min-height: 128px;
}

.month-cell > strong {
  display: block;
  margin-bottom: 8px;
  color: #263330;
}

.muted-month {
  background: #f6f8f7;
  color: #9aa4a1;
}

.compact-reservation {
  padding: 7px;
}

.digital-layout {
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
}

.digital-layout .section-head {
  grid-column: 1 / -1;
}

.settings-panel {
  padding: 16px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.toggle-row label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-row input {
  width: auto;
}

.voice-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}

.record-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.record-row strong,
.record-row span {
  display: block;
}

.record-row span {
  color: var(--muted);
  font-size: 13px;
}

.record-button.is-recording {
  background: rgba(201, 73, 73, 0.12);
  color: var(--red);
}

.secondary-button.is-recording {
  background: rgba(201, 73, 73, 0.12);
  color: var(--red);
}

#recordPreview {
  width: 100%;
}

.chat-panel {
  display: grid;
  grid-template-rows: minmax(560px, 1fr) auto;
  overflow: hidden;
}

.friends-module-host,
.friends-admin-root {
  width: 100%;
}

.friends-shell {
  display: grid;
  gap: 16px;
}

.friends-head {
  align-items: center;
}

.friends-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.15fr) minmax(320px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.friends-side,
.friends-main,
.friends-chat,
.friend-section,
.friend-chat-window,
.friend-treehole-panel {
  min-width: 0;
}

.friend-section,
.friend-chat-window,
.friend-treehole-panel {
  border: 1px solid rgba(27, 55, 85, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  padding: 14px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
}

.friend-section + .friend-section,
.friend-treehole-panel {
  margin-top: 14px;
}

.friend-section h3,
.friend-chat-head strong {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 15px;
}

.friend-help {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.friend-search-form,
.friend-message-form {
  display: grid;
  gap: 10px;
}

.friend-search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 14px;
}

.friend-search-form input,
.friend-message-form textarea {
  width: 100%;
  border: 1px solid rgba(27, 55, 85, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}

.friend-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(27, 55, 85, 0.08);
}

.friend-list-item:last-child {
  border-bottom: 0;
}

.friend-list-item > div {
  min-width: 0;
}

.friend-list-item strong,
.friend-list-item span,
.friend-list-item small {
  display: block;
  overflow-wrap: anywhere;
}

.friend-list-item span,
.friend-list-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.friend-list-item .people-row-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue);
  font-weight: 700;
}

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

.friend-conversation {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(27, 55, 85, 0.08);
  background: transparent;
  padding: 10px 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.friend-conversation.is-active {
  background: rgba(37, 99, 235, 0.08);
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: 8px;
}

.friend-conversation span {
  min-width: 0;
}

.friend-conversation strong,
.friend-conversation small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-conversation small {
  color: var(--muted);
}

.friend-conversation em,
.friend-unread {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  background: #d92d20;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.friend-chat-window {
  display: flex;
  min-height: 520px;
  max-height: calc(100dvh - 220px);
  flex-direction: column;
}

.friend-chat-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.friend-chat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(27, 55, 85, 0.1);
}

.friend-chat-head span {
  color: var(--muted);
  font-size: 12px;
}

.friend-message-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 2px;
}

.friend-message {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.friend-message.is-mine {
  justify-content: flex-end;
}

.friend-message > div {
  max-width: min(76%, 560px);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f3f4f6;
}

.friend-message.is-mine > div {
  background: #2563eb;
  color: #fff;
}

.friend-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.friend-message span {
  display: block;
  margin-top: 5px;
  color: rgba(107, 114, 128, 0.9);
  font-size: 11px;
}

.friend-message.is-mine span {
  color: rgba(255, 255, 255, 0.75);
}

.friend-message-form {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 55, 85, 0.1);
}

.friend-treehole-post {
  border-top: 1px solid rgba(27, 55, 85, 0.08);
  padding: 10px 0;
}

.friend-treehole-post span {
  color: var(--muted);
  font-size: 12px;
}

.friend-treehole-post p {
  margin: 6px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.friends-admin-settings .two-col {
  align-items: stretch;
}

@media (max-width: 1100px) {
  .friends-grid {
    grid-template-columns: 1fr;
  }

  .friend-chat-window {
    min-height: 420px;
    max-height: none;
  }
}

.friends-head {
  min-height: auto;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
}

.friends-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.friends-grid {
  min-height: calc(100dvh - 210px);
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(27, 55, 85, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.08);
}

.friends-side {
  display: flex;
  min-height: 0;
  max-height: calc(100dvh - 210px);
  flex-direction: column;
  border-right: 1px solid #d8d8d8;
  background: #e9e9eb;
}

.friend-side-heading {
  display: grid;
  gap: 3px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #dcdcdf;
  background: #eef4ff;
}

.friend-side-heading strong {
  color: #111827;
  font-size: 15px;
}

.friend-side-heading span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.friend-self-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #dcdcdf;
  background: #eef4ff;
}

.friend-self-avatar.friend-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.friend-self-main {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 4px;
}

.friend-self-main > strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-signature-display {
  width: 100%;
  min-width: 0;
  min-height: 20px;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: text;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-signature-display:hover,
.friend-signature-display:focus-visible {
  color: #1d4ed8;
  outline: none;
}

.friend-signature-display.is-empty {
  color: #94a3b8;
}

.friend-signature-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.friend-signature-editor input {
  min-width: 0;
  height: 30px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 6px;
  background: #fff;
  color: #111827;
  font-size: 12px;
  outline: none;
  padding: 0 8px;
}

.friend-signature-editor input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.friend-signature-editor .mini-button {
  height: 30px;
  padding: 0 8px;
}

.friend-search-form {
  grid-template-columns: minmax(0, 1fr) 48px;
  margin: 0;
  padding: 12px;
  border-bottom: 1px solid #dcdcdf;
}

.friend-search-form input {
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: #f7f7f7;
  padding: 0 12px;
}

.friend-search-form .primary-button {
  min-width: 0;
  height: 36px;
  padding: 0;
  border-radius: 6px;
}

.friends-sidebar-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.friend-sidebar-title {
  padding: 14px 14px 6px;
  color: #777;
  font-size: 12px;
}

.friend-sidebar-empty {
  margin: 8px 12px 12px;
  border-radius: 6px;
  padding: 12px;
  color: #8a8a8a;
  background: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.5;
}

.friend-conversation,
.friend-contact {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: transparent;
  padding: 10px 12px;
  color: #111;
  text-align: left;
  cursor: pointer;
}

.friend-conversation:hover,
.friend-contact:hover {
  background: rgba(255, 255, 255, 0.5);
}

.friend-conversation.is-active,
.friend-contact.is-active {
  margin: 0;
  border-radius: 0;
  background: #d7d7d9;
}

.friend-conversation span,
.friend-contact span {
  min-width: 0;
}

.friend-conversation strong,
.friend-contact strong,
.friend-conversation small,
.friend-contact small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-conversation strong,
.friend-contact strong {
  font-size: 14px;
  font-weight: 500;
}

.friend-conversation small,
.friend-contact small {
  margin-top: 4px;
  color: #8a8a8a;
  font-size: 12px;
}

.friends-management {
  max-height: 40%;
  overflow: auto;
  border-top: 1px solid #d8d8d8;
  background: #eeeeef;
}

.friends-management details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.friends-management summary {
  cursor: pointer;
  padding: 12px 14px;
  color: #333;
  font-size: 13px;
  font-weight: 600;
}

.friends-management .friend-list-item {
  margin: 0 12px 10px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
}

.friends-chat {
  display: grid;
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - 210px);
  grid-template-columns: minmax(0, 1fr) 260px;
  background: #f5f5f5;
}

.friend-chat-window {
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f5f5f5;
  padding: 0;
}

.friend-chat-head {
  min-height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid #e4e4e4;
  background: #f7f7f7;
}

.friend-chat-head .friend-avatar {
  display: none;
}

.friend-chat-head strong {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.friend-message-list {
  padding: 22px 28px;
}

.friend-message > div {
  border-radius: 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  background: #ffffff;
}

.friend-message.is-mine > div {
  background: #95ec69;
  color: #111;
}

.friend-message.is-mine span {
  color: rgba(17, 17, 17, 0.55);
}

.friend-message-form {
  min-height: 126px;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: end;
  padding: 12px;
  background: #f7f7f7;
  border-top: 1px solid #e4e4e4;
}

.friend-message-form textarea {
  min-height: 88px;
  border: 0;
  background: #fff;
  resize: vertical;
}

.friend-detail-panel,
.friend-treehole-panel {
  min-width: 0;
  border: 0;
  border-left: 1px solid #e4e4e4;
  border-radius: 0;
  box-shadow: none;
  background: #fafafa;
  padding: 18px;
}

.friend-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.friend-detail-head strong,
.friend-detail-head span {
  display: block;
  overflow-wrap: anywhere;
}

.friend-detail-head span {
  margin-top: 4px;
  color: #777;
  font-size: 12px;
}

.friend-detail-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.friend-detail-actions .mini-button {
  justify-content: center;
}

@media (max-width: 1100px) {
  .friends-grid {
    grid-template-columns: 1fr;
  }

  .friends-side,
  .friends-chat {
    max-height: none;
  }

  .friends-chat {
    grid-template-columns: 1fr;
  }

  .friend-detail-panel,
  .friend-treehole-panel {
    border-left: 0;
    border-top: 1px solid #e4e4e4;
  }
}

.messages {
  min-height: 0;
  overflow: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message {
  display: grid;
  gap: 6px;
  max-width: min(780px, 92%);
}

.message.user {
  align-self: flex-end;
}

.message.assistant {
  align-self: flex-start;
}

.message-meta {
  color: var(--muted);
  font-size: 12px;
}

.message-bubble {
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.user .message-bubble {
  background: var(--green);
  color: #fff;
}

.assistant .message-bubble {
  background: var(--surface-soft);
  border: 1px solid #d7e3dd;
}

.message-tools {
  display: flex;
  justify-content: flex-end;
}

.mini-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.mini-button.strong {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

#messageInput {
  min-height: 42px;
  max-height: 160px;
  resize: none;
}

.typing {
  align-self: flex-start;
  color: var(--muted);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}

.mbti-view {
  --mbti-purple: #7651c9;
  --mbti-mint: #2bb98a;
  --mbti-gold: #d99a2b;
}

.mbti-result-card {
  display: grid;
  grid-template-columns: minmax(140px, 170px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  overflow: visible;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 18%, rgba(118, 81, 201, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(43, 185, 138, 0.1), rgba(36, 95, 156, 0.08)),
    #fff;
}

.mbti-result-copy {
  min-width: 0;
}

.mbti-result-card h3 {
  margin: 4px 0 0;
  font-size: 24px;
  overflow-wrap: anywhere;
}

.mbti-result-card p {
  color: var(--muted);
  line-height: 1.7;
  margin: 8px 0;
  overflow-wrap: anywhere;
}

.mbti-result-card small {
  color: var(--gold);
  font-weight: 800;
}

.mbti-portrait {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  color: #fff;
  padding: 14px;
  text-align: center;
  box-shadow: 0 18px 42px rgba(20, 34, 32, 0.16);
}

.mbti-portrait span {
  font-size: 58px;
  line-height: 1;
}

.journal-almanac-module-host,
.journal-almanac-admin-root {
  display: grid;
  gap: 18px;
  position: relative;
}

.ja-busy-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(6px);
}

.ja-busy-card {
  width: min(320px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(21, 128, 111, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.ja-busy-card small {
  color: var(--muted);
  line-height: 1.5;
}

.ja-busy-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(21, 128, 111, 0.16);
  border-top-color: var(--green);
  border-radius: 999px;
  animation: ja-spin 0.8s linear infinite;
}

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

.ja-head,
.ja-note,
.ja-card,
.ja-filter-panel,
.ja-source-note,
.ja-admin-panel,
.ja-edit-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 32px rgba(20, 34, 32, 0.08);
}

.ja-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
}

.ja-head h2 {
  margin: 4px 0 6px;
  font-size: 28px;
  letter-spacing: 0;
}

.ja-head p,
.ja-head small,
.ja-note,
.ja-source-note p,
.ja-score-copy,
.ja-today-card p,
.ja-modal p {
  color: var(--muted);
  line-height: 1.7;
}

.ja-head-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
  min-width: 320px;
}

.ja-head-stats span {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
  color: var(--muted);
  font-size: 12px;
}

.ja-head-stats strong {
  color: var(--green);
  font-size: 22px;
}

.ja-note,
.ja-source-note,
.ja-card,
.ja-admin-panel,
.ja-edit-form {
  padding: 18px;
}

.ja-filter-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.ja-filter-form,
.ja-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ja-filter-form label,
.ja-journal-picker,
.ja-edit-grid label,
.ja-rules-editor {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.ja-filter-form input,
.ja-filter-form select,
.ja-journal-picker select,
.ja-card-head select,
.ja-edit-grid input,
.ja-edit-grid select,
.ja-edit-grid textarea,
.ja-rules-editor textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
}

.ja-filter-actions,
.ja-form-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.ja-journal-picker select {
  min-height: 44px;
  font-weight: 800;
  color: var(--green);
}

.ja-dashboard,
.ja-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
}

.ja-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ja-card h3,
.ja-card-head h3,
.ja-source-note h3,
.ja-edit-form h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.ja-metric-grid,
.ja-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ja-metric-grid div,
.ja-detail-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e6ece9;
  border-radius: 8px;
  background: #fbfdfc;
}

.ja-metric-grid span,
.ja-detail-grid span,
.ja-factor-grid span,
.ja-advice-columns > div > span {
  color: var(--muted);
  font-size: 12px;
}

.ja-metric-grid strong,
.ja-detail-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.ja-score-top {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.ja-score-ring {
  display: grid;
  place-items: center;
  width: 140px;
  aspect-ratio: 1;
  border: 10px solid rgba(23, 107, 87, 0.18);
  border-radius: 999px;
  background: #fbfdfc;
  text-align: center;
}

.ja-score-ring strong {
  color: var(--green);
  font-size: 34px;
  line-height: 1;
}

.ja-score-ring span {
  max-width: 96px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.ja-score-great { border-color: rgba(23, 107, 87, 0.32); }
.ja-score-good { border-color: rgba(53, 168, 182, 0.34); }
.ja-score-small-good { border-color: rgba(36, 95, 156, 0.26); }
.ja-score-neutral { border-color: rgba(154, 106, 18, 0.28); }
.ja-score-caution { border-color: rgba(201, 73, 73, 0.24); }
.ja-score-bad { border-color: rgba(201, 73, 73, 0.42); }

.ja-factor-grid,
.ja-advice-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ja-factor-grid > div,
.ja-advice-columns > div {
  display: grid;
  gap: 8px;
}

.ja-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ja-chip-list span,
.ja-muted {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.ja-chip-list.good span {
  border-color: rgba(23, 107, 87, 0.24);
  color: var(--green);
  background: rgba(23, 107, 87, 0.06);
}

.ja-chip-list.risk span {
  border-color: rgba(201, 73, 73, 0.22);
  color: var(--red);
  background: rgba(201, 73, 73, 0.06);
}

.ja-confidence {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.ja-confidence-high {
  border-color: rgba(23, 107, 87, 0.28);
  color: var(--green);
  background: rgba(23, 107, 87, 0.06);
}

.ja-confidence-medium {
  border-color: rgba(36, 95, 156, 0.24);
  color: var(--blue);
  background: rgba(36, 95, 156, 0.06);
}

.ja-confidence-low,
.ja-confidence-unknown {
  border-color: rgba(154, 106, 18, 0.26);
  color: var(--gold);
  background: rgba(154, 106, 18, 0.06);
}

.ja-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  gap: 8px;
}

.ja-weekday,
.ja-calendar-empty,
.ja-day {
  min-height: 44px;
  border-radius: 8px;
}

.ja-weekday {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ja-calendar-empty {
  border: 1px dashed #e7ecea;
  background: #fbfdfc;
}

.ja-day {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 5px;
  min-height: 132px;
  padding: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.ja-day:hover {
  border-color: rgba(23, 107, 87, 0.42);
  box-shadow: 0 10px 24px rgba(20, 34, 32, 0.1);
}

.ja-day.is-today {
  border-color: rgba(36, 95, 156, 0.58);
  box-shadow:
    inset 0 0 0 2px rgba(36, 95, 156, 0.22),
    0 12px 28px rgba(36, 95, 156, 0.12);
}

.ja-day span {
  color: var(--muted);
  font-size: 12px;
}

.ja-today-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.ja-day strong {
  font-size: 24px;
  line-height: 1;
}

.ja-day em {
  font-style: normal;
  font-weight: 900;
  color: var(--green);
}

.ja-day small {
  color: var(--muted);
  line-height: 1.35;
}

.ja-calendar-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.ja-day-good,
.ja-day-great {
  background: linear-gradient(180deg, rgba(23, 107, 87, 0.08), #fff 48%);
}

.ja-day-neutral {
  background: linear-gradient(180deg, rgba(154, 106, 18, 0.08), #fff 48%);
}

.ja-day-caution,
.ja-day-bad {
  background: linear-gradient(180deg, rgba(201, 73, 73, 0.08), #fff 48%);
}

.ja-month-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ja-today-score {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  margin-bottom: 14px;
}

.ja-today-score strong {
  color: var(--green);
  font-size: 34px;
  line-height: 1;
}

.ja-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ja-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}

.ja-table th,
.ja-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.ja-table th {
  color: var(--muted);
  background: #f8fbfa;
  font-size: 12px;
}

.ja-actions,
.ja-form-actions,
.ja-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ja-pagination {
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.mini-button.danger {
  color: var(--red);
}

.ja-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(21, 32, 30, 0.42);
}

.ja-modal {
  width: min(760px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow);
}

.ja-detail-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.ja-detail-score strong {
  color: var(--green);
  font-size: 34px;
}

.ja-admin-shell {
  display: grid;
  gap: 14px;
}

.ja-admin-tabs {
  justify-content: flex-start;
  overflow-x: auto;
}

.ja-import-box {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.ja-import-box label:not(.file-pill) {
  display: grid;
  gap: 6px;
  min-width: 220px;
  color: var(--muted);
  font-size: 13px;
}

.ja-import-box select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.ja-import-result {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.ja-import-result pre {
  width: 100%;
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: #101918;
  color: #e8f4f0;
}

.ja-inline-json {
  max-width: 420px;
  max-height: 160px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: #f4f7f8;
  color: var(--muted);
  font-size: 12px;
  white-space: pre-wrap;
}

.ja-ai-form {
  margin-top: 0;
  margin-bottom: 16px;
}

.ja-edit-form {
  margin-top: 16px;
}

.ja-edit-form.ja-ai-form {
  margin-top: 0;
}

.ja-edit-grid .wide-field,
.ja-rules-editor {
  grid-column: 1 / -1;
}

.ja-edit-grid textarea,
.ja-rules-editor textarea {
  resize: vertical;
}

.ja-template-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 16px;
}

.ja-template-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.ja-template-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ja-template-row.is-disabled {
  opacity: 0.62;
}

.ja-template-row div:first-child {
  display: grid;
  gap: 5px;
}

.ja-template-row span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 980px) {
  .ja-head,
  .ja-dashboard,
  .ja-main-grid,
  .ja-template-layout {
    grid-template-columns: 1fr;
  }

  .ja-head {
    display: grid;
  }

  .ja-head-stats {
    min-width: 0;
    grid-template-columns: repeat(3, 1fr);
  }

  .ja-filter-form,
  .ja-edit-grid,
  .ja-metric-grid,
  .ja-detail-grid,
  .ja-factor-grid,
  .ja-advice-columns {
    grid-template-columns: 1fr;
  }

  .ja-calendar-grid {
    grid-template-columns: repeat(7, minmax(54px, 1fr));
    gap: 5px;
  }

  .ja-day {
    min-height: 112px;
    padding: 7px;
  }

  .ja-day small,
  .ja-day .ja-confidence {
    display: none;
  }
}

@media (max-width: 640px) {
  .ja-head-stats {
    grid-template-columns: 1fr;
  }

  .ja-card-head,
  .ja-score-top,
  .ja-detail-score,
  .ja-template-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ja-calendar-grid {
    grid-template-columns: repeat(7, minmax(40px, 1fr));
  }

  .ja-weekday,
  .ja-calendar-empty,
  .ja-day {
    border-radius: 6px;
  }

  .ja-day {
    min-height: 82px;
  }

  .ja-day strong {
    font-size: 18px;
  }

  .ja-day em {
    font-size: 12px;
  }
}

.mbti-portrait strong {
  margin-top: 10px;
  font-size: 17px;
}

.tone-purple { background: linear-gradient(135deg, #7c4dff, #32215f); }
.tone-blue { background: linear-gradient(135deg, #35a8b6, #163a63); }
.tone-red { background: linear-gradient(135deg, #de5b61, #74242a); }
.tone-orange { background: linear-gradient(135deg, #ff9b54, #8a3b12); }
.tone-green { background: linear-gradient(135deg, #2bb98a, #105945); }
.tone-pink { background: linear-gradient(135deg, #f08bb4, #85415f); }
.tone-gold { background: linear-gradient(135deg, #e2ad45, #76520b); }
.tone-mint { background: linear-gradient(135deg, #74e0b6, #176b57); }
.tone-slate { background: linear-gradient(135deg, #78909c, #263238); }
.tone-brown { background: linear-gradient(135deg, #b08968, #5d4037); }

.mbti-form {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.mbti-questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mbti-question {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  margin: 0;
  padding: 12px;
}

.mbti-question legend {
  color: var(--ink);
  font-weight: 900;
  padding: 0 4px;
}

.mbti-question label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.mbti-question label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mbti-question input {
  flex: 0 0 auto;
  width: auto;
}

.mbti-empty {
  grid-column: 1 / -1;
}

.mbti-start-card {
  display: grid;
  gap: 16px;
}

.mbti-start-copy {
  border: 1px solid rgba(43, 185, 138, 0.22);
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 8% 20%, rgba(116, 224, 182, 0.24), transparent 30%),
    rgba(255, 255, 255, 0.74);
}

.mbti-start-copy strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
}

.mbti-start-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.mbti-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mbti-mode-option {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(20, 34, 32, 0.06);
}

.mbti-mode-option.is-selected {
  border-color: rgba(43, 185, 138, 0.75);
  background: linear-gradient(135deg, rgba(43, 185, 138, 0.14), rgba(255, 255, 255, 0.95));
}

.mbti-mode-option input {
  width: auto;
}

.mbti-mode-option strong {
  color: var(--ink);
  font-size: 17px;
}

.mbti-mode-option span {
  color: var(--green);
  font-weight: 900;
}

.mbti-mode-option small {
  color: var(--muted);
  line-height: 1.5;
}

.mbti-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.mbti-analysis-section,
.mbti-axis-card {
  min-width: 0;
  border: 1px solid rgba(43, 185, 138, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.mbti-analysis-section h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 15px;
}

.mbti-analysis-section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}

.mbti-axis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mbti-axis-card strong {
  color: var(--green);
  font-size: 14px;
}

.mbti-axis-card p {
  margin: 6px 0 0;
  font-size: 13px;
}

.admin-view {
  padding: 18px;
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.admin-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfc;
}

.admin-summary strong {
  display: block;
  font-size: 26px;
}

.admin-summary span {
  color: var(--muted);
  font-size: 13px;
}

.admin-tabs {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 0;
}

.admin-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.mbti-admin-root,
.mbti-admin-table td:first-child,
.mbti-admin-table td:nth-child(5) {
  min-width: 0;
}

.mbti-admin-root {
  display: grid;
  gap: 14px;
}

.mbti-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.mbti-admin-stats article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 14px;
}

.mbti-admin-stats strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
}

.mbti-admin-stats span {
  color: var(--muted);
  font-size: 13px;
}

.mbti-admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mbti-admin-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

.mbti-admin-table th,
.mbti-admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.mbti-admin-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.mbti-admin-table tr:last-child td {
  border-bottom: 0;
}

.mbti-admin-table td strong,
.mbti-admin-table td span,
.mbti-admin-table td small {
  display: block;
}

.mbti-admin-table td small,
.mbti-score-empty {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.mbti-result-pill {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(118, 81, 201, 0.1);
  color: var(--mbti-purple);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mbti-result-pill.is-empty,
.permission-chip.is-muted {
  background: #eef0f2;
  color: var(--muted);
}

.mbti-score-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mbti-score-line span {
  border: 1px solid rgba(118, 81, 201, 0.16);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(118, 81, 201, 0.06);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.mbti-reset-button {
  min-height: 30px;
  white-space: nowrap;
}

.treehole-admin-tools {
  display: flex;
  justify-content: flex-end;
}

.admin-treehole-music,
.admin-treehole-music-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.compact-heading {
  margin: 0;
}

.treehole-music-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.treehole-music-upload-name {
  min-width: 160px;
  max-width: min(520px, 100%);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-treehole-music-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 360px) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
}

.admin-treehole-music-item strong,
.admin-treehole-music-item span {
  display: block;
}

.admin-treehole-music-item span {
  color: var(--muted);
  font-size: 12px;
}

.admin-treehole-music-item audio {
  width: 100%;
}

.admin-treehole-history {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-treehole-item {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 12px;
}

.admin-treehole-meta,
.admin-treehole-comments,
.admin-treehole-comment {
  min-width: 0;
}

.admin-treehole-meta strong,
.admin-treehole-meta span,
.admin-treehole-meta small {
  display: block;
}

.admin-treehole-meta span,
.admin-treehole-meta small,
.admin-treehole-comments > span,
.admin-treehole-comment span {
  color: var(--muted);
  font-size: 13px;
}

.admin-treehole-text,
.admin-treehole-comment p {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.admin-treehole-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  min-width: 0;
  max-width: 680px;
}

.admin-treehole-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.admin-treehole-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-treehole-comments {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.admin-treehole-comment {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
}

.admin-treehole-comment.is-reply {
  margin-left: 18px;
  border-color: rgba(85, 202, 158, 0.5);
  background: #f2fff8;
}

.treehole-admin-root,
.treehole-admin-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.treehole-admin-table td {
  vertical-align: top;
}

.treehole-admin-table code {
  font-size: 12px;
}

.treehole-admin-table audio {
  width: min(260px, 100%);
}

.treehole-admin-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.treehole-admin-pagination {
  justify-content: flex-end;
  color: var(--muted);
  font-size: 13px;
}

.treehole-admin-music-entry {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.treehole-admin-music-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.treehole-admin-music-entry strong,
.treehole-admin-music-entry span,
.treehole-admin-music-entry small {
  display: block;
}

.treehole-admin-music-entry span,
.treehole-admin-music-entry small {
  color: var(--muted);
  font-size: 13px;
}

.treehole-admin-music-playlist {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.treehole-admin-music-playlist div {
  min-width: 0;
  border: 1px solid rgba(52, 127, 224, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  padding: 8px 10px;
}

.treehole-admin-music-playlist strong {
  overflow: hidden;
  color: #0f3c62;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.treehole-admin-detail p {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.treehole-admin-attachment-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.plaz-admin-root,
.plaz-admin-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.plaz-admin-empty,
.plaz-admin-head,
.plaz-admin-detail,
.plaz-admin-overview-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 14px;
}

.plaz-admin-head,
.plaz-admin-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plaz-admin-head strong,
.plaz-admin-head span,
.plaz-admin-title strong,
.plaz-admin-title span,
.plaz-admin-detail dt,
.plaz-admin-detail dd,
.muted-text {
  display: block;
}

.plaz-admin-head span,
.muted-text,
.plaz-admin-result-count,
.plaz-admin-detail dt,
.plaz-admin-detail p {
  color: var(--muted);
  font-size: 13px;
}

.plaz-admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.plaz-admin-tabs button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #263330;
  font-weight: 800;
  padding: 9px 12px;
}

.plaz-admin-tabs button.is-active {
  border-color: rgba(23, 107, 87, 0.32);
  background: #edf7f3;
  color: var(--green);
}

.plaz-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
}

.plaz-admin-stats article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.plaz-admin-stats strong {
  display: block;
  font-size: 24px;
}

.plaz-admin-stats span {
  color: var(--muted);
  font-size: 12px;
}

.plaz-admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.plaz-admin-overview-grid h4,
.plaz-admin-detail h4 {
  margin: 0 0 10px;
}

.plaz-rank-list,
.plaz-log-list,
.plaz-detail-comments {
  display: grid;
  gap: 8px;
}

.plaz-rank-list button,
.plaz-detail-comments button,
.link-button {
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.plaz-rank-list button {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.plaz-rank-list span,
.plaz-log-list span,
.plaz-detail-comments span,
.plaz-admin-title small {
  color: var(--muted);
  font-size: 12px;
}

.plaz-log-list div {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
}

.plaz-log-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.plaz-admin-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(6, minmax(118px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
}

.plaz-admin-controls.compact {
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(128px, 1fr)) auto auto;
}

.plaz-admin-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.plaz-admin-controls input,
.plaz-admin-controls select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 7px 9px;
}

.plaz-admin-table {
  min-width: 1180px;
}

.plaz-admin-table td {
  vertical-align: top;
}

.plaz-admin-title {
  display: grid;
  gap: 3px;
  min-width: 0;
  max-width: 320px;
}

.plaz-admin-title span,
.plaz-admin-detail p,
.plaz-admin-detail dd {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.plaz-admin-thumb {
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.plaz-admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plaz-admin-table audio {
  width: 170px;
  max-width: 100%;
}

.admin-inline-detail-row > td {
  padding: 10px 12px 14px;
  background: rgba(248, 252, 255, 0.92);
  border-top: 0;
}

.admin-inline-detail-row .plaz-admin-detail {
  margin: 0;
  box-shadow: none;
}

.plaz-admin-detail {
  display: grid;
  gap: 14px;
}

.plaz-admin-detail dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
}

.plaz-admin-detail dd {
  margin: 2px 0 0;
  color: #0f172a;
  font-weight: 700;
}

.plaz-admin-detail section {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}

.plaz-admin-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.plaz-admin-audio {
  display: grid;
  gap: 6px;
  grid-column: span 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.plaz-admin-audio audio {
  width: 100%;
}

.plaz-risk {
  border: 1px solid rgba(180, 83, 9, 0.24);
  border-radius: 8px;
  background: #fff7ed;
  color: #92400e;
  font-size: 13px;
  font-weight: 800;
  padding: 9px;
}

.plaz-admin-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.device-admin-form,
.admin-device-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-device-list,
.usage-record-list {
  display: grid;
  gap: 10px;
}

.admin-device-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 12px;
}

.admin-device-row.is-disabled {
  opacity: 0.62;
}

.admin-device-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #edf2f4;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-check input {
  width: auto;
}

.admin-device-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.usage-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 12px;
}

.usage-record strong,
.usage-record span {
  display: block;
}

.usage-record span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.user-list {
  display: grid;
  gap: 10px;
}

.user-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.user-section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.user-section-title {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.user-basic-section {
  border-top: 0;
  padding-top: 0;
}

.user-actions-section {
  grid-column: 1 / -1;
}

.user-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.user-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.user-basic-section > span,
.user-basic-section > small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.user-basic-section > small {
  color: var(--gold);
}

.system-permissions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.system-permissions label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.system-permissions input {
  width: auto;
}

.admin-permission-note {
  display: grid;
  gap: 8px;
  padding: 14px;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(23, 107, 87, 0.08), rgba(36, 99, 150, 0.06)),
    #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-permission-note strong {
  color: var(--green);
  font-size: 15px;
}

.admin-permission-note span {
  line-height: 1.65;
}

.user-section-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.zone-password-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.zone-password-line strong {
  color: var(--gold);
}

.user-avatar-select {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.user-avatar-select span {
  font-size: 12px;
  font-weight: 800;
}

.user-avatar-select select {
  min-height: 34px;
  padding: 6px 9px;
}

.user-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.user-edit-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.user-edit-grid span {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.user-edit-grid input {
  min-height: 34px;
  padding: 6px 9px;
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.people-management {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.people-stats {
  display: grid;
  gap: 10px;
}

.people-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.people-stats article,
.people-module-stat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 12px;
}

.people-stats strong {
  display: block;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}

.people-stats span {
  color: var(--muted);
  font-size: 12px;
}

.people-module-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.people-module-stat-head {
  flex: 0 0 auto;
  min-width: 120px;
}

.people-module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.people-module-chips span {
  border-radius: 999px;
  background: #edf7f3;
  color: var(--green);
  font-weight: 800;
  padding: 4px 8px;
}

.people-controls,
.people-batch-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.people-controls label,
.people-batch-form label,
.people-permission-batch label,
.people-detail-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.people-controls input,
.people-controls select,
.people-batch-form input,
.people-batch-form select,
.people-permission-batch select,
.people-detail-form input,
.people-detail-form select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 7px 9px;
}

.people-bulk-bar,
.people-batch-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(23, 107, 87, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(237, 247, 243, 0.92), rgba(248, 252, 255, 0.94));
  padding: 12px;
}

.people-bulk-bar.is-idle {
  border-color: var(--line);
  background: #fbfcfc;
}

.people-bulk-bar strong,
.people-bulk-bar span {
  display: block;
}

.people-bulk-bar span,
.people-batch-panel p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
}

.people-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.people-batch-panel {
  display: grid;
  align-items: stretch;
}

.people-batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.people-batch-head span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.people-batch-head h4 {
  margin: 2px 0 0;
}

.people-permission-batch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.people-template-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
}

.people-template-editor[hidden] {
  display: none;
}

.people-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.people-workspace.has-detail {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  align-items: start;
}

.people-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.people-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.people-table th,
.people-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.people-table th {
  position: relative;
  background: #f0f5f3;
  color: #263330;
  font-size: 12px;
  font-weight: 900;
  user-select: none;
}

.people-table th:not(.is-checkbox-column) {
  padding-right: 18px;
}

.people-column-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 2;
  width: 9px;
  border: 0;
  background: transparent;
  cursor: col-resize;
  padding: 0;
  touch-action: none;
}

.people-column-resizer::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 4px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.people-column-resizer:hover::before,
.people-column-resizer:focus-visible::before {
  background: #2d78d9;
}

.people-column-resizer:focus-visible {
  outline: 2px solid rgba(45, 120, 217, 0.28);
  outline-offset: -2px;
}

body.is-resizing-people-column,
body.is-resizing-people-column * {
  cursor: col-resize !important;
  user-select: none !important;
}

.people-table tr.is-selected td {
  background: #f0fdf4;
}

.people-table tr:last-child td {
  border-bottom: 0;
}

.people-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.people-identity .avatar,
.people-detail-avatar .avatar {
  flex: 0 0 auto;
}

.people-identity strong,
.people-identity span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.people-identity span {
  color: var(--muted);
  font-size: 12px;
}

.people-account-request-badge {
  display: inline-flex !important;
  width: max-content;
  margin-top: 4px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309 !important;
  font-size: 11px !important;
  font-weight: 900;
  padding: 2px 7px;
}

.people-profile-summary {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.people-profile-summary span {
  display: block;
  overflow-wrap: anywhere;
}

.people-profile-summary strong {
  color: #375066;
  margin-right: 5px;
}

.people-profile-empty {
  color: var(--muted);
  font-size: 12px;
}

.people-badge,
.permission-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #eef2f7;
  color: #375066;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.people-badge.is-good,
.permission-chip {
  background: #edf7f3;
  color: var(--green);
}

.people-badge.is-danger {
  background: #fef2f2;
  color: #b91c1c;
}

.people-badge.is-warn {
  background: #fff7ed;
  color: #b45309;
}

.permission-chip.is-admin {
  background: #eff6ff;
  color: var(--blue);
}

.permission-chip.is-muted {
  color: var(--muted);
  background: #f1f5f9;
}

.permission-chip.permission-treehole {
  background: #dcfce7;
  color: #166534;
}

.people-permission-chips,
.people-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.people-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
}

.people-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.people-pagination select {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
}

.people-detail-panel {
  position: sticky;
  top: 78px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(23, 107, 87, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}

.people-inline-detail-row {
  display: none;
}

.people-detail-head,
.people-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.people-detail-head span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.people-detail-head h4 {
  margin: 2px 0 0;
}

.people-detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.people-detail-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #375066;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.people-detail-tabs button.is-active {
  border-color: rgba(52, 127, 224, 0.42);
  background: #eff6ff;
  color: var(--blue);
}

.people-detail-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}

.people-detail-scroll {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.people-detail-form section {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.people-detail-form section[hidden] {
  display: none;
}

.people-detail-scroll section:first-child {
  border-top: 0;
  padding-top: 0;
}

.people-detail-scroll section[hidden] + section:not([hidden]) {
  border-top: 0;
  padding-top: 0;
}

.people-detail-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.people-detail-avatar strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.people-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.people-profile-fields label:first-child {
  grid-column: 1 / -1;
}

.account-request-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid rgba(180, 83, 9, 0.2);
  border-radius: 8px;
  background: #fff7ed;
  padding: 10px;
}

.account-request-panel > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.account-request-panel strong {
  color: #92400e;
}

.account-request-panel span {
  color: #b45309;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.people-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #f0fdf4;
  padding: 9px;
}

.people-check input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}

.people-check-neutral {
  background: #eef5ff;
  border: 1px solid rgba(96, 165, 250, 0.28);
}

.additional-permission-groups {
  display: grid;
  gap: 8px;
}

.additional-permission-groups > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.additional-permission-groups .people-check span {
  display: grid;
  gap: 3px;
}

.additional-permission-groups .people-check strong {
  color: #102a43;
  font-size: 13px;
}

.additional-permission-groups .people-check small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.detail-permissions {
  grid-template-columns: 1fr;
}

.people-detail-form .detail-permissions label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  color: #102a43;
  font-size: 13px;
  line-height: 1.35;
}

.people-detail-form .detail-permissions input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}

.permission-category-list {
  gap: 8px;
}

.permission-category-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.permission-category-option strong {
  color: #102a43;
  font-size: 13px;
}

.permission-category-option small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.permission-category-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.permission-category-divider::before,
.permission-category-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--line);
}

.module-password-list {
  display: grid;
  gap: 8px;
}

.module-password-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 9px;
}

.module-password-list strong,
.module-password-list span {
  display: block;
}

.module-password-list span {
  color: var(--muted);
  font-size: 12px;
}

.danger {
  color: #b91c1c !important;
}

.plaz-module-host,
.plaz-module-host * {
  box-sizing: border-box;
}

.plaz-module {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(52, 127, 224, 0.2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(72, 166, 255, 0.24), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(42, 90, 210, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(236, 247, 255, 0.96), rgba(246, 250, 255, 0.86));
  box-shadow: 0 22px 64px rgba(36, 95, 156, 0.14);
}

.plaz-module::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(36, 95, 156, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 95, 156, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 30% 22%, rgba(53, 168, 182, 0.22), transparent 12%),
    radial-gradient(circle at 80% 70%, rgba(36, 95, 156, 0.18), transparent 16%);
  background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100%;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 80%);
  opacity: 0.78;
  animation: plaza-grid-drift 22s linear infinite;
}

.plaz-module > * {
  position: relative;
  z-index: 1;
}

.plaz-hero,
.plaz-toolbar,
.plaz-composer,
.plaz-detail,
.plaz-post,
.plaz-skeleton {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.plaz-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(8, 31, 70, 0.98), rgba(31, 94, 177, 0.94)),
    radial-gradient(circle at 16% 0%, rgba(122, 221, 255, 0.34), transparent 28%);
  border-color: rgba(132, 199, 255, 0.36);
  color: #fff;
  box-shadow: 0 24px 58px rgba(28, 83, 166, 0.26);
}

.plaz-hero h2 {
  margin: 4px 0;
  font-size: 30px;
}

.plaz-hero .eyebrow {
  color: #8ee7ff;
}

.plaz-hero p,
.plaz-guideline,
.plaz-attach-empty,
.plaz-processing-note {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.plaz-guideline,
.plaz-attach-empty {
  font-size: 14px;
}

.plaz-processing-note {
  padding: 10px 12px;
  color: #1e62ad;
  background: rgba(36, 95, 156, 0.08);
  border: 1px dashed rgba(36, 95, 156, 0.24);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.plaz-hero p {
  color: rgba(236, 248, 255, 0.82);
}

.plaz-hero .primary-button {
  color: #164c9a;
  background: linear-gradient(135deg, #ffffff, #dff4ff);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.plaz-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(52, 127, 224, 0.18);
}

.plaz-toolbar label,
.plaz-form label,
.plaz-drawing-tools label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.plaz-toolbar input,
.plaz-toolbar select,
.plaz-form input,
.plaz-form textarea,
.plaz-form select {
  width: 100%;
}

.plaz-filter-row,
.plaz-actions,
.plaz-comment-actions,
.plaz-attach-row,
.plaz-form-actions,
.plaz-tags,
.plaz-drawing-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plaz-filter-row button,
.plaz-actions button,
.plaz-comment-actions button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(52, 127, 224, 0.18);
  border-radius: 8px;
  font-weight: 800;
}

.plaz-filter-row button.is-active,
.plaz-actions button.is-active,
.plaz-comment-actions button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #1e62ad, #2d88da);
  border-color: var(--blue);
}

.plaz-composer,
.plaz-detail {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(52, 127, 224, 0.18);
}

.plaz-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plaz-card-title {
  min-width: 190px;
}

.plaz-card-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
}

.plaz-card-head span {
  color: #1e73c9;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.plaz-card-head h3 {
  margin: 3px 0 0;
  font-size: 20px;
}

.plaz-form {
  display: grid;
  gap: 12px;
}

.plaz-form-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
}

.plaz-meta-grid {
  grid-template-columns: 112px minmax(180px, 260px);
  gap: 8px;
  align-items: end;
}

.plaz-meta-grid label {
  gap: 4px;
}

.plaz-meta-grid label > span {
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
}

.plaz-meta-grid input,
.plaz-meta-grid select {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.plaz-attach-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: visible;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.plaz-attach-row::-webkit-scrollbar {
  display: none;
}

.plaz-attach-row > .secondary-button,
.plaz-attach-row > .file-pill {
  justify-content: center;
  width: auto;
  min-width: 112px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.plaz-attach-row > .plaz-emoji-toggle {
  order: 0;
  flex: 0 0 auto;
  min-width: 34px;
  width: 34px;
  min-height: 32px;
  border-radius: 999px;
}

.plaz-attach-row > .file-pill {
  color: #1e62ad;
  border-color: rgba(52, 127, 224, 0.18);
}

.plaz-composer-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  margin-top: -4px;
}

.plaz-composer-emoji-row .plaz-emoji-picker {
  flex: 1 1 260px;
  max-width: 420px;
}

.plaz-location-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 16px;
}

.plaz-location-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgba(15, 23, 42, 0.34);
  border: 0;
  border-radius: 0;
}

.plaz-location-picker {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: min(920px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(52, 127, 224, 0.16);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
}

.plaz-location-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.plaz-location-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.plaz-location-head strong {
  color: var(--ink);
  font-size: 14px;
}

.plaz-location-head span,
.plaz-location-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plaz-location-input {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.plaz-location-results {
  display: grid;
  gap: 6px;
  max-height: 150px;
  overflow: auto;
  padding: 2px;
}

.plaz-location-results.is-empty {
  display: none;
}

.plaz-location-results button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--ink);
  text-align: left;
  background: rgba(248, 251, 255, 0.96);
  border: 1px solid rgba(52, 127, 224, 0.16);
  border-radius: 8px;
}

.plaz-location-results button:active {
  background: rgba(232, 243, 255, 0.98);
}

.plaz-location-results strong {
  font-size: 13px;
  line-height: 1.25;
}

.plaz-location-results span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.plaz-location-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  align-items: center;
}

.plaz-location-controls .strong {
  color: #fff;
  background: linear-gradient(135deg, #1e62ad, #2d88da);
  border-color: var(--blue);
}

.plaz-map-shell {
  display: grid;
  gap: 8px;
}

.plaz-map-canvas {
  position: relative;
  height: min(58vh, 520px);
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(226, 232, 240, 0.8), rgba(241, 245, 249, 0.92));
  border: 1px solid rgba(52, 127, 224, 0.2);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
}

.plaz-map-canvas.is-dragging {
  cursor: grabbing;
}

.plaz-map-canvas.is-amap {
  background: #eef3f8;
  cursor: default;
}

.plaz-map-canvas.is-amap .plaz-map-hint {
  pointer-events: none;
}

.plaz-amap-notice {
  position: absolute;
  z-index: 20;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 9px 10px;
  color: #1e3a5f;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(52, 127, 224, 0.22);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  pointer-events: none;
}

.plaz-amap-notice.is-error {
  color: #8a1f1f;
  border-color: rgba(220, 38, 38, 0.26);
}

.plaz-map-layer {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform;
}

.plaz-map-layer img {
  position: absolute;
  width: 256px;
  height: 256px;
  object-fit: contain;
  transform: translateZ(0);
  user-select: none;
  pointer-events: none;
}

.plaz-map-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  background:
    linear-gradient(rgba(30, 98, 173, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 98, 173, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
}

.plaz-map-marker {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  background: linear-gradient(135deg, #1e62ad, #2d88da);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
  transform: translate(-50%, -100%) rotate(-45deg);
}

.plaz-map-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.plaz-map-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  padding: 6px 10px;
  color: #1e62ad;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(52, 127, 224, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.plaz-map-actions {
  display: none;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.plaz-map-actions .mini-button {
  min-width: 0;
  min-height: 30px;
  padding: 0 4px;
  font-size: 11px;
  white-space: nowrap;
}

.plaz-location-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  color: #1e62ad;
  text-decoration: none;
  background: rgba(236, 247, 255, 0.9);
  border: 1px solid rgba(52, 127, 224, 0.18);
  border-radius: 8px;
}

.plaz-location-link:hover {
  background: rgba(223, 244, 255, 0.98);
  border-color: rgba(52, 127, 224, 0.32);
}

.plaz-location-pin {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: linear-gradient(135deg, #1e62ad, #2d88da);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.plaz-location-link span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.plaz-location-link strong,
.plaz-location-link small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plaz-location-link strong {
  color: inherit;
  font-size: 13px;
}

.plaz-location-link small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.plaz-attach-preview,
.plaz-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.plaz-thumb,
.plaz-media-grid button {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: #f7fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
}

.plaz-thumb img,
.plaz-media-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plaz-thumb span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  color: #fff;
  background: rgba(8, 24, 34, 0.68);
  border-radius: 8px;
  font-size: 12px;
}

.plaz-audio-preview,
.plaz-audio-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: #f7fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.plaz-audio-preview {
  grid-column: 1 / -1;
  width: 100%;
}

.plaz-audio-preview audio,
.plaz-audio-card audio {
  width: 100%;
}

.plaz-audio-preview .audio-edit-panel {
  width: 100%;
}

.plaz-drawing-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #f7fbfa;
  border: 1px dashed rgba(23, 107, 87, 0.28);
  border-radius: 8px;
}

.plaz-drawing-tools {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.plaz-drawing-tools::-webkit-scrollbar {
  display: none;
}

.plaz-drawing-tools button,
.plaz-drawing-tools label {
  flex: 0 0 auto;
  min-height: 32px;
}

.plaz-drawing-tools button {
  min-width: 58px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.plaz-drawing-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: auto;
  padding: 0 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(52, 127, 224, 0.18);
  border-radius: 999px;
  font-size: 12px;
}

.plaz-drawing-tools input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 2px;
}

.plaz-drawing-tools input[type="range"] {
  width: 86px;
}

#plazCanvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  touch-action: none;
}

.plaz-feed {
  display: grid;
  gap: 14px;
  width: min(980px, 100%);
  margin: 0 auto;
}

.plaz-post {
  display: grid;
  gap: 12px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.92));
  border-color: rgba(52, 127, 224, 0.17);
  box-shadow: 0 16px 42px rgba(36, 95, 156, 0.12);
}

.plaz-post-head,
.plaz-comment-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.plaz-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #33b7e6, #245fbc);
  border-radius: 14px;
  font-weight: 900;
}

.plaz-avatar.avatar-generated {
  color: #16304c;
  box-shadow: inset 0 0 0 1px rgba(36, 95, 188, 0.18);
}

.plaz-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.plaz-post-head div,
.plaz-comment-main div,
.plaz-comment-preview-item > div {
  flex: 1 1 auto;
  min-width: 0;
}

.plaz-post-head strong,
.plaz-comment-main strong {
  display: block;
  font-size: 15px;
}

.plaz-post-head span,
.plaz-comment-main span,
.plaz-status {
  color: var(--muted);
  font-size: 12px;
}

.plaz-post h3 {
  margin: 0;
  font-size: 20px;
}

.plaz-excerpt,
.plaz-detail-body p,
.plaz-comment p {
  margin: 0;
  color: var(--ink);
  line-height: 1.72;
  overflow-wrap: anywhere;
}

.plaz-comment-content {
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.plaz-comment-content:hover {
  background: rgba(36, 95, 156, 0.06);
}

.plaz-comment-content:focus-visible {
  outline: 2px solid rgba(16, 116, 102, 0.35);
  outline-offset: 2px;
}

.plaz-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.plaz-tags span {
  padding: 4px 8px;
  color: #1e62ad;
  background: rgba(36, 95, 156, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.plaz-comments,
.plaz-replies,
.plaz-comment-preview {
  display: grid;
  gap: 10px;
}

.plaz-comment-preview {
  padding: 10px;
  border: 1px solid rgba(52, 127, 224, 0.14);
  border-radius: 10px;
  background: rgba(247, 251, 255, 0.72);
}

.plaz-comment-preview-item {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 9px;
}

.plaz-comment-preview-item .plaz-avatar {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 12px;
}

.plaz-comment-preview-item strong {
  display: inline;
  margin-right: 6px;
  font-size: 13px;
}

.plaz-comment-preview-item strong .adaptive-display-name {
  display: inline;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.plaz-comment-preview-item span {
  color: var(--muted);
  font-size: 12px;
}

.plaz-comment-preview-item p {
  margin: 2px 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.plaz-comment {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px 72px 12px 12px;
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.plaz-comment > .plaz-comment-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
  overflow: visible;
  padding: 0;
}

.plaz-comment > .plaz-comment-actions button {
  width: auto;
  min-width: 0;
}

.plaz-comment.is-replying {
  z-index: 46;
  background: #fff;
  box-shadow: 0 18px 42px rgba(13, 38, 64, 0.18);
}

.plaz-submit-mask {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  color: var(--green);
  text-align: center;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(8px);
  border-radius: inherit;
}

.plaz-submit-mask::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 4px solid rgba(23, 107, 87, 0.16);
  border-top-color: var(--green);
  border-radius: 999px;
  animation: upload-spin 0.9s linear infinite;
}

.plaz-submit-mask strong {
  color: var(--ink);
  font-size: 18px;
}

.plaz-submit-mask span {
  color: var(--muted);
  font-size: 13px;
}

.plaz-reply-mask {
  position: fixed;
  inset: 0;
  z-index: 45;
  padding: 0;
  background: rgba(8, 24, 34, 0.28);
  border: 0;
  border-radius: 0;
  cursor: default;
}

.plaz-comment.is-reply,
.plaz-replies {
  margin-left: 42px;
}

.plaz-comment-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.plaz-comment-form input {
  order: 1;
  min-width: 0;
}

.plaz-emoji-toggle {
  order: 2;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  color: #245fbc;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}

.plaz-comment-form > .primary-button {
  order: 3;
}

.plaz-emoji-picker {
  order: 4;
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(52, 127, 224, 0.18);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(36, 95, 156, 0.14);
}

.plaz-comment-form.is-emoji-open .plaz-emoji-picker,
.plaz-composer-emoji-row.is-emoji-open .plaz-emoji-picker {
  display: grid;
}

.plaz-emoji-picker button {
  min-height: 34px;
  padding: 0;
  background: #f8fbfa;
  border: 1px solid rgba(52, 127, 224, 0.14);
  border-radius: 8px;
  font-size: 19px;
  line-height: 1;
}

.plaz-comment-form.reply.inline {
  margin-left: 52px;
  max-width: calc(100% - 52px);
  padding: 8px;
  background: #f3f6fa;
  border: 1px solid rgba(52, 127, 224, 0.14);
  border-radius: 8px;
}

.plaz-skeleton {
  color: var(--muted);
  padding: 20px;
}

.plaz-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 18px;
  background: rgba(8, 24, 34, 0.72);
}

.plaz-lightbox img {
  max-width: min(94vw, 980px);
  max-height: 82vh;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.plaz-lightbox button {
  min-height: 38px;
  padding: 0 14px;
  color: var(--blue);
  background: #fff;
  border-radius: 8px;
}

@media (max-width: 980px) {
  .auth-screen,
  .system-grid,
  .device-grid,
  .digital-layout,
  .admin-summary,
  .calorie-summary-grid,
  .calorie-main-grid,
  .calorie-bottom-grid,
  .calorie-redo-overview,
  .calorie-redo-grid.two,
  .calorie-redo-grid.trend,
  .calorie-redo-form.settings,
  .device-admin-form,
  .admin-device-fields,
  .usage-record {
    grid-template-columns: 1fr;
  }

  .plaz-toolbar,
  .plaz-form-grid {
    grid-template-columns: 1fr;
  }

  .calorie-redo-quick-list,
  .calorie-redo-recommend-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tech-backdrop {
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }

  .user-row {
    grid-template-columns: 1fr;
  }

  .system-permissions {
    grid-template-columns: 1fr;
  }

  .people-controls,
  .people-batch-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-controls .people-search,
  .people-controls [data-reset-people-filters],
  .people-workspace.has-detail {
    grid-column: 1 / -1;
  }

  .people-workspace.has-detail {
    grid-template-columns: 1fr;
  }

  .people-detail-panel {
    position: static;
  }

  .admin-device-row {
    grid-template-columns: 1fr;
  }

  .user-actions {
    justify-content: flex-start;
  }
}

@keyframes grid-drift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 84px 84px, 84px 84px;
  }
}

@keyframes scan-sweep {
  0%,
  28% {
    transform: translateY(-100%);
  }
  72%,
  100% {
    transform: translateY(100%);
  }
}

@keyframes signal-flow {
  0%,
  100% {
    opacity: 0.2;
    transform: scaleX(0.45);
  }
  50% {
    opacity: 0.9;
    transform: scaleX(1);
  }
}

@keyframes reserved-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

@keyframes tree-grid-flow {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 120px 0, 84px 42px, 42px 84px;
  }
}

@keyframes tree-scan-flow {
  0%,
  18% {
    opacity: 0;
    transform: translateX(-70%);
  }
  45% {
    opacity: 0.85;
  }
  82%,
  100% {
    opacity: 0;
    transform: translateX(70%);
  }
}

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

@keyframes plaza-grid-drift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 68px 68px, 68px 68px, 0 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 620px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }

  .topbar.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-110%);
  }

  .app-shell > .topbar.is-hidden {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 0;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .brand {
    width: 100%;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .brand strong {
    font-size: 15px;
  }

  .brand span {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  .user-chip {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    padding-right: 10px;
  }

  .top-actions .secondary-button,
  .top-actions .module-select {
    width: 100%;
    min-width: 0;
  }

  .top-actions .compact {
    padding-right: 8px;
    padding-left: 8px;
  }

  body.mobile-app-mode .topbar {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 8px);
    right: 8px;
    left: 8px;
    z-index: 90;
    min-height: 0;
    max-height: calc(100dvh - env(safe-area-inset-top) - 18px);
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(217, 224, 221, 0.9);
    border-radius: 12px;
    box-shadow: 0 18px 52px rgba(20, 34, 32, 0.18);
  }

  body.mobile-app-mode .topbar.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-100% - 18px));
  }

  body.mobile-app-mode .brand {
    padding-right: 68px;
  }

  body.mobile-app-mode .brand-mark {
    width: 28px;
    height: 28px;
  }

  body.mobile-app-mode .brand strong {
    font-size: 13px;
  }

  body.mobile-app-mode .brand span {
    display: none;
  }

  body.mobile-app-mode.mobile-topbar-open .profile-panel:not([hidden]) {
    position: fixed;
    top: var(--mobile-profile-panel-top, calc(env(safe-area-inset-top) + 152px));
    right: 10px;
    left: 10px;
    z-index: 19;
    max-height: calc(100dvh - var(--mobile-profile-panel-top, 152px) - 10px);
    overflow: auto;
    margin: 0;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(20, 34, 32, 0.16);
    overscroll-behavior: contain;
  }

  body.mobile-app-mode .top-actions {
    gap: 6px;
  }

  body.mobile-app-mode .top-actions .secondary-button,
  body.mobile-app-mode .top-actions .module-select,
  body.mobile-app-mode .user-chip {
    min-height: 32px;
    font-size: 12px;
  }

  body.mobile-app-mode .mobile-topbar-toggle {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 78px);
    left: -12px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 54px;
    padding: 0;
    border: 1px solid rgba(30, 98, 173, 0.18);
    border-left: 0;
    border-radius: 0 18px 18px 0;
    color: #1e62ad;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
      0 8px 22px rgba(20, 34, 32, 0.1),
      inset 0 -1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    opacity: 0.52;
    transition:
      left 0.18s ease,
      opacity 0.18s ease,
      background 0.18s ease;
  }

  body.mobile-topbar-open .mobile-topbar-toggle {
    left: 8px;
    border: 1px solid rgba(23, 107, 87, 0.16);
    border-radius: 999px;
    color: var(--green);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(20, 34, 32, 0.16);
    opacity: 1;
  }

  .app-main,
  .auth-screen {
    padding: 12px;
  }

  .system-switcher .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .plaz-shortcut {
    justify-self: end;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
  }

  .plaz-shortcut span {
    width: 28px;
    height: 28px;
  }

  .plaz-shortcut strong {
    display: none;
  }

  .plaz-module {
    gap: 8px;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(36, 95, 156, 0.1);
  }

  .plaz-hero,
  .plaz-card-head {
    align-items: stretch;
  }

  .plaz-card-head {
    flex-direction: column;
  }

  .plaz-card-title {
    min-width: 0;
  }

  .plaz-card-controls {
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0;
  }

  .plaz-meta-grid {
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .plaz-hero {
    gap: 10px;
    padding: 10px 12px;
  }

  .plaz-hero p {
    display: none;
  }

  .plaz-hero h2 {
    margin: 0;
    font-size: 18px;
  }

  .plaz-hero .eyebrow {
    display: none;
  }

  .plaz-hero .primary-button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 14px;
  }

  .plaz-toolbar {
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 8px;
    padding: 8px;
    box-shadow: none;
  }

  .plaz-toolbar label {
    gap: 0;
  }

  .plaz-toolbar label > span {
    display: none;
  }

  .plaz-toolbar input,
  .plaz-toolbar select {
    min-height: 34px;
    border-radius: 8px;
    font-size: 13px;
    padding: 6px 9px;
  }

  .plaz-drawing-tools {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-right: -2px;
    margin-left: -2px;
    padding-inline: 2px;
  }

  .plaz-attach-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -2px;
    margin-left: -2px;
    padding-inline: 2px;
  }

  .plaz-attach-row > .secondary-button,
  .plaz-attach-row > .file-pill {
    min-width: 88px;
    min-height: 30px;
    padding: 0 4px;
    font-size: 11px;
  }

  .plaz-attach-row > .plaz-emoji-toggle {
    min-width: 32px;
    width: 32px;
    min-height: 30px;
  }

  .plaz-location-overlay {
    place-items: end center;
    padding: 10px;
  }

  .plaz-location-picker {
    width: 100%;
    max-height: min(88vh, 720px);
    border-radius: 12px 12px 8px 8px;
  }

  .plaz-map-canvas {
    height: min(52vh, 420px);
  }

  .plaz-map-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plaz-guideline,
  .plaz-attach-empty {
    font-size: 13px;
    line-height: 1.5;
  }

  .plaz-location-head {
    align-items: flex-start;
    gap: 3px;
  }

  .plaz-location-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .plaz-location-link {
    width: 100%;
  }

  .plaz-location-controls button {
    width: 100%;
  }

  .plaz-drawing-tools button {
    min-width: 52px;
    min-height: 30px;
    padding: 0 7px;
    font-size: 11px;
  }

  .plaz-drawing-tools label {
    min-height: 30px;
    padding: 0 7px;
    font-size: 11px;
  }

  .plaz-drawing-tools input[type="range"] {
    width: 72px;
  }

  .plaz-actions,
  .plaz-comment-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .plaz-actions::-webkit-scrollbar,
  .plaz-comment-actions::-webkit-scrollbar {
    display: none;
  }

  .plaz-actions button,
  .plaz-comment-actions button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 28px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .plaz-comment > .plaz-comment-actions button {
    flex: 0 0 auto;
    min-width: 0;
  }

  .plaz-actions.is-admin-actions {
    gap: 3px;
  }

  .plaz-actions.is-admin-actions button {
    min-height: 27px;
    padding: 0 1px;
    font-size: 9px;
    letter-spacing: 0;
  }

  .plaz-actions.is-admin-actions [data-open-detail] {
    flex-grow: 1.12;
  }

  .plaz-actions.is-admin-actions [data-report-post],
  .plaz-actions.is-admin-actions [data-delete-post],
  .plaz-actions.is-admin-actions [data-hide-post] {
    flex-grow: 0.82;
  }

  .plaz-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 0 0 2px;
    scrollbar-width: none;
  }

  .plaz-filter-row::-webkit-scrollbar {
    display: none;
  }

  .plaz-filter-row button {
    flex: 0 0 auto;
    min-width: 62px;
    min-height: 30px;
    border-radius: 8px;
    font-size: 13px;
    padding: 0 10px;
  }

  .plaz-attach-preview,
  .plaz-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plaz-feed {
    gap: 8px;
  }

  .plaz-post {
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(36, 95, 156, 0.08);
  }

  .plaz-post-head,
  .plaz-comment-main {
    gap: 8px;
  }

  .plaz-avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 13px;
  }

  .plaz-post-head strong,
  .plaz-comment-main strong {
    font-size: 14px;
  }

  .plaz-post-head span,
  .plaz-comment-main span,
  .plaz-status {
    font-size: 11px;
  }

  .plaz-post h3 {
    font-size: 17px;
    line-height: 1.35;
  }

  .plaz-excerpt,
  .plaz-detail-body p,
  .plaz-comment p {
    font-size: 14px;
    line-height: 1.55;
  }

  .plaz-excerpt {
    -webkit-line-clamp: 3;
  }

  .plaz-tags {
    gap: 5px;
  }

  .plaz-tags span {
    padding: 3px 7px;
    font-size: 11px;
  }

  .plaz-comment-preview {
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    background: #f3f6fa;
  }

  .plaz-comment-preview-item {
    display: block;
    padding: 0;
  }

  .plaz-comment-preview-item .plaz-avatar {
    display: none;
  }

  .plaz-comment-preview-item strong {
    display: inline;
    margin-right: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
  }

  .plaz-comment-preview-item strong .adaptive-display-name {
    display: inline;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .plaz-comment-preview-item strong::after {
    content: "：";
  }

  .plaz-comment-preview-item span {
    display: none;
  }

  .plaz-comment-preview-item p {
    display: inline;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
  }

  .plaz-composer,
  .plaz-detail {
    gap: 10px;
    padding: 10px;
    box-shadow: none;
  }

  .plaz-card-head h3 {
    font-size: 17px;
  }

  .plaz-card-head span {
    font-size: 11px;
  }

  .plaz-comment-form {
    grid-template-columns: minmax(0, 1fr) 32px auto;
    gap: 6px;
  }

  .plaz-comment-form input {
    min-height: 34px;
    font-size: 13px;
  }

  .plaz-emoji-toggle {
    min-width: 32px;
    min-height: 34px;
    border-radius: 7px;
    font-size: 16px;
  }

  .plaz-emoji-picker {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
  }

  .plaz-composer-emoji-row .plaz-emoji-picker {
    flex-basis: 100%;
    max-width: none;
  }

  .plaz-emoji-picker button {
    min-height: 30px;
    border-radius: 7px;
    font-size: 17px;
  }

  .plaz-comment-form.reply.inline {
    grid-template-columns: minmax(0, 1fr) 30px 58px;
    align-items: center;
    gap: 6px;
    margin-left: 34px;
    max-width: calc(100% - 34px);
    padding: 6px;
    border-radius: 8px;
  }

  .plaz-comment-form.reply.inline input {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .plaz-comment-form.reply.inline button {
    min-height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 12px;
  }

  .plaz-comment-form.reply.inline .plaz-emoji-toggle {
    min-width: 30px;
    padding: 0;
    font-size: 15px;
  }

  .plaz-comment-form.reply.inline .plaz-emoji-picker button {
    min-height: 30px;
    padding: 0;
    font-size: 17px;
  }

  .plaz-comment {
    gap: 6px;
    padding: 8px 64px 8px 8px;
    border-radius: 8px;
  }

  .plaz-comment.is-reply,
  .plaz-replies {
    margin-left: 0;
  }

  .plaz-comment.is-reply {
    padding: 7px 58px 7px 7px;
    background: #f3f6fa;
  }

  .plaz-comment.is-replying {
    background: #fff;
    box-shadow: 0 14px 34px rgba(13, 38, 64, 0.2);
  }

  .plaz-reply-mask {
    background: rgba(8, 24, 34, 0.34);
  }

  .plaz-comment.is-reply .plaz-avatar {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 10px;
  }

  .plaz-comment.is-reply .plaz-comment-main strong {
    display: inline;
    margin-right: 5px;
    font-size: 12px;
  }

  .plaz-comment.is-reply .plaz-comment-main span {
    font-size: 10px;
  }

  .plaz-comment-content {
    padding: 1px 0;
  }

  .plaz-comment.is-reply p {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
  }

  .plaz-comment.is-reply .plaz-comment-form.reply.inline {
    margin-left: 30px;
    max-width: calc(100% - 30px);
    padding: 5px;
  }

  @media (max-width: 380px) {
    .plaz-actions.is-admin-actions {
      gap: 2px;
    }

    .plaz-actions.is-admin-actions button {
      min-height: 26px;
      font-size: 8.5px;
    }
  }

  .calorie-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .calorie-hero h2 {
    font-size: 24px;
  }

  .calorie-hero-tools,
  .calorie-form,
  .calorie-two,
  .calorie-progress-card,
  .calorie-mini-grid {
    grid-template-columns: 1fr;
  }

  .calorie-card {
    padding: 14px;
  }

  .calorie-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .calorie-redo-hero,
  .calorie-redo-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .calorie-redo-analysis-head,
  .calorie-redo-goal-head {
    align-items: center;
    flex-direction: row;
  }

  .calorie-redo-food-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .calorie-redo-food-actions .calorie-redo-food-tool {
    flex: 1 1 0;
    min-width: 0;
  }

  .calorie-redo-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .calorie-redo-hero-main {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 12px;
  }

  .calorie-redo-hero p {
    max-width: 24em;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 6px;
  }

  .calorie-redo-hero-progress {
    justify-self: end;
    width: 88px;
    height: 88px;
  }

  .calorie-redo-hero-progress strong {
    font-size: 25px;
  }

  .calorie-redo-hero-progress span {
    font-size: 11px;
  }

  .calorie-redo-toolbar,
  .calorie-redo-progress,
  .calorie-redo-form,
  .calorie-redo-body-head {
    grid-template-columns: 1fr;
  }

  .calorie-redo-analysis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calorie-redo-body-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .calorie-redo-body-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calorie-redo-body-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calorie-redo-quick-list,
  .calorie-redo-recommend-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calorie-redo-recommend-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .calorie-redo-recommend-summary span {
    text-align: left;
  }

  .calorie-redo-row {
    grid-template-columns: 1fr;
  }

  .calorie-redo-row > div:last-child {
    justify-content: flex-start;
  }

  .calorie-redo-chart {
    min-width: 0;
  }

  .calorie-redo {
    padding-bottom: 88px;
  }

  .calorie-redo-entry-grid,
  .calorie-redo-record-grid,
  .calorie-redo-goal-grid {
    display: contents;
  }

  .calorie-redo[data-calorie-current-tab] [data-calorie-tab-panel] {
    display: none !important;
  }

  .calorie-redo[data-calorie-current-tab="overview"] [data-calorie-tab-panel="overview"],
  .calorie-redo[data-calorie-current-tab="food"] [data-calorie-tab-panel="food"],
  .calorie-redo[data-calorie-current-tab="exercise"] [data-calorie-tab-panel="exercise"],
  .calorie-redo[data-calorie-current-tab="trend"] [data-calorie-tab-panel="trend"],
  .calorie-redo[data-calorie-current-tab="goal"] [data-calorie-tab-panel="goal"] {
    display: block !important;
  }

  .calorie-redo[data-calorie-current-tab="overview"] .calorie-redo-hero[data-calorie-tab-panel="overview"] {
    display: flex !important;
  }

  .calorie-redo[data-calorie-current-tab="overview"] .calorie-redo-overview[data-calorie-tab-panel="overview"],
  .calorie-redo[data-calorie-current-tab="overview"] .calorie-redo-progress[data-calorie-tab-panel="overview"],
  .calorie-redo[data-calorie-current-tab="trend"] .calorie-redo-grid[data-calorie-tab-panel="trend"] {
    display: grid !important;
  }

  .calorie-redo[data-calorie-current-tab="trend"] .calorie-redo-analysis-card[data-calorie-tab-panel="trend"] {
    display: grid !important;
  }

  .calorie-redo-mobile-tabs {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    backdrop-filter: blur(16px);
  }

  .calorie-redo-mobile-tabs button {
    display: grid;
    place-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 3px;
  }

  .calorie-redo-mobile-tabs button span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 12px;
  }

  .calorie-redo-mobile-tabs button span svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  .calorie-redo-mobile-tabs button strong {
    font-size: 12px;
    line-height: 1;
  }

  .calorie-redo-mobile-tabs button.is-active {
    background: linear-gradient(135deg, #dc334d, #f97368);
    color: #fff;
  }

  .calorie-redo-mobile-tabs button.is-active span {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  .calorie-ring {
    justify-self: center;
  }

  .calorie-entry-list article {
    grid-template-columns: 1fr;
  }

  .calorie-chart-svg {
    min-width: 520px;
  }

  .admin-view {
    padding: 12px;
    overflow: hidden;
  }

  .admin-view .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-summary div {
    padding: 10px;
  }

  .admin-summary strong {
    font-size: 22px;
  }

  .admin-panel {
    min-width: 0;
    overflow: hidden;
    padding: 12px;
  }

  .admin-panel .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .mbti-result-card {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .mbti-portrait {
    width: min(100%, 220px);
    margin: 0 auto;
  }

  .mbti-questions {
    grid-template-columns: 1fr;
  }

  .mbti-form {
    padding: 12px;
  }

  .mbti-mode-grid,
  .mbti-analysis-grid,
  .mbti-axis-grid {
    grid-template-columns: 1fr;
  }

  .treehole-admin-tools {
    width: 100%;
  }

  .treehole-admin-tools .secondary-button {
    width: 100%;
  }

  .treehole-music-toggle {
    position: sticky;
    top: 10px;
    z-index: 6;
    width: 50px;
    height: 50px;
    min-height: 50px;
    margin: -4px 0 8px auto;
  }

  .treehole-music-note {
    width: 35px;
    height: 35px;
    font-size: 22px;
  }

  .treehole-music-player,
  .admin-treehole-music-item {
    grid-template-columns: 1fr;
  }

  #treeholeMusicAudio {
    display: block;
  }

  .treehole-music-deck {
    padding: 9px;
  }

  .treehole-music-wave {
    height: 32px;
    gap: 3px;
  }

  .treehole-music-progress-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #treeholeMusicTime {
    min-width: 0;
    text-align: left;
  }

  .treehole-music-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  #treeholeMusicPlayButton {
    display: none;
  }

  .treehole-music-controls .mini-button,
  .treehole-music-upload .primary-button,
  .treehole-music-upload .file-pill {
    width: 100%;
  }

  .treehole-music-upload-name {
    width: 100%;
    max-width: 100%;
  }

  .admin-treehole-history,
  .admin-treehole-music,
  .admin-treehole-music-list,
  .admin-treehole-music-item,
  .admin-treehole-item,
  .admin-treehole-meta,
  .admin-treehole-comments,
  .admin-treehole-comment {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-treehole-item {
    padding: 10px;
    overflow: hidden;
  }

  .admin-treehole-meta strong,
  .admin-treehole-meta span,
  .admin-treehole-meta small,
  .admin-treehole-text,
  .admin-treehole-comment span,
  .admin-treehole-comment p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .admin-treehole-images {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    width: 100%;
    gap: 7px;
  }

  .admin-treehole-thumb {
    width: 100%;
    min-width: 0;
  }

  .admin-treehole-audio {
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: hidden;
  }

  .admin-treehole-comment {
    padding: 8px;
  }

  .admin-treehole-comment.is-reply {
    margin-left: 8px;
  }

  .treehole-view {
    margin: -2px;
    padding: 10px 2px;
    border-radius: 10px;
    gap: 12px;
  }

  .private-mode .app-main {
    padding: 0;
  }

  .private-mode .treehole-view {
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: 12px;
  }

  .treehole-view .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .treehole-view .treehole-head {
    min-height: 132px;
    padding: 18px;
  }

  .treehole-head > div:first-child {
    padding-right: 72px;
  }

  .treehole-head #refreshTreeholeButton {
    right: 14px;
    bottom: 14px;
    min-height: 40px;
    padding: 0 14px;
  }

  .treehole-head .treehole-music-toggle {
    top: 14px;
    right: 14px;
    width: 48px;
    height: 48px;
    min-height: 48px;
  }

  .treehole-head .treehole-music-note {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  .treehole-view .section-head h2 {
    font-size: 22px;
  }

  .treehole-composer,
  .treehole-post,
  .treehole-empty {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .treehole-composer,
  .treehole-post {
    padding: 12px;
  }

  .mood-picker {
    gap: 7px;
  }

  .treehole-mood-row {
    align-items: flex-start;
    gap: 8px;
  }

  .mood-picker span {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .treehole-submit-button {
    min-width: 68px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
  }

  .booking-form,
  .two-col,
  .treehole-comment-form,
  .admin-tabs {
    grid-template-columns: 1fr;
  }

  .treehole-comment-form {
    grid-template-columns: minmax(0, 1fr) 30px minmax(60px, 78px);
    align-items: center;
    gap: 6px;
  }

  .treehole-comment-form input {
    grid-column: auto;
    min-height: 38px;
    font-size: 13px;
  }

  .treehole-comment-emoji-toggle {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
  }

  .treehole-comment-form > .mini-button {
    width: auto;
    min-width: 60px;
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .treehole-comment-emoji-picker {
    grid-column: 1 / -1;
  }

  .treehole-upload-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }

  .treehole-image-tools {
    display: grid;
    grid-template-columns: 34px minmax(64px, 1fr) minmax(64px, 1fr) minmax(82px, 1.05fr);
    align-items: end;
    gap: 6px;
    width: 100%;
  }

  .treehole-audio-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  .treehole-audio-row .secondary-button,
  .treehole-audio-row .file-pill,
  .treehole-upload-row .file-pill {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .treehole-image-tools .treehole-emoji-toggle,
  .treehole-image-tools .file-pill,
  .treehole-image-tools .secondary-button,
  .treehole-image-tools .retention-select select,
  .treehole-audio-row .file-pill,
  .treehole-audio-row .secondary-button {
    min-height: 34px;
    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
  }

  .audio-edit-head,
  .audio-edit-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .audio-trim-grid {
    grid-template-columns: 1fr;
  }

  .treehole-image-tools .treehole-emoji-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 15px;
  }

  .treehole-image-tools .retention-select {
    min-width: 0;
    gap: 2px;
  }

  .treehole-image-tools .retention-select span {
    font-size: 10px;
    line-height: 1;
  }

  .treehole-image-tools .retention-select select {
    width: 100%;
    border-radius: 8px;
  }

  #treeholeImageName,
  #treeholeAudioName {
    grid-column: 1 / -1;
    min-height: 28px;
    padding: 4px 2px 0;
    font-size: 13px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .retention-select select,
  #treeholeAudioPreview,
  .treehole-audio-card audio,
  .admin-treehole-audio audio {
    max-width: 100%;
    min-width: 0;
  }

  .treehole-post-head {
    align-items: center;
  }

  .treehole-avatar {
    align-self: center;
    justify-self: center;
  }

  .treehole-post-head > div {
    min-width: 0;
  }

  .treehole-post-head strong,
  .treehole-post-head span {
    overflow-wrap: anywhere;
  }

  .treehole-mood {
    flex: 0 0 auto;
    font-size: 20px;
  }

  .treehole-images {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 7px;
  }

  .treehole-audio-card,
  .admin-treehole-audio {
    max-width: none;
  }

  .treehole-actions {
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .treehole-actions::-webkit-scrollbar {
    display: none;
  }

  .treehole-actions .mini-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 30px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .treehole-ttl {
    flex: 0 0 auto;
    margin-right: 0;
    font-size: 10px;
    white-space: nowrap;
  }

  .treehole-comments {
    gap: 7px;
  }

  .treehole-comment-card {
    padding: 8px 64px 8px 8px;
  }

  .treehole-comment-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .treehole-comment-card strong {
    font-size: 13px;
  }

  .treehole-comment-card span {
    font-size: 11px;
  }

  .treehole-comment-card p {
    font-size: 13px;
    line-height: 1.55;
  }

  .treehole-comment-actions {
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .treehole-comment-actions::-webkit-scrollbar {
    display: none;
  }

  .treehole-comment-actions .mini-button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }

  .treehole-replies,
  .treehole-comment-card.is-reply {
    margin-left: 24px;
  }

  .treehole-comment-form.reply {
    margin-left: 30px;
    max-width: calc(100% - 30px);
    grid-template-columns: minmax(0, 1fr) 30px minmax(60px, 78px);
    padding: 7px;
  }

  .treehole-comment-form input {
    min-width: 0;
  }

  .user-edit-grid {
    grid-template-columns: 1fr;
  }

  .schedule-panel {
    overflow: visible;
    padding: 12px;
  }

  .schedule-panel .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-tools {
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
  }

  .schedule-tools > span {
    font-size: 12px;
  }

  .schedule-grid {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .week-schedule {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 8px;
  }

  .week-schedule .schedule-head {
    display: none;
  }

  .week-schedule .schedule-cell {
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .week-schedule .device-label {
    min-height: auto;
    margin-top: 4px;
    background: #f0f5f3;
  }

  .week-schedule .day-cell {
    min-height: 68px;
  }

  .week-schedule .day-cell::before {
    content: attr(data-day-label);
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .month-schedule {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 0;
  }

  .month-schedule .schedule-cell {
    min-width: 0;
    min-height: 64px;
    padding: 6px;
  }

  .month-schedule .schedule-head {
    min-height: 32px;
    text-align: center;
  }

  .month-cell > strong {
    margin-bottom: 5px;
    font-size: 12px;
  }

  .month-schedule .compact-reservation {
    padding: 5px;
  }

  .month-schedule .reserved-block strong,
  .month-schedule .reserved-block span {
    font-size: 10px;
  }

  .chat-panel {
    grid-template-rows: minmax(480px, 1fr) auto;
  }
}

@media (max-width: 980px) and (min-width: 621px) {
  .plaz-admin-controls,
  .plaz-admin-controls.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plaz-admin-controls .wide,
  .plaz-admin-controls button {
    grid-column: auto;
  }

  .plaz-admin-shell .people-bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  body,
  .app-shell,
  .app-main,
  .admin-view,
  .admin-panel,
  .plaz-admin-root,
  .plaz-admin-shell {
    max-width: 100%;
    overflow-x: hidden;
  }

  .admin-tabs.segmented {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
  }

  .admin-tabs.segmented::-webkit-scrollbar,
  .plaz-admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .admin-tabs.segmented .segment {
    flex: 0 0 auto;
    min-width: 124px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .plaz-admin-head,
  .plaz-admin-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .plaz-admin-head button,
  .plaz-admin-detail-head button {
    width: 100%;
  }

  .plaz-admin-tabs {
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .plaz-admin-tabs button {
    min-width: 104px;
    padding-right: 10px;
    padding-left: 10px;
    white-space: nowrap;
  }

  .plaz-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plaz-admin-stats article {
    padding: 10px;
  }

  .plaz-admin-stats strong {
    font-size: 22px;
  }

  .plaz-admin-overview-grid,
  .plaz-admin-controls,
  .plaz-admin-controls.compact,
  .plaz-admin-detail dl {
    grid-template-columns: 1fr;
  }

  .plaz-admin-controls .wide {
    grid-column: auto;
  }

  .plaz-admin-controls button,
  .plaz-admin-shell .people-bulk-actions button,
  .plaz-admin-detail-actions button {
    width: 100%;
  }

  .plaz-admin-shell .people-bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .plaz-admin-shell .people-bulk-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .plaz-admin-shell .people-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .plaz-admin-table {
    min-width: 860px;
    font-size: 12px;
  }

  .plaz-admin-table th,
  .plaz-admin-table td {
    padding: 8px;
  }

  .plaz-admin-title {
    max-width: 210px;
  }

  .plaz-admin-detail {
    padding: 12px;
  }

  .plaz-admin-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plaz-admin-audio {
    grid-column: 1 / -1;
  }

  .plaz-admin-detail-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .plaz-admin-thumb {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 420px) {
  .plaz-admin-shell .people-bulk-actions {
    grid-template-columns: 1fr;
  }

  .plaz-admin-stats {
    grid-template-columns: 1fr;
  }

  .plaz-admin-table {
    min-width: 780px;
  }
}

@media (max-width: 980px) and (min-width: 621px) {
  .calorie-redo-form.settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .calorie-redo-form.settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .calorie-redo-form.settings label {
    min-width: 0;
  }

  .calorie-redo-form.settings input,
  .calorie-redo-form.settings select {
    min-width: 0;
    padding-right: 9px;
    padding-left: 9px;
  }

  .calorie-redo-form.settings .calorie-redo-target-field,
  .calorie-redo-form.settings .calorie-redo-target-preview,
  .calorie-redo-form.settings > .primary-button,
  .calorie-redo-form.settings .calorie-redo-save-message {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .calorie-redo-form.settings {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 981px) {
  :root {
    --bg: #f5f7f8;
    --surface-soft: #f3f7f6;
    --line: #dce4e1;
    --shadow: 0 18px 42px rgba(19, 31, 36, 0.09);
  }

  body {
    background:
      linear-gradient(140deg, rgba(23, 107, 87, 0.06), transparent 34%),
      linear-gradient(110deg, rgba(36, 95, 156, 0.05), rgba(154, 106, 18, 0.035)),
      var(--bg);
  }

  .topbar {
    min-height: 72px;
    padding: 12px clamp(28px, 3vw, 44px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 28px rgba(19, 31, 36, 0.06);
  }

  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .brand strong {
    font-size: 17px;
  }

  .top-actions {
    gap: 10px;
  }

  .user-chip,
  .module-select,
  .top-actions .secondary-button,
  .plaz-shortcut {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  .auth-screen {
    width: min(1240px, calc(100% - 56px));
    gap: clamp(38px, 5vw, 74px);
    padding: 46px 0;
  }

  .hero-copy h1 {
    font-size: clamp(54px, 5.4vw, 78px);
  }

  .dashboard-preview,
  .auth-box {
    box-shadow: 0 24px 58px rgba(19, 31, 36, 0.12);
  }

  .app-main {
    width: min(1440px, calc(100% - 56px));
    padding: 24px 0 40px;
  }

  .view {
    gap: 20px;
  }

  .section-head {
    min-height: 86px;
    padding: 18px 20px;
    border: 1px solid rgba(32, 49, 59, 0.1);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 250, 0.9)),
      var(--surface);
    box-shadow: var(--shadow);
  }

  .section-head > div {
    min-width: 0;
  }

  .section-head h2 {
    font-size: clamp(24px, 1.8vw, 30px);
    line-height: 1.18;
  }

  .section-head .secondary-button,
  .section-head .icon-button,
  .section-head .plaz-shortcut {
    flex: 0 0 auto;
  }

  .system-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }

  .system-card {
    min-height: 178px;
    align-content: space-between;
    padding: 22px;
    background:
      linear-gradient(135deg, rgba(23, 107, 87, 0.07), rgba(36, 95, 156, 0.035) 48%, transparent),
      rgba(255, 255, 255, 0.94);
    border-color: rgba(32, 49, 59, 0.1);
    box-shadow: var(--shadow);
  }

  .system-card:hover {
    border-color: rgba(23, 107, 87, 0.32);
    box-shadow: 0 22px 52px rgba(19, 31, 36, 0.12);
  }

  .system-card strong {
    font-size: clamp(22px, 1.9vw, 28px);
    line-height: 1.18;
  }

  .system-card small {
    max-width: 54ch;
  }

  .device-grid {
    gap: 18px;
    align-items: start;
  }

  .device-card,
  .schedule-panel,
  .chat-panel,
  .settings-panel,
  .mbti-result-card,
  .mbti-form,
  .admin-view,
  .voice-panel,
  .calorie-hero,
  .calorie-card,
  .calorie-fallback-card,
  .calorie-redo-hero,
  .calorie-redo-card,
  .calorie-redo-progress,
  .calorie-redo-overview-card {
    border-color: rgba(32, 49, 59, 0.1);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  .device-copy {
    padding: 16px 18px 0;
  }

  .booking-form {
    gap: 14px;
    padding: 18px;
  }

  .booking-form textarea[name="note"] {
    min-height: 88px;
    font-size: 16px;
  }

  .schedule-panel {
    padding: 18px;
  }

  .schedule-head {
    background: #f3f7f6;
  }

  .schedule-cell {
    background: rgba(255, 255, 255, 0.95);
  }

  .digital-layout {
    grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
    gap: 18px;
  }

  .chat-panel {
    min-height: 680px;
  }

  .messages {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 251, 0.92));
  }

  .composer {
    background: rgba(255, 255, 255, 0.96);
  }

  .admin-view {
    gap: 18px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.84);
  }

  .admin-summary,
  .people-stats,
  .plaz-admin-stats {
    gap: 12px;
  }

  .admin-summary div,
  .people-stats article,
  .plaz-admin-stats article {
    background: linear-gradient(180deg, #ffffff, #f8fbfa);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .admin-panel {
    padding: 18px;
    border-color: rgba(32, 49, 59, 0.1);
  }

  .people-controls,
  .people-batch-form,
  .plaz-admin-controls,
  .plaz-admin-controls.compact {
    padding: 12px;
    border: 1px solid rgba(32, 49, 59, 0.1);
    border-radius: 8px;
    background: #f8fbfa;
  }

  .people-table-wrap {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .people-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eef4f4;
  }

  .people-detail-panel {
    top: 94px;
  }

  .user-row,
  .admin-device-row,
  .usage-record,
  .admin-treehole-item,
  .admin-treehole-music-item {
    background: #fcfefe;
  }

  .calorie-redo,
  .plaz-module {
    gap: 18px;
  }

  .calorie-hero,
  .calorie-redo-hero {
    padding: 22px;
  }

  .calorie-card,
  .calorie-redo-card {
    padding: 18px;
  }

  .plaz-module {
    padding: 18px;
    border-radius: 8px;
    border-color: rgba(36, 95, 156, 0.16);
    background:
      linear-gradient(135deg, rgba(236, 247, 255, 0.9), rgba(250, 253, 255, 0.95)),
      var(--surface);
  }

  .plaz-hero {
    box-shadow: 0 20px 48px rgba(28, 83, 166, 0.22);
  }

  .plaz-feed {
    width: min(1040px, 100%);
  }

  .plaz-post {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
  }

  .treehole-view {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(23, 107, 87, 0.12);
    border-radius: 8px;
    background: rgba(248, 252, 250, 0.76);
  }

  .treehole-view::before {
    opacity: 0.56;
  }

  .treehole-view::after {
    opacity: 0.42;
  }

  .treehole-composer,
  .treehole-post,
  .treehole-empty {
    border-color: rgba(65, 171, 132, 0.24);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow);
  }

  .mbti-form {
    padding: 18px;
  }

  .mbti-questions {
    gap: 14px;
  }

  .primary-button,
  .secondary-button,
  .send-button,
  .icon-button,
  .mini-button,
  .segment,
  .plaz-filter-row button,
  .plaz-actions button,
  .plaz-comment-actions button {
    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease,
      background 0.16s ease,
      color 0.16s ease,
      border-color 0.16s ease;
  }

  .primary-button:hover:not(:disabled),
  .send-button:hover:not(:disabled),
  .mini-button.strong:hover:not(:disabled) {
    box-shadow: 0 12px 26px rgba(23, 107, 87, 0.18);
  }

  .secondary-button:hover:not(:disabled),
  .icon-button:hover:not(:disabled),
  .mini-button:hover:not(:disabled) {
    box-shadow: 0 10px 22px rgba(19, 31, 36, 0.08);
  }

  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid rgba(36, 95, 156, 0.42);
    outline-offset: 2px;
  }
}

/* Plaza-aligned system theme */
:root {
  --bg: #edf6fb;
  --surface: #ffffff;
  --surface-soft: #f4f9fe;
  --ink: #0f1c2e;
  --muted: #607086;
  --line: rgba(52, 127, 224, 0.18);
  --green: #1e73c9;
  --blue: #245fbc;
  --red: #dc4c5c;
  --gold: #c98b1b;
  --cyan: #33b7e6;
  --shadow: 0 18px 46px rgba(36, 95, 156, 0.12);
  --plaza-deep: #081f46;
  --plaza-blue: #1f5eb1;
  --plaza-sky: #2d88da;
  --plaza-cyan: #8ee7ff;
  --plaza-glass: rgba(255, 255, 255, 0.9);
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(72, 166, 255, 0.22), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(42, 90, 210, 0.16), transparent 32%),
    linear-gradient(rgba(36, 95, 156, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 95, 156, 0.055) 1px, transparent 1px),
    linear-gradient(135deg, rgba(236, 247, 255, 0.98), rgba(247, 251, 255, 0.92));
  background-size: auto, auto, 36px 36px, 36px 36px, auto;
}

.topbar {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(52, 127, 224, 0.18);
  box-shadow: 0 14px 36px rgba(36, 95, 156, 0.12);
}

.brand-mark,
.avatar-badge,
.treehole-avatar,
.treehole-comment-avatar,
.plaz-avatar {
  background: linear-gradient(135deg, #33b7e6, #245fbc);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 8px 20px rgba(36, 95, 188, 0.18);
}

.brand-mark {
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

.brand span,
.panel-heading span,
.message-meta,
.free-slot,
.treehole-post-head span,
.treehole-comment-card span,
.plaz-post-head span,
.plaz-comment-main span,
.plaz-status {
  color: var(--muted);
}

.primary-button,
.send-button,
.mini-button.strong,
.secondary-button.is-active,
.segment.is-active,
.calorie-primary,
.calorie-redo-mobile-tabs button.is-active,
.calorie-tab-group button.is-active,
.plaz-filter-row button.is-active,
.plaz-actions button.is-active,
.plaz-comment-actions button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #1e62ad, #2d88da);
  border-color: rgba(132, 199, 255, 0.42);
  box-shadow: 0 12px 28px rgba(36, 95, 188, 0.2);
}

.secondary-button,
.icon-button,
.mini-button,
.module-select,
.user-chip,
.file-pill,
.plaz-filter-row button,
.plaz-actions button,
.plaz-comment-actions button,
.calorie-secondary,
.calorie-redo-photo,
.calorie-redo-quick-list button,
.calorie-food-db button,
.calorie-tab-group button {
  color: #1e62ad;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(52, 127, 224, 0.18);
}

.module-select.is-active,
.secondary-button:hover:not(:disabled),
.icon-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.plaz-filter-row button:hover:not(:disabled),
.plaz-actions button:hover:not(:disabled),
.plaz-comment-actions button:hover:not(:disabled) {
  background: rgba(236, 247, 255, 0.96);
  border-color: rgba(52, 127, 224, 0.34);
}

input,
textarea,
select,
.people-controls input,
.people-controls select,
.people-batch-form input,
.people-batch-form select,
.people-permission-batch select,
.people-detail-form input,
.people-detail-form select,
.plaz-admin-controls input,
.plaz-admin-controls select,
.calorie-redo-toolbar input,
.calorie-redo-form input,
.calorie-redo-form select,
.calorie-redo-inline select,
.calorie-hero-tools input,
.calorie-form input,
.calorie-form select {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(52, 127, 224, 0.2);
  color: var(--ink);
}

input:focus,
textarea:focus,
select:focus,
.calorie-redo-toolbar input:focus,
.calorie-redo-form input:focus,
.calorie-redo-form select:focus,
.calorie-redo-inline select:focus,
.calorie-hero-tools input:focus,
.calorie-form input:focus,
.calorie-form select:focus {
  border-color: rgba(45, 136, 218, 0.62);
  box-shadow: 0 0 0 4px rgba(142, 231, 255, 0.28);
}

.section-head,
.plaz-hero,
.calorie-hero,
.calorie-redo-hero,
.mbti-result-card,
.auth-box::before {
  background:
    linear-gradient(135deg, rgba(8, 31, 70, 0.98), rgba(31, 94, 177, 0.94)),
    radial-gradient(circle at 16% 0%, rgba(122, 221, 255, 0.34), transparent 28%);
  border-color: rgba(132, 199, 255, 0.36);
  color: #fff;
  box-shadow: 0 24px 58px rgba(28, 83, 166, 0.24);
}

.section-head h2,
.section-head .eyebrow,
.calorie-hero h2,
.calorie-hero span,
.calorie-hero p,
.calorie-redo-hero h2,
.calorie-redo-hero span,
.calorie-redo-hero p,
.mbti-result-card h3,
.mbti-result-card p,
.mbti-result-card small {
  color: inherit;
}

.section-head .eyebrow,
.calorie-hero span,
.calorie-redo-hero span,
.plaz-hero .eyebrow {
  color: var(--plaza-cyan);
}

.section-head .secondary-button,
.section-head .icon-button,
.section-head .plaz-shortcut,
.plaz-hero .primary-button,
.calorie-hero .primary-button,
.calorie-redo-hero .primary-button {
  color: #164c9a;
  background: linear-gradient(135deg, #ffffff, #dff4ff);
  border-color: rgba(255, 255, 255, 0.44);
}

.auth-screen,
.plaz-module,
.treehole-view,
.calorie-native,
.calorie-redo {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(52, 127, 224, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(72, 166, 255, 0.22), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(42, 90, 210, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(236, 247, 255, 0.94), rgba(246, 250, 255, 0.88));
  box-shadow: 0 22px 64px rgba(36, 95, 156, 0.12);
}

.calorie-native::before,
.calorie-redo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(36, 95, 156, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 95, 156, 0.1) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 80%);
  opacity: 0.58;
}

.auth-screen > *,
.calorie-native > *,
.calorie-redo > * {
  position: relative;
  z-index: 1;
}

.tech-backdrop {
  opacity: 0.46;
}

.scan-grid {
  background-image:
    linear-gradient(rgba(36, 95, 156, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 168, 182, 0.14) 1px, transparent 1px);
}

.circuit-line {
  background: linear-gradient(90deg, transparent, rgba(51, 183, 230, 0.72), rgba(36, 95, 188, 0.42), transparent);
}

.dashboard-preview,
.auth-box,
.system-card,
.device-card,
.schedule-panel,
.chat-panel,
.settings-panel,
.voice-panel,
.mbti-form,
.admin-view,
.admin-panel,
.profile-panel,
.calorie-card,
.calorie-fallback-card,
.calorie-redo-card,
.calorie-redo-progress,
.calorie-redo-overview-card,
.plaz-toolbar,
.plaz-composer,
.plaz-detail,
.plaz-post,
.plaz-skeleton,
.treehole-composer,
.treehole-post,
.treehole-empty,
.treehole-music-player,
.admin-summary div,
.people-stats article,
.people-bulk-bar,
.people-batch-panel,
.people-table-wrap,
.people-detail-panel,
.user-row,
.admin-device-row,
.usage-record,
.admin-treehole-item,
.admin-treehole-music-item,
.plaz-admin-empty,
.plaz-admin-head,
.plaz-admin-detail,
.plaz-admin-overview-grid article,
.plaz-admin-stats article {
  border-color: rgba(52, 127, 224, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.9));
  box-shadow: var(--shadow);
}

.system-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.92));
}

.system-card span,
.eyebrow,
.auth-title span,
.panel-heading h3,
.calorie-card-head span,
.calorie-redo-card-head span,
.mbti-axis-card strong,
.user-section-title,
.people-batch-head span,
.people-detail-head span,
.treehole-music-now span,
.treehole-ttl,
.plaz-card-head span {
  color: #1e73c9;
}

.system-card:hover,
.device-card:hover,
.plaz-post:hover,
.treehole-post:hover {
  border-color: rgba(52, 127, 224, 0.34);
  box-shadow: 0 22px 54px rgba(36, 95, 156, 0.16);
}

.preview-top span,
.calorie-progress-track .is-good,
.calorie-redo-chart polyline {
  background: #33b7e6;
  stroke: #2d88da;
}

.preview-top span:nth-child(2) {
  background: #245fbc;
}

.preview-grid .reserved,
.reserved-block {
  background: linear-gradient(135deg, #dc4c5c, #f07180);
}

.segmented,
.admin-tabs.segmented,
.compact-tabs,
.plaz-admin-tabs button.is-active {
  background: rgba(236, 247, 255, 0.84);
}

.segment {
  color: #4f6683;
}

.schedule-head,
.people-table th,
.muted-month {
  background: #eef7ff;
  color: #18395f;
}

.schedule-cell,
.month-cell,
.people-table td,
.treehole-comment-card,
.plaz-comment,
.plaz-comment-preview,
.plaz-comment-form.reply.inline,
.calorie-mini-grid div,
.calorie-redo-analysis div,
.calorie-redo-row,
.module-password-list article,
.admin-permission-note,
.calorie-window,
.calorie-redo-window {
  border-color: rgba(52, 127, 224, 0.14);
  background: rgba(247, 251, 255, 0.82);
}

.digital-layout .section-head,
.treehole-view .section-head,
.mbti-view .section-head,
.admin-view > .section-head {
  grid-column: 1 / -1;
}

.chat-panel {
  background: rgba(255, 255, 255, 0.92);
}

.messages {
  background:
    linear-gradient(rgba(36, 95, 156, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 95, 156, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.92));
  background-size: 34px 34px, 34px 34px, auto;
}

.user .message-bubble {
  background: linear-gradient(135deg, #1e62ad, #2d88da);
}

.assistant .message-bubble,
.typing {
  background: rgba(247, 251, 255, 0.92);
  border-color: rgba(52, 127, 224, 0.16);
}

.treehole-view {
  --tree-bg: #eef7ff;
  --tree-pink: #8ee7ff;
  --tree-mint: #2d88da;
  --tree-ink: #112b4e;
}

.treehole-view::before {
  background:
    linear-gradient(115deg, rgba(72, 166, 255, 0.18), rgba(53, 168, 182, 0.1) 42%, rgba(36, 95, 188, 0.12)),
    repeating-linear-gradient(90deg, rgba(36, 95, 156, 0.1) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(36, 95, 156, 0.08) 0 1px, transparent 1px 42px);
}

.treehole-view::after {
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.46) 45%, transparent 58%),
    linear-gradient(180deg, transparent, rgba(51, 183, 230, 0.12), transparent);
}

#treeholeText,
.mood-picker span,
.treehole-thumb,
.treehole-audio-card,
.admin-treehole-audio,
.treehole-drawing-panel,
.treehole-preview-item {
  border-color: rgba(52, 127, 224, 0.22);
  background: rgba(247, 251, 255, 0.88);
}

.mood-picker input:checked + span {
  border-color: #2d88da;
  background: #eaf7ff;
  box-shadow: 0 0 0 3px rgba(142, 231, 255, 0.28);
}

.mbti-portrait {
  background:
    radial-gradient(circle at 25% 20%, rgba(142, 231, 255, 0.55), transparent 34%),
    linear-gradient(135deg, #1e62ad, #2d88da);
}

.mbti-question,
.mbti-start-card,
.mbti-analysis-section,
.mbti-axis-card,
.mbti-mode-option {
  border-color: rgba(52, 127, 224, 0.16);
  background: rgba(247, 251, 255, 0.88);
}

.mbti-mode-option.is-selected {
  border-color: rgba(45, 136, 218, 0.46);
  background: #eaf7ff;
}

.admin-summary strong,
.people-stats strong,
.plaz-admin-stats strong,
.calorie-summary-card strong,
.calorie-redo-overview-card strong {
  color: #0f1c2e;
}

.people-badge.is-good,
.permission-chip,
.people-module-chips span,
.calorie-status.is-good,
.calorie-window.is-active,
.calorie-redo-window.is-active {
  background: #eaf7ff;
  color: #1e62ad;
}

.permission-chip.is-admin {
  background: #e8f2ff;
  color: #245fbc;
}

.permission-chip.permission-treehole {
  background: #dcfce7;
  color: #166534;
}

.people-table tr.is-selected td {
  background: #eef7ff;
}

.people-check,
.calorie-redo-check,
.calorie-check {
  background: #eef7ff;
}

.calorie-native,
.calorie-redo {
  padding: 16px;
}

.calorie-ring {
  background: conic-gradient(#2d88da calc(var(--progress) * 1%), #dceeff 0);
}

.calorie-ring span,
.calorie-mini-grid span,
.calorie-redo-progress span {
  color: #607086;
}

.calorie-mini-grid strong,
.calorie-redo-analysis strong,
.calorie-redo-analysis span,
.calorie-redo-meal-group h4 {
  color: #1e62ad;
}

.calorie-redo-progress > div {
  background: linear-gradient(135deg, #eaf7ff, #dff4ff);
  color: #164c9a;
}

.plaz-module {
  border-radius: 12px;
}

.plaz-module::before {
  opacity: 0.68;
}

.plaz-admin-tabs button {
  color: #24486f;
}

.plaz-admin-tabs button.is-active {
  color: #1e62ad;
  border-color: rgba(52, 127, 224, 0.32);
}

.danger {
  color: #cf3349 !important;
}

@media (min-width: 981px) {
  .app-main {
    width: min(1460px, calc(100% - 56px));
  }

  .view {
    gap: 20px;
  }

  .section-head {
    min-height: 96px;
    padding: 20px 22px;
  }

  .system-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .system-card,
  .plaz-post,
  .device-card,
  .calorie-redo-card,
  .calorie-card {
    min-height: 176px;
  }

  .treehole-view,
  .calorie-native,
  .calorie-redo,
  .plaz-module {
    padding: 18px;
  }
}

@media (max-width: 980px) {
  .auth-screen,
  .plaz-module,
  .treehole-view,
  .calorie-native,
  .calorie-redo {
    border-radius: 10px;
  }

  .section-head {
    align-items: flex-start;
    min-height: 0;
    padding: 16px;
  }

  .section-head h2 {
    font-size: 24px;
  }

  .system-card,
  .device-card,
  .schedule-panel,
  .chat-panel,
  .settings-panel,
  .admin-panel,
  .treehole-composer,
  .treehole-post,
  .calorie-card,
  .calorie-redo-card {
    box-shadow: 0 12px 30px rgba(36, 95, 156, 0.1);
  }
}

@media (max-width: 980px) {
  .calorie-redo-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .calorie-redo-overview-card {
    min-height: 82px;
    padding: 12px;
  }

  .calorie-redo-overview-card strong {
    font-size: 19px;
    line-height: 1.15;
  }

  .calorie-redo-body-trend-card {
    padding: 12px;
  }

  .calorie-redo-body-trend-card .calorie-redo-card-head {
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 8px;
  }

  .calorie-redo-body-trend-card .calorie-redo-card-head h3 {
    font-size: 19px;
    line-height: 1.18;
  }

  .calorie-redo-body-trend-latest {
    min-width: 116px;
    gap: 2px;
    font-size: 11px;
    line-height: 1.25;
  }

  .calorie-redo-body-trend-latest strong {
    font-size: 17px;
    line-height: 1.05;
  }
}

@media (max-width: 620px) {
  body.mobile-app-mode .mobile-topbar-toggle {
    border-color: rgba(30, 98, 173, 0.16);
    background: rgba(255, 255, 255, 0.72);
  }

  body.mobile-topbar-open .mobile-topbar-toggle {
    color: #1e62ad;
    border-color: rgba(52, 127, 224, 0.18);
    background: rgba(255, 255, 255, 0.94);
  }

  .topbar {
    border-color: rgba(52, 127, 224, 0.18);
    box-shadow: 0 18px 52px rgba(36, 95, 156, 0.16);
  }

  .app-main,
  .auth-screen {
    padding: 10px;
  }

  .auth-screen,
  .plaz-module,
  .treehole-view,
  .calorie-native,
  .calorie-redo {
    padding: 8px;
  }

  #calorieView,
  .calorie-module-host,
  .calorie-redo {
    overflow: visible;
  }

  .calorie-redo {
    padding: 8px 8px calc(104px + env(safe-area-inset-bottom));
  }

  .calorie-redo-hero {
    padding: 14px;
  }

  .calorie-redo-hero-main {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 10px;
  }

  .calorie-redo-hero h2 {
    font-size: 23px;
    line-height: 1.12;
  }

  .calorie-redo-hero p {
    font-size: 11px;
    line-height: 1.42;
  }

  .calorie-redo-hero-progress {
    width: 78px;
    height: 78px;
  }

  .calorie-redo-hero-progress strong {
    font-size: 22px;
  }

  .calorie-redo-hero-progress span {
    font-size: 10px;
  }

  .calorie-redo-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .calorie-redo-overview-card {
    align-content: start;
    gap: 6px;
    min-height: 74px;
    padding: 10px;
  }

  .calorie-redo-overview-card span {
    font-size: 12px;
    line-height: 1.25;
  }

  .calorie-redo-overview-card strong {
    overflow-wrap: anywhere;
    font-size: 18px;
    line-height: 1.18;
  }

  .calorie-redo-body-trend-card {
    padding: 10px;
  }

  .calorie-redo-body-trend-card .calorie-redo-card-head {
    gap: 8px;
    margin-bottom: 6px;
  }

  .calorie-redo-body-trend-card .calorie-redo-card-head h3 {
    font-size: 18px;
  }

  .calorie-redo-body-trend-latest {
    min-width: 102px;
    font-size: 10.5px;
  }

  .calorie-redo-body-trend-latest strong {
    font-size: 16px;
  }

  .calorie-redo-analysis {
    gap: 8px;
  }

  .calorie-redo-analysis div {
    padding: 10px;
  }

  .calorie-redo-analysis span {
    font-size: 12px;
  }

  .calorie-redo-analysis strong {
    font-size: 20px;
  }

  .calorie-redo-analysis-card {
    gap: 8px;
    padding: 12px;
  }

  .calorie-redo-analysis-head {
    margin-bottom: 0;
  }

  .calorie-redo-analysis-head h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
  }

  .calorie-redo-analysis-head span {
    display: none;
  }

  .calorie-redo-trend-start {
    gap: 4px;
    width: 100%;
    font-size: 12px;
  }

  .calorie-redo-trend-start input {
    min-height: 34px;
    padding: 6px 9px;
  }

  .calorie-redo-grid.trend {
    gap: 10px;
  }

  .calorie-redo-grid.trend .calorie-redo-card {
    padding: 10px;
  }

  .calorie-redo-grid.trend .calorie-redo-card-head {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 7px;
  }

  .calorie-redo-grid.trend .calorie-redo-card-head > div {
    min-width: 0;
  }

  .calorie-redo-grid.trend .calorie-redo-card-head span {
    display: none;
  }

  .calorie-redo-grid.trend .calorie-redo-card-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
  }

  .calorie-redo-body-trend-card .calorie-redo-card-head {
    align-items: center;
  }

  .calorie-redo-body-trend-latest {
    min-width: 94px;
  }

  .section-head {
    border-radius: 8px;
  }

  .system-card strong,
  .plaz-post h3,
  .device-copy h3 {
    font-size: 22px;
  }

  .treehole-actions .mini-button,
  .plaz-actions button,
  .plaz-comment-actions button {
    box-shadow: none;
  }

  .calorie-redo-mobile-tabs {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 160;
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(239, 68, 68, 0.18);
  }

  .calorie-redo-body-modal {
    padding: 10px;
  }

  .calorie-redo-body-dialog {
    max-height: calc(100vh - 20px);
    padding: 14px;
  }
}

/* Module-specific color themes while keeping the Plaza-style structure */
#switcherView {
  --module-rgb: 36, 95, 188;
  --module-accent: #245fbc;
  --module-accent-2: #2d88da;
  --module-dark: #081f46;
  --module-highlight: #8ee7ff;
  --module-pale: rgba(236, 247, 255, 0.94);
  --module-soft: rgba(247, 251, 255, 0.88);
  --module-line: rgba(52, 127, 224, 0.18);
  --module-shadow: rgba(36, 95, 156, 0.14);
  --module-grid: rgba(36, 95, 156, 0.1);
}

#workstationView {
  --module-rgb: 229, 233, 238;
  --module-accent: #111827;
  --module-accent-2: #374151;
  --module-dark: #05070b;
  --module-highlight: #d8dee8;
  --module-pale: rgba(250, 251, 252, 0.98);
  --module-soft: rgba(255, 255, 255, 0.94);
  --module-line: rgba(17, 24, 39, 0.2);
  --module-shadow: rgba(17, 24, 39, 0.16);
  --module-grid: rgba(148, 163, 184, 0.08);
}

#digitalSelfView {
  --module-rgb: 14, 165, 233;
  --module-accent: #0f75bc;
  --module-accent-2: #08a7d8;
  --module-dark: #073452;
  --module-highlight: #b7f4ff;
  --module-pale: rgba(235, 250, 255, 0.94);
  --module-soft: rgba(247, 253, 255, 0.9);
  --module-line: rgba(14, 165, 233, 0.22);
  --module-shadow: rgba(14, 116, 144, 0.14);
  --module-grid: rgba(14, 165, 233, 0.1);
}

#treeholeView {
  --module-rgb: 34, 197, 94;
  --module-accent: #168a52;
  --module-accent-2: #2bb98a;
  --module-dark: #063f2b;
  --module-highlight: #c4ffe2;
  --module-pale: rgba(236, 253, 245, 0.94);
  --module-soft: rgba(247, 255, 251, 0.9);
  --module-line: rgba(34, 197, 94, 0.24);
  --module-shadow: rgba(22, 101, 52, 0.13);
  --module-grid: rgba(34, 197, 94, 0.1);
}

#mbtiView {
  --module-rgb: 124, 58, 237;
  --module-accent: #7048c9;
  --module-accent-2: #9a6bea;
  --module-dark: #2b1758;
  --module-highlight: #eadbff;
  --module-pale: rgba(247, 242, 255, 0.94);
  --module-soft: rgba(252, 249, 255, 0.9);
  --module-line: rgba(124, 58, 237, 0.2);
  --module-shadow: rgba(88, 28, 135, 0.13);
  --module-grid: rgba(124, 58, 237, 0.09);
}

#memoView {
  --module-rgb: 126, 75, 43;
  --module-accent: #8a5a3c;
  --module-accent-2: #b87948;
  --module-dark: #3f271b;
  --module-highlight: #f6e2c9;
  --module-pale: rgba(250, 244, 235, 0.96);
  --module-soft: rgba(255, 250, 242, 0.92);
  --module-line: rgba(126, 75, 43, 0.22);
  --module-shadow: rgba(91, 52, 31, 0.16);
  --module-grid: rgba(126, 75, 43, 0.1);
}

#calorieView {
  --module-rgb: 239, 68, 68;
  --module-accent: #dc334d;
  --module-accent-2: #f97368;
  --module-dark: #661426;
  --module-highlight: #ffd9df;
  --module-pale: rgba(255, 241, 243, 0.94);
  --module-soft: rgba(255, 250, 250, 0.9);
  --module-line: rgba(239, 68, 68, 0.2);
  --module-shadow: rgba(190, 24, 93, 0.12);
  --module-grid: rgba(239, 68, 68, 0.08);
}

#adminView {
  --module-rgb: 51, 65, 85;
  --module-accent: #334155;
  --module-accent-2: #51617a;
  --module-dark: #111827;
  --module-highlight: #dbeafe;
  --module-pale: rgba(244, 247, 251, 0.94);
  --module-soft: rgba(249, 251, 254, 0.9);
  --module-line: rgba(51, 65, 85, 0.18);
  --module-shadow: rgba(15, 23, 42, 0.12);
  --module-grid: rgba(51, 65, 85, 0.08);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--module-line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--module-rgb), 0.18), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(var(--module-rgb), 0.12), transparent 34%),
    linear-gradient(135deg, var(--module-pale), rgba(255, 255, 255, 0.88));
  box-shadow: 0 22px 64px var(--module-shadow);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--module-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--module-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.74), transparent 82%);
  opacity: 0.64;
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView) > * {
  position: relative;
  z-index: 1;
}

#workstationView {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 250, 0.96));
}

:is(#switcherView, #workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #adminView) .section-head,
#calorieView :is(.calorie-hero, .calorie-redo-hero) {
  background:
    linear-gradient(135deg, var(--module-dark), var(--module-accent-2)),
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.2), transparent 28%);
  border-color: rgba(var(--module-rgb), 0.34);
  color: #fff;
  box-shadow: 0 24px 58px var(--module-shadow);
}

:is(#switcherView, #workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #adminView) .section-head .eyebrow,
#calorieView :is(.calorie-hero span, .calorie-redo-hero span) {
  color: var(--module-highlight);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)
  :is(.device-card, .schedule-panel, .chat-panel, .settings-panel, .voice-panel, .mbti-result-card, .mbti-form, .admin-panel, .treehole-composer, .treehole-post, .treehole-empty, .treehole-music-player, .calorie-card, .calorie-redo-card, .calorie-redo-progress, .calorie-redo-overview-card, .admin-summary div, .people-stats article, .people-bulk-bar, .people-batch-panel, .people-table-wrap, .people-detail-panel, .user-row, .admin-device-row, .usage-record, .admin-treehole-item, .admin-treehole-music-item, .plaz-admin-empty, .plaz-admin-head, .plaz-admin-detail, .plaz-admin-overview-grid article, .plaz-admin-stats article) {
  border-color: var(--module-line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--module-soft));
  box-shadow: 0 18px 42px var(--module-shadow);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)
  :is(.primary-button, .send-button, .mini-button.strong, .secondary-button.is-active, .segment.is-active, .calorie-primary, .calorie-redo-mobile-tabs button.is-active, .calorie-tab-group button.is-active) {
  color: #fff;
  background: linear-gradient(135deg, var(--module-accent), var(--module-accent-2));
  border-color: rgba(var(--module-rgb), 0.34);
  box-shadow: 0 12px 28px var(--module-shadow);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)
  :is(.secondary-button, .icon-button, .mini-button, .file-pill, .calorie-secondary, .calorie-redo-photo, .calorie-redo-quick-list button, .calorie-food-db button, .calorie-tab-group button) {
  color: var(--module-accent);
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--module-line);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)
  :is(.panel-heading h3, .eyebrow, .calorie-card-head span, .calorie-redo-card-head span, .mbti-axis-card strong, .user-section-title, .people-batch-head span, .people-detail-head span, .treehole-music-now span, .treehole-ttl) {
  color: var(--module-accent);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)
  :is(input, textarea, select):focus {
  border-color: rgba(var(--module-rgb), 0.54);
  box-shadow: 0 0 0 4px rgba(var(--module-rgb), 0.14);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)
  :is(.segmented, .compact-tabs, .admin-tabs.segmented, .people-controls, .people-batch-form, .plaz-admin-controls, .plaz-admin-controls.compact) {
  background: rgba(var(--module-rgb), 0.08);
  border-color: var(--module-line);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)
  :is(.schedule-head, .people-table th, .muted-month) {
  background: rgba(var(--module-rgb), 0.1);
  color: var(--module-dark);
}

:is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #adminView)
  :is(.schedule-cell, .month-cell, .people-table td, .treehole-comment-card, .calorie-mini-grid div, .calorie-redo-analysis div, .calorie-redo-row, .module-password-list article, .admin-permission-note, .calorie-window, .calorie-redo-window, .mbti-question, .mbti-start-card, .mbti-analysis-section, .mbti-axis-card, .mbti-mode-option) {
  border-color: rgba(var(--module-rgb), 0.14);
  background: rgba(255, 255, 255, 0.74);
}

#memoView {
  gap: 12px;
}

#memoView .memo-intro {
  margin: -4px 2px 0;
  color: #53615e;
  font-size: 13px;
  font-weight: 700;
}

#memoView #newMemoPlanButton {
  display: inline-flex;
}

.memo-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.memo-info-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 20px rgba(29, 18, 12, 0.18);
}

.memo-info-toggle-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 22px;
  border: 2px solid currentColor;
  border-left-width: 3px;
  border-radius: 3px 5px 5px 3px;
  background: rgba(255, 255, 255, 0.14);
}

.memo-info-toggle-icon::before,
.memo-info-toggle-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.memo-info-toggle-icon::before {
  top: 4px;
  bottom: 4px;
  left: -6px;
  width: 4px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.memo-info-toggle-icon::after {
  top: 6px;
  right: 3px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
  opacity: 0.86;
}

.memo-module-host {
  display: grid;
  gap: 14px;
}

.memo-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.memo-focus-panel,
.memo-stat-card,
.memo-side-card,
.memo-plan-card,
.memo-toolbar,
.memo-detail,
.memo-form {
  border: 1px solid var(--module-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px var(--module-shadow);
}

.memo-focus-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(var(--module-rgb), 0.1)),
    radial-gradient(circle at right top, rgba(var(--module-rgb), 0.12), transparent 36%);
}

.memo-focus-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.memo-focus-copy > span {
  color: var(--module-accent);
  font-size: 12px;
  font-weight: 900;
}

.memo-focus-copy strong {
  color: var(--module-dark);
  font-size: 28px;
  line-height: 1.1;
}

.memo-focus-copy p {
  margin: 0;
  color: #53615e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.memo-focus-notices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memo-focus-notices span {
  border: 1px solid rgba(var(--module-rgb), 0.16);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(var(--module-rgb), 0.08);
  color: #315653;
  font-size: 12px;
  font-weight: 900;
}

.memo-focus-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.memo-stat-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 78px;
  padding: 12px;
}

.memo-stat-card strong {
  color: var(--module-dark);
  font-size: 26px;
  line-height: 1;
}

.memo-stat-card span,
.memo-stat-card small,
.memo-plan-meta,
.memo-plan-footer small,
.memo-detail-meta,
.memo-side-item span {
  color: #64726f;
  font-size: 12px;
  font-weight: 800;
}

.memo-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
}

.memo-tabs button {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--module-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--module-accent);
  font-weight: 900;
  white-space: nowrap;
}

.memo-tabs button {
  position: relative;
}

.memo-tabs .memo-mobile-create-tab {
  display: none;
}

.memo-tab-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(var(--module-rgb), 0.08);
  font-size: 12px;
  line-height: 1;
}

.memo-tabs button.is-active .memo-tab-icon {
  color: #fff;
  background: var(--module-accent);
}

.memo-tabs button.is-create {
  border-color: rgba(var(--module-rgb), 0.2);
  color: #fff;
  background: linear-gradient(135deg, var(--module-accent), var(--module-accent-2));
  box-shadow: 0 12px 28px rgba(var(--module-rgb), 0.18);
}

.memo-tabs button.is-create .memo-tab-icon {
  background: rgba(255, 255, 255, 0.2);
  font-size: 18px;
}

.memo-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memo-tabs button small {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--module-rgb), 0.1);
  color: #5d6a67;
  font-size: 11px;
  line-height: 1;
}

.memo-tabs button.is-active {
  border-color: rgba(var(--module-rgb), 0.22);
  color: var(--module-accent);
  background: rgba(var(--module-rgb), 0.09);
}

.memo-tabs button.is-active small {
  background: var(--module-accent);
  color: #fff;
}

.memo-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, 170px));
  gap: 10px;
  padding: 12px;
}

.memo-toolbar input,
.memo-toolbar select,
.memo-form input,
.memo-form textarea,
.memo-form select,
.memo-inline-form input,
.memo-inline-form select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.memo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 14px;
  align-items: start;
}

.memo-layout.is-full {
  grid-template-columns: 1fr;
}

.memo-list {
  display: grid;
  gap: 10px;
}

.memo-plan-card {
  --memo-type-color: var(--module-accent);
  --memo-type-rgb: var(--module-rgb);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border-left: 4px solid var(--memo-type-color);
}

.memo-plan-card.priority-high {
  border-left-color: var(--memo-type-color);
}

.memo-plan-card.type-daily {
  --memo-type-color: #2f855a;
  --memo-type-rgb: 47, 133, 90;
}

.memo-plan-card.type-weekly {
  --memo-type-color: #2563eb;
  --memo-type-rgb: 37, 99, 235;
}

.memo-plan-card.type-monthly {
  --memo-type-color: #7c3aed;
  --memo-type-rgb: 124, 58, 237;
}

.memo-plan-card.type-long-term,
.memo-plan-card.type-future {
  --memo-type-color: #0f766e;
  --memo-type-rgb: 15, 118, 110;
}

.memo-plan-card.type-reminder {
  --memo-type-color: #dc2626;
  --memo-type-rgb: 220, 38, 38;
}

.memo-plan-card.type-memo,
.memo-plan-card.type-general {
  --memo-type-color: #8a5a3c;
  --memo-type-rgb: 138, 90, 60;
}

.memo-plan-card.status-completed {
  opacity: 0.78;
}

.memo-plan-check {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
}

.memo-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  min-height: 24px;
  border: 1px solid rgba(var(--module-rgb), 0.14);
  border-radius: 7px;
  color: #8a5a3c;
  background: rgba(255, 255, 255, 0.78);
  cursor: grab;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  touch-action: none;
}

.memo-drag-handle:active {
  cursor: grabbing;
}

.memo-list.is-sorting {
  user-select: none;
}

.memo-list.is-sorting .memo-plan-card:not(.is-dragging),
.memo-plan-placeholder {
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.memo-plan-placeholder {
  border: 1px dashed rgba(var(--module-rgb), 0.28);
  border-radius: 8px;
  background: rgba(var(--module-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.54);
}

.memo-plan-card.is-dragging {
  opacity: 0.88;
  cursor: grabbing;
  box-shadow: 0 18px 44px rgba(91, 52, 31, 0.22);
}

body.memo-plan-dragging {
  cursor: grabbing;
  user-select: none;
}

.memo-check {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--module-line);
  border-radius: 999px;
  background: #fff;
  color: #fff;
  font-weight: 900;
}

.memo-check.is-done {
  border-color: var(--module-accent);
  background: var(--module-accent);
}

.memo-plan-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.memo-plan-main p,
.memo-detail-desc {
  margin: 0;
  color: #43514f;
  line-height: 1.6;
}

.memo-plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.memo-plan-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--module-dark);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memo-plan-title span,
.memo-pill {
  flex: 0 0 auto;
  border: 1px solid var(--module-line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--module-accent);
  background: rgba(var(--module-rgb), 0.08);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.memo-plan-card .memo-plan-title span {
  border-color: rgba(var(--memo-type-rgb), 0.24);
  color: var(--memo-type-color);
  background: rgba(var(--memo-type-rgb), 0.1);
}

.memo-pill.is-shared {
  color: #0f766e;
  background: rgba(20, 184, 166, 0.1);
}

.memo-pill.is-supervised {
  color: #7c2d12;
  background: rgba(251, 146, 60, 0.14);
}

.memo-plan-meta,
.memo-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.memo-plan-meta .is-danger {
  color: #b4233d;
}

.memo-progress-line {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--module-rgb), 0.12);
}

.memo-progress-line.large {
  height: 10px;
}

.memo-progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--module-accent), var(--module-accent-2));
}

.memo-plan-card .memo-progress-line span {
  background: linear-gradient(90deg, var(--memo-type-color), rgba(var(--memo-type-rgb), 0.58));
}

.memo-plan-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memo-plan-footer > div,
.memo-form-actions,
.memo-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.memo-card-tasks {
  display: grid;
  gap: 6px;
  padding: 2px 0;
}

.memo-card-task {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #33413f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.memo-card-task input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--module-accent);
}

.memo-card-task span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memo-card-task.is-done span {
  color: #8a9693;
  text-decoration: line-through;
}

.memo-reminder-notices {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px;
}

.memo-reminder-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--module-rgb), 0.28);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.92);
  box-shadow: 0 10px 24px rgba(84, 50, 28, 0.08);
}

.memo-reminder-notice strong,
.memo-reminder-notice p,
.memo-reminder-notice span {
  display: block;
  min-width: 0;
}

.memo-reminder-notice strong {
  color: #5b2d15;
  font-size: 14px;
  font-weight: 950;
}

.memo-reminder-notice p {
  margin: 3px 0;
  color: #253835;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
}

.memo-reminder-notice span {
  color: #6d7b78;
  font-size: 12px;
  font-weight: 800;
}

.memo-side {
  display: grid;
  gap: 10px;
}

.memo-side-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.memo-ring {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  margin: 0 auto;
  border-radius: 999px;
  background: conic-gradient(var(--module-accent) calc(var(--memo-rate, 0) * 1%), rgba(var(--module-rgb), 0.12) 0);
}

.memo-ring strong,
.memo-ring span {
  grid-area: 1 / 1;
}

.memo-ring strong {
  color: var(--module-dark);
  font-size: 24px;
}

.memo-ring span {
  margin-top: 42px;
  color: #5d6a67;
  font-size: 11px;
  font-weight: 900;
}

.memo-side-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(var(--module-rgb), 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
}

.memo-side-item strong {
  overflow: hidden;
  color: var(--module-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.memo-modal-open {
  overflow: hidden;
}

body.memo-modal-open .app-shell,
body.memo-modal-open .app-main {
  overflow: hidden;
  overscroll-behavior: none;
}

.memo-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  overflow: hidden;
  overscroll-behavior: none;
  padding: 18px;
  background: rgba(7, 23, 26, 0.36);
}

.memo-form,
.memo-detail {
  width: min(760px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.memo-create-sheet {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--module-line);
  border-radius: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 54px rgba(91, 52, 31, 0.2);
}

.memo-create-options {
  display: grid;
  gap: 8px;
}

.memo-create-option {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 13px;
  border: 1px solid rgba(var(--module-rgb), 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  text-align: left;
}

.memo-create-option strong {
  color: var(--module-dark);
  font-size: 16px;
}

.memo-create-option span {
  color: #62716e;
  font-size: 12px;
  font-weight: 800;
}

.memo-create-option:hover {
  border-color: rgba(var(--module-rgb), 0.32);
  background: rgba(var(--module-rgb), 0.08);
}

.memo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.memo-form-grid .wide {
  grid-column: 1 / -1;
}

.memo-form label,
.memo-friend-option {
  display: grid;
  gap: 6px;
  color: #52605d;
  font-size: 12px;
  font-weight: 900;
}

.memo-advanced {
  margin-top: 14px;
  border: 1px solid rgba(var(--module-rgb), 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(var(--module-rgb), 0.05);
}

.memo-advanced summary {
  cursor: pointer;
  color: var(--module-accent);
  font-weight: 900;
}

.memo-share-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.memo-friend-option {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(var(--module-rgb), 0.12);
  border-radius: 8px;
  background: #fff;
}

.memo-friend-option > span {
  min-width: 0;
}

.memo-detail {
  display: grid;
  gap: 14px;
}

.memo-detail-block {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(var(--module-rgb), 0.12);
  padding-top: 12px;
}

.memo-detail-block h4 {
  margin: 0;
  color: var(--module-accent);
}

.memo-task-row,
.memo-share-row,
.memo-comment {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(var(--module-rgb), 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.memo-task-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.memo-share-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.memo-comment p {
  margin: 0;
  color: #33413f;
}

.memo-comment span,
.memo-share-row span {
  color: #6a7673;
  font-size: 12px;
  font-weight: 800;
}

.memo-empty {
  padding: 18px;
  border: 1px dashed rgba(var(--module-rgb), 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #61706d;
  text-align: center;
  font-weight: 800;
}

.memo-empty.small {
  padding: 10px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .memo-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (max-width: 760px) {
  #memoView {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  #memoView #newMemoPlanButton {
    display: none;
  }

  .memo-module-host {
    gap: 10px;
  }

  .memo-focus-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 14px;
  }

  .memo-focus-copy strong {
    font-size: 24px;
  }

  .memo-focus-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memo-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .memo-stat-card {
    min-height: 70px;
    padding: 10px;
    box-shadow: 0 10px 26px rgba(var(--module-rgb), 0.1);
  }

  .memo-stat-card strong {
    font-size: 22px;
  }

  .memo-stat-card span,
  .memo-stat-card small {
    font-size: 11px;
  }

  .memo-tabs {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 160;
    display: grid;
    grid-template-columns: repeat(var(--bottom-nav-count, 5), minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
    border: 1px solid rgba(var(--module-rgb), 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(16px);
  }

  .memo-tabs button {
    grid-template-rows: 26px 16px;
    grid-auto-flow: row;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    height: 58px;
    min-height: 58px;
    padding: 4px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-size: 11px;
  }

  .memo-tabs .memo-mobile-create-tab {
    display: inline-grid;
  }

  .memo-tab-icon {
    width: 26px;
    height: 26px;
    margin: 0 auto;
    font-size: 12px;
  }

  .memo-tabs button.is-create {
    height: 58px;
    min-height: 58px;
    transform: none;
    box-shadow: 0 14px 30px rgba(var(--module-rgb), 0.24);
  }

  .memo-tabs button.is-create .memo-tab-icon {
    width: 26px;
    height: 26px;
    font-size: 21px;
  }

  .memo-tabs button small {
    position: absolute;
    top: 4px;
    right: 7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
  }

  .memo-tabs button.is-active {
    box-shadow: none;
  }

  .memo-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memo-form-grid,
  .memo-share-picker {
    grid-template-columns: 1fr;
  }

  .memo-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
  }

  .memo-toolbar input {
    grid-column: 1 / -1;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .memo-toolbar select {
    min-height: 36px;
    padding: 6px 22px 6px 8px;
    font-size: 12px;
    font-weight: 800;
  }

  .memo-plan-card {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 12px;
  }

  .memo-plan-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .memo-plan-footer,
  .memo-share-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .memo-modal {
    align-items: end;
    padding: 10px;
  }

  .memo-form,
  .memo-detail,
  .memo-create-sheet {
    max-height: 92vh;
  }

  .memo-create-sheet {
    border-radius: 16px 16px 10px 10px;
  }
}

@media (max-width: 460px) {
  .memo-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memo-toolbar {
    gap: 6px;
    padding: 8px;
  }

  .memo-toolbar select {
    padding-right: 18px;
    padding-left: 6px;
    font-size: 11px;
  }

  .memo-side {
    grid-template-columns: 1fr;
  }

  .memo-stat-card {
    min-height: 68px;
  }

  .memo-plan-meta {
    gap: 5px;
  }
}

#systemCards .system-card {
  --card-rgb: 36, 95, 188;
  --card-accent: #245fbc;
  --card-accent-2: #2d88da;
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--card-rgb), 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(var(--card-rgb), 0.08));
}

#systemCards .system-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 46%;
  height: 4px;
  background: linear-gradient(90deg, var(--card-accent), var(--card-accent-2));
}

#systemCards .system-card span {
  color: var(--card-accent);
}

#systemCards .system-card:hover {
  border-color: rgba(var(--card-rgb), 0.34);
  box-shadow: 0 22px 54px rgba(var(--card-rgb), 0.16);
}

#systemCards .system-card:nth-child(1) {
  --card-rgb: 17, 24, 39;
  --card-accent: #111827;
  --card-accent-2: #4b5563;
}

#systemCards .system-card:nth-child(2) {
  --card-rgb: 14, 165, 233;
  --card-accent: #0f75bc;
  --card-accent-2: #08a7d8;
}

#systemCards .system-card:nth-child(3) {
  --card-rgb: 34, 197, 94;
  --card-accent: #168a52;
  --card-accent-2: #2bb98a;
}

#systemCards .system-card:nth-child(4) {
  --card-rgb: 124, 58, 237;
  --card-accent: #7048c9;
  --card-accent-2: #9a6bea;
}

#systemCards .system-card:nth-child(5) {
  --card-rgb: 239, 68, 68;
  --card-accent: #dc334d;
  --card-accent-2: #f97368;
}

#systemCards .system-card:nth-child(6) {
  --card-rgb: 36, 95, 188;
  --card-accent: #245fbc;
  --card-accent-2: #2d88da;
}

#systemCards .system-card-journalAlmanac {
  --card-rgb: 245, 158, 11;
  --card-accent: #d97706;
  --card-accent-2: #facc15;
}

#systemCards .system-card-chordTransposer {
  --card-rgb: 22, 128, 146;
  --card-accent: #11748a;
  --card-accent-2: #d14f6f;
  min-height: 184px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(22, 128, 146, 0.09) 52%, rgba(209, 79, 111, 0.08)),
    linear-gradient(90deg, rgba(17, 116, 138, 0.08) 1px, transparent 1px);
  background-size: auto, 30px 100%;
}

.chord-system-visual {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  justify-content: start;
  gap: 8px;
  margin-top: 2px;
  color: #17333a;
  font-weight: 900;
}

.chord-system-visual i,
.chord-system-visual em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(17, 116, 138, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  font-style: normal;
  box-shadow: 0 8px 20px rgba(20, 34, 32, 0.08);
}

.chord-system-visual b {
  color: #d14f6f;
}

.chord-system-visual em {
  color: #11748a;
}

#systemCards .system-card-memo {
  --card-rgb: 126, 75, 43;
  --card-accent: #8a5a3c;
  --card-accent-2: #b87948;
}

.chord-transposer-view {
  margin: -18px;
}

.chord-transposer-module-host,
.chord-transposer-module-host * {
  box-sizing: border-box;
}

.chord-transposer-module-host {
  min-width: 0;
}

.chord-transposer {
  --chord-ink: #14272a;
  --chord-muted: #607074;
  --chord-line: rgba(21, 91, 108, 0.15);
  --chord-teal: #11748a;
  --chord-green: #176b57;
  --chord-rose: #d14f6f;
  --chord-gold: #b98520;
  position: relative;
  display: grid;
  gap: 18px;
  min-height: calc(100dvh - 36px);
  padding: clamp(18px, 3vw, 34px);
  color: var(--chord-ink);
  overflow: hidden;
  background:
    linear-gradient(rgba(17, 116, 138, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 107, 87, 0.05) 1px, transparent 1px),
    linear-gradient(120deg, #f6fbfb 0%, #eef8f6 43%, #fff7f5 100%);
  background-size: 34px 34px, 34px 34px, auto;
}

.chord-transposer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(17, 116, 138, 0.08) 23px 24px),
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.66) 42%, transparent 62%);
  opacity: 0.82;
}

.chord-transposer > * {
  position: relative;
  z-index: 1;
}

.chord-transposer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  align-items: end;
  gap: 18px;
}

.chord-hero-copy {
  display: grid;
  gap: 8px;
}

.chord-hero-copy h1 {
  margin: 0;
  color: #102c31;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: 0;
}

.chord-hero-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--chord-muted);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 800;
  line-height: 1.7;
}

.chord-hero-score {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, auto);
  align-items: center;
  justify-content: end;
  gap: 8px;
  min-height: 108px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background:
    repeating-linear-gradient(180deg, transparent 0 15px, rgba(17, 116, 138, 0.18) 16px 17px),
    rgba(255, 255, 255, 0.64);
  box-shadow: 0 18px 46px rgba(20, 34, 32, 0.12);
  backdrop-filter: blur(18px);
}

.chord-hero-score span,
.chord-hero-score b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(20, 34, 32, 0.1);
  color: #17333a;
  font-weight: 950;
}

.chord-hero-score b {
  min-width: 34px;
  color: #fff;
  background: linear-gradient(135deg, var(--chord-teal), var(--chord-rose));
}

.chord-hero-score i {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(17, 116, 138, 0.24);
}

.chord-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

.chord-panel {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  min-height: 620px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 22px 58px rgba(20, 34, 32, 0.13);
  backdrop-filter: blur(18px);
}

.chord-output-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.chord-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.chord-panel-head div {
  min-width: 0;
}

.chord-panel-head span,
.chord-key-grid label > span,
.chord-preference > span,
.chord-signature-head span,
.chord-signature-controls label > span,
.chord-signature-mode > span,
.chord-textarea-label > span {
  color: var(--chord-teal);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.chord-panel-head h2 {
  margin: 2px 0 0;
  color: #122b31;
  font-size: 22px;
  line-height: 1.2;
}

.chord-shift-pill {
  max-width: 52%;
  border: 1px solid rgba(209, 79, 111, 0.2);
  border-radius: 999px;
  background: rgba(255, 247, 248, 0.88);
  color: #9e2f4e;
  font-size: 12px;
  font-weight: 950;
  padding: 8px 10px;
  text-align: right;
}

.chord-key-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.chord-key-grid label,
.chord-preference,
.chord-textarea-label {
  display: grid;
  gap: 7px;
}

.chord-key-grid select,
.chord-textarea-label textarea {
  width: 100%;
  border: 1px solid rgba(17, 116, 138, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--chord-ink);
}

.chord-key-grid select {
  min-height: 44px;
  font-weight: 900;
}

.chord-preference .segmented {
  grid-template-columns: 1fr 1fr;
  margin: 0;
  background: rgba(17, 116, 138, 0.09);
}

.chord-preference .segment.is-active,
.chord-signature-mode .segment.is-active {
  color: #fff;
}

.chord-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chord-tool-row .secondary-button,
.chord-output-panel .primary-button {
  min-width: 82px;
}

.chord-tool-row .secondary-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.2;
}

.chord-signature-finder {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 116, 138, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(240, 252, 252, 0.72));
  padding: 12px;
}

.chord-signature-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.chord-signature-head h3 {
  margin: 2px 0 0;
  color: #122b31;
  font-size: 16px;
  line-height: 1.25;
}

.chord-signature-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  gap: 10px;
}

.chord-signature-controls label,
.chord-signature-mode {
  display: grid;
  gap: 7px;
}

.chord-signature-controls select {
  min-height: 40px;
  border: 1px solid rgba(17, 116, 138, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--chord-ink);
  font-weight: 900;
}

.chord-signature-mode .segmented {
  grid-template-columns: 1fr 1fr;
  margin: 0;
  background: rgba(209, 79, 111, 0.08);
}

.chord-staff-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.chord-staff-preview {
  min-height: 96px;
  border: 1px solid rgba(17, 116, 138, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  overflow: hidden;
}

.chord-staff-svg {
  display: block;
  width: 100%;
  min-height: 96px;
}

.chord-staff-lines line {
  stroke: rgba(17, 116, 138, 0.42);
  stroke-width: 1.25;
}

.chord-staff-clef {
  fill: #17333a;
  font-family: "Bravura", "Noto Music", "Segoe UI Symbol", Georgia, serif;
  font-size: 52px;
  dominant-baseline: middle;
  text-anchor: middle;
}

.chord-staff-symbol {
  fill: #17333a;
  font-family: "Bravura", "Noto Music", "Segoe UI Symbol", Georgia, serif;
  font-size: 31px;
  font-weight: 900;
  dominant-baseline: middle;
  text-anchor: middle;
}

.chord-staff-empty {
  fill: rgba(17, 116, 138, 0.62);
  font-size: 15px;
  font-weight: 950;
  dominant-baseline: middle;
  text-anchor: middle;
}

.chord-signature-result {
  display: grid;
  gap: 5px;
}

.chord-signature-result strong {
  color: #102c31;
  font-size: 20px;
  line-height: 1.2;
}

.chord-signature-result span {
  color: var(--chord-muted);
  font-size: 12px;
  font-weight: 850;
}

.chord-mode-hint {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(209, 79, 111, 0.14);
  border-radius: 8px;
  background: rgba(255, 247, 249, 0.7);
  padding: 10px;
}

.chord-mode-hint strong {
  color: #9e2f4e;
  font-size: 12px;
}

.chord-mode-hint span {
  color: #5d6a6d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.chord-textarea-label {
  min-height: 0;
}

.chord-textarea-label textarea {
  min-height: 360px;
  height: 100%;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.75;
  tab-size: 4;
}

.chord-textarea-label textarea:focus,
.chord-key-grid select:focus,
.chord-signature-controls select:focus {
  border-color: var(--chord-teal);
  box-shadow: 0 0 0 3px rgba(17, 116, 138, 0.13);
}

.chord-meta,
.chord-explain {
  color: var(--chord-muted);
  font-size: 12px;
  font-weight: 850;
}

.chord-explain {
  border: 1px solid rgba(185, 133, 32, 0.2);
  border-radius: 8px;
  background: rgba(255, 250, 235, 0.78);
  color: #7c5514;
  padding: 10px 12px;
}

.chord-output-box {
  min-height: 0;
  border: 1px solid rgba(17, 116, 138, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(rgba(17, 116, 138, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 116, 138, 0.035) 1px, transparent 1px),
    rgba(250, 253, 253, 0.92);
  background-size: 28px 28px, 28px 28px, auto;
  overflow: auto;
}

.chord-output-box pre {
  min-height: 100%;
  margin: 0;
  padding: 16px;
  color: #112b31;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  tab-size: 4;
}

.chord-empty {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
  color: var(--chord-muted);
  font-weight: 850;
  line-height: 1.7;
  text-align: center;
}

.chord-toast {
  min-height: 20px;
  color: var(--chord-green);
  font-size: 12px;
  font-weight: 950;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.chord-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.chord-transposer-mode .app-main {
  width: min(1560px, 100%);
}

@media (max-width: 1120px) {
  .chord-transposer-hero {
    grid-template-columns: 1fr;
  }

  .chord-hero-score {
    justify-content: start;
  }

  .chord-workbench {
    grid-template-columns: 1fr;
  }

  .chord-panel,
  .chord-output-panel {
    min-height: 520px;
  }
}

@media (max-width: 720px) {
  .chord-transposer-view {
    margin: -18px -18px 0;
  }

  .chord-transposer {
    gap: 10px;
    min-height: 100dvh;
    padding: 10px 10px 18px;
  }

  .chord-transposer-hero {
    display: block;
    min-height: 58px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 36px rgba(20, 34, 32, 0.1);
    backdrop-filter: blur(16px);
  }

  .chord-hero-copy {
    display: grid;
    gap: 3px;
  }

  .chord-hero-copy .eyebrow {
    font-size: 11px;
  }

  .chord-hero-copy h1 {
    font-size: 24px;
    line-height: 1.08;
  }

  .chord-hero-copy p {
    display: -webkit-box;
    max-width: none;
    overflow: hidden;
    color: var(--chord-muted);
    font-size: 12px;
    line-height: 1.35;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .chord-hero-score {
    display: none;
  }

  .chord-panel {
    gap: 10px;
    min-height: auto;
    padding: 10px;
  }

  .chord-panel-head {
    align-items: flex-start;
    flex-direction: row;
  }

  .chord-shift-pill {
    max-width: min(58%, 220px);
    padding: 6px 8px;
    text-align: right;
  }

  .chord-key-grid {
    grid-template-columns: minmax(64px, 0.85fr) minmax(64px, 0.85fr) minmax(116px, 1.3fr);
    align-items: end;
    gap: 6px;
  }

  .chord-key-grid label,
  .chord-preference,
  .chord-signature-controls label,
  .chord-signature-mode {
    gap: 5px;
    min-width: 0;
  }

  .chord-preference {
    grid-column: auto;
  }

  .chord-key-grid select,
  .chord-signature-controls select {
    min-height: 38px;
    padding: 7px 8px;
    font-size: 15px;
  }

  .chord-preference .segmented,
  .chord-signature-mode .segmented {
    width: 100%;
    gap: 3px;
    padding: 3px;
  }

  .chord-preference .segment,
  .chord-signature-mode .segment {
    min-height: 32px;
    font-size: 13px;
  }

  .chord-tool-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .chord-tool-row .secondary-button,
  .chord-output-panel .primary-button {
    min-width: 0;
  }

  .chord-tool-row .secondary-button {
    min-height: 32px;
    padding: 0 6px;
    font-size: 12px;
  }

  .chord-signature-finder {
    gap: 9px;
    padding: 10px;
  }

  .chord-signature-head {
    align-items: flex-start;
    flex-direction: row;
  }

  .chord-signature-head h3 {
    font-size: 15px;
  }

  .chord-signature-head .secondary-button {
    min-height: 34px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .chord-signature-controls {
    grid-template-columns: minmax(88px, 1fr) 64px minmax(104px, 1.2fr);
    align-items: end;
    gap: 6px;
  }

  .chord-staff-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .chord-staff-preview,
  .chord-staff-svg {
    min-height: 82px;
  }

  .chord-signature-result strong {
    font-size: 18px;
  }

  .chord-mode-hint {
    padding: 8px;
  }

  .chord-mode-hint span {
    line-height: 1.45;
  }

  .chord-textarea-label textarea {
    min-height: 84px;
    height: auto;
    overflow: hidden;
    resize: none;
    font-size: 13px;
    line-height: 1.55;
  }

  .chord-output-box {
    min-height: 94px;
  }

  .chord-output-box pre {
    min-width: max-content;
    padding: 12px;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
  }

  .chord-empty {
    padding: 12px;
  }
}

@media (max-width: 430px) {
  .chord-key-grid {
    grid-template-columns: minmax(58px, 0.75fr) minmax(58px, 0.75fr) minmax(104px, 1.45fr);
    gap: 5px;
  }

  .chord-signature-controls {
    grid-template-columns: minmax(82px, 1fr) 56px minmax(98px, 1.2fr);
    gap: 5px;
  }

  .chord-key-grid select,
  .chord-signature-controls select {
    padding: 6px;
  }

  .chord-hero-score {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#workstationView .device-card img {
  background: linear-gradient(135deg, #10141c, #2f3642);
}

#workstationView .reserved-block {
  background: linear-gradient(135deg, #b4233d, #ef5368);
}

#workstationView .free-slot {
  color: #6b7280;
}

.office-tabs {
  width: min(100%, 760px);
  margin: 0 0 18px;
}

.office-tabs.segmented {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.office-panel,
.office-admin-panel {
  display: grid;
  gap: 18px;
}

.office-board {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

.office-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.office-item-card {
  display: flex;
  min-height: 188px;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
}

.office-item-main {
  display: grid;
  gap: 8px;
}

.office-item-main h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
}

.office-item-main p,
.office-record-row small,
.office-admin-table small {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}

.office-item-main strong {
  color: #0f172a;
  font-size: 15px;
}

.office-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.office-chip.is-good {
  background: #dcfce7;
  color: #166534;
}

.office-chip.is-warn {
  background: #fef3c7;
  color: #92400e;
}

.office-chip.is-danger {
  background: #fee2e2;
  color: #991b1b;
}

.office-chip.is-muted {
  background: #e5e7eb;
  color: #4b5563;
}

.office-category-block {
  display: grid;
  gap: 10px;
}

.office-category-block h4 {
  margin: 0;
  color: #334155;
  font-size: 15px;
}

.office-category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.office-category-heading span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.office-inventory-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}

.office-inventory-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.office-inventory-table th,
.office-inventory-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  text-align: left;
  vertical-align: middle;
}

.office-inventory-table th {
  color: #64748b;
  background: rgba(239, 246, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.office-inventory-table tbody tr:last-child td {
  border-bottom: 0;
}

.office-inventory-table tbody tr.is-low {
  background: rgba(245, 158, 11, 0.04);
}

.office-inventory-table tbody tr.is-empty {
  background: rgba(239, 68, 68, 0.04);
}

.office-inventory-table td:first-child {
  width: 56%;
}

.office-inventory-table td:nth-child(2) {
  width: 26%;
}

.office-inventory-table strong,
.office-inventory-table small,
.office-inventory-table b {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.office-inventory-table strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.25;
}

.office-inventory-table small {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.office-inventory-table b {
  margin-top: 5px;
  color: #0f172a;
  font-size: 14px;
}

.office-inventory-request-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  box-shadow: none;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
}

.office-inventory-request-button span {
  display: inline;
}

@media (max-width: 720px) {
  #officeInventoryRoot .office-board {
    gap: 12px;
    padding: 14px;
  }

  .office-inventory-category {
    gap: 8px;
  }

  .office-inventory-table {
    min-width: 0;
    table-layout: fixed;
  }

  .office-inventory-table th,
  .office-inventory-table td {
    padding: 9px 8px;
  }

  .office-inventory-table th {
    font-size: 11px;
  }

  .office-inventory-table td:first-child {
    width: 52%;
  }

  .office-inventory-table td:nth-child(2) {
    width: 25%;
  }

  .office-inventory-table th:last-child,
  .office-inventory-table td:last-child {
    width: 23%;
    text-align: right;
  }

  .office-inventory-table strong {
    font-size: 14px;
  }

  .office-inventory-table small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .office-inventory-table b {
    font-size: 13px;
  }

  .office-inventory-table .office-chip {
    padding: 3px 7px;
    font-size: 11px;
  }

  .office-inventory-request-button {
    flex-direction: column;
    min-width: 62px;
    min-height: 50px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .office-inventory-request-button span {
    display: block;
  }
}

@media (max-width: 720px) {
  #officeExperimentRoot .office-board {
    gap: 12px;
    padding: 14px;
  }

  #officeExperimentRoot .panel-heading {
    align-items: center;
    gap: 8px;
  }

  #officeExperimentRoot .panel-heading h3 {
    font-size: 18px;
  }

  #officeExperimentRoot .panel-heading span {
    font-size: 13px;
  }

  #officeExperimentRoot .office-card-grid {
    gap: 10px;
  }

  #officeExperimentRoot .office-item-card {
    min-height: 132px;
    gap: 10px;
    padding: 12px;
  }

  #officeExperimentRoot .office-item-main {
    gap: 6px;
  }

  #officeExperimentRoot .office-chip {
    min-height: 21px;
    padding: 2px 8px;
    font-size: 11px;
  }

  #officeExperimentRoot .office-item-main h3 {
    font-size: 17px;
    line-height: 1.22;
  }

  #officeExperimentRoot .office-item-main p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #officeExperimentRoot .office-item-card .primary-button.compact {
    min-height: 34px;
    font-size: 13px;
  }
}

.office-record-list,
.office-admin-list {
  display: grid;
  gap: 10px;
}

.office-record-row,
.office-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.office-record-row > div,
.office-admin-table td,
.office-admin-table th {
  min-width: 0;
}

.office-record-row strong,
.office-record-row span,
.office-admin-table strong,
.office-admin-table small {
  display: block;
  overflow-wrap: anywhere;
}

.office-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.office-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.office-inventory-heading {
  align-items: center;
}

.office-inventory-heading h3 {
  flex: 0 0 auto;
  white-space: nowrap;
}

.office-inventory-heading .office-heading-actions {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.office-inventory-heading .office-heading-actions span,
.office-inventory-heading .office-heading-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.office-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.42);
}

.office-modal {
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.office-modal-head,
.office-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.office-modal-head h3 {
  margin: 0;
  font-size: 18px;
}

.office-modal-form {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.office-front-admin {
  display: grid;
  gap: 16px;
}

.office-front-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.office-front-admin-list {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.office-front-admin-list > strong {
  color: #334155;
  font-size: 13px;
}

.office-front-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
}

.office-front-admin-row b,
.office-front-admin-row small {
  display: block;
  overflow-wrap: anywhere;
}

.office-front-admin-row b {
  color: #0f172a;
  font-size: 14px;
}

.office-front-admin-row small,
.office-front-admin-row span {
  color: #64748b;
  font-size: 12px;
}

.office-front-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.office-review-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.office-review-stock {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.office-modal-form label,
.office-inline-form label {
  display: grid;
  gap: 6px;
}

.office-modal-form label span {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.office-modal-actions {
  justify-content: flex-end;
  padding: 0;
  border: 0;
}

.office-admin-filters,
.office-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
}

.office-table-wrap {
  overflow-x: auto;
}

.office-admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.office-admin-table th,
.office-admin-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  text-align: left;
  vertical-align: top;
}

.office-admin-table th {
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
}

.office-admin-row {
  grid-template-columns: repeat(4, minmax(110px, 1fr)) auto auto;
}

.office-admin-row.inventory-row {
  grid-template-columns: minmax(120px, 1.1fr) minmax(100px, .8fr) 70px 80px 80px 80px auto auto auto auto auto;
}

.office-admin-row input,
.office-admin-row select,
.office-admin-filters input,
.office-admin-filters select,
.office-inline-form input,
.office-inline-form select,
.office-modal-form input,
.office-modal-form select,
.office-modal-form textarea {
  width: 100%;
  min-width: 0;
}

.finance-tabs.office-tabs.segmented {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 920px);
  touch-action: pan-y;
}

.finance-panel,
.finance-apply-layout,
.finance-apply-form,
.finance-form-section {
  display: grid;
  gap: 16px;
}

.finance-apply-layout {
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
}

.finance-form-section {
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
}

.finance-form-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.finance-form-title strong {
  color: #0f172a;
  font-size: 15px;
}

.finance-form-title span {
  color: #64748b;
  font-size: 12px;
}

.finance-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.finance-apply-form label {
  display: grid;
  gap: 6px;
}

.finance-apply-form label span {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.finance-upload-zone {
  min-height: 112px;
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(37, 99, 235, 0.42);
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.78);
  text-align: center;
  cursor: pointer;
}

.finance-upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.finance-upload-zone span {
  color: #1d4ed8;
  font-size: 14px;
}

.finance-upload-zone small,
.finance-upload-empty {
  color: #64748b;
  font-size: 12px;
}

.finance-upload-zone.is-dragover {
  border-color: #14b8a6;
  background: rgba(204, 251, 241, 0.72);
}

.finance-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.finance-file-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
}

.finance-file-preview {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #eef2ff;
  color: #3730a3;
}

.finance-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.finance-pdf-thumb {
  display: grid;
  height: 100%;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.finance-file-card strong,
.finance-file-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-file-card strong {
  color: #0f172a;
  font-size: 12px;
}

.finance-file-card small {
  color: #64748b;
  font-size: 11px;
}

.finance-file-card .mini-button {
  grid-column: 1 / -1;
}

.finance-form-actions,
.finance-invoice-action,
.finance-invoice-buttons,
.finance-submit-actions,
.finance-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.finance-form-actions {
  justify-content: space-between;
}

.finance-submit-actions {
  justify-content: flex-end;
  margin-left: auto;
}

.finance-invoice-action span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.finance-summary-grid article,
.finance-project-strip article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.62);
}

.finance-summary-grid span,
.finance-summary-grid small,
.finance-project-strip span {
  color: #64748b;
  font-size: 12px;
}

.finance-summary-grid strong {
  color: #0f172a;
  font-size: 18px;
}

.finance-project-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.finance-project-strip strong {
  color: #0f172a;
  font-size: 14px;
}

.finance-history,
.finance-history-block {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.finance-history small,
.finance-history-block small {
  color: #64748b;
  font-size: 11px;
}

.finance-preview-modal {
  display: grid;
  gap: 12px;
}

.finance-invoice-modal {
  display: grid;
  gap: 14px;
}

.finance-preview-modal img,
.finance-preview-modal iframe {
  width: 100%;
  max-height: 62vh;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
  object-fit: contain;
}

.finance-preview-modal iframe {
  min-height: 58vh;
}

.finance-table td {
  vertical-align: middle;
}

.finance-request-filters {
  grid-template-columns: minmax(180px, 1fr) minmax(104px, .48fr) minmax(104px, .48fr) minmax(126px, .56fr);
  gap: 8px;
  align-items: center;
}

.finance-request-filters input,
.finance-request-filters select {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
}

.finance-request-table-wrap {
  overflow-x: visible;
}

.finance-request-table {
  min-width: 0;
  table-layout: fixed;
}

.finance-request-table th,
.finance-request-table td {
  padding: 10px 8px;
}

.finance-request-table th {
  white-space: nowrap;
}

.finance-request-table.has-applicant th:nth-child(1),
.finance-request-table.has-applicant td:nth-child(1),
.finance-request-table.is-own th:nth-child(1),
.finance-request-table.is-own td:nth-child(1) {
  width: 94px;
}

.finance-request-table.has-applicant th:nth-child(2),
.finance-request-table.has-applicant td:nth-child(2) {
  width: 86px;
}

.finance-request-table.has-applicant th:nth-child(3),
.finance-request-table.has-applicant td:nth-child(3),
.finance-request-table.is-own th:nth-child(2),
.finance-request-table.is-own td:nth-child(2) {
  width: 74px;
}

.finance-request-table.has-applicant th:nth-child(4),
.finance-request-table.has-applicant td:nth-child(4),
.finance-request-table.is-own th:nth-child(3),
.finance-request-table.is-own td:nth-child(3) {
  width: 96px;
}

.finance-request-table.has-applicant th:nth-child(6),
.finance-request-table.has-applicant td:nth-child(6),
.finance-request-table.is-own th:nth-child(5),
.finance-request-table.is-own td:nth-child(5) {
  width: 74px;
}

.finance-request-table.has-actions th:last-child,
.finance-request-table.has-actions td:last-child {
  width: 132px;
}

.finance-time-cell {
  display: grid;
  gap: 4px;
  align-content: start;
}

.finance-time-cell > span:first-child {
  display: block;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.18;
}

.finance-time-cell .office-chip {
  width: max-content;
  max-width: 100%;
}

.finance-time-cell small {
  color: #991b1b;
  font-size: 11px;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .office-record-row,
  .office-admin-row,
  .office-admin-row.inventory-row {
    grid-template-columns: 1fr;
  }

  .office-row-actions {
    justify-content: flex-start;
  }

  .office-heading-actions {
    justify-content: flex-start;
  }

  .office-inventory-heading {
    gap: 6px;
    margin-bottom: 18px;
  }

  .office-inventory-heading h3 {
    font-size: 16px;
  }

  .office-inventory-heading .office-heading-actions {
    justify-content: flex-end;
    gap: 6px;
  }

  .office-inventory-heading .office-heading-actions span {
    font-size: 12px;
  }

  .office-inventory-heading .office-heading-actions .secondary-button {
    min-height: 34px;
    padding-right: 9px;
    padding-left: 9px;
    font-size: 12px;
  }

  .office-front-admin-grid,
  .office-front-admin-row,
  .office-review-row {
    grid-template-columns: 1fr;
  }

  .office-review-stock {
    justify-items: start;
  }

  .office-tabs.segmented {
    width: 100%;
    overflow-x: auto;
  }

  .finance-tabs.office-tabs.segmented {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    margin-bottom: 10px;
  }

  .finance-apply-layout,
  .finance-form-grid {
    grid-template-columns: 1fr;
  }

  .finance-form-board,
  .finance-list-board,
  .finance-ledger-board {
    gap: 12px;
    padding: 12px;
  }

  .finance-form-section {
    gap: 10px;
    padding: 10px;
  }

  .finance-form-title {
    align-items: start;
    flex-direction: column;
    gap: 2px;
  }

  .finance-upload-zone {
    min-height: 86px;
    padding: 12px;
  }

  .finance-file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-summary-grid article {
    padding: 10px;
  }

  .finance-summary-grid strong {
    font-size: 15px;
  }

  .finance-form-actions,
  .finance-invoice-action,
  .finance-submit-actions,
  .finance-row-actions,
  .finance-invoice-buttons {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .finance-row-actions .mini-button,
  .finance-submit-actions .compact {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
  }

  .finance-form-actions {
    flex-wrap: wrap;
  }

  .finance-invoice-action,
  .finance-submit-actions {
    width: 100%;
  }

  .finance-submit-actions {
    margin-left: 0;
  }

  .finance-table-wrap {
    overflow-x: auto;
  }

  .finance-table {
    min-width: 760px;
  }

  .finance-request-filters {
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(74px, .72fr));
    gap: 7px;
  }

  .finance-request-filters input,
  .finance-request-filters select {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .finance-request-table-wrap {
    overflow-x: visible;
  }

  .finance-request-table {
    min-width: 0;
  }

  .finance-request-table th,
  .finance-request-table td {
    padding: 8px 5px;
    font-size: 12px;
  }

  .finance-request-table.has-applicant th:nth-child(1),
  .finance-request-table.has-applicant td:nth-child(1),
  .finance-request-table.is-own th:nth-child(1),
  .finance-request-table.is-own td:nth-child(1) {
    width: 76px;
  }

  .finance-request-table.has-applicant th:nth-child(2),
  .finance-request-table.has-applicant td:nth-child(2) {
    width: 68px;
  }

  .finance-request-table.has-applicant th:nth-child(3),
  .finance-request-table.has-applicant td:nth-child(3),
  .finance-request-table.is-own th:nth-child(2),
  .finance-request-table.is-own td:nth-child(2) {
    width: 58px;
  }

  .finance-request-table.has-applicant th:nth-child(4),
  .finance-request-table.has-applicant td:nth-child(4),
  .finance-request-table.is-own th:nth-child(3),
  .finance-request-table.is-own td:nth-child(3) {
    width: 76px;
  }

  .finance-request-table.has-applicant th:nth-child(6),
  .finance-request-table.has-applicant td:nth-child(6),
  .finance-request-table.is-own th:nth-child(5),
  .finance-request-table.is-own td:nth-child(5) {
    width: 60px;
  }

  .finance-request-table.has-actions th:last-child,
  .finance-request-table.has-actions td:last-child {
    width: 104px;
  }
}

#digitalSelfView .messages {
  background:
    linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 251, 255, 0.9));
  background-size: 34px 34px, 34px 34px, auto;
}

#digitalSelfView .assistant .message-bubble,
#digitalSelfView .typing {
  border-color: rgba(14, 165, 233, 0.18);
  background: rgba(247, 253, 255, 0.94);
}

#treeholeView {
  --tree-bg: #ecfdf5;
  --tree-pink: #9ff4c9;
  --tree-mint: #2bb98a;
  --tree-ink: #143d2b;
}

#treeholeView::before {
  background:
    radial-gradient(circle at 18% 10%, rgba(74, 222, 128, 0.2), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(45, 185, 138, 0.16), transparent 30%),
    repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.1) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(34, 197, 94, 0.08) 0 1px, transparent 1px 42px);
}

#treeholeView::after {
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 45%, transparent 58%),
    linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.12), transparent);
}

#treeholeView :is(#treeholeText, .mood-picker span, .treehole-thumb, .treehole-audio-card, .admin-treehole-audio, .treehole-drawing-panel, .treehole-preview-item) {
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(247, 255, 251, 0.88);
}

#treeholeView .mood-picker input:checked + span {
  border-color: #2bb98a;
  background: #e9fff3;
  box-shadow: 0 0 0 3px rgba(43, 185, 138, 0.18);
}

#mbtiView .mbti-portrait {
  background:
    radial-gradient(circle at 25% 20%, rgba(234, 219, 255, 0.58), transparent 34%),
    linear-gradient(135deg, #7048c9, #9a6bea);
}

#mbtiView .mbti-mode-option.is-selected {
  border-color: rgba(124, 58, 237, 0.44);
  background: #f4edff;
}

#calorieView :is(.calorie-native, .calorie-redo) {
  border-color: var(--module-line);
  background:
    radial-gradient(circle at 12% 0%, rgba(239, 68, 68, 0.16), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(249, 115, 104, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 241, 243, 0.94), rgba(255, 250, 250, 0.9));
}

#calorieView :is(.calorie-redo-card-head span, .calorie-card-head span, .calorie-mini-grid strong, .calorie-redo-analysis strong, .calorie-redo-analysis span, .calorie-redo-meal-group h4) {
  color: var(--module-accent);
}

#calorieView .calorie-redo-hero-progress span {
  color: #475569;
}

#calorieView .calorie-redo-photo {
  color: #fff;
  background: linear-gradient(135deg, var(--module-accent), var(--module-accent-2));
  border-color: rgba(var(--module-rgb), 0.34);
  box-shadow: 0 10px 22px var(--module-shadow);
}

#calorieView .calorie-ring {
  background: conic-gradient(var(--module-accent) calc(var(--progress) * 1%), #f5d9df 0);
}

#calorieView .calorie-progress-track .is-good,
#calorieView .calorie-redo-chart polyline {
  background: var(--module-accent);
  stroke: var(--module-accent);
}

#calorieView .calorie-redo-chart.is-body polyline,
#calorieView .calorie-redo-chart.is-body circle {
  stroke: #0f766e;
}

#calorieView .calorie-status.is-good,
#calorieView .calorie-window.is-active,
#calorieView .calorie-redo-window.is-active {
  background: #dcfce7;
  color: #15803d;
}

#calorieView .calorie-status.is-close {
  background: #fef3c7;
  color: #b45309;
}

#calorieView .calorie-status.is-over {
  background: #fee2e2;
  color: #dc2626;
}

#adminView .people-badge.is-good,
#adminView .permission-chip,
#adminView .people-module-chips span {
  background: rgba(51, 65, 85, 0.09);
  color: #334155;
}

#adminView .permission-chip.is-admin {
  background: #e8f0ff;
  color: #245fbc;
}

/* Keep module page backdrops quiet and consistent. */
body {
  background: #f6f7f9;
}

#switcherView,
#workstationView,
#digitalSelfView,
#treeholeView,
#mbtiView,
#calorieView,
#loungeView,
#adminView,
.plaz-module,
#calorieView :is(.calorie-native, .calorie-redo) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 250, 0.96));
  border-color: rgba(226, 232, 240, 0.92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

#workstationView::before,
#digitalSelfView::before,
#treeholeView::before,
#treeholeView::after,
#mbtiView::before,
#calorieView::before,
#loungeView::before,
#adminView::before,
.plaz-module::before,
.calorie-native::before,
.calorie-redo::before {
  display: none;
}

#mbtiView {
  overflow: visible;
}

#mbtiView .mbti-result-card {
  color: var(--ink);
}

#mbtiView .mbti-result-card h3 {
  color: var(--ink);
}

#mbtiView .mbti-result-card p {
  color: var(--muted);
}

#mbtiView .mbti-result-card small {
  color: var(--gold);
}

#mbtiView .mbti-result-copy > .eyebrow {
  color: var(--module-accent);
}

@media (max-width: 980px) {
  :is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #loungeView, #adminView) {
    padding: 10px;
    border-radius: 10px;
  }
}

@media (max-width: 620px) {
  :is(#workstationView, #digitalSelfView, #treeholeView, #mbtiView, #memoView, #calorieView, #loungeView, #adminView) {
    padding: 8px;
  }

  #calorieView,
  #calorieView .calorie-module-host,
  #calorieView .calorie-redo {
    overflow: visible;
  }

  #calorieView .calorie-redo {
    padding: 8px 8px calc(104px + env(safe-area-inset-bottom));
  }

  #calorieView .calorie-redo-mobile-tabs {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 160;
    display: grid;
  }

  #systemCards .system-card::before {
    width: 58%;
    height: 3px;
  }
}

.lounge-module-host,
.lounge-module-root {
  min-width: 0;
}

.lounge-module-root {
  display: grid;
  gap: 18px;
}

.lounge-system-card {
  background:
    linear-gradient(135deg, rgba(53, 168, 182, 0.09), transparent 48%),
    var(--surface);
}

.lounge-hero,
.lounge-section,
.lounge-play-surface,
.lounge-side-card,
.lounge-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(20, 34, 32, 0.08);
}

.lounge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  padding: 22px;
}

.lounge-title-block h2,
.lounge-room-header h2 {
  margin: 3px 0 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
}

.lounge-title-block strong {
  display: block;
  margin-top: 6px;
  color: var(--blue);
  font-size: 18px;
}

.lounge-title-block p,
.lounge-room-header p,
.lounge-game-card p,
.lounge-room-summary p,
.lounge-placeholder-table span,
.lounge-section-head span {
  color: var(--muted);
  line-height: 1.65;
}

.lounge-hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
}

.lounge-search span {
  color: var(--muted);
}

.lounge-code-form {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(88px, 1fr) 88px;
  align-items: end;
  gap: 8px;
}

.lounge-hero-actions > .primary-button,
.lounge-hero-actions > .secondary-button,
.lounge-code-form .secondary-button {
  width: 88px;
  min-height: 44px;
  padding: 0 10px;
  white-space: nowrap;
}

.lounge-mobile-toggles,
.lounge-room-section-mobile {
  display: none;
}

.lounge-categories {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px;
  border: 1px solid rgba(36, 95, 156, 0.12);
  border-radius: 12px;
  background: rgba(248, 251, 250, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lounge-categories::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.lounge-category {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: none;
}

.lounge-category:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.72);
  transform: none;
}

.lounge-category.is-active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}

.lounge-section {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.lounge-section-head,
.lounge-game-top,
.lounge-room-card,
.lounge-dialog-head,
.lounge-gameplay-head,
.lounge-side-head,
.lounge-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lounge-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lounge-section-head h3,
.lounge-game-card h3,
.lounge-play-surface h3,
.lounge-dialog h3 {
  margin: 0;
}

.lounge-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lounge-game-card,
.lounge-room-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.lounge-game-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 12px 30px rgba(20, 34, 32, 0.07);
}

.lounge-game-body {
  display: grid;
  gap: 12px;
  min-height: 278px;
  padding: 16px;
}

.lounge-game-visual {
  position: relative;
  height: 154px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.72), transparent 22%),
    linear-gradient(135deg, #4357e8, #15a9c6);
  isolation: isolate;
}

.lounge-game-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 28px 28px;
}

.lounge-game-visual.has-icon-image {
  display: grid;
  place-items: center;
}

.lounge-game-visual-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: min(66%, 142px);
  max-height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(15, 23, 42, 0.18));
}

.art-glow,
.art-shape {
  position: absolute;
  display: block;
}

.art-glow {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  filter: blur(2px);
}

.art-glow-a {
  left: -36px;
  top: -36px;
}

.art-glow-b {
  right: -28px;
  bottom: -44px;
  background: rgba(255, 230, 168, 0.24);
}

.art-shape {
  border-radius: 14px;
  box-shadow: 0 14px 26px rgba(16, 24, 40, 0.14);
}

.visual-werewolf {
  background:
    radial-gradient(circle at 78% 24%, #f8fafc 0 22px, transparent 23px),
    linear-gradient(135deg, #1d2671, #13a6bf);
}

.visual-werewolf .art-main {
  left: 34px;
  bottom: 25px;
  width: 98px;
  height: 58px;
  background: #172554;
  clip-path: polygon(8% 100%, 24% 42%, 36% 78%, 51% 20%, 68% 82%, 82% 48%, 96% 100%);
}

.visual-werewolf .art-second,
.visual-werewolf .art-third,
.visual-werewolf .art-fourth {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #a7f3d0;
  box-shadow: 0 0 18px rgba(167, 243, 208, 0.8);
}

.visual-werewolf .art-second {
  left: 190px;
  top: 54px;
}

.visual-werewolf .art-third {
  left: 238px;
  top: 84px;
}

.visual-werewolf .art-fourth {
  right: 58px;
  top: 62px;
}

.visual-draw_guess {
  background: linear-gradient(135deg, #36c6d3, #8b5cf6);
}

.visual-draw_guess .art-main {
  left: 44px;
  top: 30px;
  width: 128px;
  height: 84px;
  border: 8px solid #f8fafc;
  background:
    radial-gradient(circle at 62% 42%, #f97316 0 10px, transparent 11px),
    linear-gradient(135deg, #e0f2fe, #fff7ed);
}

.visual-draw_guess .art-second {
  right: 52px;
  top: 38px;
  width: 26px;
  height: 92px;
  border-radius: 999px;
  background: #f59e0b;
  transform: rotate(36deg);
}

.visual-draw_guess .art-third {
  right: 68px;
  top: 26px;
  width: 20px;
  height: 34px;
  border-radius: 999px 999px 8px 8px;
  background: #1e293b;
  transform: rotate(36deg);
}

.visual-gomoku {
  background: linear-gradient(135deg, #4864f2, #16a9be);
}

.visual-gomoku .art-main {
  left: 50%;
  top: 20px;
  width: 124px;
  height: 112px;
  border: 8px solid rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 26% 30%, #111827 0 9px, transparent 10px),
    radial-gradient(circle at 64% 30%, #fff 0 9px, transparent 10px),
    radial-gradient(circle at 45% 55%, #111827 0 9px, transparent 10px),
    radial-gradient(circle at 72% 72%, #fff 0 9px, transparent 10px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 23, 42, 0.18) 1px, transparent 1px),
    #e8fff6;
  background-size: auto, auto, auto, auto, 24px 24px, 24px 24px, auto;
  transform: translateX(-50%) rotate(-3deg);
}

.visual-landlord,
.visual-guandan {
  background: linear-gradient(135deg, #273c75, #14a7c4);
}

.visual-landlord .art-main,
.visual-landlord .art-second,
.visual-landlord .art-third,
.visual-guandan .art-main,
.visual-guandan .art-second,
.visual-guandan .art-third,
.visual-guandan .art-fourth {
  top: 34px;
  width: 62px;
  height: 88px;
  border: 6px solid #fff;
  background: linear-gradient(180deg, #fee2e2, #fff);
}

.visual-landlord .art-main,
.visual-guandan .art-main {
  left: 86px;
  transform: rotate(-13deg);
}

.visual-landlord .art-second,
.visual-guandan .art-second {
  left: 138px;
  transform: rotate(3deg);
}

.visual-landlord .art-third,
.visual-guandan .art-third {
  left: 190px;
  transform: rotate(14deg);
}

.visual-guandan .art-fourth {
  left: 242px;
  background: linear-gradient(180deg, #dbeafe, #fff);
  transform: rotate(25deg);
}

.visual-texas_holdem {
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
}

.visual-texas_holdem .art-main,
.visual-texas_holdem .art-second,
.visual-texas_holdem .art-third,
.visual-texas_holdem .art-fourth,
.visual-texas_holdem .art-fifth {
  top: 38px;
  width: 56px;
  height: 82px;
  border: 6px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #fff, #e0f2fe);
}

.visual-texas_holdem .art-main {
  left: 56px;
  transform: rotate(-18deg);
}

.visual-texas_holdem .art-second {
  left: 112px;
  transform: rotate(-8deg);
}

.visual-texas_holdem .art-third {
  left: 168px;
  transform: rotate(2deg);
}

.visual-texas_holdem .art-fourth {
  left: 224px;
  transform: rotate(12deg);
}

.visual-texas_holdem .art-fifth {
  left: 280px;
  background: linear-gradient(180deg, #fee2e2, #fff);
  transform: rotate(21deg);
}

.visual-texas_holdem .art-sixth {
  right: 46px;
  bottom: 30px;
  width: 52px;
  height: 18px;
  border-radius: 999px;
  background: #facc15;
  box-shadow: 0 -10px 0 #ef4444, 0 -20px 0 #22c55e;
}

.visual-mahjong {
  background: linear-gradient(135deg, #245f9c, #16a085);
}

.visual-mahjong .art-main,
.visual-mahjong .art-second,
.visual-mahjong .art-third,
.visual-mahjong .art-fourth {
  top: 42px;
  width: 54px;
  height: 76px;
  border: 6px solid rgba(255, 255, 255, 0.88);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(222, 247, 238, 0.96));
}

.visual-mahjong .art-main {
  left: 72px;
  transform: rotate(-10deg);
}

.visual-mahjong .art-second {
  left: 136px;
  transform: rotate(-2deg);
}

.visual-mahjong .art-third {
  left: 200px;
  transform: rotate(7deg);
}

.visual-mahjong .art-fourth {
  left: 264px;
  transform: rotate(15deg);
}

.visual-mahjong .art-fifth,
.visual-mahjong .art-sixth {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.7);
}

.visual-mahjong .art-fifth {
  left: 52px;
  top: 58px;
}

.visual-mahjong .art-sixth {
  right: 56px;
  bottom: 34px;
}

.visual-rps {
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
}

.visual-rps .art-main,
.visual-rps .art-second,
.visual-rps .art-third {
  top: 42px;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  border: 6px solid rgba(255, 255, 255, 0.78);
  background: #f8fafc;
}

.visual-rps .art-main {
  left: 62px;
  clip-path: polygon(18% 18%, 72% 18%, 86% 40%, 78% 76%, 25% 84%, 10% 54%);
}

.visual-rps .art-second {
  left: 147px;
  border-radius: 999px 999px 22px 22px;
  transform: rotate(-8deg);
}

.visual-rps .art-third {
  left: 232px;
  border-radius: 18px;
  transform: rotate(9deg);
}

.visual-liars_dice,
.visual-yacht_dice {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.visual-liars_dice .art-main,
.visual-liars_dice .art-second,
.visual-yacht_dice .art-main,
.visual-yacht_dice .art-second,
.visual-yacht_dice .art-third {
  width: 66px;
  height: 66px;
  border: 7px solid #fff;
  background:
    radial-gradient(circle at 30% 30%, #2563eb 0 5px, transparent 6px),
    radial-gradient(circle at 70% 70%, #2563eb 0 5px, transparent 6px),
    #f8fafc;
}

.visual-liars_dice .art-main,
.visual-yacht_dice .art-main {
  left: 86px;
  top: 44px;
  transform: rotate(-12deg);
}

.visual-liars_dice .art-second,
.visual-yacht_dice .art-second {
  left: 172px;
  top: 34px;
  transform: rotate(10deg);
}

.visual-yacht_dice .art-third {
  left: 246px;
  top: 58px;
  transform: rotate(22deg);
}

.visual-yacht_dice .art-fourth {
  left: 42px;
  bottom: 24px;
  width: 250px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.visual-undercover {
  background: linear-gradient(135deg, #4338ca, #14b8a6);
}

.visual-undercover .art-main,
.visual-undercover .art-second {
  width: 118px;
  height: 72px;
  border: 7px solid rgba(255, 255, 255, 0.88);
  background: #f8fafc;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 62% 78%, 46% 100%, 50% 78%, 0 78%);
}

.visual-undercover .art-main {
  left: 58px;
  top: 34px;
  transform: rotate(-5deg);
}

.visual-undercover .art-second {
  left: 178px;
  top: 48px;
  width: 92px;
  height: 58px;
  background: #dffaf3;
  transform: rotate(7deg) scaleX(-1);
}

.visual-undercover .art-third,
.visual-undercover .art-fourth {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #4338ca;
  box-shadow: 24px 0 0 #4338ca, 48px 0 0 #4338ca;
}

.visual-undercover .art-third {
  left: 88px;
  top: 62px;
}

.visual-undercover .art-fourth {
  left: 204px;
  top: 72px;
  background: #0f766e;
  box-shadow: 22px 0 0 #0f766e;
}

.visual-sea_turtle {
  background: linear-gradient(135deg, #0f766e, #38bdf8);
}

.visual-sea_turtle .art-main {
  left: 68px;
  top: 82px;
  width: 210px;
  height: 46px;
  border: 8px solid rgba(255, 255, 255, 0.86);
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, #ecfeff, #a7f3d0);
}

.visual-sea_turtle .art-second {
  left: 108px;
  top: 44px;
  width: 46px;
  height: 48px;
  border-radius: 999px 999px 16px 16px;
  background: #f8fafc;
  transform: rotate(-12deg);
}

.visual-sea_turtle .art-third {
  left: 170px;
  top: 36px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 52% 74%, #0f766e 0 5px, transparent 6px),
    radial-gradient(circle at 58% 28%, transparent 0 11px, #0f766e 12px 17px, transparent 18px),
    #f8fafc;
}

.visual-sea_turtle .art-fourth {
  left: 232px;
  top: 52px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: -34px -16px 0 rgba(255, 255, 255, 0.22);
}

.visual-avalon {
  background: linear-gradient(135deg, #312e81, #0ea5e9);
}

.visual-avalon .art-main {
  left: 108px;
  top: 26px;
  width: 86px;
  height: 104px;
  border: 7px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #fef3c7, #f8fafc);
  clip-path: polygon(50% 0, 94% 18%, 84% 76%, 50% 100%, 16% 76%, 6% 18%);
}

.visual-avalon .art-second {
  left: 202px;
  top: 28px;
  width: 16px;
  height: 104px;
  border-radius: 999px;
  background: #f8fafc;
  transform: rotate(19deg);
}

.visual-avalon .art-third {
  left: 188px;
  top: 54px;
  width: 48px;
  height: 12px;
  border-radius: 999px;
  background: #facc15;
  transform: rotate(19deg);
}

.visual-avalon .art-fourth,
.visual-avalon .art-fifth {
  width: 54px;
  height: 70px;
  border: 6px solid rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.2);
}

.visual-avalon .art-fourth {
  left: 54px;
  top: 58px;
  transform: rotate(-14deg);
}

.visual-avalon .art-fifth {
  right: 48px;
  top: 58px;
  transform: rotate(13deg);
}

.visual-othello {
  background: linear-gradient(135deg, #0f172a, #059669);
}

.visual-othello .art-main {
  left: 50%;
  top: 22px;
  width: 126px;
  height: 110px;
  border: 8px solid rgba(255, 255, 255, 0.76);
  background:
    radial-gradient(circle at 28% 28%, #111827 0 12px, transparent 13px),
    radial-gradient(circle at 72% 28%, #f8fafc 0 12px, transparent 13px),
    radial-gradient(circle at 28% 72%, #f8fafc 0 12px, transparent 13px),
    radial-gradient(circle at 72% 72%, #111827 0 12px, transparent 13px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.22) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 23, 42, 0.22) 1px, transparent 1px),
    #bbf7d0;
  background-size: auto, auto, auto, auto, 31px 31px, 31px 31px, auto;
  transform: translateX(-50%) rotate(3deg);
}

.visual-othello .art-second,
.visual-othello .art-third {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #f8fafc;
}

.visual-othello .art-second {
  left: 68px;
  top: 44px;
}

.visual-othello .art-third {
  right: 70px;
  bottom: 38px;
  background: #111827;
}

.visual-coop_minesweeper {
  background: linear-gradient(135deg, #2563eb, #10b981);
}

.visual-coop_minesweeper .art-main {
  left: 58px;
  top: 28px;
  width: 184px;
  height: 104px;
  border: 8px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 28% 32%, #2563eb 0 9px, transparent 10px),
    radial-gradient(circle at 74% 70%, #111827 0 12px, transparent 13px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.16) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 23, 42, 0.16) 1px, transparent 1px),
    #f8fafc;
  background-size: auto, auto, 36px 32px, 36px 32px, auto;
}

.visual-coop_minesweeper .art-second {
  left: 228px;
  top: 42px;
  width: 18px;
  height: 70px;
  border-radius: 999px;
  background: #f8fafc;
}

.visual-coop_minesweeper .art-third {
  left: 244px;
  top: 42px;
  width: 54px;
  height: 34px;
  border-radius: 10px 10px 10px 2px;
  background: #ef4444;
}

.visual-coop_minesweeper .art-fourth {
  left: 250px;
  top: 78px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #111827;
  box-shadow:
    0 -18px 0 -11px #111827,
    0 18px 0 -11px #111827,
    18px 0 0 -11px #111827,
    -18px 0 0 -11px #111827;
}

.visual-ludo {
  background: linear-gradient(135deg, #4f46e5, #f97316);
}

.visual-ludo .art-main {
  left: 50%;
  top: 24px;
  width: 124px;
  height: 108px;
  border: 8px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 24% 24%, #ef4444 0 13px, transparent 14px),
    radial-gradient(circle at 76% 24%, #facc15 0 13px, transparent 14px),
    radial-gradient(circle at 24% 76%, #22c55e 0 13px, transparent 14px),
    radial-gradient(circle at 76% 76%, #3b82f6 0 13px, transparent 14px),
    linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.72) 42% 58%, transparent 58%),
    linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.72) 42% 58%, transparent 58%),
    #f8fafc;
  transform: translateX(-50%) rotate(-2deg);
}

.visual-ludo .art-second,
.visual-ludo .art-third,
.visual-ludo .art-fourth,
.visual-ludo .art-fifth {
  width: 28px;
  height: 28px;
  border: 5px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px 999px 999px 8px;
}

.visual-ludo .art-second {
  left: 58px;
  top: 42px;
  background: #ef4444;
}

.visual-ludo .art-third {
  right: 62px;
  top: 46px;
  background: #facc15;
  transform: rotate(82deg);
}

.visual-ludo .art-fourth {
  left: 68px;
  bottom: 34px;
  background: #22c55e;
  transform: rotate(-82deg);
}

.visual-ludo .art-fifth {
  right: 76px;
  bottom: 32px;
  background: #3b82f6;
  transform: rotate(180deg);
}

.visual-uno {
  background: linear-gradient(135deg, #ef4444, #facc15 48%, #2563eb);
}

.visual-uno .art-main,
.visual-uno .art-second,
.visual-uno .art-third,
.visual-uno .art-fourth {
  top: 34px;
  width: 66px;
  height: 92px;
  border: 7px solid rgba(255, 255, 255, 0.88);
  border-radius: 18px;
}

.visual-uno .art-main {
  left: 66px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.86) 0 22px, transparent 23px),
    #ef4444;
  transform: rotate(-17deg);
}

.visual-uno .art-second {
  left: 130px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.86) 0 22px, transparent 23px),
    #facc15;
  transform: rotate(-4deg);
}

.visual-uno .art-third {
  left: 194px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.86) 0 22px, transparent 23px),
    #22c55e;
  transform: rotate(9deg);
}

.visual-uno .art-fourth {
  left: 258px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.86) 0 22px, transparent 23px),
    #2563eb;
  transform: rotate(18deg);
}

.visual-word_chain {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
}

.visual-word_chain .art-main,
.visual-word_chain .art-second,
.visual-word_chain .art-third {
  width: 82px;
  height: 54px;
  border: 7px solid rgba(255, 255, 255, 0.86);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.24) 0 18px, transparent 19px),
    #f8fafc;
}

.visual-word_chain .art-main {
  left: 58px;
  top: 42px;
  transform: rotate(-7deg);
}

.visual-word_chain .art-second {
  left: 150px;
  top: 70px;
  background:
    linear-gradient(90deg, rgba(6, 182, 212, 0.24) 0 18px, transparent 19px),
    #f8fafc;
}

.visual-word_chain .art-third {
  left: 242px;
  top: 42px;
  transform: rotate(7deg);
}

.visual-word_chain .art-fourth,
.visual-word_chain .art-fifth {
  top: 70px;
  width: 44px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: none;
}

.visual-word_chain .art-fourth {
  left: 126px;
  transform: rotate(18deg);
}

.visual-word_chain .art-fifth {
  left: 218px;
  transform: rotate(-18deg);
}

.lounge-game-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  background: #eef5f2;
  color: var(--green);
  font-weight: 900;
}

.lounge-game-icon.has-image {
  overflow: hidden;
  background: #eef7ff;
  padding: 5px;
}

.lounge-game-icon.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lounge-game-top span:not(.lounge-game-icon),
.lounge-game-stats,
.lounge-room-card span,
.lounge-room-badges span,
.lounge-player span,
.lounge-side-head span {
  color: var(--muted);
  font-size: 13px;
}

.lounge-game-meta,
.lounge-game-stats,
.lounge-room-badges,
.lounge-score-row,
.lounge-rule-grid,
.lounge-card-actions,
.lounge-room-actions,
.lounge-room-controls,
.lounge-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lounge-game-meta span,
.lounge-room-badges span,
.lounge-score-row span,
.lounge-rule-grid span {
  border: 1px solid #e5ece9;
  border-radius: 999px;
  background: #f8fbfa;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.lounge-room-list {
  display: grid;
  gap: 10px;
}

.lounge-room-card {
  padding: 14px;
}

.lounge-room-card > div:first-child {
  min-width: 0;
}

.lounge-room-card strong,
.lounge-room-card span {
  display: block;
}

.lounge-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.28);
}

.lounge-dialog {
  width: min(720px, 100%);
  max-height: min(780px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
}

.lounge-ios-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.34);
}

.lounge-ios-confirm {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.lounge-ios-confirm strong {
  color: var(--ink);
  font-size: 16px;
}

.lounge-ios-confirm p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.lounge-ios-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lounge-module-root.is-ios-device :is(input, textarea, select) {
  font-size: 16px;
}

.lounge-module-root.is-ios-device :is(.primary-button, .secondary-button, .mini-button, .icon-button) {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(67, 87, 232, 0.14);
}

.lounge-create-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lounge-create-form .wide-field,
.lounge-safe-note,
.lounge-dialog-actions {
  grid-column: 1 / -1;
}

.lounge-toggle-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
  padding: 12px;
}

.lounge-toggle-field input {
  width: 20px;
  height: 20px;
}

.lounge-toggle-field span {
  display: grid;
  gap: 3px;
}

.lounge-toggle-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lounge-safe-note {
  margin: 0;
  border: 1px solid #e5ece9;
  border-radius: 12px;
  background: #f8fbfa;
  color: var(--muted);
  padding: 12px 14px;
  line-height: 1.65;
}

.lounge-error {
  border-style: solid;
  color: var(--red);
}

.lounge-room-page {
  display: grid;
  gap: 16px;
}

.lounge-room-page.room-theme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border-radius: 18px;
}

.lounge-room-page.room-theme::before,
.lounge-room-page.room-theme::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.lounge-room-page.room-theme::before {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.88), transparent 22%),
    var(--room-theme-bg, linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(6, 182, 212, 0.14))),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 250, 0.82));
  background-size: auto, var(--room-theme-bg-size, auto), auto;
}

.lounge-room-page.room-theme::after {
  z-index: -1;
  opacity: 0.34;
  background: var(--room-theme-art, radial-gradient(circle at 84% 18%, rgba(79, 70, 229, 0.22), transparent 18%));
  mix-blend-mode: multiply;
}

.lounge-room-page.room-theme > * {
  position: relative;
  z-index: 1;
}

.room-theme-werewolf {
  --room-theme-bg:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.95) 0 42px, rgba(255, 255, 255, 0.18) 43px 64px, transparent 65px),
    linear-gradient(135deg, rgba(23, 37, 84, 0.22), rgba(14, 116, 144, 0.18));
  --room-theme-art:
    linear-gradient(140deg, transparent 0 58%, rgba(15, 23, 42, 0.32) 59% 60%, transparent 61%),
    radial-gradient(circle at 18% 78%, rgba(15, 23, 42, 0.26) 0 90px, transparent 91px),
    radial-gradient(circle at 34% 76%, rgba(15, 23, 42, 0.18) 0 70px, transparent 71px);
}

.room-theme-draw_guess {
  --room-theme-bg:
    radial-gradient(circle at 16% 24%, rgba(251, 146, 60, 0.24) 0 54px, transparent 56px),
    radial-gradient(circle at 86% 18%, rgba(168, 85, 247, 0.22) 0 58px, transparent 60px),
    linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(244, 114, 182, 0.12));
  --room-theme-art:
    linear-gradient(100deg, transparent 0 18%, rgba(245, 158, 11, 0.36) 19% 22%, transparent 23%),
    radial-gradient(circle at 70% 70%, rgba(34, 197, 94, 0.18) 0 70px, transparent 72px);
}

.room-theme-undercover,
.room-theme-sea_turtle {
  --room-theme-bg:
    radial-gradient(circle at 72% 18%, rgba(251, 191, 36, 0.24) 0 52px, transparent 54px),
    linear-gradient(135deg, rgba(31, 41, 55, 0.16), rgba(20, 184, 166, 0.12));
  --room-theme-art:
    linear-gradient(90deg, transparent 0 16%, rgba(15, 23, 42, 0.18) 17% 18%, transparent 19%),
    radial-gradient(circle at 26% 36%, rgba(15, 23, 42, 0.18) 0 78px, transparent 80px);
}

.room-theme-avalon {
  --room-theme-bg:
    radial-gradient(circle at 80% 16%, rgba(251, 191, 36, 0.2) 0 54px, transparent 56px),
    linear-gradient(135deg, rgba(30, 64, 175, 0.18), rgba(100, 116, 139, 0.14));
  --room-theme-art:
    linear-gradient(135deg, transparent 0 62%, rgba(71, 85, 105, 0.24) 63% 66%, transparent 67%),
    linear-gradient(90deg, transparent 0 44%, rgba(148, 163, 184, 0.22) 45% 55%, transparent 56%);
}

.room-theme-gomoku,
.room-theme-othello {
  --room-theme-bg-size: 42px 42px, 42px 42px, auto;
  --room-theme-bg:
    linear-gradient(90deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(59, 130, 246, 0.1));
  --room-theme-art:
    radial-gradient(circle at 18% 28%, rgba(15, 23, 42, 0.3) 0 30px, transparent 31px),
    radial-gradient(circle at 30% 44%, rgba(255, 255, 255, 0.72) 0 30px, transparent 31px),
    radial-gradient(circle at 78% 70%, rgba(15, 23, 42, 0.22) 0 40px, transparent 41px);
}

.room-theme-coop_minesweeper {
  --room-theme-bg-size: 36px 36px, 36px 36px, auto;
  --room-theme-bg:
    linear-gradient(90deg, rgba(37, 99, 235, 0.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, 0.09) 1px, transparent 1px),
    linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(14, 165, 233, 0.14));
  --room-theme-art:
    radial-gradient(circle at 78% 24%, rgba(15, 23, 42, 0.26) 0 18px, transparent 19px),
    linear-gradient(120deg, transparent 0 20%, rgba(239, 68, 68, 0.28) 21% 28%, transparent 29%);
}

.room-theme-ludo {
  --room-theme-bg:
    radial-gradient(circle at 22% 20%, rgba(239, 68, 68, 0.22) 0 50px, transparent 52px),
    radial-gradient(circle at 78% 26%, rgba(34, 197, 94, 0.2) 0 50px, transparent 52px),
    radial-gradient(circle at 28% 78%, rgba(245, 158, 11, 0.2) 0 50px, transparent 52px),
    linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(168, 85, 247, 0.1));
  --room-theme-art:
    linear-gradient(45deg, transparent 0 45%, rgba(59, 130, 246, 0.24) 46% 54%, transparent 55%),
    linear-gradient(-45deg, transparent 0 45%, rgba(239, 68, 68, 0.2) 46% 54%, transparent 55%);
}

.room-theme-landlord,
.room-theme-guandan,
.room-theme-uno,
.room-theme-texas_holdem {
  --room-theme-bg:
    radial-gradient(circle at 14% 18%, rgba(239, 68, 68, 0.22) 0 62px, transparent 64px),
    radial-gradient(circle at 86% 18%, rgba(250, 204, 21, 0.2) 0 54px, transparent 56px),
    linear-gradient(135deg, rgba(30, 64, 175, 0.14), rgba(20, 184, 166, 0.12));
  --room-theme-art:
    linear-gradient(78deg, transparent 0 58%, rgba(239, 68, 68, 0.28) 59% 64%, transparent 65%),
    linear-gradient(102deg, transparent 0 48%, rgba(255, 255, 255, 0.52) 49% 55%, transparent 56%);
}

.room-theme-mahjong {
  --room-theme-bg-size: 48px 48px, 48px 48px, auto;
  --room-theme-bg:
    linear-gradient(90deg, rgba(21, 128, 61, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 128, 61, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, rgba(22, 101, 52, 0.13), rgba(6, 182, 212, 0.1));
  --room-theme-art:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, 0.62) 19% 28%, transparent 29%),
    linear-gradient(90deg, transparent 0 62%, rgba(255, 255, 255, 0.52) 63% 72%, transparent 73%);
}

.room-theme-rps {
  --room-theme-bg:
    radial-gradient(circle at 22% 24%, rgba(79, 70, 229, 0.22) 0 52px, transparent 54px),
    radial-gradient(circle at 78% 24%, rgba(6, 182, 212, 0.2) 0 52px, transparent 54px),
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(59, 130, 246, 0.12));
  --room-theme-art:
    radial-gradient(circle at 22% 66%, rgba(255, 255, 255, 0.58) 0 48px, transparent 50px),
    radial-gradient(circle at 50% 66%, rgba(255, 255, 255, 0.5) 0 48px, transparent 50px),
    radial-gradient(circle at 78% 66%, rgba(255, 255, 255, 0.46) 0 48px, transparent 50px);
}

.room-theme-word_chain {
  --room-theme-bg:
    radial-gradient(circle at 18% 22%, rgba(20, 184, 166, 0.18) 0 54px, transparent 56px),
    linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(245, 158, 11, 0.1));
  --room-theme-art:
    linear-gradient(90deg, transparent 0 24%, rgba(15, 23, 42, 0.16) 25% 30%, transparent 31%),
    linear-gradient(90deg, transparent 0 54%, rgba(15, 23, 42, 0.14) 55% 60%, transparent 61%);
}

.room-theme-liars_dice,
.room-theme-yacht_dice {
  --room-theme-bg:
    radial-gradient(circle at 20% 24%, rgba(37, 99, 235, 0.22) 0 56px, transparent 58px),
    radial-gradient(circle at 84% 18%, rgba(6, 182, 212, 0.2) 0 56px, transparent 58px),
    linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(79, 70, 229, 0.1));
  --room-theme-art:
    radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.72) 0 38px, transparent 39px),
    radial-gradient(circle at 42% 60%, rgba(255, 255, 255, 0.58) 0 34px, transparent 35px),
    radial-gradient(circle at 64% 72%, rgba(255, 255, 255, 0.5) 0 36px, transparent 37px);
}

.lounge-room-header {
  align-items: flex-start;
}

.lounge-room-header > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.lounge-room-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lounge-room-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: start;
  gap: 16px;
}

.lounge-game-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.lounge-play-surface,
.lounge-side-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.lounge-room-summary {
  display: flex;
  gap: 12px;
}

.lounge-duel-row,
.lounge-dice-panel,
.lounge-revealed-dice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lounge-duel-row article,
.lounge-dice-panel article,
.lounge-revealed-dice article,
.lounge-result-box,
.lounge-placeholder-table {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fbfb;
  padding: 14px;
}

.lounge-choice-row,
.lounge-bid-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.lounge-bid-form label {
  width: min(150px, 100%);
}

.lounge-gomoku-board {
  display: grid;
  grid-template-columns: repeat(var(--gomoku-size), 1fr);
  width: min(100%, 660px);
  aspect-ratio: 1;
  border: 1px solid #cbd8d4;
  border-radius: 12px;
  overflow: hidden;
  background: #edf4f2;
  touch-action: manipulation;
}

.lounge-gomoku-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #d5dfdc;
  border-bottom: 1px solid #d5dfdc;
  background: transparent;
  padding: 0;
}

.lounge-gomoku-cell:disabled {
  opacity: 1;
}

.lounge-stone {
  display: grid;
  place-items: center;
  width: 78%;
  height: 78%;
  border-radius: 999px;
  font-size: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.16);
}

.lounge-stone.black {
  background: #1f2937;
}

.lounge-stone.white {
  background: #fff;
}

.gomoku-play-grid {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(260px, 330px);
  align-items: start;
  gap: 16px;
}

.lounge-gomoku-board {
  position: relative;
  display: block;
  padding: 0;
  overflow: visible;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(240, 247, 255, 0.72));
}

.lounge-gomoku-intersections {
  position: absolute;
  inset: 22px;
  overflow: visible;
  touch-action: manipulation;
  box-shadow:
    inset -1px 0 0 rgba(74, 85, 126, 0.28),
    inset 0 -1px 0 rgba(74, 85, 126, 0.28);
}

.lounge-gomoku-intersections::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(74, 85, 126, 0.28) 1px, transparent 1px),
    linear-gradient(180deg, rgba(74, 85, 126, 0.28) 1px, transparent 1px);
  background-size: var(--gomoku-step) var(--gomoku-step);
  background-repeat: repeat;
}

.lounge-gomoku-cell {
  position: absolute;
  z-index: 1;
  width: min(44px, calc(var(--gomoku-step) + 2px));
  height: min(44px, calc(var(--gomoku-step) + 2px));
  border: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
}

.lounge-gomoku-cell:focus {
  outline: none;
}

.lounge-gomoku-cell:not(:disabled):hover {
  background: transparent;
  box-shadow: none;
}

.lounge-gomoku-cell.is-playable {
  cursor: none;
}

.gomoku-hover-stone {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: clamp(18px, 76%, 30px);
  height: clamp(18px, 76%, 30px);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.08s ease, transform 0.08s ease;
}

.gomoku-hover-stone.is-visible {
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(1);
}

.gomoku-hover-stone.preview-black {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.28), transparent 28%),
    #1f2937;
}

.gomoku-hover-stone.preview-white {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.92), transparent 30%),
    #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}

.lounge-gomoku-cell.is-blocked::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(37, 99, 235, 0.76);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.14);
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.08);
}

.lounge-gomoku-cell.is-skill-target {
  background: transparent;
  box-shadow: none;
}

.lounge-gomoku-cell.is-skill-target::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(18px, 76%, 30px);
  height: clamp(18px, 76%, 30px);
  border: 2px solid rgba(245, 158, 11, 0.62);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.lounge-gomoku-cell.is-skill-target:hover {
  background: transparent;
  box-shadow: none;
}

.lounge-gomoku-cell.is-skill-target:hover::before {
  opacity: 1;
}

.lounge-gomoku-cell .lounge-stone {
  width: clamp(18px, 76%, 30px);
  height: clamp(18px, 76%, 30px);
  pointer-events: none;
}

.lounge-gomoku-cell.is-pending {
  cursor: default;
}

.lounge-stone.is-pending {
  opacity: 1;
  filter: none;
  animation: gomoku-local-place 0.16s ease-out;
}

.gomoku-pending-note {
  color: #2563eb;
  font-size: 13px;
  font-weight: 700;
}

@keyframes gomoku-local-place {
  from {
    opacity: 0.78;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lounge-stone.black {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.28), transparent 28%),
    #1f2937;
}

.lounge-stone.white {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.92), transparent 30%),
    #fff;
}

.gomoku-skill-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  padding: 14px;
  backdrop-filter: blur(8px);
}

.gomoku-skill-panel-head,
.gomoku-skill-music {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gomoku-skill-panel-head div,
.gomoku-skill-music label {
  display: grid;
  gap: 4px;
}

.gomoku-skill-panel-head strong {
  color: #1f2a5f;
  font-size: 18px;
}

.gomoku-skill-panel-head span,
.gomoku-skill-music span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.gomoku-skill-list {
  display: grid;
  gap: 8px;
}

.gomoku-skill-button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
  padding: 9px;
  text-align: left;
}

.gomoku-skill-button:not(:disabled):hover,
.gomoku-skill-button.is-active {
  border-color: rgba(239, 68, 68, 0.32);
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.88), rgba(255, 251, 235, 0.86));
}

.gomoku-skill-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.gomoku-skill-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  font-weight: 900;
}

.gomoku-skill-button span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.gomoku-skill-button strong {
  color: #1f2937;
}

.gomoku-skill-button small,
.gomoku-skill-button em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.gomoku-skill-music input {
  width: 110px;
}

.skill-gomoku-room {
  --skill-gomoku-bg: none;
}

.lounge-room-page.room-theme.skill-gomoku-room::before {
  background:
    linear-gradient(90deg, rgba(248, 250, 252, 0.78), rgba(248, 250, 252, 0.28) 42%, rgba(248, 250, 252, 0.68)),
    var(--skill-gomoku-bg) center / cover no-repeat,
    linear-gradient(135deg, rgba(252, 211, 77, 0.16), rgba(96, 165, 250, 0.18));
}

.lounge-room-page.room-theme.skill-gomoku-room::after {
  opacity: 0.18;
  background:
    radial-gradient(circle at 72% 50%, rgba(147, 51, 234, 0.22), transparent 18%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.08));
}

.skill-gomoku-room .gomoku-surface,
.skill-gomoku-room .lounge-side-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(7px);
}

@media (max-width: 980px) {
  .gomoku-play-grid {
    grid-template-columns: 1fr;
  }

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

  .lounge-gomoku-intersections {
    inset: 14px;
  }

  .gomoku-skill-panel {
    padding: 12px;
  }

  .gomoku-skill-music {
    align-items: stretch;
    flex-direction: column;
  }

  .gomoku-skill-music input {
    width: 100%;
  }
}

.lounge-dice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  perspective: 520px;
}

.lounge-die {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d9e0dd;
  border-radius: 9px;
  background: #fff;
  color: var(--blue);
  font-weight: 900;
}

.lounge-die-button {
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.lounge-die-button.is-held {
  border-color: #d62929;
  background: linear-gradient(rgba(214, 41, 41, 0.2), rgba(214, 41, 41, 0.2)), #fff5f5;
  color: #b91c1c;
  outline: 3px solid rgba(214, 41, 41, 0.9);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(214, 41, 41, 0.2), inset 0 0 0 4px rgba(214, 41, 41, 0.72);
}

.lounge-die-button.is-rolling {
  animation: yacht-die-roll 620ms cubic-bezier(0.22, 0.72, 0.18, 1) both;
}

@keyframes yacht-die-roll {
  0% {
    transform: translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
  }
  35% {
    transform: translateZ(18px) rotateX(170deg) rotateY(-130deg) rotateZ(12deg) scale(1.08);
  }
  70% {
    transform: translateZ(10px) rotateX(310deg) rotateY(-250deg) rotateZ(-8deg) scale(1.04);
  }
  100% {
    transform: translateZ(0) rotateX(360deg) rotateY(-360deg) rotateZ(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lounge-die-button.is-rolling {
    animation: none;
  }
}

.yacht-dice-board {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fbfb;
  padding: 14px;
}

.yacht-dice-board > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lounge-rules-toggle,
.yacht-rules-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lounge-rules-toggle span,
.yacht-rules-toggle span {
  color: var(--muted);
  font-size: 13px;
}

.lounge-rules-panel,
.yacht-rules-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.lounge-rule-flow,
.lounge-rule-details,
.yacht-rule-flow,
.yacht-score-rules {
  display: grid;
  align-content: start;
  gap: 8px;
}

.lounge-rule-flow,
.yacht-rule-flow {
  counter-reset: yacht-step;
}

.lounge-rules-panel strong,
.yacht-rules-panel strong {
  color: var(--ink);
  font-size: 14px;
}

.lounge-rule-flow span,
.yacht-rule-flow span {
  position: relative;
  min-height: 24px;
  padding-left: 30px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.lounge-rule-flow span::before,
.yacht-rule-flow span::before {
  counter-increment: yacht-step;
  content: counter(yacht-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
}

.lounge-rule-details,
.yacht-score-rules {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lounge-rule-details > strong,
.yacht-score-rules > strong {
  grid-column: 1 / -1;
}

.lounge-rule-details span,
.yacht-score-rules span {
  display: grid;
  gap: 3px;
  border: 1px solid #dbe5e2;
  border-radius: 9px;
  background: #f8fbfa;
  padding: 8px 9px;
}

.lounge-rule-details b,
.yacht-score-rules b {
  color: var(--ink);
  font-size: 13px;
}

.lounge-rule-details em,
.yacht-score-rules em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.yacht-dice-board span,
.yacht-score-card span {
  color: var(--muted);
  font-size: 13px;
}

.yacht-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.yacht-score-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.yacht-score-card.is-turn {
  border-color: rgba(36, 95, 156, 0.42);
  box-shadow: 0 0 0 3px rgba(36, 95, 156, 0.1);
}

.yacht-score-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.yacht-score-bonus-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.yacht-score-list span,
.yacht-score-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border: 1px solid #dbe5e2;
  border-radius: 9px;
  background: #f8fbfa;
  color: var(--ink);
  padding: 7px 9px;
  text-align: left;
}

.yacht-score-list button {
  cursor: pointer;
}

.yacht-score-list button:hover:not(:disabled) {
  border-color: rgba(36, 95, 156, 0.45);
  background: #eef7ff;
}

.yacht-score-list em {
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.yacht-score-list .is-empty {
  color: var(--muted);
}

.yacht-score-list .is-bonus-active {
  border-color: rgba(214, 41, 41, 0.28);
  background: #fff5f5;
}

.yacht-score-list .is-bonus-active em {
  color: #b91c1c;
}

.draw-guess-board {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: 14px;
}

.draw-guess-stage,
.draw-guess-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fbfb;
  padding: 14px;
}

.draw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.draw-tools > span {
  color: var(--muted);
  font-size: 13px;
}

.draw-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.draw-tools input[type="range"] {
  width: 96px;
}

.draw-canvas {
  width: 100%;
  aspect-ratio: 12 / 7;
  border: 1px solid #d7e2de;
  border-radius: 12px;
  background: #fff;
  touch-action: none;
}

.draw-preview {
  display: grid;
  place-items: center;
  min-height: 320px;
  border: 1px dashed #cbd8d4;
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  overflow: hidden;
}

.draw-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.draw-guess-panel > div {
  display: grid;
  gap: 5px;
}

.draw-guess-panel span,
.draw-guess-list span {
  color: var(--muted);
  font-size: 13px;
}

.draw-guess-form {
  display: grid;
  gap: 8px;
}

.draw-guess-list {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow: auto;
}

.werewolf-role-card,
.werewolf-action-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fbfb;
  padding: 14px;
}

@keyframes werewolfPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes werewolfPhasePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(248, 250, 252, 0.32);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(248, 250, 252, 0);
  }
}

@keyframes werewolfTargetPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.08);
  }
}

@keyframes werewolfConfirmIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.werewolf-surface {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 13%, rgba(255, 255, 232, 0.92) 0 42px, rgba(255, 255, 232, 0.2) 43px 66px, transparent 67px),
    linear-gradient(180deg, rgba(12, 23, 53, 0.92), rgba(24, 52, 75, 0.82)),
    #101a30;
}

.werewolf-surface::before {
  content: "";
  position: absolute;
  inset: auto -18px 0 -18px;
  height: 150px;
  background:
    radial-gradient(ellipse at 18% 100%, rgba(15, 43, 44, 0.88) 0 42%, transparent 43%),
    radial-gradient(ellipse at 72% 100%, rgba(11, 30, 38, 0.9) 0 48%, transparent 49%),
    linear-gradient(180deg, transparent, rgba(5, 14, 26, 0.9));
  pointer-events: none;
}

.werewolf-surface::after {
  content: "";
  position: absolute;
  right: 46px;
  top: 92px;
  width: 150px;
  height: 76px;
  background: rgba(8, 15, 27, 0.36);
  clip-path: polygon(0 58%, 16% 32%, 28% 48%, 43% 22%, 50% 44%, 69% 32%, 84% 42%, 100% 30%, 91% 62%, 70% 70%, 42% 66%, 20% 78%);
  pointer-events: none;
}

.werewolf-surface > * {
  position: relative;
  z-index: 1;
}

.werewolf-surface .lounge-gameplay-head h3,
.werewolf-surface .lounge-gameplay-head span {
  color: #fff;
}

.werewolf-role-card,
.werewolf-action-panel,
.werewolf-player-grid {
  animation: werewolfPanelIn 220ms ease-out both;
}

.werewolf-phase-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #e6f0f4;
  animation: werewolfPanelIn 180ms ease-out both;
}

.werewolf-phase-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(226, 232, 240, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 9px;
  color: rgba(241, 245, 249, 0.78);
  font-size: 12px;
}

.werewolf-phase-flow i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

.werewolf-phase-flow b {
  font-weight: 700;
}

.werewolf-phase-flow span.is-past {
  color: rgba(203, 213, 225, 0.62);
}

.werewolf-phase-flow span.is-active {
  border-color: rgba(248, 250, 252, 0.5);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.werewolf-phase-flow span.is-active i {
  opacity: 1;
  animation: werewolfPhasePulse 1.8s ease-in-out infinite;
}

.werewolf-role-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.werewolf-role-card > div,
.werewolf-action-panel > div:first-child {
  display: grid;
  gap: 5px;
}

.werewolf-role-card span,
.werewolf-action-panel span,
.werewolf-player-grid span {
  color: var(--muted);
  font-size: 13px;
}

.werewolf-player-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.werewolf-player-grid article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border: 1px solid #dfe8e5;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.werewolf-player-grid article.is-alive:hover {
  transform: translateY(-1px);
}

.werewolf-player-grid article.is-out {
  opacity: 0.58;
  background: #f3f5f5;
}

.werewolf-player-grid article.is-werewolf-targeted {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
  animation: werewolfTargetPulse 1.4s ease-in-out infinite;
}

.werewolf-player-grid article div {
  min-width: 0;
}

.werewolf-player-grid strong,
.werewolf-player-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.werewolf-target-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.werewolf-target-button {
  position: relative;
  min-height: 36px;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease;
}

.werewolf-target-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.werewolf-target-button b {
  margin-left: 6px;
  color: #b91c1c;
  font-size: 12px;
}

.werewolf-target-button.is-selected {
  border-color: #dc2626;
  color: #991b1b;
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}

.werewolf-target-button.is-selected::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid #ef4444;
  border-radius: 999px;
  pointer-events: none;
  animation: werewolfConfirmIn 160ms ease-out both;
}

.werewolf-confirm-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(220, 38, 38, 0.42);
  border-radius: 12px;
  background: #fff1f2;
  padding: 10px;
  animation: werewolfConfirmIn 180ms ease-out both;
}

.werewolf-confirm-panel > div {
  display: grid;
  flex: 1 1 180px;
  gap: 4px;
}

.werewolf-confirm-panel strong {
  color: #991b1b;
}

.werewolf-confirm-panel .danger-button {
  border-color: #991b1b;
  background: #b91c1c;
  color: #fff;
}

.werewolf-sheriff-candidates,
.werewolf-wolf-chat-list,
.werewolf-last-words-log p {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
}

.werewolf-wolf-chat-list {
  display: grid;
  gap: 7px;
  max-height: 180px;
  overflow: auto;
}

.werewolf-wolf-chat-list span,
.werewolf-last-words-log p {
  margin: 0;
  color: #243042;
  font-size: 13px;
  line-height: 1.5;
}

.werewolf-wolf-chat-list b,
.werewolf-last-words-log b {
  margin-right: 6px;
  color: #0f172a;
}

.werewolf-wolf-chat-form,
.werewolf-last-words-form {
  display: grid;
  gap: 8px;
}

.werewolf-wolf-chat-form input,
.werewolf-last-words-form textarea {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .werewolf-role-card,
  .werewolf-action-panel,
  .werewolf-player-grid,
  .werewolf-phase-flow,
  .werewolf-confirm-panel,
  .werewolf-target-button.is-selected::after,
  .werewolf-phase-flow span.is-active i,
  .werewolf-player-grid article.is-werewolf-targeted {
    animation: none;
  }

  .werewolf-player-grid article,
  .werewolf-target-button {
    transition: none;
  }
}

.werewolf-skill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.undercover-word-card,
.undercover-action-panel,
.undercover-speech-list {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fbfb;
  padding: 14px;
}

.undercover-word-card {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.undercover-word-card > div,
.undercover-action-panel > div:first-child {
  display: grid;
  gap: 5px;
}

.undercover-word-card span,
.undercover-action-panel span,
.undercover-player-grid span,
.undercover-speech-list span {
  color: var(--muted);
  font-size: 13px;
}

.undercover-word-card div:first-child span {
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
}

.undercover-player-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.undercover-player-grid article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border: 1px solid #dfe8e5;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.undercover-player-grid article.is-out {
  opacity: 0.58;
  background: #f3f5f5;
}

.undercover-player-grid article.is-undercover {
  border-color: rgba(36, 95, 156, 0.35);
  box-shadow: 0 0 0 3px rgba(36, 95, 156, 0.08);
}

.undercover-player-grid article div {
  min-width: 0;
}

.undercover-player-grid strong,
.undercover-player-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.undercover-speak-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.undercover-vote-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.undercover-vote-confirm {
  color: #b91c1c;
  font-size: 14px;
  font-weight: 900;
}

.undercover-vote-list .is-voted {
  border-color: #dc2626;
  color: #991b1b;
  background: #fff1f2;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.undercover-speech-list {
  max-height: 260px;
  overflow: auto;
}

.undercover-punishment-row {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.landlord-surface {
  align-content: start;
}

.landlord-table {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(36, 95, 156, 0.08), rgba(53, 168, 182, 0.08)),
    #f8fbfa;
  padding: 14px;
}

.landlord-seats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.landlord-seats article {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  border: 1px solid #dfe8e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  padding: 10px;
}

.landlord-seats article.is-turn {
  border-color: rgba(36, 95, 156, 0.42);
  box-shadow: 0 0 0 3px rgba(36, 95, 156, 0.1);
}

.landlord-seats article.is-landlord {
  background: #fff8e8;
}

.guandan-seats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guandan-seats article.is-team-a {
  background: rgba(232, 247, 255, 0.9);
}

.guandan-seats article.is-team-b {
  background: rgba(240, 248, 239, 0.9);
}

.landlord-seats article div {
  min-width: 0;
}

.landlord-seats article strong,
.landlord-seats article span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landlord-seats article span,
.landlord-center span,
.landlord-actions span {
  color: var(--muted);
  font-size: 13px;
}

.landlord-round-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landlord-round-meta span {
  border: 1px solid #dbe8ee;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #245f9c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 10px;
}

.landlord-center {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.landlord-center > div,
.landlord-hand-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #e5ece9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
}

.lounge-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.landlord-hand {
  align-items: flex-start;
  max-height: 190px;
  overflow: auto;
  padding-top: 8px;
}

.lounge-card-tile {
  display: grid;
  align-content: space-between;
  justify-items: start;
  width: 48px;
  height: 66px;
  border: 1px solid #d8e2df;
  border-radius: 9px;
  background: #fff;
  color: #172033;
  padding: 6px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

button.lounge-card-tile {
  cursor: pointer;
}

.lounge-card-tile:hover:not(:disabled) {
  transform: translateY(-3px);
}

.lounge-card-tile.is-selected {
  border-color: var(--blue);
  background: #eef7ff;
  transform: translateY(-8px);
}

.lounge-card-tile.red {
  color: #cf3349;
}

.texas-table {
  gap: 14px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(29, 78, 216, 0.12)),
    #f8fbfa;
}

.texas-seats {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
}

.texas-seats article.is-dealer {
  background: #fff8e8;
}

.texas-seats article.is-folded {
  opacity: 0.62;
}

.texas-center {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 12px;
}

.texas-community,
.texas-action-state,
.texas-hand-panel,
.texas-result {
  border: 1px solid #e5ece9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
}

.texas-community,
.texas-action-state {
  display: grid;
  align-content: start;
  gap: 10px;
}

.texas-action-state strong,
.texas-action-state span {
  display: block;
}

.texas-action-state span {
  color: var(--muted);
  font-size: 13px;
}

.texas-card-back {
  opacity: 0.78;
}

.texas-showdown-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.texas-showdown-list article {
  display: grid;
  grid-template-columns: minmax(130px, 0.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #e5ece9;
  border-radius: 12px;
  background: #f8fbfa;
  padding: 10px;
}

.texas-showdown-list article.is-winner {
  border-color: rgba(245, 158, 11, 0.5);
  background: #fff8e8;
}

.texas-showdown-list strong,
.texas-showdown-list span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.texas-showdown-list span {
  color: var(--muted);
  font-size: 13px;
}

.lounge-card-tile.back {
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%) 0 0 / 10px 10px,
    linear-gradient(135deg, #245fbc, #35a8b6);
  color: #fff;
  font-size: 12px;
}

.lounge-card-tile strong,
.lounge-card-tile span {
  line-height: 1;
}

.mahjong-surface {
  align-content: start;
}

.mahjong-table {
  display: grid;
  grid-template-areas:
    ". top ."
    "left felt right"
    ". bottom .";
  grid-template-columns: minmax(118px, 0.72fr) minmax(360px, 2.2fr) minmax(118px, 0.72fr);
  grid-template-rows: auto minmax(360px, auto) auto;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid #cfe2dc;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(230, 255, 244, 0.78), rgba(235, 247, 255, 0.82)),
    #f7fbfa;
  padding: 14px;
}

.mahjong-table-felt {
  grid-area: felt;
  display: grid;
  gap: 12px;
  min-height: 360px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 246, 193, 0.24), transparent 38%),
    linear-gradient(135deg, #17715f, #0f5e69);
  box-shadow:
    inset 0 0 0 8px rgba(255, 255, 255, 0.08),
    inset 0 18px 36px rgba(255, 255, 255, 0.12),
    0 18px 34px rgba(15, 23, 42, 0.16);
}

.mahjong-seat {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: min(286px, 100%);
  border: 1px solid #dfe8e5;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.mahjong-seat-top {
  grid-area: top;
  justify-self: center;
}

.mahjong-seat-right {
  grid-area: right;
  justify-self: start;
}

.mahjong-seat-bottom {
  grid-area: bottom;
  justify-self: center;
}

.mahjong-seat-left {
  grid-area: left;
  justify-self: end;
}

.mahjong-seat-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mahjong-seat .lounge-avatar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.mahjong-seat.is-turn {
  border-color: rgba(245, 158, 11, 0.66);
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.14),
    0 12px 26px rgba(15, 23, 42, 0.1);
}

.mahjong-seat.is-dealer {
  background: #fffaf0;
}

.mahjong-seat.is-self {
  border-color: rgba(37, 99, 235, 0.32);
}

.mahjong-seat-main > div {
  min-width: 0;
}

.mahjong-seat strong,
.mahjong-seat span,
.mahjong-center span,
.mahjong-river strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mahjong-seat span,
.mahjong-center span {
  color: var(--muted);
  font-size: 13px;
}

.mahjong-seat-mini-hand {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 20px;
  overflow: hidden;
}

.mahjong-seat-mini-hand span {
  width: 13px;
  height: 19px;
  flex: 0 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%) 0 0 / 8px 8px,
    linear-gradient(135deg, #1d4ed8, #0f766e);
  box-shadow: 0 3px 7px rgba(15, 23, 42, 0.14);
}

.mahjong-seat-mini-hand em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.mahjong-table-core {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(190px, 1fr);
  gap: 12px;
  align-items: stretch;
}

.mahjong-wall-area,
.mahjong-center,
.mahjong-river,
.mahjong-hand-panel {
  border: 1px solid #dfe8e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
}

.mahjong-wall-area {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.mahjong-wall-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 88px;
  overflow: hidden;
}

.mahjong-wall-stack .mahjong-tile {
  width: 28px;
  height: 38px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12);
}

.mahjong-center {
  display: grid;
  align-content: center;
  gap: 10px;
}

.mahjong-center > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mahjong-river-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.mahjong-river {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 128px;
  max-height: 158px;
  min-width: 0;
  overflow: hidden;
}

.mahjong-hand-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.mahjong-state-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
  gap: 12px;
  margin-top: 12px;
}

.mahjong-score-panel,
.mahjong-leaderboard-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid #dfe8e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
}

.mahjong-score-list,
.mahjong-leaderboard-list {
  display: grid;
  gap: 7px;
}

.mahjong-score-list span,
.mahjong-leaderboard-list span,
.mahjong-win-trail span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px 10px;
}

.mahjong-score-list span.is-leading {
  background: #fff7ed;
}

.mahjong-score-list b,
.mahjong-leaderboard-list b,
.mahjong-win-trail span {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mahjong-score-list em,
.mahjong-leaderboard-list em {
  flex: 0 0 auto;
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.mahjong-win-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mahjong-win-trail span {
  width: auto;
  justify-content: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.mahjong-tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.mahjong-hand {
  flex-wrap: nowrap;
  align-items: flex-end;
  min-height: 136px;
  max-height: 158px;
  overflow: visible;
  padding: 18px 6px 8px;
  scroll-padding-inline: 8px;
}

.mahjong-river-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-height: 72px;
  min-width: 0;
  overflow: hidden;
}

.mahjong-river-history {
  align-content: start;
  max-height: 112px;
  overflow-y: auto;
  padding: 1px;
}

.mahjong-river-latest {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 46px;
}

.mahjong-tile {
  display: grid;
  place-items: center;
  position: relative;
  width: 46px;
  height: 62px;
  border: 0;
  border-radius: 9px;
  background: #edf5ec;
  color: #173b33;
  padding: 0;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease, outline-color 0.16s ease;
}

.mahjong-tile.is-compact,
.mahjong-river-history .mahjong-tile {
  width: 28px;
  height: 38px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.1);
}

.mahjong-tile-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

button.mahjong-tile {
  cursor: pointer;
}

button.mahjong-tile:disabled {
  cursor: default;
  opacity: 0.82;
}

button.mahjong-tile:hover:not(:disabled) {
  transform: translateY(-4px);
}

.mahjong-tile.is-laizi {
  outline: 2px solid rgba(245, 158, 11, 0.72);
  outline-offset: 1px;
}

.mahjong-tile.is-drawn {
  z-index: 2;
  transform: translateY(-7px);
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.18),
    0 14px 24px rgba(245, 158, 11, 0.22);
}

.mahjong-tile.is-selected {
  z-index: 4;
  transform: translateY(-7px);
  outline: 2px solid rgba(59, 130, 246, 0.72);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.14),
    0 16px 28px rgba(37, 99, 235, 0.2);
}

.mahjong-hand-tile-wrap {
  display: inline-grid;
  place-items: end center;
  position: relative;
  flex: 0 0 auto;
  padding-top: 48px;
}

.mahjong-discard-popover {
  display: flex;
  position: absolute;
  bottom: 74px;
  left: 50%;
  z-index: 10;
  align-items: center;
  gap: 6px;
  width: max-content;
  transform: translateX(-50%);
  border: 1px solid rgba(191, 219, 254, 0.96);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  padding: 5px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.mahjong-discard-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -5px) rotate(45deg);
  border-right: 1px solid rgba(191, 219, 254, 0.96);
  border-bottom: 1px solid rgba(191, 219, 254, 0.96);
  background: rgba(255, 255, 255, 0.98);
}

.mahjong-discard-popover > button {
  position: relative;
  z-index: 1;
}

button.mahjong-tile.is-selected:hover:not(:disabled) {
  transform: translateY(-7px);
}

.mahjong-hand-hint {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

button.mahjong-tile.is-drawn:hover:not(:disabled) {
  transform: translateY(-10px);
}

.mahjong-drawn-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 3;
  padding: 2px 5px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 5px 10px rgba(146, 64, 14, 0.22);
}

.mahjong-tile.back {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%) 0 0 / 10px 10px,
    linear-gradient(135deg, #245f9c, #16a085);
}

.mahjong-tile.back::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 6px;
}

.mahjong-tile.back::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
}

.mahjong-empty {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
}

.lounge-mini-game-surface,
.lounge-hand-panel,
.turtle-case-card,
.turtle-question-list article,
.avalon-panel {
  display: grid;
  gap: 12px;
}

.lounge-mini-meta,
.turtle-head-actions,
.turtle-case-meta,
.turtle-feedback-row,
.uno-color-picker,
.avalon-player-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lounge-mini-meta span,
.turtle-case-meta span,
.turtle-feedback-row span,
.lounge-mini-player-list span,
.word-chain-list span {
  border: 1px solid #e5ece9;
  border-radius: 999px;
  background: #f8fbfa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.turtle-head-actions,
.turtle-feedback-row {
  align-items: center;
}

.turtle-head-actions select {
  min-height: 34px;
  border-radius: 10px;
}

.turtle-case-meta {
  align-items: center;
  justify-content: space-between;
}

.turtle-host-note {
  display: grid;
  gap: 8px;
  border: 1px dashed #cbd8d4;
  border-radius: 12px;
  background: #f8fbfa;
  padding: 10px;
}

.turtle-host-note span {
  display: grid;
  gap: 4px;
  color: var(--muted);
  line-height: 1.55;
}

.uno-table {
  display: grid;
  grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
  gap: 12px;
}

.uno-table > div,
.lounge-hand-panel,
.turtle-case-card,
.turtle-question-list article,
.avalon-panel,
.ludo-track article {
  border: 1px solid #e5ece9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
}

.uno-card {
  display: grid;
  align-content: space-between;
  width: 54px;
  height: 78px;
  border: 1px solid #d8e2df;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  padding: 7px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

button.uno-card {
  cursor: pointer;
}

button.uno-card:hover:not(:disabled) {
  transform: translateY(-4px);
}

.uno-card.color-red { color: #b91c1c; }
.uno-card.color-yellow { color: #a16207; }
.uno-card.color-green { color: #047857; }
.uno-card.color-blue { color: #1d4ed8; }
.uno-card.color-wild {
  color: #111827;
  background: linear-gradient(135deg, #fee2e2, #fef3c7 35%, #dcfce7 65%, #dbeafe);
}

.lounge-mini-player-list,
.turtle-question-list,
.word-chain-list {
  display: grid;
  gap: 8px;
}

.lounge-mini-player-list span.is-turn {
  border-color: rgba(36, 95, 156, 0.34);
  background: #eef7ff;
  color: var(--blue);
}

.lounge-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.mines-board {
  display: grid;
  grid-template-columns: repeat(var(--mine-size), minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 620px);
  max-width: 620px;
}

.mines-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(240px, 320px);
  align-items: start;
  gap: 14px;
}

.mines-board button,
.othello-board button {
  aspect-ratio: 1;
  border: 1px solid #9fb2ca;
  border-radius: 8px;
  background: linear-gradient(180deg, #bccce2, #9fb5d2);
  color: #17345d;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 1px 0 rgba(15, 23, 42, 0.08);
}

.mines-board button.is-open {
  border-color: #d7e1ec;
  background: #ffffff;
  color: #172033;
  box-shadow: none;
}

.mines-board button.is-flagged {
  background: linear-gradient(180deg, #d8e3f2, #adc0da);
  color: #dc2626;
}

.mines-board button.is-mine {
  background: #fee2e2;
  color: #b91c1c;
}

.mines-board button[data-number="1"] { color: #2563eb; }
.mines-board button[data-number="2"] { color: #16a34a; }
.mines-board button[data-number="3"] { color: #dc2626; }
.mines-board button[data-number="4"] { color: #7c3aed; }
.mines-board button[data-number="5"] { color: #b45309; }
.mines-board button[data-number="6"],
.mines-board button[data-number="7"],
.mines-board button[data-number="8"] { color: #0f172a; }

.mines-timer {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 999px;
  background: rgba(238, 242, 255, 0.78);
  color: #1f2a5f;
  padding: 0 12px;
  font-weight: 900;
}

.mines-rank-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  padding: 12px;
}

.mines-rank-head,
.mines-leaderboard div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.mines-rank-head {
  align-items: center;
}

.mines-rank-head strong,
.mines-leaderboard strong {
  color: #1f2a5f;
}

.mines-rank-head span,
.mines-leaderboard p,
.mines-leaderboard span,
.mines-leaderboard em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.mines-leaderboard {
  display: grid;
  gap: 6px;
}

.mines-leaderboard div {
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.86);
  padding: 7px 8px;
}

.mines-leaderboard em {
  color: #1f2a5f;
  font-weight: 900;
  white-space: nowrap;
}

.othello-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  max-width: 520px;
  border: 1px solid #dbe8ee;
  border-radius: 14px;
  background: #eaf7f2;
  padding: 10px;
}

.othello-board button {
  display: grid;
  place-items: center;
  background: #f8fffb;
}

.othello-board span {
  display: block;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.othello-board span.black { background: #111827; }
.othello-board span.white {
  border: 1px solid #d8e2df;
  background: #fff;
}

.ludo-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ludo-track article span,
.turtle-case-card p,
.turtle-question-list span,
.avalon-panel span,
.word-chain-list em {
  color: var(--muted);
}

.word-chain-list {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.word-chain-list span {
  border-radius: 10px;
}

.word-chain-list b,
.word-chain-list em {
  display: block;
}

.landlord-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lounge-table-core {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed #cbd8d4;
  border-radius: 14px;
  color: var(--blue);
  font-weight: 900;
}

.lounge-room-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.lounge-player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}

.lounge-player-grid.large-room {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lounge-player,
.lounge-spectators .lounge-player {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  border: 1px solid #e5ece9;
  border-radius: 12px;
  background: #fbfcfc;
  padding: 9px;
}

.lounge-player.is-bot {
  border-color: #cfe2f3;
  background: #f6fbff;
}

.lounge-player div {
  min-width: 0;
}

.lounge-player strong,
.lounge-player span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lounge-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, #e8fff6, #dceeff);
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
}

.lounge-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lounge-spectators {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.lounge-chat-card {
  min-height: 420px;
}

.lounge-chat-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
}

.lounge-chat-message {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  background: #f8fbfa;
  padding: 9px 10px;
}

.lounge-chat-message.user {
  background: #eef6ff;
}

.lounge-chat-message strong {
  color: var(--green);
  font-size: 12px;
}

.lounge-chat-message span {
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lounge-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

@media (max-width: 1180px) {
  .lounge-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .lounge-hero,
  .lounge-room-layout {
    grid-template-columns: 1fr;
  }

  .lounge-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lounge-room-side {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .lounge-hero,
  .lounge-section,
  .lounge-play-surface,
  .lounge-side-card {
    border-radius: 12px;
    padding: 14px;
  }

  .lounge-room-page.room-theme {
    padding: 10px;
    border-radius: 14px;
  }

  .lounge-hero-actions,
  .lounge-code-form,
  .lounge-create-form,
  .lounge-room-side,
  .lounge-duel-row,
  .lounge-dice-panel,
  .lounge-revealed-dice,
  .lounge-rules-panel,
  .lounge-rule-details,
  .yacht-rules-panel,
  .yacht-score-rules,
  .yacht-score-bonus-row,
  .yacht-score-grid,
  .draw-guess-board,
  .werewolf-role-card,
  .undercover-word-card,
  .landlord-seats,
  .landlord-center,
  .texas-center,
  .texas-showdown-list article,
  .mahjong-table-core,
  .mahjong-river-grid,
  .mahjong-state-grid,
  .uno-table,
  .lounge-inline-form,
  .ludo-track {
    grid-template-columns: 1fr;
  }

  .mahjong-table {
    grid-template-areas:
      "top"
      "right"
      "felt"
      "left"
      "bottom";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .mahjong-seat-top,
  .mahjong-seat-right,
  .mahjong-seat-bottom,
  .mahjong-seat-left {
    justify-self: stretch;
    width: 100%;
  }

  .mahjong-table-felt {
    min-height: 0;
    padding: 12px;
    border-radius: 18px;
  }

  .mahjong-tile {
    width: 40px;
    height: 56px;
  }

  .mahjong-hand {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .mahjong-tile.is-compact,
  .mahjong-river-history .mahjong-tile {
    width: 24px;
    height: 34px;
  }

  .werewolf-player-grid,
  .undercover-player-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .undercover-speak-form {
    grid-template-columns: 1fr;
  }

  .lounge-game-grid,
  .lounge-player-grid.large-room {
    grid-template-columns: 1fr;
  }

  .lounge-room-card,
  .lounge-room-header,
  .lounge-gameplay-head {
    align-items: stretch;
    flex-direction: column;
  }

  .lounge-room-header-actions,
  .lounge-head-actions,
  .lounge-room-actions {
    justify-content: flex-start;
  }

  .lounge-ios-confirm-backdrop {
    place-items: end center;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  }

  .lounge-ios-confirm {
    width: 100%;
  }

  .lounge-module-root.is-ios-device .lounge-room-header-actions button,
  .lounge-module-root.is-ios-device .lounge-room-controls button {
    flex: 1 1 100%;
    width: 100%;
  }

  .lounge-hero-actions > .primary-button,
  .lounge-hero-actions > .secondary-button,
  .lounge-code-form .secondary-button {
    width: 100%;
  }

  .lounge-player-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 300px;
  }

  .lounge-gomoku-board {
    width: 100%;
  }

  .lounge-chat-card {
    min-height: 340px;
  }
}

@media (max-width: 420px) {
  .lounge-player-grid {
    grid-template-columns: 1fr;
  }

  .lounge-chat-form {
    grid-template-columns: 1fr;
  }
}

/* Keep the login backdrop out of the auth grid flow. */
.auth-screen > .tech-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.auth-screen > .auth-hero,
.auth-screen > .auth-box {
  position: relative;
  z-index: 1;
}

@media (min-width: 981px) {
  #authScreen.auth-screen {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    grid-auto-flow: column;
    align-items: center;
    justify-items: stretch;
    min-height: calc(100vh - 72px);
    width: min(1240px, calc(100% - 64px));
    gap: clamp(38px, 5vw, 72px);
    padding: clamp(34px, 5vh, 58px) clamp(32px, 4vw, 56px);
  }

  #authScreen .auth-hero {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    max-width: 650px;
  }

  #authScreen .auth-box {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  #authScreen .hero-copy h1 {
    max-width: 620px;
    font-size: clamp(46px, 4.8vw, 68px);
  }

  #authScreen .dashboard-preview {
    width: min(560px, 100%);
  }
}

/* Calorie already sits inside the shared module shell; avoid a second full-page ring. */
#calorieView :is(.calorie-module-host, .calorie-native, .calorie-redo) {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#calorieView :is(.calorie-native, .calorie-redo) {
  padding: 0;
  overflow: visible;
}

#calorieView :is(.calorie-native, .calorie-redo)::before {
  display: none;
}

@media (max-width: 620px) {
  #calorieView .calorie-redo {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
}

/* Yookerd Lounge follows the same module language, with a lighter social-game tone. */
#loungeView {
  --lounge-rgb: 99, 102, 241;
  --lounge-accent: #4f46e5;
  --lounge-accent-2: #06b6d4;
  --lounge-dark: #151a4f;
  --lounge-line: rgba(99, 102, 241, 0.18);
  --lounge-soft: rgba(245, 247, 255, 0.92);
  --lounge-shadow: rgba(79, 70, 229, 0.12);
  border-color: var(--lounge-line);
  background:
    radial-gradient(circle at 12% 0%, rgba(99, 102, 241, 0.14), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(6, 182, 212, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.95));
  box-shadow: 0 18px 42px var(--lounge-shadow);
}

#loungeView::before {
  display: block;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.42;
}

#loungeView .lounge-module-root {
  gap: 18px;
}

#loungeView :is(.lounge-hero, .lounge-section, .lounge-play-surface, .lounge-side-card, .lounge-dialog) {
  border: 1px solid var(--lounge-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--lounge-soft));
  box-shadow: 0 16px 38px var(--lounge-shadow);
}

#loungeView .lounge-room-page.room-theme :is(.lounge-play-surface, .lounge-side-card) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 250, 0.82));
  backdrop-filter: blur(8px);
}

#loungeView .lounge-room-page.room-theme.skill-gomoku-room :is(.lounge-section, .lounge-play-surface, .lounge-side-card) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(248, 251, 250, 0.32));
  backdrop-filter: blur(2px);
}

#loungeView .lounge-hero,
#loungeView .lounge-room-header {
  background:
    linear-gradient(135deg, var(--lounge-dark), var(--lounge-accent), var(--lounge-accent-2)),
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.22), transparent 28%);
  border-color: rgba(125, 211, 252, 0.34);
  color: #fff;
}

#loungeView .lounge-hero {
  padding: 22px;
}

#loungeView .lounge-toolbar {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--lounge-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 38px var(--lounge-shadow);
}

#loungeView .lounge-hero-actions {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) minmax(360px, 1.2fr) auto auto;
  align-items: end;
  gap: 12px;
}

#loungeView .lounge-search {
  min-width: 0;
}

#loungeView .lounge-search input {
  min-height: 42px;
}

#loungeView .lounge-code-form {
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) auto;
  min-width: 0;
}

#loungeView .lounge-room-header {
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 8px;
  box-shadow: 0 16px 38px var(--lounge-shadow);
  padding: 18px;
}

#loungeView :is(.lounge-title-block h2, .lounge-room-header h2) {
  color: inherit;
  font-size: clamp(28px, 3.4vw, 40px);
}

#loungeView :is(.lounge-title-block strong, .lounge-title-block p, .lounge-room-header p) {
  color: rgba(244, 250, 255, 0.86);
}

#loungeView :is(.lounge-section-head span, .lounge-search span, .lounge-game-top span:not(.lounge-game-icon), .lounge-game-stats, .lounge-room-card span, .lounge-room-badges span, .lounge-player span, .lounge-side-head span) {
  color: var(--muted);
}

#loungeView :is(.lounge-section-head h3, .lounge-game-card h3, .lounge-play-surface h3, .lounge-dialog h3, .lounge-chat-message strong) {
  color: var(--lounge-accent);
}

#loungeView :is(.lounge-category, .lounge-game-card, .lounge-room-card, .lounge-duel-row article, .lounge-dice-panel article, .lounge-revealed-dice article, .lounge-result-box, .lounge-placeholder-table, .lounge-safe-note, .lounge-player, .lounge-spectators .lounge-player, .lounge-chat-message) {
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}

#loungeView .lounge-game-card {
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.08);
}

#loungeView .lounge-game-card:hover,
#loungeView .lounge-room-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 18px 36px rgba(79, 70, 229, 0.12);
}

#loungeView .lounge-game-icon,
#loungeView .lounge-avatar,
#loungeView .lounge-die {
  color: #fff;
  background: linear-gradient(135deg, var(--lounge-accent), var(--lounge-accent-2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

#loungeView .lounge-die-button.is-held {
  border-color: #ef1f1f;
  background:
    linear-gradient(rgba(239, 31, 31, 0.3), rgba(239, 31, 31, 0.3)),
    linear-gradient(135deg, var(--lounge-accent), var(--lounge-accent-2));
  outline: 3px solid rgba(239, 31, 31, 0.95);
  outline-offset: 1px;
  box-shadow:
    0 0 0 5px rgba(239, 31, 31, 0.22),
    inset 0 0 0 4px rgba(255, 255, 255, 0.32),
    inset 0 0 0 7px rgba(239, 31, 31, 0.82);
}

#loungeView :is(.lounge-game-meta span, .lounge-room-badges span, .lounge-score-row span, .lounge-rule-grid span) {
  border-color: rgba(99, 102, 241, 0.15);
  background: rgba(238, 242, 255, 0.78);
  color: #445172;
}

#loungeView .lounge-category.is-active {
  border-color: rgba(99, 102, 241, 0.36);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.1));
  color: var(--lounge-accent);
}

#loungeView :is(.primary-button, .mini-button.strong, .secondary-button.is-active) {
  color: #fff;
  background: linear-gradient(135deg, var(--lounge-accent), var(--lounge-accent-2));
  border-color: rgba(125, 211, 252, 0.35);
  box-shadow: 0 12px 28px var(--lounge-shadow);
}

#loungeView :is(.secondary-button, .mini-button, .icon-button) {
  color: var(--lounge-accent);
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--lounge-line);
}

#loungeView :is(input, textarea, select):focus {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.13);
}

#loungeView .lounge-gomoku-board {
  border-color: rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  background: #f1f5ff;
}

#loungeView .lounge-gomoku-cell {
  border-color: rgba(99, 102, 241, 0.14);
}

#loungeView .lounge-table-core {
  border-color: rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--lounge-accent);
}

#loungeView .lounge-chat-message.user {
  background: rgba(238, 242, 255, 0.9);
}

/* OpenAI-like admin console refresh: layout only, keep existing admin behavior. */
body.admin-console-mode {
  background: #f7f7f5;
}

body.admin-console-mode .app-main {
  width: 100%;
  margin: 0;
  padding: 14px 16px 20px;
}

#adminView.admin-view {
  --admin-bg: #f7f7f5;
  --admin-surface: #ffffff;
  --admin-surface-soft: #f1f1ef;
  --admin-ink: #171717;
  --admin-muted: #6b6b65;
  --admin-line: #e4e4df;
  --admin-hover: #ededeb;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "nav head"
    "nav summary"
    "nav panel";
  gap: 12px 16px;
  align-items: start;
  min-height: calc(100vh - 102px);
  padding: 0;
  color: var(--admin-ink);
}

#adminView > .admin-tabs.segmented {
  grid-area: nav;
  position: sticky;
  top: 0;
  display: grid;
  gap: 4px;
  align-self: start;
  min-height: calc(100vh - 102px);
  padding: 10px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  box-shadow: none;
}

#adminView > .admin-tabs.segmented::before {
  content: none;
  display: none;
  min-height: 150px;
  margin: 4px 0 18px;
  border-radius: 8px;
  white-space: pre-line;
  background:
    url("/assets/yookerd-logo.webp") center 18px / 82px 82px no-repeat,
    #fff;
  color: #111827;
  box-shadow: inset 0 0 0 1px rgba(228, 228, 223, 0.88);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  padding-top: 108px;
  text-align: center;
}

#adminView > .admin-tabs.segmented .segment {
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #3f3f3a;
  box-shadow: none;
  padding: 8px 10px;
  text-align: left;
}

#adminView > .admin-tabs.segmented .segment:hover:not(:disabled) {
  background: var(--admin-hover);
  transform: none;
}

#adminView > .admin-tabs.segmented .segment.is-active {
  background: var(--admin-surface);
  color: var(--admin-ink);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08);
}

#adminView > .section-head,
#adminView > .admin-summary,
#adminView > .admin-panel {
  min-width: 0;
}

#adminView > .section-head {
  grid-area: head;
  min-height: auto;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, #f7f8fa, #e9edf2);
  color: var(--admin-ink);
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.08);
  padding: 18px;
}

#adminView > .section-head h2 {
  color: var(--admin-ink);
  font-size: 28px;
}

#adminView > .section-head .eyebrow {
  color: var(--admin-muted);
}

#adminView > .section-head .secondary-button {
  min-height: 36px;
  border-color: var(--admin-line);
  background: var(--admin-surface);
  color: var(--admin-ink);
  box-shadow: none;
}

#adminView > .admin-summary {
  grid-area: summary;
  display: grid;
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface);
  box-shadow: none;
}

#adminView > .admin-summary div {
  min-height: 96px;
  border: 0;
  border-right: 1px solid var(--admin-line);
  border-radius: 0;
  background: var(--admin-surface);
  box-shadow: none;
  padding: 16px;
}

#adminView > .admin-summary div:last-child {
  border-right: 0;
}

#adminView > .admin-summary strong {
  color: var(--admin-ink);
  font-size: 25px;
}

#adminView > .admin-summary span {
  color: var(--admin-muted);
}

#adminView > .admin-panel {
  grid-area: panel;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface);
  background-image: none;
  box-shadow: none;
  padding: 16px;
}

#adminView .panel-heading {
  border-bottom: 1px solid var(--admin-line);
  margin: -2px 0 14px;
  padding-bottom: 14px;
}

#adminView .panel-heading h3,
#adminView .people-batch-head h4,
#adminView .plaz-admin-overview-grid h4,
#adminView .plaz-admin-detail h4 {
  color: var(--admin-ink);
}

#adminView .panel-heading span,
#adminView .people-bulk-bar span,
#adminView .people-batch-panel p,
#adminView .plaz-admin-result-count,
#adminView .muted-text {
  color: var(--admin-muted);
}

#adminView :is(.people-stats article, .people-module-stat, .people-bulk-bar, .people-batch-panel, .people-table-wrap, .people-detail-panel, .admin-device-row, .usage-record, .admin-treehole-music, .admin-treehole-music-item, .admin-treehole-item, .plaz-admin-empty, .plaz-admin-head, .plaz-admin-detail, .plaz-admin-overview-grid article, .plaz-admin-stats article) {
  border-color: var(--admin-line);
  background: var(--admin-surface);
  box-shadow: none;
}

#adminView :is(.mbti-admin-stats article, .mbti-admin-table-wrap) {
  border-color: var(--admin-line);
  background: var(--admin-surface);
  box-shadow: none;
}

#adminView .people-stats {
  gap: 8px;
}

#adminView .people-stat-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

#adminView .people-stats article {
  min-height: 66px;
  padding: 10px 12px;
}

#adminView .people-stats strong {
  font-size: 22px;
  line-height: 1.05;
}

#adminView .people-stats span {
  font-size: 12px;
}

#adminView .people-module-stat {
  min-height: 52px;
  padding: 10px 12px;
}

#adminView :is(.people-controls, .people-bulk-bar, .people-batch-panel, .plaz-admin-controls, .plaz-admin-controls.compact) {
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  box-shadow: none;
  padding: 12px;
}

#adminView .people-table th {
  background: #f4f4f2;
  color: var(--admin-muted);
}

#adminView .mbti-admin-table th {
  background: #f4f4f2;
  color: var(--admin-muted);
}

#adminView .people-table td {
  background: var(--admin-surface);
}

#adminView .mbti-admin-table td {
  background: var(--admin-surface);
}

#adminView .people-table tr:hover td {
  background: #fbfbfa;
}

#adminView .mbti-admin-table tr:hover td {
  background: #fbfbfa;
}

#adminView .admin-friend-notes {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

#adminView .admin-friend-notes div {
  display: grid;
  gap: 3px;
}

#adminView .admin-friend-notes strong {
  color: var(--admin-ink);
  font-size: 12px;
}

#adminView .admin-friend-notes span,
#adminView .admin-friend-notes em {
  color: var(--admin-muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}

#adminView .admin-friend-user-inspector {
  display: grid;
  gap: 12px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  padding: 12px;
}

#adminView .admin-friend-user-inspector-head {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

#adminView .admin-friend-user-inspector-head label {
  display: grid;
  gap: 6px;
}

#adminView .admin-friend-user-inspector-head label span,
#adminView .admin-friend-user-inspector-head > div span,
#adminView .admin-friend-user-list article > div > span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}

#adminView .admin-friend-user-inspector-head > div {
  display: grid;
  gap: 4px;
}

#adminView .admin-friend-user-inspector-head > div strong {
  color: var(--admin-ink);
  font-size: 16px;
}

#adminView .admin-friend-user-list {
  display: grid;
  gap: 8px;
}

#adminView .admin-friend-user-list article {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(150px, 0.9fr) minmax(180px, 1fr) minmax(90px, 0.5fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 10px 12px;
}

#adminView .admin-friend-user-list article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#adminView .admin-friend-user-list strong,
#adminView .admin-friend-user-list article > div:first-child span {
  overflow-wrap: anywhere;
}

#adminView .admin-friend-user-list p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}

#adminView .admin-friend-user-list em {
  border-radius: 999px;
  background: #eeeeeb;
  color: #363633;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 8px;
}

@media (max-width: 900px) {
  #adminView .admin-friend-user-inspector-head,
  #adminView .admin-friend-user-list article {
    grid-template-columns: 1fr;
  }
}

#adminView :is(.people-badge, .permission-chip, .plaz-admin-title small, .people-module-chips span) {
  background: #eeeeeb;
  color: #363633;
}

#adminView :is(input, textarea, select) {
  border-color: var(--admin-line);
  background: var(--admin-surface);
  color: var(--admin-ink);
}

#adminView :is(input, textarea, select):focus {
  border-color: #9c9b94;
  box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.08);
  outline: none;
}

#adminView :is(.primary-button, .mini-button.strong, .secondary-button.is-active) {
  border-color: #171717;
  background: #171717;
  color: #fff;
  box-shadow: none;
}

#adminView :is(.secondary-button, .mini-button, .file-pill) {
  border-color: var(--admin-line);
  background: var(--admin-surface);
  color: var(--admin-ink);
  box-shadow: none;
}

#adminView :is(.secondary-button, .mini-button, .file-pill):hover:not(:disabled) {
  background: var(--admin-hover);
  transform: none;
}

#adminView .admin-subpanel {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-top: 14px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 14px;
}

#adminView .admin-subpanel .panel-heading {
  margin: 0;
}

.admin-calorie-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.admin-calorie-preview-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 210px;
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  cursor: pointer;
}

.admin-calorie-preview-card:hover {
  background: var(--admin-hover);
}

.admin-calorie-preview-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 2px;
}

.admin-calorie-card-stat {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.admin-calorie-card-stat strong {
  color: var(--admin-ink);
  font-size: 30px;
  line-height: 1;
}

.admin-calorie-card-stat span,
.admin-calorie-card-link {
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-calorie-preview-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-calorie-preview-list p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--admin-surface-soft);
}

.admin-calorie-preview-list span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-calorie-preview-list strong,
.admin-calorie-preview-list small,
.admin-calorie-preview-list b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-calorie-preview-list strong {
  color: var(--admin-ink);
  font-size: 13px;
}

.admin-calorie-preview-list small {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-calorie-preview-list b {
  flex: 0 0 auto;
  color: var(--admin-accent);
  font-size: 12px;
}

.admin-calorie-card-link {
  justify-self: start;
  color: var(--admin-accent);
}

.admin-calorie-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
}

.admin-calorie-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, 100%);
  max-height: min(820px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.admin-calorie-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-calorie-dialog-head span {
  color: var(--admin-accent);
  font-size: 11px;
  font-weight: 900;
}

.admin-calorie-dialog-head h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 18px;
}

.admin-calorie-dialog-body {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.admin-calorie-dialog-toolbar {
  display: grid;
  gap: 10px;
}

.admin-calorie-dialog .yookerd-admin-list {
  max-height: min(620px, calc(100vh - 250px));
  overflow: auto;
  padding-right: 4px;
}

@media (max-width: 760px) {
  .admin-calorie-card-grid {
    grid-template-columns: 1fr;
  }

  .admin-calorie-dialog-backdrop {
    place-items: stretch;
    padding: 10px;
  }

  .admin-calorie-dialog {
    max-height: calc(100vh - 20px);
  }

  .admin-calorie-dialog-head,
  .admin-calorie-preview-list p {
    align-items: flex-start;
  }

  .admin-calorie-dialog .people-row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {
  #adminView.admin-view {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "summary"
      "nav"
      "panel";
  }

  #adminView > .admin-tabs.segmented {
    position: static;
    display: flex;
    min-height: 0;
    overflow-x: auto;
  }

  #adminView > .admin-tabs.segmented::before {
    flex: 0 0 auto;
  }

  #adminView > .admin-tabs.segmented .segment {
    flex: 0 0 auto;
    width: auto;
  }

  #adminView > .admin-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #adminView > .admin-summary div {
    border-right: 1px solid var(--admin-line);
    border-bottom: 1px solid var(--admin-line);
  }
}

@media (max-width: 720px) {
  #adminView.admin-view {
    gap: 12px;
  }

  #adminView > .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #adminView > .admin-summary,
  #adminView .people-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #adminView > .admin-summary div {
    min-height: 84px;
    padding: 12px;
  }

  #adminView > .admin-panel {
    padding: 12px;
  }

  #adminView .people-module-stat {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  #adminView .people-module-stat-head {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  body.admin-console-mode .app-main {
    padding: 10px;
  }

  #adminView.admin-view {
    min-height: auto;
    gap: 10px;
    padding: 0;
  }

  #adminView > .section-head {
    gap: 8px;
  }

  #adminView > .section-head h2 {
    font-size: 22px;
  }

  #adminView > .section-head .secondary-button,
  #adminView .panel-heading .secondary-button,
  #adminView :is(.primary-button, .secondary-button, .mini-button) {
    min-height: 36px;
  }

  #adminView > .admin-tabs.segmented {
    gap: 6px;
    margin: 0 -2px;
    padding: 6px;
    border-radius: 8px;
    scrollbar-width: none;
  }

  #adminView > .admin-tabs.segmented::-webkit-scrollbar {
    display: none;
  }

  #adminView > .admin-tabs.segmented::before {
    display: none;
  }

  #adminView > .admin-tabs.segmented .segment {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  #adminView > .admin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 8px;
  }

  #adminView > .admin-summary div {
    min-height: 66px;
    padding: 9px 10px;
  }

  #adminView > .admin-summary strong {
    font-size: 20px;
  }

  #adminView > .admin-summary span {
    font-size: 11px;
  }

  #adminView > .admin-panel {
    gap: 10px;
    padding: 10px;
  }

  #adminView .panel-heading {
    margin: 0 0 8px;
    padding-bottom: 10px;
  }

  #adminView .panel-heading h3 {
    font-size: 18px;
  }

  #adminView .panel-heading span {
    font-size: 12px;
    line-height: 1.45;
  }

  #adminView .people-management {
    gap: 10px;
  }

  #adminView .people-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #adminView .people-stats article {
    min-height: 72px;
    padding: 10px;
  }

  #adminView .people-stats strong {
    font-size: 20px;
  }

  #adminView .people-stats span,
  #adminView .people-module-chips span {
    font-size: 11px;
  }

  #adminView :is(.people-controls, .people-batch-form) {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
  }

  #adminView .people-controls .people-search,
  #adminView .people-controls [data-reset-people-filters] {
    grid-column: 1 / -1;
  }

  #adminView .people-controls label,
  #adminView .people-batch-form label {
    gap: 4px;
    font-size: 11px;
  }

  #adminView .people-controls input,
  #adminView .people-controls select,
  #adminView .people-batch-form input,
  #adminView .people-batch-form select {
    min-height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  #adminView .people-bulk-bar,
  #adminView .people-batch-panel {
    gap: 8px;
    padding: 9px;
  }

  #adminView .people-bulk-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  #adminView .people-bulk-actions button {
    width: 100%;
    min-width: 0;
    padding: 0 7px;
    font-size: 12px;
  }

  #adminView .people-workspace,
  #adminView .people-workspace.has-detail {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #adminView .people-management .people-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  #adminView .people-management .people-table,
  #adminView .people-management .people-table thead,
  #adminView .people-management .people-table tbody,
  #adminView .people-management .people-table tr,
  #adminView .people-management .people-table td {
    display: block;
    width: 100%;
  }

  #adminView .people-management .people-table colgroup {
    display: none;
  }

  #adminView .people-management .people-table thead {
    display: none;
  }

  #adminView .people-management .people-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 0;
  }

  #adminView .people-management .people-table tr {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: var(--admin-surface);
  }

  #adminView .people-management .people-table tr.people-inline-detail-row {
    display: block;
    margin: -4px 0 12px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #adminView .people-management .people-table td {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 36px;
    border: 0;
    border-bottom: 1px solid var(--admin-line);
    padding: 8px 10px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  #adminView .people-management .people-table tr.people-inline-detail-row > td {
    display: block;
    min-height: 0;
    border: 0;
    padding: 0;
  }

  #adminView .people-management .people-table tr.people-inline-detail-row > td::before {
    display: none;
    content: "";
  }

  #adminView .people-management .people-table td:last-child {
    border-bottom: 0;
  }

  #adminView .people-management .people-table td::before {
    color: var(--admin-muted);
    font-size: 11px;
    font-weight: 900;
  }

  #adminView .people-management .people-table td:nth-child(1) {
    display: flex;
    min-height: 32px;
    justify-content: flex-end;
    padding-bottom: 0;
  }

  #adminView .people-management .people-table td:nth-child(1)::before {
    content: "选择";
    margin-right: auto;
  }

  #adminView .people-management .people-table td:nth-child(2) {
    grid-template-columns: 1fr;
    padding-top: 10px;
  }

  #adminView .people-management .people-table td:nth-child(2)::before {
    content: "";
    display: none;
  }

  #adminView .people-management .people-table td:nth-child(3)::before {
    content: "邮箱";
  }

  #adminView .people-management .people-table td:nth-child(4)::before {
    content: "角色";
  }

  #adminView .people-management .people-table td:nth-child(5)::before {
    content: "状态";
  }

  #adminView .people-management .people-table td:nth-child(6)::before {
    content: "用户组";
  }

  #adminView .people-management .people-table td:nth-child(7)::before {
    content: "模块";
  }

  #adminView .people-management .people-table td:nth-child(8) {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  #adminView .people-management .people-table td:nth-child(8)::before {
    content: "创建";
  }

  #adminView .people-management .people-table td:nth-child(9) {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  #adminView .people-management .people-table td:nth-child(9)::before {
    content: "操作";
  }

  #adminView .people-identity {
    align-items: center;
  }

  #adminView .people-identity .avatar {
    width: 34px;
    height: 34px;
  }

  #adminView .people-identity strong {
    font-size: 14px;
  }

  #adminView .people-identity span,
  #adminView .people-permission-chips {
    font-size: 11px;
  }

  #adminView .people-permission-chips {
    gap: 5px;
  }

  #adminView .people-management .people-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #adminView .people-management .people-row-actions .mini-button {
    width: 100%;
    min-height: 38px;
    padding: 0 6px;
    font-size: 12px;
  }

  #adminView .people-management .people-row-actions [data-toggle-user-status] {
    border-color: #171717;
    background: #171717;
    color: #fff;
  }

  #adminView .people-management .people-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    justify-items: stretch;
  }

  #adminView .people-management .people-pagination > span,
  #adminView .people-management .people-pagination label {
    grid-column: 1 / -1;
  }

  #adminView .people-management .people-pagination .mini-button {
    width: 100%;
  }

  #adminView .people-detail-panel {
    position: static;
    padding: 10px;
  }

  #adminView .people-detail-panel.is-sidebar {
    display: none;
  }

  #adminView .people-detail-panel.is-inline {
    display: grid;
    border-color: rgba(17, 24, 39, 0.14);
    background: #fff;
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.08);
  }

  #adminView .people-detail-form,
  #adminView .people-detail-form section,
  #adminView .user-edit-grid,
  #adminView .system-permissions,
  #adminView .people-detail-actions {
    grid-template-columns: 1fr;
  }

  #adminView .people-detail-actions button {
    width: 100%;
  }
}

@media (max-width: 720px) {
  #loungeView :is(.lounge-hero, .lounge-section, .lounge-play-surface, .lounge-side-card) {
    border-radius: 8px;
  }

  #loungeView .lounge-mobile-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #loungeView .lounge-mobile-toggles button {
    width: 100%;
    min-height: 44px;
    border-color: rgba(99, 102, 241, 0.2);
    background: rgba(255, 255, 255, 0.92);
  }

  #loungeView .lounge-mobile-toggles button.is-active {
    border-color: rgba(67, 87, 232, 0.5);
    background: linear-gradient(135deg, var(--lounge-accent), var(--lounge-accent-2));
    color: #fff;
    box-shadow: 0 12px 24px rgba(67, 87, 232, 0.16);
  }

  #loungeView .lounge-toolbar,
  #loungeView .lounge-room-section-mobile,
  #loungeView .lounge-room-section-desktop {
    display: none;
  }

  #loungeView .lounge-toolbar.is-mobile-open,
  #loungeView .lounge-room-section-mobile.is-mobile-open {
    display: grid;
  }

  #loungeView .lounge-hero-actions,
  #loungeView .lounge-code-form {
    grid-template-columns: 1fr;
  }

  #loungeView .lounge-hero-actions > button,
  #loungeView .lounge-code-form button {
    width: 100%;
  }
}

/* Journal Almanac: keep the public almanac warm, while the admin console stays neutral. */
#journalAlmanacView,
#adminView .journal-almanac-admin-root {
  --journal-rgb: 245, 158, 11;
  --journal-accent: #d97706;
  --journal-accent-2: #facc15;
  --journal-dark: #713f12;
  --journal-ink: #1f2937;
  --journal-line: rgba(245, 158, 11, 0.22);
  --journal-soft: rgba(255, 251, 235, 0.92);
  --journal-shadow: rgba(180, 83, 9, 0.12);
  --journal-grid: rgba(245, 158, 11, 0.08);
}

#journalAlmanacView {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--journal-line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 10% 0%, rgba(250, 204, 21, 0.18), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(217, 119, 6, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.94));
  box-shadow: 0 18px 44px var(--journal-shadow);
}

#journalAlmanacView::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--journal-grid) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 119, 6, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 84%);
  opacity: 0.46;
}

#journalAlmanacView > * {
  position: relative;
  z-index: 1;
}

#journalAlmanacView .journal-almanac-module-host {
  min-width: 0;
}

#journalAlmanacView :is(.ja-head, .ja-note, .ja-card, .ja-filter-panel, .ja-source-note),
#adminView .journal-almanac-admin-root :is(.ja-admin-tabs, .ja-admin-panel, .ja-edit-form) {
  border-color: var(--journal-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--journal-soft));
  box-shadow: 0 16px 38px var(--journal-shadow);
}

#journalAlmanacView .ja-head {
  background:
    linear-gradient(135deg, var(--journal-dark), var(--journal-accent), var(--journal-accent-2)),
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.26), transparent 28%);
  border-color: rgba(250, 204, 21, 0.36);
  color: #fff;
}

#journalAlmanacView .ja-head h2 {
  color: inherit;
  font-size: clamp(30px, 3.8vw, 44px);
}

#journalAlmanacView .ja-head :is(.eyebrow, p, small) {
  color: rgba(255, 251, 235, 0.88);
}

#journalAlmanacView .ja-head-stats span {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 251, 235, 0.84);
}

#journalAlmanacView .ja-head-stats strong {
  color: #fff7cc;
}

#journalAlmanacView :is(.ja-card h3, .ja-card-head h3, .ja-source-note h3, .ja-journal-picker select),
#adminView .journal-almanac-admin-root :is(.ja-card-head h3, .ja-edit-form h3, .ja-table strong) {
  color: var(--journal-accent);
}

#journalAlmanacView :is(.ja-note, .ja-source-note p, .ja-score-copy, .ja-today-card p, .ja-calendar-note),
#adminView .journal-almanac-admin-root :is(.ja-calendar-note, .ja-template-row span, .ja-pagination) {
  color: #6b7280;
}

#journalAlmanacView :is(.ja-filter-form input, .ja-filter-form select, .ja-journal-picker select, .ja-card-head select),
#adminView .journal-almanac-admin-root :is(.ja-filter-form input, .ja-filter-form select, .ja-card-head select, .ja-edit-grid input, .ja-edit-grid select, .ja-edit-grid textarea, .ja-rules-editor textarea, .ja-import-box select) {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(255, 255, 255, 0.94);
}

#journalAlmanacView :is(input, textarea, select):focus,
#adminView .journal-almanac-admin-root :is(input, textarea, select):focus {
  border-color: rgba(245, 158, 11, 0.58);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

#journalAlmanacView :is(.primary-button, .mini-button.strong, .secondary-button.is-active),
#adminView .journal-almanac-admin-root :is(.primary-button, .mini-button.strong, .segment.is-active, .secondary-button.is-active) {
  color: #fff;
  background: linear-gradient(135deg, var(--journal-accent), var(--journal-accent-2));
  border-color: rgba(245, 158, 11, 0.34);
  box-shadow: 0 12px 28px var(--journal-shadow);
}

#journalAlmanacView :is(.secondary-button, .mini-button, .file-pill),
#adminView .journal-almanac-admin-root :is(.secondary-button, .mini-button, .file-pill, .segment) {
  color: var(--journal-accent);
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--journal-line);
}

#journalAlmanacView .ja-ai-discovery {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.76);
}

#journalAlmanacView .ja-ai-discovery div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#journalAlmanacView .ja-discovery-input {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#journalAlmanacView .ja-ai-discovery strong {
  color: var(--journal-dark);
  font-size: 14px;
}

#journalAlmanacView .ja-ai-discovery span {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#journalAlmanacView .ja-discovery-input input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  padding: 8px 10px;
}

#journalAlmanacView .ja-ai-discovery.is-error {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(254, 242, 242, 0.82);
}

#journalAlmanacView .ja-ai-discovery.is-error strong,
#journalAlmanacView .ja-ai-discovery.is-error span {
  color: #b91c1c;
}

#journalAlmanacView :is(.ja-head-stats span, .ja-metric-grid div, .ja-detail-grid div, .ja-today-score, .ja-table th, .ja-calendar-empty, .ja-chip-list span, .ja-muted),
#adminView .journal-almanac-admin-root :is(.ja-template-row, .ja-import-result, .ja-inline-json, .ja-table th) {
  border-color: rgba(245, 158, 11, 0.16);
  background: rgba(255, 251, 235, 0.68);
}

#journalAlmanacView .ja-head-stats span {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(71, 39, 7, 0.38);
  color: #fff7df;
  text-shadow: 0 1px 2px rgba(36, 23, 5, 0.34);
}

#journalAlmanacView .ja-head-stats strong {
  color: #fffdf4;
  text-shadow: 0 1px 2px rgba(36, 23, 5, 0.38);
}

#journalAlmanacView .ja-confidence {
  border-color: rgba(120, 53, 15, 0.18);
  background: rgba(255, 255, 255, 0.94);
  color: #2f3d35;
  text-shadow: none;
}

#journalAlmanacView .ja-score-ring {
  border-color: rgba(245, 158, 11, 0.3);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.96), rgba(255, 251, 235, 0.9));
}

#journalAlmanacView :is(.ja-score-ring strong, .ja-today-score strong, .ja-detail-score strong, .ja-day em),
#adminView .journal-almanac-admin-root .ja-table td > strong {
  color: var(--journal-accent);
}

#journalAlmanacView :is(.ja-score-great, .ja-score-good, .ja-score-small-good) {
  border-color: rgba(245, 158, 11, 0.38);
}

#journalAlmanacView :is(.ja-score-neutral, .ja-score-caution, .ja-score-bad) {
  border-color: rgba(180, 83, 9, 0.32);
}

#journalAlmanacView .ja-day {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

#journalAlmanacView .ja-day:hover {
  border-color: rgba(245, 158, 11, 0.42);
  box-shadow: 0 12px 28px rgba(180, 83, 9, 0.12);
}

#journalAlmanacView .ja-day.is-today {
  border-color: rgba(36, 95, 156, 0.72);
  box-shadow:
    inset 0 0 0 2px rgba(36, 95, 156, 0.24),
    0 14px 32px rgba(36, 95, 156, 0.16);
}

#journalAlmanacView .ja-today-badge {
  background: linear-gradient(135deg, var(--blue), var(--green));
}

#journalAlmanacView :is(.ja-day-good, .ja-day-great) {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.18), rgba(255, 255, 255, 0.94) 54%);
}

#journalAlmanacView .ja-day-neutral {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.94) 54%);
}

#journalAlmanacView :is(.ja-day-caution, .ja-day-bad) {
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.14), rgba(255, 255, 255, 0.94) 54%);
}

#journalAlmanacView .ja-table td,
#adminView .journal-almanac-admin-root .ja-table td {
  border-color: rgba(245, 158, 11, 0.14);
}

#journalAlmanacView .ja-modal {
  border-color: var(--journal-line);
  box-shadow: 0 24px 64px rgba(120, 53, 15, 0.2);
}

@media (max-width: 980px) {
  #journalAlmanacView {
    padding: 10px;
    border-radius: 10px;
  }
}

@media (max-width: 640px) {
  #journalAlmanacView {
    padding: 8px;
  }

  #journalAlmanacView .ja-head h2 {
    font-size: 30px;
  }

  #journalAlmanacView .ja-ai-discovery {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

#journalAlmanacView .ja-ai-discovery button {
    width: 100%;
  }
}

/* Journal Almanac admin: neutral management console, not the public yellow almanac look. */
#adminView .journal-almanac-admin-root {
  --ja-admin-accent: var(--green);
  --ja-admin-accent-2: var(--blue);
  --ja-admin-line: rgba(36, 95, 156, 0.14);
  --ja-admin-soft: #f8fbfa;
  --ja-admin-shadow: rgba(20, 34, 32, 0.08);
}

#adminView .journal-almanac-admin-root :is(.ja-admin-tabs, .ja-admin-panel, .ja-edit-form) {
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 12px 30px var(--ja-admin-shadow);
}

#adminView .journal-almanac-admin-root :is(.ja-card-head h3, .ja-edit-form h3) {
  color: var(--ink);
}

#adminView .journal-almanac-admin-root .ja-table td > strong {
  color: var(--ja-admin-accent);
}

#adminView .journal-almanac-admin-root :is(.ja-filter-form input, .ja-filter-form select, .ja-card-head select, .ja-edit-grid input, .ja-edit-grid select, .ja-edit-grid textarea, .ja-rules-editor textarea, .ja-import-box select) {
  border-color: var(--line);
  background: #fff;
}

#adminView .journal-almanac-admin-root :is(input, textarea, select):focus {
  border-color: rgba(36, 95, 156, 0.45);
  box-shadow: 0 0 0 4px rgba(36, 95, 156, 0.1);
}

#adminView .journal-almanac-admin-root :is(.primary-button, .mini-button.strong, .segment.is-active, .secondary-button.is-active) {
  color: #fff;
  background: linear-gradient(135deg, var(--ja-admin-accent), var(--ja-admin-accent-2));
  border-color: rgba(36, 95, 156, 0.22);
  box-shadow: 0 10px 24px rgba(20, 34, 32, 0.1);
}

#adminView .journal-almanac-admin-root :is(.secondary-button, .mini-button, .file-pill, .segment) {
  color: var(--ja-admin-accent-2);
  background: #fff;
  border-color: var(--line);
}

#adminView .journal-almanac-admin-root :is(.ja-template-row, .ja-import-result, .ja-inline-json, .ja-table th) {
  border-color: var(--line);
  background: var(--ja-admin-soft);
}

#adminView .journal-almanac-admin-root .ja-table td {
  border-color: var(--line);
}

#adminView .journal-almanac-admin-root :is(.ja-calendar-note, .ja-template-row span, .ja-pagination) {
  color: var(--muted);
}

#adminView .journal-almanac-admin-root :is(.ja-confidence-low, .ja-confidence-unknown) {
  border-color: rgba(102, 113, 110, 0.24);
  color: var(--muted);
  background: #fff;
}

@media (max-width: 640px) {
  #journalAlmanacView {
    overflow: visible;
    padding: 6px;
    border: 0;
    border-radius: 0;
    background: #f6f7f9;
    box-shadow: none;
  }

  #journalAlmanacView::before {
    display: none;
  }

  #journalAlmanacView .journal-almanac-module-host {
    gap: 10px;
  }

  #journalAlmanacView :is(.ja-head, .ja-card, .ja-filter-panel, .ja-source-note) {
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(120, 53, 15, 0.08);
  }

  #journalAlmanacView .ja-head {
    display: grid;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
  }

  #journalAlmanacView .ja-head h2 {
    margin: 2px 0 4px;
    font-size: 27px;
    line-height: 1.12;
  }

  #journalAlmanacView .ja-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
  }

  #journalAlmanacView .ja-head small,
  #journalAlmanacView .ja-note {
    display: none;
  }

  #journalAlmanacView .ja-head-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }

  #journalAlmanacView .ja-head-stats span {
    min-width: 0;
    min-height: 62px;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
  }

  #journalAlmanacView .ja-head-stats strong {
    font-size: 22px;
  }

  #journalAlmanacView .ja-filter-panel,
  #journalAlmanacView .ja-card,
  #journalAlmanacView .ja-source-note {
    padding: 10px;
  }

  #journalAlmanacView .ja-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #journalAlmanacView .ja-filter-form label:first-child,
  #journalAlmanacView .ja-filter-actions {
    grid-column: 1 / -1;
  }

  #journalAlmanacView .ja-filter-form label,
  #journalAlmanacView .ja-journal-picker,
  #journalAlmanacView .ja-discovery-input {
    gap: 4px;
    font-size: 11px;
  }

  #journalAlmanacView :is(.ja-filter-form input, .ja-filter-form select, .ja-journal-picker select, .ja-card-head select, .ja-discovery-input input) {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
  }

  #journalAlmanacView .ja-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #journalAlmanacView .ja-filter-actions button {
    width: 100%;
    min-width: 0;
  }

  #journalAlmanacView .ja-ai-discovery {
    gap: 8px;
    padding: 10px;
  }

  #journalAlmanacView .ja-ai-discovery span {
    display: none;
  }

  #journalAlmanacView .ja-ai-discovery button {
    width: 100%;
  }

  #journalAlmanacView .ja-dashboard,
  #journalAlmanacView .ja-main-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #journalAlmanacView .ja-score-card {
    order: -1;
  }

  #journalAlmanacView .ja-card-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  #journalAlmanacView .ja-card-head h3,
  #journalAlmanacView .ja-card h3 {
    font-size: 16px;
  }

  #journalAlmanacView .ja-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #journalAlmanacView .ja-metric-grid div,
  #journalAlmanacView .ja-detail-grid div,
  #journalAlmanacView .ja-today-score {
    padding: 8px;
  }

  #journalAlmanacView .ja-metric-grid span,
  #journalAlmanacView .ja-detail-grid span {
    font-size: 10px;
  }

  #journalAlmanacView .ja-metric-grid strong,
  #journalAlmanacView .ja-detail-grid strong {
    font-size: 12px;
  }

  #journalAlmanacView .ja-score-top {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  #journalAlmanacView .ja-score-ring {
    width: 86px;
    border-width: 6px;
  }

  #journalAlmanacView .ja-score-ring strong {
    font-size: 24px;
  }

  #journalAlmanacView .ja-score-ring span {
    max-width: 68px;
    font-size: 9px;
  }

  #journalAlmanacView .ja-score-top p,
  #journalAlmanacView .ja-score-copy,
  #journalAlmanacView .ja-today-card p,
  #journalAlmanacView .ja-calendar-note,
  #journalAlmanacView .ja-source-note p {
    font-size: 12px;
    line-height: 1.55;
  }

  #journalAlmanacView .ja-factor-grid,
  #journalAlmanacView .ja-advice-columns,
  #journalAlmanacView .ja-detail-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #journalAlmanacView .ja-chip-list {
    gap: 5px;
  }

  #journalAlmanacView .ja-chip-list span,
  #journalAlmanacView .ja-muted {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 11px;
  }

  #journalAlmanacView .ja-month-tools {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    align-items: center;
  }

  #journalAlmanacView .ja-month-tools .mini-button {
    min-width: 0;
    padding: 0 8px;
  }

  #journalAlmanacView .ja-calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }

  #journalAlmanacView .ja-weekday {
    min-height: 24px;
    font-size: 11px;
  }

  #journalAlmanacView .ja-calendar-empty {
    min-height: 44px;
  }

  #journalAlmanacView .ja-day {
    min-height: 54px;
    gap: 2px;
    padding: 4px;
    grid-template-rows: auto auto;
  }

  #journalAlmanacView .ja-day span {
    font-size: 10px;
  }

  #journalAlmanacView .ja-day strong {
    font-size: 16px;
  }

  #journalAlmanacView .ja-day em,
  #journalAlmanacView .ja-day small,
  #journalAlmanacView .ja-day .ja-confidence {
    display: none;
  }

  #journalAlmanacView .ja-today-badge {
    top: 3px;
    right: 3px;
    min-height: 16px;
    padding: 1px 4px;
    font-size: 9px;
  }

  #journalAlmanacView .ja-today-score strong {
    font-size: 26px;
  }

  #journalAlmanacView .ja-ranking-card .ja-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  #journalAlmanacView .ja-ranking-card .ja-table thead {
    display: none;
  }

  #journalAlmanacView .ja-ranking-card .ja-table,
  #journalAlmanacView .ja-ranking-card .ja-table tbody,
  #journalAlmanacView .ja-ranking-card .ja-table tr,
  #journalAlmanacView .ja-ranking-card .ja-table td {
    display: block;
    width: 100%;
  }

  #journalAlmanacView .ja-ranking-card .ja-table tr {
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid var(--journal-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
  }

  #journalAlmanacView .ja-ranking-card .ja-table td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.12);
    padding: 7px 9px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  #journalAlmanacView .ja-ranking-card .ja-table td:last-child {
    border-bottom: 0;
  }

  #journalAlmanacView .ja-ranking-card .ja-table td::before {
    color: #9a6a12;
    font-size: 10px;
    font-weight: 900;
  }

  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(1)::before { content: "期刊"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(2)::before { content: "出版"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(3)::before { content: "学科"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(4)::before { content: "分区"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(5)::before { content: "接收率"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(6)::before { content: "初审"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(7)::before { content: "IF"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(8)::before { content: "CiteScore"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(9)::before { content: "指数"; }
  #journalAlmanacView .ja-ranking-card .ja-table td:nth-child(10)::before { content: "可信度"; }

  #journalAlmanacView .ja-modal-backdrop {
    align-items: end;
    justify-items: stretch;
    padding: 0;
  }

  #journalAlmanacView .ja-modal {
    width: 100%;
    max-height: 86dvh;
    border-radius: 14px 14px 0 0;
    padding: 14px;
  }

  #journalAlmanacView .ja-detail-score {
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 10px;
  }

  #journalAlmanacView .ja-detail-score strong {
    font-size: 28px;
  }
}

/* YOOKERD desktop viewport lock */
@media (min-width: 981px) {
  #digitalSelfView.digital-layout {
    height: calc(100dvh - 132px);
    max-height: calc(100dvh - 132px);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
  }

  #digitalSelfView .section-head.yookerd-head {
    min-height: 56px;
    padding: 12px 18px;
  }

  #digitalSelfView .section-head.yookerd-head h2 {
    font-size: 22px;
    line-height: 1;
  }

  #digitalSelfView .yookerd-console {
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
    align-items: stretch;
  }

  #digitalSelfView .yookerd-chat-panel {
    min-height: 0;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  #digitalSelfView .yookerd-welcome {
    min-height: 42px;
    padding: 8px 12px;
  }

  #digitalSelfView .messages {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
  }

  #digitalSelfView .composer {
    flex: 0 0 auto;
  }

  #digitalSelfView #messageInput {
    max-height: 96px;
    overflow-y: auto;
  }

  #digitalSelfView .yookerd-avatar-panel {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #digitalSelfView .yookerd-avatar-stage {
    min-height: 0;
    height: 100%;
  }

  #digitalSelfView .yookerd-avatar {
    width: min(58%, 300px);
  }
}

#digitalSelfView .yookerd-phone-time,
#digitalSelfView .yookerd-phone-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

#digitalSelfView .yookerd-phone-time strong {
  color: #0f2f3c;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

#digitalSelfView .yookerd-phone-time span,
#digitalSelfView .yookerd-phone-meta span {
  color: #506471;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

#digitalSelfView .yookerd-phone-meta span {
  padding: 4px 8px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

/* YOOKERD mobile chat viewport */
@media (max-width: 760px) {
  body.yookerd-mode {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #f6f7f9;
  }

  body.yookerd-mode .app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.yookerd-mode .app-main {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 8px;
    overflow: hidden;
  }

  body.yookerd-mode #digitalSelfView.digital-layout {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    overflow: hidden;
  }

  body.yookerd-mode #digitalSelfView::before {
    display: none;
  }

  body.yookerd-mode #digitalSelfView .section-head.yookerd-head {
    min-height: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  body.yookerd-mode #digitalSelfView .section-head.yookerd-head h2 {
    font-size: 22px;
    line-height: 1;
  }

  body.yookerd-mode #digitalSelfView .yookerd-head-actions {
    align-items: center;
    flex-direction: row;
  }

  body.yookerd-mode #digitalSelfView .yookerd-head-actions .secondary-button {
    min-height: 36px;
    padding: 0 10px;
    white-space: nowrap;
  }

  body.yookerd-mode #digitalSelfView .yookerd-console {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    --yookerd-pip-width: clamp(112px, 34vw, 148px);
    --yookerd-pip-height: calc(var(--yookerd-pip-width) * 0.75);
  }

  body.yookerd-mode #digitalSelfView .yookerd-chat-panel {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-radius: 10px;
    overflow: hidden;
  }

  body.yookerd-mode #digitalSelfView .yookerd-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 10px;
  }

  body.yookerd-mode #digitalSelfView .yookerd-phone-time {
    display: none;
  }

  body.yookerd-mode #digitalSelfView .yookerd-phone-meta {
    justify-content: center;
  }

  body.yookerd-mode #digitalSelfView .messages {
    min-height: 0;
    padding: calc(var(--yookerd-pip-height) + 22px) 10px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  body.yookerd-mode #digitalSelfView .messages::-webkit-scrollbar {
    width: 6px;
  }

  body.yookerd-mode #digitalSelfView .messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.28);
  }

  body.yookerd-mode #digitalSelfView .message {
    max-width: min(88%, 620px);
  }

  body.yookerd-mode #digitalSelfView .message-bubble {
    padding: 10px 11px;
    font-size: 14px;
    line-height: 1.58;
  }

  body.yookerd-mode #digitalSelfView .yookerd-empty {
    margin: auto;
  }

  body.yookerd-mode #digitalSelfView .composer {
    grid-template-columns: 34px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: end;
    padding: 8px;
    background: rgba(255, 255, 255, 0.96);
  }

  body.yookerd-mode #digitalSelfView .composer .icon-button,
  body.yookerd-mode #digitalSelfView .composer .send-button {
    width: 34px;
    height: 38px;
    min-height: 38px;
    padding: 0;
  }

  body.yookerd-mode #digitalSelfView .composer .send-button {
    width: 42px;
    height: 42px;
  }

  body.yookerd-mode #digitalSelfView #messageInput {
    min-height: 38px;
    max-height: min(34dvh, 156px);
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.45;
    overflow-y: auto;
    overflow-wrap: anywhere;
  }

  body.yookerd-mode #digitalSelfView .yookerd-avatar-panel {
    position: absolute;
    top: 48px;
    left: 10px;
    z-index: 4;
    width: var(--yookerd-pip-width);
    min-height: 0;
    height: var(--yookerd-pip-height);
    aspect-ratio: 4 / 3;
    padding: 6px;
    border-radius: 12px;
    background:
      linear-gradient(rgba(18, 118, 95, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(25, 91, 158, 0.06) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 250, 255, 0.92));
    background-size: 20px 20px, 20px 20px, auto;
    box-shadow: 0 14px 34px rgba(14, 116, 144, 0.2);
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    transform:
      translate3d(var(--yookerd-avatar-window-x, 0), var(--yookerd-avatar-window-y, 0), 0)
      scale(var(--yookerd-avatar-window-scale, 1));
    transform-origin: top left;
    user-select: none;
  }

  body.yookerd-mode #digitalSelfView .yookerd-avatar-panel.is-dragging {
    cursor: grabbing;
  }

  body.yookerd-mode #digitalSelfView .yookerd-avatar-stage {
    height: 100%;
    min-height: 0;
  }

  body.yookerd-mode #digitalSelfView .yookerd-avatar {
    width: min(70%, 100px);
  }

  body.yookerd-mode #digitalSelfView .avatar-hair {
    box-shadow: 0 6px 0 #273238;
  }

  body.yookerd-mode #digitalSelfView .avatar-eye {
    width: 4px;
    height: 4px;
  }

  body.yookerd-mode #digitalSelfView .avatar-mouth {
    height: 4px;
    border-bottom-width: 1px;
  }

  body.yookerd-mode #digitalSelfView .avatar-bow {
    height: 2px;
  }

  body.yookerd-mode #digitalSelfView .yookerd-avatar-stage[data-state="thinking"] .avatar-eye {
    height: 2px;
    margin-top: 2px;
  }

  body.yookerd-mode #digitalSelfView .yookerd-avatar-stage[data-state="speaking"] .avatar-mouth {
    height: 6px;
    border-width: 1px;
    border-top: 0;
  }

  body.yookerd-mode #digitalSelfView .yookerd-avatar-copy {
    display: none;
  }
}

/* Consistent single-line module headers */
#switcherView > .section-head,
#workstationView > .section-head,
#digitalSelfView .section-head.yookerd-head,
#treeholeView .section-head.treehole-head,
#mbtiView > .section-head,
#memoView > .section-head,
.plaz-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 14px 18px;
}

#switcherView > .section-head > div,
#workstationView > .section-head > div,
#digitalSelfView .section-head.yookerd-head > div:first-child,
#treeholeView .section-head.treehole-head > div:first-child,
#mbtiView > .section-head > div,
#memoView > .section-head > div,
.plaz-hero > div {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding-right: 0;
}

.section-title-row {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.section-logo {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

#switcherView > .section-head h2,
#workstationView > .section-head h2,
#digitalSelfView .section-head.yookerd-head h2,
#treeholeView .section-head.treehole-head h2,
#mbtiView > .section-head h2,
#memoView > .section-head h2,
.plaz-hero h2 {
  margin: 0;
  min-width: 0;
  color: inherit;
  font-size: 28px;
  line-height: 1.1;
  white-space: nowrap;
}

#switcherView .plaz-shortcut,
#workstationView > .section-head > .secondary-button,
#digitalSelfView .yookerd-head-actions .secondary-button,
#treeholeView .treehole-head > .secondary-button,
#mbtiView > .section-head > .secondary-button,
#memoView > .section-head > .secondary-button,
.plaz-hero .primary-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

#switcherView .plaz-shortcut {
  gap: 8px;
  min-width: 104px;
}

#switcherView .plaz-shortcut strong {
  display: inline;
}

#treeholeView .section-head.treehole-head {
  position: relative;
  overflow: hidden;
}

#treeholeView .treehole-head > div:first-child {
  position: relative;
  z-index: 1;
  margin-right: auto;
}

#treeholeView .treehole-head #refreshTreeholeButton,
#treeholeView .treehole-head .treehole-music-toggle {
  position: static;
  z-index: 1;
  margin: 0;
}

#treeholeView .treehole-head .treehole-music-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-height: 44px;
}

#treeholeView .treehole-head .treehole-music-note {
  width: 30px;
  height: 30px;
  font-size: 20px;
}

@media (max-width: 980px) {
  #switcherView > .section-head,
  #workstationView > .section-head,
  #digitalSelfView .section-head.yookerd-head,
  #treeholeView .section-head.treehole-head,
  #mbtiView > .section-head,
  #memoView > .section-head,
  .plaz-hero {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px;
  }

  #switcherView > .section-head h2,
  #workstationView > .section-head h2,
  #digitalSelfView .section-head.yookerd-head h2,
  #treeholeView .section-head.treehole-head h2,
  #mbtiView > .section-head h2,
  #memoView > .section-head h2,
  .plaz-hero h2 {
    font-size: 22px;
  }

  .section-logo {
    width: 30px;
    height: 30px;
  }

  #switcherView .plaz-shortcut,
  #workstationView > .section-head > .secondary-button,
  #digitalSelfView .yookerd-head-actions .secondary-button,
  #treeholeView .treehole-head > .secondary-button,
  #mbtiView > .section-head > .secondary-button,
  #memoView > .section-head > .secondary-button,
  .plaz-hero .primary-button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  #switcherView .plaz-shortcut {
    min-width: 96px;
    padding: 0 12px;
  }

  #switcherView .plaz-shortcut strong {
    display: inline;
  }

  #treeholeView .treehole-head .treehole-music-toggle {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  #treeholeView .treehole-head .treehole-music-note {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}

@media (max-width: 420px) {
  #switcherView > .section-head,
  #workstationView > .section-head,
  #digitalSelfView .section-head.yookerd-head,
  #treeholeView .section-head.treehole-head,
  #mbtiView > .section-head,
  #memoView > .section-head,
  .plaz-hero {
    gap: 8px;
    padding: 10px;
  }

  #switcherView > .section-head h2,
  #workstationView > .section-head h2,
  #digitalSelfView .section-head.yookerd-head h2,
  #treeholeView .section-head.treehole-head h2,
  #mbtiView > .section-head h2,
  #memoView > .section-head h2,
  .plaz-hero h2 {
    font-size: 20px;
  }

  .section-logo {
    width: 28px;
    height: 28px;
  }

  #switcherView .plaz-shortcut,
  #workstationView > .section-head > .secondary-button,
  #digitalSelfView .yookerd-head-actions .secondary-button,
  #treeholeView .treehole-head > .secondary-button,
  #mbtiView > .section-head > .secondary-button,
  #memoView > .section-head > .secondary-button,
  .plaz-hero .primary-button {
    min-height: 38px;
    padding: 0 10px;
    font-size: 13px;
  }

  #switcherView .plaz-shortcut {
    min-width: 88px;
  }
}

/* Plaza-aligned treehole front layout */
#treeholeView.treehole-view {
  display: grid;
  align-content: start;
  gap: 16px;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 16px;
  overflow: hidden;
}

#treeholeView .section-head.treehole-head {
  width: 100%;
  min-height: 74px;
  border-radius: 8px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(8, 79, 55, 0.98), rgba(43, 185, 138, 0.94)),
    radial-gradient(circle at 16% 0%, rgba(116, 224, 182, 0.34), transparent 28%);
  box-shadow: 0 24px 58px rgba(23, 107, 87, 0.22);
}

#treeholeView .section-head.treehole-head h2 {
  font-size: 30px;
}

#treeholeView .treehole-toolbar.plaz-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin: 0;
}

#treeholeView .treehole-toolbar input {
  width: 100%;
}

#treeholeView .treehole-feed {
  display: block;
  width: 100%;
  margin: 0 auto;
  column-count: 1;
  column-gap: 14px;
}

#treeholeView .treehole-post {
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  page-break-inside: avoid;
}

#treeholeView .treehole-empty {
  width: 100%;
  min-height: clamp(220px, 36vh, 380px);
  margin: 0 auto;
  column-span: all;
  display: grid;
  place-items: center;
}

#treeholeView.is-composing {
  width: min(980px, 100%);
}

#treeholeView.is-composing .treehole-toolbar {
  display: none;
}

.private-mode #treeholeView.treehole-view {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
  padding: 16px 18px 24px;
}

.private-mode #treeholeView .treehole-toolbar.plaz-toolbar {
  display: grid;
}

@media (max-width: 980px) {
  #treeholeView.treehole-view {
    padding: 10px;
    gap: 12px;
  }

  #treeholeView .section-head.treehole-head {
    min-height: 58px;
    padding: 12px;
  }

  #treeholeView .section-head.treehole-head h2 {
    font-size: 22px;
  }

  #treeholeView .treehole-toolbar.plaz-toolbar {
    padding: 12px;
  }
}

@media (min-width: 900px) {
  #treeholeView .treehole-feed {
    column-count: 2;
  }
}

@media (min-width: 1320px) {
  #treeholeView .treehole-feed {
    column-count: 3;
  }
}

@media (max-width: 620px) {
  #treeholeView.treehole-view {
    margin: 0;
    padding: 8px;
    border-radius: 10px;
  }

  #treeholeView .treehole-feed {
    width: 100%;
    column-count: 1;
  }
}

.public-reservations-page {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(23, 107, 87, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 95, 156, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, #f7faf9 0%, #eef5f2 48%, #f7f9fb 100%);
  background-size: 34px 34px, 34px 34px, auto;
}

.public-reservations-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 42px;
}

.public-reservations-head,
.public-reservations-actions,
.public-reservations-brand {
  display: flex;
  align-items: center;
}

.public-reservations-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.public-reservations-brand {
  gap: 10px;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
}

.public-reservations-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.public-reservations-actions {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.public-reservations-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 248, 245, 0.92)),
    linear-gradient(90deg, rgba(23, 107, 87, 0.1), rgba(36, 95, 156, 0.08));
  box-shadow: var(--shadow);
}

.public-reservations-hero h1 {
  margin: 8px 0 8px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: 0;
}

.public-reservations-hero p {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.public-reservations-status {
  min-width: 142px;
  padding: 10px 12px;
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 8px;
  color: var(--green);
  background: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.public-office-overview,
.public-experiment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.public-office-overview {
  gap: 10px;
}

.public-office-tab {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 11px 14px;
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 244, 0.82)),
    linear-gradient(135deg, rgba(23, 107, 87, 0.06), rgba(36, 95, 156, 0.04));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.public-office-tab.is-active {
  border-color: rgba(23, 107, 87, 0.36);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(228, 247, 238, 0.92)),
    linear-gradient(135deg, rgba(23, 107, 87, 0.12), rgba(36, 95, 156, 0.08));
  box-shadow: 0 12px 28px rgba(23, 107, 87, 0.12);
}

.public-office-tab:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

.public-office-tab span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.public-office-tab strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0;
}

.public-office-card,
.public-experiment-card,
.public-inventory-card {
  display: grid;
  gap: 9px;
  min-height: 156px;
  padding: 18px;
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 244, 0.92)),
    linear-gradient(135deg, rgba(23, 107, 87, 0.08), rgba(36, 95, 156, 0.06));
  box-shadow: var(--shadow);
}

.public-office-card {
  color: var(--ink);
  text-decoration: none;
}

.public-office-card span,
.public-experiment-card span,
.public-inventory-card span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.public-office-card strong,
.public-experiment-card h3,
.public-inventory-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.public-office-card p,
.public-experiment-card p,
.public-inventory-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.public-office-card em,
.public-inventory-card em {
  width: fit-content;
  margin-top: auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0f7a4a;
  background: rgba(34, 197, 94, 0.12);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.public-office-section {
  margin-top: 22px;
}

.public-office-section[hidden] {
  display: none;
}

.public-office-section > .panel-heading {
  margin-bottom: 12px;
}

.public-reservations-devices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.public-device-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.76fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.public-device-card img {
  width: 100%;
  height: 100%;
  min-height: 236px;
  object-fit: cover;
  background: linear-gradient(135deg, #10141c, #2f3642);
}

.public-device-copy {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px;
}

.public-device-copy > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.public-device-copy h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: 0;
}

.public-device-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.public-device-next {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.public-device-next div {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(201, 73, 73, 0.16);
  border-radius: 8px;
  background: rgba(201, 73, 73, 0.06);
}

.public-device-next div.is-free {
  border-color: rgba(23, 107, 87, 0.16);
  background: rgba(23, 107, 87, 0.06);
}

.public-device-next div.is-free strong {
  color: #176b57;
}

.public-device-next strong,
.public-device-next span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.public-device-next strong {
  color: #8f2f2f;
  font-size: 13px;
}

.public-device-next span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.public-reservations-schedule {
  margin: 0;
}

.public-reserved-block {
  cursor: default;
}

.public-inventory-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.public-inventory-group {
  display: grid;
  gap: 8px;
}

.public-inventory-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.public-inventory-group-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

.public-inventory-group-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.public-inventory-table-wrap {
  overflow: hidden;
  border: 1px solid rgba(32, 49, 59, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.public-inventory-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--ink);
}

.public-inventory-name-col {
  width: 58%;
}

.public-inventory-stock-col {
  width: 17%;
}

.public-inventory-status-col {
  width: 25%;
}

.public-inventory-table th,
.public-inventory-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(32, 49, 59, 0.08);
  text-align: left;
  vertical-align: middle;
}

.public-inventory-table th {
  color: var(--muted);
  background: rgba(239, 250, 244, 0.7);
  font-size: 12px;
  font-weight: 900;
}

.public-inventory-table tbody tr:last-child td {
  border-bottom: 0;
}

.public-inventory-table tbody tr.low {
  background: rgba(245, 158, 11, 0.05);
}

.public-inventory-table tbody tr.empty {
  background: rgba(201, 73, 73, 0.05);
}

.public-inventory-table strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.public-inventory-table small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.public-inventory-table b {
  font-size: 17px;
}

.public-inventory-table td:nth-child(2),
.public-inventory-table td:nth-child(3) {
  white-space: nowrap;
}

.public-inventory-table span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: #0f7a4a;
  background: rgba(34, 197, 94, 0.12);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.public-inventory-table tr.low span {
  color: #8a5a00;
  background: rgba(245, 158, 11, 0.14);
}

.public-inventory-table tr.empty span {
  color: #8f2f2f;
  background: rgba(201, 73, 73, 0.12);
}

@media (max-width: 980px) {
  .public-reservations-head,
  .public-reservations-hero,
  .public-reservations-devices,
  .public-office-overview,
  .public-experiment-grid,
  .public-device-card {
    grid-template-columns: 1fr;
  }

  .public-reservations-head {
    align-items: flex-start;
  }

  .public-reservations-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .public-reservations-hero {
    padding: 22px;
  }

  .public-reservations-status {
    width: fit-content;
  }

  .public-device-card img {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .public-reservations-shell {
    width: min(100% - 20px, 1180px);
    padding-top: 12px;
  }

  .public-reservations-brand span {
    font-size: 14px;
  }

  .public-reservations-actions .primary-button,
  .public-reservations-actions .secondary-button {
    flex: 1 1 130px;
  }

  .public-inventory-grid {
    gap: 12px;
  }

  .public-inventory-group-head h3 {
    font-size: 16px;
  }

  .public-inventory-table th,
  .public-inventory-table td {
    padding: 8px 7px;
  }

  .public-inventory-table th {
    font-size: 11px;
  }

  .public-inventory-name-col {
    width: 50%;
  }

  .public-inventory-stock-col {
    width: 20%;
  }

  .public-inventory-status-col {
    width: 30%;
  }

  .public-inventory-table strong {
    font-size: 13px;
  }

  .public-inventory-table small {
    font-size: 10px;
  }

  .public-inventory-table b {
    font-size: 14px;
  }

  .public-inventory-table span {
    padding: 3px 5px;
    font-size: 10px;
  }
}

/* YOOKERD information architecture refresh: public workspace, private space, tools center. */
:root {
  --bg: #f0fdf4;
  --surface-soft: #f6fbf8;
  --green: #16a34a;
  --brand-green: #22c55e;
  --mint: #dcfce7;
  --ink: #111827;
  --muted: #6b7280;
  --line: #dbe7df;
  --shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

body:not(.admin-console-mode) {
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 197, 94, 0.12), transparent 26%),
    radial-gradient(circle at 92% 8%, rgba(59, 130, 246, 0.08), transparent 28%),
    linear-gradient(180deg, #fbfefc, #f0fdf4 58%, #f8fafc);
}

.topbar {
  min-height: 74px;
  border-bottom-color: rgba(22, 163, 74, 0.12);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.04);
}

.top-actions {
  flex: 1;
  justify-content: space-between;
  flex-wrap: nowrap;
  min-width: 0;
}

.workspace-nav,
.workspace-top-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.workspace-nav {
  flex: 0 0 auto;
}

.workspace-top-tools {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.workspace-nav-button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #253238;
  background: transparent;
  font-weight: 900;
}

.workspace-nav-button:hover:not(:disabled),
.workspace-nav-button.is-active {
  color: #087a35;
  border-color: rgba(34, 197, 94, 0.16);
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.88), rgba(255, 255, 255, 0.92));
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.1);
}

.top-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  width: clamp(180px, 20vw, 300px);
  max-width: 300px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.top-search input {
  width: 100%;
  min-height: 36px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.top-search input:focus {
  box-shadow: none;
}

.top-icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 14px;
  background: #fff;
  color: #1f2937;
  font-weight: 900;
}

.avatar-menu-wrap {
  position: relative;
}

.user-chip {
  min-height: 42px;
  max-width: 220px;
  border-color: rgba(22, 163, 74, 0.14);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.user-chip small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.user-chip b {
  color: var(--muted);
  font-size: 13px;
}

body.mobile-app-mode.module-switcher-topbar-mode .workspace-nav,
body.mobile-app-mode.module-switcher-topbar-mode .top-search,
body.mobile-app-mode.workspace-entry-topbar-mode .top-search,
body.mobile-app-mode.workspace-entry-topbar-mode .module-select,
body.mobile-app-mode.workspace-entry-topbar-mode .workspace-nav-button:not([data-view="switcher"]) {
  display: none !important;
}

body.mobile-app-mode.module-switcher-topbar-mode .module-select {
  display: inline-block;
  width: min(180px, 42vw);
}

body.mobile-app-mode.workspace-entry-topbar-mode .workspace-nav {
  flex: 0 0 auto;
}

body.direct-module-topbar-mode:not(.mobile-app-mode) .module-select,
body.select-module-topbar-mode:not(.mobile-app-mode) .workspace-nav {
  display: none !important;
}

body.direct-module-topbar-mode:not(.mobile-app-mode) [data-topbar-module-button] {
  display: inline-flex;
}

.avatar-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.14);
}

.avatar-menu button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1f2937;
  font-weight: 800;
  text-align: left;
  padding: 0 10px;
}

.avatar-menu button:hover {
  background: #f0fdf4;
  color: #087a35;
  transform: none;
}

.mobile-avatar-menu {
  display: none;
}

.workspace-home {
  gap: 20px;
}

.workspace-hero,
.hub-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  align-items: stretch;
  min-height: 360px;
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.58)),
    radial-gradient(circle at 78% 10%, rgba(34, 197, 94, 0.18), transparent 36%),
    linear-gradient(135deg, #f5fff8, #ecfdf5);
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.08);
}

.workspace-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(26px, 5vw, 58px);
}

.workspace-hero h1 {
  margin: 0;
  color: #08632e;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
}

.workspace-hero p,
.hub-hero p {
  max-width: 560px;
  margin: 0;
  color: #374151;
  font-size: 17px;
  line-height: 1.7;
}

.workspace-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 14px;
  max-width: 680px;
}

.workspace-stat-card {
  appearance: none;
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(22, 163, 74, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
  color: inherit;
  font: inherit;
  text-align: left;
}

.workspace-stat-action {
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.workspace-stat-action:hover {
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.workspace-stat-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.workspace-stat-card strong {
  color: #111827;
  font-size: 24px;
}

.workspace-hero-visual {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 20px 20px 20px 0;
}

.workspace-hero-visual img {
  width: min(100%, 560px);
  aspect-ratio: 1.35;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 24px;
  filter: saturate(0.86) brightness(1.04);
  opacity: 0.9;
}

.workspace-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  gap: 20px;
}

.workspace-primary,
.workspace-sidebar,
.workspace-section,
.workspace-side-card {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.workspace-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-section-head h2,
.workspace-section-head h3 {
  margin: 0;
  color: #111827;
}

.workspace-section-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.text-link-button {
  border: 0;
  background: transparent;
  color: #087a35;
  font-weight: 900;
}

.module-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.private-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tool-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.yookerd-module-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon copy arrow"
    "status status arrow";
  align-items: start;
  gap: 12px;
  min-height: 172px;
  padding: 18px;
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.84));
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
  text-align: left;
}

.yookerd-module-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -38px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16), transparent 66%);
  pointer-events: none;
}

.yookerd-module-card.public:nth-child(2n)::after,
.yookerd-module-card.tool:nth-child(2n)::after {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14), transparent 66%);
}

.yookerd-module-card:hover:not(:disabled) {
  border-color: rgba(34, 197, 94, 0.28);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.11);
}

.module-card-icon {
  grid-area: icon;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, #dcfce7, #fff);
  color: #087a35;
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.12);
  font-weight: 900;
}

.module-card-copy {
  grid-area: copy;
  min-width: 0;
}

.module-card-copy strong {
  display: block;
  color: #111827;
  font-size: 18px;
}

.module-card-copy small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.module-card-status {
  grid-area: status;
  align-self: end;
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(220, 252, 231, 0.8);
  color: #087a35;
  font-size: 12px;
  font-weight: 900;
}

.module-card-arrow {
  grid-area: arrow;
  color: #087a35;
  font-size: 26px;
  line-height: 1;
}

.workspace-side-card,
.workspace-side-illustration {
  padding: 18px;
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.activity-list {
  display: grid;
}

.activity-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(22, 163, 74, 0.1);
}

.activity-list article:last-child {
  border-bottom: 0;
}

.activity-list > article > span,
.quick-entry-grid .quick-entry-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #f0fdf4;
  color: #087a35;
  font-weight: 900;
}

.activity-list strong,
.activity-list small {
  display: block;
}

.activity-list small,
.activity-list time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-entry-grid button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid rgba(22, 163, 74, 0.1);
  border-radius: 16px;
  background: #fff;
  padding: 9px;
  text-align: left;
}

.quick-entry-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-entry-grid em {
  color: #087a35;
  font-style: normal;
  font-size: 20px;
}

.workspace-side-illustration {
  min-height: 170px;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(240, 253, 244, 0.98)),
    radial-gradient(circle at 70% 20%, rgba(34, 197, 94, 0.18), transparent 30%);
}

.workspace-side-illustration strong,
.workspace-side-illustration span {
  display: block;
}

.workspace-side-illustration span {
  margin-top: 6px;
  color: #087a35;
  font-weight: 800;
}

.workspace-bottom-note {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(22, 163, 74, 0.1);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.8), rgba(255, 255, 255, 0.9));
  color: #087a35;
}

.hub-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 210px;
  padding: 30px;
}

.hub-hero > div {
  display: grid;
  align-content: center;
  gap: 10px;
}

.hub-hero h2 {
  margin: 0;
  color: #08632e;
  font-size: clamp(30px, 4vw, 44px);
}

.hub-hero.private {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 244, 0.86)),
    radial-gradient(circle at 82% 18%, rgba(34, 197, 94, 0.16), transparent 30%);
}

.hub-hero.tools {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.86)),
    radial-gradient(circle at 84% 16%, rgba(59, 130, 246, 0.14), transparent 32%);
}

.hub-hero.messages {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 243, 255, 0.74)),
    radial-gradient(circle at 84% 16%, rgba(139, 92, 246, 0.12), transparent 32%);
}

.workspace-hub-view .module-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.plaz-action-menu,
.treehole-action-menu {
  position: relative;
  margin-left: auto;
}

.plaz-action-menu summary,
.treehole-action-menu summary {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(22, 163, 74, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #374151;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.plaz-action-menu summary::-webkit-details-marker,
.treehole-action-menu summary::-webkit-details-marker {
  display: none;
}

.plaz-action-menu > div,
.treehole-action-menu > div {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 45;
  display: grid;
  min-width: 126px;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.plaz-action-menu button,
.treehole-action-menu button {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1f2937;
  font-weight: 800;
  text-align: left;
  padding: 0 10px;
}

.plaz-action-menu button:hover,
.treehole-action-menu button:hover {
  background: #f8fafc;
  transform: none;
}

.plaz-action-menu .danger-link,
.treehole-action-menu .danger-link {
  color: #f43f5e;
}

.plaz-action-menu .danger-link:hover,
.treehole-action-menu .danger-link:hover {
  background: #fff1f2;
}

.plaz-post-head .plaz-action-menu,
.treehole-post-head .treehole-action-menu {
  align-self: center;
}

.plaz-comment-actions .plaz-action-menu,
.treehole-comment-actions .treehole-action-menu {
  margin: 0;
}

.plaz-comment-actions .plaz-action-menu summary,
.treehole-comment-actions .treehole-action-menu summary {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.bottom-tab-bar {
  display: none;
}

@media (max-width: 1120px) {
  .workspace-layout-grid,
  .workspace-hero {
    grid-template-columns: 1fr;
  }

  .workspace-hero-visual {
    display: none;
  }

  .module-card-grid,
  .private-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-search {
    width: min(260px, 24vw);
  }
}

@media (max-width: 720px) {
  .top-actions,
  .workspace-nav,
  .workspace-top-tools {
    width: 100%;
  }

  .top-actions {
    flex-wrap: wrap;
  }

  .workspace-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .workspace-nav-button {
    min-height: 36px;
    padding: 0 6px;
    font-size: 12px;
  }

  .workspace-top-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.mobile-app-mode.workspace-entry-topbar-mode .top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  body.mobile-app-mode.workspace-entry-topbar-mode .workspace-nav {
    display: inline-flex;
    width: auto;
  }

  body.mobile-app-mode.workspace-entry-topbar-mode .workspace-top-tools {
    display: inline-flex;
    width: auto;
    justify-content: flex-end;
  }

  body.mobile-app-mode.workspace-entry-topbar-mode .user-chip,
  body.mobile-app-mode.module-switcher-topbar-mode .user-chip {
    grid-column: auto;
    width: auto;
  }

  body.mobile-app-mode.module-switcher-topbar-mode .top-actions {
    display: block;
  }

  body.mobile-app-mode.module-switcher-topbar-mode .workspace-top-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  body.mobile-app-mode.module-switcher-topbar-mode .module-select {
    width: 100%;
  }

  body.mobile-app-mode .topbar {
    top: calc(env(safe-area-inset-top) + 8px);
    right: 12px;
    left: 12px;
    z-index: 90;
    display: block;
    min-height: 52px;
    max-height: none;
    overflow: visible;
    padding: 8px 10px;
    border: 1px solid rgba(217, 224, 221, 0.86);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(16px);
  }

  body.mobile-app-mode .topbar.is-hidden {
    transform: translateY(calc(-100% - 18px));
  }

  body.mobile-app-mode .brand {
    display: none;
  }

  body.mobile-app-mode .top-actions {
    width: 100%;
    min-height: 36px;
  }

  body.mobile-app-mode.workspace-entry-topbar-mode .top-actions,
  body.mobile-app-mode.module-switcher-topbar-mode .workspace-top-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  body.mobile-app-mode.workspace-entry-topbar-mode .workspace-nav {
    display: inline-flex;
    width: auto;
    min-width: 0;
  }

  body.mobile-app-mode.workspace-entry-topbar-mode .workspace-top-tools {
    display: flex;
    justify-content: flex-end;
    width: auto;
    min-width: 0;
  }

  body.mobile-app-mode.module-switcher-topbar-mode .top-actions {
    display: block;
  }

  body.mobile-app-mode.module-switcher-topbar-mode .workspace-top-tools {
    width: 100%;
  }

  body.mobile-app-mode .workspace-nav-button[data-view="switcher"],
  body.mobile-app-mode .module-select,
  body.mobile-app-mode .user-chip {
    min-height: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 13px;
  }

  body.mobile-app-mode .workspace-nav-button[data-view="switcher"] {
    padding: 0 14px;
    border-color: rgba(37, 99, 235, 0.12);
    background: rgba(248, 250, 252, 0.92);
    color: #111827;
    box-shadow: none;
  }

  body.mobile-app-mode .module-select {
    width: 100%;
    min-width: 0;
    padding: 0 34px 0 13px;
    border-color: rgba(37, 99, 235, 0.12);
    background-color: rgba(248, 250, 252, 0.92);
    color: #111827;
  }

  body.mobile-app-mode .user-chip {
    width: auto;
    max-width: min(46vw, 190px);
    justify-content: flex-start;
    padding: 0 10px 0 4px;
    border-color: rgba(37, 99, 235, 0.12);
    background: rgba(255, 255, 255, 0.96);
    color: #111827;
    box-shadow: none;
  }

  body.mobile-app-mode .user-chip .avatar-badge {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  body.mobile-app-mode .user-chip > span:not(.avatar-badge) {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.mobile-app-mode .user-chip small {
    display: none;
  }

  body.mobile-app-mode .user-chip b {
    flex: 0 0 auto;
  }

  .top-search {
    width: 100%;
  }

  .app-main {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .workspace-hero,
  .hub-hero {
    min-height: auto;
    border-radius: 22px;
  }

  .workspace-hero-copy,
  .hub-hero {
    padding: 22px;
  }

  .workspace-stats,
  .module-card-grid,
  .private-grid,
  .workspace-hub-view .module-card-grid {
    grid-template-columns: 1fr;
  }

  .workspace-layout-grid,
  .workspace-primary,
  .workspace-sidebar,
  .workspace-section {
    gap: 14px;
  }

  .yookerd-module-card {
    min-height: 136px;
    border-radius: 18px;
  }

  .bottom-tab-bar:not([hidden]) {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 28;
    display: grid;
    grid-template-columns: repeat(var(--bottom-nav-count, 5), minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(22, 163, 74, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(16px);
  }

  .bottom-tab-bar button {
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
  }

  .bottom-tab-bar span {
    font-size: 16px;
    line-height: 1;
  }

  .bottom-tab-bar button.is-active {
    background: #dcfce7;
    color: #087a35;
  }

  .mobile-avatar-menu:not([hidden]) {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: auto;
    z-index: 62;
    display: grid;
    min-width: 176px;
  }

  body.admin-console-mode .bottom-tab-bar,
  body.private-mode .bottom-tab-bar,
  body.private-module-mode .bottom-tab-bar,
  body.yookerd-mode .bottom-tab-bar {
    display: none !important;
  }
}

/* Account pages: profile and privacy are full pages, not avatar dropdown panels. */
.profile-view.profile-panel,
.privacy-view {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.profile-view.profile-panel {
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  border-color: rgba(22, 163, 74, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.84));
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.profile-view .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(22, 163, 74, 0.12);
}

.profile-view .panel-heading h3 {
  margin: 0;
  color: #08632e;
  font-size: clamp(26px, 3vw, 36px);
}

.profile-view .avatar-options {
  padding: 14px;
  border: 1px solid rgba(22, 163, 74, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.profile-view .profile-details-form {
  gap: 16px;
  border-top: 0;
  padding-top: 0;
}

.profile-view .profile-fields-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.profile-view .profile-fields-grid label {
  padding: 12px;
  border: 1px solid rgba(22, 163, 74, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.privacy-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.privacy-card strong {
  display: block;
  color: #111827;
  font-size: 18px;
}

.privacy-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

body.mobile-app-mode.mobile-topbar-open .profile-view.profile-panel:not([hidden]) {
  position: relative;
  inset: auto;
  z-index: auto;
  max-height: none;
  overflow: visible;
  margin: 0 auto;
  padding: 20px;
  border-radius: 22px;
}

@media (max-width: 920px) {
  .profile-view .profile-fields-grid,
  .privacy-grid {
    grid-template-columns: 1fr;
  }

  .privacy-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .privacy-card button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* First-round workspace polish: denser dashboard, themed module cards, compact home return. */
.workspace-home {
  gap: 12px;
}

.workspace-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 0.82fr);
  min-height: 252px;
  border-radius: 24px;
}

.workspace-hero-copy {
  gap: 10px;
  padding: 24px 28px;
}

.workspace-hero h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.06;
}

.workspace-hero p,
.hub-hero p {
  font-size: 14px;
  line-height: 1.5;
}

.workspace-stats {
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 10px;
  max-width: 620px;
}

.workspace-stat-card {
  min-height: 66px;
  padding: 11px 12px;
  border-radius: 14px;
}

.workspace-stat-card strong {
  font-size: 21px;
}

.workspace-hero-visual {
  min-height: 0;
  padding: 12px 14px 12px 0;
}

.workspace-hero-visual img {
  width: 100%;
  height: 100%;
  max-height: 228px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 68% 52%;
  border-radius: 20px;
  filter: saturate(0.98) brightness(1.03);
  opacity: 1;
}

.workspace-layout-grid {
  grid-template-columns: minmax(0, 1fr) minmax(286px, 322px);
  gap: 14px;
}

.workspace-primary,
.workspace-sidebar,
.workspace-section,
.workspace-side-card {
  gap: 10px;
}

.workspace-section-head {
  gap: 8px;
}

.workspace-section-head h2,
.workspace-section-head h3 {
  line-height: 1.15;
}

.module-card-grid {
  gap: 10px;
}

.workspace-home .yookerd-module-card {
  min-height: 118px;
  padding: 13px;
  border-radius: 18px;
  gap: 9px;
}

.workspace-home .module-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.workspace-home .module-card-copy strong {
  font-size: 16px;
}

.workspace-home .module-card-copy small {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}

.workspace-home .module-card-status {
  padding: 5px 9px;
  font-size: 11px;
}

.workspace-home .module-card-arrow {
  font-size: 22px;
}

.workspace-side-card,
.workspace-side-illustration {
  padding: 14px;
  border-radius: 18px;
}

.activity-list article {
  gap: 10px;
  padding: 8px 0;
}

.activity-list > article > span,
.quick-entry-grid .quick-entry-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.quick-entry-grid {
  gap: 8px;
}

.quick-entry-grid button {
  min-height: 46px;
  border-radius: 14px;
  padding: 7px 8px;
}

.workspace-side-illustration {
  min-height: 110px;
}

.workspace-bottom-note {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
}

.workspace-hub-view {
  display: grid;
  gap: 14px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.hub-hero {
  min-height: 132px;
  padding: 18px 20px;
  border-radius: 22px;
}

.hub-hero h2 {
  font-size: clamp(24px, 3vw, 34px);
}

.hub-home-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(22, 163, 74, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  color: #087a35;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.hub-home-button:hover {
  border-color: rgba(22, 163, 74, 0.28);
  background: #f0fdf4;
  transform: translateY(-1px);
}

.hub-hero.tools {
  border-color: rgba(100, 116, 139, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
    radial-gradient(circle at 86% 12%, rgba(100, 116, 139, 0.16), transparent 34%);
}

.hub-hero.tools h2 {
  color: #334155;
}

.hub-hero.messages {
  border-color: rgba(37, 99, 235, 0.13);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.9)),
    radial-gradient(circle at 86% 12%, rgba(59, 130, 246, 0.16), transparent 34%);
}

.hub-hero.messages h2 {
  color: #1d4ed8;
}

.workspace-hub-view .yookerd-module-card.large {
  min-height: 142px;
  padding: 16px;
  border-radius: 20px;
}

.tools-view .module-card-grid,
.messages-view .module-card-grid {
  gap: 12px;
}

.yookerd-module-card {
  --module-accent: #087a35;
  --module-border: rgba(22, 163, 74, 0.12);
  --module-bg-start: rgba(255, 255, 255, 0.98);
  --module-bg-end: rgba(240, 253, 244, 0.84);
  --module-icon-bg: #dcfce7;
  --module-pill-bg: rgba(220, 252, 231, 0.82);
  --module-glow: rgba(34, 197, 94, 0.16);
  border-color: var(--module-border);
  background: linear-gradient(135deg, var(--module-bg-start), var(--module-bg-end));
}

.yookerd-module-card::after {
  background: radial-gradient(circle, var(--module-glow), transparent 66%);
}

.yookerd-module-card.has-illustration {
  grid-template-areas:
    "icon copy arrow"
    "note note note"
    "illustration illustration illustration"
    "status status status";
  grid-template-rows: auto auto minmax(78px, 1fr) auto;
}

.yookerd-module-card:hover:not(:disabled) {
  border-color: var(--module-border);
}

.yookerd-module-card.is-locked {
  border-style: dashed;
}

.module-card-icon {
  background: linear-gradient(135deg, var(--module-icon-bg), #fff);
  color: var(--module-accent);
}

.module-card-icon svg,
.nav-module-icon svg {
  display: block;
  width: 27px;
  height: 27px;
}

.module-card-icon svg * {
  vector-effect: non-scaling-stroke;
}

.module-card-fallback {
  font-size: 15px;
  font-weight: 900;
}

.workspace-home .module-card-icon svg {
  width: 23px;
  height: 23px;
}

.workspace-hub-view .module-card-icon svg {
  width: 29px;
  height: 29px;
}

.module-card-illustration {
  grid-area: illustration;
  display: grid;
  place-items: end center;
  min-width: 0;
  width: 100%;
  min-height: 92px;
  color: var(--module-accent);
  pointer-events: none;
}

.module-card-illustration svg {
  display: block;
  width: min(100%, 156px);
  height: 102px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.08));
}

.quick-entry-grid .quick-entry-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--module-accent);
  background: linear-gradient(135deg, var(--module-icon-bg), #fff);
}

.quick-entry-grid .quick-entry-icon svg {
  width: 21px;
  height: 21px;
}

.workspace-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nav-module-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: currentColor;
}

.nav-module-icon svg {
  width: 20px;
  height: 20px;
}

.bottom-tab-bar .nav-module-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.bottom-tab-bar .nav-module-icon svg {
  width: 19px;
  height: 19px;
}

.module-card-status {
  background: var(--module-pill-bg);
  color: var(--module-accent);
}

.module-card-arrow {
  color: var(--module-accent);
}

.module-plaz {
  --module-accent: #2563eb;
  --module-border: rgba(37, 99, 235, 0.16);
  --module-bg-end: rgba(239, 246, 255, 0.92);
  --module-icon-bg: #dbeafe;
  --module-pill-bg: rgba(219, 234, 254, 0.9);
  --module-glow: rgba(59, 130, 246, 0.16);
}

.module-lounge {
  --module-accent: #15803d;
  --module-border: rgba(21, 128, 61, 0.14);
  --module-bg-end: rgba(240, 253, 244, 0.96);
  --module-icon-bg: #dcfce7;
  --module-pill-bg: rgba(220, 252, 231, 0.9);
  --module-glow: rgba(34, 197, 94, 0.16);
}

.module-tools {
  --module-accent: #475569;
  --module-border: rgba(100, 116, 139, 0.16);
  --module-bg-end: rgba(248, 250, 252, 0.96);
  --module-icon-bg: #e2e8f0;
  --module-pill-bg: rgba(241, 245, 249, 0.95);
  --module-glow: rgba(100, 116, 139, 0.14);
}

.module-messages {
  --module-accent: #2563eb;
  --module-border: rgba(59, 130, 246, 0.15);
  --module-bg-end: rgba(239, 246, 255, 0.96);
  --module-icon-bg: #dbeafe;
  --module-pill-bg: rgba(219, 234, 254, 0.92);
  --module-glow: rgba(96, 165, 250, 0.16);
}

.module-treehole {
  --module-accent: #166534;
  --module-border: rgba(22, 101, 52, 0.16);
  --module-bg-end: rgba(220, 252, 231, 0.9);
  --module-icon-bg: #bbf7d0;
  --module-pill-bg: rgba(220, 252, 231, 0.94);
  --module-glow: rgba(22, 163, 74, 0.18);
}

.module-calorie {
  --module-accent: #dc2626;
  --module-border: rgba(248, 113, 113, 0.17);
  --module-bg-end: rgba(255, 241, 242, 0.88);
  --module-icon-bg: #fee2e2;
  --module-pill-bg: rgba(254, 226, 226, 0.9);
  --module-glow: rgba(248, 113, 113, 0.16);
}

.module-memo {
  --module-accent: #b45309;
  --module-border: rgba(245, 158, 11, 0.17);
  --module-bg-end: rgba(255, 251, 235, 0.94);
  --module-icon-bg: #fef3c7;
  --module-pill-bg: rgba(254, 243, 199, 0.9);
  --module-glow: rgba(245, 158, 11, 0.16);
}

.module-profile,
.module-friends {
  --module-accent: #2563eb;
  --module-border: rgba(37, 99, 235, 0.15);
  --module-bg-end: rgba(239, 246, 255, 0.92);
  --module-icon-bg: #dbeafe;
  --module-pill-bg: rgba(219, 234, 254, 0.9);
  --module-glow: rgba(59, 130, 246, 0.14);
}

.module-privacy {
  --module-accent: #334155;
  --module-border: rgba(51, 65, 85, 0.15);
  --module-bg-end: rgba(248, 250, 252, 0.96);
  --module-icon-bg: #e2e8f0;
  --module-pill-bg: rgba(241, 245, 249, 0.95);
  --module-glow: rgba(51, 65, 85, 0.12);
}

.module-workstation {
  --module-accent: #059669;
  --module-border: rgba(5, 150, 105, 0.16);
  --module-bg-end: rgba(236, 253, 245, 0.94);
  --module-icon-bg: #d1fae5;
  --module-pill-bg: rgba(209, 250, 229, 0.9);
  --module-glow: rgba(16, 185, 129, 0.16);
}

.module-mbti {
  --module-accent: #7c3aed;
  --module-border: rgba(124, 58, 237, 0.15);
  --module-bg-end: rgba(245, 243, 255, 0.94);
  --module-icon-bg: #ede9fe;
  --module-pill-bg: rgba(237, 233, 254, 0.92);
  --module-glow: rgba(139, 92, 246, 0.15);
}

.module-journalalmanac {
  --module-accent: #ea580c;
  --module-border: rgba(249, 115, 22, 0.16);
  --module-bg-end: rgba(255, 247, 237, 0.94);
  --module-icon-bg: #ffedd5;
  --module-pill-bg: rgba(255, 237, 213, 0.92);
  --module-glow: rgba(249, 115, 22, 0.15);
}

.module-dailywords {
  --module-accent: #2563eb;
  --module-border: rgba(37, 99, 235, 0.16);
  --module-bg-end: rgba(239, 246, 255, 0.94);
  --module-icon-bg: #dbeafe;
  --module-pill-bg: rgba(219, 234, 254, 0.92);
  --module-glow: rgba(37, 99, 235, 0.14);
}

.module-woodenfish {
  --module-accent: #0f766e;
  --module-border: rgba(15, 118, 110, 0.16);
  --module-bg-end: rgba(240, 253, 250, 0.94);
  --module-icon-bg: #ccfbf1;
  --module-pill-bg: rgba(204, 251, 241, 0.92);
  --module-glow: rgba(20, 184, 166, 0.15);
}

.module-chordtransposer {
  --module-accent: #4f46e5;
  --module-border: rgba(79, 70, 229, 0.15);
  --module-bg-end: rgba(238, 242, 255, 0.94);
  --module-icon-bg: #e0e7ff;
  --module-pill-bg: rgba(224, 231, 255, 0.92);
  --module-glow: rgba(99, 102, 241, 0.15);
}

.module-jpsubtitletranslator {
  --module-accent: #0f766e;
  --module-border: rgba(15, 118, 110, 0.16);
  --module-bg-end: rgba(240, 253, 250, 0.94);
  --module-icon-bg: #ccfbf1;
  --module-pill-bg: rgba(204, 251, 241, 0.92);
  --module-glow: rgba(20, 184, 166, 0.15);
}

.module-digitalself {
  --module-accent: #16a34a;
  --module-border: rgba(22, 163, 74, 0.15);
  --module-bg-end: rgba(240, 253, 244, 0.94);
  --module-icon-bg: #dcfce7;
  --module-pill-bg: rgba(220, 252, 231, 0.92);
  --module-glow: rgba(34, 197, 94, 0.16);
}

.module-myspace {
  --module-accent: #087a35;
  --module-border: rgba(22, 163, 74, 0.16);
  --module-bg-end: rgba(240, 253, 244, 0.95);
  --module-icon-bg: #dcfce7;
  --module-pill-bg: rgba(220, 252, 231, 0.92);
  --module-glow: rgba(34, 197, 94, 0.16);
}

@media (max-width: 1120px) {
  .workspace-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .workspace-home {
    gap: 14px;
  }

  .workspace-hero-copy,
  .hub-hero {
    padding: 18px;
  }

  .workspace-hub-view .yookerd-module-card.large {
    min-height: 126px;
  }
}

/* Workspace blue refinement: dense desktop canvas and clean mobile stacking. */
:root {
  --bg: #eef4fb;
  --surface-soft: #f6f9fd;
  --workspace-blue: #2563eb;
  --workspace-blue-dark: #1e3a8a;
  --workspace-blue-soft: #dbeafe;
  --workspace-line: rgba(37, 99, 235, 0.13);
  --green: #0f766e;
  --brand-green: #0f766e;
  --mint: #e0f2fe;
  --shadow: 0 14px 34px rgba(30, 58, 138, 0.11);
}

body:not(.admin-console-mode) {
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.14), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(14, 165, 233, 0.1), transparent 28%),
    linear-gradient(180deg, #f8fbff, #edf4fd 56%, #f8fafc);
}

body.workspace-home-mode {
  overflow: hidden;
}

body.workspace-home-mode .app-shell {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body.workspace-home-mode .topbar {
  min-height: 64px;
  height: 64px;
  padding: 0 22px;
  border-bottom-color: rgba(37, 99, 235, 0.1);
  box-shadow: 0 10px 28px rgba(30, 58, 138, 0.06);
}

body.workspace-home-mode .brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

body.workspace-home-mode .app-main {
  flex: 1;
  min-height: 0;
  height: calc(100dvh - 64px);
  width: min(1480px, calc(100vw - 28px));
  padding: 8px 0 10px;
  overflow: hidden;
}

body.workspace-home-mode .workspace-home {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: clamp(180px, 21vh, 204px) minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
}

body.workspace-home-mode .workspace-hero {
  min-height: 0;
  height: clamp(180px, 21vh, 204px);
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  overflow: visible;
  padding: 10px 12px 12px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.mobile-app-mode .profile-view.profile-panel {
  padding-bottom: 86px;
}

body.workspace-home-mode .workspace-hero-copy {
  padding: 10px 16px 12px;
  gap: 7px;
}

body.workspace-home-mode .workspace-hero .eyebrow,
body.workspace-home-mode .workspace-section-head span {
  color: #2563eb;
}

body.workspace-home-mode .workspace-hero h1 {
  color: #0f2f63;
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1.08;
}

body.workspace-home-mode .workspace-hero p {
  color: #334155;
  font-size: 14px;
  line-height: 1.45;
}

.jp-subtitle-translator-view {
  width: min(1500px, 100%);
}

.jp-subtitle-translator-module-host,
.jp-subtitle-translator-module-host *,
.jp-subtitle-translator-module-host *::before,
.jp-subtitle-translator-module-host *::after {
  box-sizing: border-box;
}

body.jp-subtitle-translator-mode .app-main {
  width: min(1500px, 100%);
}

body.jp-subtitle-translator-mode,
body.jp-subtitle-translator-mode .app-shell,
body.jp-subtitle-translator-mode .app-main,
.jp-subtitle-translator-view,
.jp-subtitle-translator-module-host,
.jpst-page {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.jpst-page {
  --jpst-ink: #123136;
  --jpst-muted: #64748b;
  --jpst-line: rgba(15, 118, 110, 0.14);
  --jpst-accent: #0f766e;
  --jpst-blue: #2563eb;
  display: grid;
  gap: 16px;
  min-height: calc(100dvh - 104px);
  padding: 4px;
  color: var(--jpst-ink);
}

.jpst-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 16px;
  min-height: 230px;
  padding: 24px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--jpst-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.94)),
    radial-gradient(circle at 88% 8%, rgba(37, 99, 235, 0.12), transparent 34%);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
}

.jpst-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.jpst-hero-copy h2 {
  margin: 8px 0;
  color: #0f2f63;
  font-size: 58px;
  line-height: 1;
}

.jpst-hero-copy p {
  max-width: 620px;
  margin: 0;
  color: #334155;
  font-size: 16px;
  line-height: 1.65;
}

.jpst-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.jpst-hero-tags span,
.jpst-panel-head b {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(204, 251, 241, 0.78);
  color: var(--jpst-accent);
  font-size: 12px;
  font-weight: 800;
}

.jpst-hero-preview {
  align-self: stretch;
  display: grid;
  align-content: end;
  gap: 14px;
  min-width: 0;
}

.jpst-preview-window {
  display: grid;
  gap: 8px;
  min-height: 142px;
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.jpst-preview-window span {
  color: var(--jpst-blue);
  font-size: 12px;
  font-weight: 800;
}

.jpst-preview-window strong {
  color: var(--jpst-ink);
  font-size: 28px;
  line-height: 1;
}

.jpst-preview-window p {
  margin: 0;
  color: var(--jpst-muted);
  font-size: 13px;
}

.jpst-wave {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 6px;
  height: 46px;
}

.jpst-wave i {
  display: block;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #38bdf8, #0f766e);
}

.jpst-wave i:nth-child(1) { height: 35%; }
.jpst-wave i:nth-child(2) { height: 72%; }
.jpst-wave i:nth-child(3) { height: 48%; }
.jpst-wave i:nth-child(4) { height: 94%; }
.jpst-wave i:nth-child(5) { height: 60%; }
.jpst-wave i:nth-child(6) { height: 82%; }
.jpst-wave i:nth-child(7) { height: 42%; }

.jpst-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 16px;
  align-items: start;
}

.jpst-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--jpst-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.jpst-main-panel {
  display: grid;
  gap: 16px;
}

.jpst-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.jpst-panel-head span {
  display: block;
  color: var(--jpst-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.jpst-panel-head h3 {
  margin: 3px 0 0;
  color: var(--jpst-ink);
  font-size: 22px;
  line-height: 1.15;
}

.jpst-upload-zone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 18px;
  border: 1.5px dashed rgba(15, 118, 110, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.78), rgba(239, 246, 255, 0.74));
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.jpst-upload-zone:hover,
.jpst-upload-zone.is-dragging {
  border-color: rgba(37, 99, 235, 0.42);
  background:
    linear-gradient(135deg, rgba(224, 242, 254, 0.86), rgba(204, 251, 241, 0.82));
  transform: translateY(-1px);
}

.jpst-upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jpst-upload-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.jpst-upload-empty strong {
  color: var(--jpst-ink);
  font-size: 20px;
}

.jpst-upload-empty span,
.jpst-inline-error,
.jpst-status-copy {
  color: var(--jpst-muted);
  font-size: 13px;
  line-height: 1.5;
}

.jpst-file-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(520px, 100%);
  padding: 14px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.jpst-file-chip > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #ccfbf1;
  color: var(--jpst-accent);
  font-size: 12px;
  font-weight: 900;
}

.jpst-file-chip strong,
.jpst-file-chip small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jpst-file-chip strong {
  color: var(--jpst-ink);
  font-size: 15px;
}

.jpst-file-chip small {
  margin-top: 3px;
  color: var(--jpst-muted);
}

.jpst-inline-error,
.jpst-status-copy.is-error {
  color: #b91c1c;
}

.jpst-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.jpst-field,
.jpst-switch,
.jpst-style-picker {
  min-width: 0;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 8px;
  background: #f8fafc;
}

.jpst-field {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 13px;
  cursor: pointer;
}

.jpst-field span,
.jpst-style-picker legend {
  color: var(--jpst-muted);
  font-size: 12px;
  font-weight: 800;
}

.jpst-field input,
.jpst-field select {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--jpst-ink);
  font: inherit;
  font-weight: 800;
}

.jpst-select-value {
  display: block;
  padding-right: 28px;
  color: var(--jpst-ink);
  font-size: 16px;
  line-height: 1.4;
  pointer-events: none;
}

.jpst-field select {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
  min-height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  outline: none;
}

.jpst-field:focus-within {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.jpst-field::after {
  position: absolute;
  right: 14px;
  bottom: 21px;
  z-index: 1;
  color: var(--jpst-ink);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  content: "⌄";
}

.jpst-field:has(select:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
}

.jpst-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 13px;
}

.jpst-switch input {
  width: 42px;
  height: 24px;
  accent-color: var(--jpst-accent);
}

.jpst-switch strong,
.jpst-switch small {
  display: block;
}

.jpst-switch strong {
  color: var(--jpst-ink);
  font-size: 14px;
}

.jpst-switch small {
  margin-top: 3px;
  color: var(--jpst-muted);
  font-size: 12px;
}

.jpst-style-picker {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 13px;
}

.jpst-style-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.jpst-style-picker label {
  min-width: 0;
}

.jpst-style-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jpst-style-picker span {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--jpst-ink);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.jpst-style-picker label.is-active span {
  border-color: rgba(15, 118, 110, 0.34);
  background: #ccfbf1;
  color: var(--jpst-accent);
}

.jpst-start-button {
  justify-self: start;
  min-width: 180px;
  border-radius: 8px;
}

.jpst-status-panel {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 14px;
}

.jpst-status-copy {
  margin: 0;
}

.jpst-status-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jpst-status-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
}

.jpst-status-list li > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
}

.jpst-status-list strong {
  min-width: 0;
  font-size: 13px;
}

.jpst-status-list li.is-active,
.jpst-status-list li.is-done,
.jpst-status-list li.is-complete {
  border-color: rgba(15, 118, 110, 0.2);
  background: #f0fdfa;
  color: var(--jpst-accent);
}

.jpst-status-list li.is-active > span,
.jpst-status-list li.is-done > span,
.jpst-status-list li.is-complete > span {
  background: var(--jpst-accent);
}

.jpst-status-list li.is-error {
  border-color: rgba(239, 68, 68, 0.22);
  background: #fef2f2;
  color: #b91c1c;
}

.jpst-status-list li.is-error > span {
  background: #ef4444;
}

.jpst-downloads {
  display: grid;
  gap: 8px;
}

.jpst-downloads .secondary-button {
  width: 100%;
  justify-content: center;
  border-radius: 8px;
}

@media (max-width: 920px) {
  .jpst-hero,
  .jpst-layout {
    grid-template-columns: 1fr;
  }

  .jpst-hero-copy h2 {
    font-size: 48px;
  }

  .jpst-status-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  body.jp-subtitle-translator-mode,
  body.jp-subtitle-translator-mode .app-shell,
  body.jp-subtitle-translator-mode .app-main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .jp-subtitle-translator-view {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .jp-subtitle-translator-module-host,
  .jpst-page,
  .jpst-hero,
  .jpst-panel,
  .jpst-upload-zone,
  .jpst-field,
  .jpst-switch,
  .jpst-style-picker {
    min-width: 0;
    max-width: 100%;
  }

  .jpst-page {
    min-height: calc(100dvh - 112px);
    min-height: calc(100svh - 112px);
    padding: 12px 0 calc(112px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  .jpst-hero {
    min-height: 210px;
    padding: 18px;
  }

  .jpst-hero-copy h2 {
    font-size: 38px;
  }

  .jpst-hero-copy p {
    font-size: 14px;
  }

  .jpst-hero-preview {
    display: none;
  }

  .jpst-panel {
    padding: 14px;
  }

  .jpst-options-grid,
  .jpst-style-picker > div {
    grid-template-columns: 1fr;
  }

  .jpst-upload-zone {
    min-height: 150px;
  }

  .jpst-start-button {
    width: 100%;
    min-width: 0;
  }

  body.jp-subtitle-translator-mode .bottom-tab-bar:not([hidden]) {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 20px);
    margin: 0;
    transform: translate3d(0, 0, 0);
  }
}

body.workspace-home-mode .workspace-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 620px;
}

body.workspace-home-mode .workspace-stat-card {
  min-height: 58px;
  padding: 8px 12px;
  border-color: rgba(37, 99, 235, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

body.workspace-home-mode .workspace-stat-card strong {
  color: #0f172a;
  font-size: 20px;
}

body.workspace-home-mode .workspace-hero-logo {
  position: absolute;
  top: 50%;
  right: clamp(72px, 10vw, 150px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  min-width: 0;
  border: 0;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.84), rgba(219, 234, 254, 0.2) 58%, transparent 72%);
  pointer-events: none;
  transform: translateY(-50%);
}

body.workspace-home-mode .workspace-hero-logo img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(37, 99, 235, 0.18));
}

body.workspace-home-mode .workspace-hero-logo span {
  display: none;
}

body.workspace-home-mode .workspace-hero-visual {
  padding: 0;
  min-height: 0;
}

body.workspace-home-mode .workspace-hero-visual img {
  max-height: none;
  height: 100%;
  border-radius: 14px;
  object-fit: contain;
  object-position: 70% 50%;
  opacity: 0.96;
}

body.workspace-home-mode .workspace-layout-grid {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 24%);
  align-items: stretch;
  gap: 14px;
}

body.workspace-home-mode .workspace-primary {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 10px;
}

body.workspace-home-mode .workspace-section,
body.workspace-home-mode .workspace-side-card {
  min-height: 0;
  gap: 8px;
}

body.workspace-home-mode .workspace-section-head {
  min-height: 28px;
}

body.workspace-home-mode .workspace-section-head h2,
body.workspace-home-mode .workspace-section-head h3 {
  color: #0f172a;
  font-size: 19px;
  line-height: 1.1;
}

body.workspace-home-mode .text-link-button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.82);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

body.workspace-home-mode .module-card-grid {
  --workspace-module-card-min-width: 164px;
  --workspace-module-card-min-height: 276px;
  min-height: 0;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--workspace-module-card-min-width)), 1fr));
  grid-auto-rows: var(--workspace-module-card-min-height);
  align-items: stretch;
}

body.workspace-home-mode .workspace-section:not(.private) .module-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--workspace-module-card-min-width)), 1fr));
}

body.workspace-home-mode .private-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--workspace-module-card-min-width)), 1fr));
}

body.workspace-home-mode .workspace-section.private.is-empty .private-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

body.workspace-home-mode .workspace-section.private.is-empty {
  grid-template-rows: minmax(0, 1fr);
}

body.workspace-home-mode .workspace-section.private.is-empty .workspace-section-head {
  display: none;
}

body.workspace-home-mode .workspace-private-empty {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.94);
  box-shadow: 0 16px 36px rgba(30, 58, 138, 0.08);
}

body.workspace-home-mode .workspace-private-empty img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  opacity: 0.98;
}

body.workspace-home-mode .workspace-private-showcase {
  grid-column: 1 / -1;
  min-height: 118px;
  height: clamp(132px, 17vh, 190px);
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.11);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.86);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.06);
}

body.workspace-home-mode .workspace-private-showcase img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center 56%;
  opacity: 0.96;
}

body.workspace-home-mode .yookerd-module-card {
  height: 100%;
  min-height: var(--workspace-module-card-min-height);
  grid-template-areas:
    "icon copy arrow"
    "note note note"
    "status status status";
  grid-template-rows: auto auto auto;
  align-content: start;
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(30, 58, 138, 0.08);
}

.module-card-note {
  grid-area: note;
  display: -webkit-box;
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body.workspace-home-mode .workspace-section.private .yookerd-module-card {
  min-height: var(--workspace-module-card-min-height);
}

body.workspace-home-mode .workspace-section:not(.private) .yookerd-module-card.has-illustration {
  min-height: var(--workspace-module-card-min-height);
  grid-template-areas:
    "icon copy arrow"
    "note note note"
    "illustration illustration illustration"
    "status status status";
  grid-template-rows: auto auto minmax(56px, 1fr) auto;
}

body.workspace-home-mode .workspace-section:not(.private) .module-card-illustration {
  min-height: clamp(34px, 5.4vh, 62px);
}

body.workspace-home-mode .workspace-section:not(.private) .module-card-illustration svg {
  width: min(100%, clamp(92px, 9vw, 138px));
  height: clamp(42px, 7vh, 74px);
}

body.workspace-home-mode .workspace-section.private .yookerd-module-card.has-illustration {
  min-height: var(--workspace-module-card-min-height);
  grid-template-areas:
    "icon copy arrow"
    "note note note"
    "illustration illustration illustration"
    "status status status";
  grid-template-rows: auto auto minmax(92px, 1fr) auto;
}

body.workspace-home-mode .workspace-section.private .module-card-illustration {
  min-height: 88px;
}

body.workspace-home-mode .workspace-section.private .module-card-illustration svg {
  width: min(100%, 148px);
  height: 96px;
}

body.workspace-home-mode .module-card-note {
  display: block;
  overflow: visible;
  font-size: 12px;
  line-height: 1.42;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}

body.workspace-home-mode .module-card-copy strong {
  color: #0f172a;
  font-size: 16px;
}

body.workspace-home-mode .module-card-copy small {
  font-size: 12px;
  line-height: 1.32;
}

body.workspace-home-mode .module-card-status {
  width: max-content;
  padding: 4px 8px;
  font-size: 11px;
}

body.workspace-home-mode .workspace-sidebar {
  min-height: 0;
  grid-template-rows: auto auto 106px;
  gap: 10px;
}

body.workspace-home-mode .workspace-side-card,
body.workspace-home-mode .workspace-side-illustration {
  padding: 14px;
  border-color: var(--workspace-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(30, 58, 138, 0.08);
}

body.workspace-home-mode .activity-list {
  min-height: 0;
}

body.workspace-home-mode .activity-list article {
  gap: 8px;
  min-height: 38px;
  padding: 4px 0;
}

body.workspace-home-mode .activity-list > article > span {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  background: #dbeafe;
  color: #1d4ed8;
}

body.workspace-home-mode .quick-entry-card {
  position: relative;
  z-index: 2;
  overflow: visible;
  gap: 10px;
}

body.workspace-home-mode .quick-entry-card.is-picker-open {
  z-index: 30;
}

body.workspace-home-mode .quick-entry-config-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.76);
  color: #2563eb;
  font-size: 15px;
  line-height: 1;
}

body.workspace-home-mode .quick-entry-config-button:hover,
body.workspace-home-mode .quick-entry-config-button.is-active {
  background: rgba(219, 234, 254, 0.95);
  color: #1d4ed8;
  transform: none;
}

body.workspace-home-mode .quick-entry-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body.workspace-home-mode .quick-entry-grid button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 38px auto;
  justify-items: center;
  align-items: start;
  align-content: center;
  gap: 6px;
  min-height: 76px;
  padding: 8px 6px 7px;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 18px rgba(30, 58, 138, 0.05);
  text-align: center;
}

body.workspace-home-mode .quick-entry-grid button:hover {
  background: rgba(219, 234, 254, 0.45);
  transform: none;
}

body.workspace-home-mode .quick-entry-grid .quick-entry-icon {
  grid-area: auto;
  grid-row: 1;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

body.workspace-home-mode .quick-entry-grid .quick-entry-label {
  grid-row: 2;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workspace-home-mode .quick-entry-grid em {
  display: none;
}

body.workspace-home-mode .quick-entry-grid strong {
  display: none;
}

body.workspace-home-mode .quick-entry-empty,
body.workspace-home-mode .quick-entry-picker-empty {
  grid-column: 1 / -1;
  padding: 16px 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

body.workspace-home-mode .quick-entry-picker {
  position: absolute;
  top: 0;
  right: calc(100% + 12px);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(340px, calc(100vw - 32px));
  max-height: min(300px, calc(100dvh - 180px));
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.98);
  box-shadow: 0 18px 46px rgba(30, 58, 138, 0.18);
}

body.workspace-home-mode .quick-entry-picker[hidden] {
  display: none;
}

body.workspace-home-mode .quick-entry-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
  min-height: 34px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body.workspace-home-mode .quick-entry-choice input {
  grid-column: 1;
  grid-row: 1;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #2563eb;
}

body.workspace-home-mode .quick-entry-choice input.is-overflow-selected {
  accent-color: #dc2626;
}

body.workspace-home-mode .quick-entry-choice input:disabled {
  opacity: 0.45;
}

body.workspace-home-mode .quick-entry-choice .quick-entry-choice-icon {
  grid-area: auto;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

body.workspace-home-mode .quick-entry-choice-label {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workspace-home-mode.mini-workspace-mode {
  overflow: auto;
}

body.workspace-home-mode.mini-workspace-mode .app-shell {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

body.workspace-home-mode.mini-workspace-mode .app-main {
  height: auto;
  width: min(760px, calc(100vw - 24px));
  min-height: calc(100dvh - 64px);
  overflow: visible;
  padding: 12px 0 24px;
}

body.workspace-home-mode.mini-workspace-mode .workspace-home {
  height: auto;
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
}

body.workspace-home-mode.mini-workspace-mode .workspace-hero {
  height: auto;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(30, 58, 138, 0.08);
}

body.workspace-home-mode.mini-workspace-mode .workspace-hero-copy {
  padding: 0;
}

body.workspace-home-mode.mini-workspace-mode .workspace-hero h1 {
  font-size: clamp(28px, 8vw, 38px);
}

body.workspace-home-mode.mini-workspace-mode .workspace-hero-logo,
body.workspace-home-mode.mini-workspace-mode .workspace-stats,
body.workspace-home-mode.mini-workspace-mode .workspace-sidebar,
body.workspace-home-mode.mini-workspace-mode .workspace-section.private {
  display: none;
}

body.workspace-home-mode.mini-workspace-mode .workspace-layout-grid {
  display: block;
  height: auto;
}

body.workspace-home-mode.mini-workspace-mode .workspace-primary {
  display: block;
  height: auto;
}

body.workspace-home-mode.mini-workspace-mode .workspace-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 32px rgba(30, 58, 138, 0.08);
}

body.workspace-home-mode.mini-workspace-mode .module-card-grid.mini-module-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 10px;
}

body.workspace-home-mode.mini-workspace-mode .mini-module-list .yookerd-module-card {
  min-height: 94px;
  height: auto;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon copy arrow"
    "icon note status";
  grid-template-rows: auto auto;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
}

body.workspace-home-mode.mini-workspace-mode .mini-module-list .module-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

body.workspace-home-mode.mini-workspace-mode .mini-module-list .module-card-copy strong {
  font-size: 16px;
}

body.workspace-home-mode.mini-workspace-mode .mini-module-list .module-card-copy small,
body.workspace-home-mode.mini-workspace-mode .mini-module-list .module-card-note {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.workspace-home-mode.mini-workspace-mode .mini-module-list .module-card-copy small {
  white-space: nowrap;
}

body.workspace-home-mode.mini-workspace-mode .mini-module-list .module-card-note {
  display: block;
  white-space: nowrap;
}

body.workspace-home-mode.mini-workspace-mode .mini-module-list .module-card-illustration {
  display: none;
}

body.workspace-home-mode.mini-workspace-mode .workspace-bottom-note {
  margin: 0;
}

body.workspace-home-mode .workspace-side-illustration {
  position: relative;
  min-height: 106px;
  align-content: center;
  overflow: hidden;
  padding-right: 110px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(239, 246, 255, 0.96)),
    radial-gradient(circle at 74% 18%, rgba(37, 99, 235, 0.14), transparent 34%);
}

body.workspace-home-mode .workspace-side-illustration::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 10px;
  width: 76px;
  height: 76px;
  background: url("/assets/yookerd/brand/yookers-workspace-logo.webp") center / contain no-repeat;
  opacity: 0.72;
  pointer-events: none;
}

body.workspace-home-mode .workspace-side-illustration span {
  color: #1d4ed8;
}

body.workspace-home-mode .workspace-bottom-note {
  display: none;
}

body.workspace-home-mode .workspace-nav-button:hover:not(:disabled),
body.workspace-home-mode .workspace-nav-button.is-active,
body.workspace-home-mode .bottom-tab-bar button.is-active {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
}

body.workspace-home-mode .top-search {
  border-color: rgba(37, 99, 235, 0.12);
}

body.workspace-home-mode .module-plaz,
body.workspace-home-mode .module-messages,
body.workspace-home-mode .module-profile {
  --module-accent: #2563eb;
  --module-border: rgba(37, 99, 235, 0.18);
  --module-bg-end: rgba(239, 246, 255, 0.96);
  --module-icon-bg: #dbeafe;
  --module-pill-bg: rgba(219, 234, 254, 0.92);
  --module-glow: rgba(37, 99, 235, 0.14);
}

body.workspace-home-mode .module-lounge,
body.workspace-home-mode .module-treehole,
body.workspace-home-mode .module-digitalself,
body.workspace-home-mode .module-myspace {
  --module-accent: #0e7490;
  --module-border: rgba(14, 116, 144, 0.16);
  --module-bg-end: rgba(236, 254, 255, 0.9);
  --module-icon-bg: #cffafe;
  --module-pill-bg: rgba(207, 250, 254, 0.78);
  --module-glow: rgba(14, 165, 233, 0.11);
}

body.workspace-home-mode .module-tools,
body.workspace-home-mode .module-privacy {
  --module-accent: #475569;
  --module-border: rgba(100, 116, 139, 0.17);
  --module-bg-end: rgba(248, 250, 252, 0.96);
  --module-icon-bg: #e2e8f0;
  --module-pill-bg: rgba(241, 245, 249, 0.95);
  --module-glow: rgba(100, 116, 139, 0.12);
}

@media (min-width: 1121px) and (max-height: 779px) {
  body.workspace-home-mode {
    overflow: auto;
  }

  body.workspace-home-mode .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.workspace-home-mode .app-main {
    height: auto;
    min-height: calc(100dvh - 64px);
    overflow: visible;
    padding-bottom: 14px;
  }

  body.workspace-home-mode .workspace-home {
    height: auto;
  }
}

@media (max-width: 1120px) {
  body.workspace-home-mode {
    overflow: auto;
  }

  body.workspace-home-mode .app-shell,
  body.workspace-home-mode .workspace-home {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.workspace-home-mode .workspace-home {
    grid-template-rows: auto;
    align-content: stretch;
  }

  body.workspace-home-mode .app-main {
    width: min(100%, 980px);
    padding: 10px 14px calc(86px + env(safe-area-inset-bottom));
    overflow: visible;
  }

  body.workspace-home-mode .workspace-hero {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  body.workspace-home-mode .workspace-hero-logo {
    display: none;
  }

  body.workspace-home-mode .workspace-layout-grid {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  body.workspace-home-mode .workspace-primary,
  body.workspace-home-mode .workspace-sidebar {
    grid-template-rows: auto;
  }

  body.workspace-home-mode .workspace-private-empty {
    min-height: clamp(230px, 42vw, 360px);
  }
}

@media (max-width: 720px) {
  body.workspace-home-mode .topbar {
    min-height: 58px;
    padding: 8px 12px;
  }

  body.workspace-home-mode .app-main {
    padding: 8px 10px calc(92px + env(safe-area-inset-bottom));
  }

  body.workspace-home-mode .workspace-home {
    display: grid;
    gap: 12px;
    min-height: 0;
  }

  body.workspace-home-mode .workspace-hero {
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  body.workspace-home-mode .workspace-hero-copy {
    padding: 0;
  }

  body.workspace-home-mode .workspace-hero h1 {
    font-size: 28px;
  }

  body.workspace-home-mode .workspace-hero-visual {
    display: block;
    height: 118px;
  }

  body.workspace-home-mode .workspace-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.workspace-home-mode .workspace-stat-card {
    min-height: 58px;
    padding: 8px;
  }

  body.workspace-home-mode .workspace-stat-card strong {
    font-size: 18px;
  }

  body.workspace-home-mode .workspace-section-head {
    align-items: flex-end;
  }

  body.workspace-home-mode .workspace-section-head h2,
  body.workspace-home-mode .workspace-section-head h3 {
    font-size: 18px;
  }

  body.workspace-home-mode .text-link-button {
    font-size: 12px;
  }

  body.workspace-home-mode .module-card-grid {
    --workspace-module-card-min-width: 152px;
    --workspace-module-card-min-height: 286px;
  }

  body.workspace-home-mode .workspace-section:not(.private) .module-card-grid,
  body.workspace-home-mode .private-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--workspace-module-card-min-width)), 1fr));
  }

  body.workspace-home-mode .workspace-section.private.is-empty .private-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.workspace-home-mode .workspace-private-empty {
    min-height: 190px;
    border-radius: 14px;
  }

  body.workspace-home-mode .yookerd-module-card {
    min-height: var(--workspace-module-card-min-height);
    height: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "note note"
      "status status";
    grid-template-rows: auto auto auto;
    padding: 11px;
  }

  body.workspace-home-mode .yookerd-module-card.has-illustration {
    grid-template-areas:
      "icon copy"
      "note note"
      "illustration illustration"
      "status status";
    grid-template-rows: auto auto minmax(68px, 1fr) auto;
  }

  body.workspace-home-mode .module-card-illustration {
    min-height: 76px;
  }

  body.workspace-home-mode .module-card-illustration svg {
    width: min(100%, 132px);
    height: 84px;
  }

  body.workspace-home-mode .module-card-arrow {
    display: none;
  }

  body.workspace-home-mode .module-card-note {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  body.workspace-home-mode .workspace-sidebar {
    gap: 10px;
  }

  body.workspace-home-mode .activity-list article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.workspace-home-mode .activity-list time {
    display: none;
  }

  body.workspace-home-mode .quick-entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.workspace-home-mode .quick-entry-picker {
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, calc(100vw - 24px));
  }

  body.workspace-home-mode .workspace-side-illustration {
    display: grid;
    min-height: 96px;
  }

  body.workspace-home-mode .workspace-bottom-note {
    min-height: auto;
    padding: 9px 12px;
  }
}

/* Round 2: module app shell and independent Admin Console. */
.mobile-module-header {
  display: none;
}

.module-app-mode:not(.admin-console-mode) .app-main {
  width: min(1320px, 100%);
}

.module-app-mode:not(.admin-console-mode) .topbar {
  box-shadow: 0 8px 24px rgba(30, 58, 138, 0.05);
}

.module-app-mode:not(.admin-console-mode) .view:not(.workspace-home):not(.workspace-hub-view) {
  min-width: 0;
}

body.admin-console-mode {
  overflow: hidden;
  background: #e8edf5;
}

body.admin-console-mode .mobile-topbar-toggle,
body.admin-console-mode .bottom-tab-bar {
  display: none !important;
}

body.admin-console-mode .topbar {
  display: none !important;
}

body.admin-console-mode .app-shell {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body.admin-console-mode .app-main {
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#adminView.admin-view {
  --admin-bg: #eef3f8;
  --admin-surface: #ffffff;
  --admin-surface-soft: #eef4fb;
  --admin-ink: #101828;
  --admin-muted: #667085;
  --admin-line: rgba(37, 99, 235, 0.16);
  --admin-accent: #2563eb;
  --admin-accent-2: #0ea5e9;
  --admin-hover: #e8f1ff;
  height: 100dvh;
  min-height: 0;
  grid-template-columns: 248px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "nav head"
    "nav panel";
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.16), transparent 30%),
    radial-gradient(circle at 100% 0, rgba(14, 165, 233, 0.12), transparent 28%),
    linear-gradient(180deg, #f8fbff, var(--admin-bg));
  overflow: hidden;
}

#adminView > .admin-console-head {
  grid-area: head;
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 253, 0.96));
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  padding: 14px 16px;
  overflow: visible;
}

#adminView > .admin-console-head h2 {
  color: var(--admin-ink);
  font-size: 26px;
}

.admin-console-title {
  min-width: 0;
}

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

.admin-console-mobile-home {
  display: none;
}

#adminView > .admin-console-head p {
  margin: 4px 0 0;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-console-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-console-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: min(360px, 32vw);
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: #fff;
  color: var(--admin-muted);
}

.admin-console-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
}

.admin-account-menu-wrap {
  position: relative;
  display: inline-flex;
  z-index: 40;
}

.admin-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 42px;
  max-width: 220px;
  padding: 5px 11px 5px 6px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.admin-account-button:hover,
.admin-account-button[aria-expanded="true"] {
  border-color: rgba(37, 99, 235, 0.22);
  background: #eff6ff;
  color: #0f172a;
  transform: none;
}

.admin-account-button .avatar-badge {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.admin-account-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}

.admin-account-text strong,
.admin-account-text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-account-text strong {
  color: #0f172a;
  line-height: 1.1;
}

.admin-account-text small {
  margin-top: 1px;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-account-button b {
  flex: 0 0 auto;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1;
}

.admin-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1000;
  display: grid;
  gap: 4px;
  min-width: 210px;
  padding: 8px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.16);
}

.admin-account-menu[hidden] {
  display: none;
}

.admin-account-meta {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.1);
}

.admin-account-meta strong {
  color: var(--admin-ink);
  font-size: 13px;
}

.admin-account-meta span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-account-menu button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1f2937;
  font-weight: 850;
  text-align: left;
  padding: 0 10px;
}

.admin-account-menu button:hover {
  background: #eff6ff;
  color: #1d4ed8;
  transform: none;
}

.admin-account-menu button.danger {
  color: #b42318;
}

.admin-account-menu button.danger:hover {
  background: #fef3f2;
  color: #b42318;
}

#adminView > .admin-sidebar {
  grid-area: nav;
  position: sticky;
  top: 14px;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  height: calc(100dvh - 28px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 58px;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
}

#adminView > .admin-tabs.segmented.admin-sidebar::before {
  content: none;
  display: none;
}

.admin-sidebar-brand {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 76px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff, #e8f1ff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
  padding: 0 10px;
  text-align: left;
  cursor: pointer;
}

.admin-sidebar-brand:hover {
  background: linear-gradient(135deg, #ffffff, #dbeafe);
  transform: none;
}

.admin-sidebar-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.admin-sidebar-brand strong {
  color: #101828;
  font-size: 15px;
  line-height: 1.15;
}

.admin-sidebar-brand > span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-sidebar-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 0;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 10px;
  background: #fff;
  color: var(--admin-accent);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.admin-menu-group {
  display: grid;
  gap: 5px;
}

.admin-menu-group > span {
  padding: 0 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

#adminView > .admin-sidebar .segment {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  padding: 0 10px;
  box-shadow: none;
  text-align: left;
}

.admin-menu-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: currentColor;
}

.admin-menu-icon svg {
  width: 20px;
  height: 20px;
}

.admin-menu-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminView > .admin-sidebar .segment:hover:not(:disabled) {
  background: var(--admin-hover);
  transform: none;
}

#adminView > .admin-sidebar .segment.is-active {
  background: linear-gradient(135deg, #dbeafe, #fff);
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

#adminView.admin-view.is-sidebar-collapsed {
  grid-template-columns: 82px minmax(0, 1fr);
}

#adminView.is-sidebar-collapsed > .admin-sidebar {
  gap: 10px;
  justify-items: center;
  overflow-x: hidden;
  padding: 10px 8px 58px;
}

#adminView.is-sidebar-collapsed .admin-sidebar-brand {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 82px;
  padding: 8px 0;
}

#adminView.is-sidebar-collapsed .admin-sidebar-brand img {
  width: 34px;
  height: 34px;
}

#adminView.is-sidebar-collapsed .admin-sidebar-brand strong,
#adminView.is-sidebar-collapsed .admin-menu-group > span,
#adminView.is-sidebar-collapsed .admin-menu-label {
  display: none;
}

#adminView.is-sidebar-collapsed .admin-sidebar-toggle {
  right: 50%;
  bottom: 12px;
  width: 36px;
  height: 36px;
  margin-left: 0;
  font-size: 18px;
  transform: translateX(50%);
}

#adminView.is-sidebar-collapsed .admin-menu-group {
  width: 100%;
  justify-items: center;
}

#adminView.is-sidebar-collapsed > .admin-sidebar .segment {
  justify-content: center;
  width: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 12px;
}

#adminView.is-sidebar-collapsed .admin-menu-icon {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

#adminView.is-sidebar-collapsed .admin-menu-icon svg {
  width: 23px;
  height: 23px;
}

#adminView .admin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  margin: 0 0 16px;
}

#adminView .admin-summary div {
  min-height: 58px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  padding: 9px 10px;
}

#adminView .admin-summary strong {
  color: #101828;
  font-size: 19px;
}

#adminView .admin-summary span {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 800;
}

#adminView > .admin-panel {
  grid-area: panel;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
  padding: 16px;
}

#adminView .people-detail-panel.is-sidebar {
  position: fixed;
  top: clamp(132px, 17vh, 176px);
  right: 24px;
  bottom: 24px;
  z-index: 35;
  width: min(560px, calc(100vw - 390px));
  min-width: 460px;
  max-height: none;
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-color: rgba(37, 99, 235, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
  padding: 10px;
}

#adminView .people-workspace.has-detail {
  grid-template-columns: minmax(0, 1fr);
}

#adminView .people-detail-panel.is-sidebar .people-detail-head {
  min-height: 46px;
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--admin-line);
}

#adminView .people-detail-panel.is-sidebar .people-detail-head h4 {
  margin-top: 0;
  font-size: 19px;
  line-height: 1.08;
}

#adminView .people-detail-panel.is-sidebar .people-detail-head span {
  font-size: 11px;
}

#adminView .people-detail-panel.is-sidebar .people-detail-tabs {
  gap: 6px;
}

#adminView .people-detail-panel.is-sidebar .people-detail-tabs button {
  min-height: 34px;
  border-radius: 10px;
}

#adminView .people-detail-panel.is-sidebar .people-detail-form {
  min-height: 0;
}

#adminView .people-detail-panel.is-sidebar .people-detail-scroll {
  padding: 6px 5px 6px 0;
}

#adminView .people-detail-panel.is-sidebar .people-detail-form section {
  gap: 7px;
  padding-top: 8px;
}

#adminView .people-detail-panel.is-sidebar .people-detail-form label {
  gap: 3px;
}

#adminView .people-detail-panel.is-sidebar .people-detail-form input,
#adminView .people-detail-panel.is-sidebar .people-detail-form select {
  min-height: 34px;
  padding: 6px 9px;
}

#adminView .people-detail-panel.is-sidebar .people-detail-actions {
  gap: 7px;
  padding: 8px 0 0;
  border-top: 1px solid var(--admin-line);
}

#adminView .people-detail-panel.is-sidebar .people-detail-actions button {
  flex: 1 1 0;
  min-height: 36px;
  padding: 0 10px;
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-overview-grid article {
  display: grid;
  gap: 8px;
  min-height: 122px;
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f1f7ff);
}

.admin-overview-grid span,
.admin-overview-grid small {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-overview-grid strong {
  color: #101828;
  font-size: 24px;
}

.admin-overview-grid strong b {
  font: inherit;
}

.admin-overview-columns {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.admin-overview-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 190px;
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.admin-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.12);
}

.admin-card-head span {
  color: var(--admin-accent);
  font-size: 11px;
  font-weight: 900;
}

.admin-card-head strong {
  color: var(--admin-ink);
  font-size: 16px;
}

.admin-activity-stack,
.admin-metric-list,
.admin-status-list {
  display: grid;
  gap: 9px;
}

.admin-activity-stack p,
.admin-metric-list p,
.admin-status-list p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-activity-stack p {
  display: grid;
  align-items: start;
  justify-content: stretch;
}

.admin-activity-stack strong,
.admin-metric-list strong,
.admin-status-list b {
  color: var(--admin-ink);
}

.admin-metric-list strong {
  font-size: 20px;
}

.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-system-status-root {
  display: grid;
  gap: 14px;
}

.admin-system-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 12px;
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-system-card {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 132px;
  padding: 15px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.admin-system-card > span,
.admin-system-card small,
.admin-system-meta-grid span,
.admin-system-storage span,
.admin-system-module-list span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 850;
}

.admin-system-card > strong {
  color: var(--admin-ink);
  font-size: 25px;
  line-height: 1.05;
}

.admin-system-card small {
  line-height: 1.4;
}

.admin-system-meter {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf1fb;
}

.admin-system-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #16a34a);
}

.admin-system-columns {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 12px;
}

.admin-system-network-detail {
  display: grid;
}

.admin-system-card-wide {
  min-height: 210px;
}

.admin-system-meta-grid,
.admin-system-storage,
.admin-system-module-list {
  display: grid;
  gap: 9px;
}

.admin-system-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-system-meta-grid p,
.admin-system-storage p,
.admin-system-module-list p {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--admin-surface-soft);
}

.admin-system-meta-grid .wide {
  grid-column: 1 / -1;
}

.admin-system-meta-grid b,
.admin-system-storage b,
.admin-system-module-list b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--admin-ink);
  font-size: 13px;
}

.admin-system-storage p {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-system-module-list p {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-system-module-list i {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf1fb;
}

.admin-system-module-list em {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
}

.admin-mobile-note {
  display: none;
  margin: 14px 0 0;
  color: var(--admin-muted);
  font-weight: 800;
}

@media (max-width: 1180px) {
  #adminView.admin-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "head"
      "nav"
      "panel";
    overflow: auto;
  }

  #adminView > .admin-sidebar {
    position: static;
    display: flex;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 16px;
  }

  .admin-sidebar-brand {
    display: none;
  }

  .admin-sidebar-toggle {
    display: none;
  }

  .admin-menu-group {
    flex: 0 0 auto;
    min-width: 150px;
  }

  #adminView .admin-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-overview-columns {
    grid-template-columns: 1fr;
  }

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

  .admin-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-system-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.module-app-mode:not(.admin-console-mode):not(.yookerd-mode) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.module-app-mode:not(.admin-console-mode) .mobile-module-header {
    display: none !important;
  }

  body.module-app-mode:not(.admin-console-mode):not(.yookerd-mode) .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.module-app-mode:not(.admin-console-mode):not(.yookerd-mode) .app-main {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: 0 0 calc(76px + env(safe-area-inset-bottom));
  }

  body.private-module-mode .app-main {
    padding-bottom: env(safe-area-inset-bottom);
  }

  body.module-app-mode .mobile-module-header:not([hidden]) {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    min-height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 6px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.1);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
  }

  .mobile-module-back,
  .mobile-module-more {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 14px;
    background: #fff;
    color: #1d4ed8;
    font-size: 24px;
    font-weight: 900;
  }

  .mobile-module-header > div:not(.mobile-module-menu) {
    min-width: 0;
    text-align: center;
  }

  .mobile-module-header small,
  .mobile-module-header strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-module-header small {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
  }

  .mobile-module-header strong {
    color: #0f172a;
    font-size: 16px;
  }

  .mobile-module-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    display: grid;
    gap: 6px;
    min-width: 150px;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  }

  .mobile-module-menu button {
    min-height: 34px;
    border-radius: 10px;
    background: transparent;
    color: #334155;
    font-weight: 900;
    text-align: left;
  }

  .mobile-module-menu button:hover {
    background: #eff6ff;
    transform: none;
  }

  body.private-module-mode #treeholeView,
  body.private-module-mode #calorieView,
  body.private-module-mode #memoView,
  body.private-module-mode #friendsView,
  body.private-module-mode #profilePanel,
  body.private-module-mode #privacyView {
    min-height: calc(100dvh - env(safe-area-inset-bottom));
    padding: 12px;
  }

  body.private-module-mode #treeholeView.treehole-view {
    background:
      radial-gradient(circle at 50% 0, rgba(22, 101, 52, 0.18), transparent 40%),
      linear-gradient(180deg, #f7fff9, #ecfdf5);
  }

  body.private-module-mode #treeholeView .treehole-toolbar,
  body.private-module-mode #treeholeView .treehole-music-player,
  body.private-module-mode #treeholeView .treehole-feed,
  body.private-module-mode #memoView .memo-module-host,
  body.private-module-mode #friendsView .friends-module-host,
  body.private-module-mode #calorieView .calorie-module-host {
    border-radius: 18px;
  }

@media (max-width: 760px) {
  body.private-module-mode #memoView,
  #memoView {
    padding: 8px 8px calc(92px + env(safe-area-inset-bottom));
  }

  #memoView > .section-head {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 58px;
    max-height: none;
    align-self: start;
    justify-self: stretch;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 24px 58px rgba(91, 52, 31, 0.16);
  }

  #memoView > .section-head > div {
    gap: 7px;
  }

  #memoView > .section-head h2 {
    font-size: 22px;
    line-height: 1.1;
  }

  #memoView > .section-head > .secondary-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  #memoView .memo-intro {
    margin: -2px 2px 0;
    font-size: 12px;
    line-height: 1.35;
  }

  #memoView .memo-module-host {
    gap: 8px;
  }

  #memoView .memo-focus-panel {
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(var(--module-rgb), 0.1);
  }

  #memoView .memo-focus-copy {
    gap: 5px;
  }

  #memoView .memo-focus-copy > span {
    font-size: 11px;
  }

  #memoView .memo-focus-copy strong {
    font-size: 22px;
    line-height: 1.05;
  }

  #memoView .memo-focus-copy p {
    font-size: 12px;
    line-height: 1.35;
  }

  #memoView .memo-progress-line.large {
    height: 6px;
  }

  #memoView .memo-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #memoView .memo-stat-card {
    min-height: 52px;
    gap: 3px;
    padding: 7px 5px;
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(var(--module-rgb), 0.08);
  }

  #memoView .memo-stat-card strong {
    font-size: 18px;
    line-height: 1;
  }

  #memoView .memo-stat-card span,
  #memoView .memo-stat-card small {
    font-size: 10px;
    line-height: 1.15;
  }

  #memoView .memo-card-tasks {
    gap: 5px;
  }

  #memoView .memo-card-task {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
    font-size: 12px;
  }

  #memoView .memo-card-task input {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 420px) {
  #memoView .memo-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  #memoView .memo-stat-card {
    padding: 6px 4px;
  }

  #memoView .memo-stat-card strong {
    font-size: 17px;
  }

  #memoView .memo-stat-card span,
  #memoView .memo-stat-card small {
    font-size: 9px;
  }

  #memoView > .section-head {
    height: auto;
    min-height: 56px;
    max-height: none;
  }

  #memoView > .section-head h2 {
    font-size: 20px;
  }
}

body.private-module-mode #treeholeView.is-composing .treehole-composer,
body.private-module-mode #treeholeView .treehole-composer:not([hidden]) {
    position: fixed;
    inset: env(safe-area-inset-top) 0 0;
    z-index: 70;
    overflow: auto;
    border-radius: 0;
    padding: 14px;
    background: #fff;
  }

  body.private-module-mode,
  body.private-module-mode .app-shell,
  body.private-module-mode .app-main,
  body.private-module-mode #treeholeView {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body.private-module-mode #treeholeView.is-composing .treehole-composer,
  body.private-module-mode #treeholeView .treehole-composer:not([hidden]) {
    right: auto;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  body.private-module-mode #treeholeView .treehole-composer *,
  body.private-module-mode #treeholeView .treehole-composer *::before,
  body.private-module-mode #treeholeView .treehole-composer *::after {
    box-sizing: border-box;
  }

  body.private-module-mode #treeholeView .treehole-composer form,
  body.private-module-mode #treeholeView .treehole-upload-row,
  body.private-module-mode #treeholeView .treehole-audio-row,
  body.private-module-mode #treeholeView .audio-edit-panel,
  body.private-module-mode #treeholeView #treeholeText,
  body.private-module-mode #treeholeView #treeholeAudioPreview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.private-module-mode #treeholeView #treeholeText {
    resize: vertical;
  }

  body.private-module-mode #treeholeView .treehole-upload-row {
    grid-template-columns: 34px minmax(58px, 1fr) minmax(58px, 1fr) minmax(74px, 1.05fr);
    align-items: end;
    gap: 6px;
  }

  body.private-module-mode #treeholeView .treehole-image-tools {
    display: contents;
  }

  body.private-module-mode #treeholeView .treehole-submit-button {
    width: auto;
    min-width: 68px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(20, 164, 104, 0.18);
  }

  body.private-module-mode #treeholeView .treehole-upload-row > .treehole-emoji-picker,
  body.private-module-mode #treeholeView .treehole-upload-row > #treeholeImageName {
    grid-column: 1 / -1;
  }

  body.private-module-mode #treeholeView .audio-edit-panel {
    overflow: hidden;
  }

  body.private-module-mode #treeholeView .audio-trim-grid {
    gap: 16px;
  }

  body.private-module-mode #treeholeView .audio-trim-grid label {
    gap: 10px;
  }

  body.private-module-mode #treeholeView .audio-trim-grid input[type="range"] {
    min-height: 44px;
    padding: 14px 0;
    touch-action: pan-y;
  }

  body.private-module-mode #treeholeView .audio-trim-grid input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  body.private-module-mode #treeholeView .audio-trim-grid input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  body.admin-console-mode {
    overflow: auto;
  }

  body.admin-console-mode .app-shell,
  body.admin-console-mode .app-main {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.admin-console-mode .app-main {
    padding: 0;
  }

  #adminView.admin-view {
    height: auto;
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head"
      "nav"
      "panel";
    gap: 8px;
    padding: 8px;
    overflow: visible;
  }

  #adminView > .admin-console-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "actions";
    align-items: center;
    min-height: 0;
    gap: 8px 10px;
    border-radius: 14px;
    padding: 10px;
  }

  #adminView > .admin-console-head .eyebrow,
  #adminView > .admin-console-head p,
  .admin-title-desktop {
    display: none;
  }

  .admin-console-title {
    grid-area: title;
    display: flex;
    align-items: center;
    align-self: center;
    gap: 10px;
  }

  #adminView > .admin-console-head h2 {
    min-width: 0;
    overflow: hidden;
    font-size: 19px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-title-mobile {
    display: inline;
  }

  .admin-console-mobile-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  }

  .admin-console-mobile-home img {
    width: 25px;
    height: 25px;
    object-fit: contain;
  }

  .admin-console-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .admin-console-search {
    width: 100%;
    min-height: 38px;
  }

  .admin-console-actions > .secondary-button.compact {
    min-height: 38px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .admin-account-menu-wrap {
    width: auto;
  }

  .admin-account-button {
    justify-content: center;
    width: 42px;
    min-height: 38px;
    max-width: 42px;
    padding: 0;
  }

  .admin-account-button .avatar-badge {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .admin-account-text,
  .admin-account-button b {
    display: none;
  }

  .admin-account-menu {
    right: 0;
    min-width: min(240px, calc(100vw - 24px));
  }

  #adminView .admin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #adminView .admin-summary div {
    min-height: 70px;
    padding: 10px;
  }

  #adminView > .admin-sidebar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 12px;
    scrollbar-width: none;
  }

  #adminView > .admin-sidebar::-webkit-scrollbar {
    display: none;
  }

  .admin-menu-group {
    display: contents;
    min-width: 0;
  }

  .admin-menu-group > span {
    display: none;
  }

  #adminView > .admin-sidebar .segment {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
  }

  #adminView > .admin-sidebar .segment.is-active {
    background: #fff;
  }

  #adminView > .admin-sidebar .admin-menu-icon {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  #adminView > .admin-sidebar .admin-menu-label {
    overflow: visible;
    text-overflow: clip;
  }

  #adminView > .admin-panel {
    max-height: none;
    overflow: visible;
    border-radius: 16px;
    padding: 12px;
  }

  .admin-overview-grid,
  .admin-overview-columns,
  .admin-quick-grid,
  .admin-system-grid,
  .admin-system-columns,
  .admin-system-meta-grid {
    grid-template-columns: 1fr;
  }

  .admin-overview-grid article {
    min-height: 112px;
    padding: 14px;
  }

  .admin-system-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-system-card {
    min-height: 118px;
    padding: 13px;
  }

  .admin-mobile-note {
    display: block;
  }

  #adminView table {
    display: block;
    width: 100%;
  }

  #adminView table thead {
    display: none;
  }

  #adminView table tbody {
    display: grid;
    gap: 10px;
  }

  #adminView table tr {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--admin-line);
    border-radius: 14px;
    background: #fff;
  }

  #adminView table td {
    display: block;
    border: 0;
    background: transparent;
    padding: 2px 0;
  }
}

/* Lounge-inspired hub refresh for workspace entry pages. */
.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .privacy-view) {
  position: relative;
  width: min(1900px, 100%);
  gap: 18px;
  isolation: isolate;
}

.tools-view {
  --hub-accent: #4f46e5;
  --hub-accent-2: #06b6d4;
  --hub-dark: #151a55;
  --hub-soft: rgba(238, 242, 255, 0.9);
  --hub-line: rgba(99, 102, 241, 0.18);
  --hub-shadow: rgba(79, 70, 229, 0.12);
}

.messages-view {
  --hub-accent: #2563eb;
  --hub-accent-2: #14b8a6;
  --hub-dark: #102a64;
  --hub-soft: rgba(239, 246, 255, 0.92);
  --hub-line: rgba(37, 99, 235, 0.16);
  --hub-shadow: rgba(37, 99, 235, 0.12);
}

.my-space-view {
  --hub-accent: #0f766e;
  --hub-accent-2: #22c55e;
  --hub-dark: #064e3b;
  --hub-soft: rgba(236, 253, 245, 0.92);
  --hub-line: rgba(15, 118, 110, 0.16);
  --hub-shadow: rgba(15, 118, 110, 0.12);
}

.privacy-view {
  --hub-accent: #334155;
  --hub-accent-2: #0f766e;
  --hub-dark: #111827;
  --hub-soft: rgba(248, 250, 252, 0.94);
  --hub-line: rgba(51, 65, 85, 0.14);
  --hub-shadow: rgba(15, 23, 42, 0.1);
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .privacy-view)::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 8px;
  background-image:
    linear-gradient(var(--hub-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hub-line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.28;
  pointer-events: none;
}

.tools-view .hub-hero,
.messages-view .hub-hero,
.my-space-view .hub-hero,
.privacy-view .hub-hero {
  min-height: 236px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 32px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, var(--hub-dark), var(--hub-accent), var(--hub-accent-2));
  box-shadow: 0 18px 42px var(--hub-shadow);
}

.tools-view .hub-hero > div,
.messages-view .hub-hero > div,
.my-space-view .hub-hero > div,
.privacy-view .hub-hero > div {
  max-width: 760px;
}

.tools-view .hub-hero .eyebrow,
.messages-view .hub-hero .eyebrow,
.my-space-view .hub-hero .eyebrow,
.privacy-view .hub-hero .eyebrow {
  color: rgba(186, 230, 253, 0.95);
}

.tools-view .hub-hero h2,
.messages-view .hub-hero h2,
.my-space-view .hub-hero h2,
.privacy-view .hub-hero h2 {
  color: inherit;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.05;
}

.tools-view .hub-hero p,
.messages-view .hub-hero p,
.my-space-view .hub-hero p,
.privacy-view .hub-hero p {
  max-width: 720px;
  color: rgba(244, 250, 255, 0.88);
  font-size: 17px;
}

.tools-view .module-card-grid,
.messages-view .module-card-grid,
.my-space-view .module-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(224px, 1fr);
  align-items: stretch;
  gap: 18px;
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .yookerd-module-card.large {
  min-height: 224px;
  height: 100%;
  grid-template-areas:
    "icon copy arrow"
    "note note note"
    "status status status";
  grid-template-rows: auto auto auto;
  align-content: start;
  padding: 20px;
  border-color: var(--module-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--module-bg-end)),
    var(--hub-soft);
  box-shadow: 0 16px 38px var(--hub-shadow);
}

.workspace-hub-view.my-space-view .yookerd-module-card.large.has-illustration {
  grid-template-areas:
    "icon copy arrow"
    "note note note"
    "illustration illustration illustration"
    "status status status";
  grid-template-rows: auto auto minmax(104px, 1fr) auto;
}

.workspace-hub-view.my-space-view .yookerd-module-card.large.has-illustration .module-card-illustration {
  min-height: 102px;
}

.workspace-hub-view.my-space-view .yookerd-module-card.large.has-illustration .module-card-illustration svg {
  width: min(100%, 170px);
  height: 112px;
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .yookerd-module-card.large::after {
  right: -46px;
  bottom: -48px;
  width: 150px;
  height: 150px;
  opacity: 0.9;
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-copy strong,
.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-copy small,
.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-note,
.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-status,
.privacy-view .privacy-card,
.privacy-view .privacy-card *,
.profile-view.profile-panel,
.profile-view.profile-panel * {
  writing-mode: horizontal-tb;
  word-break: normal;
  overflow-wrap: normal;
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-copy strong {
  color: #0f172a;
  font-size: 21px;
  line-height: 1.18;
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-copy small,
.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-note {
  color: #475569;
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-note {
  align-self: start;
  display: block;
  overflow: visible;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-icon,
.privacy-view .module-card-icon {
  border-radius: 8px;
}

.workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-status {
  justify-self: start;
}

.privacy-view .privacy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.privacy-view .privacy-card {
  min-height: 210px;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, 220px);
  align-items: start;
  border-color: var(--hub-line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--hub-soft));
  box-shadow: 0 16px 38px var(--hub-shadow);
}

.privacy-view .privacy-card strong {
  color: #0f172a;
  font-size: 22px;
  line-height: 1.2;
}

.privacy-view .privacy-card p {
  color: #475569;
  font-size: 15px;
}

.privacy-view .privacy-card .secondary-button {
  width: 100%;
  min-height: 42px;
  border-color: rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #1d4ed8;
  white-space: normal;
}

.privacy-view .privacy-boundary-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 16px 14px;
}

.privacy-view .privacy-choice-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 16px 14px;
  min-height: 238px;
}

.privacy-boundary-toggle {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 8px;
  width: min(100%, 300px);
  padding: 4px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.72);
}

.privacy-choice-toggle {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 8px;
  width: min(100%, 460px);
  padding: 4px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.72);
}

.privacy-boundary-toggle .secondary-button,
.privacy-choice-toggle .secondary-button {
  grid-column: auto;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  color: #475569;
  font-weight: 900;
  line-height: 1.15;
  writing-mode: horizontal-tb;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: nowrap;
}

.privacy-boundary-toggle .secondary-button.is-active,
.privacy-choice-toggle .secondary-button.is-active {
  border-color: rgba(15, 118, 110, 0.24);
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.22);
}

.privacy-view .privacy-treehole-card {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(240px, 0.72fr) minmax(320px, 1fr);
  min-height: 260px;
}

.privacy-card-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.privacy-card-copy small {
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.privacy-treehole-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.privacy-treehole-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.privacy-treehole-actions .secondary-button {
  width: auto;
  min-width: 118px;
}

.privacy-treehole-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}

.privacy-treehole-friend {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.privacy-treehole-friend.is-enabled {
  border-color: rgba(15, 118, 110, 0.34);
  background: rgba(236, 253, 245, 0.9);
}

.privacy-treehole-friend input {
  width: 18px;
  height: 18px;
  accent-color: #0f766e;
}

.privacy-treehole-friend span {
  display: block;
  min-width: 0;
}

.privacy-treehole-friend strong,
.privacy-treehole-friend small {
  display: block;
  overflow-wrap: anywhere;
}

.privacy-treehole-friend strong {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.25;
}

.privacy-treehole-friend small {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.privacy-treehole-empty {
  padding: 14px;
  border: 1px dashed rgba(15, 118, 110, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #64748b;
  line-height: 1.6;
}

.profile-view.profile-panel {
  --profile-accent: #0f766e;
  --profile-accent-2: #22c55e;
  --profile-dark: #064e3b;
  --profile-line: rgba(15, 118, 110, 0.16);
  --profile-shadow: rgba(15, 118, 110, 0.12);
  width: min(1660px, 100%);
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--profile-line);
  border-radius: 8px;
  background:
    linear-gradient(rgba(15, 118, 110, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.92));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 18px 42px var(--profile-shadow);
}

.profile-view .panel-heading {
  min-height: 178px;
  align-items: center;
  padding: 28px;
  border: 1px solid rgba(125, 211, 252, 0.32);
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, var(--profile-dark), var(--profile-accent), var(--profile-accent-2));
  box-shadow: 0 16px 38px var(--profile-shadow);
}

.profile-view .panel-heading .eyebrow {
  color: rgba(209, 250, 229, 0.94);
}

.profile-view .panel-heading h3 {
  color: inherit;
  font-size: clamp(34px, 4.5vw, 58px);
}

.profile-view .avatar-options,
.profile-view .profile-fields-grid label {
  border-color: var(--profile-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 30px rgba(15, 118, 110, 0.07);
}

.profile-view .file-pill.avatar-upload,
.profile-view .primary-button {
  border-radius: 8px;
}

@media (max-width: 720px) {
  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .privacy-view) {
    gap: 12px;
  }

  .tools-view .hub-hero,
  .messages-view .hub-hero,
  .my-space-view .hub-hero,
  .privacy-view .hub-hero {
    min-height: 170px;
    padding: 22px;
  }

  .tools-view .hub-hero h2,
  .messages-view .hub-hero h2,
  .my-space-view .hub-hero h2,
  .privacy-view .hub-hero h2 {
    font-size: 34px;
  }

  .tools-view .module-card-grid,
  .messages-view .module-card-grid,
  .my-space-view .module-card-grid,
  .privacy-view .privacy-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .yookerd-module-card.large {
    min-height: 174px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "note note"
      "status status";
    grid-template-rows: auto auto auto;
  }

  .workspace-hub-view.my-space-view .yookerd-module-card.large.has-illustration {
    grid-template-areas:
      "icon copy"
      "note note"
      "illustration illustration"
      "status status";
    grid-template-rows: auto auto minmax(84px, 1fr) auto;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .module-card-arrow {
    display: none;
  }

  .privacy-view .privacy-card {
    min-height: 174px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .privacy-view .privacy-card .secondary-button {
    grid-column: 1 / -1;
    width: auto;
    justify-self: start;
    padding-right: 18px;
    padding-left: 18px;
  }

  .privacy-boundary-toggle {
    grid-column: 1 / -1;
    max-width: 240px;
  }

  .privacy-choice-toggle {
    grid-column: 1 / -1;
    max-width: 360px;
  }

  .privacy-view .privacy-boundary-toggle .secondary-button,
  .privacy-view .privacy-choice-toggle .secondary-button {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
    padding-right: 12px;
    padding-left: 12px;
  }

  .privacy-view .privacy-treehole-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .privacy-treehole-panel {
    grid-column: 1 / -1;
  }

  .privacy-treehole-actions {
    justify-content: flex-start;
  }

  .privacy-treehole-list {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .profile-view.profile-panel {
    padding: 10px;
  }

  .profile-view .panel-heading {
    min-height: 148px;
    padding: 22px;
  }
}

@media (max-width: 720px) {
  #loungeView .lounge-hero,
  .profile-view .panel-heading {
    min-height: 72px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
  }

  #loungeView .lounge-title-block .eyebrow,
  #loungeView .lounge-title-block strong,
  #loungeView .lounge-title-block p,
  .profile-view .panel-heading .eyebrow {
    display: none;
  }

  #loungeView .lounge-title-block h2,
  .profile-view .panel-heading h3 {
    font-size: 30px;
    line-height: 1.08;
    white-space: nowrap;
  }
}

/* Lounge mobile density pass: keep the same flows, make lists and controls faster to scan. */
@media (max-width: 720px) {
  #loungeView .lounge-module-root {
    gap: 10px;
  }

  #loungeView :is(.lounge-section, .lounge-play-surface, .lounge-side-card) {
    padding: 10px;
  }

  #loungeView .lounge-section,
  #loungeView .lounge-room-page,
  #loungeView .lounge-game-column,
  #loungeView .lounge-room-side {
    gap: 10px;
  }

  #loungeView .lounge-mobile-toggles {
    gap: 6px;
  }

  #loungeView .lounge-mobile-toggles button {
    min-height: 36px;
    padding: 0 8px;
    font-size: 12px;
  }

  #loungeView .lounge-categories {
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
  }

  #loungeView .lounge-category {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  #loungeView .lounge-game-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #loungeView .lounge-game-card {
    display: grid;
    position: relative;
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 112px;
    overflow: hidden;
    background: #fff;
  }

  #loungeView .lounge-game-card::before {
    display: none;
  }

  #loungeView .lounge-game-visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 112px;
    opacity: 1;
    filter: none;
    isolation: isolate;
  }

  #loungeView .lounge-game-visual::before {
    z-index: 0;
    opacity: 0.3;
    background-size: 18px 18px;
  }

  #loungeView .lounge-game-visual :is(.art-glow, .art-shape) {
    display: none;
  }

  #loungeView .lounge-game-visual::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    background:
      radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.92) 0 6px, transparent 7px),
      rgba(255, 255, 255, 0.24);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
    transform: translate(-50%, -50%);
  }

  #loungeView .lounge-game-visual.has-icon-image {
    place-items: center;
  }

  #loungeView .lounge-game-visual-icon {
    z-index: 1;
    width: 52px;
    max-height: 58px;
    filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.18));
  }

  #loungeView .lounge-game-visual.has-icon-image::after {
    display: none;
  }

  #loungeView .visual-werewolf::after {
    width: 52px;
    height: 42px;
    border: 0;
    border-radius: 16px;
    background:
      radial-gradient(circle at 78% 20%, #f8fafc 0 8px, transparent 9px),
      linear-gradient(135deg, transparent 0 42%, #172554 43% 58%, transparent 59%),
      linear-gradient(45deg, transparent 0 45%, #0f172a 46% 62%, transparent 63%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  }

  #loungeView .visual-draw_guess::after {
    width: 48px;
    height: 34px;
    border: 5px solid #fff;
    border-radius: 12px;
    background:
      radial-gradient(circle at 66% 42%, #f97316 0 6px, transparent 7px),
      linear-gradient(135deg, #e0f2fe, #fff7ed);
    box-shadow:
      14px 9px 0 -5px #f59e0b,
      18px 4px 0 -7px #1e293b,
      0 10px 20px rgba(15, 23, 42, 0.14);
    transform: translate(-50%, -50%) rotate(-4deg);
  }

  #loungeView .visual-gomoku::after,
  #loungeView .visual-othello::after {
    width: 52px;
    height: 52px;
    border: 5px solid rgba(255, 255, 255, 0.78);
    border-radius: 12px;
    background:
      radial-gradient(circle at 28% 30%, #111827 0 5px, transparent 6px),
      radial-gradient(circle at 68% 30%, #fff 0 5px, transparent 6px),
      radial-gradient(circle at 48% 62%, #111827 0 5px, transparent 6px),
      radial-gradient(circle at 74% 72%, #fff 0 5px, transparent 6px),
      linear-gradient(90deg, rgba(15, 23, 42, 0.18) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15, 23, 42, 0.18) 1px, transparent 1px),
      #dffaf3;
    background-size: auto, auto, auto, auto, 13px 13px, 13px 13px, auto;
    transform: translate(-50%, -50%) rotate(-3deg);
  }

  #loungeView .visual-othello::after {
    background:
      radial-gradient(circle at 30% 30%, #111827 0 8px, transparent 9px),
      radial-gradient(circle at 70% 30%, #fff 0 8px, transparent 9px),
      radial-gradient(circle at 30% 70%, #fff 0 8px, transparent 9px),
      radial-gradient(circle at 70% 70%, #111827 0 8px, transparent 9px),
      linear-gradient(90deg, rgba(15, 23, 42, 0.2) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15, 23, 42, 0.2) 1px, transparent 1px),
      #bbf7d0;
    background-size: auto, auto, auto, auto, 17px 17px, 17px 17px, auto;
  }

  #loungeView .visual-landlord::after,
  #loungeView .visual-guandan::after {
    width: 28px;
    height: 42px;
    border: 4px solid #fff;
    border-radius: 8px;
    background:
      radial-gradient(circle at 50% 28%, #ef4444 0 4px, transparent 5px),
      linear-gradient(180deg, #fff, #fee2e2);
    box-shadow:
      12px 3px 0 -1px #fff,
      24px 7px 0 -2px #dbeafe,
      0 10px 20px rgba(15, 23, 42, 0.15);
    transform: translate(-62%, -50%) rotate(-12deg);
  }

  #loungeView .visual-guandan::after {
    box-shadow:
      11px 2px 0 -1px #fff,
      22px 5px 0 -2px #dbeafe,
      33px 8px 0 -3px #fff7ed,
      0 10px 20px rgba(15, 23, 42, 0.15);
  }

  #loungeView .visual-mahjong::after {
    width: 24px;
    height: 36px;
    border: 4px solid rgba(255, 255, 255, 0.88);
    border-radius: 8px;
    background:
      radial-gradient(circle at 50% 34%, #16a085 0 4px, transparent 5px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(222, 247, 238, 0.96));
    box-shadow:
      -13px 5px 0 -2px #f8fafc,
      13px -4px 0 -2px #f8fafc,
      26px 3px 0 -4px #ecfeff,
      0 10px 20px rgba(15, 23, 42, 0.15);
  }

  #loungeView .visual-rps::after {
    width: 42px;
    height: 42px;
    border: 5px solid rgba(255, 255, 255, 0.8);
    border-radius: 17px;
    background: #f8fafc;
    box-shadow:
      -17px 5px 0 -7px rgba(248, 250, 252, 0.92),
      17px 5px 0 -7px rgba(248, 250, 252, 0.92),
      0 10px 20px rgba(15, 23, 42, 0.15);
    clip-path: polygon(16% 20%, 72% 16%, 88% 40%, 78% 78%, 26% 84%, 9% 54%);
  }

  #loungeView .visual-liars_dice::after,
  #loungeView .visual-yacht_dice::after {
    width: 34px;
    height: 34px;
    border: 5px solid #fff;
    border-radius: 10px;
    background:
      radial-gradient(circle at 30% 30%, #2563eb 0 3px, transparent 4px),
      radial-gradient(circle at 70% 70%, #2563eb 0 3px, transparent 4px),
      #f8fafc;
    box-shadow:
      16px -8px 0 -2px #f8fafc,
      0 10px 20px rgba(15, 23, 42, 0.15);
    transform: translate(-60%, -42%) rotate(-10deg);
  }

  #loungeView .visual-yacht_dice::after {
    box-shadow:
      14px -9px 0 -2px #f8fafc,
      28px 2px 0 -4px #f8fafc,
      0 10px 20px rgba(15, 23, 42, 0.15);
  }

  #loungeView .visual-undercover::after {
    width: 50px;
    height: 34px;
    border: 5px solid rgba(255, 255, 255, 0.86);
    border-radius: 14px;
    background:
      radial-gradient(circle at 30% 45%, #4338ca 0 3px, transparent 4px),
      radial-gradient(circle at 50% 45%, #4338ca 0 3px, transparent 4px),
      radial-gradient(circle at 70% 45%, #4338ca 0 3px, transparent 4px),
      #f8fafc;
    box-shadow:
      13px 12px 0 -8px #dffaf3,
      0 10px 20px rgba(15, 23, 42, 0.15);
  }

  #loungeView .visual-sea_turtle::after {
    width: 52px;
    height: 32px;
    border: 5px solid rgba(255, 255, 255, 0.84);
    border-radius: 999px 999px 14px 14px;
    background:
      radial-gradient(circle at 50% 58%, #0f766e 0 4px, transparent 5px),
      radial-gradient(circle at 50% 30%, transparent 0 7px, #0f766e 8px 10px, transparent 11px),
      linear-gradient(180deg, #ecfeff, #a7f3d0);
    box-shadow:
      -20px -7px 0 -12px #f8fafc,
      20px -5px 0 -13px rgba(255, 255, 255, 0.7),
      0 10px 20px rgba(15, 23, 42, 0.15);
  }

  #loungeView .visual-avalon::after {
    width: 40px;
    height: 48px;
    border: 5px solid rgba(255, 255, 255, 0.88);
    border-radius: 10px;
    background:
      linear-gradient(100deg, transparent 42%, #facc15 43% 57%, transparent 58%),
      linear-gradient(180deg, #fef3c7, #f8fafc);
    clip-path: polygon(50% 0, 92% 18%, 82% 76%, 50% 100%, 18% 76%, 8% 18%);
  }

  #loungeView .visual-coop_minesweeper::after {
    width: 52px;
    height: 44px;
    border: 5px solid rgba(255, 255, 255, 0.82);
    border-radius: 10px;
    background:
      radial-gradient(circle at 68% 70%, #111827 0 6px, transparent 7px),
      linear-gradient(90deg, transparent 60%, #ef4444 61% 82%, transparent 83%),
      linear-gradient(90deg, rgba(15, 23, 42, 0.16) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15, 23, 42, 0.16) 1px, transparent 1px),
      #f8fafc;
    background-size: auto, auto, 13px 11px, 13px 11px, auto;
  }

  #loungeView .visual-ludo::after {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    background:
      radial-gradient(circle at 26% 26%, #ef4444 0 6px, transparent 7px),
      radial-gradient(circle at 74% 26%, #facc15 0 6px, transparent 7px),
      radial-gradient(circle at 26% 74%, #22c55e 0 6px, transparent 7px),
      radial-gradient(circle at 74% 74%, #3b82f6 0 6px, transparent 7px),
      linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.72) 43% 57%, transparent 58%),
      linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.72) 43% 57%, transparent 58%),
      #f8fafc;
    transform: translate(-50%, -50%) rotate(-2deg);
  }

  #loungeView .visual-uno::after {
    width: 28px;
    height: 42px;
    border: 5px solid rgba(255, 255, 255, 0.88);
    border-radius: 11px;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.86) 0 10px, transparent 11px),
      #ef4444;
    box-shadow:
      12px 2px 0 -2px #facc15,
      24px 5px 0 -4px #2563eb,
      0 10px 20px rgba(15, 23, 42, 0.15);
    transform: translate(-64%, -50%) rotate(-14deg);
  }

  #loungeView .visual-word_chain::after {
    width: 46px;
    height: 30px;
    border: 5px solid rgba(255, 255, 255, 0.86);
    border-radius: 13px;
    background:
      linear-gradient(90deg, rgba(124, 58, 237, 0.26) 0 12px, transparent 13px),
      #f8fafc;
    box-shadow:
      12px 15px 0 -5px #ecfeff,
      -14px 15px 0 -8px rgba(255, 255, 255, 0.72),
      0 10px 20px rgba(15, 23, 42, 0.15);
    transform: translate(-50%, -62%) rotate(-5deg);
  }

  #loungeView .lounge-game-body {
    position: relative;
    min-height: 0;
    gap: 6px;
    padding: 9px 10px;
  }

  #loungeView .lounge-game-top {
    align-items: flex-start;
    gap: 6px;
  }

  #loungeView .lounge-game-card h3 {
    font-size: 15px;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  #loungeView .lounge-game-top span:not(.lounge-game-icon) {
    font-size: 11px;
    line-height: 1.3;
  }

  #loungeView .lounge-game-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #loungeView .lounge-game-meta,
  #loungeView .lounge-card-actions,
  #loungeView .lounge-room-badges {
    gap: 4px;
  }

  #loungeView .lounge-game-meta span,
  #loungeView .lounge-room-badges span {
    padding: 3px 6px;
    font-size: 10.5px;
    line-height: 1.2;
  }

  #loungeView .lounge-game-stats {
    display: none;
  }

  #loungeView .lounge-card-actions .primary-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  #loungeView .lounge-room-list {
    gap: 7px;
  }

  #loungeView .lounge-room-card {
    display: grid;
    gap: 7px;
    padding: 10px;
  }

  #loungeView .lounge-room-card strong {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #loungeView .lounge-room-card span {
    font-size: 11.5px;
    line-height: 1.3;
  }

  #loungeView .lounge-room-actions,
  #loungeView .lounge-room-header-actions,
  #loungeView .lounge-room-controls,
  #loungeView .lounge-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  #loungeView :is(.lounge-room-actions, .lounge-room-header-actions, .lounge-room-controls, .lounge-dialog-actions) button {
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }

  #loungeView .lounge-room-actions button:only-child,
  #loungeView .lounge-dialog-actions button:only-child {
    grid-column: 1 / -1;
  }

  #loungeView .lounge-dialog-backdrop {
    place-items: end center;
    padding: 8px;
  }

  #loungeView .lounge-dialog {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 12px;
    border-radius: 10px;
  }

  #loungeView .lounge-dialog-head {
    gap: 8px;
  }

  #loungeView .lounge-dialog h3 {
    font-size: 18px;
  }

  #loungeView .lounge-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #loungeView .lounge-create-form label {
    min-width: 0;
    gap: 4px;
  }

  #loungeView .lounge-create-form label span {
    font-size: 11.5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  #loungeView .lounge-create-form :is(input, select, textarea) {
    min-width: 0;
    min-height: 36px;
    padding: 7px 8px;
    font-size: 13px;
  }

  #loungeView .lounge-create-form textarea {
    min-height: 62px;
  }

  #loungeView .lounge-create-form .lounge-toggle-field {
    gap: 8px;
    padding: 8px;
  }

  #loungeView .lounge-safe-note {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
  }

  #loungeView .lounge-room-page.room-theme {
    padding: 8px;
  }

  #loungeView .lounge-room-header {
    gap: 8px;
    padding: 10px;
  }

  #loungeView .lounge-room-header h2 {
    font-size: 22px;
    white-space: normal;
  }

  #loungeView .lounge-room-header p {
    font-size: 12px;
    line-height: 1.35;
  }

  #loungeView .lounge-room-layout {
    gap: 10px;
  }

  #loungeView .lounge-room-summary {
    align-items: flex-start;
    gap: 8px;
  }

  #loungeView .lounge-room-summary .lounge-game-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
  }

  #loungeView .lounge-room-summary h3 {
    font-size: 16px;
  }

  #loungeView .lounge-room-summary p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #loungeView .lounge-rule-grid {
    gap: 5px;
  }

  #loungeView .lounge-rule-grid span {
    padding: 4px 6px;
    font-size: 11px;
  }

  #loungeView .lounge-side-card {
    gap: 10px;
  }

  #loungeView .lounge-side-head {
    align-items: center;
    gap: 8px;
  }

  #loungeView .lounge-player-grid {
    gap: 6px;
    max-height: 220px;
  }

  #loungeView .lounge-player,
  #loungeView .lounge-spectators .lounge-player {
    gap: 6px;
    padding: 7px;
  }

  #loungeView .lounge-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 10px;
  }

  #loungeView .lounge-chat-card {
    min-height: 260px;
  }
}

.profile-view.profile-panel {
  --profile-accent: #2563eb;
  --profile-accent-soft: rgba(37, 99, 235, 0.1);
  --profile-cyan: #06b6d4;
  --profile-ink: #0f172a;
  --profile-muted: #64748b;
  --profile-line: rgba(148, 163, 184, 0.26);
  --profile-card: rgba(255, 255, 255, 0.94);
  --profile-shadow: rgba(15, 23, 42, 0.08);
  width: min(1660px, 100%);
  gap: 16px;
  padding: 18px 22px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(244, 248, 252, 0.96));
  box-shadow: none;
}

.profile-hero-card,
.profile-card {
  border: 1px solid var(--profile-line);
  border-radius: 8px;
  background: var(--profile-card);
  box-shadow: 0 16px 38px var(--profile-shadow);
}

.profile-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 0.62fr);
  align-items: center;
  gap: 20px;
  min-height: 190px;
  padding: 28px;
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 247, 255, 0.96) 57%, rgba(218, 235, 255, 0.9) 100%);
}

.profile-hero-main,
.profile-hero-status,
.profile-grid,
.profile-main-column,
.profile-side-column,
.profile-details-form {
  min-width: 0;
}

.profile-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 26px;
}

.profile-hero-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.16);
  cursor: pointer;
}

.profile-hero-avatar-image,
.profile-current-avatar-image {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
  color: #0f172a;
  font-weight: 900;
  line-height: 1;
}

.profile-hero-avatar-image {
  width: 112px;
  height: 112px;
}

.profile-current-avatar-image {
  width: 76px;
  height: 76px;
}

.profile-hero-avatar-image img,
.profile-current-avatar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.profile-avatar-edit {
  position: absolute;
  right: 8px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: #fff;
  color: var(--profile-accent);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.14);
}

.profile-hero-copy {
  min-width: 0;
}

.profile-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.profile-view .profile-hero-title-row .eyebrow {
  color: #2563eb;
  letter-spacing: 0;
}

.profile-verified {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.profile-hero-copy h3 {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--profile-ink);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
}

.profile-hero-meta {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}

.profile-hero-meta div {
  display: flex;
  gap: 8px;
  min-width: 0;
  color: #334155;
  font-size: 14px;
}

.profile-hero-meta dt {
  flex: 0 0 auto;
  margin: 0;
  color: #475569;
  font-weight: 800;
}

.profile-hero-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-hero-signature dd {
  color: #1e293b;
}

.profile-hero-status {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(148px, 1fr));
  gap: 12px;
}

.profile-status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(30, 64, 175, 0.08);
}

.profile-status-card small {
  display: block;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.profile-status-card strong {
  display: block;
  margin-top: 2px;
  color: #2563eb;
  font-size: 18px;
  line-height: 1.1;
  white-space: nowrap;
}

.profile-status-card div {
  min-width: 0;
}

.profile-status-ring,
.profile-status-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.profile-status-ring {
  background:
    radial-gradient(circle at center, #fff 54%, transparent 56%),
    conic-gradient(var(--profile-accent) var(--profile-progress), rgba(37, 99, 235, 0.12) 0);
}

.profile-status-icon {
  border: 1px solid rgba(37, 99, 235, 0.16);
  color: var(--profile-accent);
  background: rgba(37, 99, 235, 0.08);
  font-weight: 900;
}

.profile-hero-art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 32%;
  pointer-events: none;
}

.profile-hero-art span {
  position: absolute;
  display: block;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.28), rgba(37, 99, 235, 0.18));
  transform: rotate(45deg) skew(-8deg, -8deg);
}

.profile-hero-art span:nth-child(1) {
  top: 30px;
  right: 90px;
}

.profile-hero-art span:nth-child(2) {
  top: 74px;
  right: 38px;
  width: 82px;
  height: 82px;
  background: linear-gradient(135deg, rgba(191, 219, 254, 0.42), rgba(37, 99, 235, 0.25));
}

.profile-hero-art span:nth-child(3) {
  right: 18px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.8), rgba(125, 211, 252, 0.28));
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 20px;
  align-items: start;
}

.profile-main-column,
.profile-side-column,
.profile-details-form {
  display: grid;
  gap: 12px;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.profile-info-grid .profile-basic-card {
  order: 1;
}

.profile-info-grid .profile-school-card {
  order: 2;
}

.profile-info-grid .profile-request-note {
  order: 3;
  grid-column: 1 / -1;
}

.profile-info-grid .profile-basic-card .profile-fields-grid-three {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-info-grid .profile-basic-card .profile-fields-grid-three .profile-field:nth-child(3) {
  grid-column: 1 / -1;
}

.profile-view .profile-details-form {
  border-top: 0;
  padding-top: 0;
}

.profile-card {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.profile-basic-card,
.profile-school-card {
  gap: 14px;
}

.profile-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-card-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-card-head h4 {
  margin: 0;
  color: var(--profile-ink);
  font-size: 16px;
  line-height: 1.2;
}

.profile-card-head p {
  margin: 3px 0 0;
  color: var(--profile-muted);
  font-size: 12px;
  line-height: 1.35;
}

.profile-view .profile-fields-grid {
  display: grid;
  gap: 14px;
}

.profile-fields-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-fields-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-view .profile-fields-grid label.profile-field,
.profile-signature-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.profile-view .profile-field input,
.profile-view .profile-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--profile-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 9px 11px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-view .profile-field textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.45;
}

.profile-view .profile-field input:focus,
.profile-view .profile-field textarea:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.profile-view .profile-field input:disabled {
  color: #94a3b8;
  background: #f8fafc;
}

.profile-signature-field {
  margin-top: 14px;
}

.profile-field-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.profile-field-meta p {
  margin: 0;
  color: var(--profile-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.profile-field-meta strong {
  flex: 0 0 auto;
  color: #2563eb;
  font-size: 12px;
}

.profile-request-note {
  border-color: rgba(245, 158, 11, 0.24);
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
}

.profile-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}

.profile-action-bar .primary-button,
.profile-view .file-pill.avatar-upload {
  min-width: 154px;
  border-color: #2563eb;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.profile-action-bar .secondary-button {
  min-width: 132px;
  border-color: rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: #fff;
  color: #475569;
}

.profile-save-hint {
  margin-left: auto;
  color: var(--profile-muted);
  font-size: 12px;
  font-weight: 700;
}

.profile-avatar-manager {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.profile-side-label {
  display: block;
  margin-bottom: 8px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.profile-current-avatar {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
}

.profile-avatar-card .avatar-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px);
  justify-content: start;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-avatar-card .avatar-choice {
  width: 40px;
  height: 40px;
  padding: 0;
  border-color: rgba(148, 163, 184, 0.28);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.profile-avatar-card .avatar-choice .avatar-badge {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.profile-avatar-card .avatar-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.4);
}

.profile-avatar-card .avatar-choice.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.profile-avatar-card .avatar-more {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.profile-avatar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-avatar-actions .file-pill.avatar-upload,
.profile-avatar-actions .file-pill.avatar-upload span {
  color: #fff;
}

.profile-avatar-actions .secondary-button {
  min-height: 38px;
  border-color: rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: #fff;
  color: #475569;
}

.profile-switch-list,
.profile-security-list {
  display: grid;
  gap: 12px;
}

.profile-switch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.profile-switch-row input {
  order: 2;
  appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 999px;
  background: #dbeafe;
  cursor: pointer;
}

.profile-switch-row input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: transform 0.15s ease;
}

.profile-switch-row input:checked {
  background: #3b82f6;
}

.profile-switch-row input:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.22);
  outline-offset: 2px;
}

.profile-switch-row input:checked::before {
  transform: translateX(16px);
}

.profile-switch-row strong,
.profile-switch-row small {
  display: block;
}

.profile-switch-row strong {
  color: var(--profile-ink);
  font-size: 13px;
}

.profile-switch-row small {
  margin-top: 3px;
  color: var(--profile-muted);
  font-size: 12px;
  line-height: 1.35;
}

.profile-security-item {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0 0 12px;
  cursor: pointer;
}

.profile-security-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.profile-security-item span {
  grid-column: 1;
  color: var(--profile-ink);
  font-size: 13px;
  font-weight: 850;
}

.profile-security-item small {
  grid-column: 2;
  justify-self: end;
  color: var(--profile-muted);
  font-size: 12px;
  text-align: right;
  overflow-wrap: anywhere;
}

.profile-security-item::after {
  content: "›";
  grid-column: 3;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
}

.profile-security-item:hover span,
.profile-security-item:focus-visible span {
  color: #2563eb;
}

.profile-security-item:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.2);
  outline-offset: 3px;
  border-radius: 8px;
}

.profile-security-item:disabled {
  opacity: 1;
  cursor: default;
}

.profile-modal-note {
  margin: -2px 0 0;
  color: var(--profile-muted);
  font-size: 12px;
}

.profile-device-list {
  display: grid;
  gap: 10px;
}

.people-login-device-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.people-login-device-summary {
  display: grid;
  gap: 8px;
}

.people-login-device-summary-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.92);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.people-login-device-summary-button span,
.people-login-device-summary-button strong,
.people-login-device-summary-button small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.people-login-device-summary-button strong {
  color: var(--profile-ink, #0f172a);
  font-size: 14px;
}

.people-login-device-summary-button small {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.people-login-device-summary-button em {
  align-self: center;
  white-space: nowrap;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  padding: 5px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.people-login-device-summary-button:hover,
.people-login-device-summary-button:focus-visible {
  border-color: rgba(37, 99, 235, 0.42);
  background: #eff6ff;
}

.people-login-device-summary-button:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.2);
  outline-offset: 2px;
}

.people-login-history-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.96);
  padding: 12px;
}

#adminView .people-detail-panel.is-sidebar.has-login-history-popover {
  overflow: visible;
}

#adminView .people-detail-panel.is-sidebar .people-login-history-panel {
  position: absolute;
  top: 236px;
  right: calc(100% + 10px);
  z-index: 40;
  width: clamp(360px, 34vw, 520px);
  max-height: min(520px, calc(100vh - 260px));
  margin: 0;
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

#adminView .people-detail-panel.is-sidebar .people-login-history-panel::after {
  content: "";
  position: absolute;
  top: 26px;
  right: -7px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(37, 99, 235, 0.24);
  border-right: 1px solid rgba(37, 99, 235, 0.24);
  background: rgba(255, 255, 255, 0.98);
  transform: rotate(45deg);
}

.people-login-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.people-login-history-head span,
.people-login-history-head strong {
  display: block;
}

.people-login-history-head span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.people-login-history-head strong {
  margin-top: 2px;
  color: #0f172a;
  font-size: 15px;
}

.people-login-history-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

#adminView .people-detail-panel.is-sidebar .people-login-history-list {
  max-height: min(410px, calc(100vh - 360px));
}

.profile-device-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.9);
}

.profile-device-row > div {
  min-width: 0;
}

.profile-device-row strong,
.profile-device-row span,
.profile-device-row small {
  display: block;
  overflow-wrap: anywhere;
}

.profile-device-row strong {
  color: var(--profile-ink);
  font-size: 14px;
}

.profile-device-row span {
  margin-top: 4px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.profile-device-row small {
  margin-top: 4px;
  color: var(--profile-muted);
  font-size: 12px;
}

.profile-device-row em {
  padding: 5px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.mobile-app-mode.mobile-topbar-open .profile-view.profile-panel:not([hidden]) {
  position: relative;
  inset: auto;
  z-index: auto;
  max-height: none;
  overflow: visible;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .profile-hero-card,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-hero-art {
    opacity: 0.45;
  }
}

@media (max-width: 760px) {
  .profile-view.profile-panel {
    gap: 10px;
    padding: 8px;
  }

  .profile-hero-card {
    min-height: 0;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
  }

  .profile-hero-main {
    align-items: center;
    gap: 12px;
  }

  .profile-hero-avatar {
    width: 74px;
    height: 74px;
  }

  .profile-hero-avatar-image {
    width: 62px;
    height: 62px;
  }

  .profile-avatar-edit {
    right: 2px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .profile-hero-title-row {
    gap: 7px;
    margin-bottom: 3px;
  }

  .profile-verified {
    min-height: 20px;
    padding: 0 8px;
    font-size: 11px;
  }

  .profile-hero-copy h3 {
    font-size: 24px;
  }

  .profile-hero-meta {
    gap: 4px;
    margin-top: 8px;
  }

  .profile-hero-meta div {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
  }

  .profile-fields-grid-three,
  .profile-fields-grid-two,
  .profile-info-grid,
  .profile-avatar-manager {
    grid-template-columns: 1fr;
  }

  .profile-avatar-card .profile-avatar-manager {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .profile-avatar-card .profile-current-avatar {
    width: 72px;
    height: 72px;
  }

  .profile-avatar-card .profile-current-avatar-image {
    width: 62px;
    height: 62px;
  }

  .profile-avatar-card .avatar-options {
    grid-template-columns: repeat(auto-fit, minmax(34px, 38px));
    gap: 7px;
  }

  .profile-avatar-card .avatar-choice {
    width: 38px;
    height: 38px;
  }

  .profile-avatar-card .avatar-choice .avatar-badge {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .profile-view .profile-basic-card .profile-fields-grid-three,
  .profile-view .profile-school-card .profile-fields-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .profile-hero-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .profile-status-card {
    min-height: 54px;
    gap: 6px;
    padding: 8px;
  }

  .profile-status-ring,
  .profile-status-icon {
    width: 26px;
    height: 26px;
  }

  .profile-status-card small {
    font-size: 10px;
  }

  .profile-status-card strong {
    font-size: 15px;
  }

  .profile-hero-art {
    opacity: 0.24;
  }

  .profile-card {
    gap: 12px;
    padding: 14px;
  }

  .profile-signature-field {
    margin-top: 10px;
  }

  .profile-view .profile-field input,
  .profile-view .profile-field textarea {
    min-height: 36px;
    padding: 8px 10px;
  }

  .profile-view .profile-field textarea {
    min-height: 58px;
  }

  .profile-action-bar {
    align-items: stretch;
    flex-direction: column;
    padding: 0;
  }

  .profile-action-bar .primary-button,
  .profile-action-bar .secondary-button {
    width: 100%;
  }

  .profile-save-hint {
    margin-left: 0;
  }

  .profile-field-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .profile-security-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-security-item small {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }

  .profile-security-item::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

#woodenFishView {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 249, 0.96));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.daily-words-view {
  width: min(1680px, 100%);
}

.daily-words-module-host,
.daily-words-module-host *,
.daily-words-module-host *::before,
.daily-words-module-host *::after {
  box-sizing: border-box;
}

.daily-words-page {
  --dw-accent: #2563eb;
  --dw-accent-2: #0891b2;
  --dw-dark: #102a64;
  --dw-line: rgba(37, 99, 235, 0.16);
  --dw-soft: rgba(239, 246, 255, 0.92);
  --dw-muted: #64748b;
  --dw-ink: #0f172a;
  --dw-shadow: rgba(37, 99, 235, 0.11);
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 12px;
  color: var(--dw-ink);
  background:
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.dw-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 188px;
  padding: 26px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, var(--dw-dark), var(--dw-accent), var(--dw-accent-2));
  box-shadow: 0 18px 42px var(--dw-shadow);
}

.dw-eyebrow,
.dw-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 800;
}

.dw-head h1 {
  margin: 10px 0 8px;
  color: inherit;
  font-size: 42px;
  line-height: 1.08;
}

.dw-head p {
  max-width: 760px;
  margin: 0;
  color: rgba(244, 250, 255, 0.9);
  font-size: 16px;
  line-height: 1.65;
}

.dw-stage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.dw-stage-row span,
.dw-word-badge,
.dw-pos {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.dw-stage-row span {
  color: #eff6ff;
  background: rgba(255, 255, 255, 0.13);
}

.dw-head-panel {
  display: grid;
  gap: 10px;
  min-width: 260px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.2);
}

.dw-meta-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(226, 232, 240, 0.9);
  font-size: 13px;
}

.dw-meta-item strong {
  color: #fff;
}

.dw-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.dw-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #bfdbfe;
  transition: width 0.2s ease;
}

.dw-refresh {
  width: 100%;
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.dw-refresh:hover,
.dw-refresh:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.dw-notice,
.dw-error {
  padding: 12px 14px;
  border: 1px solid var(--dw-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  color: #334155;
  font-size: 14px;
  line-height: 1.55;
}

.dw-error {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(254, 242, 242, 0.92);
  color: #991b1b;
}

.dw-word-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.dw-card,
.dw-skeleton-card {
  display: grid;
  gap: 12px;
  min-height: 430px;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px var(--dw-shadow);
}

.dw-card.is-learned {
  border-color: rgba(37, 99, 235, 0.34);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.96));
}

.dw-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.dw-word-title {
  min-width: 0;
}

.dw-word-title strong {
  display: block;
  color: var(--dw-ink);
  font-size: 28px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dw-word-title small {
  display: block;
  margin-top: 6px;
  color: var(--dw-muted);
  font-size: 14px;
}

.dw-speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  color: var(--dw-accent);
  background: #eff6ff;
  font-weight: 900;
  cursor: pointer;
}

.dw-speak:hover,
.dw-speak:focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  background: #dbeafe;
}

.dw-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dw-word-badge {
  color: #1d4ed8;
  background: #dbeafe;
}

.dw-pos {
  color: #0f766e;
  background: #ccfbf1;
}

.dw-meaning {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.86);
}

.dw-meaning strong,
.dw-info-block strong,
.dw-detail-block strong,
.dw-illustration-card strong {
  color: #1e3a8a;
  font-size: 13px;
}

.dw-meaning p,
.dw-info-block p,
.dw-detail-block p,
.dw-example p {
  margin: 4px 0 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.58;
}

.dw-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dw-info-block,
.dw-detail-block,
.dw-example,
.dw-image-prompt,
.dw-illustration-card {
  padding: 11px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.dw-details {
  display: grid;
  gap: 10px;
}

.dw-image-prompt,
.dw-illustration-card {
  color: #334155;
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.74), rgba(224, 242, 254, 0.58)),
    #fff;
}

.dw-illustration-card {
  display: grid;
  gap: 9px;
}

.dw-word-illustration {
  min-height: 150px;
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(20, 184, 166, 0.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.74));
  background-size: 28px 28px, 28px 28px, auto;
}

.dw-word-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 150px;
}

.dw-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: end;
}

.dw-card-actions button,
.dw-error button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  color: #1d4ed8;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.dw-card-actions button:hover,
.dw-card-actions button:focus-visible,
.dw-error button:hover,
.dw-error button:focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  background: #eff6ff;
}

.dw-card-actions .dw-learned {
  color: #fff;
  background: linear-gradient(135deg, var(--dw-accent), var(--dw-accent-2));
  border-color: rgba(37, 99, 235, 0.34);
}

.dw-skeleton-card {
  min-height: 260px;
}

.dw-skeleton-line {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0, #f8fafc, #e2e8f0);
  background-size: 200% 100%;
  animation: dw-skeleton 1.2s ease-in-out infinite;
}

.dw-skeleton-line.title {
  width: 42%;
  height: 28px;
  border-radius: 8px;
}

.dw-skeleton-line.short {
  width: 58%;
}

@keyframes dw-skeleton {
  0% { background-position: 0 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 980px) {
  .dw-head {
    grid-template-columns: 1fr;
  }

  .dw-head-panel {
    min-width: 0;
  }

  .dw-word-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .daily-words-page {
    gap: 12px;
    padding: 10px;
  }

  .dw-head {
    min-height: 0;
    padding: 20px;
  }

  .dw-head h1 {
    font-size: 30px;
  }

  .dw-head p {
    font-size: 14px;
  }

  .dw-info-grid {
    grid-template-columns: 1fr;
  }

  .dw-card,
  .dw-skeleton-card {
    min-height: 0;
    padding: 14px;
  }

  .dw-word-title strong {
    font-size: 24px;
  }

  .dw-card-actions button {
    flex: 1 1 120px;
  }
}

#woodenFishView .wooden-fish-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 14px 18px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #17363a, #0f766e);
}

#woodenFishView .wooden-fish-head > div {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

#woodenFishView .wooden-fish-head .eyebrow {
  color: rgba(204, 251, 241, 0.86);
}

#woodenFishView .wooden-fish-head h2 {
  margin: 0;
  color: inherit;
  font-size: 28px;
  line-height: 1.1;
  white-space: nowrap;
}

.wooden-fish-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(260px, 1.4fr) minmax(160px, 0.7fr);
  align-items: center;
  gap: 22px;
  min-height: 520px;
  margin-top: 16px;
  padding: 28px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.74)),
    linear-gradient(90deg, rgba(15, 118, 110, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(15, 118, 110, 0.05) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
}

.wooden-fish-copy {
  display: grid;
  gap: 8px;
  align-content: center;
}

.wooden-fish-copy .eyebrow {
  color: #0f766e;
}

.wooden-fish-copy strong {
  color: #0f172a;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
}

.wooden-fish-copy p {
  max-width: 260px;
  margin: 0;
  color: #475569;
  font-weight: 800;
  line-height: 1.7;
}

.wooden-fish-button {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  min-height: 360px;
  padding: 34px 18px 62px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  touch-action: manipulation;
}

.wooden-fish-button:hover,
.wooden-fish-button:focus-visible {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M10 33 27 16' stroke='%236b3f1d' stroke-width='5' stroke-linecap='round'/%3E%3Crect x='22' y='8' width='14' height='10' rx='3' transform='rotate(45 29 13)' fill='%23b9783f' stroke='%236b3f1d' stroke-width='2'/%3E%3Cpath d='M8 35l5-2' stroke='%236b3f1d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 10 32, pointer;
}

.wooden-fish-button:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.34);
  outline-offset: 4px;
}

.wooden-fish-hammer {
  position: absolute;
  top: 52px;
  right: 64px;
  z-index: 4;
  width: 104px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6b3f1d, #9a5c2c);
  box-shadow: 0 10px 20px rgba(87, 53, 24, 0.18);
  opacity: 0;
  transform: rotate(-34deg) translateY(-10px);
  transform-origin: 10% 50%;
  transition: opacity 160ms ease, transform 180ms ease;
  pointer-events: none;
}

.wooden-fish-hammer::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -18px;
  width: 44px;
  height: 48px;
  border: 3px solid #6b3f1d;
  border-radius: 10px;
  background: linear-gradient(135deg, #c88a4a, #8b4f24);
}

.wooden-fish-button:hover .wooden-fish-hammer,
.wooden-fish-button:focus-visible .wooden-fish-hammer {
  opacity: 1;
  transform: rotate(-34deg) translateY(0);
}

.wooden-fish-button.is-striking .wooden-fish-hammer {
  opacity: 1;
  animation: woodenFishHammer 260ms ease-out;
}

.wooden-fish-ripples {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.wooden-fish-ripple {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(15, 118, 110, 0.32);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.2);
  animation: woodenFishRipple 680ms ease-out forwards;
}

.wooden-fish-body {
  position: relative;
  display: block;
  width: clamp(250px, 36vw, 460px);
  aspect-ratio: 1.62;
  border: 3px solid #5d351d;
  border-radius: 54% 48% 42% 50% / 58% 56% 42% 40%;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.26), transparent 28%),
    repeating-linear-gradient(178deg, rgba(255, 255, 255, 0.08) 0 10px, rgba(74, 40, 20, 0.08) 10px 18px),
    linear-gradient(135deg, #c98242, #7b421f 72%);
  box-shadow:
    inset -18px -22px 42px rgba(69, 34, 14, 0.25),
    inset 20px 14px 28px rgba(255, 224, 166, 0.24),
    0 32px 54px rgba(73, 44, 23, 0.22);
  transform-origin: 50% 74%;
}

.wooden-fish-body::before {
  content: "";
  position: absolute;
  inset: 20% 17% auto 14%;
  height: 34%;
  border-radius: 50%;
  border-top: 3px solid rgba(255, 238, 205, 0.4);
  transform: rotate(-3deg);
}

.wooden-fish-slot {
  position: absolute;
  top: 38%;
  left: 22%;
  width: 47%;
  height: 19%;
  border-radius: 999px;
  background: linear-gradient(180deg, #22140d, #523016);
  box-shadow:
    inset 0 6px 10px rgba(0, 0, 0, 0.38),
    0 2px 0 rgba(255, 235, 192, 0.24);
  transform: rotate(-2deg);
}

.wooden-fish-eye {
  position: absolute;
  top: 29%;
  right: 21%;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #2c160d;
  box-shadow: 0 0 0 5px rgba(255, 239, 205, 0.12);
}

.wooden-fish-tail {
  position: absolute;
  right: -7%;
  top: 32%;
  width: 18%;
  height: 34%;
  clip-path: polygon(0 50%, 100% 0, 82% 50%, 100% 100%);
  background: linear-gradient(135deg, #8b4f24, #5d351d);
}

.wooden-fish-base {
  position: absolute;
  right: 17%;
  bottom: -18%;
  left: 17%;
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, #5d351d, #30190d);
  box-shadow: 0 18px 34px rgba(48, 25, 13, 0.24);
}

.wooden-fish-button.is-striking .wooden-fish-body {
  animation: woodenFishBody 260ms ease-out;
}

.wooden-fish-button.is-striking .wooden-fish-slot {
  animation: woodenFishSlot 260ms ease-out;
}

.wooden-fish-counter {
  justify-self: stretch;
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.07);
}

.wooden-fish-counter span {
  color: #0f766e;
  font-size: 13px;
  font-weight: 900;
}

.wooden-fish-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.wooden-fish-counter strong {
  color: #0f172a;
  font-size: 32px;
  line-height: 1;
}

.wooden-fish-counter b {
  font-size: 46px;
}

.wooden-fish-reset {
  flex: 0 0 auto;
  min-width: 62px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
  color: #0f766e;
  background: rgba(240, 253, 250, 0.92);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.wooden-fish-reset:hover,
.wooden-fish-reset:focus-visible {
  border-color: rgba(15, 118, 110, 0.36);
  background: #ccfbf1;
  transform: translateY(-1px);
}

.wooden-fish-reset:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.28);
  outline-offset: 2px;
}

@keyframes woodenFishBody {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(6px) scale(0.975);
  }
}

@keyframes woodenFishSlot {
  0%,
  100% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.45);
  }
}

@keyframes woodenFishHammer {
  0% {
    transform: rotate(-34deg) translateY(0);
  }
  52% {
    transform: rotate(-12deg) translate(-24px, 74px);
  }
  100% {
    transform: rotate(-34deg) translateY(0);
  }
}

@keyframes woodenFishRipple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(5.2);
  }
}

@media (max-width: 900px) {
  .wooden-fish-stage {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 22px;
  }

  .wooden-fish-button {
    justify-self: center;
    min-height: 300px;
  }

  .wooden-fish-counter {
    justify-self: start;
    min-width: min(100%, 260px);
  }
}

@media (max-width: 620px) {
  #woodenFishView {
    padding: 8px;
    border-radius: 10px;
  }

  #woodenFishView .wooden-fish-head {
    min-height: 58px;
    padding: 12px 14px;
  }

  #woodenFishView .wooden-fish-head h2 {
    font-size: 24px;
  }

  .wooden-fish-stage {
    gap: 14px;
    margin-top: 10px;
    padding: 16px;
  }

  .wooden-fish-copy strong {
    font-size: 30px;
  }

  .wooden-fish-button {
    min-height: 240px;
    padding: 18px 4px 44px;
  }

  .wooden-fish-body {
    width: min(100%, 290px);
  }

  .wooden-fish-hammer {
    top: 30px;
    right: 24px;
    width: 78px;
  }

  .wooden-fish-counter strong {
    font-size: 28px;
  }

  .wooden-fish-counter b {
    font-size: 38px;
  }
}

/* Office hub uses the same card-entry pattern as Tools Center. */
.office-view,
.office-page-view {
  --office-accent: #2563eb;
  --office-accent-2: #14b8a6;
  --office-dark: #111827;
  --office-soft: rgba(239, 246, 255, 0.92);
  --office-line: rgba(37, 99, 235, 0.16);
  --office-shadow: rgba(37, 99, 235, 0.12);
}

#workstationView.workspace-hub-view.office-view {
  position: relative;
  width: min(1900px, 100%);
  gap: 18px;
  isolation: isolate;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#workstationView.workspace-hub-view.office-view::before {
  content: "";
  display: block;
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 8px;
  background-image:
    linear-gradient(var(--office-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--office-line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.28;
  pointer-events: none;
}

.office-view .hub-hero {
  min-height: 236px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 32px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, var(--office-dark), var(--office-accent), var(--office-accent-2));
  box-shadow: 0 18px 42px var(--office-shadow);
}

.office-view .hub-hero > div {
  max-width: 760px;
}

.office-view .hub-hero .eyebrow {
  color: rgba(186, 230, 253, 0.95);
}

.office-view .hub-hero h2 {
  color: inherit;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.05;
}

.office-view .hub-hero p {
  max-width: 720px;
  color: rgba(244, 250, 255, 0.88);
  font-size: 17px;
}

.office-view .module-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(224px, 1fr);
  align-items: stretch;
  gap: 18px;
}

.workspace-hub-view.office-view .yookerd-module-card.large {
  min-height: 224px;
  height: 100%;
  grid-template-areas:
    "icon copy arrow"
    "note note note"
    "status status status";
  grid-template-rows: auto auto auto;
  align-content: start;
  padding: 20px;
  border-color: var(--module-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--module-bg-end)),
    var(--office-soft);
  box-shadow: 0 16px 38px var(--office-shadow);
}

.workspace-hub-view.office-view .yookerd-module-card.large::after {
  right: -46px;
  bottom: -48px;
  width: 150px;
  height: 150px;
  opacity: 0.9;
}

.workspace-hub-view.office-view .module-card-copy strong,
.workspace-hub-view.office-view .module-card-copy small,
.workspace-hub-view.office-view .module-card-note,
.workspace-hub-view.office-view .module-card-status {
  writing-mode: horizontal-tb;
  word-break: normal;
  overflow-wrap: normal;
}

.workspace-hub-view.office-view .module-card-copy strong {
  color: #0f172a;
  font-size: 21px;
  line-height: 1.18;
}

.workspace-hub-view.office-view .module-card-copy small,
.workspace-hub-view.office-view .module-card-note {
  color: #475569;
}

.workspace-hub-view.office-view .module-card-note {
  align-self: start;
  display: block;
  overflow: visible;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}

.workspace-hub-view.office-view .module-card-icon {
  border-radius: 8px;
}

.workspace-hub-view.office-view .module-card-status {
  justify-self: start;
}

.office-page-view {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 250, 0.96));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.office-page-view .section-head {
  background:
    linear-gradient(135deg, var(--office-dark), var(--office-accent)),
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.2), transparent 28%);
  border-color: rgba(37, 99, 235, 0.34);
  color: #fff;
  box-shadow: 0 18px 42px var(--office-shadow);
}

.office-page-view .section-head .eyebrow {
  color: rgba(186, 230, 253, 0.95);
}

.office-page-view .section-head h2 {
  color: inherit;
}

.office-page-view :is(.device-card, .schedule-panel, .office-board) {
  border-color: var(--office-line);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
  box-shadow: 0 18px 42px var(--office-shadow);
}

.office-page-view :is(.primary-button, .segment.is-active) {
  color: #fff;
  background: linear-gradient(135deg, var(--office-accent), var(--office-accent-2));
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 12px 28px var(--office-shadow);
}

.office-page-view :is(.secondary-button, .segmented, .compact-tabs) {
  border-color: var(--office-line);
}

.office-page-view :is(input, textarea, select):focus {
  border-color: rgba(37, 99, 235, 0.54);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.office-page-view .device-card img {
  object-fit: contain;
}

.office-page-view .reserved-block {
  background: linear-gradient(135deg, #b4233d, #ef5368);
}

.office-page-view .free-slot {
  color: #6b7280;
}

@media (max-width: 720px) {
  #workstationView.workspace-hub-view.office-view {
    gap: 12px;
  }

  .office-view .hub-hero {
    min-height: 170px;
    padding: 22px;
  }

  .office-view .hub-hero h2 {
    font-size: 34px;
  }

  .office-view .module-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .workspace-hub-view.office-view .yookerd-module-card.large {
    min-height: 174px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "note note"
      "status status";
    grid-template-rows: auto auto auto;
  }

  .workspace-hub-view.office-view .module-card-arrow {
    display: none;
  }

  .office-page-view {
    padding: 10px;
  }
}

/* Compact mobile hub pages so entry cards match the lighter workspace density. */
@media (max-width: 720px) {
  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .privacy-view),
  #workstationView.workspace-hub-view.office-view {
    gap: 10px;
  }

  .tools-view .hub-hero,
  .messages-view .hub-hero,
  .my-space-view .hub-hero,
  .privacy-view .hub-hero,
  .office-view .hub-hero {
    min-height: 72px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
  }

  .tools-view .hub-hero .eyebrow,
  .messages-view .hub-hero .eyebrow,
  .my-space-view .hub-hero .eyebrow,
  .privacy-view .hub-hero .eyebrow,
  .office-view .hub-hero .eyebrow,
  .tools-view .hub-hero p,
  .messages-view .hub-hero p,
  .my-space-view .hub-hero p,
  .privacy-view .hub-hero p,
  .office-view .hub-hero p {
    display: none;
  }

  .tools-view .hub-hero h2,
  .messages-view .hub-hero h2,
  .my-space-view .hub-hero h2,
  .privacy-view .hub-hero h2,
  .office-view .hub-hero h2 {
    font-size: 30px;
    line-height: 1.08;
    white-space: nowrap;
  }

  .tools-view .module-card-grid,
  .messages-view .module-card-grid,
  .my-space-view .module-card-grid,
  .office-view .module-card-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view) .yookerd-module-card.large,
  .workspace-hub-view.office-view .yookerd-module-card.large,
  .workspace-hub-view.my-space-view .yookerd-module-card.large.has-illustration {
    height: auto;
    min-height: 108px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon copy arrow"
      "note note note";
    grid-template-rows: auto auto;
    gap: 8px 10px;
    align-content: start;
    padding: 12px;
    border-radius: 14px;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-icon svg {
    width: 22px;
    height: 22px;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-copy strong {
    font-size: 16px;
    line-height: 1.16;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-copy small,
  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-note {
    font-size: 12px;
    line-height: 1.42;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-note {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-status,
  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-illustration {
    display: none;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .office-view) .module-card-arrow {
    display: block;
    grid-area: arrow;
    align-self: center;
    font-size: 20px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  body.module-app-mode:not(.admin-console-mode):not(.yookerd-mode),
  body.module-app-mode:not(.admin-console-mode):not(.yookerd-mode) .app-shell,
  body.module-app-mode:not(.admin-console-mode):not(.yookerd-mode) .app-main {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .privacy-view),
  #workstationView.workspace-hub-view.office-view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .privacy-view)::before,
  #workstationView.workspace-hub-view.office-view::before {
    inset: 0;
  }

  .workspace-hub-view:is(.tools-view, .messages-view, .my-space-view, .privacy-view) .hub-hero,
  .office-view .hub-hero,
  .privacy-view .privacy-grid,
  .privacy-view .privacy-card,
  .privacy-view .privacy-boundary-toggle,
  .privacy-view .privacy-choice-toggle,
  .workspace-hub-view.office-view .module-card-grid,
  .workspace-hub-view.office-view .yookerd-module-card.large {
    min-width: 0;
    max-width: 100%;
  }

  .privacy-view .privacy-boundary-toggle {
    width: min(100%, 240px);
  }

  .privacy-view .privacy-choice-toggle {
    width: min(100%, 360px);
  }

  .privacy-view .privacy-card,
  .privacy-view .privacy-card *,
  .workspace-hub-view.office-view .module-card-copy,
  .workspace-hub-view.office-view .module-card-copy *,
  .workspace-hub-view.office-view .module-card-note {
    overflow-wrap: anywhere;
  }

  .app-main,
  body.module-app-mode:not(.admin-console-mode):not(.yookerd-mode) .app-main {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .bottom-tab-bar:not([hidden]) {
    right: 10px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    padding-bottom: 10px;
    transform: translateZ(0);
  }

  body.mobile-app-mode .bottom-tab-bar:not([hidden]) {
    bottom: max(4px, calc(env(safe-area-inset-bottom) - 8px));
  }
}

/* Message center and bug submission panel. */
.messages-view #messageCards {
  display: block;
}

.message-board-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 520px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.09);
}

.message-board-nav {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border-right: 1px solid rgba(37, 99, 235, 0.12);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.96));
}

.message-board-nav button,
.friend-message-tabs button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(37, 99, 235, 0.08);
  border-radius: 12px;
  background: transparent;
  color: #334155;
  padding: 11px 12px;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.message-board-nav button:hover,
.friend-message-tabs button:hover {
  background: rgba(255, 255, 255, 0.82);
}

.message-tab-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.message-tab-main > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-tab-label-short {
  display: none;
}

.message-tab-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: currentColor;
}

.message-tab-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.message-board-nav button.is-active,
.friend-message-tabs button.is-active {
  border-color: rgba(37, 99, 235, 0.24);
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.96), #ffffff);
  color: #1d4ed8;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.1);
}

.message-board-nav em,
.friend-message-tabs em {
  min-width: 24px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.message-board-nav em.is-empty,
.friend-message-tabs em.is-empty {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  font-weight: 800;
}

.message-board-content,
.friend-notice-board {
  min-width: 0;
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px),
    #f8fbff;
  background-size: 28px 28px;
}

.message-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.message-board-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
}

.message-board-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.message-board-current {
  width: fit-content;
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.message-board-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.message-notice-list {
  display: grid;
  gap: 12px;
}

.message-notice-item {
  --notice-color: #2563eb;
  position: relative;
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 14px;
  background: #fff;
  padding: 15px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.message-notice-item.is-unread {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.98));
  border-color: rgba(37, 99, 235, 0.18);
}

.message-notice-item.is-read {
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.025);
}

.message-unread-dot {
  width: 8px;
  height: 8px;
  margin-top: 17px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  opacity: 0;
}

.message-notice-item.is-unread .message-unread-dot {
  opacity: 1;
}

.message-notice-item.notice-kind-friends {
  --notice-color: #0284c7;
}

.message-notice-item.notice-kind-friendRequest {
  --notice-color: #2563eb;
}

.message-notice-item.notice-kind-plaz {
  --notice-color: #1d4ed8;
}

.message-notice-item.notice-kind-lounge {
  --notice-color: #0e7490;
}

.message-notice-item.notice-kind-bug {
  --notice-color: #dc2626;
}

.message-notice-item.notice-kind-feature {
  --notice-color: #d97706;
}

.message-notice-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--notice-color) 10%, #ffffff);
  color: var(--notice-color);
}

.message-notice-icon svg {
  width: 23px;
  height: 23px;
  display: block;
}

.message-notice-main {
  min-width: 0;
}

.message-notice-main strong,
.message-notice-main p,
.message-notice-main span {
  display: block;
  overflow-wrap: anywhere;
}

.message-notice-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-notice-main strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
}

.message-notice-item.is-read .message-notice-main strong {
  color: #334155;
  font-weight: 800;
}

.message-notice-main p {
  margin: 6px 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.55;
}

.message-notice-main span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.message-notice-item .message-notice-icon {
  display: inline-grid;
  overflow-wrap: normal;
}

.message-notice-action {
  align-self: center;
  min-width: 74px;
  white-space: nowrap;
}

.message-empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #64748b;
  text-align: center;
  padding: 28px;
}

.message-empty-state > span {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.message-empty-state svg {
  width: 28px;
  height: 28px;
}

.message-empty-state strong {
  color: #0f172a;
  font-size: 16px;
}

.message-empty-state p {
  max-width: 360px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.friend-message-tabs {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid #dcdcdf;
  background: #eef4ff;
}

.friend-panel-preview {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
}

.friend-panel-preview-item {
  width: 100%;
  display: grid;
  gap: 4px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  padding: 12px 0;
  color: #111;
  text-align: left;
  cursor: pointer;
}

.friend-panel-preview-item:disabled {
  cursor: default;
}

.friend-panel-preview-item strong,
.friend-panel-preview-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-panel-preview-item span {
  color: #6b7280;
  font-size: 12px;
}

.friends-chat.is-board-mode {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

.friends-chat.is-board-mode .friend-notice-board {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bug-report-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: start center;
  padding: 72px 20px 20px;
  background: rgba(15, 23, 42, 0.38);
}

.bug-report-modal {
  width: min(720px, 100%);
  max-height: calc(100dvh - 96px);
  overflow: auto;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.bug-report-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
}

.bug-report-head h3 {
  margin: 4px 0 0;
  color: #0f172a;
}

.bug-report-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.bug-report-form label,
.bug-report-upload {
  display: grid;
  gap: 8px;
}

.bug-report-form label span {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.bug-report-form input,
.bug-report-form textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  color: #0f172a;
  font: inherit;
}

.bug-report-form textarea {
  min-height: 140px;
  resize: vertical;
}

.bug-report-upload small,
.bug-report-empty {
  color: #64748b;
  font-size: 12px;
}

.bug-report-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

.bug-report-thumb {
  position: relative;
  height: 82px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #f8fafc;
  padding: 0;
  cursor: pointer;
}

.bug-report-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bug-report-thumb span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
}

.bug-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.admin-message-root {
  display: grid;
  gap: 16px;
}

.admin-overview-grid.compact {
  margin-bottom: 0;
}

.admin-message-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--admin-line, rgba(37, 99, 235, 0.16));
  border-radius: 8px;
  background: var(--admin-surface, #fff);
  padding: 16px;
}

.admin-message-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-message-form label {
  display: grid;
  gap: 7px;
  color: var(--admin-muted, #667085);
  font-size: 12px;
  font-weight: 800;
}

.admin-message-form input,
.admin-message-form select,
.admin-message-form textarea {
  width: 100%;
  border: 1px solid var(--admin-line, rgba(37, 99, 235, 0.16));
  border-radius: 8px;
  background: #fff;
  color: var(--admin-ink, #101828);
  font: inherit;
  padding: 10px 12px;
}

.admin-message-form textarea {
  min-height: 112px;
  resize: vertical;
}

.admin-message-form .wide-field,
.admin-message-form button[type="submit"] {
  grid-column: 1 / -1;
}

.admin-message-form button[type="submit"] {
  justify-self: end;
}

.admin-message-announcements {
  display: grid;
  gap: 10px;
}

.admin-message-announcement {
  display: grid;
  gap: 8px;
  border: 1px solid var(--admin-line, rgba(37, 99, 235, 0.16));
  border-radius: 8px;
  background: var(--admin-surface-soft, #eef4fb);
  padding: 12px;
}

.admin-message-announcement div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.admin-message-announcement strong,
.admin-message-announcement p,
.admin-message-announcement span {
  overflow-wrap: anywhere;
}

.admin-message-announcement p {
  margin: 0;
  color: var(--admin-ink, #101828);
  line-height: 1.55;
}

.admin-message-announcement span {
  color: var(--admin-muted, #667085);
  font-size: 12px;
}

@media (max-width: 820px) {
  .message-board-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
  }

  .message-board-nav {
    max-width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-right: 0;
    border-bottom: 1px solid rgba(37, 99, 235, 0.12);
    padding: 10px;
    scrollbar-width: none;
  }

  .message-board-nav::-webkit-scrollbar {
    display: none;
  }

  .message-board-nav button {
    width: auto;
    min-width: 78px;
    flex: 0 0 auto;
    grid-template-columns: 1fr auto;
    padding: 9px 10px;
  }

  .message-tab-icon {
    display: none;
  }

  .message-tab-label-full {
    display: none;
  }

  .message-tab-label-short {
    display: inline;
  }

  .message-board-content,
  .friend-notice-board {
    padding: 14px;
  }

  .message-board-head {
    display: grid;
  }

  .message-board-actions {
    justify-content: stretch;
  }

  .message-board-actions > button,
  .bug-report-actions > button {
    flex: 1;
  }

  .message-notice-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon main dot"
      "desc desc desc"
      "meta meta action";
    align-items: start;
    padding: 14px;
  }

  .message-notice-item .message-unread-dot {
    grid-area: dot;
    margin-top: 12px;
    justify-self: end;
  }

  .message-notice-icon {
    grid-area: icon;
  }

  .message-notice-main {
    display: contents;
  }

  .message-notice-title-row {
    grid-area: main;
    align-self: center;
    min-height: 38px;
  }

  .message-notice-main p {
    grid-area: desc;
    margin: 2px 0 0;
  }

  .message-notice-main span {
    grid-area: meta;
    align-self: center;
  }

  .message-notice-action {
    grid-area: action;
    justify-self: end;
    align-self: center;
  }

  .message-empty-state {
    min-height: 190px;
    padding: 22px 16px;
  }

  .bug-report-form {
    grid-template-columns: 1fr;
  }

  .admin-message-form {
    grid-template-columns: 1fr;
  }

  .admin-message-form button[type="submit"] {
    justify-self: stretch;
  }

  .admin-message-announcement div {
    display: grid;
  }
}

/* Workspace visual upgrade: blue-white glass dashboard. */
body.workspace-home-mode {
  --workspace-ink: #0b1f3a;
  --workspace-muted: #5b6b82;
  --workspace-blue: #2563eb;
  --workspace-cyan: #38bdf8;
  --workspace-line: rgba(148, 163, 184, 0.28);
  --workspace-panel: rgba(255, 255, 255, 0.78);
  --workspace-panel-solid: #ffffff;
  --workspace-soft: rgba(37, 99, 235, 0.06);
  --workspace-card-height: clamp(158px, 17vh, 184px);
  --workspace-glass-shadow: 0 16px 40px rgba(37, 99, 235, 0.08);
  --workspace-hover-shadow: 0 20px 46px rgba(37, 99, 235, 0.14);
  color: var(--workspace-ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.13), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(56, 189, 248, 0.16), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 58%, #f6f9ff 100%);
  overflow: hidden;
}

body.workspace-home-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    radial-gradient(circle, rgba(37, 99, 235, 0.18) 1px, transparent 1.5px);
  background-size: 42px 42px, 42px 42px, 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.58), transparent 76%);
  opacity: 0.55;
}

body.workspace-home-mode .app-shell,
body.workspace-home-mode .topbar,
body.workspace-home-mode .app-main {
  position: relative;
  z-index: 1;
}

body.workspace-home-mode .topbar {
  z-index: 70;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(248, 251, 255, 0.82);
  box-shadow: 0 12px 34px rgba(37, 99, 235, 0.07);
  backdrop-filter: blur(18px);
}

body.workspace-home-mode .app-main {
  width: min(1480px, calc(100vw - 32px));
  padding: 10px 0 12px;
}

body.workspace-home-mode .workspace-home {
  grid-template-rows: clamp(164px, 19vh, 206px) minmax(0, 1fr);
  gap: 12px;
}

body.workspace-home-mode .workspace-hero {
  position: relative;
  height: clamp(164px, 19vh, 206px);
  overflow: hidden;
  padding: 12px 18px;
  border: 1px solid rgba(221, 231, 245, 0.72);
  border-radius: 22px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.68) 58%, rgba(219, 234, 254, 0.36) 100%);
  box-shadow: var(--workspace-glass-shadow);
  backdrop-filter: blur(18px);
}

body.workspace-home-mode .workspace-hero::after {
  content: none;
}

body.workspace-home-mode .workspace-hero-copy {
  position: relative;
  z-index: 2;
  max-width: min(72%, 980px);
  padding: 2px 0 0;
  gap: 7px;
}

body.workspace-home-mode .workspace-hero .eyebrow {
  color: var(--workspace-blue);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.workspace-home-mode .workspace-hero h1 {
  color: var(--workspace-ink);
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
}

body.workspace-home-mode .workspace-greeting-name {
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 4.5em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

body.workspace-home-mode .workspace-hero p {
  color: var(--workspace-muted);
  font-size: 14px;
  line-height: 1.42;
}

body.workspace-home-mode .workspace-hero-logo {
  top: 0;
  bottom: 0;
  right: clamp(16px, 4.4vw, 72px);
  width: clamp(320px, 26vw, 420px);
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.82;
  transform: none;
}

body.workspace-home-mode .workspace-hero-logo::before {
  content: "";
  position: absolute;
  inset: 18% 10% 3%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 64%);
  filter: blur(18px);
}

body.workspace-home-mode .workspace-hero-logo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 22px 34px rgba(37, 99, 235, 0.16));
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
}

body.workspace-home-mode .workspace-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 900px;
}

body.workspace-home-mode .workspace-stat-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.07);
  backdrop-filter: blur(16px);
}

body.workspace-home-mode .workspace-stat-card::before {
  content: "";
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 13px;
  background: rgba(239, 246, 255, 0.9);
}

body.workspace-home-mode .workspace-stat-card[data-stat="streak"]::before {
  border-color: rgba(37, 99, 235, 0.16);
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.92), rgba(255, 255, 255, 0.8)),
    url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='16' rx='3' fill='%23DBEAFE'/%3E%3Cpath d='M8 3v5M16 3v5M5.5 10h13' stroke='%232563EB' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m8 15 2.4 2.4L16 12' stroke='%232563EB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

body.workspace-home-mode .workspace-stat-card[data-stat="records"]::before {
  border-color: rgba(8, 145, 178, 0.16);
  background:
    linear-gradient(135deg, rgba(207, 250, 254, 0.9), rgba(255, 255, 255, 0.82)),
    url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='3' width='14' height='18' rx='3' fill='%23CFFAFE'/%3E%3Cpath d='M9 8h6M9 12h5M9 16h3' stroke='%230891B2' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M15.5 3.5V7h3.5' stroke='%230891B2' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

body.workspace-home-mode .workspace-stat-card[data-stat="tools"]::before {
  border-color: rgba(124, 58, 237, 0.16);
  background:
    linear-gradient(135deg, rgba(237, 233, 254, 0.95), rgba(255, 255, 255, 0.82)),
    url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3Z' fill='%23EDE9FE'/%3E%3Cpath d='M9 9V7a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M4 14h20M10 14v2h4v-2' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

body.workspace-home-mode .workspace-stat-card[data-stat="messages"]::before {
  border-color: rgba(245, 158, 11, 0.2);
  background:
    linear-gradient(135deg, rgba(254, 243, 199, 0.95), rgba(255, 255, 255, 0.82)),
    url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9a5 5 0 0 1 10 0v4l2 3.5H5L7 13V9Z' fill='%23FEF3C7'/%3E%3Cpath d='M7 9a5 5 0 0 1 10 0v4l2 3.5H5L7 13V9Z' stroke='%23F59E0B' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 19a2.5 2.5 0 0 0 4 0' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

body.workspace-home-mode .workspace-stat-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.workspace-home-mode .workspace-stat-card strong {
  color: var(--workspace-ink);
  font-size: 20px;
  line-height: 1.12;
}

body.workspace-home-mode .workspace-stat-action:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}

body.workspace-home-mode .workspace-layout-grid {
  grid-template-columns: minmax(0, 1fr) minmax(318px, 24%);
  gap: 16px;
}

body.workspace-home-mode .workspace-primary {
  grid-template-rows: auto auto;
  gap: 12px;
}

body.workspace-home-mode .workspace-section,
body.workspace-home-mode .workspace-side-card,
body.workspace-home-mode .workspace-side-illustration {
  border: 1px solid rgba(221, 231, 245, 0.88);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 251, 255, 0.72));
  box-shadow: var(--workspace-glass-shadow);
  backdrop-filter: blur(18px);
}

body.workspace-home-mode .workspace-section {
  position: relative;
  overflow: hidden;
  gap: 12px;
  padding: 16px;
}

body.workspace-home-mode .workspace-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 94% 0%, rgba(56, 189, 248, 0.11), transparent 26%),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
  opacity: 0.6;
}

body.workspace-home-mode .workspace-section.private {
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.9), rgba(239, 246, 255, 0.64));
}

body.workspace-home-mode .workspace-section-head,
body.workspace-home-mode .module-card-grid {
  position: relative;
  z-index: 1;
}

body.workspace-home-mode .workspace-section-head {
  min-height: 34px;
}

body.workspace-home-mode .workspace-section-head h2,
body.workspace-home-mode .workspace-section-head h3 {
  color: var(--workspace-ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.08;
}

body.workspace-home-mode .workspace-section-head span {
  color: #58708f;
  font-size: 13px;
  font-weight: 800;
}

body.workspace-home-mode .text-link-button {
  min-height: 30px;
  border-color: rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
}

body.workspace-home-mode .module-card-grid {
  --workspace-module-card-min-height: var(--workspace-card-height);
  gap: 14px;
  grid-auto-rows: var(--workspace-card-height);
}

body.workspace-home-mode .workspace-section:not(.private) .module-card-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.workspace-home-mode .private-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.workspace-home-mode .yookerd-module-card {
  --module-accent: #2563eb;
  --module-accent-rgb: 37, 99, 235;
  position: relative;
  isolation: isolate;
  height: var(--workspace-card-height);
  min-height: var(--workspace-card-height);
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon copy arrow"
    "note note note"
    "status status status";
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-content: stretch;
  padding: 16px;
  border: 1px solid rgba(221, 231, 245, 0.95);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.92) 100%);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.07);
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
}

body.workspace-home-mode .yookerd-module-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  z-index: -1;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(var(--module-accent-rgb), 0.95), rgba(56, 189, 248, 0.46), transparent);
}

body.workspace-home-mode .yookerd-module-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    radial-gradient(circle at 86% 84%, rgba(var(--module-accent-rgb), 0.1), transparent 30%),
    linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  opacity: 0.72;
  pointer-events: none;
}

body.workspace-home-mode .yookerd-module-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(var(--module-accent-rgb), 0.36);
  box-shadow: var(--workspace-hover-shadow);
}

body.workspace-home-mode .module-card-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--module-accent-rgb), 0.14);
  border-radius: 14px;
  background: rgba(var(--module-accent-rgb), 0.08);
  color: var(--module-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 22px rgba(var(--module-accent-rgb), 0.08);
  transition: color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}

body.workspace-home-mode .module-card-icon svg {
  width: 24px;
  height: 24px;
}

body.workspace-home-mode .yookerd-module-card:hover:not(:disabled) .module-card-icon {
  background: rgba(var(--module-accent-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 12px 24px rgba(var(--module-accent-rgb), 0.16);
}

body.workspace-home-mode .module-card-copy,
body.workspace-home-mode .module-card-note,
body.workspace-home-mode .module-card-status,
body.workspace-home-mode .module-card-arrow {
  position: relative;
  z-index: 1;
}

body.workspace-home-mode .module-card-copy strong {
  color: var(--workspace-ink);
  font-size: 16px;
  line-height: 1.16;
}

body.workspace-home-mode .module-card-copy small {
  color: #5b6b82;
  font-size: 11.5px;
  line-height: 1.34;
}

body.workspace-home-mode .module-card-note {
  align-self: start;
  color: #39536e;
  font-size: 12px;
  line-height: 1.42;
}

body.workspace-home-mode .module-card-status {
  justify-self: start;
  width: auto;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(var(--module-accent-rgb), 0.12);
  border-radius: 999px;
  background: rgba(var(--module-accent-rgb), 0.08);
  color: var(--module-accent);
  font-size: 11px;
  line-height: 1;
}

body.workspace-home-mode .workspace-home .yookerd-module-card:not(.is-locked):not(.is-disabled) {
  grid-template-areas:
    "icon copy arrow"
    "note note note";
  grid-template-rows: auto minmax(0, 1fr);
}

body.workspace-home-mode .workspace-home .yookerd-module-card:not(.is-locked):not(.is-disabled) .module-card-status {
  display: none;
}

body.workspace-home-mode .module-card-arrow {
  color: var(--module-accent);
  font-size: 22px;
  opacity: 0.86;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

body.workspace-home-mode .yookerd-module-card:hover:not(:disabled) .module-card-arrow {
  opacity: 1;
  transform: translateX(3px);
}

body.workspace-home-mode .module-card-illustration {
  display: none;
}

body.workspace-home-mode .module-workstation,
body.workspace-home-mode .module-officeequipment,
body.workspace-home-mode .module-officeexperiment,
body.workspace-home-mode .module-officeinventory {
  --module-accent: #14b8a6;
  --module-accent-rgb: 20, 184, 166;
}

body.workspace-home-mode .module-plaz {
  --module-accent: #2563eb;
  --module-accent-rgb: 37, 99, 235;
}

body.workspace-home-mode .module-lounge,
body.workspace-home-mode .module-treehole {
  --module-accent: #0ea5e9;
  --module-accent-rgb: 14, 165, 233;
}

body.workspace-home-mode .module-friends {
  --module-accent: #6366f1;
  --module-accent-rgb: 99, 102, 241;
}

body.workspace-home-mode .module-tools,
body.workspace-home-mode .module-privacy {
  --module-accent: #64748b;
  --module-accent-rgb: 100, 116, 139;
}

body.workspace-home-mode .module-digitalself,
body.workspace-home-mode .module-myspace {
  --module-accent: #0891b2;
  --module-accent-rgb: 8, 145, 178;
}

body.workspace-home-mode .module-calorie {
  --module-accent: #f97316;
  --module-accent-rgb: 249, 115, 22;
}

body.workspace-home-mode .module-memo {
  --module-accent: #f59e0b;
  --module-accent-rgb: 245, 158, 11;
}

body.workspace-home-mode .workspace-sidebar {
  grid-template-rows: minmax(430px, 1fr) auto minmax(92px, 0.18fr);
  gap: 12px;
}

body.workspace-home-mode .workspace-side-card,
body.workspace-home-mode .workspace-side-illustration {
  padding: 18px;
}

body.workspace-home-mode .workspace-side-card {
  overflow: hidden;
}

body.workspace-home-mode .workspace-side-card.quick-entry-card {
  overflow: visible;
  z-index: 2;
}

body.workspace-home-mode .workspace-side-card.quick-entry-card.is-picker-open {
  z-index: 80;
}

body.workspace-home-mode .workspace-section-head.compact {
  min-height: 28px;
}

body.workspace-home-mode .activity-list {
  position: relative;
  gap: 0;
}

body.workspace-home-mode .activity-list::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 15px;
  width: 1px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.28), rgba(37, 99, 235, 0.08));
}

body.workspace-home-mode .activity-list article {
  position: relative;
  min-height: 48px;
  padding: 8px 0 8px 42px;
  border-bottom: 1px solid rgba(221, 231, 245, 0.72);
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

body.workspace-home-mode .activity-list article:last-child {
  border-bottom: 0;
}

body.workspace-home-mode .activity-list > article > span {
  position: absolute;
  left: 0;
  top: 12px;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

body.workspace-home-mode .activity-list strong {
  color: var(--workspace-ink);
  font-size: 14px;
}

body.workspace-home-mode .activity-list small,
body.workspace-home-mode .activity-list time {
  color: #64748b;
  font-size: 12px;
}

body.workspace-home-mode .activity-list.workspace-message-overview {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  overflow: auto;
  padding: 6px 2px 0 0;
}

body.workspace-home-mode .activity-list.workspace-message-overview::before {
  display: none;
}

body.workspace-home-mode .workspace-message-row {
  appearance: none;
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(221, 231, 245, 0.82);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

body.workspace-home-mode .workspace-message-row:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

body.workspace-home-mode .workspace-message-row.is-unread {
  border-color: rgba(37, 99, 235, 0.26);
  background: linear-gradient(90deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.78));
}

body.workspace-home-mode .workspace-message-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

body.workspace-home-mode .workspace-message-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

body.workspace-home-mode .workspace-message-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.workspace-home-mode .workspace-message-main strong,
body.workspace-home-mode .workspace-message-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workspace-home-mode .workspace-message-main strong {
  color: var(--workspace-ink);
  font-size: 13px;
  font-weight: 900;
}

body.workspace-home-mode .workspace-message-main small {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.3;
}

body.workspace-home-mode .workspace-message-meta {
  min-width: 62px;
  display: grid;
  justify-items: end;
  gap: 3px;
}

body.workspace-home-mode .workspace-message-meta em {
  max-width: 86px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

body.workspace-home-mode .workspace-message-row.is-unread .workspace-message-meta em {
  background: #2563eb;
  color: #ffffff;
}

body.workspace-home-mode .workspace-message-meta time {
  color: #64748b;
  font-size: 10.5px;
  white-space: nowrap;
}

body.workspace-home-mode .workspace-message-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

body.workspace-home-mode .quick-entry-grid {
  gap: 10px;
}

body.workspace-home-mode .quick-entry-grid button {
  min-height: 72px;
  border: 1px solid rgba(221, 231, 245, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.06);
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}

body.workspace-home-mode .quick-entry-grid button:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
}

body.workspace-home-mode .quick-entry-grid .quick-entry-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.07);
  color: #2563eb;
}

body.workspace-home-mode .quick-entry-grid .quick-entry-label {
  color: var(--workspace-ink);
  font-size: 11px;
}

body.workspace-home-mode .quick-entry-config-button {
  border-color: rgba(37, 99, 235, 0.14);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
}

body.workspace-home-mode .quick-entry-picker {
  border-color: rgba(221, 231, 245, 0.94);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 46px rgba(37, 99, 235, 0.16);
}

body.workspace-home-mode .workspace-side-illustration {
  position: relative;
  min-height: 92px;
  overflow: hidden;
  align-content: end;
  padding-right: 122px;
}

body.workspace-home-mode .workspace-side-illustration::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(239, 246, 255, 0.32) 100%),
    url("/assets/yookerd/illustrations/workspace-cube-banner.webp") right bottom / auto 106% no-repeat;
  opacity: 0.78;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18), #000 42%);
}

body.workspace-home-mode .workspace-side-illustration::after {
  display: none;
}

body.workspace-home-mode .workspace-side-illustration strong,
body.workspace-home-mode .workspace-side-illustration span {
  position: relative;
  z-index: 1;
}

body.workspace-home-mode .workspace-side-illustration strong {
  color: var(--workspace-ink);
  font-size: 16px;
}

body.workspace-home-mode .workspace-side-illustration span {
  color: #1d4ed8;
}

@media (min-width: 1121px) and (max-height: 820px) {
  body.workspace-home-mode {
    --workspace-card-height: 152px;
  }

  body.workspace-home-mode .workspace-home {
    grid-template-rows: 158px minmax(0, 1fr);
  }

  body.workspace-home-mode .workspace-hero {
    height: 158px;
  }

  body.workspace-home-mode .workspace-section {
    padding: 14px;
  }

  body.workspace-home-mode .module-card-copy small {
    font-size: 11px;
  }

  body.workspace-home-mode .module-card-note {
    font-size: 11.5px;
    line-height: 1.34;
  }
}

@media (max-width: 1120px) {
  body.workspace-home-mode {
    --workspace-card-height: auto;
    overflow: auto;
  }

  body.workspace-home-mode .app-shell,
  body.workspace-home-mode .workspace-home {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.workspace-home-mode .app-main {
    width: min(100%, 980px);
    overflow: visible;
  }

  body.workspace-home-mode .workspace-home,
  body.workspace-home-mode .workspace-layout-grid,
  body.workspace-home-mode .workspace-primary,
  body.workspace-home-mode .workspace-sidebar {
    grid-template-rows: auto;
  }

  body.workspace-home-mode .workspace-hero {
    height: auto;
    min-height: 172px;
  }

  body.workspace-home-mode .workspace-hero-copy {
    max-width: 100%;
    padding-right: 210px;
  }

  body.workspace-home-mode .workspace-hero-logo {
    width: 210px;
    height: 140px;
    right: 12px;
  }

  body.workspace-home-mode .workspace-section:not(.private) .module-card-grid,
  body.workspace-home-mode .private-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  body.workspace-home-mode .yookerd-module-card {
    height: auto;
    min-height: 164px;
  }

  body.workspace-home-mode .workspace-private-showcase {
    height: clamp(88px, 20vw, 132px);
  }
}

@media (max-width: 720px) {
  body.workspace-home-mode .app-main {
    width: 100%;
    padding: 8px 10px calc(92px + env(safe-area-inset-bottom));
  }

  body.workspace-home-mode .workspace-hero {
    min-height: 0;
    padding: 14px;
  }

  body.workspace-home-mode .workspace-hero::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 16px;
    background:
      rgba(255, 255, 255, 0.84)
      url("/assets/yookerd/brand/yookers-workspace-logo.webp") center / 72% no-repeat;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
  }

  body.workspace-home-mode .workspace-hero-copy {
    padding-right: 0;
  }

  body.workspace-home-mode .workspace-hero .eyebrow,
  body.workspace-home-mode .workspace-hero h1,
  body.workspace-home-mode .workspace-hero p {
    max-width: calc(100% - 74px);
  }

  body.workspace-home-mode .workspace-hero h1 {
    font-size: 30px;
  }

  body.workspace-home-mode .workspace-hero-logo {
    display: none;
  }

  body.workspace-home-mode .workspace-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.workspace-home-mode .workspace-section {
    padding: 14px;
  }

  body.workspace-home-mode .workspace-section:not(.private) .module-card-grid,
  body.workspace-home-mode .private-grid {
    grid-template-columns: 1fr;
  }

  body.workspace-home-mode .yookerd-module-card {
    min-height: 152px;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "note note"
      "status status";
  }

  body.workspace-home-mode .module-card-arrow {
    display: none;
  }

  body.workspace-home-mode .workspace-side-illustration {
    padding-right: 112px;
  }
}

/* Keep the hero frame tall enough for the stat cards and cube art. */
body.workspace-home-mode .workspace-home {
  grid-template-rows: clamp(200px, 22vh, 232px) minmax(0, 1fr);
}

body.workspace-home-mode .workspace-hero {
  height: clamp(200px, 22vh, 232px);
  padding: 16px 20px 18px;
  overflow: hidden;
  border-radius: 22px;
  clip-path: inset(0 round 22px);
  backdrop-filter: none;
  background-clip: padding-box;
}

body.workspace-home-mode .workspace-hero-copy {
  gap: 8px;
}

body.workspace-home-mode .workspace-stats {
  margin-top: 2px;
}

body.workspace-home-mode .workspace-stat-card {
  min-height: 62px;
}

body.workspace-home-mode .workspace-hero-logo {
  right: clamp(8px, 2vw, 32px);
  width: clamp(320px, 26vw, 420px);
  height: auto;
}

@media (min-width: 1121px) and (max-height: 820px) {
  body.workspace-home-mode .workspace-home {
    grid-template-rows: 190px minmax(0, 1fr);
  }

  body.workspace-home-mode .workspace-hero {
    height: 190px;
    padding-bottom: 16px;
  }

  body.workspace-home-mode .workspace-hero-logo {
    width: 320px;
    height: auto;
  }
}

@media (max-width: 1120px) {
  body.workspace-home-mode .workspace-home,
  body.workspace-home-mode .workspace-hero {
    height: auto;
  }
}

/* Let the topbar float over the very top without reserving a large workspace gap. */
body.workspace-home-mode.app-topbar-floating:not(.mobile-app-mode) .topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transform: none;
}

body.workspace-home-mode.app-topbar-floating:not(.mobile-app-mode) .app-main {
  height: 100dvh;
  padding-top: 10px;
}

@media (max-width: 720px) {
  body.workspace-home-mode .app-main {
    width: 100%;
    padding: 8px 10px calc(88px + env(safe-area-inset-bottom));
  }

  body.workspace-home-mode .workspace-home {
    grid-template-rows: auto;
    gap: 12px;
  }

  body.workspace-home-mode .workspace-hero {
    min-height: 0;
    padding: 14px;
  }

  body.workspace-home-mode .workspace-hero::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 16px;
    background:
      rgba(255, 255, 255, 0.84)
      url("/assets/yookerd/brand/yookers-workspace-logo.webp") center / 72% no-repeat;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
  }

  body.workspace-home-mode .workspace-hero-copy {
    max-width: 100%;
    padding-right: 0;
  }

  body.workspace-home-mode .workspace-hero .eyebrow,
  body.workspace-home-mode .workspace-hero h1,
  body.workspace-home-mode .workspace-hero p {
    max-width: calc(100% - 74px);
  }

  body.workspace-home-mode .workspace-hero-logo {
    display: none;
  }

  body.workspace-home-mode .workspace-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
  }

  body.workspace-home-mode .workspace-stat-card {
    min-height: 58px;
    padding: 9px;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 8px;
    border-radius: 14px;
  }

  body.workspace-home-mode .workspace-stat-card::before {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background-size: 20px;
  }

  body.workspace-home-mode .workspace-stat-card span {
    font-size: 11px;
  }

  body.workspace-home-mode .workspace-stat-card strong {
    font-size: 18px;
  }

  body.workspace-home-mode .workspace-layout-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.workspace-home-mode .workspace-sidebar {
    display: none;
  }

  body.workspace-home-mode .workspace-section {
    padding: 14px;
    border-radius: 16px;
  }

  body.workspace-home-mode .workspace-section-head {
    align-items: flex-start;
  }

  body.workspace-home-mode .workspace-section-head h2 {
    font-size: 18px;
  }

  body.workspace-home-mode .workspace-section-head span {
    font-size: 12px;
  }

  body.workspace-home-mode .workspace-section:not(.private) .module-card-grid,
  body.workspace-home-mode .private-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    grid-auto-rows: auto;
  }

  body.workspace-home-mode .yookerd-module-card,
  body.workspace-home-mode .yookerd-module-card.has-illustration {
    height: auto;
    min-height: 118px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon copy arrow"
      "note note note";
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 12px;
    border-radius: 14px;
  }

  body.workspace-home-mode .workspace-section:not(.private) .yookerd-module-card,
  body.workspace-home-mode .workspace-section.private .yookerd-module-card,
  body.workspace-home-mode .workspace-section:not(.private) .yookerd-module-card.has-illustration,
  body.workspace-home-mode .workspace-section.private .yookerd-module-card.has-illustration {
    height: auto;
    min-height: 108px;
    grid-template-areas:
      "icon copy arrow"
      "note note note";
    grid-template-rows: auto auto;
  }

  body.workspace-home-mode .module-card-arrow {
    display: block;
    align-self: center;
    font-size: 20px;
  }

  body.workspace-home-mode .module-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  body.workspace-home-mode .module-card-copy strong {
    font-size: 16px;
  }

  body.workspace-home-mode .module-card-copy small,
  body.workspace-home-mode .module-card-note {
    font-size: 12px;
    line-height: 1.42;
  }

  body.workspace-home-mode .module-card-note {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.workspace-home-mode .module-card-status,
  body.workspace-home-mode .module-card-illustration {
    display: none;
  }

  body.workspace-home-mode .workspace-private-showcase {
    height: clamp(86px, 24vw, 112px);
    min-height: 86px;
    border-radius: 14px;
  }

  body.workspace-home-mode .workspace-private-showcase img {
    width: 100%;
    object-fit: cover;
    object-position: right 58%;
  }

  body.workspace-home-mode .workspace-private-empty {
    min-height: 190px;
  }
}

body.auth-mode {
  --auth-topbar-offset: 74px;
}

body.auth-mode .app-shell {
  padding-top: var(--auth-topbar-offset);
}

body.auth-mode .topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 90;
  min-height: var(--auth-topbar-offset);
  transform: none;
}

body.auth-mode .topbar.is-hidden {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

body.auth-mode .brand {
  max-width: min(100%, 540px);
}

body.auth-mode .brand span {
  max-width: min(70vw, 520px);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

body.auth-mode #authScreen.auth-screen {
  min-height: calc(100dvh - var(--auth-topbar-offset));
}

.workspace-loading-panel {
  display: none;
}

body.auth-mode .bottom-tab-bar,
body.auth-entering-mode .bottom-tab-bar {
  display: none !important;
}

/* Login handoff loading animation. */
body.auth-entering-mode {
  overflow: hidden;
  background: #eef6ff;
}

body.auth-entering-mode .app-shell {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
}

body.auth-entering-mode .app-shell::before {
  content: "";
  position: fixed;
  inset: var(--auth-topbar-offset) 0 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.78) 48%, transparent 62%),
    linear-gradient(rgba(37, 99, 235, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.068) 1px, transparent 1px),
    linear-gradient(180deg, #edf6ff 0%, #f7fbff 54%, #eef5ff 100%);
  background-position: -160% 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  background-size: 280% 100%, 40px 40px, 40px 40px, auto;
  animation: auth-entering-sweep 2.6s ease-in-out infinite;
}

body.auth-entering-mode .workspace-loading-panel {
  display: grid;
  position: fixed;
  inset: var(--auth-topbar-offset) 0 0;
  z-index: 3;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.workspace-loading-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(390px, calc(100vw - 42px));
  min-height: clamp(318px, 46dvh, 390px);
  padding: 34px 24px 30px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 24%, rgba(96, 165, 250, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(240, 248, 255, 0.76));
  box-shadow:
    0 24px 58px rgba(37, 99, 235, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
}

.workspace-loading-cube-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  perspective: 720px;
}

.workspace-loading-cube-scene::after {
  content: "";
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 92px;
  height: 18px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.18);
  filter: blur(12px);
  transform: translateX(-50%);
}

.workspace-loading-cube {
  --loading-cube-size: 78px;
  position: relative;
  z-index: 1;
  width: var(--loading-cube-size);
  height: var(--loading-cube-size);
  transform-style: preserve-3d;
  animation: auth-loading-cube-spin 3.4s linear infinite;
}

.cube-face {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(147, 197, 253, 0.34)),
    linear-gradient(135deg, rgba(37, 99, 235, 0.86), rgba(56, 189, 248, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -12px 24px rgba(30, 64, 175, 0.14);
}

.cube-front {
  background:
    url("/assets/yookerd/brand/yookers-workspace-logo.webp") center / 66% no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(191, 219, 254, 0.62));
  transform: translateZ(calc(var(--loading-cube-size) / 2));
}

.cube-back {
  transform: rotateY(180deg) translateZ(calc(var(--loading-cube-size) / 2));
}

.cube-right {
  transform: rotateY(90deg) translateZ(calc(var(--loading-cube-size) / 2));
}

.cube-left {
  transform: rotateY(-90deg) translateZ(calc(var(--loading-cube-size) / 2));
}

.cube-top {
  transform: rotateX(90deg) translateZ(calc(var(--loading-cube-size) / 2));
}

.cube-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--loading-cube-size) / 2));
}

.workspace-loading-copy {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.workspace-loading-copy strong {
  color: #0b1f3a;
  font-size: 22px;
  line-height: 1.2;
}

.workspace-loading-copy span {
  max-width: 28em;
  color: #5b6b82;
  font-size: 14px;
  line-height: 1.55;
}

.workspace-loading-bar {
  position: relative;
  width: min(270px, 100%);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(56, 189, 248, 0.22));
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.workspace-loading-bar span {
  position: absolute;
  inset: 0 auto 0 -48%;
  width: 48%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.84), rgba(56, 189, 248, 0.9), transparent);
  animation: auth-loading-bar 1.35s ease-in-out infinite;
}

body.auth-entering-mode .brand-mark {
  transform-origin: 50% 50%;
  animation: auth-entering-logo 1.8s ease-in-out infinite;
}

body.auth-entering-mode .brand span::after {
  content: "...";
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: auth-entering-dots 1.2s steps(4, end) infinite;
}

@keyframes auth-entering-sweep {
  0% {
    background-position: -160% 0, 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 160% 0, 0 0, 0 0, 0 0;
  }
}

@keyframes auth-loading-cube-spin {
  0% {
    transform: rotateX(-18deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(-18deg) rotateY(360deg);
  }
}

@keyframes auth-loading-bar {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(310%);
  }
}

@keyframes auth-entering-logo {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
    transform: translateY(0) scale(1);
  }

  50% {
    filter: drop-shadow(0 8px 14px rgba(37, 99, 235, 0.22));
    transform: translateY(-1px) scale(1.04);
  }
}

@keyframes auth-entering-dots {
  0% {
    width: 0;
  }

  100% {
    width: 1.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-entering-mode .app-shell::before,
  .workspace-loading-cube,
  .workspace-loading-bar span,
  body.auth-entering-mode .brand-mark,
  body.auth-entering-mode .brand span::after {
    animation: none;
  }

  body.auth-entering-mode .brand span::after {
    width: 1.2em;
  }
}

@media (max-width: 620px) {
  body.auth-mode {
    --auth-topbar-offset: 68px;
  }

  body.auth-mode .topbar {
    right: auto;
    left: 50%;
    width: min(calc(100% - 28px), 430px);
    min-height: 62px;
    padding: 8px 12px;
    border: 1px solid rgba(52, 127, 224, 0.18);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    transform: translateX(-50%);
  }

  body.auth-mode .topbar.is-hidden {
    transform: translateX(-50%);
  }

  body.auth-mode .brand {
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  body.auth-mode .brand-mark {
    width: 34px;
    height: 34px;
  }

  body.auth-mode .brand strong {
    font-size: 15px;
  }

  body.auth-mode .brand span {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.35;
  }

  body.auth-mode #authScreen.auth-screen {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    justify-items: stretch;
    width: min(100%, 430px);
    height: calc(100dvh - var(--auth-topbar-offset));
    min-height: calc(100dvh - var(--auth-topbar-offset));
    gap: 8px;
    margin: 0 auto;
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom));
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(239, 247, 255, 0) 58%, rgba(239, 247, 255, 0.82) 100%),
      url("/assets/yookerd/illustrations/workspace-private-showcase.webp") center bottom / auto clamp(126px, 25dvh, 220px) no-repeat,
      radial-gradient(circle at 12% 0%, rgba(72, 166, 255, 0.22), transparent 28%),
      radial-gradient(circle at 86% 10%, rgba(42, 90, 210, 0.15), transparent 34%),
      linear-gradient(135deg, rgba(236, 247, 255, 0.94), rgba(246, 250, 255, 0.88));
  }

  body.auth-mode.auth-keyboard-mode #authScreen.auth-screen {
    height: auto;
    min-height: calc(100dvh - var(--auth-topbar-offset));
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(
      calc(28px + env(safe-area-inset-bottom)),
      calc(var(--auth-keyboard-bottom, 0px) + 28px + env(safe-area-inset-bottom))
    );
    scroll-padding: 18px 0 calc(var(--auth-keyboard-bottom, 0px) + 110px);
  }

  body.auth-mode.auth-keyboard-mode #authScreen .auth-hero {
    display: none;
  }

  body.auth-mode.auth-keyboard-mode #authScreen .auth-box {
    margin-top: 8px;
  }

  body.auth-mode #authScreen .auth-hero {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    align-items: stretch;
    gap: 8px;
    min-height: 104px;
  }

  body.auth-mode #authScreen .hero-copy {
    gap: 7px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(52, 127, 224, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 32px rgba(36, 95, 156, 0.12);
    backdrop-filter: blur(14px);
  }

  body.auth-mode #authScreen .hero-copy .eyebrow {
    font-size: 10px;
  }

  body.auth-mode #authScreen .hero-copy h1 {
    max-width: none;
    font-size: 23px;
    line-height: 1.08;
  }

  body.auth-mode #authScreen .hero-tags {
    gap: 5px;
  }

  body.auth-mode #authScreen .hero-tags span {
    min-height: 25px;
    padding: 5px 7px;
    font-size: 10px;
  }

  body.auth-mode #authScreen .dashboard-preview {
    width: 116px;
    min-width: 0;
    height: 104px;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(36, 95, 156, 0.14);
  }

  body.auth-mode #authScreen .preview-top {
    height: 22px;
    gap: 4px;
    padding: 0 8px;
  }

  body.auth-mode #authScreen .preview-top span {
    width: 6px;
    height: 6px;
  }

  body.auth-mode #authScreen .preview-grid {
    grid-template-columns: 28px repeat(4, minmax(0, 1fr));
  }

  body.auth-mode #authScreen .preview-grid span {
    min-height: 39px;
  }

  body.auth-mode #authScreen .preview-grid .device-name {
    font-size: 12px;
  }

  body.auth-mode #authScreen .auth-box {
    order: 2;
    width: 100%;
    padding: 16px;
    border-color: rgba(52, 127, 224, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 42px rgba(36, 95, 156, 0.16);
  }

  body.auth-mode #authScreen .auth-box::before {
    height: 4px;
    margin: -16px -16px 14px;
  }

  body.auth-mode #authScreen .auth-title {
    gap: 10px;
    margin-bottom: 14px;
  }

  body.auth-mode #authScreen .auth-title-logo {
    width: 38px;
    height: 38px;
  }

  body.auth-mode #authScreen .auth-title span {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body.auth-mode #authScreen .auth-title h2 {
    font-size: 24px;
  }

  body.auth-mode #authScreen .segmented {
    margin-bottom: 14px;
  }

  body.auth-mode #authScreen .auth-form {
    gap: 12px;
  }

  body.auth-mode #authScreen label {
    gap: 6px;
  }

  body.auth-mode #authScreen input {
    min-height: 46px;
    padding: 10px 12px;
  }

  body.auth-mode #authScreen .primary-button {
    min-height: 46px;
  }
}

/* Friends and DM refresh: light SaaS three-column chat layout. */
#friendsView {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.08), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #f6f8fc 100%);
}

@media (min-width: 1025px) {
  body.friends-mode:not(.mobile-app-mode) {
    overflow: hidden;
  }

  body.friends-mode:not(.mobile-app-mode) .app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.friends-mode:not(.mobile-app-mode) .app-main {
    flex: 1 1 auto;
    width: min(1480px, 100%);
    min-height: 0;
    padding: 0 18px;
    overflow: hidden;
  }

  body.friends-mode:not(.mobile-app-mode) #friendsView {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

#friendsView .friends-module-host {
  width: min(100%, 1400px);
  margin: 0 auto;
}

#friendsView .friends-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: calc(100dvh - 48px);
}

@media (min-width: 1025px) {
  body.friends-mode:not(.mobile-app-mode) #friendsView .friends-module-host,
  body.friends-mode:not(.mobile-app-mode) #friendsView .friends-shell {
    height: 100%;
    min-height: 0;
  }
}

#friendsView .friends-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid #e5ecf6;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

#friendsView .friends-head-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}

#friendsView .friends-head-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
}

#friendsView .friends-head-icon svg,
#friendsView .friend-icon-button svg,
#friendsView .friend-section-title svg,
#friendsView .friend-manage-icon svg,
#friendsView .friend-action-button svg,
#friendsView .friend-composer-icon svg,
#friendsView .friend-link-button svg,
#friendsView .friend-profile-placeholder svg,
#friendsView .friend-refresh-button svg {
  width: 18px;
  height: 18px;
}

#friendsView .friends-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.15;
}

#friendsView .friends-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.3;
}

#friendsView .friend-refresh-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-color: rgba(37, 99, 235, 0.35);
  border-radius: 9px;
  background: #fff;
  color: #2563eb;
  font-weight: 800;
}

#friendsView .friends-grid {
  display: grid;
  grid-template-columns: minmax(280px, 328px) minmax(420px, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

#friendsView .friends-grid.is-detail-open {
  grid-template-columns: minmax(280px, 328px) minmax(420px, 1fr) minmax(280px, 312px);
}

#friendsView .friends-side,
#friendsView .friend-chat-window,
#friendsView .friend-right-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  border: 1px solid #e5ecf6;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

#friendsView .friend-avatar {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  border-radius: 999px;
}

#friendsView .friend-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#friendsView .friends-side {
  display: flex;
  flex-direction: column;
}

#friendsView .friend-self-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid #e5ecf6;
  background: linear-gradient(135deg, #fff, #f8fbff);
}

#friendsView .friend-self-avatar.friend-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  flex: 0 0 52px;
  flex-basis: 52px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14);
}

#friendsView .friend-self-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#friendsView .friend-self-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

#friendsView .friend-self-top strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#friendsView .friend-self-top .friend-presence-wrap {
  justify-self: end;
}

#friendsView .friend-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  line-height: 1.3;
}

#friendsView .friend-presence-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  white-space: nowrap;
}

#friendsView .friend-presence-button:hover {
  color: #2563eb;
}

#friendsView .friend-presence-wrap {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

#friendsView .friend-presence-caret {
  display: grid;
  place-items: center;
  color: #94a3b8;
}

#friendsView .friend-presence-caret svg {
  width: 14px;
  height: 14px;
}

#friendsView .friend-presence-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: grid;
  gap: 6px;
  width: 220px;
  border: 1px solid #e5ecf6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
  padding: 8px;
}

#friendsView .friend-presence-menu button {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  padding: 9px 10px;
}

#friendsView .friend-presence-menu button:hover,
#friendsView .friend-presence-menu button.is-active {
  background: #eff6ff;
  color: #1d4ed8;
}

#friendsView .friend-presence-menu strong {
  font-size: 13px;
  font-weight: 850;
}

#friendsView .friend-presence-menu small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

#friendsView .friend-presence i,
#friendsView .friend-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #22c55e;
}

#friendsView .friend-presence.is-offline i,
#friendsView .friend-presence.is-invisible i,
#friendsView .friend-dot.is-offline {
  background: #94a3b8;
}

#friendsView .friend-presence.is-ai-online i,
#friendsView .friend-dot.is-ai-online {
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

#friendsView .friend-dot {
  display: inline-block;
  margin-right: 6px;
  background: #cbd5e1;
  vertical-align: 1px;
}

#friendsView .friend-dot.is-online {
  background: #22c55e;
}

#friendsView .friend-icon-button,
#friendsView .friend-composer-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  color: #2563eb;
  cursor: pointer;
}

#friendsView .friend-icon-button:hover,
#friendsView .friend-composer-icon:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.28);
  background: #eff6ff;
}

#friendsView .friend-icon-button.is-active {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.2);
}

#friendsView .friend-icon-button:disabled,
#friendsView .friend-composer-icon:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  background: #f8fafc;
}

#friendsView .friend-signature-display {
  min-height: 18px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

#friendsView .friend-signature-editor {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}

#friendsView .friend-signature-editor input {
  height: 32px;
  border-color: rgba(37, 99, 235, 0.24);
}

#friendsView .friend-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 10px;
  margin: 0;
  padding: 14px 16px 16px;
  border-bottom: 0;
  background: #fff;
}

#friendsView .friend-search-area {
  position: relative;
  z-index: 20;
  background: #fff;
}

#friendsView .friend-search-input {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  padding: 0 12px;
}

#friendsView .friend-search-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% - 8px);
  right: 16px;
  left: 16px;
  display: grid;
  gap: 8px;
  max-height: min(360px, calc(100dvh - 270px));
  overflow: auto;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  padding: 8px;
}

#friendsView .friend-search-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  border-bottom: 1px solid #eef2f7;
  padding: 0 4px 6px;
}

#friendsView .friend-search-popover-head strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

#friendsView .friend-search-popover-head span {
  min-width: 0;
  overflow: hidden;
  color: #94a3b8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#friendsView .friend-search-popover-list {
  display: grid;
  gap: 6px;
}

#friendsView .friend-search-popover .friend-list-item {
  border-radius: 10px;
  box-shadow: none;
  padding: 9px;
}

#friendsView .friend-search-empty {
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  padding: 14px;
  text-align: center;
}

#friendsView .friend-search-input input {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  outline: none;
  padding: 0;
}

#friendsView .friend-search-form .primary-button {
  height: 40px;
  min-width: 0;
  border-radius: 8px;
  padding: 0 12px;
}

#friendsView .friends-sidebar-list {
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 0 14px 14px;
  background: #fff;
}

#friendsView .friend-sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 46px;
  border: 1px solid #e5ecf6;
  border-radius: 14px;
  background: #f8fbff;
  padding: 5px;
}

#friendsView .friend-sidebar-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

#friendsView .friend-sidebar-tabs button.is-active {
  background: #fff;
  color: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

#friendsView .friend-sidebar-tabs em,
#friendsView .friend-manage-item em {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 0 6px;
}

#friendsView .friend-sidebar-panel {
  min-height: 0;
}

#friendsView .friend-recent-panel,
#friendsView .friend-manage-panel {
  display: grid;
  gap: 8px;
}

#friendsView .friend-sidebar-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  border: 1px solid #e5ecf6;
  border-radius: 12px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px;
}

#friendsView .friend-sidebar-more svg {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}

#friendsView .friend-manage-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#friendsView .friend-manage-item {
  position: relative;
  display: grid;
  place-items: center;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid #e5ecf6;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  text-align: center;
  padding: 7px;
}

#friendsView .friend-manage-item:hover,
#friendsView .friend-manage-item.is-active,
#friendsView .friend-sidebar-more:hover {
  border-color: rgba(37, 99, 235, 0.22);
  background: #eff6ff;
}

#friendsView .friend-manage-item.is-active {
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: inset 0 -3px 0 #2563eb;
}

#friendsView .friend-manage-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #eff6ff;
  color: #2563eb;
}

#friendsView .friend-manage-item strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#friendsView .friend-manage-item em {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  padding: 0 5px;
}

#friendsView .friend-manage-arrow {
  display: none;
}

#friendsView .friend-manage-detail {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  border: 1px solid #e5ecf6;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

#friendsView .friend-manage-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#friendsView .friend-manage-detail-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
}

#friendsView .friend-manage-detail-head span {
  color: #94a3b8;
  font-size: 12px;
}

#friendsView .friend-manage-detail-list {
  display: grid;
  gap: 8px;
}

#friendsView .friend-sidebar-section {
  margin-bottom: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

#friendsView .friend-sidebar-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
}

#friendsView .friend-sidebar-section summary::-webkit-details-marker {
  display: none;
}

#friendsView .friend-section-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

#friendsView .friend-section-title svg {
  color: #2563eb;
}

#friendsView .friend-section-title strong {
  font-size: 13px;
}

#friendsView .friend-section-title em {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 0 6px;
}

#friendsView .friend-section-chevron {
  display: grid;
  place-items: center;
  color: #64748b;
  transition: transform 0.16s ease;
}

#friendsView .friend-sidebar-section[open] .friend-section-chevron {
  transform: rotate(180deg);
}

#friendsView .friend-section-body {
  border-top: 1px solid #eef2f7;
}

#friendsView .friend-conversation,
#friendsView .friend-contact {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #e5ecf6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
}

#friendsView .friend-conversation:last-child,
#friendsView .friend-contact:last-child {
  margin-bottom: 0;
}

#friendsView .friend-conversation:hover,
#friendsView .friend-contact:hover {
  background: #eff6ff;
}

#friendsView .friend-conversation.is-active,
#friendsView .friend-contact.is-active {
  border-color: rgba(37, 99, 235, 0.28);
  background: linear-gradient(90deg, #eff6ff 0%, #fff 100%);
  box-shadow: inset 3px 0 0 #2563eb;
}

#friendsView .friend-conversation.is-notified:not(.is-active),
#friendsView .friends-mobile-thread.is-notified:not(.is-active) {
  border-color: rgba(37, 99, 235, 0.18);
  background: linear-gradient(90deg, #f8fbff 0%, #fff 100%);
}

#friendsView .friend-list-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

#friendsView .friend-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#friendsView .friend-list-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

#friendsView .friend-list-row strong,
#friendsView .friend-list-copy > small {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#friendsView .friend-list-row strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

#friendsView .friend-status-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  height: 18px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 0 6px;
}

#friendsView .friend-status-badge.is-offline {
  background: #f1f5f9;
  color: #64748b;
}

#friendsView .friend-status-badge.is-ai-online {
  background: #dbeafe;
  color: #1d4ed8;
}

#friendsView .friend-list-row small,
#friendsView .friend-list-copy > small {
  color: #64748b;
  font-size: 12px;
}

#friendsView .friend-list-copy b {
  flex: 0 0 auto;
  margin-right: 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 6px;
}

#friendsView .friend-conversation em,
#friendsView .friend-contact em,
#friendsView .friend-unread {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  padding: 0 6px;
}

#friendsView .friend-sidebar-empty {
  margin: 0;
  border: 1px dashed #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
}

#friendsView .friend-list-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e5ecf6;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

#friendsView .friend-list-item.is-active {
  border-color: rgba(37, 99, 235, 0.28);
  background: #eff6ff;
}

#friendsView .friend-list-item > div:not(.people-row-actions) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#friendsView .friend-list-item strong,
#friendsView .friend-list-item span,
#friendsView .friend-list-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#friendsView .friend-list-item strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

#friendsView .friend-list-item span,
#friendsView .friend-list-item small {
  color: #64748b;
  font-size: 12px;
}

#friendsView .friend-list-item .people-row-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#friendsView .friend-chat-window {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  background: #fff;
}

#friendsView .friend-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid #e5ecf6;
  background: #fff;
}

#friendsView .friend-chat-title {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 42%;
  min-width: 0;
  gap: 10px;
}

#friendsView .friend-chat-title > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#friendsView .friend-chat-avatar.friend-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex-basis: 42px;
}

#friendsView .friend-chat-title strong {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#friendsView .friend-chat-name-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

#friendsView .friend-chat-name-row strong {
  flex: 0 1 auto;
}

#friendsView .friend-chat-title em {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: fit-content;
  min-height: 22px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 0 8px;
}

#friendsView .friend-chat-signature {
  flex: 1 1 auto;
  min-width: 80px;
  margin: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#friendsView .friend-chat-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#friendsView .friend-chat-search-box {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: clamp(240px, 32vw, 360px);
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  padding: 7px;
  transform: translateY(-50%);
}

#friendsView .friend-chat-search-box label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 34px;
  border: 1px solid #e5ecf6;
  border-radius: 9px;
  background: #f8fafc;
  color: #64748b;
  padding: 0 10px;
}

#friendsView .friend-chat-search-box label svg {
  width: 16px;
  height: 16px;
}

#friendsView .friend-chat-search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #0f172a;
  font: inherit;
}

#friendsView .friend-chat-search-box .mini-button {
  height: 34px;
  padding: 0 12px;
}

#friendsView .friend-chat-search-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e5ecf6;
  border-radius: 9px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

#friendsView .friend-chat-search-close:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: #eff6ff;
  color: #2563eb;
}

#friendsView .friend-message-list {
  min-height: 0;
  overflow: auto;
  padding: 18px 24px 22px;
  background:
    linear-gradient(90deg, rgba(226, 232, 240, 0.26) 1px, transparent 1px),
    linear-gradient(rgba(226, 232, 240, 0.24) 1px, transparent 1px),
    #fbfdff;
  background-size: 34px 34px;
}

#friendsView .friend-message-date {
  display: table;
  margin: 4px auto 18px;
  border-radius: 999px;
  background: #eef4ff;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
}

#friendsView .friend-message-list.is-empty {
  display: grid;
  place-items: center;
}

#friendsView .friend-chat-empty-state {
  display: grid;
  justify-items: center;
  max-width: 420px;
  color: #64748b;
  text-align: center;
}

#friendsView .friend-empty-illustration {
  position: relative;
  width: 190px;
  height: 142px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0));
}

#friendsView .friend-empty-illustration span,
#friendsView .friend-empty-illustration b {
  position: absolute;
  display: block;
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.18);
}

#friendsView .friend-empty-illustration span {
  top: 34px;
  left: 38px;
  width: 92px;
  height: 62px;
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
}

#friendsView .friend-empty-illustration span::before {
  content: "...";
  position: absolute;
  top: 11px;
  left: 24px;
  color: #fff;
  font-size: 32px;
  letter-spacing: 4px;
}

#friendsView .friend-empty-illustration b {
  top: 72px;
  right: 38px;
  width: 76px;
  height: 48px;
  background: #fff;
}

#friendsView .friend-empty-illustration b::before {
  content: "...";
  position: absolute;
  top: 3px;
  left: 18px;
  color: #93c5fd;
  font-size: 28px;
  letter-spacing: 3px;
}

#friendsView .friend-chat-empty-state strong {
  color: #0f172a;
  font-size: 20px;
}

#friendsView .friend-chat-empty-state p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

#friendsView .friend-message {
  position: relative;
  align-items: center;
  gap: 8px;
}

#friendsView .friend-message > div.friend-message-bubble {
  border: 1px solid #edf2f7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

#friendsView .friend-message.is-mine > div.friend-message-bubble {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

#friendsView .friend-message.is-search-match > div.friend-message-bubble {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 8px 20px rgba(15, 23, 42, 0.08);
}

#friendsView .friend-message mark {
  border-radius: 5px;
  background: #fef3c7;
  color: inherit;
  padding: 0 2px;
}

#friendsView .friend-message-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#friendsView .friend-message:hover .friend-message-actions,
#friendsView .friend-message:focus-within .friend-message-actions {
  opacity: 1;
  pointer-events: auto;
}

#friendsView .friend-message.is-mine .friend-message-actions {
  order: -1;
}

#friendsView .friend-message-actions .mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-color: #e5ecf6;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-size: 12px;
  padding: 0 9px;
}

#friendsView .friend-message-more {
  position: relative;
}

#friendsView .friend-message-more summary {
  list-style: none;
}

#friendsView .friend-message-more summary::-webkit-details-marker {
  display: none;
}

#friendsView .friend-message-more > button {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

#friendsView .friend-message-form {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
  position: relative;
  min-height: 70px;
  padding: 12px 14px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

#friendsView .friend-emoji-picker {
  position: absolute;
  left: 14px;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: none;
  width: min(360px, calc(100% - 28px));
  grid-template-columns: repeat(8, minmax(34px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(12px);
}

#friendsView .friend-message-form.is-emoji-open .friend-emoji-picker {
  display: grid;
}

#friendsView .friend-emoji-picker button {
  display: inline-grid;
  place-items: center;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

#friendsView .friend-emoji-picker button:hover {
  background: #eff6ff;
}

#friendsView .friend-message-form textarea {
  min-height: 44px;
  max-height: 96px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  resize: vertical;
  padding: 12px 14px;
}

#friendsView .friend-message-form textarea:disabled {
  color: #94a3b8;
  background: #f8fafc;
}

#friendsView .friend-message-form .primary-button {
  height: 44px;
  border-radius: 10px;
}

#friendsView .friend-message-form .primary-button:disabled {
  border-color: #e2e8f0;
  background: #e5e7eb;
  color: #94a3b8;
  box-shadow: none;
}

#friendsView .friend-right-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
  overflow: auto;
}

#friendsView .friend-detail-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#friendsView .friend-profile-card,
#friendsView .friend-info-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e5ecf6;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}

#friendsView .friend-profile-card {
  justify-items: center;
  text-align: center;
  padding-block: 22px;
}

#friendsView .friend-profile-avatar.friend-avatar,
#friendsView .friend-profile-placeholder {
  width: 160px;
  height: 160px;
  min-width: 160px;
  flex: 0 0 160px;
  border-radius: 999px;
}

#friendsView .friend-profile-avatar.friend-avatar.is-custom {
  border-radius: 18px;
  background: #f8fafc;
}

#friendsView .friend-profile-avatar.friend-avatar.is-custom img {
  object-fit: contain;
}

#friendsView .friend-profile-placeholder {
  display: grid;
  place-items: center;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

#friendsView .friend-profile-card strong {
  min-width: 0;
  max-width: 100%;
  color: #0f172a;
  font-size: 16px;
}

#friendsView .friend-profile-summary {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

#friendsView .friend-profile-name-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

#friendsView .friend-profile-name-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#friendsView .friend-profile-card p,
#friendsView .friend-profile-card small,
#friendsView .friend-info-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

#friendsView .friend-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#friendsView .friend-tag-list span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

#friendsView .friend-profile-signature {
  width: 100%;
}

#friendsView .friend-info-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #0f172a;
}

#friendsView .friend-meta-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

#friendsView .friend-meta-card dl > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

#friendsView .friend-meta-card dt,
#friendsView .friend-meta-card dd {
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

#friendsView .friend-meta-card dt {
  color: #64748b;
}

#friendsView .friend-meta-card dd {
  overflow-wrap: anywhere;
  color: #334155;
}

#friendsView .friend-info-card-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

#friendsView .friend-info-card-head svg {
  width: 18px;
  height: 18px;
  color: #2563eb;
}

#friendsView .friend-link-button {
  border: 0;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0;
}

#friendsView .friend-link-button:disabled {
  cursor: not-allowed;
  color: #94a3b8;
}

#friendsView .friend-action-card {
  gap: 10px;
}

#friendsView .friend-action-card > strong {
  color: #0f172a;
  font-size: 14px;
}

#friendsView .friend-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

#friendsView .friend-action-button.primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
}

#friendsView .friend-action-button.danger {
  border-color: rgba(239, 68, 68, 0.35);
  color: #dc2626;
}

#friendsView .friend-action-button:hover:not(:disabled) {
  background: #eff6ff;
}

#friendsView .friend-action-button.primary:hover:not(:disabled) {
  background: #1d4ed8;
}

#friendsView .friend-action-button.danger:hover:not(:disabled) {
  background: #fef2f2;
}

#friendsView .friend-action-button:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  background: #f8fafc;
}

#friendsView .friend-treehole-panel {
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

#friendsView .friends-mobile-shell {
  display: none;
}

@media (max-width: 1024px) {
  #friendsView .friends-grid {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  #friendsView .friend-right-panel {
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 760px) {
  #friendsView .friends-module-host {
    padding: 0;
  }

  #friendsView .friends-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #friendsView .friends-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  #friendsView .friends-side,
  #friendsView .friend-chat-window,
  #friendsView .friend-right-panel {
    max-height: none;
  }

  #friendsView .friend-message-list {
    min-height: 360px;
  }
}

@media (max-width: 760px) {
  body.mobile-app-mode.friends-mobile-mode .mobile-module-header {
    display: none !important;
  }

  body.friends-mobile-chat-open .bottom-tab-bar:not([hidden]),
  body.friends-mobile-detail-open .bottom-tab-bar:not([hidden]),
  body.friends-mobile-contacts-open .bottom-tab-bar:not([hidden]) {
    display: none !important;
  }

  body.friends-mobile-chat-open {
    overflow: hidden;
  }

  body.friends-mobile-detail-open {
    overflow: hidden;
  }

  body.private-module-mode #friendsView,
  body.mobile-app-mode.friends-mobile-mode #friendsView {
    min-height: 100dvh;
    padding: 0 !important;
    background: #fff;
  }

  body.mobile-app-mode.friends-mobile-mode #friendsView .friends-module-host {
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    border-radius: 0;
  }

  #friendsView .friends-shell {
    display: block;
    min-height: 100dvh;
  }

  #friendsView .friends-head,
  #friendsView .friends-grid {
    display: none;
  }

  #friendsView .friends-mobile-shell {
    display: block;
    min-height: 100dvh;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    color: #111827;
    background: #fff;
  }

  body.friends-mobile-contacts-open #friendsView .friends-mobile-shell {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  #friendsView .friends-mobile-page {
    min-height: 100dvh;
    background: #fff;
  }

  #friendsView .friends-mobile-head {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 74px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid #eef2f7;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
  }

  #friendsView .friends-mobile-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
  }

  #friendsView .friends-mobile-title h2 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    line-height: 1.1;
  }

  #friendsView .friends-mobile-title p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.2;
  }

  #friendsView .friends-mobile-self {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
  }

  #friendsView .friends-mobile-self-main {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  #friendsView .friends-mobile-self-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  #friendsView .friends-mobile-self-top strong {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-self-top .friend-presence-wrap {
    flex: 0 0 auto;
  }

  #friendsView .friends-mobile-signature {
    overflow: hidden;
    margin: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
  }

  #friendsView .friends-mobile-signature.is-empty {
    color: #94a3b8;
  }

  #friendsView .friends-mobile-signature-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
    margin-top: 1px;
  }

  #friendsView .friends-mobile-signature-editor input {
    min-width: 0;
    height: 30px;
    border: 1px solid rgba(37, 99, 235, 0.24);
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 12px;
    padding: 0 8px;
  }

  #friendsView .friends-mobile-signature-editor .mini-button {
    min-height: 30px;
    border-radius: 8px;
    font-size: 12px;
    padding: 0 8px;
  }

  #friendsView .friends-mobile-self .friend-presence-menu {
    position: fixed;
    top: calc(74px + env(safe-area-inset-top));
    right: 12px;
    left: auto;
    width: min(190px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    gap: 4px;
    border-radius: 12px;
    padding: 6px;
  }

  #friendsView .friends-mobile-self .friend-presence-menu button {
    gap: 2px;
    border-radius: 8px;
    padding: 7px 8px;
  }

  #friendsView .friends-mobile-self .friend-presence-menu strong {
    font-size: 12px;
  }

  #friendsView .friends-mobile-self .friend-presence-menu small {
    font-size: 11px;
    line-height: 1.25;
  }

  #friendsView .friends-mobile-head-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
  }

  #friendsView .friends-mobile-me-avatar.friend-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-basis: 44px;
  }

  #friendsView .friends-mobile-row-avatar.friend-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    flex-basis: 52px;
  }

  #friendsView .friends-mobile-feed,
  #friendsView .friends-mobile-contact-list {
    padding: 8px 0 16px;
  }

  #friendsView .friends-mobile-thread {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 78px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    color: inherit;
    text-align: left;
    padding: 10px 16px;
  }

  #friendsView .friends-mobile-thread.is-active,
  #friendsView .friends-mobile-thread:active {
    background: #eff6ff;
  }

  #friendsView .friends-mobile-thread-copy {
    display: grid;
    min-width: 0;
    gap: 6px;
  }

  #friendsView .friends-mobile-thread-copy > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  #friendsView .friends-mobile-thread-copy strong,
  #friendsView .friends-mobile-contact-main strong {
    overflow: hidden;
    color: #111827;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-thread-copy time,
  #friendsView .friends-mobile-thread-copy small,
  #friendsView .friends-mobile-contact-main small {
    overflow: hidden;
    color: #8a94a6;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-thread em {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    padding: 0 6px;
  }

  #friendsView .friends-mobile-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 28px 16px;
    border: 1px dashed #dbe4f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
    padding: 28px 18px;
  }

  #friendsView .friends-mobile-empty strong {
    color: #111827;
    font-size: 16px;
  }

  #friendsView .friends-mobile-empty p {
    margin: 0;
    font-size: 13px;
  }

  #friendsView .friends-mobile-search {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 12px 16px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    padding: 8px 8px 8px 12px;
  }

  #friendsView .friends-mobile-search svg {
    width: 20px;
    height: 20px;
  }

  #friendsView .friends-mobile-search input {
    min-width: 0;
    height: 36px;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    outline: none;
  }

  #friendsView .friends-mobile-card {
    margin: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    padding: 12px;
  }

  #friendsView .friends-mobile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }

  #friendsView .friends-mobile-card h3,
  #friendsView .friends-mobile-card strong {
    margin: 0;
    color: #111827;
    font-size: 15px;
  }

  #friendsView .friends-mobile-card p,
  #friendsView .friends-mobile-card small {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
  }

  #friendsView .friends-mobile-request {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #f1f5f9;
  }

  #friendsView .friends-mobile-request:first-of-type {
    border-top: 0;
  }

  #friendsView .friends-mobile-request .friends-mobile-row-avatar.friend-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-basis: 44px;
  }

  #friendsView .friends-mobile-request span {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  #friendsView .friends-mobile-request span strong,
  #friendsView .friends-mobile-request span small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-request > div {
    display: inline-flex;
    gap: 6px;
  }

  #friendsView .friends-mobile-search-results .friend-list-item {
    border: 0;
    border-top: 1px solid #f1f5f9;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0;
  }

  #friendsView .friends-mobile-contact-group h3 {
    position: sticky;
    top: calc(74px + env(safe-area-inset-top));
    z-index: 4;
    margin: 0;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    padding: 7px 16px;
  }

  #friendsView .friends-mobile-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 76px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    padding: 0 16px;
  }

  #friendsView .friends-mobile-contact-main {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    width: 100%;
    padding: 10px 0;
  }

  #friendsView .friends-mobile-contact-main span {
    display: grid;
    min-width: 0;
    gap: 6px;
  }

  #friendsView .friends-mobile-thread-copy .friends-mobile-name-status,
  #friendsView .friends-mobile-contact-main .friends-mobile-name-status {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }

  #friendsView .friends-mobile-name-status strong {
    flex: 0 1 auto;
    min-width: 0;
  }

  #friendsView .friends-mobile-name-status .friend-status-badge {
    flex: 0 0 auto;
  }

  #friendsView .friends-mobile-thread-copy strong,
  #friendsView .friends-mobile-contact-main strong,
  #friendsView .friends-mobile-chat-head strong {
    min-width: 0;
  }

  #friendsView .friends-mobile-contact-status {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 6px;
    min-width: 50px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    padding-left: 8px;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-contact-status i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
  }

  #friendsView .friends-mobile-contact-status.is-online {
    color: #15803d;
  }

  #friendsView .friends-mobile-contact-status.is-online i {
    background: #22c55e;
  }

  #friendsView .friends-mobile-chat {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #f5f6f8;
    color: #111827;
  }

  #friendsView .friends-mobile-chat-head {
    display: grid;
    grid-template-columns: 38px 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  }

  #friendsView .friends-mobile-chat-head .friends-mobile-row-avatar.friend-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-basis: 44px;
  }

  #friendsView .friends-mobile-chat-title {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  #friendsView .friends-mobile-chat-name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
  }

  #friendsView .friends-mobile-chat-head strong {
    flex: 0 1 auto;
    overflow: hidden;
    color: #111827;
    font-size: 15px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-chat-name-row > span {
    flex: 0 0 auto;
    color: #22c55e;
    font-size: 12px;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-chat-title p {
    overflow: hidden;
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-chat-tools {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 6px;
  }

  #friendsView .friends-mobile-chat .friend-icon-button {
    width: 34px;
    height: 34px;
    border-color: #e5e7eb;
    border-radius: 8px;
    background: #fff;
  }

  #friendsView .friends-mobile-chat .friend-icon-button.is-active {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.2);
  }

  #friendsView .friends-mobile-chat-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 34px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    padding: 8px 12px;
  }

  #friendsView .friends-mobile-chat-search label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    padding: 0 10px;
  }

  #friendsView .friends-mobile-chat-search svg {
    width: 18px;
    height: 18px;
  }

  #friendsView .friends-mobile-chat-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #111827;
    font: inherit;
  }

  #friendsView .friends-mobile-chat-search .mini-button,
  #friendsView .friends-mobile-chat-search .friend-chat-search-close {
    height: 34px;
  }

  #friendsView .friends-mobile-detail-page {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #f5f6f8;
    color: #111827;
  }

  #friendsView .friends-mobile-detail-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 60px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  }

  #friendsView .friends-mobile-detail-head > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  #friendsView .friends-mobile-detail-head strong,
  #friendsView .friends-mobile-detail-head span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #friendsView .friends-mobile-detail-head strong {
    color: #111827;
    font-size: 17px;
    line-height: 1.2;
  }

  #friendsView .friends-mobile-detail-head span {
    color: #64748b;
    font-size: 12px;
  }

  #friendsView .friends-mobile-detail-body {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom));
  }

  #friendsView .friends-mobile-detail-body .friend-detail-panel {
    gap: 12px;
  }

  #friendsView .friends-mobile-detail-body .friend-profile-card,
  #friendsView .friends-mobile-detail-body .friend-info-card {
    border-radius: 8px;
  }

  #friendsView .friends-mobile-detail-body .friend-profile-avatar.friend-avatar,
  #friendsView .friends-mobile-detail-body .friend-profile-placeholder {
    width: 112px;
    height: 112px;
    min-width: 112px;
    flex-basis: 112px;
  }

  #friendsView .friends-mobile-chat .friend-message-list {
    min-height: 0;
    padding: 16px 12px;
    background: #f5f6f8;
    background-image: none;
  }

  #friendsView .friends-mobile-chat .friend-message {
    margin-bottom: 12px;
  }

  #friendsView .friends-mobile-chat .friend-message > div {
    max-width: 78%;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    padding: 10px 12px;
  }

  #friendsView .friends-mobile-chat .friend-message.is-mine > div {
    background: #2563eb;
    color: #fff;
  }

  #friendsView .friends-mobile-chat .friend-message .mini-button {
    display: none;
  }

  #friendsView .friends-mobile-chat .friend-message-form {
    grid-template-columns: 38px minmax(0, 1fr) 64px;
    min-height: 64px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }

  #friendsView .friends-mobile-chat .friend-emoji-picker {
    left: 10px;
    right: 10px;
    width: auto;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  #friendsView .friends-mobile-chat .friend-emoji-picker button {
    min-width: 0;
    height: 36px;
  }

  #friendsView .friends-mobile-chat .friend-message-form textarea {
    min-height: 40px;
    max-height: 84px;
    border-radius: 8px;
    background: #f3f4f6;
    padding: 10px 12px;
  }

  #friendsView .friends-mobile-chat .friend-message-form .primary-button {
    height: 40px;
    border-radius: 8px;
    padding: 0 10px;
  }

  body.friends-mobile-mode {
    --friends-mobile-fixed-head-height: 74px;
  }

  body.friends-mobile-mode .app-main {
    padding-top: 0 !important;
  }

  body.friends-mobile-mode #friendsView .friends-mobile-page {
    padding-top: var(--friends-mobile-fixed-head-height);
  }

  body.friends-mobile-mode #friendsView .friends-mobile-head {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 88;
    box-sizing: border-box;
    height: var(--friends-mobile-fixed-head-height);
    min-height: 0;
    padding: 8px 16px;
  }

  body.friends-mobile-mode #friendsView .friends-mobile-feed,
  body.friends-mobile-mode #friendsView .friends-mobile-contact-list {
    padding-top: 0;
  }

  body.friends-mobile-mode #friendsView .friends-mobile-self .friend-presence-menu,
  body.friends-mobile-mode #friendsView .friends-mobile-contact-group h3 {
    top: var(--friends-mobile-fixed-head-height);
  }

  body.friends-mobile-mode #friendsView .friends-mobile-chat-head,
  body.friends-mobile-mode #friendsView .friends-mobile-detail-head {
    padding-top: 8px;
  }
}

/* Final privacy control center override. */
.privacy-view.workspace-hub-view {
  --privacy-blue: #2563eb;
  --privacy-blue-dark: #1d4ed8;
  --privacy-blue-soft: #eff6ff;
  --privacy-green: #16a34a;
  --privacy-purple: #8b5cf6;
  --privacy-text: #0f172a;
  --privacy-muted: #64748b;
  --privacy-line: #d8e3f0;
  width: min(1280px, 100%);
  gap: 16px;
}

.privacy-view.workspace-hub-view::before {
  inset: -20px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(238, 246, 255, 0.92) 0%, rgba(248, 251, 255, 0.88) 45%, rgba(234, 244, 255, 0.9) 100%),
    linear-gradient(rgba(37, 99, 235, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.08) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  opacity: 1;
}

.privacy-view .hub-hero {
  position: relative;
  min-height: 136px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  padding: 26px 32px;
  border: 1px solid rgba(147, 197, 253, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 76% 22%, rgba(147, 197, 253, 0.34), transparent 32%),
    linear-gradient(135deg, #1e3a8a 0%, #2563eb 56%, #3b82f6 100%);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.16);
}

.privacy-view .hub-hero::after {
  content: "";
  position: absolute;
  right: clamp(24px, 8vw, 110px);
  top: 18px;
  width: 112px;
  height: 112px;
  clip-path: polygon(50% 0, 86% 16%, 82% 62%, 50% 100%, 18% 62%, 14% 16%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(147, 197, 253, 0.16)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.45);
  opacity: 0.68;
}

.privacy-view .hub-hero > div {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.privacy-view .hub-hero .eyebrow {
  display: none;
}

.privacy-view .hub-hero h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.05;
}

.privacy-view .hub-hero p {
  display: block;
  max-width: 760px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.6;
}

.privacy-view .privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.privacy-view .privacy-overview-card,
.privacy-view .privacy-card {
  min-width: 0;
  border: 1px solid var(--privacy-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.privacy-view .privacy-overview-card:hover,
.privacy-view .privacy-card:hover {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.privacy-view .privacy-overview-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  padding: 22px;
}

.privacy-section-title,
.privacy-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.privacy-section-title strong,
.privacy-card-copy strong,
.privacy-setting-box strong {
  color: var(--privacy-text);
  font-size: 20px;
  line-height: 1.2;
}

.privacy-ui-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.privacy-ui-icon-cyan {
  background: rgba(236, 254, 255, 0.9);
  color: #0891b2;
}

.privacy-ui-icon-green {
  background: rgba(240, 253, 244, 0.9);
  color: var(--privacy-green);
}

.privacy-ui-icon-purple {
  background: rgba(245, 243, 255, 0.94);
  color: var(--privacy-purple);
}

.privacy-overview-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.privacy-overview-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--privacy-line);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.78);
}

.privacy-overview-item strong,
.privacy-overview-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.privacy-overview-item strong {
  color: #1e293b;
  font-size: 15px;
}

.privacy-overview-item small {
  margin-top: 4px;
  color: var(--privacy-muted);
  font-size: 13px;
}

.privacy-view .privacy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-height: 210px;
  align-content: start;
  padding: 20px;
}

.privacy-view .privacy-treehole-card {
  grid-column: 1 / -1;
  min-height: 0;
}

.privacy-card-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.privacy-card-copy p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
}

.privacy-card-copy small {
  color: var(--privacy-blue-dark);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.privacy-setting-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--privacy-line);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.72);
}

.privacy-setting-box small {
  display: block;
  margin-top: 8px;
  color: var(--privacy-blue-dark);
  font-weight: 900;
}

.privacy-setting-box small.is-on {
  color: var(--privacy-green);
}

.privacy-card-hint {
  margin: 0;
  color: var(--privacy-muted);
  font-size: 13px;
  line-height: 1.55;
}

.privacy-switch {
  position: relative;
  width: 58px;
  height: 34px;
  flex: 0 0 58px;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.18);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.privacy-switch span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.privacy-switch.is-on {
  background: linear-gradient(135deg, var(--privacy-blue), #3b82f6);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

.privacy-switch.is-on span {
  transform: translateX(24px);
}

.privacy-switch:hover {
  transform: translateY(-1px);
}

.privacy-view .privacy-choice-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.privacy-view .privacy-choice-toggle .secondary-button,
.privacy-view .privacy-treehole-actions .secondary-button,
.privacy-view .privacy-access-button {
  width: auto;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--privacy-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.privacy-view .privacy-choice-toggle .secondary-button {
  display: inline-flex;
  gap: 4px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
}

.privacy-view .privacy-choice-toggle .secondary-button b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--privacy-blue);
  font-size: 11px;
}

.privacy-view .privacy-choice-toggle .secondary-button b .privacy-flat-svg svg {
  width: 11px;
  height: 11px;
}

.privacy-view .privacy-choice-toggle .secondary-button.is-active {
  border-color: rgba(37, 99, 235, 0.28);
  background: linear-gradient(135deg, var(--privacy-blue), #3b82f6);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.privacy-preview {
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--privacy-line);
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.72);
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
}

.privacy-preview strong {
  color: var(--privacy-blue-dark);
  font-size: inherit;
}

.privacy-select-box {
  display: grid;
  gap: 7px;
  padding: 11px 14px;
  border: 1px solid var(--privacy-line);
  border-radius: 10px;
  background: rgba(248, 251, 255, 0.72);
}

.privacy-select-box span {
  color: var(--privacy-muted);
  font-size: 12px;
  font-weight: 900;
}

.privacy-select-box select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background: #ffffff;
  color: var(--privacy-text);
  font-weight: 800;
}

.privacy-select-box.is-active {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(239, 246, 255, 0.72);
}

.privacy-explain-list {
  display: grid;
  gap: 6px;
}

.privacy-explain-list p {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--privacy-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.privacy-explain-list p span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue);
  font-size: 11px;
  font-weight: 900;
}

.privacy-view .privacy-explain-list p strong {
  flex: 0 0 auto;
  color: inherit;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.privacy-explain-list p.is-active {
  color: #1e293b;
}

.privacy-treehole-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.privacy-treehole-actions {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.privacy-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--privacy-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #94a3b8;
}

.privacy-search input {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--privacy-text);
}

.privacy-search input:focus {
  box-shadow: none;
}

.privacy-treehole-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.privacy-treehole-friend {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  padding: 12px;
  border: 1px solid var(--privacy-line);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.78);
}

.privacy-treehole-friend.is-enabled {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(239, 246, 255, 0.88);
}

.privacy-check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.privacy-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.privacy-check span {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #94a3b8;
  border-radius: 5px;
  background: #ffffff;
}

.privacy-check input:checked + span {
  border-color: var(--privacy-blue);
  background: var(--privacy-blue);
  box-shadow: inset 0 0 0 4px #ffffff;
}

.privacy-treehole-friend .friend-avatar {
  width: 42px;
  height: 42px;
}

.privacy-treehole-friend-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.privacy-treehole-friend-copy strong {
  color: var(--privacy-text);
  font-size: 15px;
  line-height: 1.2;
}

.privacy-treehole-friend-copy small {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--privacy-muted);
  font-size: 12px;
  font-weight: 800;
}

.privacy-treehole-friend-copy small.is-open {
  background: var(--privacy-blue-soft);
  color: var(--privacy-blue-dark);
}

.privacy-view .privacy-access-button {
  min-width: 116px;
  color: var(--privacy-blue-dark);
}

.privacy-treehole-footer {
  display: flex;
  justify-content: flex-end;
}

.privacy-save-treehole {
  min-width: 188px;
  min-height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--privacy-blue), #3b82f6);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.privacy-treehole-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px dashed #bfdbfe;
  border-radius: 14px;
  background: rgba(239, 246, 255, 0.58);
  color: var(--privacy-muted);
  line-height: 1.6;
}

.privacy-treehole-empty strong {
  color: var(--privacy-text);
  font-size: 15px;
}

.privacy-treehole-empty.is-loading {
  color: var(--privacy-blue-dark);
}

.privacy-view :is(button, .secondary-button, .primary-button):disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.privacy-view :is(.secondary-button, .primary-button, .privacy-switch):active:not(:disabled) {
  transform: translateY(0);
}

@media (max-width: 920px) {
  .privacy-overview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .privacy-view.workspace-hub-view {
    width: 100%;
    gap: 12px;
  }

  .privacy-view .hub-hero {
    min-height: 132px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 18px;
  }

  .privacy-view .hub-hero::after {
    right: 18px;
    top: 20px;
    width: 72px;
    height: 72px;
    opacity: 0.46;
  }

  .privacy-view .hub-hero h2 {
    font-size: 30px;
  }

  .privacy-view .hub-hero p {
    display: block;
    max-width: calc(100% - 80px);
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .privacy-view .privacy-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .privacy-view .privacy-overview-card {
    margin-top: -22px;
    padding: 18px;
    border-radius: 24px;
  }

  .privacy-section-title strong,
  .privacy-card-copy strong,
  .privacy-setting-box strong {
    font-size: 20px;
  }

  .privacy-overview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .privacy-overview-item {
    min-height: 86px;
    padding: 12px;
  }

  .privacy-overview-item strong,
  .privacy-overview-item small {
    white-space: normal;
  }

  .privacy-view .privacy-card {
    min-height: 0;
    padding: 18px;
    border-radius: 18px;
  }

  .privacy-setting-box {
    min-height: 78px;
    padding: 12px;
  }

  .privacy-view .privacy-choice-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .privacy-view .privacy-choice-toggle .secondary-button {
    min-height: 34px;
    padding: 0 6px;
    font-size: 12px;
  }

  .privacy-treehole-actions {
    grid-template-columns: 1fr;
  }

  .privacy-view .privacy-treehole-actions .secondary-button {
    justify-self: end;
    min-width: 128px;
  }

  .privacy-treehole-list {
    max-height: none;
  }

  .privacy-treehole-friend {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 10px;
  }

  .privacy-view .privacy-access-button {
    grid-column: 3 / -1;
    justify-self: stretch;
    min-width: 0;
  }

  .privacy-treehole-footer {
    justify-content: stretch;
  }

  .privacy-save-treehole {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .privacy-overview-list {
    grid-template-columns: 1fr;
  }

  .privacy-view .privacy-choice-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.private-module-mode #memoView,
  #memoView {
    align-content: start;
    gap: 8px;
    padding: 8px 8px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  #memoView > .section-head {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 58px;
    max-height: none;
    justify-self: stretch;
    align-self: start;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 24px 58px rgba(91, 52, 31, 0.16);
  }

  #memoView > .section-head > div {
    gap: 7px;
  }

  #memoView > .section-head h2 {
    font-size: 22px;
    line-height: 1.1;
  }

  #memoView > .section-head > .secondary-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  #memoView .memo-intro {
    margin: -2px 2px 0;
    font-size: 12px;
    line-height: 1.35;
  }

  #memoView .memo-module-host {
    gap: 8px;
  }

  #memoView .memo-focus-panel {
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(var(--module-rgb), 0.1);
  }

  #memoView .memo-focus-copy {
    gap: 5px;
  }

  #memoView .memo-focus-copy > span {
    font-size: 11px;
  }

  #memoView .memo-focus-copy strong {
    font-size: 22px;
    line-height: 1.05;
  }

  #memoView .memo-focus-copy p {
    font-size: 12px;
    line-height: 1.35;
  }

  #memoView .memo-progress-line.large {
    height: 6px;
  }

  #memoView .memo-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #memoView .memo-stat-card {
    min-height: 52px;
    gap: 3px;
    padding: 7px 5px;
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(var(--module-rgb), 0.08);
  }

  #memoView .memo-stat-card strong {
    font-size: 18px;
    line-height: 1;
  }

  #memoView .memo-stat-card span,
  #memoView .memo-stat-card small {
    font-size: 10px;
    line-height: 1.15;
  }

  #memoView .memo-list > .memo-empty:not(.small) {
    min-height: clamp(190px, 28vh, 300px);
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(var(--module-rgb), 0.05)),
      rgba(255, 255, 255, 0.7);
  }
}

@media (max-width: 420px) {
  #memoView .memo-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  #memoView .memo-stat-card {
    padding: 6px 4px;
  }

  #memoView .memo-stat-card strong {
    font-size: 17px;
  }

  #memoView .memo-stat-card span,
  #memoView .memo-stat-card small {
    font-size: 9px;
  }

  #memoView > .section-head {
    width: 100%;
    height: auto;
    min-height: 56px;
    max-height: none;
  }

  #memoView > .section-head h2 {
    font-size: 20px;
  }
}

#memoView.memo-intro-ready > :not(.memo-opening-scene),
#memoView.memo-intro-opening > :not(.memo-opening-scene) {
  opacity: 0;
  pointer-events: none;
  transform: none;
  animation: none;
}

#memoView.memo-intro-done > :not(.memo-opening-scene) {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  animation: none;
}

body.memo-opening-active {
  overflow: hidden;
}

.memo-opening-scene {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #1e120d;
  cursor: default;
  perspective: 1600px;
}

.memo-opening-scene[data-assets="loading"] {
  cursor: wait;
}

.memo-opening-scene[data-assets="loading"] .memo-opening-book {
  opacity: 0;
  pointer-events: none;
}

.memo-opening-scene[hidden] {
  display: none;
}

.memo-opening-photo {
  position: absolute;
  inset: 0;
  --memo-opening-photo-image: url("/assets/memo-violin-notebook-desktop.webp?v=book-open-8");
  --memo-opening-photo-position: center;
  background:
    linear-gradient(90deg, rgba(35, 18, 12, 0.52), transparent 38%, rgba(24, 13, 9, 0.18)),
    linear-gradient(180deg, rgba(18, 10, 7, 0.08), rgba(18, 10, 7, 0.34)),
    var(--memo-opening-photo-image) var(--memo-opening-photo-position) / cover no-repeat;
  transform: scale(1.012);
  transform-origin: 57% 70%;
  transition:
    transform 1.55s cubic-bezier(0.18, 0.78, 0.18, 1),
    filter 1.55s ease,
    opacity 1.55s ease;
}

.memo-opening-book {
  --memo-book-start-x: 7vw;
  --memo-book-start-y: 13vh;
  --memo-book-mid-x: 2vw;
  --memo-book-mid-y: 4vh;
  --memo-book-tilt: -2.4deg;
  --memo-book-skew: -2deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(320px, 31vw, 620px);
  aspect-ratio: 0.77;
  padding: 0;
  border: 0;
  border-radius: 20px 18px 24px 22px;
  background: transparent;
  cursor: pointer;
  transform: translate(calc(-50% + var(--memo-book-start-x)), calc(-50% + var(--memo-book-start-y))) rotate(var(--memo-book-tilt)) skewX(var(--memo-book-skew)) scale(0.96);
  transform-style: preserve-3d;
  outline: none;
  filter: drop-shadow(0 26px 30px rgba(24, 12, 8, 0.34));
}

.memo-opening-book::before {
  content: "";
  position: absolute;
  inset: 4% -18% 2% 12%;
  z-index: 0;
  border-radius: 18px 28px 30px 18px;
  background:
    repeating-linear-gradient(90deg, rgba(126, 86, 48, 0.28) 0 1px, transparent 1px 7px) right center / 24% 100% no-repeat,
    linear-gradient(90deg, rgba(76, 42, 25, 0.72), rgba(242, 220, 180, 0.94) 76%, rgba(151, 100, 58, 0.92)),
    linear-gradient(180deg, #fff3da, #d7b57b);
  box-shadow:
    inset -20px 0 28px rgba(79, 45, 27, 0.36),
    inset 4px 0 12px rgba(255, 243, 218, 0.38),
    24px 18px 40px rgba(16, 8, 5, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translateX(10%) scale(0.98);
}

.memo-opening-book::after {
  content: "";
  position: absolute;
  inset: -9px -6px -7px -12px;
  border: 1px solid rgba(255, 236, 202, 0.68);
  border-radius: 24px 20px 28px 22px;
  background:
    linear-gradient(135deg, rgba(255, 246, 224, 0.12), rgba(255, 246, 224, 0.02) 46%, rgba(80, 42, 24, 0.08)),
    rgba(255, 255, 255, 0.02);
  clip-path: polygon(4% 3%, 91% 0, 100% 91%, 10% 100%, 0 15%);
  box-shadow:
    inset 0 0 0 1px rgba(80, 42, 24, 0.28),
    0 0 0 1px rgba(89, 47, 28, 0.24),
    0 0 30px rgba(255, 213, 151, 0.3);
  opacity: 0.82;
  animation: memo-book-pulse 1.7s ease-in-out infinite;
}

.memo-opening-book:focus-visible::after,
.memo-opening-book:hover::after {
  opacity: 1;
  box-shadow:
    0 0 0 2px rgba(255, 241, 214, 0.8),
    0 0 34px rgba(255, 207, 128, 0.44);
}

.memo-opening-pages,
.memo-opening-cover {
  position: absolute;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.memo-opening-pages {
  inset: 3% -22% 2% 10%;
  z-index: 1;
  border-radius: 16px 26px 28px 16px;
  transform: translateX(12%) rotateY(0deg);
  background:
    repeating-linear-gradient(90deg, rgba(148, 104, 61, 0.38) 0 1px, transparent 1px 7px) right center / 28% 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(126, 75, 43, 0.09) 18px 19px),
    linear-gradient(135deg, #fffaf1, #ead8ba 72%, #d5b789);
  box-shadow:
    inset -28px 0 28px rgba(111, 68, 38, 0.28),
    inset 6px 0 16px rgba(255, 246, 226, 0.5),
    0 26px 48px rgba(35, 17, 10, 0.28);
}

.memo-opening-cover {
  inset: 0;
  z-index: 2;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  background: transparent;
  filter: none;
  box-shadow: none;
  will-change: transform, opacity, filter;
}

.memo-opening-cover-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: opacity, transform;
}

.memo-opening-cover-front {
  background-image: url("/assets/memo-violin-cover-front-trimmed.webp?v=book-open-8");
  filter: drop-shadow(0 24px 34px rgba(21, 10, 6, 0.34));
  transform: translateZ(1px);
}

.memo-opening-cover-back {
  background-image: url("/assets/memo-violin-cover-back-trimmed.webp?v=book-open-8");
  background-position: center;
  filter: drop-shadow(12px 18px 28px rgba(18, 8, 4, 0.28)) brightness(0.9) saturate(0.96);
  backface-visibility: visible;
  transform: translateZ(2px);
}

.memo-opening-welcome {
  position: absolute;
  top: 28%;
  left: 18%;
  width: 52%;
  max-width: 360px;
  z-index: 2;
  color: #50331f;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.memo-opening-greeting {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.45vw, 8px);
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.04;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.memo-opening-greeting span {
  display: block;
}

.memo-opening-note {
  display: block;
  max-width: 19em;
  margin-top: clamp(18px, 2vw, 28px);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 650;
  line-height: 1.75;
  color: rgba(76, 49, 31, 0.74);
  overflow-wrap: anywhere;
}

.memo-opening-scene[data-state="opening"] {
  pointer-events: none;
  animation: none;
}

.memo-opening-scene[data-state="opened"] {
  cursor: pointer;
}

.memo-opening-scene[data-state="opening"] .memo-opening-photo,
.memo-opening-scene[data-state="opened"] .memo-opening-photo {
  opacity: 0.38;
  filter: blur(6px) brightness(0.68) saturate(0.95);
  transform: scale(1.012);
}

.memo-opening-scene[data-state="opening"] .memo-opening-book {
  animation: memo-photo-book-zoom 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
}

.memo-opening-scene[data-state="opening"] .memo-opening-book::after {
  opacity: 0;
  animation: none;
}

.memo-opening-scene[data-state="opening"] .memo-opening-book::before {
  animation: memo-photo-thickness-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
}

.memo-opening-scene[data-state="opening"] .memo-opening-pages {
  animation: memo-photo-pages-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
}

.memo-opening-scene[data-state="opening"] .memo-opening-cover {
  animation: memo-photo-cover-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
}

.memo-opening-scene[data-state="opening"] .memo-opening-welcome {
  animation: memo-opening-welcome-in 2.58s ease both;
}

#memoView > .section-head {
  position: relative;
  overflow: hidden;
  border-color: rgba(79, 45, 27, 0.46);
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 218, 166, 0.18), transparent 26%),
    linear-gradient(135deg, #3f271b, #9c5a31 72%, #704025);
}

#memoView > .section-head::before {
  content: "";
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: 62%;
  width: 44px;
  opacity: 0.58;
  pointer-events: none;
  transform: rotate(-4deg);
  background:
    linear-gradient(90deg, transparent 0 7px, rgba(250, 232, 198, 0.86) 7px 8px, transparent 8px 17px, rgba(250, 232, 198, 0.76) 17px 18px, transparent 18px 27px, rgba(250, 232, 198, 0.74) 27px 28px, transparent 28px 37px, rgba(250, 232, 198, 0.7) 37px 38px, transparent 38px),
    linear-gradient(180deg, rgba(13, 13, 12, 0.64), rgba(13, 13, 12, 0.18));
  border-radius: 999px;
}

#memoView > .section-head::after {
  content: "f  f";
  position: absolute;
  right: 18px;
  bottom: -8px;
  color: rgba(31, 18, 13, 0.42);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-style: italic;
  line-height: 1;
  letter-spacing: 13px;
  pointer-events: none;
  transform: rotate(-8deg);
}

#memoView .memo-focus-panel,
#memoView .memo-plan-card,
#memoView .memo-stat-card,
#memoView .memo-toolbar,
#memoView .memo-side-card,
#memoView .memo-detail,
#memoView .memo-form {
  background:
    linear-gradient(135deg, rgba(255, 252, 246, 0.96), rgba(246, 235, 220, 0.88)),
    repeating-linear-gradient(0deg, rgba(126, 75, 43, 0.045) 0 1px, transparent 1px 18px);
}

#memoView .memo-plan-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(var(--memo-type-rgb), 0.12), rgba(255, 252, 246, 0.95) 48%, rgba(246, 235, 220, 0.88)),
    repeating-linear-gradient(0deg, rgba(126, 75, 43, 0.045) 0 1px, transparent 1px 18px);
}

#memoView .memo-plan-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px dashed rgba(126, 75, 43, 0.18);
  border-radius: 6px;
}

#memoView .memo-tabs {
  border-color: rgba(126, 75, 43, 0.2);
}

.privacy-notification-list {
  display: grid;
  gap: 10px;
}

.privacy-notification-row {
  align-items: center;
}

.privacy-notification-row.is-disabled {
  opacity: 0.54;
}

@media (max-width: 760px) {
  body.mobile-app-mode.private-module-mode :is(.memo-tabs, .calorie-redo-mobile-tabs) {
    left: 10px;
    right: 10px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    gap: 4px;
    overflow: hidden;
    padding: 8px;
    border-radius: 22px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
  }

  body.mobile-app-mode.private-module-mode .calorie-redo-mobile-tabs {
    bottom: max(4px, calc(env(safe-area-inset-bottom) - 8px));
  }

  body.mobile-app-mode.private-module-mode .memo-tabs button,
  body.mobile-app-mode.private-module-mode .calorie-redo-mobile-tabs button {
    min-height: 52px;
    height: 52px;
    padding: 4px 2px;
    border-radius: 16px;
    font-size: 11px;
  }

  body.mobile-app-mode.private-module-mode .memo-tabs button.is-create {
    min-height: 52px;
    height: 52px;
    transform: none;
  }

  body.mobile-app-mode.private-module-mode .memo-tab-icon,
  body.mobile-app-mode.private-module-mode .memo-tabs button.is-create .memo-tab-icon,
  body.mobile-app-mode.private-module-mode .calorie-redo-mobile-tabs button span {
    width: 24px;
    height: 24px;
  }
}

#memoView .memo-plan-type-switch {
  display: none;
}

#memoView .memo-task-toggle {
  justify-self: start;
  min-height: 28px;
  border: 0;
  padding: 0;
  color: var(--module-accent);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 760px) {
  #memoView .memo-head-actions {
    position: relative;
    z-index: 2;
    gap: 6px;
  }

  #memoView .memo-info-toggle {
    display: inline-flex;
  }

  #memoView.memo-info-open .memo-info-toggle {
    background: rgba(255, 255, 255, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px rgba(29, 18, 12, 0.24);
  }

  #memoView:not(.memo-info-open) .memo-intro,
  #memoView:not(.memo-info-open) .memo-focus-panel {
    display: none;
  }

  #memoView.memo-info-open .memo-intro {
    display: block;
  }

  #memoView.memo-info-open .memo-focus-panel {
    display: grid;
  }

  #memoView .memo-plan-type-switch {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(126, 75, 43, 0.14);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.88);
    box-shadow: 0 10px 24px rgba(91, 52, 31, 0.1);
  }

  #memoView .memo-plan-type-switch button {
    min-width: 0;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 4px;
    color: #76513a;
    background: transparent;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  #memoView .memo-plan-type-switch button.is-active {
    border-color: rgba(126, 75, 43, 0.2);
    color: #fff;
    background: linear-gradient(135deg, var(--module-accent), var(--module-accent-2));
    box-shadow: 0 8px 18px rgba(126, 75, 43, 0.18);
  }

  #memoView .memo-list {
    gap: 8px;
  }

  #memoView .memo-plan-card {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    padding: 9px 10px;
    border-left-width: 3px;
  }

  #memoView .memo-plan-card::after {
    inset: 6px;
  }

  #memoView .memo-check {
    width: 24px;
    height: 24px;
  }

  #memoView .memo-plan-check {
    gap: 5px;
  }

  #memoView .memo-drag-handle {
    width: 28px;
    height: 24px;
    min-height: 24px;
    border-radius: 6px;
    font-size: 12px;
  }

  #memoView .memo-plan-main {
    gap: 5px;
  }

  #memoView .memo-plan-title {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  #memoView .memo-plan-title strong {
    font-size: 16px;
  }

  #memoView .memo-plan-title span,
  #memoView .memo-pill {
    padding: 3px 7px;
    font-size: 10px;
  }

  #memoView .memo-plan-meta {
    gap: 4px 7px;
  }

  #memoView .memo-plan-meta,
  #memoView .memo-plan-footer small {
    font-size: 11px;
  }

  #memoView .memo-progress-line {
    height: 5px;
  }

  #memoView .memo-card-tasks {
    gap: 4px;
    padding: 0;
  }

  #memoView .memo-card-task {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    font-size: 12px;
    line-height: 1.2;
  }

  #memoView .memo-card-task input {
    width: 16px;
    height: 16px;
  }

  #memoView .memo-task-toggle {
    min-height: 24px;
    font-size: 11px;
  }

  #memoView .memo-plan-footer {
    align-items: center;
    gap: 6px;
  }

  #memoView .memo-plan-actions .mini-button {
    min-height: 30px;
    padding: 0 10px;
  }
}

@keyframes memo-module-after-open {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes memo-book-pulse {
  0%,
  100% {
    transform: scale(0.985);
    opacity: 0.48;
  }

  50% {
    transform: scale(1.025);
    opacity: 0.9;
  }
}

@keyframes memo-cutout-breathe {
  0%,
  100% {
    transform: scale(1.025);
    filter:
      drop-shadow(0 18px 26px rgba(18, 8, 4, 0.22))
      drop-shadow(0 0 10px rgba(255, 205, 142, 0.16));
  }

  50% {
    transform: scale(1.045);
    filter:
      drop-shadow(0 28px 36px rgba(18, 8, 4, 0.28))
      drop-shadow(0 0 16px rgba(255, 214, 150, 0.2))
      brightness(1.03);
  }
}

@keyframes memo-cutout-zoom {
  0% {
    opacity: 1;
    transform: scale(1.025);
    filter:
      drop-shadow(0 18px 26px rgba(18, 8, 4, 0.22))
      drop-shadow(0 0 10px rgba(255, 205, 142, 0.16))
      brightness(1);
  }

  48% {
    opacity: 1;
    transform: scale(1.08);
    filter:
      drop-shadow(0 32px 44px rgba(18, 8, 4, 0.3))
      drop-shadow(0 0 18px rgba(255, 218, 156, 0.22))
      brightness(1.05);
  }

  100% {
    opacity: 0.92;
    transform: scale(1.18);
    filter:
      blur(1px)
      drop-shadow(0 36px 48px rgba(18, 8, 4, 0.3))
      drop-shadow(0 0 20px rgba(255, 218, 156, 0.18))
      brightness(0.86)
      saturate(0.94);
  }
}

@keyframes memo-cutout-book-handoff {
  0% {
    opacity: 0;
    transform: scale(1.025);
    filter:
      drop-shadow(0 18px 26px rgba(18, 8, 4, 0.22))
      drop-shadow(0 0 10px rgba(255, 205, 142, 0.16))
      brightness(1);
  }

  30% {
    opacity: 0;
    transform: scale(1.08);
    filter:
      drop-shadow(0 32px 44px rgba(18, 8, 4, 0.3))
      drop-shadow(0 0 18px rgba(255, 218, 156, 0.22))
      brightness(1.05);
  }

  46% {
    opacity: 0;
    transform: scale(1.12);
    filter:
      blur(1px)
      drop-shadow(0 32px 44px rgba(18, 8, 4, 0.24))
      brightness(0.86)
      saturate(0.94);
  }

  100% {
    opacity: 0;
    transform: scale(1.15);
    filter:
      blur(2px)
      brightness(0.76)
      saturate(0.9);
  }
}

@keyframes memo-desktop-pages-open {
  0%,
  18% {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(50%) rotateY(0deg) scale(1.02);
  }

  28%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(50%) rotateY(0deg) scale(1.02);
  }
}

@keyframes memo-desktop-thickness-open {
  0%,
  18% {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(50%) scale(1.02);
  }

  30%,
  100% {
    opacity: 0.92;
    transform: translate(-50%, -50%) translateX(50%) scale(1.02);
  }
}

@keyframes memo-desktop-cover-open {
  0%,
  18% {
    opacity: 1;
    filter: drop-shadow(0 24px 34px rgba(21, 10, 6, 0.34)) brightness(1.02) saturate(1.04);
    transform: translateY(-50%) scale(1.06) perspective(1400px) rotateY(0deg) translateZ(0);
  }

  26% {
    opacity: 1;
    filter: drop-shadow(0 24px 34px rgba(21, 10, 6, 0.34)) brightness(1.02) saturate(1.04);
    transform: translateY(-50%) scale(1.06) perspective(1400px) rotateY(0deg) translateZ(0);
  }

  50% {
    opacity: 1;
    filter: drop-shadow(18px 22px 34px rgba(18, 8, 4, 0.36)) brightness(1.08) saturate(1.06);
    transform: translateY(-50%) scale(1.06) perspective(1400px) rotateY(-68deg) translateZ(18px);
  }

  72% {
    opacity: 0.98;
    filter: drop-shadow(24px 20px 30px rgba(14, 7, 4, 0.32)) brightness(0.9) saturate(0.96);
    transform: translateY(-50%) scale(1.06) perspective(1400px) rotateY(-140deg) translateZ(8px);
  }

  86% {
    opacity: 0.97;
    filter: drop-shadow(24px 18px 28px rgba(14, 7, 4, 0.28)) brightness(0.89) saturate(0.95);
    transform: translateY(-50%) scale(1.06) perspective(1400px) rotateY(-164deg) translateZ(3px);
  }

  100% {
    opacity: 0.96;
    filter: drop-shadow(24px 18px 28px rgba(14, 7, 4, 0.26)) brightness(0.88) saturate(0.95);
    transform: translateY(-50%) scale(1.06) perspective(1400px) rotateY(-176deg) translateZ(0);
  }
}

@keyframes memo-desktop-cover-front-face {
  0%,
  52% {
    opacity: 1;
  }

  66% {
    opacity: 0.2;
  }

  74%,
  100% {
    opacity: 0;
  }
}

@keyframes memo-desktop-cover-back-face {
  0%,
  56% {
    opacity: 0;
  }

  68% {
    opacity: 0.62;
  }

  78%,
  100% {
    opacity: 1;
  }
}

@keyframes memo-photo-book-zoom {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--memo-book-start-x)), calc(-50% + var(--memo-book-start-y))) rotate(var(--memo-book-tilt)) skewX(var(--memo-book-skew)) scale(0.92);
  }

  10% {
    opacity: 1;
  }

  38% {
    opacity: 1;
    transform: translate(calc(-50% + var(--memo-book-mid-x)), calc(-50% + var(--memo-book-mid-y))) rotate(-0.7deg) skewX(-0.8deg) scale(1.04);
  }

  64% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) skewX(0deg) scale(1.14);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) skewX(0deg) scale(1.18);
  }
}

@keyframes memo-photo-pages-open {
  0%,
  24% {
    opacity: 0;
    transform: translateX(10%) rotateY(0deg) scale(0.96);
  }

  42% {
    opacity: 0.92;
    transform: translateX(12%) rotateY(0deg) scale(1);
  }

  76% {
    opacity: 1;
    transform: translateX(15%) rotateY(-1deg) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateX(16%) rotateY(-1deg) scale(1.02);
  }
}

@keyframes memo-photo-thickness-open {
  0%,
  22% {
    opacity: 0;
    transform: translateX(10%) scale(0.96);
  }

  42% {
    opacity: 0.86;
    transform: translateX(11%) scale(1);
  }

  76% {
    opacity: 0.92;
    transform: translateX(15%) scale(1.02);
  }

  100% {
    opacity: 0.92;
    transform: translateX(16%) scale(1.02);
  }
}

@keyframes memo-photo-cover-open {
  0%,
  20% {
    opacity: 1;
    filter: drop-shadow(0 24px 34px rgba(21, 10, 6, 0.34)) brightness(1.02) saturate(1.04);
    transform: perspective(1400px) rotateY(0deg) translateZ(0);
  }

  48% {
    opacity: 1;
    filter: drop-shadow(18px 22px 34px rgba(18, 8, 4, 0.36)) brightness(1.08) saturate(1.06);
    transform: perspective(1400px) rotateY(-44deg) translateX(-1%) translateZ(28px);
  }

  76% {
    opacity: 0.98;
    filter: drop-shadow(24px 20px 30px rgba(14, 7, 4, 0.32)) brightness(0.9) saturate(0.96);
    transform: perspective(1400px) rotateY(-122deg) translateX(-2%) translateZ(18px);
  }

  100% {
    opacity: 0.96;
    filter: drop-shadow(24px 18px 28px rgba(14, 7, 4, 0.26)) brightness(0.82) saturate(0.92);
    transform: perspective(1400px) rotateY(-158deg) translateX(-2%) translateZ(4px);
  }
}

@keyframes memo-opening-welcome-in {
  0%,
  52% {
    opacity: 0;
    transform: translateY(10px);
  }

  74% {
    opacity: 0.92;
    transform: translateY(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes memo-scene-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@media (min-width: 761px) {
  .memo-opening-book {
    --memo-desktop-book-left: 42.5%;
    --memo-desktop-book-top: 58%;
    --memo-desktop-cover-width: clamp(420px, 25.2vw, 540px);
    --memo-desktop-page-width: var(--memo-desktop-cover-width);
    --memo-desktop-book-ratio: 0.735 / 1;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: hidden;
    transform: none;
    transform-style: preserve-3d;
    filter: none;
  }

  .memo-opening-cutout {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: url("/assets/memo-violin-notebook-cutout-desktop.webp?v=book-open-8") center / cover no-repeat;
    transform-origin: 51% 63%;
    transform: scale(1.025);
    filter:
      drop-shadow(0 18px 26px rgba(18, 8, 4, 0.22))
      drop-shadow(0 0 10px rgba(255, 205, 142, 0.16));
    animation: memo-cutout-breathe 2.2s ease-in-out infinite;
    will-change: transform, filter, opacity;
  }

  .memo-opening-cover,
  .memo-opening-pages,
  .memo-opening-book::before {
    left: var(--memo-desktop-book-left);
    top: var(--memo-desktop-book-top);
    right: auto;
    bottom: auto;
    width: var(--memo-desktop-cover-width);
    height: auto;
    aspect-ratio: var(--memo-desktop-book-ratio);
    border-radius: 18px 16px 22px 18px;
    transform: translate(-50%, -50%);
  }

  .memo-opening-book::before,
  .memo-opening-pages {
    width: var(--memo-desktop-page-width);
    aspect-ratio: var(--memo-desktop-book-ratio);
  }

  .memo-opening-cover {
    transform-origin: left center;
  }

  .memo-opening-cover-face {
    background-size: 100% 100%;
  }

  .memo-opening-cover-front {
    inset: -3% -6.8% -3% -1.8%;
  }

  .memo-opening-welcome {
    left: 18%;
    right: auto;
    top: 30%;
    width: min(50%, 340px);
    color: #50331f;
  }

  .memo-opening-book::before,
  .memo-opening-pages,
  .memo-opening-cover,
  .memo-opening-cover-face,
  .memo-opening-welcome {
    display: none;
  }

  .memo-opening-book::after,
  .memo-opening-book:focus-visible::after,
  .memo-opening-book:hover::after {
    inset: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    clip-path: none;
    box-shadow: none;
    opacity: 0;
    animation: none;
  }

  .memo-opening-book:focus-visible .memo-opening-cutout {
    filter:
      drop-shadow(0 20px 30px rgba(18, 8, 4, 0.24))
      drop-shadow(0 0 20px rgba(255, 218, 166, 0.28));
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-book {
    animation: none;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-cutout {
    opacity: 0;
    animation: memo-cutout-book-handoff 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-book::before,
  .memo-opening-scene[data-state="opening"] .memo-opening-pages,
  .memo-opening-scene[data-state="opening"] .memo-opening-cover,
  .memo-opening-scene[data-state="opening"] .memo-opening-cover-face,
  .memo-opening-scene[data-state="opening"] .memo-opening-welcome {
    display: block;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-book::before {
    animation: memo-desktop-thickness-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-pages {
    animation: memo-desktop-pages-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-cover {
    animation: memo-desktop-cover-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-cover-front {
    animation: memo-desktop-cover-front-face 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-cover-back {
    animation: memo-desktop-cover-back-face 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
    backface-visibility: visible;
    transform: rotateY(180deg) translateZ(2px);
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-welcome {
    animation: memo-opening-welcome-in 2.58s ease both;
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-cutout {
    animation: none;
    opacity: 0;
    transform: scale(1.15);
    filter:
      blur(2px)
      brightness(0.76)
      saturate(0.9);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-book::before,
  .memo-opening-scene[data-state="opened"] .memo-opening-pages,
  .memo-opening-scene[data-state="opened"] .memo-opening-cover,
  .memo-opening-scene[data-state="opened"] .memo-opening-cover-face,
  .memo-opening-scene[data-state="opened"] .memo-opening-welcome {
    display: block;
    animation: none;
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-book::before {
    opacity: 0.92;
    transform: translate(-50%, -50%) translateX(50%) scale(1.02);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-pages {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(50%) rotateY(0deg) scale(1.02);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-cover {
    opacity: 0.96;
    filter: drop-shadow(24px 18px 28px rgba(14, 7, 4, 0.26)) brightness(0.88) saturate(0.95);
    transform: translateY(-50%) scale(1.06) perspective(1400px) rotateY(-176deg);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-cover-front {
    opacity: 0;
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-cover-back {
    opacity: 1;
    backface-visibility: visible;
    transform: rotateY(180deg) translateZ(2px);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-welcome {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .memo-opening-photo {
    --memo-opening-photo-image: url("/assets/memo-violin-notebook-desktop.webp?v=book-open-8");
    --memo-opening-photo-position: 50% center;
  }

  .memo-opening-book {
    --memo-mobile-book-left: 28%;
    --memo-mobile-book-top: 57%;
    --memo-mobile-cover-width: clamp(250px, 70vw, 380px);
    --memo-mobile-book-ratio: 0.735 / 1;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: hidden;
    transform: none;
    transform-style: preserve-3d;
    filter: none;
  }

  .memo-opening-cutout {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: url("/assets/memo-violin-notebook-cutout-desktop.webp?v=book-open-8") 50% center / cover no-repeat;
    transform-origin: 51% 63%;
    transform: scale(1.025);
    filter:
      drop-shadow(0 18px 26px rgba(18, 8, 4, 0.22))
      drop-shadow(0 0 10px rgba(255, 205, 142, 0.16));
    animation: memo-cutout-breathe 2.2s ease-in-out infinite;
    will-change: transform, filter, opacity;
  }

  .memo-opening-cover,
  .memo-opening-pages,
  .memo-opening-book::before {
    left: var(--memo-mobile-book-left);
    top: var(--memo-mobile-book-top);
    right: auto;
    bottom: auto;
    width: var(--memo-mobile-cover-width);
    height: auto;
    aspect-ratio: var(--memo-mobile-book-ratio);
    border-radius: 16px 14px 20px 16px;
    transform: translate(-50%, -50%);
  }

  .memo-opening-book::before,
  .memo-opening-pages {
    width: var(--memo-mobile-cover-width);
    aspect-ratio: var(--memo-mobile-book-ratio);
  }

  .memo-opening-cover {
    transform-origin: left center;
  }

  .memo-opening-cover-face {
    background-size: 100% 100%;
  }

  .memo-opening-cover-front {
    inset: -3% -6.8% -3% -1.8%;
  }

  .memo-opening-welcome {
    top: 27%;
    left: 16%;
    width: 58%;
    max-width: none;
  }

  .memo-opening-greeting {
    gap: 4px;
    font-size: clamp(22px, 6vw, 32px);
    line-height: 1.06;
  }

  .memo-opening-note {
    margin-top: 11px;
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.6;
  }

  .memo-opening-book::after,
  .memo-opening-book:focus-visible::after,
  .memo-opening-book:hover::after {
    inset: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    clip-path: none;
    box-shadow: none;
    opacity: 0;
    animation: none;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-book {
    animation: none;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-cutout {
    opacity: 0;
    animation: memo-cutout-book-handoff 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-book::before,
  .memo-opening-scene[data-state="opening"] .memo-opening-pages,
  .memo-opening-scene[data-state="opening"] .memo-opening-cover,
  .memo-opening-scene[data-state="opening"] .memo-opening-cover-face,
  .memo-opening-scene[data-state="opening"] .memo-opening-welcome {
    display: block;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-book::before {
    animation: memo-desktop-thickness-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-pages {
    animation: memo-desktop-pages-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-cover {
    animation: memo-desktop-cover-open 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-cover-front {
    animation: memo-desktop-cover-front-face 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-cover-back {
    animation: memo-desktop-cover-back-face 2.58s cubic-bezier(0.18, 0.78, 0.18, 1) both;
    backface-visibility: visible;
    transform: rotateY(180deg) translateZ(2px);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-cutout {
    animation: none;
    opacity: 0;
    transform: scale(1.15);
    filter:
      blur(2px)
      brightness(0.76)
      saturate(0.9);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-book::before,
  .memo-opening-scene[data-state="opened"] .memo-opening-pages,
  .memo-opening-scene[data-state="opened"] .memo-opening-cover,
  .memo-opening-scene[data-state="opened"] .memo-opening-cover-face,
  .memo-opening-scene[data-state="opened"] .memo-opening-welcome {
    display: block;
    animation: none;
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-book::before {
    opacity: 0.92;
    transform: translate(-50%, -50%) translateX(50%) scale(1.02);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-pages {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(50%) rotateY(0deg) scale(1.02);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-cover {
    opacity: 0.96;
    filter: drop-shadow(22px 16px 24px rgba(14, 7, 4, 0.26)) brightness(0.88) saturate(0.95);
    transform: translateY(-50%) scale(1.06) perspective(1400px) rotateY(-176deg);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-cover-front {
    opacity: 0;
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-cover-back {
    opacity: 1;
    backface-visibility: visible;
    transform: rotateY(180deg) translateZ(2px);
  }

  .memo-opening-scene[data-state="opened"] .memo-opening-welcome {
    opacity: 1;
    transform: translateY(0);
  }

  #memoView > .section-head::before {
    left: 66%;
    width: 34px;
  }

  #memoView > .section-head::after {
    right: 10px;
    font-size: 32px;
    letter-spacing: 8px;
  }
}

@media (max-width: 420px) {
  .memo-opening-book {
    --memo-mobile-book-left: 27.5%;
    --memo-mobile-book-top: 56.5%;
    --memo-mobile-cover-width: clamp(244px, 72vw, 310px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.memo-opening-active {
    overflow: hidden;
  }

  #memoView.memo-intro-ready > :not(.memo-opening-scene),
  #memoView.memo-intro-opening > :not(.memo-opening-scene) {
    opacity: 0;
    pointer-events: none;
    transform: none;
    animation: none;
  }

  #memoView.memo-intro-done > :not(.memo-opening-scene) {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    animation: none;
  }

  .memo-opening-photo,
  .memo-opening-book,
  .memo-opening-pages,
  .memo-opening-cover,
  .memo-opening-cover-face,
  .memo-opening-welcome,
  .memo-opening-book::before,
  .memo-opening-book::after {
    transition: none !important;
    animation: none !important;
  }

  .memo-opening-scene[data-state="opening"] {
    animation: none;
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-photo,
  .memo-opening-scene[data-state="opened"] .memo-opening-photo {
    opacity: 0.45;
    filter: blur(4px) brightness(0.72) saturate(0.9);
    transform: scale(1.012);
  }

  .memo-opening-scene[data-state="opening"] .memo-opening-book {
    opacity: 1;
  }
}

/* Keep selected privacy segmented buttons legible on mobile webviews. */
.privacy-view .privacy-choice-toggle .secondary-button.is-active {
  background: linear-gradient(135deg, var(--privacy-blue), #3b82f6);
  color: #ffffff;
}

.privacy-view .privacy-choice-toggle .secondary-button.is-active > span {
  position: relative;
  z-index: 1;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}

.privacy-view .privacy-choice-toggle .secondary-button.is-active > b {
  position: relative;
  z-index: 1;
  flex: 0 0 16px;
}

/* Mobile privacy page density pass. */
@media (max-width: 720px) {
  .privacy-view.workspace-hub-view {
    gap: 10px;
  }

  .privacy-view .hub-hero {
    min-height: 118px;
    padding: 16px 18px;
    border-radius: 18px;
  }

  .privacy-view .hub-hero h2 {
    font-size: 28px;
    line-height: 1.08;
  }

  .privacy-view .hub-hero p {
    max-width: calc(100% - 70px);
    font-size: 12px;
    line-height: 1.42;
  }

  .privacy-view .hub-hero::after {
    width: 62px;
    height: 62px;
  }

  .privacy-view .privacy-grid {
    gap: 10px;
  }

  .privacy-view .privacy-overview-card {
    gap: 12px;
    margin-top: -18px;
    padding: 14px;
    border-radius: 18px;
  }

  .privacy-section-title,
  .privacy-card-head {
    gap: 10px;
  }

  .privacy-section-title strong {
    font-size: 21px;
  }

  .privacy-card-copy strong,
  .privacy-setting-box strong {
    font-size: 20px;
  }

  .privacy-ui-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
  }

  .privacy-overview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .privacy-overview-item {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    min-height: 64px;
    padding: 10px;
    border-radius: 12px;
  }

  .privacy-overview-item .privacy-ui-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 10px;
  }

  .privacy-overview-item strong,
  .privacy-overview-item small {
    white-space: normal;
  }

  .privacy-overview-item strong {
    font-size: 13px;
    line-height: 1.25;
  }

  .privacy-overview-item small {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
  }

  .privacy-view .privacy-card {
    gap: 12px;
    min-height: 0;
    padding: 14px;
    border-radius: 16px;
  }

  .privacy-card-copy {
    gap: 5px;
  }

  .privacy-card-copy p {
    font-size: 13px;
    line-height: 1.5;
  }

  .privacy-card-copy small {
    font-size: 12px;
  }

  .privacy-setting-box {
    min-height: 64px;
    padding: 10px;
    border-radius: 12px;
  }

  .privacy-setting-box small {
    margin-top: 5px;
    font-size: 12px;
  }

  .privacy-switch {
    width: 52px;
    height: 30px;
    flex-basis: 52px;
  }

  .privacy-switch span {
    width: 22px;
    height: 22px;
  }

  .privacy-switch.is-on span {
    transform: translateX(22px);
  }

  .privacy-preview,
  .privacy-select-box {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
  }

  .privacy-explain-list {
    gap: 5px;
  }

  .privacy-treehole-panel {
    gap: 10px;
  }

  .privacy-search {
    min-height: 40px;
    border-radius: 10px;
  }

  .privacy-treehole-empty {
    padding: 14px;
    border-radius: 12px;
  }
}

@media (max-width: 420px) {
  .privacy-overview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .privacy-view .privacy-notification-card {
    gap: 10px;
  }

  .privacy-notification-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .privacy-notification-row.privacy-setting-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 72px;
    padding: 10px;
    border-radius: 12px;
  }

  .privacy-notification-row .privacy-setting-box,
  .privacy-notification-row > div {
    min-width: 0;
  }

  .privacy-notification-row strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .privacy-notification-row small {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .privacy-notification-row .privacy-switch {
    width: 42px;
    height: 26px;
    flex-basis: 42px;
  }

  .privacy-notification-row .privacy-switch span {
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
  }

  .privacy-notification-row .privacy-switch.is-on span {
    transform: translateX(16px);
  }

  .privacy-notification-card .privacy-card-hint {
    font-size: 12px;
    line-height: 1.45;
  }
}

@media (max-width: 720px) {
  .privacy-view .hub-hero h2 {
    font-size: 24px;
    line-height: 1.1;
  }

  .privacy-view .hub-hero p,
  .privacy-card-copy p,
  .privacy-card-hint,
  .privacy-preview,
  .privacy-select-box {
    font-size: 12px;
    line-height: 1.45;
  }

  .privacy-section-title strong,
  .privacy-card-copy strong,
  .privacy-setting-box strong {
    font-size: 16px;
    line-height: 1.25;
  }

  .privacy-overview-item strong,
  .privacy-notification-row strong,
  .privacy-treehole-friend-copy strong,
  .privacy-treehole-empty strong {
    font-size: 13px;
    line-height: 1.25;
  }

  .privacy-card-copy small,
  .privacy-setting-box small,
  .privacy-select-box span,
  .privacy-overview-item small,
  .privacy-explain-list p,
  .privacy-view .privacy-explain-list p strong,
  .privacy-treehole-friend-copy small,
  .privacy-notification-row small {
    font-size: 11px;
  }

  #adminView > .admin-console-head h2 {
    font-size: 18px;
    line-height: 1.05;
  }

  #adminView .panel-heading h3,
  #adminView .admin-card-head h3,
  #adminView .admin-card-head strong,
  #adminView .people-batch-head h4,
  #adminView .plaz-admin-overview-grid h4,
  #adminView .plaz-admin-detail h4 {
    font-size: 16px;
    line-height: 1.25;
  }

  #adminView .admin-summary strong,
  #adminView .people-stats strong,
  #adminView .admin-overview-grid strong,
  #adminView .admin-system-card > strong,
  #adminView .admin-metric-list strong {
    font-size: 20px;
    line-height: 1.05;
  }

  #adminView .admin-menu-label,
  #adminView .panel-heading span,
  #adminView .admin-card-head span,
  #adminView .admin-summary span,
  #adminView .people-stats span,
  #adminView .people-module-chips span,
  #adminView .admin-overview-grid span,
  #adminView .admin-overview-grid small,
  #adminView .admin-system-toolbar,
  #adminView .admin-system-card > span,
  #adminView .admin-system-card small,
  #adminView .admin-system-meta-grid span,
  #adminView .admin-system-storage span,
  #adminView .admin-system-module-list span,
  #adminView .admin-mobile-note,
  #adminView .muted-text,
  #adminView .people-batch-panel p,
  #adminView .plaz-admin-result-count {
    font-size: 12px;
    line-height: 1.4;
  }

  #adminView .admin-activity-stack p,
  #adminView .admin-metric-list p,
  #adminView .admin-status-list p,
  #adminView .admin-system-meta-grid b,
  #adminView .admin-system-storage b,
  #adminView .admin-system-module-list b {
    font-size: 12px;
    line-height: 1.4;
  }
}