/* DynoRaptor shared visual layer.
   Opt in with body.dr-global. This intentionally does not change layout flow. */

body.dr-global {
    --dr-bg: #0a0a0a;
    --dr-bg-soft: #050505;
    --dr-panel-1: #111111;
    --dr-panel-2: #161616;
    --dr-panel-3: #1c1c1c;
    --dr-text: #f4f4f4;
    --dr-muted: #a8b0bd;
    --dr-muter: #7f8796;
    --dr-line: rgba(255, 255, 255, 0.08);
    --dr-line-strong: rgba(255, 255, 255, 0.14);
    --dr-accent: #44ff66;
    --dr-accent-rgb: 68, 255, 102;
    --dr-danger: #ef4444;
    --dr-warn: #f59e0b;
    --dr-blue: #60a5fa;
    --dr-radius: 10px;
    --dr-radius-lg: 12px;
    --bg: var(--dr-bg-soft);
    --panel-1: var(--dr-panel-1);
    --panel-2: var(--dr-panel-2);
    --panel-3: var(--dr-panel-3);
    --text: var(--dr-text);
    --muted: var(--dr-muted);
    --muter: var(--dr-muter);
    --line: var(--dr-line);
    --accent: var(--dr-accent);
    --accent-rgb: var(--dr-accent-rgb);
    --danger: var(--dr-danger);
    --r-md: var(--dr-radius);
    --r-lg: var(--dr-radius-lg);
    min-height: 100vh;
    color: var(--dr-text);
    background: var(--dr-bg);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.dr-global *,
body.dr-global *::before,
body.dr-global *::after {
    box-sizing: border-box;
}

body.dr-global button,
body.dr-global input,
body.dr-global select,
body.dr-global textarea {
    font-family: inherit;
}

body.dr-global a {
    color: var(--dr-accent);
}

body.dr-global .card,
body.dr-global .card-panel,
body.dr-global .qcard,
body.dr-global .qtotals,
body.dr-global table.qtable,
body.dr-global .public-card,
body.dr-global .auth-box,
body.dr-global .login-modal-content,
body.dr-global .dr-modal-card,
body.dr-global .modal-content,
body.dr-global .channel-card,
body.dr-global .logs-card,
body.dr-global .quick-card,
body.dr-global .qs-time-card,
body.dr-global .qs-form-card,
body.dr-global .qs-success,
body.dr-global .expired-card,
body.dr-global .login-container {
    background: var(--dr-panel-2);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-lg);
    box-shadow: none;
    color: var(--dr-text);
}

body.dr-global .card-panel,
body.dr-global .public-card,
body.dr-global .auth-box,
body.dr-global .login-modal-content,
body.dr-global .dr-modal-card,
body.dr-global .modal-content,
body.dr-global .qs-time-card,
body.dr-global .qs-form-card,
body.dr-global .qs-success,
body.dr-global .expired-card {
    padding: 20px;
}

body.dr-global h1,
body.dr-global h2,
body.dr-global h3,
body.dr-global h4,
body.dr-global .panel-title,
body.dr-global .form-title,
body.dr-global .qbrand-name,
body.dr-global .brand-name,
body.dr-global .public-title {
    color: var(--dr-text);
    letter-spacing: 0;
}

body.dr-global p,
body.dr-global .panel-subtitle,
body.dr-global .channel-card-subtitle,
body.dr-global .qbrand-tag,
body.dr-global .qnote,
body.dr-global .sub,
body.dr-global .hint,
body.dr-global .summary,
body.dr-global .public-company,
body.dr-global .public-updated,
body.dr-global .secure,
body.dr-global .qs-header .qs-user,
body.dr-global .expired-card p {
    color: var(--dr-muted);
}

body.dr-global label,
body.dr-global .form-label,
body.dr-global .field label,
body.dr-global .qcard h3,
body.dr-global .card h3,
body.dr-global .qs-time-label {
    color: var(--dr-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.dr-global input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='hidden']),
body.dr-global select,
body.dr-global textarea,
body.dr-global .form-control,
body.dr-global .form-select,
body.dr-global .dr-input,
body.dr-global .dr-select {
    width: 100%;
    color: var(--dr-text);
    background: var(--dr-panel-3);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius);
    box-shadow: none;
}

body.dr-global input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='hidden']):focus,
body.dr-global select:focus,
body.dr-global textarea:focus,
body.dr-global .form-control:focus,
body.dr-global .form-select:focus,
body.dr-global .dr-input:focus,
body.dr-global .dr-select:focus {
    color: var(--dr-text);
    background: var(--dr-panel-3);
    border-color: rgba(var(--dr-accent-rgb), 0.55);
    box-shadow: 0 0 0 2px rgba(var(--dr-accent-rgb), 0.18);
    outline: none;
}

body.dr-global input::placeholder,
body.dr-global textarea::placeholder {
    color: rgba(168, 176, 189, 0.62);
}

body.dr-global .btn,
body.dr-global .button,
body.dr-global .dr-btn,
body.dr-global .qbtn,
body.dr-global .login-btn,
body.dr-global .google-btn,
body.dr-global .alerts-tab,
body.dr-global .channel-form-actions button,
body.dr-global .qs-form-card .stop-form-actions button,
body.dr-global .qs-stepper-btn {
    min-height: 40px;
    border-radius: var(--dr-radius);
    border: 1px solid var(--dr-line);
    box-shadow: none;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

body.dr-global .button--primary,
body.dr-global .btn-primary,
body.dr-global .dr-btn--primary,
body.dr-global .login-btn,
body.dr-global .qbtn.primary,
body.dr-global .alerts-tab.active,
body.dr-global .qs-form-card .stop-form-actions .primary,
body.dr-global .qs-stepper-btn {
    background: var(--dr-accent);
    border-color: var(--dr-accent);
    color: #050505;
}

body.dr-global .btn:hover,
body.dr-global .button:hover,
body.dr-global .dr-btn:hover,
body.dr-global .qbtn:hover,
body.dr-global .login-btn:hover,
body.dr-global .alerts-tab:hover,
body.dr-global .qs-stepper-btn:hover {
    border-color: rgba(var(--dr-accent-rgb), 0.35);
    opacity: 0.92;
    transform: none;
    box-shadow: none;
}

body.dr-global .btn.secondary,
body.dr-global .btn-secondary,
body.dr-global .button--ghost,
body.dr-global .dr-btn--ghost,
body.dr-global .qbtn,
body.dr-global .alerts-tab,
body.dr-global .qs-form-card .stop-form-actions .ghost {
    background: var(--dr-panel-2);
    border-color: var(--dr-line);
    color: var(--dr-text);
}

body.dr-global .btn-danger {
    background: var(--dr-danger);
    border-color: var(--dr-danger);
    color: #ffffff;
}

body.dr-global table,
body.dr-global .alerts-table,
body.dr-global .channel-table,
body.dr-global .public-table,
body.dr-global .qtable {
    color: var(--dr-text);
}

body.dr-global table thead,
body.dr-global table.qtable thead th,
body.dr-global .alerts-table thead,
body.dr-global .channel-table thead,
body.dr-global .public-table thead {
    background: var(--dr-panel-3);
    color: var(--dr-muted);
}

body.dr-global table th,
body.dr-global table td,
body.dr-global .alerts-table th,
body.dr-global .alerts-table td,
body.dr-global .channel-table th,
body.dr-global .channel-table td,
body.dr-global .public-table th,
body.dr-global .public-table td,
body.dr-global table.qtable th,
body.dr-global table.qtable td {
    border-color: var(--dr-line);
}

body.dr-global table tbody tr:hover,
body.dr-global .alerts-table tbody tr:hover,
body.dr-global .channel-table tbody tr:hover,
body.dr-global .public-table tbody tr:hover {
    background: rgba(var(--dr-accent-rgb), 0.045);
}

/* Alerts */
body.dr-alerts-page {
    background: var(--dr-bg);
}

body.dr-alerts-page .alerts-top-bar {
    background: rgba(10, 10, 10, 0.92);
    border-bottom: 1px solid var(--dr-line);
    backdrop-filter: blur(14px);
}

body.dr-alerts-page .alerts-main {
    max-width: 1240px;
}

body.dr-alerts-page .alerts-tab {
    padding: 9px 14px;
}

body.dr-alerts-page .card-panel,
body.dr-alerts-page .channel-card {
    background: var(--dr-panel-2);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-lg);
}

body.dr-alerts-page .modal-card {
    background: var(--dr-panel-2);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-lg);
    box-shadow: none;
}

body.dr-alerts-page .channel-chip,
body.dr-alerts-page .status-badge,
body.dr-alerts-page .chat-chip {
    border-radius: 999px;
}

/* Auth + invite */
body.dr-auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--dr-bg);
}

body.dr-auth-page .login-container {
    width: min(440px, 100%);
    padding: 0;
    border: 0;
    background: transparent;
}

body.dr-auth-page .btn.login-btn,
body.dr-auth-page button.login-btn,
body.dr-public-flow .btn {
    background: var(--dr-accent) !important;
    background-color: var(--dr-accent) !important;
    border-color: var(--dr-accent) !important;
    color: #050505 !important;
}

body.dr-auth-page .btn.login-btn:hover,
body.dr-auth-page .btn.login-btn:focus-visible,
body.dr-auth-page button.login-btn:hover,
body.dr-auth-page button.login-btn:focus-visible {
    background: color-mix(in srgb, var(--dr-accent) 86%, black) !important;
    background-color: color-mix(in srgb, var(--dr-accent) 86%, black) !important;
    border-color: var(--dr-accent) !important;
    color: #050505 !important;
    opacity: 1;
}

body.dr-auth-page .auth-box {
    width: 100%;
    padding: 28px;
}

body.dr-auth-page .form-title {
    margin-bottom: 22px;
    font-size: 1.35rem;
}

body.dr-auth-page .auth-links a {
    color: var(--dr-muted);
}

body.dr-auth-page .auth-links a:hover {
    color: var(--dr-accent);
}

body.dr-auth-page .alert-info {
    background: rgba(var(--dr-accent-rgb), 0.08);
    border: 1px solid rgba(var(--dr-accent-rgb), 0.24);
    color: var(--dr-text);
}

body.dr-auth-page .modal-content {
    background: var(--dr-panel-2);
    border: 1px solid var(--dr-line);
}

/* Quick stop */
body.dr-quick-stop-page {
    background: var(--dr-bg);
    color: var(--dr-text);
}

body.dr-quick-stop-page .qs-wrapper {
    max-width: 600px;
}

body.dr-quick-stop-page .qs-header h1,
body.dr-quick-stop-page .qs-machine,
body.dr-quick-stop-page .qs-time-value,
body.dr-quick-stop-page .qs-duration-value {
    color: var(--dr-text);
}

body.dr-quick-stop-page .qs-machine,
body.dr-quick-stop-page .qs-check {
    color: var(--dr-accent);
}

body.dr-quick-stop-page .qs-time-block,
body.dr-quick-stop-page .qs-duration-row,
body.dr-quick-stop-page .qs-form-card .stop-interview,
body.dr-quick-stop-page .qs-form-card .stop-interview-answered {
    background: var(--dr-panel-3);
    border: 1px solid var(--dr-line);
}

body.dr-quick-stop-page .qs-form-card .stop-chip {
    background: var(--dr-panel-2);
    border: 1px solid var(--dr-line);
    color: var(--dr-text);
}

body.dr-quick-stop-page .qs-form-card .stop-chip.active,
body.dr-quick-stop-page .qs-form-card .stop-chip:hover {
    background: rgba(var(--dr-accent-rgb), 0.12);
    border-color: rgba(var(--dr-accent-rgb), 0.42);
    color: var(--dr-accent);
}

body.dr-quick-stop-page .qs-error,
body.dr-quick-stop-page .qs-time-error,
body.dr-quick-stop-page .err {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.34);
    color: #fca5a5;
}

/* Public quote + checkout flow */
body.dr-public-flow {
    background: var(--dr-bg);
    color: var(--dr-text);
}

body.dr-public-flow .wrap,
body.dr-public-flow .qwrap {
    width: min(960px, calc(100% - 32px));
}

body.dr-public-flow .brand-name,
body.dr-public-flow .qbrand-name {
    color: var(--dr-text);
    font-weight: 700;
}

body.dr-public-flow .stepper .s,
body.dr-public-flow .qmeta .status,
body.dr-public-flow .qitem-label,
body.dr-public-flow .item-label {
    background: var(--dr-panel-2);
    border: 1px solid var(--dr-line);
    color: var(--dr-muted);
}

body.dr-public-flow .stepper .s.active,
body.dr-public-flow .stepper .s.done {
    border-color: rgba(var(--dr-accent-rgb), 0.34);
    color: var(--dr-accent);
}

body.dr-public-flow .qmeta .num,
body.dr-public-flow .qtotals .row.total .v,
body.dr-public-flow .totals .row.total .v,
body.dr-public-flow .summary strong,
body.dr-public-flow .qsku {
    color: var(--dr-accent);
}

body.dr-public-flow .qalert,
body.dr-public-flow .err {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.34);
    color: #fca5a5;
}

body.dr-public-flow .qbtn,
body.dr-public-flow .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

body.dr-public-flow .btn {
    width: 100%;
}

/* Public online machines */
body.dr-public-machines-page .public-card {
    background: var(--dr-panel-2);
    border: 1px solid var(--dr-line);
    box-shadow: none;
}

body.dr-public-machines-page .public-table-wrapper {
    background: var(--dr-panel-1);
    border: 1px solid var(--dr-line);
    box-shadow: none;
}

body.dr-public-machines-page .status-tag--ok {
    background: var(--dr-accent);
    color: #050505;
}

/* Standalone admin/docs */
body.dr-admin-login-page,
body.dr-admin-surface,
body.dr-docs-page {
    background: var(--dr-bg);
    color: var(--dr-text);
}

body.dr-admin-login-page .login-container {
    background: var(--dr-panel-2);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-lg);
    box-shadow: none;
}

body.dr-admin-login-page .google-btn {
    background: var(--dr-panel-3);
    color: var(--dr-text);
}

body.dr-admin-surface .card,
body.dr-admin-surface .sales-modal,
body.dr-admin-surface .panel,
body.dr-docs-page .content-card,
body.dr-docs-page .doc-card {
    background: var(--dr-panel-2);
    border-color: var(--dr-line);
    box-shadow: none;
}

@media (max-width: 680px) {
    body.dr-global .card-panel,
    body.dr-global .auth-box,
    body.dr-global .qcard,
    body.dr-global .qtotals,
    body.dr-global .public-card,
    body.dr-global .qs-time-card,
    body.dr-global .qs-form-card {
        padding: 16px;
    }

    body.dr-public-flow .wrap,
    body.dr-public-flow .qwrap {
        width: min(100%, calc(100% - 24px));
        padding-left: 0;
        padding-right: 0;
    }
}

@media print {
    body.dr-public-flow {
        color: #111827;
        background: #ffffff;
    }

    body.dr-public-flow .qcard,
    body.dr-public-flow .qtotals,
    body.dr-public-flow table.qtable {
        color: #111827;
        background: #ffffff;
        border-color: #dddddd;
    }

    body.dr-public-flow table.qtable thead th {
        color: #4b5563;
        background: #f3f4f6;
    }
}