:root {
  --bg: #f2f0ea;
  --panel: rgba(255, 255, 255, 0.88);
  --ink: #1d2433;
  --muted: #5f6777;
  --accent: #2457f5;
  --accent-2: #11a37f;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(36, 87, 245, 0.16), transparent 32%),
    radial-gradient(circle at top right, rgba(17, 163, 127, 0.16), transparent 28%),
    linear-gradient(180deg, #faf8f3 0%, var(--bg) 100%);
  min-height: 100vh;
}

.shell { padding-top: 0.25rem; }
.hero { padding-top: 1rem; }
.status-card, .panel { background: var(--panel); border: 1px solid rgba(29, 36, 51, 0.2); border-radius: 1.25rem; box-shadow: 0 20px 60px rgba(29, 36, 51, 0.08); backdrop-filter: blur(10px); padding: 1.5rem; }
.panel { min-height: 100%; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(36, 87, 245, 0.15); }
.app-bar { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(29, 36, 51, 0.08); z-index: 1030; }
.app-bar__inner { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.app-bar__brand { display: flex; flex-direction: column; gap: 0.1rem; }
.app-bar__title { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); }
.app-bar__subtitle { font-size: 0.78rem; color: var(--muted); }
.app-error-banner { position: fixed; top: 4.75rem; left: 50%; width: min(calc(100vw - 1.5rem), 1320px); transform: translateX(-50%); z-index: 1040; margin: 0; box-shadow: 0 10px 30px rgba(186, 26, 26, 0.12); }
.app-notice-banner { position: fixed; top: 4.75rem; left: 50%; width: min(calc(100vw - 1.5rem), 1320px); transform: translateX(-50%); z-index: 1039; margin: 0; box-shadow: 0 10px 30px rgba(181, 128, 6, 0.14); background-color: #fff3cd; border-color: #ffecb5; color: #664d03; }
.app-notice-banner--lower { top: 7.8rem; }
.app-error-banner .btn-close, .app-notice-banner .btn-close { margin-left: 1rem; }
.app-bar__menu-btn { width: 3rem; height: 3rem; display: inline-grid; place-items: center; border-radius: 999px; }
.app-bar__burger { position: relative; width: 1rem; height: 0.08rem; background: currentColor; border-radius: 999px; }
.app-bar__burger::before, .app-bar__burger::after { content: ""; position: absolute; left: 0; width: 1rem; height: 0.08rem; background: currentColor; border-radius: 999px; }
.app-bar__burger::before { top: -0.34rem; }
.app-bar__burger::after { top: 0.34rem; }
.app-menu { width: min(86vw, 360px); }
.modal-backdrop-custom, .loading-overlay { position: fixed; inset: 0; z-index: 1050; background: rgba(14, 18, 30, 0.72); backdrop-filter: blur(12px); display: grid; place-items: center; padding: 1.5rem; }
.modal-backdrop-custom { z-index: 1060; }
.auth-modal, .loading-card, .modal-card { width: min(100%, 460px); background: #fff; border-radius: 1.25rem; padding: 2rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28); }
.modal-card { width: min(100%, 720px); max-height: min(80vh, 760px); overflow: auto; }
.auth-modal { width: min(100%, 560px); }
.logs-output { margin: 0; padding: 1rem; border-radius: 1rem; background: #f8f9fc; color: var(--ink); white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; line-height: 1.5; }
.access-copy ul { padding-left: 1.2rem; margin-bottom: 0; }
.access-copy li + li { margin-top: 0.5rem; }
.info-banner { border-left: 4px solid var(--accent); background: rgba(255, 255, 255, 0.6); border-radius: 0.9rem; padding: 1rem 1rem 1rem 1.1rem; }
@media (max-width: 767.98px) { .hero { padding-top: 0.5rem; } .app-error-banner { top: 4.25rem; width: calc(100vw - 1rem); } .app-notice-banner { width: calc(100vw - 1rem); } .app-notice-banner--lower { top: 7.1rem; } .app-bar__inner { min-height: 4rem; } .panel { padding: 1.25rem; } }