/* Kobalto's shared app design. Loaded after legacy page styles.
   Keep semantic highlights, reading preferences, visibility and interaction rules intact. */
body.koby-app {
    --app-paper: #f8f5ed;
    --app-surface: #fffdf8;
    --app-soft: #eeeee3;
    --app-sage: #e8eddf;
    --app-bluewash: #e8edf5;
    --app-line: #deded2;
    --app-ink: #192d45;
    --app-muted: #566373;
    --app-accent: #174dc5;
    --app-shadow: 0 8px 28px #192d4509;
    --app-serif: Georgia, 'Times New Roman', serif;
    background: var(--app-paper);
    color: var(--app-ink);
    font-family: Arial, Helvetica, sans-serif;
}
body.koby-app.dark-mode {
    --app-paper: #141e29;
    --app-surface: #1d2a37;
    --app-soft: #24333e;
    --app-sage: #283a35;
    --app-bluewash: #243753;
    --app-line: #3a4958;
    --app-ink: #f0eee6;
    --app-muted: #bbc4cc;
    --app-accent: #a9c7ff;
    --app-shadow: 0 8px 28px #0002;
    color-scheme: dark;
}
body.koby-app > header {
    background: var(--app-paper);
    border-bottom: 1px solid var(--app-line);
    box-shadow: none;
    min-height: 88px;
    padding: 20px max(24px, calc((100vw - 1160px) / 2));
    gap: 20px;
}
body.koby-app :is(.nav-link, .theme-toggle, .lang-picker, .am-item) { color: var(--app-muted); }
body.koby-app .koby-wordmark { color: var(--app-accent); }
body.koby-app :is(.avatar-menu, .notification-dropdown, .header-menu.open) {
    background: var(--app-surface);
    border-color: var(--app-line);
    box-shadow: var(--app-shadow);
}
body.koby-app :is(.am-name, .am-head) { color: var(--app-ink); }
body.koby-app :is(.am-sep, .setting-item) { border-color: var(--app-line); }
body.koby-app :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--app-accent);
    outline-offset: 3px;
}
body.koby-app :is(.listen-container, .feed-container, .connections-container, .settings-container, .class-container) {
    margin: 38px auto 60px;
}
body.koby-app .listen-container { max-width: 1140px; }
body.koby-app :is(.groups-page, .search-page) { background: transparent; padding-top: 38px; }
body.koby-app :is(.container, .upload-container, .class-card, .settings-section, .highlight-card, .feed-item, .user-card, .group-card, .search-result, .stat-card, .chart-container, .sp-card) {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 16px;
    box-shadow: var(--app-shadow);
    color: var(--app-ink);
}
body.koby-app :is(.feed-header, .connections-header, .settings-header, .search-header) { margin-bottom: 32px; }
body.koby-app :is(.feed-header h1, .connections-header h1, .settings-header h1, .search-header h1, .groups-page > h1, .upload-container > h1, .legal-header h1, .sp-card h1) {
    font-family: var(--app-serif);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -1.4px;
    color: var(--app-ink);
    line-height: 1.15;
}
body.koby-app :is(.settings-section h2, .class-card h2, .hero-section h2, .how-it-works-section h3, .shelf-title, .cat-shelf-head h3) {
    font-family: var(--app-serif);
    font-weight: 400;
    font-size: 27px;
    letter-spacing: -.5px;
    color: var(--app-ink);
}
body.koby-app :is(.setting-info h3, .group-card h3, .user-card-details h3, .highlight-header h1, .cat-title, .shelf-title, .stat-label) { color: var(--app-ink); }
body.koby-app :is(.settings-header p, .section-description, .setting-info p, .class-card .sub, .muted, .feed-header p, .connections-header p, .step-description, .user-card-details p, .cat-author, .cat-sub, .cat-facts, .cat-shelf-head p, .shelf-author, .shelf-source, .site-footer, .paste-link) { color: var(--app-muted); }
body.koby-app :is(.btn-primary, .browse-btn, .guest-signin, .cat-add, .cat-ownbooks-btn, .sp-submit, .class-card .btn:not(.secondary):not(.danger), .btn-load-more) {
    background: #174dc5;
    color: #fff;
    border: 1px solid #174dc5;
    border-radius: 9px;
    box-shadow: none;
    font-weight: 600;
    min-height: 42px;
}
body.koby-app :is(.btn-primary, .browse-btn, .guest-signin, .cat-add, .sp-submit):hover:not(:disabled) { background: #123da0; box-shadow: none; }
body.koby-app :is(.btn-secondary, .browse-btn.secondary, .class-card .btn.secondary, .btn-mark-read) {
    background: var(--app-surface);
    color: var(--app-accent);
    border: 1px solid var(--app-line);
    border-radius: 9px;
    min-height: 42px;
}
body.koby-app :is(.btn-danger, .class-card .btn.danger) { background: #ad3434; color: white; border-radius: 9px; }
body.koby-app :is(.field, .code-input, .setting-control select, .sp-pass-row input, .search-input-wrapper, .discover-searchbar, .filters, #paste-input, .search-filters) {
    background: var(--app-surface);
    color: var(--app-ink);
    border-color: var(--app-line);
    border-radius: 10px;
    box-shadow: none;
}
body.koby-app :is(input, textarea)::placeholder { color: var(--app-muted); opacity: 1; }
body.koby-app :is(.tabs, .groups-tabs, .lib-tabs) { border-color: var(--app-line); }
body.koby-app .lib-tabs { padding: 0 0 12px; gap: 8px; margin-bottom: 30px; }
body.koby-app .lib-tab { color: var(--app-muted); border: 1px solid transparent; border-radius: 9px; padding: 12px 20px; margin: 0; }
body.koby-app .lib-tab + .lib-tab { margin-left: 0; }
body.koby-app .lib-tab.active { background: var(--app-bluewash); color: var(--app-accent); border-color: var(--app-line); }
body.koby-app :is(.cat-chip, .shelf-chip) { color: var(--app-muted); border-color: var(--app-line); background: var(--app-surface); min-height: 38px; }
body.koby-app :is(.cat-chip.active, .shelf-chip.active) { background: #174dc5; color: white; border-color: #174dc5; }
body.koby-app .discover-hero { background: var(--app-sage); border-radius: 18px; max-width: none; text-align: left; padding: 38px 170px 38px 38px; position: relative; margin: 0 0 24px; }
body.koby-app .discover-hero h2 { font: 400 clamp(30px,4vw,43px)/1.1 var(--app-serif); letter-spacing: -1px; color: var(--app-ink); margin-bottom: 16px; }
body.koby-app .discover-hero p { color: var(--app-muted); max-width: 690px; line-height: 1.7; }
body.koby-app .discover-companion { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); width: 105px; height: 150px; object-fit: contain; }
body.koby-app .discover-searchbar { max-width: none; padding-inline: 20px; border-radius: 10px; }
body.koby-app .cat-chips { justify-content: flex-start; margin-bottom: 30px; }
body.koby-app .cat-grid { gap: 20px; }
body.koby-app .cat-card { background: var(--app-surface); border-color: var(--app-line); border-radius: 12px; box-shadow: none; padding: 14px; }
body.koby-app .cat-card:hover { box-shadow: var(--app-shadow); }
body.koby-app .cat-cover { background: var(--app-soft); border-radius: 7px; }
body.koby-app .cat-title { font-size: 15px; line-height: 1.4; }
body.koby-app .cat-add { margin-top: 14px; }
body.koby-app .cat-ownbooks { background: var(--app-bluewash); border: 1px solid var(--app-line); padding: 22px; }
body.koby-app .cat-ownbooks-text { color: var(--app-ink); }
body.koby-app .listen-drop-zone { background: var(--app-sage); border: 1px dashed #899d84; padding: 36px; border-radius: 18px; }
body.koby-app .listen-drop-zone h2 { font: 400 36px/1.2 var(--app-serif); letter-spacing: -1px; color: var(--app-ink); }
body.koby-app .listen-drop-zone p { color: var(--app-muted); line-height: 1.7; }
body.koby-app .kobalto-art { height: 150px; width: 100px; object-fit: contain; }
body.koby-app .listen-drop-zone.drag-over { background: var(--app-bluewash); border-color: var(--app-accent); }
body.koby-app .shelf-card { border-radius: 12px; }
/* Style the frame of the reader; text size, font, line height and semantic highlights remain user-controlled. */
body.koby-app .reading-pane { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-line); box-shadow: var(--app-shadow); border-radius: 15px; }
body.koby-app .player-title { color: var(--app-ink); }
body.koby-app :is(.player-header, .chapter-bar) { border-color: var(--app-line); }
body.koby-app :is(.hl-drawer, .pop-panel, .type-popover, .kobo-modal, .prepare-card) { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-line); box-shadow: var(--app-shadow); }
body.koby-app :is(.hl-btn, .transport-btn, .tline-btn) { border-color: var(--app-line); }
body.koby-app .site-footer { border-top: 1px solid var(--app-line); padding: 26px 20px; }
body.koby-app .site-footer a { color: var(--app-muted); }
/* Classroom: generous targets, a quiet welcome and grouped teacher controls. */
body.koby-app .class-container { max-width: 800px; }
body.koby-app .class-card { padding: 32px; }
body.koby-app .class-welcome { display: block; height: 135px; width: 90px; object-fit: contain; margin: 0 auto 20px; }
body.koby-app #join-card { border-top: 4px solid #b6c5a8; }
body.koby-app .class-code-big { color: var(--app-accent); }
body.koby-app .class-sec { background: var(--app-soft); border-color: var(--app-line); border-radius: 12px; padding: 20px; }
body.koby-app .class-sec-title { color: var(--app-ink); }
body.koby-app .seat-chip { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-line); }
body.koby-app .seat-chip:hover { background: var(--app-bluewash); border-color: var(--app-accent); }
body.koby-app .guard { background: var(--app-soft); color: var(--app-ink); border-left-color: #b1873f; }
/* Highlights and uploads. */
body.koby-app #landing-page { padding: 40px; }
body.koby-app .hero-section { background: var(--app-sage); border-radius: 14px; padding: 34px; }
body.koby-app .highlights-companion { width: 90px; height: 135px; object-fit: contain; margin: 0 auto 16px; display: block; }
body.koby-app .hero-section > p { color: var(--app-muted); line-height: 1.7; }
body.koby-app .step { background: var(--app-soft); border: 1px solid var(--app-line); border-radius: 12px; padding: 24px; }
body.koby-app .step:nth-child(2) { background: var(--app-bluewash); }
body.koby-app .step p { color: var(--app-muted); }
body.koby-app .upload-container { padding: 36px; }
body.koby-app :is(.instructions, .mode-card-content) { background: var(--app-soft); border-color: var(--app-line); color: var(--app-ink); border-radius: 12px; }
body.koby-app .mode-card input:checked + .mode-card-content { background: var(--app-bluewash); border-color: var(--app-accent); box-shadow: none; }
body.koby-app .mode-card input[type=radio] { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
body.koby-app .mode-card input:focus-visible + .mode-card-content { outline: 3px solid var(--app-accent); outline-offset: 3px; }
body.koby-app :is(.mode-subtitle, .mode-description, .instructions p, .instructions li) { color: var(--app-muted); }
/* Community and account surfaces share the same paper-and-ink treatment. */
body.koby-app :is(.empty-state, .loading-state, .search-suggestions, .groups-search, .tab-content) { color: var(--app-muted); }
body.koby-app .search-input { color: var(--app-ink); }
body.koby-app .community-gate { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 16px; box-shadow: var(--app-shadow); }
body.koby-app .community-gate h2 { font: 400 30px/1.2 var(--app-serif); color: var(--app-ink); }
body.koby-app .recap-page { background: var(--app-paper); }
body.koby-app .recap-container { background: var(--app-bluewash); color: var(--app-ink); border: 1px solid var(--app-line); border-radius: 20px; }
body.koby-app .recap-slide { background: var(--app-bluewash); color: var(--app-ink); }
body.koby-app :is(.slide-title, .slide-book-title, .slide-big-number) { font-family: var(--app-serif); color: var(--app-ink); }
body.koby-app .kb-auth { background: var(--app-surface); color: var(--app-ink); border: 1px solid var(--app-line); border-radius: 18px; box-shadow: 0 24px 80px #10213130; }
body.koby-app .kb-auth h2 { font: 400 32px/1.2 var(--app-serif); color: var(--app-ink); }
body.koby-app .kb-auth .kb-auth-form input { background: var(--app-paper); color: var(--app-ink); border-color: var(--app-line); min-height: 44px; }
body.koby-app .kb-auth button.kb-btn { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-line); }
body.koby-app .kb-auth button.kb-btn-primary { background: #174dc5; color: white; }
body.koby-app .kb-auth-links button { color: var(--app-accent); }
body.koby-app .kb-auth-divider { color: var(--app-muted); }
body.koby-app .sp-card h1 { font-size: 32px; }
body.koby-app .sp-card { padding: 32px; }
body.koby-app .sp-logo .koby-wordmark { font: 800 43px/1 Arial,sans-serif; letter-spacing: -3px; text-decoration: none; }
body.koby-app .sp-logo .koby-wordmark span { color: #b1873f; font-size: 22px; vertical-align: top; }
/* Long-form legal pages: a readable document within the same brand. */
body.koby-app .legal-container { max-width: 900px; padding: 42px 24px 80px; }
body.koby-app .legal-header { padding: 25px 0 35px; border-bottom: 1px solid var(--app-line); }
body.koby-app .legal-section h2 { font: 400 29px/1.25 var(--app-serif); color: var(--app-ink); border-color: var(--app-line); }
body.koby-app .legal-section h3 { color: var(--app-ink); }
body.koby-app :is(.legal-section p, .legal-section ul, .legal-section ol, .legal-header p) { color: var(--app-muted); line-height: 1.8; }
body.koby-app :is(.legal-nav, .highlight-box, .contact-info) { background: var(--app-soft); border-color: var(--app-line); border-radius: 12px; }
body.koby-app :is(.legal-section a, .legal-nav a, .legal-back, .contact-info a) { color: var(--app-accent); }
body.koby-app .document-nav { display: flex; align-items: center; gap: 28px; }
body.koby-app .document-nav .koby-wordmark { margin-right: auto; }
body.koby-app .document-nav > a:not(.koby-wordmark) { color: var(--app-muted); font-size: 13px; }
@media(max-width:760px) {
    body.koby-app > header { min-height: 76px; padding: 16px 18px; gap: 12px; }
    body.koby-app :is(.listen-container, .settings-container, .class-container, .feed-container, .connections-container) { margin-top: 24px; padding-inline: 18px; }
    body.koby-app :is(.container, .upload-container) { width: auto; margin: 24px 16px; padding: 22px; box-sizing: border-box; }
    body.koby-app .discover-hero { padding: 26px 105px 26px 22px; }
    body.koby-app .discover-hero h2 { font-size: 31px; }
    body.koby-app .discover-hero p { font-size: 14px; }
    body.koby-app .discover-companion { width: 73px; height: 110px; right: 17px; }
    body.koby-app .cat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    body.koby-app .cat-card { padding: 10px; min-width: 0; }
    body.koby-app .listen-drop-zone { padding: 24px 18px; }
    body.koby-app .lib-tab { padding: 11px 13px; font-size: 14px; }
    body.koby-app :is(.class-card, .settings-section) { padding: 24px 20px; }
    body.koby-app .mode-cards { grid-template-columns: minmax(0,1fr); }
    body.koby-app #landing-page { padding: 18px; }
    body.koby-app .hero-section { padding: 26px 18px; }
    body.koby-app .setting-item { gap: 16px; flex-wrap: wrap; }
    body.koby-app .setting-control { margin-left: 0; }
    body.koby-app .legal-container { padding-inline: 20px; }
    body.koby-app .document-nav { gap: 18px; flex-wrap: wrap; }
}
@media(max-width:380px) {
    body.koby-app .discover-hero { padding: 24px; }
    body.koby-app .discover-companion { display: none; }
    body.koby-app .code-input { letter-spacing: 5px; min-width: 0; box-sizing: border-box; }
}
/* Reader controls and secondary panels use the same surfaces as the book frame. */
body.koby-app > header { box-sizing: border-box; }
body.koby-app :is(.controls-row, .player-dock, .popover, .voice-combo-panel, .voice-combo-btn, .seg, .type-popover) { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-line); }
body.koby-app .controls-row { border: 1px solid var(--app-line); border-radius: 12px; padding: 20px; }
body.koby-app .control-group select { padding: 8px 10px; background: var(--app-paper); color: var(--app-ink); border: 1px solid var(--app-line); border-radius: 7px; }
body.koby-app :is(.control-group label, .transport button:not(.play-btn):not(.hl-color-box), .seg-btn, .dock-time, .type-popover h4) { color: var(--app-muted); }
body.koby-app .seg-btn.active { background: #174dc5; color: #fff; }
body.koby-app .player-dock { box-shadow: 0 -4px 18px #192d4508; }
body.koby-app .popover::after { border-top-color: var(--app-surface); }
body.koby-app .pro-upsell { background: var(--app-bluewash); border-color: var(--app-line); }
body.koby-app .pro-upsell-text strong { color: var(--app-accent); }
body.koby-app .pro-upsell-text span { color: var(--app-muted); }
body.koby-app .offline-banner { background: var(--app-bluewash); color: var(--app-ink); box-shadow: none; border-bottom: 1px solid var(--app-line); }
body.koby-app .action-card { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-line); border-radius: 14px; }
body.koby-app :is(.slide-year, .slide-big-number, .slide-month, .slide-time-preference) { background: none; -webkit-text-fill-color: var(--app-ink); color: var(--app-ink); text-shadow: none; }
body.koby-app :is(.slide-subtitle, .slide-label, .slide-book-author) { color: var(--app-muted); }
@media(max-width:760px) { body.koby-app .controls-row { padding: 14px; } }
body.koby-app .container { box-sizing: border-box; width: calc(100% - 48px); max-width: 1160px; }
body.koby-app .upload-step > h2 { font: 400 32px/1.2 var(--app-serif); color: var(--app-ink); }
body.koby-app :is(.groups-tab, .tab-btn, .search-filter, .filter-chip) { color: var(--app-muted); }
body.koby-app :is(.groups-tab.active, .tab-btn.active, .search-filter.active, .filter-chip.active) { color: var(--app-accent); border-color: var(--app-accent); }
body.koby-app :is(.btn-create-group, .btn-join, .btn-follow, .community-gate-cta) { background: #174dc5; color: #fff; border-radius: 9px; }
body.koby-app :is(.group-description, .group-meta, .search-result-preview, .search-result-meta, .feed-item-content, .feed-item-time) { color: var(--app-muted); }
body.koby-app .social-proof-section[hidden], body.koby-app #trending-title[hidden] { display: none; }
@media(max-width:760px) { body.koby-app .container { width: calc(100% - 32px); } }
body.koby-app :is(.search-bar, .search-results, .group-detail-header, .group-post, .tab-count) { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-line); box-shadow: var(--app-shadow); }
body.koby-app :is(.search-bar input, .groups-tab, .tab) { background: var(--app-surface); color: var(--app-muted); border-color: var(--app-line); }
body.koby-app :is(.groups-tab.active, .tab.active, .filter-chip.active) { background: var(--app-bluewash); color: var(--app-accent); border-color: var(--app-accent); }
body.koby-app .search-suggestions h3 { color: var(--app-ink); }
body.koby-app .community-gate { max-width: 520px; margin: 60px auto; padding: 32px; text-align: center; }
body.koby-app .community-gate-cta { display: inline-block; margin-top: 16px; padding: 12px 20px; text-decoration: none; font-weight: 600; }