* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #1a1a2e;
    color: #eee;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 12px;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    background: #16213e;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #0f3460;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header h1 {
    font-size: 14px;
    font-weight: 500;
}

.status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e94560;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 0 5px rgba(233, 69, 96, 0.5);
}

.status.connected {
    background: #4ecca3;
    box-shadow: 0 0 8px rgba(78, 204, 163, 0.6);
}

.controls {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

button,
.header a.btn,
select {
    background: #000;
    color: #fff;
    border: 1px solid #111;
    height: 36px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 36px;
    padding: 0;
}

#errorTime,
#serviceSelect {
    width: auto;
    padding: 0 10px;
}

button,
.header a.btn {
    width: 36px;
}

select {
    padding: 0 10px;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

button:active,
a.btn:active,
select:active {
    background: #1a4a7a;
}

button.active {
    background: #0f3460;
    color: #4ecca3;
}

button.loading {
    background: #f9a826;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    50% {
        opacity: 0.6;
    }
}

#logs {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
}

.line {
    padding: 2px 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.line:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.nowrap .line {
    white-space: pre;
    word-wrap: normal;
}

.url {
    color: #64b5f6;
}

.separator {
    border-top: 1px dashed #0f3460;
    margin: 10px 0;
    padding-top: 10px;
    color: #f9a826;
    font-weight: bold;
}

.history-marker {
    border-bottom: 1px dashed #0f3460;
    margin: 5px 0;
    padding-bottom: 5px;
    color: #888;
    font-size: 11px;
}

.load-more {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 13px;
    min-height: 20px;
}

.load-more.loading {
    color: #f9a826;
}

.dots:after {
    content: '.';
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60% {
        content: '...';
    }

    80%,
    100% {
        content: '';
    }
}

@media (max-width: 600px) {
    body {
        font-size: 11px;
    }

    .header h1 {
        font-size: 12px;
    }
}

/* --- Isolated Login Page Styles (FOR LOGIN ONLY) --- */
.login-body {
    background-color: #FFFFFF !important;
    color: #333 !important;
    font-family: 'Inter', sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.login-header {
    background: #FFFFFF;
    padding: 20px 40px;
    border-bottom: 1px solid #F0F0F0;
    width: 100%;
}

.login-header .container {
    max-width: 1100px;
    margin: 0 auto;
}

.login-header .byb-logo {
    height: 44px;
    width: auto;
}

.login-hero {
    flex: 1;
    background-color: #FFF2EF;
    /* Perfect branded peach */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.login-card {
    background: #FFFFFF !important;
    padding: 60px 50px !important;
    width: 100% !important;
    max-width: 420px !important;
    text-align: center !important;
    border-radius: 32px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
}

.login-card h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0 !important;
    color: #000 !important;
    letter-spacing: -0.03em !important;
}

.login-card p.subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #666 !important;
    margin-bottom: 40px !important;
}

/* AUTHENTICATE BUTTON - COMPREHENSIVE OVERRIDE */
.login-card .action-area {
    margin-bottom: 30px;
    display: block;
    width: 100%;
}

.login-card .btn-orange {
    display: flex !important;
    background-color: #FF8A65 !important;
    /* Branded Primary Orange */
    color: #FFFFFF !important;
    text-decoration: none !important;
    padding: 20px !important;
    border-radius: 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    transition: all 0.2s ease !important;
    border: none !important;
    width: 100% !important;
    height: auto !important;
    /* Forces auto height to fix the 36px bug */
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 8px 20px rgba(255, 138, 101, 0.4) !important;
    cursor: pointer !important;
}

.login-card .btn-orange:hover {
    background-color: #FF7043 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(255, 138, 101, 0.5) !important;
}

.login-card .btn-orange:active {
    transform: translateY(1px) !important;
}

.card-footer {
    font-size: 14px !important;
    color: #BBB !important;
    font-weight: 500 !important;
}

.login-site-footer {
    background: #FFFFFF;
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: #CCC;
}

.error {
    background: #FFF5F5 !important;
    color: #E53E3E !important;
    border: 1px solid #FED7D7 !important;
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 30px !important;
    font-size: 14px !important;
}

@media (max-width: 500px) {
    .login-header {
        padding: 15px 20px;
    }

    .login-header .byb-logo {
        height: 34px;
    }

    .login-card {
        padding: 40px 30px !important;
    }

    .login-card h1 {
        font-size: 28px !important;
    }
}