canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.tc-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px;
  color: var(--foreground);
}

.tc-page-shell {
  display: grid;
  gap: 22px;
}

.tc-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.tc-page-copy {
  min-width: 0;
}

.tc-title {
  margin: 0;
  color: var(--foreground);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0;
}

.tc-subtitle {
  margin: 7px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.tc-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
  min-width: 500px;
}

.tc-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-2);
  box-shadow: none;
}

.tc-stat strong {
  display: block;
  color: var(--foreground);
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.tc-stat span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

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

.tc-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.tc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  background: rgba(15, 23, 42, 0.28);
}

.tc-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tc-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.20);
  color: #dbeafe;
  font-size: 18px;
  flex: 0 0 auto;
}

.tc-card-title {
  margin: 0;
  color: var(--foreground);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 900;
}

.tc-card-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.tc-list {
  padding: 10px;
}

.tc-list-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.tc-list-item:hover {
  background: rgba(15, 23, 42, 0.34);
  border-color: rgba(96, 165, 250, 0.18);
}

.tc-rank {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #bfdbfe;
  background: rgba(15, 42, 71, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 12px;
  font-weight: 900;
}

.tc-item-title {
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.tc-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.action-link,
.tc-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  gap: 8px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: var(--radius);
  background: rgba(37, 99, 235, 0.14);
  color: #dbeafe;
  font-weight: 800;
  padding: 0 12px;
}

.action-link:hover,
.tc-action-link:hover {
  background: rgba(37, 99, 235, 0.24);
  color: #ffffff;
  text-decoration: none;
}

.menu-item {
  color: var(--muted);
}

.menu-item:hover,
.menu-item.active {
  background: var(--primary-soft);
  color: var(--foreground);
}

.media-table {
  width: 100%;
  table-layout: fixed;
}

.media-table th,
.media-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-table .col-name {
  width: 60%;
}

.media-table .col-size,
.media-table .col-modified {
  width: 20%;
}

.login-form {
  width: 100%;
  max-width: 420px;
  margin: 32px auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(8, 17, 31, 0.88));
  box-shadow: var(--shadow);
}

.login-form h1 {
  margin: 0 0 18px;
  text-align: center;
}

.adm-toolbar.tc-card,
.adm-card.tc-card,
.logs-panel.tc-card,
.log-card.tc-card,
.mm-panel.tc-card,
.mm-empty-panel.tc-card,
.wishlist-top-panel.tc-card,
.wishlist-toolbar.tc-card,
.wishlist-card.tc-card,
.wishlist-empty.tc-card {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18) !important;
}

.adm-stat.tc-stat,
.mm-count-card.tc-stat {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.adm-chip.tc-badge,
.logs-tab.tc-badge,
.logs-pill.tc-badge,
.mm-letter.tc-badge {
  border-color: rgba(96, 165, 250, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.14) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}

.adm-chip.tc-badge.active,
.logs-tab.tc-badge.active,
.logs-tab.tc-badge:hover,
.mm-letter.tc-badge.is-active,
.mm-letter.tc-badge:hover {
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: rgba(37, 99, 235, 0.24) !important;
  color: #ffffff !important;
}

.adm-button.tc-action-link,
.logs-button.tc-action-link,
.mm-primary-button.tc-action-link,
.adm-page-link.tc-action-link,
.logs-page-link.tc-action-link,
.mm-page-link.tc-action-link,
.wishlist-page-link.tc-action-link {
  min-height: 36px !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
  border-radius: var(--radius) !important;
  background: rgba(37, 99, 235, 0.14) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}

.adm-button.tc-action-link:hover,
.logs-button.tc-action-link:hover,
.mm-primary-button.tc-action-link:hover,
.adm-page-link.tc-action-link:hover,
.logs-page-link.tc-action-link:hover,
.mm-page-link.tc-action-link:hover,
.wishlist-page-link.tc-action-link:hover,
.adm-page-link.tc-action-link.active,
.mm-page-link.tc-action-link.is-active,
.wishlist-page-link.tc-action-link.is-active {
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: rgba(37, 99, 235, 0.24) !important;
  color: #ffffff !important;
}

.tc-login-card,
.tc-form.tc-card,
.profile-card,
.profile-card.tc-card,
.profile-danger-card,
.profile-danger-card.tc-card,
.mu-toolbar.tc-card,
.mu-table-card.tc-card,
.mu-modal-panel.tc-card,
.wish-modal-panel {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18) !important;
  color: var(--foreground) !important;
}

.mu-stat-card.tc-stat {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.mu-tab.tc-badge,
.mu-tab.tc-badge.is-active,
.wish-category-card {
  border-color: rgba(96, 165, 250, 0.24) !important;
  border-radius: var(--radius) !important;
  background: rgba(37, 99, 235, 0.14) !important;
  color: #dbeafe !important;
}

.mu-tab.tc-badge.is-active,
.mu-tab.tc-badge:hover,
.wish-category-card.is-active,
.wish-category-card:hover {
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: rgba(37, 99, 235, 0.24) !important;
  color: #ffffff !important;
}

.tc-submit.tc-action-link,
.profile-button.tc-action-link,
.profile-danger-button.tc-action-link,
.mu-primary-btn.tc-action-link,
.mu-secondary-btn.tc-action-link,
.mu-danger-btn.tc-action-link,
.mu-ghost-btn.tc-action-link,
.mu-action-btn.tc-action-link,
.wish-submit,
.wish-cancel {
  min-height: 36px !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
  border-radius: var(--radius) !important;
  background: rgba(37, 99, 235, 0.14) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}

.tc-submit.tc-action-link:hover,
.profile-button.tc-action-link:hover,
.profile-danger-button.tc-action-link:hover,
.mu-primary-btn.tc-action-link:hover,
.mu-secondary-btn.tc-action-link:hover,
.mu-danger-btn.tc-action-link:hover,
.mu-ghost-btn.tc-action-link:hover,
.mu-action-btn.tc-action-link:hover,
.wish-submit:hover,
.wish-cancel:hover {
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: rgba(37, 99, 235, 0.24) !important;
  color: #ffffff !important;
}

@media (max-width: 1180px) {
  .tc-page-hero {
    grid-template-columns: 1fr;
  }

  .tc-stat-grid {
    min-width: 0;
  }
}

@media (max-width: 980px) {
  .tc-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tc-page {
    padding: 16px;
  }

  .tc-stat-grid {
    grid-template-columns: 1fr;
  }

  .tc-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tc-list-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .tc-item-side {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}