:root { color-scheme: light; --admin-bg: #f6f7f9; --admin-panel: #ffffff; --admin-panel-soft: #eef1f5; --admin-text: #172033; --admin-muted: #647083; --admin-border: #dfe4ec; --admin-border-soft: #edf0f4; --admin-primary: #172033; --admin-primary-hover: #26344d; --admin-danger: #b42318; --admin-danger-soft: #fff1f0; --admin-success: #0d7a4f; --admin-success-soft: #ecfdf3; } * { box-sizing: border-box; } body.admin-page, body.admin-auth { margin: 0; min-height: 100vh; background: var(--admin-bg); color: var(--admin-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; } a { color: inherit; } .admin-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0; } .auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; } .admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .admin-toolbar h1, .auth-card h1 { margin: 0; color: var(--admin-text); font-size: 28px; font-weight: 700; letter-spacing: 0; } .eyebrow { margin: 0 0 4px; color: var(--admin-muted); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .toolbar-actions, .row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .row-actions form { margin: 0; } .button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; padding: 8px 11px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; } .button-primary { background: var(--admin-primary); color: #ffffff; } .button-primary:hover { background: var(--admin-primary-hover); } .button-secondary, .button-ghost { border-color: var(--admin-border); background: #ffffff; color: var(--admin-text); } .button-secondary:hover, .button-ghost:hover { background: var(--admin-panel-soft); } .button-danger { border-color: #f3b4ae; background: var(--admin-danger-soft); color: var(--admin-danger); } .button-danger:hover { background: #ffe3e0; } .table-panel, .admin-card { overflow: hidden; border: 1px solid var(--admin-border); border-radius: 8px; background: var(--admin-panel); box-shadow: 0 16px 40px rgba(23, 32, 51, 0.06); } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { background: var(--admin-panel-soft); color: var(--admin-muted); font-size: 11px; font-weight: 800; letter-spacing: 0; text-align: left; text-transform: uppercase; } .admin-table th, .admin-table td { padding: 11px 12px; border-bottom: 1px solid var(--admin-border-soft); vertical-align: top; } .admin-table tbody tr:last-child td { border-bottom: 0; } .admin-table code { color: #243149; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; } .text-muted { color: var(--admin-muted); } .error-cell { max-width: 260px; color: var(--admin-danger); word-break: break-word; } .status-badge { display: inline-flex; min-width: 42px; justify-content: center; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; } .status-success { background: var(--admin-success-soft); color: var(--admin-success); } .status-muted { background: var(--admin-panel-soft); color: var(--admin-muted); } .empty-state { color: var(--admin-muted); text-align: center; } .alert { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--admin-border); border-radius: 6px; background: #ffffff; font-weight: 600; } .alert-success { border-color: #b7e4ce; background: var(--admin-success-soft); color: var(--admin-success); } .alert-error { border-color: #f3b4ae; background: var(--admin-danger-soft); color: var(--admin-danger); } .auth-card { width: min(100%, 380px); padding: 24px; } .admin-form-shell { width: min(760px, calc(100% - 48px)); } .admin-form { display: grid; gap: 14px; } .admin-form > div { display: grid; gap: 6px; } .admin-form label { color: var(--admin-text); font-weight: 700; } .admin-form input[type="text"], .admin-form input[type="password"], .admin-form input[type="url"] { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--admin-border); border-radius: 6px; background: #ffffff; color: var(--admin-text); font: inherit; } .admin-form input[type="text"]:focus, .admin-form input[type="password"]:focus, .admin-form input[type="url"]:focus { border-color: var(--admin-primary); outline: 3px solid rgba(23, 32, 51, 0.12); } .admin-form input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--admin-primary); } .admin-form .help-text, .admin-form .form-text, .admin-form small { color: var(--admin-muted); font-size: 12px; } .admin-form ul { margin: 0; padding-left: 18px; color: var(--admin-danger); } @media (max-width: 900px) { .admin-shell, .admin-form-shell { width: min(100% - 24px, 760px); padding: 18px 0; } .admin-toolbar { align-items: flex-start; flex-direction: column; } .toolbar-actions { width: 100%; } .toolbar-actions .button { flex: 1 1 auto; } .table-panel { overflow-x: auto; } .admin-table { min-width: 980px; } }