/* ================================================================
   Kids Bedtime Stories Platform — Frontend CSS
   PRD Phase 4: Children's Storybook Design System
   ================================================================ */
/* Global safety net: no text or name, however long, can ever push a
   card/shortcode wider than its container and cause horizontal scroll. */
.kbs-dashboard,
.kbs-dashboard * {
    box-sizing: border-box;
}
.kbs-dashboard {
    overflow-x: hidden;
    max-width: 100%;
}
.kbs-widget, .kbs-plan-card, .kbs-story-card, .kbs-child-card,
.kbs-continue-item, .kbs-cert-item, .kbs-badge-spotlight {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
}
.kbs-widget h1, .kbs-widget h2, .kbs-widget h3, .kbs-widget h4,
.kbs-widget strong, .kbs-widget p, .kbs-widget span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

:root {
    /* ── SINGLE SOURCE OF TRUTH FOR ALL PLUGIN COLOURS ──────────────
       Both frontend.css AND the dashboard's inline <style> read from
       these tokens. Edit them here to re-theme the entire plugin — do
       NOT hard-code colours elsewhere.
       Scheme: warm, calming "bedtime lavender" — soft on the eyes at
       night and friendly for parents. */
    --kbs-primary:   #6D5DF6;   /* friendly indigo-violet (buttons, links) */
    --kbs-secondary: #9A6CF4;   /* soft purple — gradient partner */
    --kbs-accent:    #FFB454;   /* warm amber — cosy highlight */
    --kbs-success:   #34D399;
    --kbs-error:     #F87171;
    --kbs-dark:      #2A2740;   /* warm near-black text */
    --kbs-gray:      #6E6A85;   /* warm grey (secondary text) */
    --kbs-border:    #E4DEF4;   /* soft lavender border — visible on white */
    --kbs-bg:        #EFEBFB;   /* light lavender tint for pills/chips/hovers */
    --kbs-page:      #F5F3FC;   /* app background BEHIND the white cards */
    --kbs-white:     #FFFFFF;   /* cards stay white so they lift off --kbs-page */
    --kbs-radius:    14px;
    --kbs-shadow:    0 6px 22px rgba(84,63,168,.13);  /* soft violet lift */
    --kbs-gap:       22px;   /* consistent space BETWEEN cards in every grid */
    --kbs-card-pad:  24px;   /* consistent breathing room INSIDE cards */
}

/* ── Base ──────────────────────────────────────────────────────── */
.kbs-dashboard, .kbs-login-container, .kbs-register-container,
.kbs-story-library, .kbs-form-wrapper {
    font-family: 'Nunito', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: var(--kbs-dark);
    max-width: 1200px;
    margin: 24px auto;
    padding: 24px;
    box-sizing: border-box;
    /* Soft lavender app panel so the white cards visibly lift off the
       background instead of blending into a white page. */
    background: var(--kbs-page);
    border-radius: 20px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.kbs-btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--kbs-primary);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, transform .1s;
    line-height: 1;
}
.kbs-btn:hover           { background: #3D64D6; transform: translateY(-1px); }
.kbs-btn-primary         { background: var(--kbs-primary); }
.kbs-btn-small           { padding: 7px 14px; font-size: 13px; }
.kbs-btn-upgrade         { background: var(--kbs-accent); color: var(--kbs-dark) !important; }
.kbs-btn-danger          { background: var(--kbs-error); }
.kbs-full-width          { display: block; width: 100%; text-align: center; }

/* ── Forms ─────────────────────────────────────────────────────── */
.kbs-form-group          { margin-bottom: 18px; }
.kbs-form-group label    { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.kbs-form-group input,
.kbs-form-group select,
.kbs-form-group textarea {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--kbs-border);
    border-radius: 8px; font-size: 16px; box-sizing: border-box;
    transition: border-color .2s; font-family: inherit;
}
.kbs-form-group input:focus,
.kbs-form-group select:focus  { outline: none; border-color: var(--kbs-primary); }
.kbs-checkbox label           { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.kbs-checkbox input[type=checkbox] { width: auto; }

/* ── Messages ──────────────────────────────────────────────────── */
.kbs-message        { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; }
.kbs-success        { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.kbs-error          { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ── Auth Pages ────────────────────────────────────────────────── */
.kbs-login-container,
.kbs-register-container { background: var(--kbs-bg); min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kbs-login-box,
.kbs-register-box {
    background: var(--kbs-white); padding: 40px; border-radius: var(--kbs-radius);
    box-shadow: var(--kbs-shadow); width: 100%; max-width: 420px;
}
.kbs-logo         { font-size: 48px; text-align: center; margin-bottom: 8px; }
.kbs-login-box h2,
.kbs-register-box h2 { text-align: center; margin: 0 0 6px; font-size: 24px; color: var(--kbs-dark); }
.kbs-subtitle      { text-align: center; color: var(--kbs-gray); margin-bottom: 24px; }
.kbs-auth-links    { text-align: center; margin-top: 20px; color: var(--kbs-gray); font-size: 14px; }
.kbs-auth-links a  { color: var(--kbs-primary); text-decoration: none; font-weight: 600; }
.kbs-auth-links span { margin: 0 8px; }

/* ── Dashboard Nav ─────────────────────────────────────────────── */
.kbs-dash-nav {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--kbs-white); padding: 14px 24px; border-radius: var(--kbs-radius);
    box-shadow: var(--kbs-shadow); margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.kbs-nav-brand    { font-size: 18px; font-weight: 700; color: var(--kbs-primary); }
.kbs-nav-links    { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kbs-nav-links a  { color: var(--kbs-gray); text-decoration: none; font-size: 14px; font-weight: 600; }
.kbs-nav-links a:hover { color: var(--kbs-primary); }
.kbs-notif-link   { position: relative; }
.kbs-notif-badge  {
    position: absolute; top: -8px; right: -8px;
    background: var(--kbs-error); color: #fff; border-radius: 50%;
    width: 18px; height: 18px; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.kbs-logout       { color: var(--kbs-error) !important; }

/* ── Dashboard Header ──────────────────────────────────────────── */
.kbs-dashboard-header {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, var(--kbs-primary), var(--kbs-secondary));
    color: #fff; padding: 28px; border-radius: var(--kbs-radius); margin-bottom: 24px;
    flex-wrap: wrap; gap: 16px;
}
.kbs-dashboard-header h1 {
    margin: 0 0 8px; font-size: 22px;
    overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}
.kbs-dashboard-header > div:first-child { flex: 1 1 260px; min-width: 0; }
.kbs-header-stats         { display: flex; gap: 24px; flex-wrap: wrap; }
.kbs-header-stats .kbs-stat { text-align: center; }
.kbs-header-stats .kbs-stat-number { font-size: 28px; font-weight: 700; display: block; }
.kbs-header-stats .kbs-stat span   { font-size: 12px; opacity: .8; }

/* ── Dashboard Grid ────────────────────────────────────────────── */
.kbs-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* ── Widget ────────────────────────────────────────────────────── */
.kbs-widget {
    background: var(--kbs-white); padding: 24px; border-radius: var(--kbs-radius);
    box-shadow: var(--kbs-shadow);
}
.kbs-widget h3 { margin: 0 0 16px; font-size: 16px; color: var(--kbs-dark); }

/* ── Membership tier badges ────────────────────────────────────── */
.kbs-tier-free     { background: var(--kbs-gray);    color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.kbs-tier-monthly,
.kbs-tier-quarterly,
.kbs-tier-annual   { background: var(--kbs-primary); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.kbs-tier-lifetime { background: linear-gradient(135deg,var(--kbs-accent),#F59E0B); color: var(--kbs-dark); padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }

/* ── Progress bar ──────────────────────────────────────────────── */
.kbs-progress-bar  { background: var(--kbs-border); border-radius: 10px; height: 8px; margin: 8px 0; overflow: hidden; }
.kbs-progress-fill { background: linear-gradient(90deg, var(--kbs-primary), var(--kbs-secondary)); height: 100%; border-radius: 10px; transition: width .4s; }

/* ── Continue item ─────────────────────────────────────────────── */
.kbs-continue-item { padding: 10px 0; border-bottom: 1px solid var(--kbs-border); }
.kbs-continue-item:last-child { border-bottom: none; }
.kbs-continue-item strong { display: block; margin-bottom: 4px; }

/* ── Story Library ─────────────────────────────────────────────── */
.kbs-library-header { margin-bottom: 24px; }
.kbs-filter-form    { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.kbs-filter-form input,
.kbs-filter-form select { flex: 1; min-width: 140px; padding: 10px 12px; border: 1.5px solid var(--kbs-border); border-radius: 8px; font-size: 14px; }
.kbs-stories-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }

/* ── Story Card ────────────────────────────────────────────────── */
.kbs-story-card     { background: var(--kbs-white); border-radius: var(--kbs-radius); overflow: hidden; box-shadow: var(--kbs-shadow); position: relative; transition: transform .2s; }
.kbs-story-card:hover { transform: translateY(-3px); }
.kbs-story-thumb    { position: relative; }
.kbs-story-thumb img { width: 100%; height: 160px; object-fit: cover; display: block; }
.kbs-story-placeholder { width: 100%; height: 160px; background: linear-gradient(135deg,#EDE9FE,#DDD6FE); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.kbs-story-content  { padding: 14px; }
.kbs-story-content h3 { margin: 0 0 6px; font-size: 15px; }
.kbs-story-meta     { font-size: 12px; color: var(--kbs-gray); margin: 0 0 8px; }
.kbs-story-actions  { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.kbs-badge-premium  { position: absolute; top: 8px; right: 8px; background: var(--kbs-accent); color: var(--kbs-dark); padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.kbs-badge-done     { position: absolute; top: 8px; left: 8px; background: var(--kbs-success); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.is-locked .kbs-story-thumb img,
.is-locked .kbs-story-placeholder { filter: blur(2px) brightness(.8); }
.kbs-pagination     { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Audio Player ──────────────────────────────────────────────── */
.kbs-audio-player-wrapper {
    background: var(--kbs-white); border-radius: var(--kbs-radius); padding: 24px;
    box-shadow: var(--kbs-shadow); margin: 24px 0;
}
.kbs-player-cover   { width: 100%; max-height: 420px; object-fit: contain; background: #F1F5F9; border-radius: 8px; margin-bottom: 16px; }
.kbs-player-title   { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.kbs-player-meta    { color: var(--kbs-gray); font-size: 14px; margin-bottom: 16px; }
.kbs-player-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
/* Seek bar always claims its own full-width row first - never squeezed
   between buttons, so there is always real room for big fingers. */
.kbs-player-controls .kbs-player-progress { order: 1; flex: 1 1 100%; }
.kbs-player-controls .kbs-back-btn   { order: 2; }
.kbs-player-controls .kbs-play-btn   { order: 3; }
.kbs-player-controls .kbs-fwd-btn    { order: 4; }
.kbs-player-controls .kbs-player-time{ order: 5; }
.kbs-player-controls .kbs-speed-btn  { order: 6; margin-left: auto; }
.kbs-player-controls button {
    background: none; border: none; cursor: pointer; font-size: 20px;
    padding: 10px; min-width: 44px; min-height: 44px;
    border-radius: 50%; transition: background .2s;
}
.kbs-player-controls button:hover { background: var(--kbs-bg); }
.kbs-play-btn       { background: var(--kbs-primary) !important; color: #fff; width: 52px; height: 52px; border-radius: 50% !important; font-size: 22px !important; }
.kbs-player-progress {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 10px; border-radius: 999px;
    background: var(--kbs-border); outline: none; cursor: pointer;
    touch-action: none;
}
.kbs-player-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--kbs-primary);
    border: 4px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    cursor: pointer;
}
.kbs-player-progress::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--kbs-primary);
    border: 4px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    cursor: pointer;
}
.kbs-player-progress::-moz-range-track { height: 10px; border-radius: 999px; background: var(--kbs-border); }
.kbs-player-time    { font-size: 13px; color: var(--kbs-gray); min-width: 90px; text-align: right; }
.kbs-speed-btn      { font-size: 13px !important; font-weight: 700 !important; color: var(--kbs-dark) !important; background: var(--kbs-bg) !important; border: 1px solid var(--kbs-border) !important; padding: 6px 12px !important; min-width: 0 !important; min-height: 0 !important; border-radius: 999px !important; }
.kbs-sleep-select   { padding: 6px 10px; border: 1px solid var(--kbs-border); border-radius: 6px; font-size: 13px; }

/* ── Badges Grid ───────────────────────────────────────────────── */
.kbs-badges-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.kbs-badge-card     { background: var(--kbs-white); border-radius: var(--kbs-radius); padding: 20px; text-align: center; box-shadow: var(--kbs-shadow); }
.kbs-badge-card.is-earned { border: 2px solid var(--kbs-accent); }
.kbs-badge-card.is-locked { opacity: .6; }
.kbs-badge-image    { font-size: 40px; margin-bottom: 10px; }
.kbs-badge-card h4  { margin: 0 0 6px; font-size: 14px; }
.kbs-badge-card p   { font-size: 12px; color: var(--kbs-gray); margin: 0 0 10px; }
.kbs-earned-label   { color: var(--kbs-success); font-weight: 700; font-size: 13px; }

/* ── Certificates ──────────────────────────────────────────────── */
.kbs-certificates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.kbs-certificate-card  { background: var(--kbs-white); border-radius: var(--kbs-radius); padding: 24px; text-align: center; box-shadow: var(--kbs-shadow); border: 2px dashed var(--kbs-accent); }
.kbs-cert-icon         { font-size: 40px; margin-bottom: 12px; }
.kbs-certificate-card h4 { margin: 0 0 6px; }
.kbs-certificate-card p  { font-size: 13px; color: var(--kbs-gray); }
.kbs-cert-actions      { margin-top: 14px; }

/* ── Plans grid ────────────────────────────────────────────────── */
.kbs-plans-grid     { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.kbs-plan-card      { background: var(--kbs-bg); border-radius: var(--kbs-radius); padding: 20px; text-align: center; border: 2px solid var(--kbs-border); transition: border-color .2s; }
.kbs-plan-card:hover, .kbs-plan-card.is-current { border-color: var(--kbs-primary); }
.kbs-plan-card h4   { margin: 0 0 8px; font-size: 18px; }
.kbs-price          { font-size: 22px; font-weight: 700; color: var(--kbs-primary); margin: 8px 0 12px; }
.kbs-features       { font-size: 13px; color: var(--kbs-gray); line-height: 1.8; margin-bottom: 16px; }

/* ── Notifications ─────────────────────────────────────────────── */
.kbs-notification-item { background: var(--kbs-white); border-radius: 8px; padding: 16px; margin-bottom: 10px; box-shadow: var(--kbs-shadow); display: flex; align-items: flex-start; gap: 12px; cursor: pointer; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.kbs-notification-item:active, .kbs-notification-item.is-clicked { transform: scale(.985); background: #EEF2FF; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.kbs-notification-item.is-unread { border-left: 3px solid var(--kbs-primary); }
.kbs-notif-content strong { display: block; margin-bottom: 4px; }
.kbs-notif-content p  { margin: 0 0 4px; color: var(--kbs-gray); font-size: 14px; }
.kbs-notif-content small { color: var(--kbs-gray); font-size: 12px; }
.kbs-unread-dot     { width: 10px; height: 10px; border-radius: 50%; background: var(--kbs-primary); flex-shrink: 0; margin-top: 4px; }

/* ── Children ──────────────────────────────────────────────────── */
.kbs-children-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.kbs-child-card-full { background: var(--kbs-white); border-radius: var(--kbs-radius); padding: 24px; box-shadow: var(--kbs-shadow); display: flex; gap: 16px; align-items: flex-start; }
.kbs-child-avatar-large { font-size: 48px; flex-shrink: 0; }
.kbs-child-avatar-large img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.kbs-child-info h3  { margin: 0 0 4px; }
.kbs-child-info p   { margin: 4px 0; color: var(--kbs-gray); font-size: 14px; }
.kbs-child-actions  { margin-top: 12px; display: flex; gap: 8px; }

/* ── Child card (small — dashboard widget) ─────────────────────── */
.kbs-child-card     { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--kbs-border); }
.kbs-child-card:last-child { border-bottom: none; }
.kbs-child-avatar   { font-size: 28px; }
.kbs-child-avatar img { width: 36px; height: 36px; border-radius: 50%; }

/* ── Referral link box ─────────────────────────────────────────── */
.kbs-referral-link-box { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.kbs-referral-link-box input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--kbs-border); border-radius: 8px; font-size: 14px; }

/* ── Promotions ────────────────────────────────────────────────── */
.kbs-promotion      { background: linear-gradient(135deg,#EDE9FE,#DDD6FE); border-radius: var(--kbs-radius); padding: 20px; margin-bottom: 12px; position: relative; display: flex; gap: 16px; align-items: center; }
.kbs-promotion img  { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.kbs-promo-close    { position: absolute; top: 8px; right: 8px; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--kbs-gray); }

/* ── Tabs ──────────────────────────────────────────────────────── */
.kbs-tabs           { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--kbs-border); }
.kbs-tab            { padding: 10px 20px; text-decoration: none; color: var(--kbs-gray); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.kbs-tab.active     { color: var(--kbs-primary); border-bottom-color: var(--kbs-primary); }

/* ── Table ─────────────────────────────────────────────────────── */
.kbs-table          { width: 100%; border-collapse: collapse; font-size: 14px; }
.kbs-table th       { background: var(--kbs-bg); padding: 10px 12px; text-align: left; font-weight: 700; border-bottom: 2px solid var(--kbs-border); }
.kbs-table td       { padding: 10px 12px; border-bottom: 1px solid var(--kbs-border); }

/* ── Misc ──────────────────────────────────────────────────────── */
.kbs-page-header    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.kbs-page-header h1 { margin: 0; font-size: 24px; }
.kbs-empty-state    { text-align: center; padding: 60px 20px; color: var(--kbs-gray); }
.kbs-empty-state p  { font-size: 18px; margin-bottom: 16px; }
.kbs-badge-spotlight { text-align: center; }
.kbs-badge-icon     { font-size: 48px; margin-bottom: 8px; }
.kbs-cert-item      { padding: 10px 0; border-bottom: 1px solid var(--kbs-border); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kbs-cert-item strong { flex: 1; }
.kbs-cert-item small  { color: var(--kbs-gray); font-size: 12px; }
.kbs-modal          { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.kbs-modal-box      { background: var(--kbs-white); border-radius: var(--kbs-radius); padding: 32px; width: 100%; max-width: 460px; box-shadow: var(--kbs-shadow); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .kbs-dashboard-grid, .kbs-stories-grid, .kbs-badges-grid, .kbs-children-grid, .kbs-plans-grid { grid-template-columns: 1fr; }
    .kbs-dashboard-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    /* Extra-comfortable touch targets for the story player on phones */
    .kbs-player-progress { height: 12px; }
    .kbs-player-progress::-webkit-slider-thumb { width: 32px; height: 32px; }
    .kbs-player-progress::-moz-range-thumb { width: 32px; height: 32px; }
    .kbs-player-controls button { min-width: 48px; min-height: 48px; font-size: 22px; }
    .kbs-play-btn { width: 58px !important; height: 58px !important; }
    .kbs-dash-nav { padding: 12px 16px; }
    .kbs-nav-links { gap: 10px; }
    .kbs-login-box, .kbs-register-box { padding: 24px; }
    .kbs-header-stats { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   APP-LIKE MOBILE LAYER (v1.6.x, rev 2) — additive only, desktop untouched.
   Rules of this layer:
     1. NOTHING scrolls sideways — everything stacks and wraps.
     2. Compact: smaller paddings, buttons and text than desktop.
     3. The welcome (dashboard header) card stays short and its stat
        chips blend into the gradient instead of floating white boxes.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Hard guard: no page-level horizontal scroll, ever ───────── */
    .kbs-dashboard, .kbs-story-library, .kbs-login-container,
    .kbs-register-container { overflow-x: hidden; max-width: 100%; }
    .kbs-dashboard img, .kbs-widget img { max-width: 100%; height: auto; }

    /* ── Compact app canvas ──────────────────────────────────────── */
    .kbs-dashboard, .kbs-story-library, .kbs-login-container,
    .kbs-register-container { padding: 8px !important; }
    .kbs-widget, .kbs-plan-card, .kbs-story-card, .kbs-child-card,
    .kbs-badge-card, .kbs-certificate-card, .kbs-login-box,
    .kbs-register-box {
        border-radius: 14px;
        padding: 14px;
    }
    .kbs-dashboard-grid { gap: 10px; }
    .kbs-widget h3 { margin-bottom: 10px; font-size: 15px; }

    /* ── WELCOME CARD: short, compact, chips blend into gradient ─── */
    .kbs-dashboard-header {
        padding: 14px 14px 12px;
        margin-bottom: 12px;
        gap: 10px;
        border-radius: 14px;
    }
    .kbs-dashboard-header h1 { font-size: 17px; margin: 0 0 2px; }
    .kbs-dashboard-header p  { margin: 0; font-size: 12px; opacity: .85; }
    /* Stat chips (stories / certificates / badges): translucent white
       over the gradient — NOT solid light boxes — small and equal width. */
    .kbs-header-stats {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .kbs-header-stats .kbs-stat {
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        border-radius: 10px;
        padding: 6px 4px;
        text-align: center;
        min-width: 0;
    }
    .kbs-header-stats .kbs-stat-number { font-size: 17px; }
    .kbs-header-stats .kbs-stat span   { font-size: 10px; opacity: .85; }

    /* ── Long nav / many tabs: WRAP into compact pill rows (stacked,
          no sideways slide) ────────────────────────────────────────── */
    .kbs-dash-nav { padding: 8px 10px; }
    .kbs-dash-nav .kbs-nav-links,
    .kbs-tabs {
        display: flex !important;
        flex-wrap: wrap !important;      /* stack into rows, never scroll */
        overflow: visible;
        gap: 6px;
    }
    .kbs-dash-nav .kbs-nav-links a,
    .kbs-tabs .kbs-tab {
        flex: 0 1 auto;
        white-space: nowrap;
        border-radius: 999px;
        padding: 7px 11px !important;
        font-size: 12.5px !important;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        line-height: 1.1;
    }
    .kbs-tabs { border-bottom: none; }
    .kbs-tab { border: 1.5px solid var(--kbs-border); margin-bottom: 0; }
    .kbs-tab.active {
        border-color: var(--kbs-primary);
        background: var(--kbs-primary);
        color: #fff;
        border-bottom-color: var(--kbs-primary);
    }

    /* ── Forms: no iOS zoom, comfortable but not huge ────────────── */
    .kbs-form input, .kbs-form select, .kbs-form textarea,
    .kbs-form-group input, .kbs-form-group select, .kbs-form-group textarea,
    .kbs-filter-form select, .kbs-filter-form input {
        font-size: 16px !important;      /* 16px prevents iOS zoom-on-focus */
        min-height: 44px;
        border-radius: 10px;
    }
    .kbs-btn, .kbs-login-btn, .kbs-register-btn, .kbs-forgot-btn,
    .kbs-reset-btn, .kbs-select-plan-btn {
        min-height: 44px;
        border-radius: 10px;
        font-size: 15px;
    }
    .kbs-form .kbs-btn-primary, .kbs-login-btn, .kbs-register-btn,
    .kbs-forgot-btn, .kbs-reset-btn { width: 100%; }
    .kbs-btn-small { min-height: 36px; font-size: 13px; }

    /* ── Filter rows stack ───────────────────────────────────────── */
    .kbs-filter-form { flex-direction: column; gap: 8px; }
    .kbs-filter-form select, .kbs-filter-form .kbs-btn { width: 100%; }
    .kbs-library-header { flex-direction: column; align-items: stretch; gap: 8px; }
    /* Page header: keep button auto-width so it doesn't balloon full-width */
    .kbs-page-header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .kbs-page-header h1 { flex: 1 1 auto; font-size: 20px; margin: 0; }
    .kbs-page-header > .kbs-btn { flex: 0 0 auto; min-height: 38px; font-size: 14px; padding: 8px 16px; }

    /* ── Tables: stack each row as a compact card (no sideways slide).
          Header row is hidden; each cell becomes its own line. ─────── */
    .kbs-table thead { display: none; }
    .kbs-table, .kbs-table tbody, .kbs-table tr, .kbs-table td { display: block; width: 100%; box-sizing: border-box; }
    .kbs-table tr {
        border: 1px solid var(--kbs-border);
        border-radius: 10px;
        margin-bottom: 8px;
        padding: 4px 0;
    }
    .kbs-table td { border-bottom: 1px dashed var(--kbs-border); padding: 6px 10px; font-size: 13px; }
    .kbs-table td:last-child { border-bottom: none; }
    .kbs-scroll-orders { max-width: 100%; }

    /* ── Children rows: compact on mobile ───────────────────────── */
    .kbs-kid-row { padding: 12px 14px; }
    .kbs-kid-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .kbs-kid-actions .kbs-kid-action-btn { flex: 1 1 auto; min-height: 36px; font-size: 12px; padding: 5px 10px; }
    /* Form buttons inside kbs-form: both full-width and stacked */
    .kbs-form > .kbs-btn,
    .kbs-widget .kbs-form .kbs-btn,
    .kbs-modal-box .kbs-btn { display: block; width: 100%; margin-top: 8px; }

    /* ── Modals as bottom sheets ─────────────────────────────────── */
    .kbs-modal { align-items: flex-end; }
    .kbs-modal-box {
        max-width: none;
        border-radius: 18px 18px 0 0;
        max-height: 88vh;
        overflow-y: auto;
        padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    }

    /* ── Pagination wraps (no sideways slide) ────────────────────── */
    .kbs-pagination { flex-wrap: wrap; gap: 6px; }
    .kbs-pagination a, .kbs-pagination span {
        min-width: 36px; min-height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 999px; font-size: 13px;
    }

    /* ── Misc rows: compact ──────────────────────────────────────── */
    .kbs-notification-item { padding: 10px 8px; font-size: 14px; }
    .kbs-referral-link-box, .kbs-ref-link { word-break: break-all; }
    /* Interest chips — clamp() already handles sizing; just tighten the gap on phones */
    .kbs-interest-chips { gap: clamp(4px, 1.2vw, 6px); margin-bottom: 6px; }
    /* Reinforce compact chip sizing for any other chip instances site-wide */
    .kbs-chip {
        padding: clamp(4px, 1.2vw, 6px) clamp(8px, 2.2vw, 11px);
        font-size: clamp(11px, 2.8vw, 12.5px);
        min-height: 30px;
        border-radius: 999px;
    }

    /* ── Galleries: two-up, tight ────────────────────────────────── */
    .kbs-certificates-grid, .kbs-badges-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kbs-cert-actions { display: flex; flex-direction: column; gap: 6px; }
    .kbs-cert-actions .kbs-btn { width: 100%; }
    .kbs-story-placeholder { height: 120px; font-size: 36px; }
}

/* ── Small phones (≤ 480px): tighten further ───────────────────── */
@media (max-width: 480px) {
    .kbs-widget { padding: 12px; }
    .kbs-dashboard-header h1 { font-size: 16px; }
    .kbs-logo { font-size: 36px; }
    .kbs-login-box, .kbs-register-box { padding: 18px 14px; }
    .kbs-certificates-grid, .kbs-badges-grid { grid-template-columns: 1fr; }
    .kbs-story-placeholder { height: 110px; }
    .kbs-plans-grid { gap: 10px; }
}

/* ── Fix: audio-player skip buttons were invisible. They are BUTTONs
   with IDs (#kbs-back-btn / #kbs-fwd-btn), not classes, so the earlier
   class-based rule never matched. Force a dark, visible icon colour.
   The play button (white) and speed button keep their own styling. ── */
.kbs-player-controls #kbs-back-btn,
.kbs-player-controls #kbs-fwd-btn {
    color: var(--kbs-dark) !important;
    background: var(--kbs-bg) !important;
    border: 1px solid var(--kbs-border) !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    min-width: 0 !important;
}
.kbs-player-controls #kbs-back-btn:hover,
.kbs-player-controls #kbs-fwd-btn:hover {
    border-color: var(--kbs-primary) !important;
    color: var(--kbs-primary) !important;
}

/* ── Fix: on white page backgrounds the faint 0.08 shadow with no
   border made every card blend into the page (looked "all white,
   no shadows"). Add a clear border + stronger shadow so each card
   is visibly separated. !important beats theme resets. ─────────── */
.kbs-widget,
.kbs-stat-pill,
.kbs-story-card,
.kbs-badge-card,
.kbs-certificate-card,
.kbs-notification-item,
.kbs-child-card-full,
.kbs-plan-card,
.kbs-player,
.kbs-modal-box {
    border: 1px solid var(--kbs-border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10) !important;
}

/* ── Consistent spacing / breathing room across EVERY page ─────────
   Grids get the same gap; cards get the same inner padding, so the
   dashboard, library, badges, certificates, plans and children pages
   all feel alike. Driven by --kbs-gap / --kbs-card-pad tokens. ───── */
.kbs-dashboard-grid,
.kbs-stories-grid,
.kbs-badges-grid,
.kbs-certificates-grid,
.kbs-plans-grid,
.kbs-children-grid {
    gap: var(--kbs-gap) !important;
    margin-top: 20px !important;
}

.kbs-widget,
.kbs-certificate-card,
.kbs-child-card-full,
.kbs-plan-card {
    padding: var(--kbs-card-pad) !important;
}
.kbs-badge-card {
    padding: 22px 18px !important;
}
.kbs-notification-item {
    padding: 18px 20px !important;
    margin-bottom: 14px !important;
}

/* Consistent spacing under page headings */
.kbs-dashboard > h1,
.kbs-dashboard > h2,
.kbs-story-library > h1,
.kbs-story-library > h2 {
    margin: 0 0 16px !important;
}