@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500;600;700&display=swap");

:root {
  --al-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --al-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --al-bg: #f8fafc;
  --al-surface: #ffffff;
  --al-surface-soft: #f1f5f9;
  --al-surface-tint: #eef2ff;
  --al-text: #111827;
  --al-text-muted: #64748b;
  --al-text-soft: #94a3b8;
  --al-border: #dbe4f0;
  --al-border-strong: #cbd5e1;

  --al-free-primary: #16a34a;
  --al-free-primary-hover: #15803d;
  --al-free-primary-soft: #ecfdf5;
  --al-free-primary-border: #bbf7d0;
  --al-free-primary-rgb: 22, 163, 74;

  --al-monitor-primary: #7c3aed;
  --al-monitor-primary-hover: #6d28d9;
  --al-monitor-primary-soft: #f5f3ff;
  --al-monitor-primary-border: #ddd6fe;
  --al-monitor-primary-rgb: 124, 58, 237;

  --al-examiner-primary: #f97316;
  --al-examiner-primary-hover: #ea580c;
  --al-examiner-primary-soft: #fff7ed;
  --al-examiner-primary-border: #fed7aa;
  --al-examiner-primary-rgb: 249, 115, 22;

  --al-plan-primary: var(--al-free-primary);
  --al-plan-primary-hover: var(--al-free-primary-hover);
  --al-plan-primary-soft: var(--al-free-primary-soft);
  --al-plan-primary-border: var(--al-free-primary-border);
  --al-plan-primary-rgb: var(--al-free-primary-rgb);
  --al-plan-primary-shadow: rgba(var(--al-plan-primary-rgb), .22);
  --al-focus-ring: rgba(var(--al-plan-primary-rgb), .24);
  --al-back-primary: var(--al-plan-primary);
  --al-back-primary-hover: var(--al-plan-primary-hover);
  --al-back-primary-shadow: rgba(var(--al-plan-primary-rgb), .30);

  --al-primary: var(--al-plan-primary);
  --al-primary-hover: var(--al-plan-primary-hover);
  --al-primary-soft: var(--al-plan-primary-soft);
  --al-teal: #0d9488;
  --al-success: #16a34a;
  --al-warning: #f59e0b;
  --al-danger: #dc2626;
  --al-purple: #7c3aed;

  --al-radius-xs: 8px;
  --al-radius-sm: 10px;
  --al-radius-md: 14px;
  --al-radius-lg: 18px;
  --al-radius-xl: 24px;
  --al-radius-pill: 999px;

  --al-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
  --al-shadow-md: 0 8px 24px rgba(15, 23, 42, .10);
  --al-shadow-lg: 0 22px 70px rgba(15, 23, 42, .16);

  --al-page-pad: clamp(12px, 2vw, 24px);
  --al-control-h: 42px;
  --al-back-button-size: 48px;
  --al-transition: 160ms ease;
}

:root[data-al-plan="free"] {
  --al-plan-primary: var(--al-free-primary);
  --al-plan-primary-hover: var(--al-free-primary-hover);
  --al-plan-primary-soft: var(--al-free-primary-soft);
  --al-plan-primary-border: var(--al-free-primary-border);
  --al-plan-primary-rgb: var(--al-free-primary-rgb);
}

:root[data-al-plan="monitor"] {
  --al-plan-primary: var(--al-monitor-primary);
  --al-plan-primary-hover: var(--al-monitor-primary-hover);
  --al-plan-primary-soft: var(--al-monitor-primary-soft);
  --al-plan-primary-border: var(--al-monitor-primary-border);
  --al-plan-primary-rgb: var(--al-monitor-primary-rgb);
}

:root[data-al-plan="examiner"],
:root[data-al-plan="institution"],
:root[data-al-plan="institution-examiner"] {
  --al-plan-primary: var(--al-examiner-primary);
  --al-plan-primary-hover: var(--al-examiner-primary-hover);
  --al-plan-primary-soft: var(--al-examiner-primary-soft);
  --al-plan-primary-border: var(--al-examiner-primary-border);
  --al-plan-primary-rgb: var(--al-examiner-primary-rgb);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--al-font-body);
  color: var(--al-text);
}

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

button,
[role="button"],
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  touch-action: manipulation;
}

input,
select,
textarea {
  min-width: 0;
}

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

:focus-visible:not(input):not(textarea):not(select) {
  outline: 3px solid var(--al-focus-ring);
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: none;
}

.al-page-shell {
  min-height: 100dvh;
  background:
    radial-gradient(1000px 600px at 12% -10%, rgba(var(--al-plan-primary-rgb), .12), transparent 58%),
    radial-gradient(900px 560px at 100% 0%, rgba(13, 148, 136, .10), transparent 55%),
    var(--al-bg);
}

.al-app-header {
  min-height: 56px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px var(--al-page-pad);
  background: linear-gradient(135deg, var(--al-primary), var(--al-primary-hover));
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--al-plan-primary-rgb), .20);
}

.al-header-title {
  min-width: 0;
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.18;
}

.al-header-subtitle {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 700;
}

.al-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.al-back-button {
  width: var(--al-back-button-size);
  min-width: var(--al-back-button-size);
  height: var(--al-back-button-size);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--al-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: linear-gradient(135deg, var(--al-back-primary), var(--al-back-primary-hover));
  color: #ffffff;
  box-shadow: 0 12px 28px var(--al-back-primary-shadow);
  cursor: pointer;
  transition:
    transform var(--al-transition),
    box-shadow var(--al-transition),
    background var(--al-transition),
    border-color var(--al-transition);
}

.al-back-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--al-back-primary-hover), var(--al-back-primary));
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 16px 34px var(--al-back-primary-shadow);
}

.al-back-button svg,
.al-back-button .back-arrow {
  width: 28px;
  height: 28px;
  font-size: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.al-floating-back-button {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px) + 12px);
  left: max(12px, env(safe-area-inset-left, 0px) + 12px);
  z-index: 2147483647;
}

html[dir="rtl"] .al-floating-back-button {
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px) + 12px);
}

html[dir="rtl"] .al-back-button svg,
html[dir="rtl"] .al-back-button .back-arrow,
html[dir="rtl"] .al-page-back-button svg {
  transform: scaleX(-1);
}

.al-card {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg);
  box-shadow: var(--al-shadow-sm);
  transition:
    transform var(--al-transition),
    box-shadow var(--al-transition),
    border-color var(--al-transition);
}

.al-card.is-elevated {
  box-shadow: var(--al-shadow-md);
}

.al-card.is-active,
.al-card:hover {
  border-color: var(--al-plan-primary-border);
  box-shadow: 0 12px 30px rgba(var(--al-plan-primary-rgb), .12);
}

.al-btn {
  min-height: var(--al-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--al-radius-md);
  border: 1px solid var(--al-border);
  background: var(--al-surface);
  color: var(--al-text);
  padding: 0 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--al-transition),
    box-shadow var(--al-transition),
    background var(--al-transition),
    border-color var(--al-transition);
}

.al-btn:hover {
  transform: translateY(-1px);
  border-color: var(--al-plan-primary-border);
  box-shadow: var(--al-shadow-md);
}

.al-btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--al-primary), var(--al-primary-hover));
  color: #ffffff;
  box-shadow: 0 10px 24px var(--al-plan-primary-shadow);
}

.al-btn-secondary {
  color: var(--al-primary);
  background: var(--al-primary-soft);
  border-color: var(--al-plan-primary-border);
}

.al-icon-button {
  width: var(--al-control-h);
  min-width: var(--al-control-h);
  height: var(--al-control-h);
  padding: 0;
  border-radius: var(--al-radius-md);
}

.al-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--al-radius-pill);
  border: 1px solid var(--al-border);
  background: var(--al-surface);
  color: var(--al-text-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.al-chip.is-active,
.al-status-chip.is-active,
.al-tab.is-active {
  color: var(--al-primary);
  background: var(--al-primary-soft);
  border-color: var(--al-plan-primary-border);
}

.al-dialog-surface {
  width: min(720px, calc(100vw - 24px));
  max-height: min(90dvh, 900px);
  overflow: auto;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-xl);
  box-shadow: var(--al-shadow-lg);
}

.al-dialog-title {
  margin: 0;
  color: var(--al-text);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.2;
}

.al-dialog-accent {
  border-color: var(--al-plan-primary-border);
  box-shadow: 0 22px 70px rgba(var(--al-plan-primary-rgb), .16);
}

.al-input,
.al-select,
.al-textarea {
  min-height: var(--al-control-h);
  width: 100%;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-md);
  background: var(--al-surface);
  color: var(--al-text);
  padding: 10px 12px;
  transition:
    box-shadow var(--al-transition),
    border-color var(--al-transition),
    background var(--al-transition);
}

.al-input:focus,
.al-select:focus,
.al-textarea:focus {
  border-color: var(--al-primary);
  box-shadow: none;
  outline: 0;
}

.al-toggle {
  position: relative;
  width: 48px;
  min-width: 48px;
  height: 28px;
  border-radius: var(--al-radius-pill);
  border: 1px solid var(--al-border);
  background: var(--al-border-strong);
  transition:
    background var(--al-transition),
    border-color var(--al-transition);
}

.al-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--al-shadow-sm);
  transition: transform var(--al-transition);
}

.al-toggle[aria-checked="true"],
.al-toggle.is-on,
input:checked + .al-toggle {
  background: var(--al-primary);
  border-color: var(--al-primary);
}

.al-toggle[aria-checked="true"]::after,
.al-toggle.is-on::after,
input:checked + .al-toggle::after {
  transform: translateX(20px);
}

.al-responsive-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .58);
  border-radius: var(--al-radius-pill);
}

@media (max-width: 760px) {
  :root {
    --al-page-pad: 12px;
    --al-control-h: 40px;
  }

  .al-card {
    border-radius: var(--al-radius-md);
  }

  .al-btn {
    padding-inline: 12px;
  }
}