:root{
    --cream:#FAF9F4;
    --forest:#25543F;
    --leaf:#3F8F5E;
    --leaf-light:#DCEEDF;
    --sage:#A9C6AE;
    --bark:#6B5B4A;
    --ink:#25302B;
    --gray:#7C8A82;
    --line:#DCE5DD;
    --white:#FFFFFF;
    --sad:#E0764E;
    --mid:#E0B23D;
    --happy:#3F8F5E;
    --radius:10px;
    --shadow:0 4px 18px rgba(37,84,63,0.08);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:hidden;}
  html{overscroll-behavior-x:none;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    overscroll-behavior-x:none;
  }
  h1,h2,h3,.display{font-family:'Fredoka',sans-serif;}
  button{font-family:'Inter',sans-serif;cursor:pointer;}
  a{color:inherit;}
  ::selection{background:var(--leaf-light);}

  /* NAVBAR */
  .navbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 24px;
    background:var(--white);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
    gap:8px;
  }
  .logo{display:flex;align-items:center;gap:10px;font-family:'Fredoka';font-weight:600;font-size:20px;color:var(--forest);cursor:pointer;user-select:none;
    min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;}
  .navbar > div{flex-shrink:0;}
  .logo-badge{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
  .hamburger{
    width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--white);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  }
  .hamburger span{width:20px;height:2px;background:var(--forest);border-radius:2px;transition:.2s;}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .menu-panel{
    position:fixed;top:0;right:0;height:100vh;width:280px;background:var(--white);
    box-shadow:-8px 0 30px rgba(0,0,0,0.08);z-index:60;
    transform:translateX(100%);transition:transform .25s ease;
    padding:20px;display:flex;flex-direction:column;gap:4px;
  }
  .menu-panel.open{transform:translateX(0);}
  .menu-overlay{position:fixed;inset:0;background:rgba(37,48,43,0.25);z-index:55;display:none;}
  .menu-overlay.show{display:block;}
  .menu-item{
    padding:12px 14px;border-radius:12px;border:none;background:transparent;text-align:left;
    font-size:15px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px;
  }
  .menu-item:hover{background:var(--leaf-light);color:var(--forest);}
  .menu-item.active{background:var(--forest);color:white;}
  .menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .icon{ stroke:currentColor; flex-shrink:0; vertical-align:middle; }
  .menu-close{background:none;border:none;color:var(--gray);display:flex;align-items:center;padding:6px;border-radius:8px;}
  .menu-close:hover{color:var(--forest);background:var(--leaf-light);}
  .menu-divider{height:1px;background:var(--line);margin:10px 0;}

  /* SETTINGS ICON + DRAWER */
  .icon-btn{
    width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--white);
    display:flex;align-items:center;justify-content:center;color:var(--forest);flex-shrink:0;
  }
  .icon-btn:hover{background:var(--leaf-light);}

  /* NOTIFICATION BELL */
  .dm-notif-badge{
    position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    background:#E4572E;color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
    display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--white);
  }
  .dm-notif-panel{
    display:none;position:absolute;top:calc(100% + 8px);right:0;width:300px;max-height:360px;overflow-y:auto;
    background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding:10px;z-index:60;
  }
  .dm-notif-panel.show{display:block;}
  .dm-notif-panel-title{font-family:'Fredoka';font-weight:600;color:var(--forest);font-size:14px;padding:4px 6px 8px;}
  .dm-notif-row{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;
    background:none;border:none;border-radius:10px;padding:8px 10px;cursor:pointer;position:relative;
  }
  .dm-notif-row:hover{background:var(--leaf-light);}
  .dm-notif-row-name{font-size:13px;font-weight:600;color:var(--ink);}
  .dm-notif-row-preview{font-size:12px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}
  .dm-notif-row-badge{
    position:absolute;top:8px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
    background:#E4572E;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;
  }
  .settings-panel{ overflow-y:auto; }
  .settings-panel.open{ transform:translateX(0); }
  .settings-section{ padding:4px 2px; }
  .settings-section-title{ font-size:12.5px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
  .settings-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 2px; }
  .settings-row-title{ font-size:14.5px; font-weight:500; color:var(--ink); }
  .settings-row-sub{ font-size:12px; color:var(--gray); margin-top:1px; }

  /* toggle switch */
  .switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch-slider{
    position:absolute; cursor:pointer; inset:0; background:var(--line);
    border-radius:12px; transition:.2s;
  }
  .switch-slider::before{
    content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
    background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,0.25);
  }
  .switch input:checked + .switch-slider{ background:var(--forest); }
  .switch input:checked + .switch-slider::before{ transform:translateX(18px); }

  .menu-profile{padding:12px 14px;font-size:13px;color:var(--gray);}
  .menu-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--leaf-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  #menuProfile{font-size:13px;color:var(--gray);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;display:block;}
  .menu-profile-row{align-items:center;padding:14px;gap:12px;}
  .menu-profile-text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0;flex:1;}
  .menu-stats{display:flex;align-items:center;font-size:12px;color:var(--sage);gap:4px;}
  .menu-stats .icon{color:var(--sage);}
  .menu-item.active .menu-avatar{background:rgba(255,255,255,0.2);}
  .menu-item.active #menuProfile{color:#fff;}
  .menu-item.active .menu-stats,
  .menu-item.active .menu-stats .icon{color:rgba(255,255,255,0.85);}

  .avatar-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
  .avatar-option{
    box-sizing:border-box;border:2px solid transparent;border-radius:50%;background:var(--leaf-light);padding:5px;
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:46px;height:46px;
    cursor:pointer;transition:border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .avatar-option svg{width:100%;height:100%;}
  .avatar-option:hover{border-color:var(--sage);transform:scale(1.05);}
  .avatar-option.selected{border-color:var(--forest);background:#EFF7F1;}

  /* ---- User dashboard ---- */
  #view-profile .card{padding:16px;margin-bottom:12px;}
  #view-profile .section-title{font-size:19px;margin-bottom:3px;}
  #view-profile .section-sub{font-size:12.5px;margin-bottom:14px;}
  #view-profile .tier-card{padding:16px;}
  #view-profile .tier-name{font-size:16px;}
  #view-profile .tier-sub{font-size:11.5px;}
  #view-profile .coin-count{font-size:15px;padding:4px 10px;}
  #view-profile .tier-bar{margin-top:10px;height:6px;}
  #view-profile .tier-labels{font-size:9px;margin-top:5px;}
  .dash-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0;}
  .dash-stat-card{text-align:center;padding:10px 6px;}
  .dash-stat-icon{color:var(--forest);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
  .dash-stat-icon svg{width:16px;height:16px;}
  .dash-stat-num{font-family:'Fredoka';font-size:18px;font-weight:600;color:var(--forest);line-height:1;}
  .dash-stat-label{font-size:10px;color:var(--gray);margin-top:4px;line-height:1.3;}
  .dash-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:6px;}
  .dash-card-head label{font-size:13px;}
  .dash-card-head .meta{font-size:11px;}
  .heatmap-scroll{overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
  .heatmap-scroll::-webkit-scrollbar{display:none;}
  .heatmap-grid{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(7,9px);grid-auto-flow:column;gap:3px;width:100%;}
  .heat-cell{width:100%;height:9px;border-radius:2px;background:#EAF1EC;display:inline-block;}
  .heat-cell[data-count="0"], .heat-0{background:#EAF1EC;}
  .heat-cell[data-count="1"], .heat-1{background:#BEE0C8;}
  .heat-cell[data-count="2"], .heat-2{background:#7FC494;}
  .heat-cell[data-count="3"], .heat-3{background:#3F8F5E;}
  .heat-cell[data-count="4"], .heat-4{background:var(--forest);}
  .heatmap-legend{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:10px;color:var(--gray);}
  .heatmap-legend .heat-cell{width:9px;height:9px;border-radius:2px;}
  .dash-online-card{display:flex;align-items:center;gap:12px;padding:12px 16px;}
  .dash-online-dot{width:9px;height:9px;border-radius:50%;background:#3F8F5E;flex-shrink:0;box-shadow:0 0 0 0 rgba(63,143,94,.6);animation:onlinePulse 2s infinite;}
  .dash-online-num{font-weight:600;color:var(--forest);font-size:13px;}
  .dash-online-card .meta{font-size:11px;}
  #view-profile label{font-size:13px;}
  @keyframes onlinePulse{
    0%{box-shadow:0 0 0 0 rgba(63,143,94,.5);}
    70%{box-shadow:0 0 0 8px rgba(63,143,94,0);}
    100%{box-shadow:0 0 0 0 rgba(63,143,94,0);}
  }
  .dash-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:stretch;}
  .dash-col{display:flex;flex-direction:column;gap:12px;}
  .dash-square-card{aspect-ratio:1;display:flex;flex-direction:column;overflow:hidden;}
  .dash-square-card .heatmap-scroll{flex:1;display:flex;align-items:center;}
  .dash-square-card .heatmap-grid{height:100%;max-height:140px;}
  .dash-col .card{flex:1;}
  .profile-info-card{aspect-ratio:auto;align-self:start;align-items:stretch;text-align:left;gap:14px;padding:20px 18px;justify-content:flex-start;}
  .profile-info-top{display:flex;align-items:center;gap:16px;}
  .profile-info-avatar{width:80px;height:80px;color:var(--forest);background:var(--leaf-light);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .profile-info-avatar svg{width:44px;height:44px;}
  .profile-info-top-text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;}
  .profile-info-tier-badge{font-size:12px;font-weight:600;color:#fff;background:var(--forest);border-radius:12px;padding:4px 14px;order:-1;}
  .profile-info-communities{display:flex;flex-wrap:wrap;gap:6px;}
  .profile-info-username-row{display:flex;align-items:center;justify-content:flex-start;gap:6px;font-family:'Fredoka';font-weight:600;color:var(--forest);font-size:24px;max-width:100%;}
  .profile-info-username-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
  .profile-info-input{font-size:16px;font-family:inherit;border:1px solid var(--border,#D8E3DC);border-radius:8px;padding:4px 8px;max-width:130px;}
  .profile-info-edit-btn{background:none;border:none;color:var(--gray);cursor:pointer;display:flex;align-items:center;padding:2px;flex-shrink:0;}
  .profile-info-edit-btn:hover{color:var(--forest);}
  .profile-info-bio-wrap{width:100%;text-align:left;margin-top:0;}
  .profile-info-bio-wrap label{font-size:11px;font-weight:600;color:var(--gray);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px;}
  .profile-info-bio{width:100%;font-size:13px;font-family:inherit;color:var(--ink);border:1px solid var(--border,#D8E3DC);background:var(--leaf-light,#F6F8F6);border-radius:10px;padding:8px 10px;resize:none;min-height:52px;box-sizing:border-box;}
  .profile-info-bio:focus{outline:none;border-color:var(--forest);background:#fff;}
  .profile-info-card #saveProfileInfoBtn{align-self:center;font-size:13px;padding:8px 20px;margin-top:2px;}
  .profile-info-follower-count{width:100%;text-align:center;margin:0;font-size:13px;}

  /* ---- Community & Koala Talk ---- */
  .community-search-card .row{align-items:center;gap:8px;position:relative;}
  .community-search-card.card{
    padding:0;margin-bottom:10px;border:none;border-radius:12px;
    background:#EDEFEC;
    box-shadow:inset 2px 2px 5px rgba(0,0,0,0.06), inset -2px -2px 5px rgba(255,255,255,0.7);
  }
  .community-search-icon{
    color:var(--gray);display:flex;flex-shrink:0;
    position:absolute;left:16px;top:50%;transform:translateY(-50%);
  }
  .community-search-card input[type="text"]{
    border:none;width:100%;min-width:0;
    font-size:13px;font-family:inherit;letter-spacing:normal;
    padding:14px 20px 14px 42px;background:transparent;border-radius:12px;color:var(--ink);
  }
  .community-search-card input[type="text"]::placeholder{text-transform:none;color:var(--gray);}
  .community-search-card input[type="text"]:focus{outline:none;border-color:transparent;}
  .community-result-row{display:flex;align-items:center;gap:12px;padding:12px 14px;}
  .community-result-text{flex:1;min-width:0;}
  .community-result-name{font-weight:600;color:var(--forest);}
  .community-result-sub{font-size:12px;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .koala-composer{margin-top:18px;}
  .koala-composer-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .koala-title{font-family:'Fredoka';font-weight:600;color:var(--forest);font-size:16px;}
  .koala-composer textarea{width:100%;min-height:64px;border:1px solid var(--border,#D8E3DC);background:var(--leaf-light,#F6F8F6);border-radius:10px;padding:10px 12px;font-size:13.5px;font-family:inherit;resize:none;box-sizing:border-box;}
  .koala-composer textarea:focus{outline:none;border-color:var(--forest);background:#fff;}
  .koala-composer-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
  .koala-feed-post{padding:16px;}
  .koala-post-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .koala-post-author{font-weight:600;color:var(--forest);cursor:pointer;}
  .koala-post-time{font-size:11.5px;color:var(--gray);margin-left:auto;flex-shrink:0;}
  .koala-post-text{font-size:14px;color:var(--ink,#25302B);white-space:pre-wrap;margin-bottom:8px;}
  .koala-quiz-embed{display:flex;align-items:center;gap:10px;background:var(--leaf-light,#F6F8F6);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
  .koala-quiz-embed .quiz-embed-text{flex:1;min-width:0;}
  .koala-quiz-embed .quiz-embed-title{font-weight:600;color:var(--forest);font-size:13.5px;}
  .koala-post-actions{display:flex;align-items:center;gap:16px;}
  .koala-post-authormeta{display:flex;flex-direction:column;min-width:0;flex:1;}
  .koala-post-authorline{display:flex;align-items:center;gap:6px;}
  .koala-post-tier{font-size:9.5px;font-weight:700;color:#fff;background:var(--forest);border-radius:10px;padding:1px 8px;text-transform:uppercase;letter-spacing:.2px;flex-shrink:0;}
  .koala-post-bio{font-size:11px;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .community-note-modal{max-width:480px;text-align:left;position:relative;}
  .community-note-body{white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--ink,#25302B);max-height:50vh;overflow:auto;}
  .koala-like-btn{background:none;border:none;display:flex;align-items:center;gap:5px;color:var(--gray);cursor:pointer;font-size:12.5px;font-family:inherit;padding:0;}
  .koala-like-btn.liked{color:#c0505a;}
  .koala-like-btn .icon{width:15px;height:15px;}
  .koala-like-btn.liked svg{fill:#c0505a;}
  .koala-comment-toggle-btn{background:none;border:none;display:flex;align-items:center;gap:5px;color:var(--gray);cursor:pointer;font-size:12.5px;font-family:inherit;padding:0;}
  .koala-comment-toggle-btn .icon{width:15px;height:15px;}

  /* 3-dot post menu */
  .koala-post-menu-wrap{position:relative;flex-shrink:0;margin-left:4px;}
  .koala-post-menu-btn{background:none;border:none;color:var(--gray);cursor:pointer;padding:4px;display:flex;align-items:center;border-radius:6px;}
  .koala-post-menu-btn:hover{background:var(--leaf-light,#F6F8F6);}
  .koala-post-menu{display:none;position:absolute;top:26px;right:0;background:#fff;border:1px solid var(--border,#D8E3DC);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.12);min-width:110px;z-index:20;overflow:hidden;}
  .koala-post-menu.show{display:block;}
  .koala-post-menu-item{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 14px;font-size:13px;font-family:inherit;color:var(--ink,#25302B);cursor:pointer;}
  .koala-post-menu-item:hover{background:var(--leaf-light,#F6F8F6);}

  /* Comments */
  .koala-comments-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--border,#D8E3DC);}
  .koala-comments-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
  .koala-comment-row{display:flex;gap:8px;align-items:flex-start;}
  .koala-comment-body{flex:1;min-width:0;background:var(--leaf-light,#F6F8F6);border-radius:10px;padding:6px 10px;}
  .koala-comment-meta{display:flex;align-items:center;gap:8px;}
  .koala-comment-author{font-weight:600;color:var(--forest);font-size:12px;cursor:pointer;}
  .koala-comment-time{font-size:10.5px;color:var(--gray);}
  .koala-comment-text{font-size:12.5px;color:var(--ink,#25302B);white-space:pre-wrap;}
  .koala-comment-composer{display:flex;gap:8px;}
  .koala-comment-input{flex:1;min-width:0;border:1px solid var(--border,#D8E3DC);background:var(--leaf-light,#F6F8F6);border-radius:12px;padding:8px 14px;font-size:12.5px;font-family:inherit;box-sizing:border-box;}
  .koala-comment-input:focus{outline:none;border-color:var(--forest);background:#fff;}

  /* Attach note/deck to a post */
  .koala-attach-preview{align-items:center;gap:8px;background:var(--leaf-light,#F6F8F6);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:13px;color:var(--forest);font-weight:600;}
  .koala-attach-preview .koala-attach-remove{margin-left:auto;background:none;border:none;color:var(--gray);cursor:pointer;padding:2px;display:flex;}
  .koala-attach-picker{margin-top:8px;border:1px solid var(--border,#D8E3DC);border-radius:10px;max-height:180px;overflow:auto;background:#fff;}
  .koala-attach-picker .list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border,#D8E3DC);}
  .koala-attach-picker .list-item:last-child{border-bottom:none;}
  .koala-attach-picker .list-item:hover{background:var(--leaf-light,#F6F8F6);}

  .community-modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--gray);cursor:pointer;padding:4px;}
  .community-modal-close:hover{color:var(--forest);}

  .community-group-post{border-top:1px solid var(--border,#E7EEE9);padding:12px 0;}
  .community-group-post:first-child{border-top:none;}
  .community-group-post-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
  .community-group-post-meta{display:flex;flex-direction:column;line-height:1.25;}
  .community-group-post-author{font-weight:600;font-size:13px;color:var(--forest,#25543F);}
  .community-group-post-time{font-size:11px;color:var(--gray,#8a9089);}
  .community-group-post-text{font-size:13.5px;color:#333;white-space:pre-wrap;word-break:break-word;}
  .community-back-btn{background:none;border:none;color:var(--forest,#25543F);cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .community-back-btn:hover{background:rgba(0,0,0,0.05);}
  .community-owner-menu-wrap{position:relative;}
  .community-owner-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.18);padding:6px;min-width:170px;z-index:50;}
  .community-owner-dropdown.show{display:block;}
  .community-owner-dropdown-item{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--forest,#25543F);}
  .community-owner-dropdown-item:hover{background:#F0F4F1;}
  .community-owner-dropdown-item.danger{color:#c0392b;}
  .community-privacy-toggle{display:flex;gap:8px;}
  .community-privacy-toggle button.active{background:var(--forest,#25543F);color:#fff;border-color:var(--forest,#25543F);}
  .community-profile-modal{position:relative;max-width:380px;text-align:center;}
  .community-profile-header{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px;}
  .community-profile-avatar{width:72px;height:72px;margin-bottom:2px;}
  .community-profile-avatar svg{width:40px;height:40px;}
  .community-profile-tier-badge{order:0;}
  .community-profile-username{font-family:'Fredoka';font-weight:600;color:var(--forest);font-size:22px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .community-profile-bio{margin:2px 0 0;}
  .community-profile-followers{margin:0;}
  .community-profile-actions{display:flex;gap:8px;justify-content:center;margin:16px 0 4px;}
  .community-profile-section-title{color:var(--forest);text-align:left;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line);}
  .community-quiz-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border,#E7EEE9);text-align:left;}
  .community-quiz-row:first-child{border-top:none;}
  .community-quiz-row .quiz-embed-text{flex:1;min-width:0;}

  .community-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
  .community-title-icon{display:flex;align-items:center;gap:8px;}
  .community-title-icon svg{color:var(--forest);}
  .community-refresh-btn{background:none;border:none;color:var(--gray);cursor:pointer;padding:6px;flex-shrink:0;transition:transform .3s ease;}
  .community-refresh-btn:hover{color:var(--forest);}
  .community-refresh-btn.spinning svg{animation:communitySpin .6s linear;}
  @keyframes communitySpin{ to{ transform:rotate(360deg); } }
  .community-stats-bar{display:flex;padding:0;overflow:hidden;margin-bottom:14px;}
  .community-stat-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px;border-right:1px solid var(--border,#E7EEE9);}
  .community-stat-cell:last-child{border-right:none;}
  .community-stat-cell svg{color:var(--forest);}
  .community-stat-num{font-family:'Fredoka';font-size:26px;font-weight:600;color:var(--forest);}
  .community-stat-label{font-size:11px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.3px;}

  .community-section-head{display:flex;align-items:center;gap:8px;color:var(--gray);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin:24px 0 10px;}

  .folder-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));gap:14px;}
  .folder-card{
    --folder-color:#3F8F5E;
    background:#fff;border:1px solid var(--line);border-radius:10px;
    padding:16px 12px;cursor:pointer;text-align:center;
    box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease;
  }
  .folder-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08);}
  .folder-card-icon{
    width:48px;height:48px;margin:0 auto 8px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb, var(--folder-color) 18%, white);
    color:var(--folder-color);
  }
  .folder-card-name{font-weight:600;color:var(--forest);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .folder-card-count{font-size:11.5px;color:var(--gray);margin-top:2px;}

  .folder-color-swatches{display:flex;flex-wrap:wrap;gap:10px;}
  .folder-color-swatch{
    width:28px;height:28px;border-radius:50%;border:2px solid transparent;
    cursor:pointer;padding:0;box-sizing:border-box;
  }
  .folder-color-swatch.selected{border-color:var(--forest);box-shadow:0 0 0 2px #fff inset;}

  .folder-color-dot{
    display:inline-block;width:14px;height:14px;border-radius:50%;
    background:#3F8F5E;margin-right:2px;flex-shrink:0;
  }
  .folder-note-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:var(--forest);}
  .community-section-head svg{color:var(--forest);}
  .community-section-head-row{justify-content:space-between;}
  .community-section-head-row > div{display:flex;align-items:center;gap:8px;}

  .deck-of-week-card{background:linear-gradient(135deg, var(--leaf-light,#F6F8F6), #fff);border:1px solid var(--border,#E7EEE9);border-radius:10px;padding:18px;}
  .deck-of-week-tag{display:inline-block;font-size:10.5px;font-weight:700;color:var(--forest);background:var(--leaf-light,#F6F8F6);border:1px solid var(--border,#E7EEE9);border-radius:12px;padding:3px 10px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.3px;}
  .deck-of-week-title{font-family:'Fredoka';font-size:19px;font-weight:600;color:var(--forest);}
  .deck-of-week-sub{font-size:12.5px;color:var(--gray);margin:4px 0 10px;}

  .community-creators-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;}
  .creator-card{flex:0 0 150px;background:#fff;border:1px solid var(--border,#E7EEE9);border-radius:10px;padding:16px 12px;text-align:center;}
  .creator-card .friend-avatar{width:44px;height:44px;margin:0 auto 8px;background:var(--leaf-light,#F6F8F6);}
  .creator-card-name{font-weight:600;color:var(--forest);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .creator-card-sub{font-size:11px;color:var(--gray);margin-bottom:10px;}
  .creator-card .btn{width:100%;font-size:12px;padding:6px 0;}

  .community-range-tabs{display:flex;gap:6px;flex-wrap:wrap;}
  .range-tab{background:var(--leaf-light,#F6F8F6);border:1px solid var(--border,#E7EEE9);color:var(--gray);border-radius:12px;padding:5px 12px;font-size:11.5px;font-family:inherit;cursor:pointer;}
  .range-tab.active{background:var(--forest);color:#fff;border-color:var(--forest);}

  .top-deck-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--border,#E7EEE9);}
  .top-deck-row svg{color:var(--forest);flex-shrink:0;}
  .top-deck-row:first-child{border-top:none;}
  .top-deck-rank{font-family:'Fredoka';font-weight:600;color:var(--gray);width:20px;text-align:center;flex-shrink:0;}
  .top-deck-text{flex:1;min-width:0;}
  .top-deck-title{font-weight:600;color:var(--forest);font-size:13.5px;}
  .top-deck-sub{font-size:11.5px;color:var(--gray);}

  .community-category-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  .category-chip{background:var(--leaf-light,#F6F8F6);border:1px solid var(--border,#E7EEE9);color:var(--gray);border-radius:12px;padding:6px 14px;font-size:12px;font-family:inherit;cursor:pointer;}
  .category-chip.active{background:var(--forest);color:#fff;border-color:var(--forest);}

  .community-signin-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:24px;}
  .community-signin-cta h4{margin:0 0 4px;color:var(--forest);}
  @media (max-width:900px){
    .dash-row{grid-template-columns:1fr 1fr;}
    .profile-info-card{grid-column:span 2;aspect-ratio:auto;}
  }
  @media (max-width:640px){
    .dash-row{grid-template-columns:1fr;}
    .dash-square-card{aspect-ratio:auto;}
    .profile-info-card{grid-column:auto;}
  }
  @media (max-width:560px){
    .dash-stats-grid{grid-template-columns:repeat(2,1fr);}
  }

  .app-container{max-width:920px;margin:0 auto;padding:32px 24px 80px;}
  .view{display:none;animation:fade .25s ease;}
  .view.active{display:block;}
  @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  /* HOME */
  .hero{display:flex;gap:40px;align-items:center;padding:40px 0 20px;flex-wrap:wrap;}
  .hero-text{flex:1;min-width:280px;}
  .eyebrow{display:inline-block;background:var(--leaf-light);color:var(--forest);padding:5px 12px;border-radius:12px;font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:14px;}
  .hero h1{font-size:40px;line-height:1.1;color:var(--forest);margin:0 0 14px;}
  .hero p{font-size:16px;color:var(--gray);line-height:1.6;max-width:440px;margin:0 0 22px;}
  .hero-koala{flex:0 0 220px;display:flex;justify-content:center;}
  .btn{
    padding:13px 22px;border-radius:10px;border:none;font-weight:600;font-size:15px;
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn:active{transform:translateY(0) scale(.97);}
  .btn-primary{background:var(--forest);color:white;box-shadow:var(--shadow);}
  .btn-primary:hover{background:var(--leaf);}
  .btn-outline{background:white;border:1.5px solid var(--line);color:var(--ink);}
  .btn-outline:hover{border-color:var(--forest);color:var(--forest);box-shadow:0 2px 10px rgba(37,84,63,0.08);}
  .btn-sm{padding:8px 14px;font-size:13px;border-radius:10px;}

  .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:36px;}
  .feature-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
  .feature-icon{width:26px;height:26px;color:var(--forest);}
  .feature-card h3{margin:10px 0 6px;font-size:16px;color:var(--forest);}
  .feature-card p{margin:0;font-size:13.5px;color:var(--gray);line-height:1.5;}

  /* PLATFORM AVAILABILITY BADGES */
  .platform-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
  .platform-badge{
    display:inline-flex;align-items:center;gap:6px;background:var(--leaf-light);color:var(--forest);
    padding:6px 12px;border-radius:12px;font-size:12.5px;font-weight:600;
  }

  /* SMALL FEATURE HIGHLIGHT CARDS */
  .mini-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
  .mini-feature-card{
    display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--line);
    border-radius:10px;padding:14px 16px;font-size:13.5px;font-weight:600;color:var(--ink);
  }
  .mini-feature-card svg{color:var(--forest);flex-shrink:0;}

  /* TESTIMONIALS */
  .testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
  .testimonial-card{
    background:white;border:1px solid var(--line);border-radius:var(--radius);
    padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  }
  .testimonial-stars{color:var(--mid);font-size:14px;letter-spacing:2px;margin-bottom:10px;}
  .testimonial-quote{font-size:13.5px;color:var(--ink);line-height:1.6;margin:0 0 16px;flex:1;}
  .testimonial-author{display:flex;align-items:center;gap:10px;}
  .testimonial-avatar{width:34px;height:34px;border-radius:50%;background:var(--leaf-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
  .testimonial-name{font-size:13px;font-weight:600;color:var(--forest);}
  .testimonial-role{font-size:11.5px;color:var(--gray);}

  /* ============ KWEK-STYLE HOMEPAGE ============ */
  .view-kwek{padding:0 !important;max-width:none !important;}
  .view-kwek .accent{color:var(--leaf);font-style:italic;font-weight:700;}

  .kwek-h1{font-family:'Fredoka';font-size:40px;line-height:1.15;color:var(--forest);margin:0 0 16px;font-weight:600;}
  .kwek-sub{font-size:15.5px;color:var(--gray);line-height:1.65;max-width:440px;margin:0 0 22px;}
  .kwek-microcopy{font-size:12.5px;color:var(--gray);margin-top:16px;}

  /* Hero — asymmetric, own design */
  .koala-hero{padding:56px 20px 40px;}
  .koala-hero-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:44px;flex-wrap:wrap;}
  .koala-hero-text{flex:1 1 380px;min-width:300px;}
  .koala-hero-text .eyebrow{margin-bottom:16px;}
  .highlight-accent{position:relative;color:var(--forest);white-space:nowrap;}
  .highlight-accent::after{
    content:"";position:absolute;left:-3px;right:-3px;bottom:2px;height:10px;background:var(--sage);opacity:.55;z-index:-1;border-radius:4px;
  }
  .koala-platform-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
  .koala-platform-row span{display:inline-flex;align-items:center;gap:6px;color:var(--gray);font-size:12.5px;font-weight:600;}
  .koala-platform-row svg{color:var(--forest);}
  .koala-hero-visual{flex:0 0 260px;position:relative;display:flex;justify-content:center;align-items:center;min-height:260px;}
  .koala-hero-svg{position:relative;z-index:1;}
  .koala-hero-badge{
    position:absolute;display:flex;align-items:center;gap:8px;background:white;border:1px solid var(--line);
    border-radius:10px;padding:10px 14px;box-shadow:var(--shadow);font-size:11.5px;z-index:2;
    animation:heroFloat 4s ease-in-out infinite;
  }
  .koala-hero-badge strong{display:block;font-size:13px;color:var(--forest);}
  .koala-hero-badge span{color:var(--gray);}
  .koala-hero-badge svg{color:var(--leaf);flex-shrink:0;}
  .koala-hero-badge{top:6px;left:-10px;}
  .koala-hero-badge-2{top:auto;left:auto;bottom:10px;right:-16px;animation-delay:1.4s;}
  @keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
  @media (max-width:640px){
    .koala-hero-inner{flex-direction:column-reverse;text-align:center;}
    .koala-hero-text{text-align:center;}
    .koala-platform-row{justify-content:center;}
    .koala-hero-text .row{justify-content:center;}
    /* Previously these switched to position:static + inline-flex on mobile,
       which dumped both badges into normal text flow right after the koala.
       With no wrapping and no width limit, "Quiz ready" ran off the right
       edge of the screen instead of wrapping — that's the badge that looked
       cut off. Keep them absolutely positioned and floating like on desktop,
       just smaller and pulled in closer so they stay within the visual's
       own box instead of overflowing the viewport.  */
    .koala-hero-visual{flex:0 0 auto;min-height:auto;margin:0 auto;width:100%;max-width:280px;}
    .koala-hero-svg{width:150px;height:150px;}
    .koala-hero-badge{
      font-size:10px;padding:7px 10px;gap:6px;border-radius:9px;
      top:2px;left:2px;
    }
    .koala-hero-badge-2{ top:auto;left:auto;bottom:6px;right:2px; }
    .koala-hero-badge strong{font-size:11.5px;}
  }


  /* Floating quiz preview card */
  .kwek-preview-wrap{display:flex;justify-content:center;padding:28px 20px 8px;}
  .kwek-preview-card{
    background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:22px;max-width:460px;width:100%;
  }
  .kwek-preview-tag{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--gray);margin-bottom:10px;}
  .dot-orange{width:7px;height:7px;border-radius:50%;background:var(--leaf);display:inline-block;}
  .kwek-preview-q{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:14px;}

  /* Ticker */
  .kwek-ticker{
    display:flex;align-items:center;gap:16px;background:var(--ink);color:white;overflow:hidden;
    padding:12px 0;margin-top:32px;font-size:13px;white-space:nowrap;
    width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
  }
  .kwek-ticker-live{flex:0 0 auto;background:var(--leaf);color:white;font-weight:700;font-size:11px;letter-spacing:.05em;padding:5px 14px;margin-left:20px;border-radius:12px;}
  .kwek-ticker-track{overflow:hidden;text-overflow:ellipsis;color:#DCE5DD;padding-right:20px;}
  .pill-tag{background:rgba(255,255,255,0.12);color:var(--sage);padding:3px 9px;border-radius:10px;font-size:11px;font-weight:700;margin-right:6px;}

  /* Stats */
  .kwek-stats{background:var(--forest);color:white;padding:44px 20px 32px;width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);}
  .kwek-stats-label{max-width:900px;margin:0 auto;font-size:12px;letter-spacing:.1em;color:var(--sage);font-weight:700;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:14px;margin-bottom:10px;}
  .kwek-stat-row{max-width:900px;margin:0 auto;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.15);padding:18px 0;flex-wrap:wrap;gap:8px;}
  .kwek-stat-name{font-family:'Fredoka';font-size:clamp(26px,5vw,42px);font-weight:600;}
  .kwek-stat-num{font-family:'Fredoka';font-size:clamp(26px,5vw,42px);font-weight:600;text-align:right;}
  .kwek-stat-num span{color:var(--sage);}
  .kwek-stat-sub{font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,0.7);font-weight:600;text-align:right;}
  .kwek-hashtags{max-width:900px;margin:20px auto 0;display:flex;flex-wrap:wrap;gap:8px;}
  .hashtag-pill{background:rgba(255,255,255,0.12);padding:6px 13px;border-radius:12px;font-size:12.5px;font-weight:600;}

  /* Shared section wrappers */
  .kwek-section-light{max-width:1000px;margin:0 auto;padding:52px 20px;}
  .kwek-section-dark{background:var(--ink);color:white;padding:52px 20px;width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);}
  .kwek-eyebrow-tag{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--forest);margin-bottom:10px;}
  .kwek-eyebrow-tag.light{color:var(--sage);}

  /* Features */
  .kwek-features-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr;gap:36px;}
  .kwek-features-heading h2{font-family:'Fredoka';font-size:32px;line-height:1.18;margin:0 0 14px;font-weight:600;}
  .kwek-features-heading p{color:#B9C4BE;font-size:14.5px;line-height:1.6;max-width:320px;}
  .kwek-feature-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
  .kwek-feature-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:18px;}
  .kwek-feature-icon{width:34px;height:34px;border-radius:10px;background:rgba(63,143,94,0.25);color:var(--sage);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
  .kwek-feature-card h3{font-size:15px;margin:0 0 6px;color:white;}
  .kwek-feature-card p{font-size:13px;color:#AEBBB3;line-height:1.55;margin:0;}

  /* See it in action */
  .kwek-action-top{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px;}
  .kwek-action-intro{max-width:320px;color:var(--gray);font-size:14px;line-height:1.6;text-align:right;}
  .kwek-action-panel{
    max-width:1000px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:0;
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:white;box-shadow:var(--shadow);
  }
  .kwek-steps{padding:10px;}
  .kwek-step{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;color:var(--gray);font-weight:600;font-size:14.5px;cursor:pointer;transition:background .15s ease;}
  .kwek-step:hover{background:#F3F6F3;}
  .kwek-step p{display:none;}
  .kwek-step.active{display:block;background:var(--leaf-light);color:var(--forest);}
  .kwek-step-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
  .kwek-step.active p{display:block;margin:0 0 0 38px;font-size:13px;font-weight:400;color:var(--gray);line-height:1.5;}
  .kwek-step-num{width:24px;height:24px;border-radius:50%;background:var(--leaf-light);color:var(--forest);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .kwek-step.active .kwek-step-num{background:var(--forest);color:white;}
  .kwek-demo{background:#FCFCFA;border-left:1px solid var(--line);padding:22px;}
  .kwek-demo-tag{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--gray);margin-bottom:14px;}
  .kwek-demo .msg{display:block;margin-bottom:10px;max-width:85%;}

  /* Mini real-flip flashcard used inside the "See it in action" demo panel */
  .kwek-mini-flash-wrap{display:flex;flex-direction:column;align-items:center;padding:6px 0 2px;}
  .kwek-mini-flashcard{width:100%;max-width:380px;height:170px;position:relative;perspective:1200px;}
  .kwek-mini-flashcard-inner{
    width:100%;height:100%;position:relative;cursor:pointer;
    transition:transform .6s cubic-bezier(.4,.2,.2,1.1);transform-style:preserve-3d;
  }
  .kwek-mini-flashcard.flipped .kwek-mini-flashcard-inner{transform:rotateY(180deg);}
  .kwek-mini-flash-face{
    position:absolute;inset:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
    padding:20px;text-align:center;backface-visibility:hidden;font-size:15.5px;font-weight:600;
    box-shadow:var(--shadow);overflow-y:auto;
  }
  .kwek-mini-flash-front{background:white;border:1.5px solid var(--line);color:var(--ink);}
  .kwek-mini-flash-back{background:var(--forest);color:white;transform:rotateY(180deg);font-weight:500;font-size:14.5px;}
  .kwek-mini-flash-hint{margin-top:12px;font-size:12px;color:var(--gray);font-weight:500;}

  /* Final CTA */
  .kwek-cta-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.3fr .9fr;gap:32px;}
  .kwek-cta-h2{font-family:'Fredoka';font-size:36px;line-height:1.15;margin:0 0 16px;font-weight:600;}
  .kwek-cta-grid > div:first-child > p{color:#B9C4BE;font-size:14.5px;line-height:1.6;max-width:440px;margin:0 0 18px;}
  .kwek-checklist{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
  .kwek-checklist span{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.08);padding:7px 13px;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--sage);}
  .kwek-cta-btn{width:100%;max-width:280px;}
  .kwek-cta-side{display:flex;flex-direction:column;gap:14px;}
  .kwek-side-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:18px;}
  .kwek-side-card h4{margin:0 0 8px;font-size:14.5px;color:white;}
  .kwek-side-card p{margin:0 0 10px;font-size:13px;color:#AEBBB3;line-height:1.5;}
  .kwek-side-link{display:inline-flex;align-items:center;gap:6px;color:var(--sage);font-weight:600;font-size:13px;text-decoration:none;cursor:pointer;}

  /* Footer */
  .kwek-footer{background:#1B241F;color:white;padding:40px 20px 20px;width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);}
  .kwek-footer-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;}
  .kwek-footer-brand p{color:#9BAAA1;font-size:13px;line-height:1.6;margin-top:10px;max-width:220px;}
  .kwek-footer-heading{font-size:11px;letter-spacing:.08em;color:#7C8A82;font-weight:700;margin-bottom:12px;}
  .kwek-footer-col a{display:block;color:#C7D1CB;font-size:13.5px;text-decoration:none;margin-bottom:10px;cursor:pointer;}
  .kwek-footer-col a:hover{color:white;}
  .kwek-footer-bottom{
    max-width:1000px;margin:28px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);
    display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#7C8A82;flex-wrap:wrap;gap:8px;
  }
  .kwek-footer-credit{flex:1;text-align:center;}
  @media (max-width:700px){
    .kwek-features-grid,.kwek-action-panel,.kwek-cta-grid{grid-template-columns:1fr;}
    .kwek-demo{border-left:none;border-top:1px solid var(--line);}
    .kwek-footer-grid{grid-template-columns:1fr 1fr;}
    .kwek-action-intro{text-align:left;}
  }

  .streak-strip{
    display:flex;align-items:center;justify-content:space-between;background:var(--forest);color:white;
    border-radius:var(--radius);padding:18px 22px;margin-top:28px;flex-wrap:wrap;gap:12px;
  }
  .streak-strip .num{font-size:26px;font-family:'Fredoka';font-weight:600;display:flex;align-items:center;gap:8px;}
  .streak-strip .label{font-size:12px;opacity:.85;}

  /* CARDS/SECTIONS */
  .section-title{font-size:22px;color:var(--forest);margin:0 0 6px;}
  .section-sub{color:var(--gray);font-size:14px;margin:0 0 22px;}
  .card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px;box-shadow:var(--shadow);}

  textarea, input[type=text], input[type=email], input[type=password], select{
    width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;
    font-family:'Inter';background:#FCFCFA;color:var(--ink);
  }
  textarea:focus,input:focus,select:focus{outline:none;border-color:var(--leaf);}
  textarea{min-height:180px;resize:vertical;line-height:1.6;}
  label{font-size:13px;font-weight:600;color:var(--ink);display:block;margin-bottom:6px;}
  .field{margin-bottom:16px;}
  .password-wrap{position:relative;}
  .password-wrap input{padding-right:44px;}
  .pw-toggle{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;
    color:var(--gray);padding:6px;border-radius:8px;display:flex;align-items:center;min-height:auto;
  }
  .pw-toggle:hover{color:var(--forest);background:var(--leaf-light);}
  .row{display:flex;gap:12px;flex-wrap:wrap;}
  .row > *{flex:1;min-width:140px;}

  /* LIST TOOLBAR (search + sort, used in Notes/Quizzes/Flashcards) */
  .list-toolbar{display:flex;gap:10px;margin-bottom:16px;align-items:stretch;}
  .search-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;
    border-radius:12px;background:#EDEFEC;
    box-shadow:inset 2px 2px 5px rgba(0,0,0,0.06), inset -2px -2px 5px rgba(255,255,255,0.7);
  }
  .search-wrap .icon{
    position:absolute;right:18px;left:auto;width:17px;height:17px;color:var(--gray);pointer-events:none;
  }
  .search-wrap input[type="text"]{
    width:100%;margin-bottom:0 !important;padding:14px 44px 14px 20px;background:transparent;border:none;
    font-size:13px;letter-spacing:0.06em;color:var(--ink);
    transition:box-shadow .15s;
  }
  .search-wrap input[type="text"]:focus{outline:none;box-shadow:none;}
  .search-wrap input[type="text"]::placeholder{color:var(--gray);text-transform:uppercase;}
  .list-toolbar select{
    -webkit-appearance:none;appearance:none;
    width:44px;height:44px;flex:0 0 44px;padding:0;border:1.5px solid var(--line);border-radius:12px;
    background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8A82' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E") no-repeat center/20px;
    color:transparent;text-indent:-9999px;cursor:pointer;
  }
  .list-toolbar select:focus{outline:none;border-color:var(--leaf);}
  .list-toolbar select:hover{border-color:var(--sage);background-color:var(--leaf-light);}

  /* ICON-ONLY BUTTONS (rename/delete etc.) */
  .btn-icon-only{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;padding:0;border-radius:10px;flex-shrink:0;
  }
  .btn-icon-only .btn-icon-inline{margin:0;width:16px;height:16px;}
  .btn-icon-only.btn-outline:hover{background:var(--leaf-light);border-color:var(--forest);}

  .pill-group{display:flex;gap:8px;flex-wrap:wrap;}
  .pill{
    padding:9px 16px;border-radius:12px;border:1.5px solid var(--line);background:white;font-size:13px;font-weight:500;
  }
  .pill.selected{background:var(--forest);border-color:var(--forest);color:white;}

  .tabbar{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap;}
  .tabbtn{padding:10px 16px;border:none;background:none;font-size:14px;font-weight:600;color:var(--gray);border-bottom:2px solid transparent;margin-bottom:-1px;}
  .tabbtn.active{color:var(--forest);border-color:var(--forest);}

  .upload-box{
    border:2px solid var(--sage);border-radius:10px;padding:26px;text-align:center;color:var(--gray);font-size:13.5px;
    background:#FCFCFA;
  }
  .upload-box .icon{color:var(--leaf);margin-bottom:8px;}
  .upload-box input{display:none;}
  .upload-box .btn{margin-top:10px;}

  /* QUIZ */
  .q-progress{height:8px;background:var(--line);border-radius:8px;overflow:hidden;margin-bottom:20px;}
  .q-progress-fill{height:100%;background:var(--leaf);transition:width .3s;}
  .q-num{font-size:12px;color:var(--gray);font-weight:600;margin-bottom:6px;}
  .q-text{font-size:18px;font-weight:600;margin:0 0 18px;color:var(--ink);}
  .opt{
    display:block;width:100%;text-align:left;padding:14px 16px;border-radius:10px;border:1.5px solid var(--line);
    background:white;font-size:14.5px;margin-bottom:10px;
    transition:border-color .15s ease, background-color .15s ease, transform .1s ease;
  }
  .opt:hover{border-color:var(--leaf);transform:translateY(-1px);}
  .opt:active{transform:translateY(0) scale(.985);}
  .opt.selected{border-color:var(--forest);background:var(--leaf-light);}
  .opt.correct{border-color:var(--happy);background:#E7F5EB;}
  .opt.wrong{border-color:var(--sad);background:#FBEAE2;}

  .koala-face{width:150px;height:150px;margin:0 auto;}
  .score-big{font-family:'Fredoka';font-size:42px;color:var(--forest);text-align:center;margin:6px 0 2px;}
  .score-label{text-align:center;color:var(--gray);font-size:14px;margin-bottom:22px;}

  /* FLASHCARD */
  .flash-wrap{display:flex;justify-content:center;margin:20px 0;}
  .flashcard{
    width:100%;max-width:440px;height:260px;border-radius:12px;position:relative;perspective:1400px;
  }
  .flashcard-inner{
    width:100%;height:100%;position:relative;
    transition:transform .55s cubic-bezier(.4,.2,.2,1.1), box-shadow .55s ease;
    transform-style:preserve-3d;cursor:pointer;
  }
  .flashcard-inner:hover{transform:translateY(-2px) scale(1.01);}
  .flashcard.flipped .flashcard-inner:hover{transform:rotateY(180deg) translateY(-2px) scale(1.01);}
  .flashcard-inner:active{transform:scale(.98);}
  .flashcard.flipped .flashcard-inner:active{transform:rotateY(180deg) scale(.98);}
  .flashcard.flipped .flashcard-inner{transform:rotateY(180deg);}
  .flash-face{
    position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;
    padding:26px;text-align:center;backface-visibility:hidden;font-size:17px;font-weight:500;box-shadow:var(--shadow);
    overflow-y:auto;
  }
  .flash-front{background:white;border:1.5px solid var(--line);color:var(--ink);}
  .flash-back{background:var(--forest);color:white;transform:rotateY(180deg);}
  .diff-badge{position:absolute;top:14px;left:14px;font-size:11px;padding:4px 10px;border-radius:10px;background:var(--leaf-light);color:var(--forest);font-weight:600;}
  .flash-controls{display:flex;justify-content:center;gap:10px;margin-top:16px;}

  /* ACTION ROWS (secondary controls below quiz results / flashcards) */
  .action-primary{margin-top:14px;}
  .action-primary .btn{width:100%;}
  .action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
  .action-row .btn{flex:1 1 140px;}
  .flash-nav-row{display:flex;gap:10px;margin-top:16px;}
  .flash-nav-row .btn{flex:1;}

  /* CHAT */
  .chat-header-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .chat-header-avatar{
    width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--leaf-light);
    display:flex;align-items:center;justify-content:center;color:var(--forest);
  }
  .chat-card{display:flex;flex-direction:column;padding:16px;}
  .chat-window{
    height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;
    padding:10px 6px;margin-bottom:12px;background:#FCFCFA;border-radius:10px;border:1px solid var(--line);
  }
  .chat-window::-webkit-scrollbar{width:8px;}
  .chat-window::-webkit-scrollbar-thumb{background:var(--sage);border-radius:8px;}
  .chat-window::-webkit-scrollbar-track{background:transparent;}

  .msg-row{display:flex;align-items:flex-end;gap:8px;margin:6px 0;}
  .msg-row.user{justify-content:flex-end;}
  .msg-row.bot{justify-content:flex-start;}
  .msg-avatar{
    width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--leaf-light);color:var(--forest);
    display:flex;align-items:center;justify-content:center;
  }
  .msg{max-width:76%;padding:11px 15px;border-radius:10px;font-size:14px;line-height:1.55;box-shadow:0 2px 8px rgba(37,84,63,0.05);}
  .msg.user{background:var(--forest);color:white;border-bottom-right-radius:4px;}
  .msg.bot{background:white;border:1px solid var(--line);border-bottom-left-radius:4px;}
  .msg.bot strong{color:var(--forest);}

  .msg.typing{padding:14px 18px;}
  .typing-dots{display:inline-flex;gap:4px;align-items:center;}
  .typing-dots span{
    width:6px;height:6px;border-radius:50%;background:var(--sage);
    animation:typingBounce 1.1s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2){animation-delay:.15s;}
  .typing-dots span:nth-child(3){animation-delay:.3s;}
  @keyframes typingBounce{
    0%,60%,100%{transform:translateY(0);opacity:.5;}
    30%{transform:translateY(-4px);opacity:1;}
  }

  .chat-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--gray);}
  .chat-empty svg{color:var(--sage);}

  .chat-input-row{display:flex;gap:10px;align-items:flex-end;}
  .chat-input-row textarea{
    min-height:46px;max-height:120px;resize:none;overflow-y:auto;
  }
  .chat-send-btn{
    width:46px;height:46px;flex-shrink:0;padding:0;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
  }
  .chat-send-btn:disabled, .chat-input-row textarea:disabled{opacity:.55;cursor:not-allowed;}

  /* POMODORO */
  .pomo-circle{
    width:240px;height:240px;border-radius:50%;margin:10px auto 20px;
    background:conic-gradient(var(--leaf) calc(var(--pct,100)*1%), var(--line) 0);
    display:flex;align-items:center;justify-content:center;
  }
  .pomo-inner{width:200px;height:200px;border-radius:50%;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .pomo-time{font-family:'Fredoka';font-size:42px;color:var(--forest);}
  .pomo-mode{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;}
  .pomo-controls{display:flex;gap:10px;justify-content:center;margin-top:8px;}

  /* AUTH */
  .auth-box{max-width:400px;margin:60px auto;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:32px;}
  .auth-box h2{color:var(--forest);margin-top:0;}
  .auth-switch{text-align:center;font-size:13.5px;color:var(--gray);margin-top:14px;}
  .auth-switch button{background:none;border:none;color:var(--forest);font-weight:600;font-size:13.5px;}

  .empty{text-align:center;color:var(--gray);font-size:14px;padding:40px 10px;}
  .list-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:white;}

  .tier-card{background:linear-gradient(135deg, var(--forest), var(--leaf));color:white;}
  .tier-row{display:flex;justify-content:space-between;align-items:center;}
  .tier-name{font-family:'Fredoka';font-size:22px;font-weight:600;}
  .tier-sub{font-size:12.5px;opacity:.85;margin-top:2px;}
  .coin-count{display:flex;align-items:center;gap:6px;font-family:'Fredoka';font-size:20px;background:rgba(255,255,255,0.15);padding:6px 14px;border-radius:10px;}
  .tier-bar{height:8px;background:rgba(255,255,255,0.25);border-radius:8px;margin-top:16px;overflow:hidden;}
  .tier-bar-fill{height:100%;background:white;border-radius:8px;transition:width .4s;}
  .tier-labels{display:flex;justify-content:space-between;font-size:10px;opacity:.8;margin-top:6px;}
  .tier-labels span{flex:1;text-align:center;}
  .tier-labels span:first-child{text-align:left;}
  .tier-labels span:last-child{text-align:right;}

  .quiz-help-row{display:flex;justify-content:center;gap:10px;margin-top:14px;}
  .quiz-help-row .btn{flex:1 1 0;max-width:180px;}
  .hint-box{background:var(--leaf-light);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--forest);margin-top:12px;}
  .reveal-box{background:#EFF7F1;border:1px solid var(--sage);border-radius:12px;padding:12px 14px;font-size:13.5px;margin-top:12px;}

  .friend-row{display:flex;align-items:center;gap:12px;}
  .friend-avatar{width:36px;height:36px;border-radius:50%;background:var(--leaf-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .list-item .meta{font-size:12px;color:var(--gray);margin-top:2px;}
  .toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--forest);color:white;
    padding:12px 20px;border-radius:12px;font-size:13.5px;box-shadow:var(--shadow);z-index:100;opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

  .help-fab{
    position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;
    background:#F1F2EF;border:1px solid var(--line);color:var(--gray);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,0.1);z-index:90;transition:transform .15s, color .15s, background .15s;
  }
  .help-fab:hover{color:var(--forest);background:#E7EAE4;transform:translateY(-2px);}
  .help-fab svg{width:20px;height:20px;}
  @media(max-width:600px){ .help-fab{bottom:16px;right:16px;width:40px;height:40px;} }

  .koala-fab{
    bottom:80px;
    background:var(--forest,#2F4A3C);border-color:var(--forest,#2F4A3C);color:#fff;
  }
  .koala-fab:hover{background:var(--forest,#2F4A3C);color:#fff;opacity:.9;}
  @media(max-width:600px){ .koala-fab{bottom:66px;} }

  .koala-fab-popup{
    position:fixed;bottom:132px;right:24px;width:240px;
    background:#fff;border:1px solid var(--line);border-radius:10px;
    box-shadow:var(--shadow);padding:14px 16px;z-index:91;
    display:none;flex-direction:column;gap:10px;
  }
  .koala-fab-popup.show{display:flex;}
  .koala-fab-popup-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--forest);font-size:14px;}
  .koala-fab-popup-head span:nth-child(2){flex:1;}
  .koala-fab-popup-close{background:none;border:none;font-size:18px;line-height:1;color:var(--gray);cursor:pointer;padding:0;}
  .koala-fab-popup-close:hover{color:var(--forest);}
  .koala-fab-popup-body{font-size:12.5px;color:var(--gray);margin:0;}
  .koala-fab-popup-btn{width:100%;padding:8px 10px;font-size:13px;}
  @media(max-width:600px){ .koala-fab-popup{bottom:114px;right:16px;width:210px;} }

  /* ---------- RESPONSIVE: phones, iPad/tablets, laptops ---------- */

  /* Tablet / iPad and narrower laptops */
  @media(max-width:900px){
    .app-container{padding:24px 20px 70px;}
    .hero{gap:28px;}
    .hero h1{font-size:34px;}
  }

  /* Phones */
  @media(max-width:640px){
    .navbar{padding:10px 12px;gap:6px;}
    .logo{font-size:14.5px;gap:6px;}
    .logo-badge{width:28px;height:28px;flex-shrink:0;}
    .navbar > div{gap:6px;}
    #navJoinBtn{padding:6px 10px;font-size:12px;margin-right:6px !important;white-space:nowrap;}
    .navbar .icon-btn{width:36px;height:36px;}
    .navbar .icon-btn svg{width:17px;height:17px;}
    .dm-notif-wrap{margin-right:4px !important;}
    #settingsBtn{margin-right:4px !important;}
    .hamburger{width:36px;height:36px;}
    .app-container{padding:18px 16px 70px;}
    .hero{flex-direction:column-reverse;text-align:center;gap:20px;padding:20px 0 10px;}
    .hero h1{font-size:28px;}
    .hero p{margin-left:auto;margin-right:auto;font-size:14.5px;}
    .hero-koala{flex-basis:auto;}
    .hero-koala svg{width:150px;height:150px;}
    .hero .row{justify-content:center;}
    .streak-strip{flex-direction:column;align-items:flex-start;text-align:left;}
    .streak-strip .btn{width:100%;}
    .feature-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .feature-card{padding:14px;}
    .feature-icon{width:20px;height:20px;}
    .feature-card h3{font-size:14px;}
    .feature-card p{font-size:12.5px;}
    .card{padding:16px;}
    .section-title{font-size:19px;}
    .menu-panel{width:100%;max-width:320px;}
    .chat-window{height:340px;}
    .msg{max-width:88%;font-size:13.5px;}
    .msg-row{max-width:100%;}
    .chat-header-avatar{width:36px;height:36px;}
    .chat-card{padding:12px;}
    .pomo-circle{width:190px;height:190px;}
    .pomo-inner{width:154px;height:154px;}
    .pomo-time{font-size:32px;}
    .flashcard{height:220px;}
    .flash-face{font-size:15px;padding:18px;}
    .action-row{flex-direction:column;}
    .action-row .btn{width:100%;}
    .flash-nav-row .btn{font-size:14px;padding:12px 14px;}
    .row{flex-direction:column;}
    .row > *{width:100%;min-width:0;}
    .pill-group{flex-direction:row;}
    #view-pomodoro .row{flex-direction:row;flex-wrap:wrap;justify-content:center;}
    #view-pomodoro .row .pill{width:auto;}
    .auth-box{margin:24px auto;padding:24px 20px;max-width:100%;}
    textarea, input[type=text], input[type=email], input[type=password], select{ font-size:16px; }
    .list-toolbar{flex-wrap:wrap;}
    .list-toolbar select{order:2;}
    .search-wrap{order:1;flex:1 1 100%;}
  }

  /* Very small phones */
  @media(max-width:380px){
    .feature-grid{grid-template-columns:1fr;}
    .hero h1{font-size:24px;}
    .koala-hero-visual{max-width:250px;}
    .koala-hero-badge{font-size:9px;padding:6px 8px;}
    .koala-hero-badge strong{font-size:10.5px;}
    /* At this width there isn't room for the full wordmark next to the
       Join Us button and header icons, so keep just the koala badge. */
    .logo{font-size:0;gap:0;}
    .logo-badge{width:30px;height:30px;}
    #navJoinBtn{padding:6px 8px;font-size:11px;}
  }

  /* Larger desktops / laptops */
  @media(min-width:1400px){
    .app-container{max-width:1040px;}
  }

  /* Comfortable touch targets across breakpoints */
  button, .pill, .opt, .tabbtn, .menu-item{ min-height:38px; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  /* ==========================================
     SCHEDULE MAKER TAB
  ========================================== */
  .sched-toolbar-card{
    display:flex; padding:14px 16px; margin-bottom:16px;
    border:1px solid var(--line); border-radius:10px;
  }
  .sched-toolbar-top{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:100%;
  }
  .sched-toolbar-top select{
    padding:9px 12px; border:1.5px solid var(--line); border-radius:12px;
    font-size:13.5px; font-family:'Inter',sans-serif; color:var(--ink);
    background:var(--white); flex:1 1 200px; min-width:160px;
    transition:border-color .15s ease;
  }
  .sched-toolbar-top select:hover{ border-color:var(--sage); }
  .sched-toolbar-top select:focus{ outline:none; border-color:var(--leaf); }
  .sched-icon-btn{ border-radius:50%; }

  .sched-layout{
    display:flex; gap:18px; align-items:flex-start;
  }
  .sched-sidebar{
    display:flex; flex-direction:column; gap:10px;
    flex:0 0 168px; position:sticky; top:14px;
  }
  .sched-side-btn{
    width:100%; justify-content:flex-start; padding:11px 16px; font-size:13.5px;
    border-radius:12px; font-weight:600;
  }
  .sched-side-btn:hover{ background:var(--leaf-light); border-color:var(--forest); transform:translateY(-1px); }
  #schedDeleteItemBtn:hover{ background:#FBE7DE; border-color:var(--sad); color:var(--sad); }
  .sched-main{ flex:1; min-width:0; }

  /* Soft organic backdrop behind the card */
  .sched-card{
    background:var(--white); border:1.5px solid var(--forest);
    border-radius:12px 26px 22px 22px; overflow:hidden;
    box-shadow:0 10px 30px rgba(37,84,63,0.14), 0 2px 8px rgba(37,84,63,0.08);
    position:relative;
  }
  .sched-header{
    background:linear-gradient(120deg, var(--forest) 0%, #2c6a4e 55%, #1c4432 100%);
    padding:18px 20px 22px;
    position:relative;
  }
  .sched-title-input{
    width:100%; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28);
    border-radius:12px; padding:10px 18px; font-size:16px; font-weight:600;
    color:var(--white); font-family:'Fredoka',sans-serif; text-align:center;
    transition:background .15s ease, border-color .15s ease;
  }
  .sched-title-input::placeholder{ color:rgba(255,255,255,0.75); }
  .sched-title-input:focus{ outline:none; background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.5); }

  .sched-grid-wrap{ overflow-x:auto; padding:18px 16px 20px; overscroll-behavior-x:contain; }
  .sched-grid{
    display:grid;
    grid-template-columns: 74px repeat(var(--sched-days, 7), minmax(108px, 1fr));
    position:relative;
    min-width:870px;
    row-gap:0;
  }
  .sched-daylabel{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:12.5px;
    text-align:center; padding:7px 4px; margin:0 4px 10px; color:var(--forest);
    letter-spacing:0.2px; border-radius:12px; background:var(--leaf-light);
  }
  .sched-daylabel.weekend{ color:var(--bark); background:#F3E9DC; }
  /* Give each weekday its own gentle accent tint, cycling through the palette.
     Child 1 is the empty corner cell, so labels start at child 2 (Monday). */
  .sched-daylabel:nth-child(2){ background:#DCEEDF; color:#25543F; }
  .sched-daylabel:nth-child(3){ background:#DDEAF6; color:#2B5A80; }
  .sched-daylabel:nth-child(4){ background:#FCEFD1; color:#8A6A1E; }
  .sched-daylabel:nth-child(5){ background:#F7E1EA; color:#8A3F5C; }
  .sched-daylabel:nth-child(6){ background:#EAE1F7; color:#5B3F8A; }
  .sched-daylabel:nth-child(7){ background:#F3E9DC; color:#7A5A32; }
  .sched-daylabel:nth-child(8){ background:#F3E9DC; color:#7A5A32; }
  .sched-timelabel{
    font-size:11px; color:var(--gray); text-align:right; padding-right:10px;
    transform:translateY(-7px); white-space:nowrap; font-variant-numeric:tabular-nums;
  }
  .sched-cell{
    border-top:1px solid var(--line); min-height:30px; position:relative;
  }
  .sched-cell.first-col{ border-top:none; }
  .sched-daycol{
    position:relative; border-left:1px solid var(--line);
    border-radius:3px;
  }
  .sched-daycol.weekend{ background:rgba(169,198,174,0.09); }
  .sched-item{
    position:absolute; left:3px; right:3px; z-index:2;
    border-radius:10px 18px 16px 20px;
    padding:6px 10px; font-size:11.5px; line-height:1.35; color:var(--ink);
    border:1px solid rgba(0,0,0,0.08); cursor:pointer; overflow:visible;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
    transition:box-shadow .15s ease, transform .15s ease;
  }
  .sched-item.compact{ padding:3px 8px; display:flex; align-items:center; }
  .sched-item.compact .sched-item-name{ white-space:normal; overflow:visible; word-break:break-word; }
  .sched-item::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:rgba(0,0,0,0.18);
  }
  .sched-item:hover{ box-shadow:0 5px 14px rgba(0,0,0,0.18); transform:translateY(-1px) scale(1.01); }
  .sched-item.selected{ outline:2.5px solid var(--forest); outline-offset:1px; box-shadow:0 5px 16px rgba(37,84,63,0.28); }
  .sched-item-name{ font-weight:700; font-family:'Fredoka',sans-serif; display:block; white-space:normal; overflow:visible; word-break:break-word; }
  .sched-item-sub{ font-weight:600; display:block; opacity:0.85; white-space:normal; overflow:visible; word-break:break-word; }
  .sched-item-time{ display:block; opacity:0.75; margin-top:2px; font-variant-numeric:tabular-nums; white-space:normal; overflow:visible; word-break:break-word; }
  .sched-format-btn.active{ background:var(--forest); color:#fff; border-color:var(--forest); }

  .sched-color-swatch{
    width:30px; height:30px; border-radius:50%; border:2px solid transparent;
    cursor:pointer; padding:0; transition:transform .12s ease, box-shadow .12s ease;
  }
  .sched-color-swatch:hover{ transform:scale(1.08); }
  .sched-color-swatch.selected{
    border-color:var(--forest); box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--forest);
  }

  /* ---------- iPad / tablet ---------- */
  @media(max-width:1024px){
    .sched-layout{ flex-direction:column; align-items:stretch; }
    .sched-main{ width:100%; }
    .sched-sidebar{
      flex-direction:row; flex-wrap:wrap; flex:0 0 auto; position:static;
      gap:8px;
    }
    .sched-side-btn{ flex:1 1 auto; justify-content:center; padding:10px 14px; }
    .sched-grid{ grid-template-columns: 64px repeat(var(--sched-days, 7), minmax(96px, 1fr)); min-width:760px; }
    .sched-toolbar-top select{ flex:1 1 100%; }
  }

  /* ---------- phones ---------- */
  @media(max-width:600px){
    .sched-toolbar-card{ padding:12px; }
    .sched-toolbar-top{ gap:8px; }
    .sched-sidebar{ gap:6px; }
    .sched-side-btn{
      flex:1 1 47%; padding:10px 8px; font-size:12.5px;
      justify-content:center;
    }
    .sched-side-btn .btn-icon-inline{ margin-right:5px; width:15px; height:15px; }
    .sched-header{ padding:14px 14px 18px; }
    .sched-title-input{ font-size:14.5px; padding:8px 12px; }
    /* The grid was ~30px per half-hour row across a 7am-10pm day, which
       made the whole page scroll for a very long distance to see the
       schedule ("too big" on a phone). Cap it to a fixed, scrollable
       viewport instead — like a real calendar app — and shrink the row
       height so more of the day is visible without scrolling. */
    .sched-grid-wrap{ padding:12px 10px 16px; max-height:60vh; overflow-y:auto; }
    .sched-cell{ min-height:22px; }
    .sched-daylabel{ position:sticky; top:0; z-index:3; }
    .sched-grid{ grid-template-columns: 52px repeat(var(--sched-days, 7), minmax(84px, 1fr)); min-width:640px; }
    .sched-daylabel{ font-size:11px; padding:6px 2px; }
    .sched-timelabel{ font-size:10px; padding-right:6px; }
    .sched-item{ font-size:10.5px; padding:5px 7px; border-radius:10px 13px 12px 14px; }
    #schedItemModalOverlay .overview-modal-card{ padding:18px; }
    #schedItemModalOverlay .row[style*="gap:10px"]{ flex-direction:column; }
  }

  @media(max-width:380px){
    .sched-side-btn{ flex:1 1 100%; }
  }