:root {
  --albumica-ink: #172033;
  --albumica-muted: #68738b;
  --albumica-line: #e3e7f0;
  --albumica-line-strong: #d6dbea;
  --albumica-primary: #5b50e6;
  --albumica-primary-dark: #4539ce;
  --albumica-primary-soft: #efedff;
  --albumica-background: #f5f6fb;
  --albumica-surface: #ffffff;
  --albumica-info: #2e6f9e;
  --albumica-info-soft: #edf7ff;
  --albumica-success: #247a4b;
  --albumica-success-soft: #edf9f2;
  --albumica-warning: #a66408;
  --albumica-warning-soft: #fff7e8;
  --albumica-danger: #b4232d;
  --albumica-danger-dark: #941b24;
  --albumica-danger-soft: #fff0f1;
  --albumica-radius-sm: 10px;
  --albumica-radius-md: 16px;
  --albumica-radius-lg: 22px;
  --albumica-shadow-soft: 0 14px 36px rgba(30, 40, 73, 0.07);
  --albumica-shadow-card: 0 8px 24px rgba(30, 40, 73, 0.055);
  --albumica-focus: 0 0 0 4px rgba(91, 80, 230, 0.18);
}

html { color-scheme: light; }
body { color: var(--albumica-ink); background: var(--albumica-background); }
button, input, select, textarea { font: inherit; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--albumica-primary); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Albumica Page Hero
   -------------------------------------------------------------------------- */
.page-hero,
.page-heading.page-hero,
.contest-hero.page-hero,
.public-profile-hero.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 126px;
  margin: 0 0 24px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid #dfe3f3;
  border-radius: var(--albumica-radius-lg);
  background:
    radial-gradient(circle at 90% 12%, rgba(91, 80, 230, 0.08), transparent 30%),
    linear-gradient(112deg, #ffffff 0%, #f8f7ff 58%, #f1fbfa 100%);
  box-shadow: var(--albumica-shadow-soft);
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -74px;
  bottom: -104px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(91, 80, 230, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero > :first-child { min-width: 0; }
.page-hero h1,
.page-hero h2 {
  margin: 5px 0 8px !important;
  color: var(--albumica-ink);
  font-size: clamp(1.75rem, 2.7vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.page-hero p:not(.eyebrow),
.page-hero .lead {
  max-width: 820px;
  margin: 0;
  color: var(--albumica-muted);
  line-height: 1.72;
}
.page-hero .eyebrow,
.page-hero__eyebrow {
  margin: 0 !important;
  color: var(--albumica-primary) !important;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.page-hero .heading-actions,
.page-hero__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}
.page-hero .heading-actions form,
.page-hero > form { margin: 0; }
.page-hero .storage-summary-mini,
.page-hero .album-editor-status,
.page-hero__summary {
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 15px 18px;
  border: 1px solid rgba(91, 80, 230, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 18px rgba(36, 44, 75, 0.045);
}
.page-hero .storage-summary-mini span,
.page-hero .album-editor-status small,
.page-hero__summary span { color: var(--albumica-muted); font-size: 0.76rem; }
.page-hero .storage-summary-mini strong,
.page-hero__summary strong { color: var(--albumica-ink); font-size: 1rem; }
.page-hero .contest-meta,
.page-hero .host-line { color: var(--albumica-muted); }
.page-hero .contest-meta { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */
.primary-button,
.secondary-button,
.danger-button,
.disabled-button,
.button,
.button--primary,
.button--secondary,
.button--danger,
.primary-action,
.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.primary-button,
.button--primary,
.primary-action {
  color: #fff !important;
  border-color: var(--albumica-primary);
  background: var(--albumica-primary);
  box-shadow: 0 8px 18px rgba(91, 80, 230, 0.18);
}
.primary-button:hover,
.button--primary:hover,
.primary-action:hover { background: var(--albumica-primary-dark); border-color: var(--albumica-primary-dark); transform: translateY(-1px); }
.secondary-button,
.button--secondary,
.logout-button {
  color: var(--albumica-ink) !important;
  border-color: var(--albumica-line-strong);
  background: var(--albumica-surface);
}
.secondary-button:hover,
.button--secondary:hover,
.logout-button:hover { color: var(--albumica-primary) !important; border-color: rgba(91, 80, 230, 0.38); background: #fbfaff; transform: translateY(-1px); }
.danger-button,
.button--danger {
  color: #fff !important;
  border-color: var(--albumica-danger);
  background: var(--albumica-danger);
  box-shadow: 0 8px 18px rgba(180, 35, 45, 0.14);
}
.danger-button:hover,
.button--danger:hover { background: var(--albumica-danger-dark); border-color: var(--albumica-danger-dark); transform: translateY(-1px); }
.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled,
button:disabled,
.disabled-button {
  color: #8991a4 !important;
  border-color: #e2e5ec !important;
  background: #eef0f4 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.9;
}
.full { width: 100%; }
.text-button,
.link-button,
.primary-link { color: var(--albumica-primary); font-weight: 700; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Cards, panels, lists and forms
   -------------------------------------------------------------------------- */
.panel,
.summary-card,
.auth-card,
.login-card,
.special-thanks-section,
.contest-section,
.article-panel,
.empty-panel,
.error-card {
  border-color: var(--albumica-line) !important;
  border-radius: var(--albumica-radius-md) !important;
  background: var(--albumica-surface);
  box-shadow: var(--albumica-shadow-card);
}
.panel { padding: clamp(18px, 2.2vw, 26px); }
.panel-heading,
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.panel-heading h2,
.section-heading h2 { margin: 0 0 5px; letter-spacing: -0.02em; }
.panel-heading p,
.section-heading p { margin: 0; color: var(--albumica-muted); line-height: 1.65; }

form .field,
.form-field { display: grid; gap: 7px; }
label { color: var(--albumica-ink); font-weight: 700; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--albumica-line-strong);
  border-radius: var(--albumica-radius-sm);
  color: var(--albumica-ink);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
textarea { min-height: 118px; resize: vertical; }
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--albumica-primary);
  box-shadow: var(--albumica-focus);
}
input:disabled,
select:disabled,
textarea:disabled { color: #7d8597; background: #f0f2f6; cursor: not-allowed; }
.help-text,
.field-help { margin: 0; color: var(--albumica-muted); font-size: 0.82rem; line-height: 1.55; }
.field-error { margin: 0; color: var(--albumica-danger); font-size: 0.82rem; font-weight: 650; }
.field:has(.field-error) input,
.field:has(.field-error) select,
.field:has(.field-error) textarea { border-color: rgba(180, 35, 45, 0.7); background: #fffafb; }
.form-actions,
.form-footer,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   Messages, status and empty states
   -------------------------------------------------------------------------- */
.message-stack { display: grid; gap: 10px; margin-bottom: 18px; }
.message,
.form-alert,
.beta-notice,
.policy-readonly-banner,
.danger-zone,
.warning-panel,
.status-box,
.beta-admin-notice {
  border: 1px solid var(--albumica-line);
  border-radius: 14px;
  line-height: 1.65;
}
.message { padding: 13px 15px; font-weight: 650; }
.message-info { color: #245f87; border-color: #cfe5f5; background: var(--albumica-info-soft); }
.message-success { color: #1c673e; border-color: #c9e8d5; background: var(--albumica-success-soft); }
.message-warning { color: #8b5608; border-color: #f0d9a9; background: var(--albumica-warning-soft); }
.message-error { color: #9c2029; border-color: #efc7ca; background: var(--albumica-danger-soft); }
.status-pill,
.status-badge,
.optional-badge,
.role-badge,
.count-badge,
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.15;
}
.empty-panel,
.empty-state {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: 24px;
  border: 1px dashed #cfd4e4 !important;
  color: var(--albumica-muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Tables and filters
   -------------------------------------------------------------------------- */
.filter-panel { margin-bottom: 20px; }
.filter-form { align-items: end; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { color: var(--albumica-muted); font-size: 0.78rem; letter-spacing: 0.02em; background: #f7f8fc; }
th, td { padding: 12px 13px; border-bottom: 1px solid var(--albumica-line); text-align: left; vertical-align: top; }
tbody tr:hover td { background: #fcfcff; }
.table-wrap { width: 100%; overflow-x: auto; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Dialogs
   -------------------------------------------------------------------------- */
dialog {
  max-width: min(620px, calc(100vw - 32px));
  border: 1px solid var(--albumica-line-strong);
  border-radius: var(--albumica-radius-lg);
  color: var(--albumica-ink);
  background: #fff;
  box-shadow: 0 30px 90px rgba(20, 28, 58, 0.25);
}
dialog::backdrop { background: rgba(29, 33, 53, 0.42); backdrop-filter: blur(4px); }

/* --------------------------------------------------------------------------
   Authentication pages
   -------------------------------------------------------------------------- */
.login-card {
  border: 1px solid var(--albumica-line);
  background: rgba(255, 255, 255, 0.98);
}
.login-card > h2,
.login-card > h1 { letter-spacing: -0.025em; }
.auth-card.compact-card { padding: 6px 0; box-shadow: none; border: 0 !important; }
.legal-page-card { box-shadow: var(--albumica-shadow-soft) !important; }

/* --------------------------------------------------------------------------
   Error pages
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(circle at 8% 12%, rgba(91, 80, 230, 0.09), transparent 30%),
    radial-gradient(circle at 94% 90%, rgba(74, 184, 165, 0.08), transparent 28%),
    var(--albumica-background);
}
.error-topbar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--albumica-line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}
.error-brand { color: var(--albumica-ink); font-weight: 850; text-decoration: none; }
.error-brand small { margin-left: 8px; color: var(--albumica-muted); font-weight: 650; }
.error-shell { width: min(880px, calc(100% - 36px)); margin: 44px auto 70px; }
.error-card { padding: clamp(24px, 5vw, 48px); }
.error-code {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--albumica-primary);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.error-card h1 { margin: 0 0 12px; font-size: clamp(1.8rem, 4vw, 2.65rem); letter-spacing: -0.04em; }
.error-card .error-message { margin: 0; color: var(--albumica-muted); font-size: 1.02rem; line-height: 1.8; }
.error-guidance {
  margin: 24px 0 0;
  padding: 17px 19px;
  border: 1px solid var(--albumica-line);
  border-radius: 13px;
  background: #f8f9fc;
  color: var(--albumica-muted);
  line-height: 1.7;
}
.error-request-id { margin-top: 22px; color: var(--albumica-muted); font-size: 0.79rem; }
.error-request-id code { padding: 4px 7px; border-radius: 6px; color: var(--albumica-ink); background: #eef0f6; }
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.error-footer { padding: 18px 24px; color: var(--albumica-muted); text-align: center; font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   Responsive behavior
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .page-hero,
  .page-heading.page-hero,
  .contest-hero.page-hero,
  .public-profile-hero.page-hero {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
    padding: 21px;
  }
  .page-hero .heading-actions,
  .page-hero__actions { justify-content: flex-start; }
  .page-hero .storage-summary-mini,
  .page-hero .album-editor-status,
  .page-hero__summary { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .page-hero,
  .page-heading.page-hero,
  .contest-hero.page-hero,
  .public-profile-hero.page-hero { border-radius: 17px; padding: 18px; }
  .page-hero h1,
  .page-hero h2 { font-size: 1.65rem; }
  .page-hero .heading-actions,
  .page-hero__actions,
  .form-actions,
  .form-footer,
  .error-actions { display: grid; width: 100%; }
  .page-hero .heading-actions > *,
  .page-hero__actions > *,
  .form-actions > *,
  .form-footer > *,
  .error-actions > * { width: 100%; }
  .error-topbar { padding: 0 18px; }
  .error-shell { width: min(100% - 24px, 880px); margin-top: 24px; }
  .error-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}