@font-face {
  font-family: "TT Norms Pro";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/playground/assets/fonts/TTNormsProVariable.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --aics-white: #ffffff;
  --aics-black: #000000;
  --aics-gray-10: #f5f5f5;
  --aics-gray-20: #dcdcdc;
  --aics-gray-30: #cccccc;
  --aics-gray-40: #b3b3b3;
  --aics-gray-50: #999999;
  --aics-gray-60: #818181;
  --aics-gray-70: #666666;
  --aics-gray-80: #4d4d4d;
  --aics-gray-90: #262626;
  --aics-gray-100: #181818;
  --aics-slate-5: #f7f8fa;
  --aics-slate-10: #f2f4f7;
  --aics-slate-20: #dadce0;
  --aics-slate-30: #cbcdd1;
  --aics-slate-40: #aeafb3;
  --aics-slate-50: #8a8c8f;
  --aics-slate-60: #7d7e81;
  --aics-slate-70: #636466;
  --aics-slate-80: #4b4b4d;
  --aics-slate-90: #282829;
  --aics-slate-100: #1b1b1c;
  --aics-blue-10: #ecf5ff;
  --aics-blue-20: #cce4ff;
  --aics-blue-30: #99caff;
  --aics-blue-40: #61adff;
  --aics-blue-50: #248dff;
  --aics-blue-60: #006ce1;
  --aics-blue-70: #0051a8;
  --aics-blue-80: #003a7a;
  --aics-red-50: #e75b4b;
  --aics-red-60: #b42d18;
  --aics-green-50: #6fc371;
  --aics-green-60: #1a821c;
  --aics-yellow-30: #f5ac5f;
  --aics-yellow-50: #ef7520;
  --aics-bg: var(--aics-white);
  --aics-fg: var(--aics-gray-100);
  --aics-muted: var(--aics-gray-10);
  --aics-muted-fg: var(--aics-gray-60);
  --aics-card: var(--aics-white);
  --aics-card-fg: var(--aics-gray-80);
  --aics-border: var(--aics-gray-20);
  --aics-input: var(--aics-white);
  --aics-primary: var(--aics-blue-60);
  --aics-primary-hover: var(--aics-blue-70);
  --aics-primary-fg: var(--aics-white);
  --aics-success: var(--aics-green-60);
  --aics-warning: var(--aics-yellow-50);
  --aics-danger: var(--aics-red-50);
  --aics-info: var(--aics-blue-50);
  --aics-radius: 8px;
  --aics-sidebar-width: 16rem;
  --aics-sidebar-collapsed-width: 3rem;
  --aics-font-body: Inter, "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aics-font-heading: "TT Norms Pro", Inter, "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.dark {
  color-scheme: dark;
  --aics-bg: #16151b;
  --aics-fg: var(--aics-gray-10);
  --aics-muted: var(--aics-gray-90);
  --aics-muted-fg: var(--aics-gray-40);
  --aics-card: #16151b;
  --aics-card-fg: var(--aics-gray-10);
  --aics-border: var(--aics-gray-80);
  --aics-input: var(--aics-gray-90);
  --aics-warning: var(--aics-yellow-30);
}

html.aics-ready body.aics-page,
html.aics-ready body.aics-auth-page {
  --bg-color: var(--aics-bg);
  --card-bg: var(--aics-card);
  --primary: var(--aics-primary);
  --text-primary: var(--aics-fg);
  --text-secondary: var(--aics-muted-fg);
  --input-bg: var(--aics-muted);
  --border: var(--aics-border);
  --success: var(--aics-success);
  --warning: var(--aics-warning);
  --danger: var(--aics-danger);
  --info: var(--aics-info);
  font-family: var(--aics-font-body);
  background: var(--aics-bg);
  color: var(--aics-fg);
}

body.aics-page h1,
body.aics-page h2,
body.aics-page h3,
body.aics-auth-page h1 {
  font-family: var(--aics-font-heading);
  letter-spacing: 0;
  color: var(--aics-fg);
  background: none;
  -webkit-text-fill-color: currentColor;
}

body.aics-shell {
  padding: 0;
}

body.aics-shell > .container {
  max-width: none;
  min-height: 100vh;
  margin-left: var(--aics-sidebar-width);
  padding: 0;
  transition: margin-left 0.2s ease;
}

body.aics-shell.aics-sidebar-collapsed > .container {
  margin-left: var(--aics-sidebar-collapsed-width);
}

body.aics-shell header {
  min-height: 64px;
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--aics-border);
  background: var(--aics-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

body.aics-shell header h1 {
  font-size: 1.25rem;
  font-weight: 650;
}

body.aics-shell header .user-info,
body.aics-shell header .header-links,
body.aics-shell header .btn-new,
body.aics-shell header #obs-link,
body.aics-shell header .back-link,
body.aics-shell .user-bar {
  display: none !important;
}

body.aics-shell > .container > .card,
body.aics-shell > .container > .main-grid,
body.aics-shell > .container > #main-content,
body.aics-shell > .container > .record-nav,
body.aics-shell > .container > div:not(.modal-overlay):not(.aics-mobile-backdrop) {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 16px;
}

body.aics-shell .card,
body.aics-page .aics-card {
  background: var(--aics-card);
  color: var(--aics-card-fg);
  border: 1px solid var(--aics-border);
  border-radius: var(--aics-radius);
  box-shadow: none;
}

body.aics-shell .card-header,
body.aics-page .aics-card-header {
  border-bottom: 1px solid var(--aics-border);
  padding: 14px 20px;
  min-height: 52px;
}

body.aics-shell .card-title {
  font-family: var(--aics-font-heading);
  color: var(--aics-fg);
}

body.aics-page input,
body.aics-page textarea,
body.aics-page select,
body.aics-auth-page input {
  background: var(--aics-input);
  border: 1px solid var(--aics-border);
  border-radius: var(--aics-radius);
  color: var(--aics-fg);
}

body.aics-page input:focus,
body.aics-page textarea:focus,
body.aics-page select:focus,
body.aics-auth-page input:focus {
  border-color: var(--aics-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aics-primary) 20%, transparent);
}

body.aics-page label,
body.aics-auth-page label,
body.aics-page .record-count,
body.aics-page .created-at,
body.aics-page .review-id-short {
  color: var(--aics-muted-fg);
}

.aics-button,
body.aics-page .btn-primary,
body.aics-page .btn-new,
body.aics-auth-page button {
  min-height: 36px;
  border-radius: var(--aics-radius);
  border: 1px solid transparent;
  background: var(--aics-primary);
  color: var(--aics-primary-fg);
  font-weight: 650;
  text-decoration: none;
  box-shadow: none;
}

.aics-button:hover,
body.aics-page .btn-primary:hover,
body.aics-page .btn-new:hover,
body.aics-auth-page button:hover {
  background: var(--aics-primary-hover);
  opacity: 1;
}

body.aics-page .btn-secondary,
body.aics-page .nav-link,
body.aics-page .logout-btn,
body.aics-page .btn-logout,
body.aics-page .toggle-btn {
  background: var(--aics-card);
  border: 1px solid var(--aics-border);
  color: var(--aics-fg);
  border-radius: var(--aics-radius);
  box-shadow: none;
}

body.aics-page .btn-secondary:hover,
body.aics-page .nav-link:hover,
body.aics-page .toggle-btn:hover {
  background: var(--aics-muted);
  border-color: var(--aics-border);
  color: var(--aics-fg);
}

body.aics-page table {
  border-collapse: collapse;
}

body.aics-page thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--aics-bg);
  color: var(--aics-muted-fg);
  border-bottom: 1px solid var(--aics-border);
  padding: 10px 12px;
  font-size: 0.75rem;
  letter-spacing: 0;
}

body.aics-page tbody td {
  border-bottom: 1px solid var(--aics-border);
  padding: 10px 12px;
}

body.aics-page tbody tr {
  border-bottom: 0;
}

body.aics-page tbody tr:hover {
  background: var(--aics-muted);
}

body.aics-page .score-pill,
body.aics-page .badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.75rem;
}

body.aics-page .score-high,
body.aics-page .badge-on,
body.aics-page .confirm-status.confirmed,
body.aics-page .job-status.completed {
  color: var(--aics-success);
}

body.aics-page .score-mid,
body.aics-page .job-status.pending {
  color: var(--aics-warning);
}

body.aics-page .score-low,
body.aics-page .badge-off,
body.aics-page .job-status.failed {
  color: var(--aics-danger);
}

body.aics-page .job-status.running {
  color: var(--aics-info);
}

.aics-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--aics-sidebar-width);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--aics-border);
  background: var(--aics-bg);
  color: var(--aics-fg);
  transition: width 0.2s ease, transform 0.2s ease;
}

.aics-sidebar-header {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--aics-border);
}

.aics-sidebar-logo {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.aics-sidebar-title {
  font-family: var(--aics-font-heading);
  font-weight: 700;
  white-space: nowrap;
}

.aics-sidebar-toggle,
.aics-mobile-trigger {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--aics-border);
  border-radius: var(--aics-radius);
  background: var(--aics-card);
  color: var(--aics-fg);
  cursor: pointer;
}

.aics-sidebar-toggle {
  margin-left: auto;
  flex: 0 0 auto;
}

.aics-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
}

.aics-nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--aics-fg);
  text-decoration: none;
  font-family: var(--aics-font-heading);
  font-weight: 650;
  cursor: pointer;
}

.aics-nav-link:hover,
.aics-nav-link.is-active {
  background: var(--aics-muted);
  color: var(--aics-fg);
}

.aics-nav-icon {
  width: 18px;
  height: 18px;
  color: var(--aics-muted-fg);
  flex: 0 0 auto;
}

.aics-sidebar-footer {
  margin-top: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--aics-border);
}

.aics-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--aics-muted-fg);
  font-size: 0.85rem;
}

.aics-user-row strong {
  color: var(--aics-fg);
}

.aics-theme-toggle,
.aics-logout {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--aics-border);
  border-radius: var(--aics-radius);
  background: var(--aics-card);
  color: var(--aics-fg);
  cursor: pointer;
  font-weight: 650;
}

body.aics-sidebar-collapsed .aics-sidebar {
  width: var(--aics-sidebar-collapsed-width);
}

body.aics-sidebar-collapsed .aics-sidebar-header {
  padding: 0 6px;
  justify-content: center;
}

body.aics-sidebar-collapsed .aics-sidebar-title,
body.aics-sidebar-collapsed .aics-nav-text,
body.aics-sidebar-collapsed .aics-sidebar-logo,
body.aics-sidebar-collapsed .aics-sidebar-footer {
  display: none;
}

body.aics-sidebar-collapsed .aics-sidebar-toggle {
  display: inline-flex;
  margin-left: 0;
}

body.aics-sidebar-collapsed .aics-nav-link {
  justify-content: center;
  padding: 0;
}

.aics-mobile-trigger {
  display: none;
  margin-right: 8px;
}

.aics-mobile-backdrop {
  display: none;
}

body.aics-auth-page {
  padding: 20px;
}

body.aics-auth-page .wrap {
  max-width: 400px;
}

body.aics-auth-page h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.35rem;
}

body.aics-auth-page h1::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url("/playground/assets/aics-logo.svg") center / contain no-repeat;
}

body.aics-auth-page .card {
  background: var(--aics-card);
  border: 1px solid var(--aics-border);
  border-radius: var(--aics-radius);
  box-shadow: none;
}

body.aics-review-page .main-grid {
  gap: 16px;
}

body.aics-review-page .score-display {
  background: var(--aics-card);
  border: 1px solid var(--aics-border);
  border-radius: var(--aics-radius);
}

body.aics-review-page .score-value {
  color: var(--aics-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
}

body.aics-review-page .summary-stats .stat-item,
body.aics-review-page .stat-item {
  background: var(--aics-muted);
  border-radius: var(--aics-radius);
}

@media (max-width: 800px) {
  body.aics-shell > .container,
  body.aics-shell.aics-sidebar-collapsed > .container {
    margin-left: 0;
  }

  body.aics-shell header {
    padding-left: 12px;
  }

  .aics-mobile-trigger {
    display: inline-flex;
  }

  .aics-sidebar {
    width: 18rem;
    transform: translateX(-100%);
  }

  body.aics-mobile-open .aics-sidebar {
    transform: translateX(0);
  }

  body.aics-sidebar-collapsed .aics-sidebar {
    width: 18rem;
  }

  body.aics-sidebar-collapsed .aics-sidebar-title,
  body.aics-sidebar-collapsed .aics-nav-text,
  body.aics-sidebar-collapsed .aics-sidebar-logo,
  body.aics-sidebar-collapsed .aics-sidebar-footer {
    display: flex;
  }

  body.aics-mobile-open .aics-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: color-mix(in srgb, var(--aics-black) 38%, transparent);
  }
}