.guest-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.guest-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem 0;
}

.login-card {
    border-radius: 0.75rem;
}

.login-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.app-wrapper {
    min-height: 100vh;
    background: #f8f9fa;
}

.app-sidebar {
    width: 260px;
    min-height: 100vh;
    background: #212529;
    flex-shrink: 0;
}

.sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0.375rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
}

.sidebar-nav .nav-link:hover:not(.disabled) {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav .nav-link.active {
    color: #fff;
    background: #0d6efd;
}

.sidebar-nav .nav-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.app-content {
    min-width: 0;
}

.app-header {
    min-height: 72px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.test-connection-result {
    font-size: 0.875rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
}

.test-connection-result.is-loading {
    background: #f8f9fa;
    color: #6c757d;
}

.test-connection-result.is-success {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.test-connection-result.is-error {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.description-counter-valid {
    background-color: #198754 !important;
    color: #fff !important;
}

.result-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.result-icon--success {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.result-icon--error {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.publish-article-preview {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    padding: 1rem;
    max-height: 420px;
    overflow: auto;
}

.font-monospace {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    .app-sidebar {
        display: none;
    }
}

/* =========================================================
   KOISLOT UI — luxury light/dark design system
   ========================================================= */
:root {
    color-scheme: light;
    --koi-bg: #f3f5fb;
    --koi-surface: rgba(255,255,255,.82);
    --koi-surface-solid: #ffffff;
    --koi-border: rgba(99,102,241,.13);
    --koi-text: #101426;
    --koi-muted: #6b7280;
    --koi-sidebar: #0c1020;
    --koi-primary: #6d5dfc;
    --koi-secondary: #d946ef;
    --koi-accent: #22d3ee;
    --koi-shadow: 0 18px 50px rgba(30,41,59,.09);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --koi-bg: #080b14;
    --koi-surface: rgba(17,22,38,.84);
    --koi-surface-solid: #111626;
    --koi-border: rgba(148,163,184,.14);
    --koi-text: #eef2ff;
    --koi-muted: #9ca3af;
    --koi-sidebar: #080b14;
    --koi-shadow: 0 20px 60px rgba(0,0,0,.38);
}

html, body { transition: background-color .25s ease, color .25s ease; }
.koislot-body {
    background:
        radial-gradient(circle at 85% 0%, rgba(109,93,252,.11), transparent 28rem),
        radial-gradient(circle at 30% 100%, rgba(217,70,239,.07), transparent 28rem),
        var(--koi-bg) !important;
    color: var(--koi-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.koislot-sidebar {
    background:
        radial-gradient(circle at 20% 0%, rgba(109,93,252,.22), transparent 19rem),
        linear-gradient(180deg, #101529 0%, var(--koi-sidebar) 100%) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 16px 0 50px rgba(3,7,18,.16);
}

.koislot-brand { display:flex; align-items:center; gap:.7rem; color:#fff; font-style:normal; letter-spacing:.04em; }
.koislot-brand:hover { opacity:.92; }
.koislot-brand-mark {
    width:2.35rem; height:2.35rem; display:grid; place-items:center; border-radius:.85rem;
    font-weight:900; font-size:1.05rem; color:#fff;
    background:linear-gradient(135deg,var(--koi-primary),var(--koi-secondary));
    box-shadow:0 9px 24px rgba(109,93,252,.38), inset 0 1px 0 rgba(255,255,255,.35);
}
.koislot-brand strong { font-size:1.05rem; font-weight:850; }
.koislot-brand em { color:#a5b4fc; font-size:1.05rem; font-weight:500; font-style:normal; }

.koislot-topbar {
    position:sticky; top:0; z-index:30;
    background:var(--koi-surface) !important;
    border-color:var(--koi-border) !important;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}

.theme-toggle {
    width:2.55rem; height:2.55rem; display:inline-grid; place-items:center; border-radius:.9rem;
    color:#5b5bd6; border:1px solid var(--koi-border); background:var(--koi-surface-solid);
    box-shadow:0 8px 22px rgba(30,41,59,.08); transition:.2s ease;
}
.theme-toggle:hover { transform:translateY(-2px) rotate(-3deg); border-color:rgba(109,93,252,.42); }
.theme-icon-light { display:none; }
html[data-theme="dark"] .theme-icon-dark { display:none; }
html[data-theme="dark"] .theme-icon-light { display:inline-block; color:#fbbf24; }

/* Upgrade existing Tailwind-built panels without changing page behavior. */
.koislot-body main .bg-white,
.koislot-body main section,
.koislot-body main .shadow,
.koislot-login-card {
    border-color:var(--koi-border) !important;
    box-shadow:var(--koi-shadow);
}
.koislot-body main .bg-white,
.koislot-login-card { background:var(--koi-surface) !important; backdrop-filter:blur(16px); }
.koislot-body main .rounded-lg,
.koislot-body main .rounded-xl { border-radius:1rem !important; }
.koislot-body main .rounded-2xl { border-radius:1.25rem !important; }

.koislot-body button.bg-primary,
.koislot-body a.bg-primary,
.koislot-body button.bg-blue-600,
.koislot-body a.bg-blue-600 {
    background:linear-gradient(135deg,var(--koi-primary),#8b5cf6 52%,var(--koi-secondary)) !important;
    box-shadow:0 10px 25px rgba(109,93,252,.25); border:0 !important;
}
.koislot-body button, .koislot-body a { transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.koislot-body button:not(.btn-delete-project):hover { filter:brightness(1.03); }

.koislot-body input,
.koislot-body textarea,
.koislot-body select {
    background:var(--koi-surface-solid) !important; color:var(--koi-text) !important;
    border-color:var(--koi-border) !important; outline:none;
}
.koislot-body input:focus,
.koislot-body textarea:focus,
.koislot-body select:focus {
    border-color:rgba(109,93,252,.72) !important;
    box-shadow:0 0 0 4px rgba(109,93,252,.12) !important;
}

.koislot-login-bg { position:relative; overflow:hidden; }
.koislot-login-bg::before,
.koislot-login-bg::after {
    content:""; position:fixed; width:28rem; height:28rem; border-radius:50%; filter:blur(2px); pointer-events:none;
}
.koislot-login-bg::before { top:-13rem; right:-9rem; background:radial-gradient(circle,rgba(109,93,252,.22),transparent 66%); }
.koislot-login-bg::after { bottom:-15rem; left:-8rem; background:radial-gradient(circle,rgba(217,70,239,.18),transparent 66%); }
.koislot-login-card { position:relative; border:1px solid var(--koi-border); box-shadow:0 30px 90px rgba(35,35,80,.18); }
.koislot-login-card .koislot-brand strong { color:var(--koi-text); }

html[data-theme="dark"] .koislot-body .bg-white,
html[data-theme="dark"] .koislot-body .bg-slate-50,
html[data-theme="dark"] .koislot-body .bg-slate-100 { background-color:var(--koi-surface-solid) !important; }
html[data-theme="dark"] .koislot-body .text-slate-900,
html[data-theme="dark"] .koislot-body .text-slate-800,
html[data-theme="dark"] .koislot-body .text-slate-700 { color:var(--koi-text) !important; }
html[data-theme="dark"] .koislot-body .text-slate-600,
html[data-theme="dark"] .koislot-body .text-slate-500,
html[data-theme="dark"] .koislot-body .text-slate-400 { color:var(--koi-muted) !important; }
html[data-theme="dark"] .koislot-body .border-slate-100,
html[data-theme="dark"] .koislot-body .border-slate-200,
html[data-theme="dark"] .koislot-body .border-slate-300 { border-color:var(--koi-border) !important; }
html[data-theme="dark"] .koislot-body table { color:var(--koi-text); }
html[data-theme="dark"] .koislot-body pre { background:#080c18 !important; color:#c7d2fe !important; }

.mobile-menu-button,
.mobile-menu-backdrop { display:none; }

@media (max-width: 767px) {
    html, body { width:100%; max-width:100%; overflow-x:hidden; }
    body.mobile-menu-open { overflow:hidden; }
    .koislot-sidebar {
        display:flex !important;
        position:fixed !important;
        inset:0 auto 0 0;
        width:min(86vw, 18rem) !important;
        height:100dvh !important;
        max-height:100dvh !important;
        z-index:70;
        transform:translateX(-105%);
        transition:transform .24s ease;
        box-shadow:20px 0 60px rgba(0,0,0,.38);
    }
    body.mobile-menu-open .koislot-sidebar { transform:translateX(0); }
    .mobile-menu-backdrop {
        position:fixed; inset:0; z-index:60;
        background:rgba(3,7,18,.62); backdrop-filter:blur(3px);
    }
    body.mobile-menu-open .mobile-menu-backdrop { display:block; }
    .mobile-menu-button {
        display:inline-grid; place-items:center; flex:0 0 auto;
        width:2.55rem; height:2.55rem; border-radius:.85rem;
        border:1px solid var(--koi-border); background:var(--koi-surface-solid);
        color:var(--koi-text); font-size:1.35rem;
    }
    .koislot-topbar { padding:.75rem 1rem !important; gap:.6rem; }
    .koislot-topbar h1 { font-size:1rem !important; max-width:52vw; }
    .koislot-topbar > div:last-child { gap:.35rem !important; flex:0 0 auto; }
    .koislot-topbar a { display:none; }
    .koislot-topbar #runStatusBadge { padding:.55rem .7rem !important; font-size:.72rem; white-space:nowrap; }
    .koislot-topbar #runStatusBadge > span:first-child { width:.42rem; height:.42rem; }
    .koislot-body main { padding:.75rem !important; overflow-x:hidden !important; }
    .workspace-form { width:100%; max-width:100%; }
    .workspace-form > section { padding:1rem !important; border-radius:1rem !important; }
    .workspace-form input,
    .workspace-form select,
    .workspace-form textarea { min-width:0; max-width:100%; font-size:16px !important; }
    .workspace-form textarea { line-height:1.45; }
    .workspace-form .grid { grid-template-columns:minmax(0, 1fr) !important; }
    .workspace-form .flex.justify-between { align-items:flex-start; gap:.6rem; }
    .workspace-form button,
    .workspace-form a { min-height:2.75rem; }
    #btnSave, #btnSaveGenerate, #btnGenerateOnly,
    #btnScrape { width:100%; justify-content:center; }
    #progressCard > .flex.justify-between { flex-direction:column; }
    #liveLog {
        height:18rem !important; padding:.85rem !important;
        overflow:auto !important; white-space:pre-wrap;
        overflow-wrap:anywhere; word-break:break-word;
        -webkit-overflow-scrolling:touch;
    }
    .koislot-body table { display:block; width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
    .koislot-body .modal-backdrop > div { width:calc(100vw - 1.5rem) !important; max-width:none !important; max-height:90dvh; overflow:auto; }
    #downloadBox, #downloadBox a { width:100%; }
    #downloadBox a { justify-content:center; text-align:center; }
}

@media (max-width: 390px) {
    .koislot-topbar #runStatusBadge { display:none; }
    .koislot-topbar h1 { max-width:58vw; }
    .theme-toggle { width:2.4rem; height:2.4rem; }
}