/* ===========================================================================
   Q² Studio — Component Library
   ---------------------------------------------------------------------------
   Full component library plus the app shell, galaxy theme, job page,
   glass panels, ambient glow, and the app background image.
   Uses tokens from tokens.css.
   =========================================================================== */

/* ===========================================================================
   LAYOUT — shell, topbar, sidebar
   =========================================================================== */

.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-9) var(--sp-5);
}

.shell-narrow {
  max-width: var(--shell-max-narrow);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-9) var(--sp-5);
}

/* ===========================================================================
   HEADER (legacy pages)
   =========================================================================== */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 0 var(--sp-5) 0;
  margin: 0 0 var(--sp-6) 0;
  border-bottom: 1px solid var(--border-100);
}

header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--sp-1) 0;
  color: var(--text-100);
}

header .subtitle {
  font-size: var(--text-md);
  color: var(--text-200);
  margin: 0;
  line-height: var(--leading-snug);
}

header nav {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
}

.nav-link {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-200);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease);
  padding: var(--sp-2) 0;
}

.nav-link:hover { color: var(--text-100); }

/* ===========================================================================
   HEADINGS
   =========================================================================== */

h1, h2, h3, h4 {
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-100);
  margin: 0;
}

h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl);  line-height: var(--leading-snug); }
h3 { font-size: var(--text-md);  line-height: var(--leading-snug); font-weight: var(--weight-semi); text-transform: none; letter-spacing: 0; }
h4 { font-size: var(--text-base); line-height: var(--leading-snug); }

.section-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-100);
  margin: 0 0 var(--sp-2) 0;
}

.section-hint {
  font-size: var(--text-base);
  color: var(--text-200);
  line-height: var(--leading-normal);
  margin: 0 0 var(--sp-5) 0;
}

p { margin: 0 0 var(--sp-4) 0; line-height: var(--leading-normal); }
p:last-child { margin-bottom: 0; }

/* ===========================================================================
   CARDS — glass panels
   =========================================================================== */

.card {
  background: var(--card-bg, rgba(30, 30, 38, 0.62));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background var(--dur-container) var(--ease),
              border-color var(--dur-container) var(--ease),
              box-shadow var(--dur-container) var(--ease);
}

.card:hover {
  background: rgba(38, 38, 48, 0.72);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
}

.card-flat { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; border-color: transparent; }
.card-flat:hover { box-shadow: none; background: transparent; border-color: transparent; }

.card-tight { padding: var(--sp-5); }

/* ===========================================================================
   BUTTONS — transparent by default, lit on hover
   =========================================================================== */

.btn,
button.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  color: #e8e8ee;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  white-space: nowrap;
  margin-top: 0;
  user-select: none;
  transition:
    background var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.btn:active,
button.btn:active {
  background: rgba(255, 255, 255, 0.09);
}

/* Primary — indigo tint */
.btn.btn-primary,
.btn.btn-green {
  color: var(--teal-300);
  border-color: rgba(45, 212, 191, 0.45);
}

.btn.btn-primary:hover,
.btn.btn-green:hover {
  color: #ffffff;
  background: var(--teal-600);
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-soft), 0 0 18px rgba(232, 121, 249, 0.18);
}

/* Quiet — barely there */
.btn.btn-quiet,
.btn.btn-secondary,
.btn.btn-outline {
  color: var(--text-200);   /* L1: crisper (was #8d8d9a) */
  border-color: rgba(255, 255, 255, 0.08);
  font-weight: 500;
}

.btn.btn-quiet:hover,
.btn.btn-secondary:hover,
.btn.btn-outline:hover {
  color: #e8e8ee;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
}

/* Danger */
.btn.btn-danger {
  color: var(--danger-400);
  border-color: rgba(239, 68, 68, 0.40);
}

.btn.btn-danger:hover {
  color: #ffffff;
  background: var(--danger-500);
  border-color: var(--danger-500);
}

/* Warning */
.btn.btn-warning {
  color: var(--warning-400);
  border-color: rgba(245, 158, 11, 0.40);
  font-weight: 600;
}

.btn.btn-warning:hover {
  color: #ffffff;
  background: var(--warning-500);
  border-color: var(--warning-500);
}

/* Sizes */
.btn.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn.btn-lg { padding: 10px 20px; font-size: 14px; }

.btn:disabled,
button.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn + .btn,
button + button,
button + .btn,
.btn + button {
  margin-left: var(--sp-3);
}

/* Bare <button> without .btn class — same treatment */
button:not(.btn):not(.jp-btn):not(.app-sidebar-toggle):not(.job-card-menu-btn):not(.job-card-dropdown-item):not(.jp-folder-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  color: #e8e8ee;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition:
    background var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}

button:not(.btn):not(.jp-btn):not(.app-sidebar-toggle):not(.job-card-menu-btn):not(.job-card-dropdown-item):not(.jp-folder-toggle):hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

/* ===========================================================================
   FORMS
   =========================================================================== */

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-200);
  margin: 0 0 var(--sp-2) 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: var(--sp-3) var(--sp-3);
  background: rgba(10, 10, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  color: var(--text-100);
  font-size: var(--text-base);
  font-family: inherit;
  line-height: var(--leading-snug);
  transition: border-color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease),
              background var(--dur-micro) var(--ease);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--text-300);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--border-300);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: rgba(10, 10, 14, 0.75);
}

textarea {
  min-height: 200px;
  resize: vertical;
  line-height: var(--leading-normal);
}

input[type="file"] {
  width: 100%;
  padding: var(--sp-3);
  background: rgba(10, 10, 14, 0.55);
  border: 1px dashed var(--border-300);
  border-radius: var(--r-sm);
  color: var(--text-200);
  font-size: var(--text-base);
  font-family: inherit;
}

input[type="file"]::file-selector-button {
  background: var(--bg-600);
  color: var(--text-100);
  border: 1px solid var(--border-200);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-right: var(--sp-3);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease);
}

input[type="file"]::file-selector-button:hover {
  background: var(--bg-700);
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-500);
  margin: 0 var(--sp-2) 0 0;
  vertical-align: middle;
  cursor: pointer;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 10px;
  padding-right: var(--sp-7);
}

form > label { margin-top: var(--sp-4); }
form > label:first-child { margin-top: 0; }

/* Chrome autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(10, 10, 14, 0.85) inset !important;
  box-shadow: 0 0 0 1000px rgba(10, 10, 14, 0.85) inset !important;
  -webkit-text-fill-color: var(--text-100) !important;
  caret-color: var(--text-100);
  transition: background-color 5000s ease-in-out 0s;
}

body.theme-galaxy input:-webkit-autofill,
body.theme-galaxy input:-webkit-autofill:hover,
body.theme-galaxy input:-webkit-autofill:focus,
body.theme-galaxy input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(10, 12, 20, 0.85) inset !important;
  box-shadow: 0 0 0 1000px rgba(10, 12, 20, 0.85) inset !important;
  -webkit-text-fill-color: var(--g-text-100) !important;
}

/* ===========================================================================
   BRAND BOX
   =========================================================================== */

.brand-box {
  background: rgba(22, 22, 28, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
}

.brand-box label:last-child { margin-bottom: 0; }

/* ===========================================================================
   GRID
   =========================================================================== */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ===========================================================================
   TABLES
   =========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

th {
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-300);
  border-bottom: 1px solid var(--border-200);
  background: transparent;
}

td {
  text-align: left;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border-100);
  color: var(--text-100);
  vertical-align: middle;
}

tbody tr {
  transition: background var(--dur-micro) var(--ease);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

td code, td .id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-200);
}

/* ===========================================================================
   LISTS + INLINE
   =========================================================================== */

ul, ol {
  padding-left: var(--sp-5);
  margin: 0 0 var(--sp-4) 0;
  color: var(--text-200);
  line-height: var(--leading-normal);
}

li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

strong { color: var(--text-100); font-weight: var(--weight-semi); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-700);
  color: var(--text-100);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* ===========================================================================
   MESSAGES
   =========================================================================== */

.message,
.error,
.success {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  border-left: 3px solid transparent;
}

.message {
  background: var(--info-soft);
  color: #bfdbfe;
  border-left-color: var(--info-500);
}

.error {
  background: var(--danger-soft);
  color: #fecaca;
  border-left-color: var(--danger-500);
}

.success {
  background: var(--success-soft);
  color: #bbf7d0;
  border-left-color: var(--success-500);
}

/* ===========================================================================
   EMPTY STATE
   =========================================================================== */

.empty {
  color: var(--text-300);
  font-size: var(--text-md);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  background: rgba(30, 30, 38, 0.55);
  border-radius: var(--r-md);
  border: 1px dashed var(--border-200);
}

.empty::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto var(--sp-4) auto;
  border-radius: 50%;
  border: 2px solid var(--border-300);
}

/* ===========================================================================
   BADGES
   =========================================================================== */

.status-badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: capitalize;
  letter-spacing: 0;
  line-height: 1.4;
}

.status-badge::before,
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pending  { background: rgba(255,255,255,0.06); color: var(--text-200); }
.status-running  { background: var(--accent-soft);     color: var(--accent-400); }
.status-done     { background: var(--success-soft);    color: var(--success-400); }
.status-failed   { background: var(--danger-soft);     color: var(--danger-400); }
.status-approved { background: var(--success-soft);    color: var(--success-400); }
.status-needs_work { background: var(--warning-soft);  color: var(--warning-400); }
.status-rejected { background: var(--danger-soft);     color: var(--danger-400); }

.badge-success { background: var(--success-soft); color: var(--success-400); }
.badge-warning { background: var(--warning-soft); color: var(--warning-400); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger-400); }
.badge-info    { background: var(--info-soft);    color: var(--info-400); }

/* ===========================================================================
   PROGRESS BAR
   =========================================================================== */

.progress-wrap { margin: var(--sp-5) 0; }

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-200);
  font-weight: var(--weight-medium);
}

.progress-label .percent {
  font-size: var(--text-xl);
  color: var(--text-100);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.progress-bar {
  height: 6px;
  background: var(--bg-700);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: var(--accent-500);
  border-radius: var(--r-pill);
  transition: width var(--dur-container) var(--ease);
  position: relative;
}

.progress-bar-fill.is-done    { background: var(--success-500); }
.progress-bar-fill.is-failed  { background: var(--danger-500); }

/* ===========================================================================
   LOG BOX
   =========================================================================== */

.log {
  background: rgba(10, 10, 12, 0.75);
  color: var(--text-200);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  max-height: 420px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.65;
  border: 1px solid var(--border-100);
}

/* ===========================================================================
   FOOTER (galaxy pages)
   =========================================================================== */

.galaxy-footer-legal, .sebi-footer-legal { margin-top: var(--sp-2); }
.ticket-priority {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px; color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.5);
}
.galaxy-footer-legal a, .sebi-footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.galaxy-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--g-card-border);
  color: var(--g-text-400);
  font-size: var(--text-xs);
  text-align: center;
  letter-spacing: var(--tracking-wide);
}

/* ===========================================================================
   Q² LOGO
   =========================================================================== */

.q2-logo {
  display: block;
  color: var(--text-100);
}

body.theme-galaxy .q2-logo {
  color: var(--g-text-100);
}

/* ===========================================================================
   GALAXY THEME — public pages
   =========================================================================== */

body.theme-galaxy {
  background: var(--g-bg-top);
  color: var(--g-text-100);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body.theme-galaxy::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 18% 22%, var(--sky-teal), transparent 70%),
    radial-gradient(ellipse 70% 30% at 48% 6%, var(--sky-green), transparent 72%),
    radial-gradient(ellipse 60% 50% at 82% 14%, var(--sky-purple), transparent 70%),
    radial-gradient(ellipse 45% 35% at 62% 92%, var(--sky-pink), transparent 70%),
    linear-gradient(180deg, var(--sky-deep) 0%, var(--sky-indigo) 45%, var(--g-bg-bottom) 88%, var(--g-horizon) 100%);
  animation: sky-drift 120s ease-in-out infinite alternate;
}
/* A slow drift of the whole sky — a few percent over two minutes: felt, not watched. */
@keyframes sky-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.03); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

body.theme-galaxy::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 40px 70px, rgba(215,227,255,0.75), transparent 60%),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1px 1px at 130px 80px, rgba(230,236,255,0.75), transparent 60%),
    radial-gradient(1px 1px at 160px 30px, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 200px 110px, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 250px 60px, rgba(215,227,255,0.65), transparent 60%),
    radial-gradient(1px 1px at 300px 140px, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 350px 90px, rgba(230,236,255,0.70), transparent 60%),
    radial-gradient(1px 1px at 420px 40px, rgba(255,255,255,0.65), transparent 60%);
  background-size: 500px 220px;
  background-repeat: repeat;
  opacity: 0.95;
  animation: star-drift 90s linear infinite;
}

@keyframes star-drift {
  from { background-position: 0 0, 40px 70px, 90px 40px, 130px 80px, 160px 30px,
                         200px 110px, 250px 60px, 300px 140px, 350px 90px, 420px 40px; }
  to   { background-position: 0 220px, 40px 290px, 90px 260px, 130px 300px, 160px 250px,
                         200px 330px, 250px 280px, 300px 360px, 350px 310px, 420px 260px; }
}

#galaxy-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ===========================================================================
   HORIZON SCENE
   =========================================================================== */

.landing-hero {
  position: relative;
  isolation: isolate;
}

.horizon-scene {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  width: min(1200px, 140vw);
  height: 420px;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
}

.horizon-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(200, 220, 255, 0.22) 0%,
    rgba(160, 185, 240, 0.10) 32%,
    rgba(120, 145, 210, 0.04) 55%,
    transparent 72%
  );
  filter: blur(2px);
}

.horizon-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  width: 720px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 60%,
    rgba(255, 200, 130, 0.28) 0%,
    rgba(240, 150, 80, 0.14) 28%,
    rgba(200, 100, 60, 0.06) 52%,
    transparent 72%
  );
  filter: blur(6px);
  mix-blend-mode: screen;
}

.horizon-scene .horizon-line {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  width: min(900px, 90vw);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 220, 170, 0.0) 8%,
    rgba(255, 220, 170, 0.55) 30%,
    rgba(255, 235, 200, 0.95) 50%,
    rgba(255, 220, 170, 0.55) 70%,
    rgba(255, 220, 170, 0.0) 92%,
    transparent 100%
  );
  box-shadow:
    0 0 24px rgba(255, 210, 150, 0.45),
    0 0 48px rgba(240, 160, 90, 0.28),
    0 0 96px rgba(200, 120, 70, 0.14);
  border-radius: 2px;
}

/* ===========================================================================
   GALAXY PAGE ELEMENTS
   =========================================================================== */

body.theme-galaxy .shell {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-9) var(--sp-5);
}

body.theme-galaxy header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 var(--sp-5) 0;
  margin: 0 0 var(--sp-7) 0;
  border-bottom: 1px solid var(--g-card-border);
}

body.theme-galaxy h1,
body.theme-galaxy h2,
body.theme-galaxy h3 { color: var(--g-text-100); }

body.theme-galaxy p,
body.theme-galaxy li { color: var(--g-text-200); }

body.theme-galaxy strong { color: var(--g-text-100); }

body.theme-galaxy .subtitle {
  color: var(--g-text-300);
  font-size: var(--text-md);
  margin: 0;
}

body.theme-galaxy .nav-link {
  color: var(--g-text-200);
  margin-left: var(--sp-4);
}
body.theme-galaxy .nav-link:hover { color: var(--g-text-100); }

body.theme-galaxy .card {
  background: var(--g-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--g-card-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: none;
}

body.theme-galaxy .card:hover {
  background: var(--g-card);
  border-color: var(--g-card-border-hover);
  box-shadow: none;
}

body.theme-galaxy .card h2,
body.theme-galaxy .card h3 { color: var(--g-text-100); }

body.theme-galaxy .section-title { color: var(--g-text-100); }
body.theme-galaxy .section-hint { color: var(--g-text-300); }

body.theme-galaxy label { color: var(--g-text-200); }

body.theme-galaxy input[type="text"],
body.theme-galaxy input[type="email"],
body.theme-galaxy input[type="password"],
body.theme-galaxy textarea,
body.theme-galaxy select {
  background: rgba(10, 12, 20, 0.60);
  border-color: var(--g-card-border);
  color: var(--g-text-100);
}

body.theme-galaxy input::placeholder,
body.theme-galaxy textarea::placeholder { color: var(--g-text-400); }

body.theme-galaxy input:focus,
body.theme-galaxy textarea:focus,
body.theme-galaxy select:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

body.theme-galaxy a { color: var(--g-link); }
body.theme-galaxy a:hover { color: var(--g-link-hover); }

/* ===========================================================================
   LANDING PAGE
   =========================================================================== */

.landing-topnav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) 0 var(--sp-5) 0;
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--g-card-border);
}

.landing-topnav a {
  color: var(--g-text-200);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  transition: color var(--dur-micro) var(--ease);
}
.landing-topnav a:hover { color: var(--g-text-100); }

.landing-brand {
  text-align: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-7) var(--sp-4);
  position: relative;
  z-index: 1;
}

.landing-brand h1 {
  color: var(--g-text-100);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-3) 0;
  line-height: 1.05;
  text-shadow:
    0 0 32px rgba(255, 210, 150, 0.10),
    0 0 64px rgba(200, 140, 90, 0.06);
}

.landing-brand .landing-tagline {
  color: var(--g-text-300);
  font-size: var(--text-lg);
  font-style: italic;
  margin: 0;
  text-shadow: 0 0 24px rgba(255, 210, 150, 0.08);
}

.cta-block {
  text-align: center;
  padding: var(--sp-4) var(--sp-4) 0 var(--sp-4);
}

.cta-block .cta-heading {
  color: var(--g-text-300);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: 0 0 var(--sp-5) 0;
}

.cta-block a.cta-btn {
  display: inline-block;
  margin: 0 var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-sm);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  text-decoration: none;
  background: transparent;
  color: var(--g-text-100);
  border: 1px solid var(--border-300);
  transition: background var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
}

.cta-block a.cta-btn:hover {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #ffffff;
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 8px 32px rgba(99, 102, 241, 0.35);
}

.cta-block a.cta-btn:active {
  background: var(--accent-600);
  border-color: var(--accent-600);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.cta-block a.cta-btn:focus-visible {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.landing-description p {
  color: var(--g-text-200);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--sp-4) 0;
}
.landing-description p:last-child { margin-bottom: 0; }

/* ===========================================================================
   RESPONSIVE (galaxy)
   =========================================================================== */

@media (max-width: 720px) {
  .shell,
  body.theme-galaxy .shell {
    padding: var(--sp-5) var(--sp-4) var(--sp-7) var(--sp-4);
  }

  header,
  body.theme-galaxy header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  header nav { gap: var(--sp-4); }

  .card { padding: var(--sp-5); }

  .landing-brand h1 { font-size: var(--text-4xl); }

  .cta-block a.cta-btn {
    display: block;
    margin: var(--sp-2) 0;
  }

  .horizon-scene { height: 320px; bottom: -60px; }
  .horizon-scene::before { width: 340px; height: 340px; bottom: 30px; }
  .horizon-scene::after { width: 480px; height: 300px; bottom: -40px; }
  .horizon-scene .horizon-line { width: 90vw; bottom: 90px; }
}

/* ===========================================================================
   APP BACKGROUND — image + darkening
   =========================================================================== */

body.theme-neutral,
body:not(.theme-galaxy) {
  /* The work pages (2026-10-18): northern lights over a dark pine forest (generated for us —
     scripts/generate_backgrounds.py; U14), softened and veiled until it is a deep,
     moody night sky — the aurora's green and violet visible but muted, a texture rather than a picture. The veil
     sets the contrast (measured on the brightest part of the photograph); cards sit a step lighter above it. */
  background-color: var(--work-bg);
  background-image: linear-gradient(180deg, var(--work-veil-top) 0%, var(--work-veil) 45%, var(--work-veil-foot) 100%),
                    url("/static/backgrounds/work-northern-lights.jpg");
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  --card-bg: var(--work-card);
}

/* ===========================================================================
   APP SHELL — layout, sidebar, topbar
   =========================================================================== */

.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  background: transparent;
}

.app-sidebar {
  background: rgba(18, 18, 22, 0.62);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-sidebar-brand { padding: 0 var(--sp-5) var(--sp-6) var(--sp-5); }

.app-sidebar-logo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--text-100);
  text-decoration: none;
}

.app-sidebar-logo svg { height: 26px; width: auto; }

.app-sidebar-wordmark {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-100);
}

.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-3);
  flex: 1;
}

.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-200);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease);
}

.app-sidebar-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-100); }
.app-sidebar-link.is-active { background: rgba(20, 184, 166, 0.10); color: var(--text-100);
                              box-shadow: inset 2px 0 0 var(--teal-400); }

.app-sidebar-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.85;
}
.app-sidebar-icon svg { width: 100%; height: 100%; }

.app-sidebar-footer {
  padding: var(--sp-5) var(--sp-5) 0 var(--sp-5);
  border-top: 1px solid var(--border-100);
}

.app-sidebar-user-email {
  font-size: var(--text-xs);
  color: var(--text-300);
  margin-bottom: var(--sp-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-user-logout,
.app-sidebar-user-about {
  font-size: var(--text-xs);
  color: var(--text-200);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease);
}
.app-sidebar-user-logout:hover,
.app-sidebar-user-about:hover { color: var(--text-100); }

.app-sidebar-user-links {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-1);
}

.app-main {
  padding: var(--sp-6) var(--sp-7) var(--sp-8) var(--sp-7);
  max-width: 100%;
  min-width: 0;   /* a grid item's min is its content: without this a wide row (the job pipeline) widens the column past a phone's screen */
  overflow-x: hidden;
  background: transparent;
  position: relative;
}

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin: calc(var(--sp-6) * -1 + 4px) 0 var(--sp-6) 0;
  background: rgba(18, 18, 22, 0.38);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
}

.app-topbar h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-100);
  margin: 0;
}

.app-topbar .btn {
  color: var(--teal-300);
  border-color: rgba(45, 212, 191, 0.45);
  font-weight: 600;
}
.app-topbar .btn:hover {
  color: #ffffff;
  background: var(--teal-600);
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-soft), 0 0 18px rgba(232, 121, 249, 0.18);
}

.app-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.app-credits-placeholder {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-700);
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  color: var(--text-200);
  font-family: var(--font-mono);
}
.app-credits-bolt { color: var(--warning-400); font-size: 13px; }
.app-credits-count { font-weight: var(--weight-semi); }

/* Ambient indigo glow behind main content */
.app-main::before {
  content: "";
  position: fixed;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
  background:
    none;   /* the photograph carries the aurora now (2026-10-18) */
}

.app-main > * {
  position: relative;
  z-index: 1;
}

/* ===========================================================================
   Stats row
   =========================================================================== */

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.stat-card {
  background: rgba(30, 30, 38, 0.62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-300);
  font-weight: var(--weight-semi);
  margin-bottom: var(--sp-2);
}

.stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-100);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Job cards grid
   =========================================================================== */

.grid-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.job-card {
  position: relative;
  background: rgba(30, 30, 38, 0.62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background var(--dur-container) var(--ease),
              border-color var(--dur-container) var(--ease),
              box-shadow var(--dur-container) var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 140px;
}

.job-card:hover {
  background: rgba(38, 38, 48, 0.72);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
}

.job-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
}

.job-card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--text-100);
  text-decoration: none;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-micro) var(--ease);
  padding-right: var(--sp-6);
}
.job-card-title:hover { color: var(--accent-400); }

.job-card-menu { position: relative; flex-shrink: 0; }

.job-card-menu-btn {
  background: transparent;
  border: none;
  color: #a4a4b0;
  font-size: 18px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  line-height: 1;
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease);
}
.job-card-menu-btn:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }

.job-card-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: rgba(28, 28, 36, 0.85);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
  z-index: 20;
}
.job-card-dropdown.is-open { display: block; }

.job-card-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--text-100);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-micro) var(--ease);
}
.job-card-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
.job-card-dropdown-item.is-danger { color: var(--danger-400); }
.job-card-dropdown-item.is-danger:hover { background: var(--danger-soft); }

.job-card-dropdown-divider {
  height: 1px;
  background: var(--border-100);
  margin: var(--sp-1) 0;
}

.job-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.job-card-step {
  font-size: var(--text-xs);
  color: var(--text-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card-meta-item {
  font-size: var(--text-xs);
  color: var(--text-300);
  font-variant-numeric: tabular-nums;
}

.job-card-meta-item + .job-card-meta-item::before {
  content: "·";
  margin: 0 var(--sp-2);
  color: var(--text-300);
  opacity: 0.6;
}

.job-card-progress { margin-top: auto; }
.job-card-progress-bar {
  height: 4px;
  background: var(--bg-700);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.job-card-progress-fill {
  height: 100%;
  background: var(--accent-500);
  border-radius: var(--r-pill);
  transition: width var(--dur-container) var(--ease);
}

.job-card-ready {
  font-size: var(--text-sm);
  color: var(--success-400);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
}
.job-card-ready-icon { font-weight: var(--weight-bold); }

.job-card-failed {
  font-size: var(--text-sm);
  color: var(--danger-400);
  margin-top: auto;
}

.view-all-row { text-align: right; padding: var(--sp-3) 0; }
.view-all-row .nav-link { color: #c8ccd8; font-weight: 500; }
.view-all-row .nav-link:hover { color: #ffffff; }

/* ===========================================================================
   Donut ring on job cards
   =========================================================================== */

.job-card-ring {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 44px;
  height: 44px;
  pointer-events: none;
}

.job-card-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.job-card-ring-track {
  fill: none;
  stroke: var(--bg-700);
  stroke-width: 3;
}

.job-card-ring-fill {
  fill: none;
  stroke: var(--accent-500);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-container) var(--ease);
}

.job-card-ring-fill.is-done { stroke: var(--success-500); }
.job-card-ring-fill.is-failed { stroke: var(--danger-500); }

.job-card-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-semi);
  color: var(--text-200);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.job-card-ring-label.is-done { color: var(--success-400); }
.job-card-ring-label.is-failed { color: var(--danger-400); }

.job-card.has-ring .job-card-menu { margin-right: 52px; }

/* ===========================================================================
   Empty state (dashboard)
   =========================================================================== */

.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  background: rgba(30, 30, 38, 0.62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px dashed var(--border-200);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-6);
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-5) auto;
  color: var(--text-300);
}

.empty-state-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--text-100);
  margin: 0 0 var(--sp-2) 0;
  letter-spacing: var(--tracking-tight);
}

.empty-state-lead {
  color: var(--text-200);
  margin: 0 0 var(--sp-5) 0;
  font-size: var(--text-md);
}

/* ===========================================================================
   Modal
   =========================================================================== */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.modal-backdrop.is-open { display: flex; }

.modal {
  background: rgba(28, 28, 36, 0.85);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid var(--border-200);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  max-width: 460px;
  width: 100%;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.50);
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-100);
  margin: 0 0 var(--sp-3) 0;
}

.modal-body {
  color: var(--text-200);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0 0 var(--sp-5) 0;
}
.modal-body strong { color: var(--text-100); font-weight: var(--weight-semi); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ===========================================================================
   Coming soon badge
   =========================================================================== */

.coming-soon-badge {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent-soft);
  color: var(--accent-400);
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-top: var(--sp-4);
}

/* ===========================================================================
   Responsive: sidebar collapses on narrow screens
   =========================================================================== */

@media (max-width: 820px) {
  .app-layout { grid-template-columns: minmax(0, 1fr); }   /* not 1fr: the sidebar's row of links would widen the page past the screen */

  .app-sidebar {
    position: relative;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-100);
    padding: var(--sp-4) 0;
  }

  .app-sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }

  .app-sidebar-link {
    white-space: nowrap;
    font-size: var(--text-sm);
    padding: var(--sp-2) var(--sp-3);
  }

  .app-sidebar-footer { display: none; }
  .app-main { padding: var(--sp-5) var(--sp-4) var(--sp-7) var(--sp-4); }
  .stats-row { grid-template-columns: 1fr; }
  .app-topbar { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .app-topbar-right { width: 100%; justify-content: space-between; }
}

/* ===========================================================================
   Collapsible sidebar
   =========================================================================== */

.app-layout.is-collapsed { grid-template-columns: 64px 1fr; }
.app-layout.is-collapsed .app-sidebar { overflow: hidden; }
.app-layout.is-collapsed .app-sidebar-brand {
  padding: 0 var(--sp-3) var(--sp-5) var(--sp-3);
  display: flex;
  justify-content: center;
}
.app-layout.is-collapsed .app-sidebar-wordmark { display: none; }
.app-layout.is-collapsed .app-sidebar-link {
  justify-content: center;
  padding: var(--sp-3) var(--sp-2);
}
.app-layout.is-collapsed .app-sidebar-label { display: none; }
.app-layout.is-collapsed .app-sidebar-nav {
  padding: 0 var(--sp-2);
  align-items: center;
}
.app-layout.is-collapsed .app-sidebar-footer {
  padding: var(--sp-3) var(--sp-2) 0 var(--sp-2);
  text-align: center;
}
.app-layout.is-collapsed .app-sidebar-user,
.app-layout.is-collapsed .app-sidebar-user-links,
.app-layout.is-collapsed .app-sidebar-user-email { display: none; }

.app-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--sp-2);
  margin-top: var(--sp-3);
  background: transparent;
  border: 1px solid var(--border-100);
  border-radius: var(--r-sm);
  color: var(--text-300);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-xs);
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease);
}
.app-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-100); }
.app-sidebar-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-container) var(--ease);
}
.app-layout.is-collapsed .app-sidebar-toggle svg { transform: rotate(180deg); }

/* ===========================================================================
   Page-content helpers
   =========================================================================== */

.muted { color: var(--text-300); }

.subfolder {
  color: var(--text-300);
  font-size: var(--text-xs);
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
}

.size {
  color: var(--text-200);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* ===========================================================================
   New job — action pair
   =========================================================================== */

.form-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* ===========================================================================
   Job card menu — raise the card when its menu is open
   =========================================================================== */

.job-card:has(.job-card-dropdown.is-open) {
  z-index: 30;
  position: relative;
}

.job-card-dropdown {
  z-index: 31;
}

/* ===========================================================================
   Dropdown — make "Delete…" legible on the dark menu
   =========================================================================== */

.job-card-dropdown-item.is-danger {
  color: #ff8080;
  font-weight: 600;
}

.job-card-dropdown-item.is-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ffb3b3;
}

/* ===========================================================================
   Sidebar — SEBI attribution line
   =========================================================================== */

.app-sidebar-attribution {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-100);
  font-size: 10px;
  color: var(--text-300);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.app-layout.is-collapsed .app-sidebar-attribution {
  display: none;
}

/* ===========================================================================
   Sidebar — SEBI attribution line (refined)
   =========================================================================== */

.app-sidebar-attribution {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-100);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.app-sidebar-attribution-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, #0a1a28, #1a3349);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(196, 146, 43, 0.45);
  position: relative;
}

.app-sidebar-attribution-mark span {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 8px;
  color: #3a9d9d;
  letter-spacing: 0.02em;
  line-height: 1;
  padding-bottom: 2px;
  position: relative;
}

.app-sidebar-attribution-mark span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #c4922b;
  border-radius: 1px;
}

.app-sidebar-attribution-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.app-sidebar-attribution-line1 {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-200);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar-attribution-line2 {
  font-size: 8.5px;
  color: var(--text-300);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-layout.is-collapsed .app-sidebar-attribution {
  display: none;
}

.app-sidebar-attribution {
  display: block;
}

.app-sidebar-attribution-text {
  margin-left: 0;
}

/* ===========================================================================
   Admin — impersonation banner
   =========================================================================== */

.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  color: #1a1a1f;
}

.impersonation-banner-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  flex-wrap: wrap;
}

.impersonation-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a1a1f;
  animation: impersonation-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes impersonation-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.impersonation-banner strong {
  color: #1a1a1f;
  font-weight: 700;
}

.impersonation-return {
  margin-left: auto;
  background: transparent;
  color: #1a1a1f;
  border: 1px solid rgba(26, 26, 31, 0.35);
  padding: 4px 12px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-micro) var(--ease);
}

.impersonation-return:hover {
  background: rgba(26, 26, 31, 0.15);
}

/* ===========================================================================
   Landing — collapsible content blocks (<details>/<summary>)
   =========================================================================== */

.q2-details {
  padding: 0;
  overflow: hidden;
}

.q2-details > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  user-select: none;
  transition: background var(--dur-micro) var(--ease);
}

.q2-details > summary::-webkit-details-marker { display: none; }
.q2-details > summary::marker { display: none; }

.q2-details > summary:hover {
  background: var(--g-card-border);
}

.q2-details-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--g-text-100);
  letter-spacing: -0.01em;
}

.q2-details-chevron {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  transition: transform var(--dur-container) var(--ease);
}

.q2-details-chevron::before,
.q2-details-chevron::after {
  content: "";
  position: absolute;
  background: var(--g-text-300);
  border-radius: 1px;
}

.q2-details-chevron::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

.q2-details-chevron::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
  transition: transform var(--dur-container) var(--ease),
              opacity var(--dur-container) var(--ease);
}

.q2-details[open] .q2-details-chevron::after {
  transform: rotate(90deg);
  opacity: 0;
}

.q2-details[open] .q2-details-chevron {
  transform: rotate(180deg);
}

.q2-details-body {
  padding: 0 var(--sp-6) var(--sp-6) var(--sp-6);
}

.q2-details-body > *:first-child {
  margin-top: 0;
}
/* C3: email verification — the layout banner and the confirmation page */
.verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(169, 129, 47, 0.45);
  border-left: 4px solid #A9812F;
  border-radius: 8px;
  background: rgba(169, 129, 47, 0.08);
  font-size: var(--text-sm);
}
.verify-banner form { margin: 0; }
.verify-banner-btn {
  border: 1px solid #A9812F;
  background: transparent;
  color: inherit;
  padding: 6px 14px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.verify-banner-btn:hover { background: rgba(169, 129, 47, 0.16); }
.verify-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.verify-card {
  max-width: 480px;
  width: 100%;
  padding: 36px 32px;
  border-radius: 12px;
  border: 1px solid var(--border, #DCDFE4);
  background: var(--surface-1, #ffffff);
  text-align: center;
}
.verify-card h1 { margin: 0 0 12px; font-size: 22px; }
.verify-card p { margin: 0 0 22px; line-height: 1.55; }

/* C4: packages */
.pkg-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.pkg-balance-label { font-size: var(--text-sm); opacity: .8; }
.pkg-balance-count { font-size: 40px; font-weight: 700; margin: 6px 0; }
.pkg-balance-hint { font-size: var(--text-sm); opacity: .75; }
.pkg-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.pkg-tier { border: 1px solid var(--border, #DCDFE4); border-radius: 10px; padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; }
.pkg-tier-chosen { border-color: #A9812F; box-shadow: 0 0 0 2px rgba(169, 129, 47, .25); }
.pkg-tier-name { font-weight: 700; font-size: 18px; }
.pkg-tier-price { font-size: 26px; font-weight: 700; }
.pkg-tier-detail { font-size: var(--text-sm); opacity: .8; flex: 1; }
.pkg-tier button { width: 100%; }
.pkg-block-note { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--warning-400); }   /* was #b45309: 2.7:1 on the dark page */
.pkg-plus { color: #047857; font-weight: 600; }
.pkg-minus { color: #b45309; font-weight: 600; }
.pkg-sim-badge { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: rgba(169, 129, 47, .14); color: #7c5a17; font-weight: 600; }
.pkg-cipc-form input { max-width: 260px; }

.admin-grant { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.admin-grant input { width: 56px; padding: 2px 6px; }
.admin-grant select { padding: 2px 4px; }
.app-credits-unit { font-size: 12px; opacity: .8; margin-left: 2px; }
a.app-credits-placeholder { text-decoration: none; color: inherit; }

.pkg-addon { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-sm); margin: 4px 0 8px; cursor: pointer; }
.pkg-addon input { margin-top: 3px; }

/* T1: support */
.ticket-thread { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.ticket-msg { border: 1px solid var(--border, #DCDFE4); border-radius: 10px; padding: var(--sp-3) var(--sp-4); }
.ticket-msg-staff { border-left: 4px solid #A9812F; background: rgba(169, 129, 47, .06); }
.ticket-msg-head { font-size: 12px; opacity: .75; margin-bottom: 6px; }
.ticket-msg-body { white-space: pre-wrap; line-height: 1.55; }
.ticket-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
/* ===========================================================================
   L1 part 2 (2026-10-17): responsive interactions, focus, the aurora
   =========================================================================== */

.btn, a.btn, button.btn, .jp-btn, .cta-btn, .app-sidebar-link, .nav-link, .lib-job summary, .q2-details summary {
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease),
              box-shadow 200ms var(--ease), transform 160ms var(--ease);
}
.btn:hover, a.btn:hover, button.btn:hover, .jp-btn:hover, .cta-btn:hover { transform: translateY(-1px); }
.btn:active, a.btn:active, button.btn:active, .jp-btn:active, .cta-btn:active { transform: translateY(0); }
.app-sidebar-link:hover { transform: translateX(2px); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--teal-400);
  outline-offset: 2px;
  border-radius: 4px;
}
.card.q2-details, .card.lib-job { transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.card.q2-details:hover, .card.lib-job:hover {
  border-color: var(--g-card-border-hover, rgba(255, 255, 255, 0.14));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* The welcome, the getting-started checklist and the how-it-works guides (the premium pass, 2026-10-17). */
.q2-hello { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center;
            gap: var(--sp-5); flex-wrap: wrap; padding: var(--sp-6); margin-bottom: var(--sp-5); border-radius: var(--r-lg);
            border: 1px solid rgba(20, 184, 166, 0.22);
            background: radial-gradient(120% 160% at 100% 0%, rgba(20, 184, 166, 0.10), transparent 55%),
                        radial-gradient(120% 160% at 0% 100%, rgba(99, 102, 241, 0.10), transparent 55%), rgba(24, 24, 30, 0.6); }
.q2-hello::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--aurora);
                    background-size: 300% 100%; animation: aurora-drift 12s linear infinite; }
.q2-hello h2 { margin: 0 0 4px 0; font-size: var(--text-2xl); color: var(--text-100); letter-spacing: -0.01em; }
.q2-hello p { margin: 0; color: var(--text-200); max-width: 620px; }
.q2-hello-side { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.q2-balance { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; border-radius: var(--r-md);
              border: 1px solid var(--border-200); background: rgba(255, 255, 255, 0.03); }
.q2-balance b { font-size: 22px; color: var(--text-100); font-variant-numeric: tabular-nums; line-height: 1.1; }
.q2-balance span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-300); }

.q2-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); counter-reset: q2step; }
.q2-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
           padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-100); background: rgba(255, 255, 255, 0.02);
           transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.q2-step:hover { border-color: var(--border-200); }
.q2-step-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
                border: 1px solid var(--border-300); color: var(--text-200); counter-increment: q2step; }
.q2-step-mark::before { content: counter(q2step); }
.q2-step.is-done .q2-step-mark { background: rgba(20, 184, 166, 0.18); border-color: rgba(20, 184, 166, 0.55); color: var(--teal-300); }
.q2-step.is-done .q2-step-mark::before { content: "✓"; }
.q2-step.is-next { border-color: rgba(20, 184, 166, 0.45); background: rgba(20, 184, 166, 0.06); }
.q2-step-text b { display: block; color: var(--text-100); font-weight: 600; }
.q2-step-text span { font-size: var(--text-sm); color: var(--text-300); }
.q2-step.is-done .q2-step-text b { color: var(--text-200); }
.q2-progress { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin: var(--sp-3) 0 var(--sp-4); }
.q2-progress > i { display: block; height: 100%; background: var(--aurora); background-size: 300% 100%; animation: aurora-drift 9s linear infinite; }

details.q2-howto { margin-bottom: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border-100); background: rgba(30, 30, 36, 0.55); }
details.q2-howto > summary { padding: var(--sp-4) var(--sp-5); font-weight: 600; color: var(--text-100); }
.q2-howto-body { padding: 0 var(--sp-5) var(--sp-5); }
.q2-howto-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 1000px) { .q2-howto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .q2-howto-grid { grid-template-columns: minmax(0, 1fr); } }
.q2-howto-step { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border-100); background: rgba(255, 255, 255, 0.02); }
.q2-howto-step em { font-style: normal; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-300); }
.q2-howto-step b { display: block; margin: 4px 0; color: var(--text-100); }
.q2-howto-step p { margin: 0; font-size: var(--text-sm); color: var(--text-200); line-height: 1.55; }

/* The aurora: a slow indigo -> teal -> gold drift, for things that are alive (a running job, the hero). */
@keyframes aurora-drift { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.aurora-line { height: 2px; background: var(--aurora); background-size: 300% 100%; animation: aurora-drift 9s linear infinite; }
.horizon-scene .horizon-line::after {
  content: ""; position: absolute; inset: -1px 15%; border-radius: 2px;
  background: var(--aurora); background-size: 300% 100%; animation: aurora-drift 14s linear infinite;
  opacity: 0.35; filter: blur(1px); mix-blend-mode: screen;
}

/* The celestial look's hovers: the soft pink, sparingly — an underline on links, a border on quiet buttons. */
.nav-link:hover, .cc-table a:hover, .lib-doc a:hover, .legal-section a:hover, .section-hint a:hover {
  text-decoration: underline; text-decoration-color: var(--pink-soft); text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.btn.btn-quiet:hover, .btn:not(.btn-primary):not(.btn-danger):not(.btn-warning):hover { border-color: rgba(240, 171, 252, 0.40); }

/* The landing hero's sky (2026-10-18): the aurora on Earth's horizon seen from orbit (generated for us —
   scripts/generate_backgrounds.py; U14), fixed behind the page: the Earth stays still while the brand, the text
   and the cards slide up over it. position: fixed on its own layer, not background-attachment: fixed (which
   mobile browsers ignore or repaint on every scroll); 100lvh so it doesn't jump when a phone's address bar hides.
   The stars (static/hero_sky.js) are drawn on a canvas inside it, so they stay on top of the Earth. The veils keep
   every text readable wherever it scrolls over the brighter Earth (measured). */
.hero-sky {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh;
  z-index: -1; pointer-events: none; overflow: hidden;
  transform: translateZ(0); will-change: transform;   /* its own compositor layer: no repaint as the page scrolls */
  background:
    linear-gradient(180deg, rgba(6, 10, 24, 0.62) 0%, rgba(6, 10, 24, 0.20) 22%, rgba(6, 10, 24, 0.10) 40%,
                    rgba(6, 10, 24, 0.45) 62%, rgba(6, 10, 24, 0.70) 100%),
    url("/static/backgrounds/hero-orbit.jpg") center 38% / cover no-repeat;
  background-position: center, center 20%;   /* the horizon, high in the frame, stays above the brand */
}
/* The brand sits below the horizon, over the dark Earth with its city lights, where the text reads best. */
.hero-sky ~ .shell .landing-hero { padding-top: calc(clamp(640px, 100vh, 1100px) * 0.34); }
.hero-sky ~ .shell { position: relative; z-index: 1; }   /* the content slides over the fixed Earth */
/* The footer scrolls over the Earth too: a dark panel like the cards keeps its small print readable there. */
.hero-sky ~ .shell .sebi-footer {
  background: rgba(8, 11, 22, 0.80); border: 1px solid var(--g-card-border); border-radius: 16px;
  padding-left: var(--sp-6); padding-right: var(--sp-6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

.hero-sky .hero-stars { position: absolute; inset: 0; display: block; }
.hero-sky ~ .shell .horizon-scene { display: none; }   /* the photograph has its own horizon */
.landing-hero { position: relative; }
.landing-hero > * { position: relative; z-index: 1; }
.hero-sky ~ .shell .landing-brand h1 { text-shadow: 0 2px 22px rgba(2, 6, 18, 0.85), 0 0 4px rgba(2, 6, 18, 0.6); }
.hero-sky ~ .shell .landing-brand .landing-tagline { color: var(--g-text-200); text-shadow: 0 1px 12px rgba(2, 6, 18, 0.95); }
.hero-sky ~ .shell .landing-topnav a { text-shadow: 0 1px 10px rgba(2, 6, 18, 0.9); }

/* Collapsible blocks (2026-10-18): every <details> starts collapsed and its heading carries a bold teal "+",
   turning to "x" when open — an invitation to click. One rule for all of them. */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
details > summary::after {
  content: "+"; margin-left: auto; flex-shrink: 0; font-size: 24px; font-weight: 800; line-height: 1;
  color: var(--teal-400); text-shadow: 0 0 12px rgba(45, 212, 191, 0.45);
  transition: transform 200ms var(--ease), color 160ms var(--ease);
}
details > summary:hover::after { color: var(--teal-300); }
details[open] > summary::after { transform: rotate(45deg); }
.q2-details-chevron, .lib-chevron { display: none; }

/* Glowing borders where something is alive or next (the aurora accents). */
.jp-stage-panel.is-running { border-color: rgba(45, 212, 191, 0.35); box-shadow: 0 0 28px rgba(45, 212, 191, 0.08); }
.q2-step.is-next { box-shadow: 0 0 22px rgba(45, 212, 191, 0.10); }

.ticket-log { max-height: 320px; overflow: auto; font-size: 12px; background: rgba(0,0,0,.25); padding: 10px; border-radius: 8px; white-space: pre-wrap; }

/* The SME image tool, visible from the review list (2026-10-22): a callout above the progress card and a chip on
   every section that offers it. */
.sme-image-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
                     border-color: rgba(45, 212, 191, 0.45); box-shadow: 0 0 26px rgba(45, 212, 191, 0.10); }
.sme-image-callout .section-hint { margin-bottom: 0; max-width: 72ch; }
.sme-image-chip { display: inline-block; margin-left: var(--sp-2); padding: 1px 8px; border-radius: var(--r-pill);
                  font-size: var(--text-xs); font-weight: 600; color: var(--teal-300);
                  border: 1px solid rgba(45, 212, 191, 0.45); background: rgba(20, 184, 166, 0.10); white-space: nowrap; }

/* The package's colour-coded folders (QA overhaul, 2026-10-22): a swatch before a folder's name, wherever the app
   lists a package by folder (the job's files, the review list). */
.folder-swatch { display: none; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--sp-2);
                 vertical-align: middle; }
.folder-blue .folder-swatch, .folder-red .folder-swatch, .folder-green .folder-swatch,
.folder-yellow .folder-swatch { display: inline-block; }
.folder-blue .folder-swatch { background: #3b82f6; box-shadow: 0 0 8px rgba(59, 130, 246, 0.55); }
.folder-red .folder-swatch { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.55); }
.folder-green .folder-swatch { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.55); }
.folder-yellow .folder-swatch { background: #eab308; box-shadow: 0 0 8px rgba(234, 179, 8, 0.55); }