/* Koguja — ühine CSS kõigile vaadetele (töölaud, loomine, detail, üleslaadimine,
   projektor). Ehitatud Digiklassi disainisüsteemile: pinnad/tekstid/äärised tulevad
   globaalsetest teemamuutujatest, rakenduse oma aktsent on indigo. */

/* ===== Disaini tokenid ===== */
:root {
    --kog-accent: #5856d6;
    --kog-accent-hover: #4a48c8;
    --kog-accent-soft: rgba(88, 86, 214, 0.09);
    --kog-accent-ring: rgba(88, 86, 214, 0.32);
    --kog-on-accent: #ffffff;
    --kog-accent-text: #4a48c8;
    --kog-halo: rgba(88, 86, 214, 0.08);
    /* Semantilised toonid on tumedamad kui Bulma omad — sildi tekst peab pehmel
       taustal saavutama 4.5:1 (12 px tekst). */
    --kog-success: #17754a;
    --kog-success-soft: rgba(47, 160, 106, 0.12);
    --kog-warning: #8a5800;
    --kog-warning-soft: rgba(255, 170, 51, 0.16);
    --kog-danger: #b52d4b;
    --kog-danger-soft: rgba(209, 58, 90, 0.10);
    /* Globaalne --text-muted on tume-teemas mõeldud --bg-primary'le; kaardil
       (heledam pind) jääb see alla 4.5:1, seega kogujal oma väärtus. */
    --kog-muted: #6b6b6b;
    --kog-shadow-1: 0 1px 2px rgba(17, 17, 26, 0.06), 0 4px 12px rgba(17, 17, 26, 0.08);
    --kog-shadow-2: 0 2px 4px rgba(17, 17, 26, 0.08), 0 12px 24px rgba(17, 17, 26, 0.12);
    --kog-r-control-sm: 6px;
    --kog-r-control: 8px;
    --kog-r-card: 12px;
    --kog-r-panel: 16px;
    --kog-r-badge: 14px;
    --kog-r-pill: 999px;
    --kog-dur-fast: 150ms;
    --kog-dur-base: 250ms;
    --kog-ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* u.php ja projector.php ei lae Bulmat — font tuleb siit */
    --kog-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
[data-theme="dark"] {
    --kog-accent: #8583f2;
    --kog-accent-hover: #9997f5;
    --kog-accent-soft: rgba(133, 131, 242, 0.12);
    --kog-accent-ring: rgba(133, 131, 242, 0.35);
    /* Hele indigo taust vajab tumedat teksti (valge annaks 3.2:1) */
    --kog-on-accent: #16213e;
    --kog-accent-text: #b0aef8;
    --kog-halo: rgba(133, 131, 242, 0.09);
    --kog-success: #6ed3a0;
    --kog-success-soft: rgba(76, 190, 134, 0.18);
    --kog-warning: #f5c27a;
    --kog-warning-soft: rgba(240, 180, 92, 0.18);
    --kog-danger: #f2909f;
    --kog-danger-soft: rgba(232, 113, 138, 0.16);
    --kog-muted: #9a9aa5;
    --kog-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.30);
    --kog-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 12px 24px rgba(0, 0, 0, 0.40);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kog-accent: #8583f2;
        --kog-accent-hover: #9997f5;
        --kog-accent-soft: rgba(133, 131, 242, 0.12);
        --kog-accent-ring: rgba(133, 131, 242, 0.35);
        --kog-on-accent: #16213e;
        --kog-accent-text: #b0aef8;
        --kog-halo: rgba(133, 131, 242, 0.09);
        --kog-success: #6ed3a0;
        --kog-success-soft: rgba(76, 190, 134, 0.18);
        --kog-warning: #f5c27a;
        --kog-warning-soft: rgba(240, 180, 92, 0.18);
        --kog-danger: #f2909f;
        --kog-danger-soft: rgba(232, 113, 138, 0.16);
        --kog-muted: #9a9aa5;
        --kog-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.30);
        --kog-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 12px 24px rgba(0, 0, 0, 0.40);
    }
}

/* Lehe sisu kest. Aktsent kaardistatakse siin, et fookusringid oleks rakenduse
   värvi — nav jääb kestast välja ja säilitab saidi globaalse aktsendi.
   Modaalid/ülekatted elavad kestast väljaspool, seega saavad sama kaardistuse. */
.kog-modal, .kog-overlay {
    --accent-color: var(--kog-accent);
    --accent-hover: var(--kog-accent-hover);
    --accent-soft: var(--kog-accent-soft);
    --accent-ring: var(--kog-accent-ring);
    --text-muted: var(--kog-muted);
}
.kog-modal :focus-visible, .kog-overlay :focus-visible {
    outline: 3px solid var(--kog-accent-ring);
    outline-offset: 2px;
}
.kog {
    --accent-color: var(--kog-accent);
    --accent-hover: var(--kog-accent-hover);
    --accent-soft: var(--kog-accent-soft);
    --accent-ring: var(--kog-accent-ring);
    --text-muted: var(--kog-muted);
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    color: var(--text-primary);
}
.kog--narrow { max-width: 640px; }
.kog--form { max-width: 560px; }

.kog, .kog *, .kog *::before, .kog *::after,
.kog-proj, .kog-proj *, .kog-proj *::before, .kog-proj *::after { box-sizing: border-box; }

/* Bulma-ta vaated (u.php, projector.php) — brauseri vaikeväärtused maha */
body.kog-body {
    margin: 0;
    font-family: var(--kog-font);
    font-size: 1rem;
    line-height: 1.5;
}
.kog, .kog-proj, .kog-modal, .kog-overlay { font-family: var(--kog-font); }
.kog :focus-visible {
    outline: 3px solid var(--kog-accent-ring);
    outline-offset: 2px;
}

/* Õrn aktsent-kuma sisselogimata / avalikel vaadetel */
body.kog-halo {
    background-image: radial-gradient(760px 360px at 50% 0, var(--kog-halo), transparent 70%);
    background-repeat: no-repeat;
}

/* ===== Tüpograafia ===== */
.kog-title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0;
    color: var(--text-primary);
}
.kog-title--panel {
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
}
.kog-subtitle {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.kog-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
    color: var(--text-primary);
}
.kog-num { font-variant-numeric: tabular-nums; }

/* ===== Ikoonibadge ===== */
.kog-badge {
    width: 56px;
    height: 56px;
    border-radius: var(--kog-r-badge);
    background: var(--kog-accent-soft);
    color: var(--kog-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.kog-badge--sm {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
}
.kog-badge--muted {
    background: var(--bg-hover);
    color: var(--text-muted);
}

/* ===== Lehe päis ===== */
.kog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.kog-head-id {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.kog-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    margin-bottom: 16px;
    min-height: 24px;
}
.kog-back:hover { color: var(--text-secondary); }

/* ===== Kaardid ja paneelid ===== */
.kog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--kog-r-card);
    box-shadow: var(--kog-shadow-1);
    padding: 20px;
    margin-bottom: 24px;
}
.kog-card--flush { padding: 0; overflow: hidden; }
.kog-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--kog-r-panel);
    box-shadow: var(--kog-shadow-1);
    padding: 28px clamp(20px, 4vw, 36px) 26px;
}
.kog-panel--center { text-align: center; }
.kog-panel--center > .kog-badge { margin-bottom: 12px; }
.kog-panel-sub {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 2px 0 20px;
}
.kog-steps {
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0;
    padding-left: 20px;
}
.kog-steps strong { color: var(--text-primary); }
.kog-panel-note {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin: 14px 0 0;
}
.kog-brand {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin: 16px 0 0;
}
.kog-brand a { color: var(--text-muted); text-decoration: none; }
.kog-brand a:hover { color: var(--text-secondary); text-decoration: underline; }

/* ===== Nupud ===== */
.kog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--kog-r-control);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--kog-dur-fast) var(--kog-ease),
                border-color var(--kog-dur-fast) var(--kog-ease),
                color var(--kog-dur-fast) var(--kog-ease);
}
.kog-btn--primary {
    background: var(--kog-accent);
    color: var(--kog-on-accent);
}
.kog-btn--primary:hover { background: var(--kog-accent-hover); color: var(--kog-on-accent); }
.kog-btn--secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.kog-btn--secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
.kog-btn--light {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.kog-btn--light:hover { background: var(--border-light); color: var(--text-primary); }
.kog-btn--danger-outline {
    background: transparent;
    color: var(--kog-danger);
    border-color: var(--kog-danger);
}
.kog-btn--danger-outline:hover { background: var(--kog-danger-soft); color: var(--kog-danger); }
.kog-btn--sm {
    min-height: 32px;
    padding: 0 12px;
    font-size: 0.8125rem;
    gap: 6px;
}
.kog-btn--full { width: 100%; }
.kog-btn[disabled], .kog-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.kog-btn i { font-size: 0.85em; }

/* Ikooninupp — puuteala 44 px, visuaal väiksem */
.kog-iconbtn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: var(--kog-r-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--kog-dur-fast) var(--kog-ease),
                background-color var(--kog-dur-fast) var(--kog-ease);
}
.kog-iconbtn:hover { color: var(--kog-danger); background: var(--bg-hover); }

.kog-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kog-btns form { margin: 0; display: inline-flex; }
.kog-btns--spaced { margin-top: 12px; }
.kog-settings-foot {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.kog-settings-foot form { margin: 0; }
.kog-icon-after { font-size: 0.7rem; margin-left: 5px; margin-right: 0 !important; }

/* ===== Sildid ja pillid ===== */
.kog-tag {
    display: inline-flex;
    align-items: center;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--kog-r-pill);
    white-space: nowrap;
}
.kog-tag--success { background: var(--kog-success-soft); color: var(--kog-success); }
.kog-tag--warning { background: var(--kog-warning-soft); color: var(--kog-warning); }
.kog-tag--danger { background: var(--kog-danger-soft); color: var(--kog-danger); }

.kog-code {
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: var(--kog-r-pill);
    padding: 1px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    white-space: nowrap;
}

.kog-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.kog-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--kog-r-pill);
    padding: 5px 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.kog-pill i { color: var(--text-muted); font-size: 0.75rem; }
.kog-pill--link {
    text-decoration: none;
    color: var(--text-secondary);
    min-height: 32px;
}
.kog-pill--link:hover { border-color: var(--kog-accent); color: var(--text-primary); }
.kog-pill[hidden] { display: none; }

/* ===== Meta-rida ===== */
.kog-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 2px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.kog-meta i { font-size: 0.75rem; margin-right: 4px; }

/* ===== Pilveteenuste riba ===== */
.kog-cloud {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--kog-r-card);
    box-shadow: var(--kog-shadow-1);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.kog-cloud-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kog-cloud-name { font-weight: 600; font-size: 0.875rem; }
.kog-cloud-sep {
    width: 1px;
    height: 24px;
    background: var(--border-color);
}
.kog-linkbtn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
}
.kog-linkbtn:hover { color: var(--text-secondary); }

/* ===== Sessioonide nimekiri (töölaud) ===== */
.kog-list {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--kog-r-card);
    box-shadow: var(--kog-shadow-1);
    overflow: hidden;
}
.kog-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}
.kog-list .kog-row:last-child { border-bottom: none; }
.kog-row-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--kog-accent-soft);
    color: var(--kog-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kog-row--off .kog-row-icon { background: var(--bg-hover); color: var(--text-muted); }
.kog-row--off .kog-row-name { color: var(--text-secondary); }
.kog-row-main { flex: 1; min-width: 0; }
.kog-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kog-row-name { font-weight: 600; color: var(--text-primary); }
.kog-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.kog-row-actions form { margin: 0; display: inline-flex; }

/* ===== Tühi olek ===== */
.kog-empty { text-align: center; padding: 48px 32px; }
.kog-empty > .kog-badge { margin-bottom: 0; }
.kog-empty h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 12px 0 4px;
    color: var(--text-primary);
}
.kog-empty p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0 auto 20px;
    max-width: 360px;
}
.kog-empty-steps {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 28px;
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-wrap: wrap;
}
.kog-empty-steps span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kog-empty-steps i { color: var(--kog-accent); }

/* ===== Teated ===== */
.kog-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--kog-r-control);
    margin-bottom: 20px;
    font-size: 0.9375rem;
    border: 1px solid transparent;
}
.kog-alert--success {
    background: var(--kog-success-soft);
    color: var(--kog-success);
    border-color: var(--kog-success);
}
.kog-alert--error {
    background: var(--kog-danger-soft);
    color: var(--kog-danger);
    border-color: var(--kog-danger);
}

/* ===== Jagamisplokk (sessiooni detail) ===== */
.kog-share {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--kog-r-card);
    box-shadow: var(--kog-shadow-1);
    padding: 20px;
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.kog-qr-frame {
    width: 112px;
    height: 112px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff;
}
.kog-qr-frame img { display: block; }
.kog-share-body { flex: 1; min-width: 260px; }
.kog-share-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.kog-join {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    word-break: break-all;
}
.kog-join-host { color: var(--text-muted); font-weight: 400; }
.kog-join-code { color: var(--kog-accent); }

/* ===== Tabel ===== */
.kog-tablewrap { overflow-x: auto; }
.kog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.kog-table th {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}
.kog-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}
.kog-table tbody tr:last-child td { border-bottom: none; }
.kog-table td i { color: var(--text-muted); margin-right: 8px; font-size: 0.8rem; }
.kog-table .kog-t-right { text-align: right; }
.kog-table .kog-t-muted { color: var(--text-muted); }
.kog-table a { color: var(--kog-accent); }
.kog-table a:hover { color: var(--kog-accent-hover); }
@media (hover: hover) {
    .kog-table tbody tr:hover { background: var(--bg-hover); }
}

/* ===== Vormielemendid ===== */
.kog-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.kog-label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}
.kog-label-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.kog-input, .kog-select, .kog-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    padding: 9px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--kog-r-control-sm);
    transition: border-color var(--kog-dur-fast) var(--kog-ease);
}
.kog-textarea { resize: vertical; min-height: 68px; }
.kog-input:focus, .kog-select:focus, .kog-textarea:focus {
    border-color: var(--kog-accent);
}
.kog-help {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.kog-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.kog-grid2 .kog-field { margin-bottom: 0; }
.kog-span2 { grid-column: 1 / -1; }
.kog-field--right { align-self: center; text-align: right; }
/* Väli vahetult kaheveerulise ruudustiku järel — ruudustikul endal pole alumist vahet */
.kog-field--top { margin-top: 18px; }
@media (max-width: 768px) {
    .kog-field--right { text-align: left; }
}

/* Lüliti (checkbox) */
.kog-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9375rem;
    min-height: 24px;
}
.kog-switch input {
    width: 18px;
    height: 18px;
    accent-color: var(--kog-accent);
    cursor: pointer;
    margin: 0;
}

/* Valikukaardid (sihtkeskkond) */
.kog-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.kog-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--kog-r-card);
    background: var(--bg-secondary);
    cursor: pointer;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: border-color var(--kog-dur-fast) var(--kog-ease),
                background-color var(--kog-dur-fast) var(--kog-ease);
}
.kog-choice:hover { border-color: var(--kog-accent); }
.kog-choice input { position: absolute; opacity: 0; pointer-events: none; }
.kog-choice svg { flex-shrink: 0; }
.kog-choice.is-on {
    border-color: var(--kog-accent);
    background: var(--kog-accent-soft);
    box-shadow: 0 0 0 1px var(--kog-accent) inset;
}
.kog-choice.is-on::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.8rem;
    color: var(--kog-accent);
}

/* Kiibid (failitüübid) */
.kog-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.kog-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--kog-r-pill);
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    min-height: 36px;
    transition: border-color var(--kog-dur-fast) var(--kog-ease),
                background-color var(--kog-dur-fast) var(--kog-ease);
}
.kog-chip:hover { border-color: var(--kog-accent); }
.kog-chip input { position: absolute; opacity: 0; pointer-events: none; }
.kog-chip::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--kog-accent);
    display: none;
}
.kog-chip.is-on {
    border-color: var(--kog-accent);
    background: var(--kog-accent-soft);
    color: var(--text-primary);
    font-weight: 600;
}
.kog-chip.is-on::before { display: inline; }

/* Kaustavalik */
.kog-folders {
    border: 1px solid var(--border-color);
    border-radius: var(--kog-r-card);
    overflow: hidden;
}
.kog-folder-new {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--kog-accent-soft);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.kog-folder-new i { color: var(--kog-accent); }
.kog-folder-new input {
    flex: 1;
    min-width: 140px;
    font-family: inherit;
    font-size: 0.875rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
    padding: 4px 0;
}
.kog-folder-hint {
    font-size: 0.75rem;
    color: var(--kog-accent-text);
    font-weight: 600;
    white-space: nowrap;
}
.kog-folder-list { max-height: 260px; overflow-y: auto; }
.kog-folder-list.is-dimmed { opacity: 0.5; }
.kog-folder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    min-height: 44px;
}
.kog-folder-list .kog-folder-item:last-child { border-bottom: none; }
.kog-folder-item:hover { background: var(--bg-hover); }
.kog-folder-item input { position: absolute; opacity: 0; pointer-events: none; }
.kog-folder-item > i:first-child { color: var(--text-muted); }
.kog-folder-item span { flex: 1; min-width: 0; }
.kog-folder-item::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--kog-accent);
    font-size: 0.75rem;
    visibility: hidden;
}
.kog-folder-item.is-on::after { visibility: visible; }

/* ===== Sisselogimata avaleht ===== */
.kog-features {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-bottom: 20px;
}
.kog-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.kog-feature:last-child { border-bottom: none; }
.kog-feature-icon {
    width: 36px;
    height: 36px;
    background: var(--kog-accent-soft);
    color: var(--kog-accent);
    border-radius: var(--kog-r-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kog-feature-title { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); }
.kog-feature-desc { color: var(--text-muted); font-size: 0.75rem; }
.kog-oauths { display: flex; flex-direction: column; gap: 10px; }
.kog-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    min-height: 44px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--kog-r-control);
    background: var(--bg-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--kog-dur-fast) var(--kog-ease);
}
.kog-oauth:hover { border-color: var(--kog-accent); color: var(--text-primary); }

/* ===== Üleslaadimisleht (osaleja) ===== */
.kog-upload-shell {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
}
.kog-upload-inner {
    width: 100%;
    max-width: 480px;
    margin: auto;
}
.kog-desc {
    background: var(--bg-hover);
    border-radius: var(--kog-r-control);
    padding: 12px 16px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: left;
}
.kog-form-left { text-align: left; }

.kog-drop {
    border: 2px dashed var(--border-color);
    border-radius: var(--kog-r-card);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--kog-dur-fast) var(--kog-ease),
                background-color var(--kog-dur-fast) var(--kog-ease);
}
.kog-drop:hover, .kog-drop.is-drag {
    border-color: var(--kog-accent);
    background: var(--kog-accent-soft);
}
.kog-drop .kog-badge { margin-bottom: 10px; }
.kog-drop-text { margin: 0 0 4px; color: var(--text-secondary); font-size: 0.95rem; }
.kog-drop-text strong { color: var(--kog-accent-text); }
.kog-drop-hint { margin: 0; color: var(--text-muted); font-size: 0.75rem; }
.kog-fileinput { display: none; }

.kog-files { display: flex; flex-direction: column; gap: 8px; }
.kog-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 12px;
    background: var(--bg-hover);
    border-radius: var(--kog-r-control);
}
.kog-file-icon {
    width: 36px;
    height: 36px;
    background: var(--kog-accent-soft);
    color: var(--kog-accent);
    border-radius: var(--kog-r-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kog-file-info { flex: 1; min-width: 0; }
.kog-file-name {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.kog-file-size { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Edenemise ülekate */
.kog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.kog-overlay.is-open { display: flex; }
.kog-overlay-card {
    background: var(--bg-card);
    border-radius: var(--kog-r-panel);
    box-shadow: var(--kog-shadow-2);
    padding: 28px;
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.kog-overlay-card h3 {
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.kog-progress {
    height: 8px;
    background: var(--bg-hover);
    border-radius: var(--kog-r-pill);
    overflow: hidden;
}
.kog-progress-bar {
    height: 100%;
    width: 0;
    background: var(--kog-accent);
    border-radius: var(--kog-r-pill);
    transition: width var(--kog-dur-base) var(--kog-ease);
}
.kog-progress-text {
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    word-break: break-all;
}

/* ===== QR modaal ===== */
.kog-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.kog-modal.is-open { display: flex; }
.kog-modal-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--kog-r-panel);
    box-shadow: var(--kog-shadow-2);
    padding: 32px;
    text-align: center;
    max-width: 400px;
    width: 100%;
}
.kog-modal-card h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}
.kog-modal-card p { color: var(--text-muted); font-size: 0.875rem; margin: 0 0 16px; }
.kog-modal-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--kog-r-control-sm);
}
.kog-modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.kog-modal-qr {
    display: block;
    margin: 0 auto 16px;
    max-width: 250px;
    width: 100%;
    background: #ffffff;
    padding: 12px;
    border-radius: var(--kog-r-card);
}

/* ===== Projektorivaade ===== */
.kog-proj {
    --accent-color: var(--kog-accent);
    --accent-ring: var(--kog-accent-ring);
    --text-muted: var(--kog-muted);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 24px 32px;
    background-image: radial-gradient(900px 420px at 50% 0, var(--kog-halo), transparent 70%);
    background-repeat: no-repeat;
    color: var(--text-primary);
}
.kog-proj-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.kog-proj-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.kog-proj-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--kog-r-control);
    background: var(--kog-accent-soft);
    color: var(--kog-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.kog-proj-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 6vw, 64px);
    flex-wrap: wrap;
}
.kog-proj-join { text-align: center; }
.kog-proj-host { font-size: 1.5rem; color: var(--text-muted); margin-bottom: 4px; }
.kog-proj-code {
    font-size: clamp(3.5rem, 12vw, 120px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--kog-accent);
}
.kog-proj-hint {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-top: 12px;
}
.kog-proj-qr {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--kog-r-panel);
    box-shadow: var(--kog-shadow-1);
    padding: 20px;
}
.kog-proj-qr img { display: block; width: clamp(140px, 22vw, 220px); height: auto; }
.kog-proj-foot {
    display: flex;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ===== Mikrointeraktsioonid ===== */
@media (hover: hover) {
    .kog-card--hover {
        transition: box-shadow var(--kog-dur-fast) var(--kog-ease),
                    transform var(--kog-dur-fast) var(--kog-ease);
    }
    .kog-card--hover:hover {
        box-shadow: var(--kog-shadow-2);
        transform: translateY(-2px);
    }
}
@keyframes kog-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.kog-pop { animation: kog-pop 280ms var(--kog-ease); }

/* ===== Mobiil ===== */
@media (max-width: 768px) {
    .kog { padding: 20px 14px 40px; }
    .kog-grid2, .kog-choices { grid-template-columns: 1fr; }
    .kog-row {
        flex-wrap: wrap;
        gap: 12px;
    }
    .kog-row-main { flex-basis: calc(100% - 56px); }
    .kog-row-actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
    .kog-title { font-size: 1.5rem; }
    .kog-share { gap: 16px; }
    .kog-proj { padding: 16px; }
}
@media (max-width: 400px) {
    .kog-panel { padding: 22px 18px 20px; }
    .kog-cloud { gap: 12px; }
    .kog-cloud-sep { display: none; }
    .kog-empty-steps { flex-direction: column; align-items: center; gap: 10px; }
}
@media (max-height: 760px) {
    .kog-upload-shell { padding: 14px 16px; }
    .kog-upload-shell .kog-panel { padding: 20px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .kog-pop { animation: none; }
    .kog *, .kog-proj * { transition-duration: 0.01ms !important; }
}