:root{
    --mint: #1E4CA2;
    --mint-soft: #E6ECF8;
    --bg: #F4F6F8;
    --surface: #FFFFFF;
    --ink: #181B25;
    --ink-soft: #6B7280;
    --line: #E7EAEE;
    --accent: #5B6CFF;
    --warn: #FF6B6B;
    --radius: 16px;
    --radius-sm: 10px;
    --space: 8px;
    --font-display: 'Space Grotesk', 'DM Sans', sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --topbar-h: 69px;
    --nav-h: calc(67px + env(safe-area-inset-bottom, 0px));
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  :focus-visible{ outline: 2px solid var(--mint); outline-offset: 2px; }
  button, a.menu-item { font-family: inherit; }
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  body{
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    display:flex;
    justify-content:center;
  }
  body{ background: var(--bg); }
  .app{
    width:100%;
    max-width:430px;
    min-height:100vh;
    background: var(--surface);
    display:flex;
    flex-direction:column;
    position:relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.04);
  }

  /* ---------- HEADER ---------- */
  .topbar{
    position:sticky; top:0; z-index:50;
    background: var(--surface);
    border-bottom:1px solid var(--line);
    padding:14px 18px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-display);
    font-weight:700; font-size:18px; letter-spacing:-0.02em;
  }
  .brand .mark{
    width:28px;height:28px;border-radius:8px;
    background: var(--mint);
    display:flex;align-items:center;justify-content:center;
    color:#fff; font-size:14px; font-weight:800;
  }
  .topbar-icons{display:flex;gap:14px;align-items:center;}
  .icon-btn{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg); border:none; cursor:pointer;
    color:var(--ink-soft); position:relative;
  }
  .icon-btn .dot{
    position:absolute; top:6px; right:6px;
    width:7px;height:7px;border-radius:50%;
    background: var(--accent); border:1.5px solid var(--surface);
  }

  /* ---------- SCHOOL SELECTOR ---------- */
  .school-bar{
    padding:10px 18px;
    font-size:12.5px; font-weight:600; color:var(--ink-soft);
    border-bottom:1px solid var(--line);
    background: var(--bg);
  }
  .school-chip{
    flex-shrink:0;
    padding:7px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background: var(--surface);
    font-size:13px; font-weight:600; color:var(--ink-soft);
    cursor:pointer; transition: all .15s ease;
    white-space:nowrap;
  }
  .school-chip.active{
    background: var(--ink); color:#fff; border-color:var(--ink);
  }

  /* ---------- MAIN ---------- */
  main{flex:1; padding-bottom:calc(var(--nav-h) + 24px); min-width:0;}
  .page{display:none; animation: fade .25s ease;}
  .page.active{display:block;}
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

  /* live ticker - signature element */
  .pulse{
    margin:14px 18px; padding:14px 16px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--ink) 0%, #2B3142 100%);
    color:#fff; overflow:hidden; position:relative;
    height:84px;
  }
  .pulse-label{
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color: var(--mint); margin-bottom:8px;
  }
  .pulse-label .live-dot{
    width:6px;height:6px;border-radius:50%; background:var(--mint);
    animation: blink 1.4s infinite;
  }
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
  .pulse-track{
    position:relative; height:20px;
  }
  .pulse-item{
    position:absolute; top:0; left:0; width:100%;
    font-size:14px; font-weight:500; opacity:0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pulse-item.show{opacity:1; transform:translateY(0);}

  /* section headers */
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    padding: 18px 18px 10px;
  }
  .section-head h2{
    font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-0.02em;
  }
  .section-head a{font-size:12.5px; color:var(--ink-soft); text-decoration:none; font-weight:600;}

  /* board categories */
  .board-grid{
    display:grid; grid-template-columns: repeat(4,1fr);
    gap:10px; padding:0 18px 6px;
  }
  .board-cat{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:15px 6px; border-radius: var(--radius-sm);
    background: var(--bg); cursor:pointer; border:1px solid transparent;
    transition: border-color .15s;
    font-family: inherit;
  }
  .board-cat:active{border-color:var(--mint);}
  .board-cat .emoji{font-size:20px;}
  .board-cat span{font-size:12px; font-weight:600; color:var(--ink-soft); text-align:center;}

  /* posts */
  .post{
    padding:14px 18px; border-bottom:1px solid var(--line);
    cursor:pointer;
  }
  .post:active{background: var(--bg);}
  .post-meta{
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:var(--ink-soft); margin-bottom:6px;
  }
  .post-tag{
    font-size:11px; font-weight:700; padding:2px 8px;
    border-radius:6px; background: var(--mint-soft); color:#1E4CA2;
  }
  .post-title{font-size:15px; font-weight:600; line-height:1.4; margin-bottom:4px;}
  .post-body{
    font-size:13px; color:var(--ink-soft); line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .post-foot{
    display:flex; gap:14px; margin-top:8px;
    font-size:12px; color:var(--ink-soft); font-weight:500;
  }
  .post-foot span{display:flex; align-items:center; gap:4px;}

  /* post detail page */
  .post-detail-head{
    padding:14px 18px; border-bottom:1px solid var(--line);
    position:sticky; top:var(--topbar-h); background:var(--surface); z-index:10;
  }
  .back-btn{
    border:none; background:var(--bg); color:var(--ink);
    font-size:13.5px; font-weight:700; padding:8px 14px;
    border-radius:999px; cursor:pointer; font-family:var(--font-body);
  }
  .back-btn:hover{ background:var(--mint-soft); color:#1E4CA2; }
  .post-detail{
    padding:18px;
  }
  .post-detail .post-meta{margin-bottom:10px;}
  .post-detail .post-title{font-size:19px; font-weight:700; line-height:1.4; margin-bottom:10px;}
  .post-detail .post-body{
    font-size:14.5px; color:var(--ink); line-height:1.7;
    -webkit-line-clamp:unset; display:block;
  }
  .post-detail .post-foot{
    margin-top:16px; padding-bottom:16px;
    font-size:13px;
  }
  .post-actions{
    display:flex; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line);
  }
  .text-action{
    background:none; border:none; padding:0; cursor:pointer;
    font-family:var(--font-body); font-size:12.5px; font-weight:700;
    color:var(--ink-soft);
  }
  .text-action:hover{ color:var(--ink); text-decoration:underline; }
  .text-action.danger{ color:var(--warn); }
  .text-action.danger:hover{ color:var(--warn); text-decoration:underline; }
  .comment-actions{ display:flex; gap:14px; margin-top:6px; }
  .comment-edit-actions{ display:flex; gap:12px; margin-top:8px; }
  .c-edit-input{
    width:100%; border:1px solid var(--line); border-radius:8px;
    padding:8px 10px; font-size:13px; font-family:var(--font-body);
    background:var(--bg); color:var(--ink);
  }
  .c-edit-input:focus{ outline:none; border-color:var(--mint); }
  .comments-section{padding:0 18px 24px;}
  .comments-section h4{
    font-family:var(--font-display); font-size:14px; font-weight:700;
    margin:18px 0 12px;
  }
  .comment{
    display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);
  }
  .comment:last-child{border-bottom:none;}
  .comment .c-avatar{
    flex-shrink:0; width:32px; height:32px; border-radius:50%;
    background: var(--mint-soft); color:#1E4CA2;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; font-family:var(--font-display);
  }
  .comment .c-body{flex:1;}
  .comment .c-name{font-size:13px; font-weight:700; margin-bottom:2px;}
  .comment .c-text{font-size:13px; color:var(--ink-soft); line-height:1.55;}
  .comment .c-time{font-size:11px; color:var(--ink-soft); margin-top:4px;}
  .comment-input-row{
    display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--line);
    position:sticky; bottom:var(--nav-h); background:var(--surface); z-index:10;
  }
  .comment-input-row input{
    flex:1; border:1px solid var(--line); border-radius:999px;
    padding:10px 16px; font-size:13.5px; font-family:var(--font-body); background:var(--bg);
  }
  .comment-input-row button{
    background:var(--mint); color:#fff; border:none; border-radius:999px;
    padding:0 18px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font-body);
  }

  /* transfer story cards */
  .story-scroller{
    display:flex; gap:12px; padding:0 18px 18px; overflow-x:auto; scrollbar-width:none;
  }
  .story-scroller::-webkit-scrollbar{display:none;}
  .story-card{
    flex-shrink:0; width:200px;
    border:1px solid var(--line); border-radius: var(--radius);
    padding:14px; background:var(--surface);
  }
  .story-route{
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:700; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;
  }
  .story-route .arrow{color:var(--mint);}
  .story-card h3{font-size:15px; font-weight:700; margin-bottom:4px; line-height:1.3;}
  .story-stat{
    display:inline-flex; gap:4px; align-items:center;
    font-size:11.5px; font-weight:600; color:#1E4CA2;
    background: var(--mint-soft); padding:2px 8px; border-radius:6px; margin:6px 0;
  }
  .story-card p{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:6px;}

  .stories-list .story-full{
    margin:0 18px 14px; padding:16px;
    border:1px solid var(--line); border-radius:var(--radius);
  }
  .story-full .story-route{margin-bottom:8px;}
  .story-full h3{font-size:16px; font-weight:700; margin-bottom:6px;}
  .story-full .stats-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0;}
  .story-full .stats-row .story-time{font-size:11.5px; color:var(--ink-soft); font-weight:600;}
  .story-full p{font-size:13px; color:var(--ink-soft); line-height:1.6;}
  .story-save-btn{
    margin-top:12px; display:inline-flex; align-items:center; gap:4px;
    font-size:12px; font-weight:700; color:var(--ink-soft);
    background:var(--bg); border:1px solid var(--line); border-radius:999px;
    padding:6px 14px; cursor:pointer; font-family:var(--font-body);
  }
  .story-save-btn.saved{ color:#1E4CA2; background:var(--mint-soft); border-color:transparent; }

  /* professor reviews */
  .prof-card{
    flex-shrink:0; width:200px;
    border:1px solid var(--line); border-radius: var(--radius);
    padding:14px; background:var(--surface);
  }
  .prof-card h3{font-size:15px; font-weight:700; margin-bottom:2px;}
  .prof-card .dept{font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
  .prof-card p{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:8px;}

  .rating-row{display:flex; gap:6px; align-items:center; margin-bottom:2px;}
  .rating-score{
    font-family:var(--font-display); font-weight:700; font-size:18px;
    color:#1E4CA2; background:var(--mint-soft); border-radius:8px;
    padding:2px 8px; line-height:1.3;
  }
  .rating-stars{font-size:13px; letter-spacing:1px; color:var(--mint);}
  .rating-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
  .rating-tag{
    font-size:11px; font-weight:600; color:var(--ink-soft);
    background:var(--bg); border:1px solid var(--line);
    padding:3px 9px; border-radius:999px;
  }

  .prof-full{
    margin:0 18px 14px; padding:16px;
    border:1px solid var(--line); border-radius:var(--radius);
  }
  .prof-full .head-row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .prof-full h3{font-size:16px; font-weight:700;}
  .prof-full .dept{font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}
  .prof-full .review-meta{display:flex; gap:14px; font-size:12px; color:var(--ink-soft); margin:10px 0 6px;}
  .prof-full p{font-size:13px; color:var(--ink-soft); line-height:1.6;}
  .prof-full .post-foot{margin-top:10px;}

  /* social-style composer box */
  .composer-box{
    display:block; width: calc(100% - 36px); text-align:left;
    margin:0 18px 16px; padding:14px 16px;
    border:1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); cursor:pointer; font-family:inherit; color:inherit;
  }
  .composer-row{
    display:flex; align-items:center; gap:12px;
  }
  .composer-avatar{
    flex-shrink:0; width:38px; height:38px; border-radius:50%;
    background: var(--mint-soft); display:flex; align-items:center; justify-content:center;
    font-size:17px;
  }
  .composer-text{
    flex:1; padding:10px 16px; border-radius:999px;
    background: var(--bg); color: var(--ink-soft);
    font-size:13.5px; font-weight:500; cursor:pointer;
    transition: background .15s;
  }
  .composer-box:hover .composer-text{ background: var(--mint-soft); color:#1E4CA2; }
  .composer-prompts{
    display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0; padding-left:50px;
  }
  .composer-prompts span{
    font-size:11.5px; font-weight:600; color:var(--ink-soft);
    background: var(--bg); border:1px solid var(--line);
    padding:4px 10px; border-radius:999px;
  }
  .composer-btn{
    display:block; margin:14px 0 0 50px;
    background: var(--mint); color:#fff; border:none;
    font-size:13px; font-weight:700; font-family:var(--font-body);
    padding:9px 20px; border-radius:999px; cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 14px rgba(30,76,162,0.3);
  }
  .composer-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30,76,162,0.4); }
  .composer-btn:active{ transform: translateY(0); }

  /* feed filter pills */
  .filter-row{
    display:flex; gap:8px; padding:0 18px 12px; overflow-x:auto; scrollbar-width:none;
  }
  .filter-row::-webkit-scrollbar{display:none;}
  .pill{
    flex-shrink:0; padding:6px 13px; border-radius:999px;
    font-size:12.5px; font-weight:600; border:1px solid var(--line);
    background:var(--surface); color:var(--ink-soft); cursor:pointer; white-space:nowrap;
  }
  .pill.active{background:var(--ink); color:#fff; border-color:var(--ink);}

  /* compose fab */
  .fab{
    position:fixed; right:max(18px, calc(50% - 215px + 18px)); bottom:calc(var(--nav-h) + 16px); z-index:40;
    height:56px; padding:0 24px; border-radius:999px;
    background: var(--mint); color:#fff; border:none;
    font-size:15px; font-weight:800; font-family:var(--font-body);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow: 0 10px 28px rgba(30,76,162,0.45);
    letter-spacing:-0.01em;
    transition: transform .15s ease, box-shadow .15s ease;
    animation: fab-pop .4s ease;
  }
  .fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 32px rgba(30,76,162,0.5); }
  .fab:active{ transform: translateY(0) scale(0.98); }
  .fab .fab-plus{
    font-size:22px; font-weight:300; line-height:1;
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%;
    background: rgba(255,255,255,0.25);
  }
  @keyframes fab-pop{
    from{ transform: scale(0.6); opacity:0; }
    to{ transform: scale(1); opacity:1; }
  }

  /* bottom nav */
  .bottomnav{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; z-index:50;
    background: var(--surface); border-top:1px solid var(--line);
    display:flex; padding:8px 6px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .navbtn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; cursor:pointer; color:var(--ink-soft);
    padding:8px 0; font-size:10.5px; font-weight:600; font-family:var(--font-body);
    min-height:48px;
  }
  .navbtn .ic{font-size:20px;}
  .navbtn.active{color:var(--ink);}
  .navbtn.active .ic{color:var(--mint);}

  /* my page */
  .profile-head{
    display:flex; align-items:center; gap:14px; padding:20px 18px;
    border-bottom:1px solid var(--line);
  }
  .avatar{
    width:54px; height:54px; border-radius:50%;
    background: linear-gradient(135deg, var(--mint), var(--accent));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:18px; font-family:var(--font-display);
  }
  .profile-head h3{font-size:16px; font-weight:700;}
  .profile-head p{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
  .menu-list{padding:6px 0;}
  .menu-item{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--line);
    font-size:14px; font-weight:500; cursor:pointer;
    width:100%; background:none; border-left:none; border-right:none; border-top:none;
    color:inherit; text-decoration:none; text-align:left;
  }
  .menu-item .right{color:var(--ink-soft); font-size:12px;}

  /* empty state */
  .empty{
    text-align:center; padding:60px 30px; color:var(--ink-soft);
  }
  .empty .ic{font-size:36px; margin-bottom:10px;}
  .empty h4{font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:4px;}
  .empty p{font-size:12.5px; line-height:1.6;}

  /* compose modal */
  .modal-overlay{
    position:fixed; inset:0; z-index:100;
    background: rgba(20,22,30,0.45);
    display:none; align-items:flex-end; justify-content:center;
    overscroll-behavior:contain;
  }
  body:has(.modal-overlay.show){ overflow:hidden; }
  .modal-overlay.show{display:flex;}
  .modal{
    width:100%; max-width:430px; background:var(--surface);
    border-radius:20px 20px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    animation: slideup .25s ease;
    max-height:85vh; overflow-y:auto;
  }
  @keyframes slideup{from{transform:translateY(100%);} to{transform:translateY(0);}}
  .modal h3{font-family:var(--font-display); font-size:17px; margin-bottom:14px;}
  .modal label{font-size:12.5px; font-weight:700; color:var(--ink-soft); display:block; margin:12px 0 6px;}
  .modal select, .modal input, .modal textarea{
    width:100%; border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:10px 12px; font-size:14px; font-family:var(--font-body); color:var(--ink);
    background:var(--bg);
  }
  .modal textarea{min-height:90px; resize:vertical;}
  .modal-actions{display:flex; gap:10px; margin-top:18px;}
  .btn{
    flex:1; padding:12px; border-radius:var(--radius-sm); border:none;
    font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font-body);
  }
  .btn-primary{background:var(--mint); color:#fff;}
  .btn-ghost{background:var(--bg); color:var(--ink-soft);}

  /* hide desktop-only panels on mobile */
  @media (max-width: 899px){
    .desktop-nav, .desktop-aside{ display:none; }
  }

  /* ---------- shared ---------- */
  .save-hint{ font-size:12px; font-weight:600; color:#1E4CA2; }
  .btn-danger{ background:#FFF0F0; color:var(--warn); }
  .modal-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* ---------- STUDY TIMER ---------- */
  .timer-card{
    margin: 4px 18px 16px; padding: 26px 20px 20px;
    border:1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
    display:flex; flex-direction:column; align-items:center;
  }
  .timer-label{
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:10px;
  }
  .timer-clock{
    font-family: var(--font-display);
    font-size: clamp(48px, 13vw, 72px); font-weight:700; letter-spacing:-0.03em;
    line-height:1; color:var(--ink); font-variant-numeric: tabular-nums;
    margin-bottom:20px;
  }
  .timer-clock.running{ color:#1E4CA2; }
  .goal-bar{
    width:100%; height:8px; border-radius:999px; background:var(--bg); overflow:hidden;
  }
  .goal-fill{
    height:100%; width:0%; border-radius:999px;
    background: var(--mint); transition: width .4s ease;
  }
  .goal-meta{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    font-size:12px; color:var(--ink-soft); font-weight:600; margin:8px 0 18px;
  }
  .goal-edit input{
    width:42px; border:1px solid var(--line); border-radius:8px; background:var(--bg);
    padding:3px 6px; font-size:12px; font-weight:700; color:var(--ink); text-align:center;
    font-family:var(--font-body);
  }
  .timer-controls{ display:flex; gap:10px; width:100%; }
  .timer-controls .btn{ flex:1; }

  .tstats{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:10px; padding: 0 18px 6px;
  }
  .tstat{
    border:1px solid var(--line); border-radius: var(--radius-sm);
    background:var(--surface); padding:12px 10px; text-align:center;
  }
  .tstat .v{ font-family:var(--font-display); font-size:16px; font-weight:700; }
  .tstat .l{ font-size:10.5px; font-weight:600; color:var(--ink-soft); margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
  @media (max-width: 420px){ .tstats{ grid-template-columns: repeat(2,1fr); } }

  .tchart{
    display:flex; align-items:flex-end; gap:10px;
    height:130px; margin: 0 18px 20px; padding: 14px 14px 8px;
    border:1px solid var(--line); border-radius: var(--radius); background:var(--surface);
  }
  .tbar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; }
  .tbar .bar{
    width:100%; max-width:34px; border-radius:6px 6px 2px 2px;
    background: var(--mint-soft); border:1px solid rgba(30,76,162,.35);
    min-height:2px; transition: height .3s ease;
  }
  .tbar.today .bar{ background: var(--mint); border-color:var(--mint); }
  .tbar .d{ font-size:10px; font-weight:700; color:var(--ink-soft); }
  .tbar .h{ font-size:9.5px; color:var(--ink-soft); }

  /* ---------- CLASS SCHEDULE ---------- */
  .qtr-nav{
    display:flex; align-items:center; gap:8px;
    padding: 4px 18px 8px;
  }
  .qtr-btn{
    flex-shrink:0; padding:9px 12px; border-radius:var(--radius-sm);
    border:1px solid var(--line); background:var(--surface);
    font-size:12.5px; font-weight:700; color:var(--ink-soft);
    cursor:pointer; font-family:var(--font-body); white-space:nowrap;
    max-width:150px; overflow:hidden; text-overflow:ellipsis;
    transition: all .12s ease;
  }
  .qtr-btn:hover{ border-color:var(--mint); color:#1E4CA2; }
  .qtr-btn.qtr-new{ border-style:dashed; }
  .qtr-name{ text-align:center; }
  .qtr-pos{ flex:1; font-size:11.5px; font-weight:600; color:var(--ink-soft); }
  .sched-toolbar{
    display:flex; align-items:center; gap:10px;
    padding: 4px 18px 14px;
  }
  .sched-sem-input{
    flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg); padding:9px 12px; font-size:13px; font-weight:600;
    color:var(--ink); font-family:var(--font-body);
  }
  .sched-sem-input:focus{ outline:none; border-color:var(--mint); }
  .sched-credits{ font-size:12px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
  .sched-add-btn{ flex:initial; padding:9px 14px; font-size:13px; }

  .sched-grid-wrap{ padding: 0 18px 20px; overflow-x:auto; }
  .sched-grid{
    --srow: 44px; --tcol: 40px;
    min-width: 320px;
    border:1px solid var(--line); border-radius: var(--radius);
    background:var(--surface); overflow:hidden;
  }
  .sg-head{
    display:grid; grid-template-columns: var(--tcol) repeat(5, 1fr);
    border-bottom:1px solid var(--line); background:var(--bg);
  }
  .sg-head .cell{
    padding:9px 4px; text-align:center;
    font-size:11.5px; font-weight:700; color:var(--ink-soft);
  }
  .sg-head .cell.today{ color:#1E4CA2; }
  .sg-body{ display:grid; grid-template-columns: var(--tcol) repeat(5, 1fr); }
  .sg-timecol .tl{
    height:var(--srow); font-size:9.5px; color:var(--ink-soft); font-weight:600;
    display:flex; align-items:flex-start; justify-content:center; padding-top:2px;
    border-top:1px solid var(--line);
  }
  .sg-timecol .tl:first-child{ border-top:none; }
  .sg-daycol{ position:relative; border-left:1px solid var(--line); }
  .sg-daycol .hline{ height:var(--srow); border-top:1px solid var(--line); }
  .sg-daycol .hline:first-child{ border-top:none; }
  .sg-block{
    position:absolute; left:3px; right:3px;
    border-radius:8px; padding:4px 6px; overflow:hidden; cursor:pointer;
    border:1px solid rgba(0,0,0,0.06);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .sg-block:hover{ transform:scale(1.02); box-shadow:0 4px 12px rgba(0,0,0,0.12); z-index:5; }
  .sg-block .code{ font-size:10.5px; font-weight:800; line-height:1.2; }
  .sg-block .room{ font-size:9px; font-weight:600; opacity:.75; line-height:1.2; }

  .day-picker{ display:flex; gap:8px; }
  .day-chip{
    flex:1; padding:9px 0; text-align:center; border-radius:var(--radius-sm);
    border:1px solid var(--line); background:var(--bg);
    font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
    transition: all .12s ease; user-select:none;
  }
  .day-chip.on{ background:var(--mint); border-color:var(--mint); color:#fff; }
  .color-picker{ display:flex; gap:8px; align-items:center; height:41px; }
  .color-dot{
    width:24px; height:24px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; transition: transform .12s ease;
  }
  .color-dot.on{ border-color:var(--ink); transform:scale(1.12); }

  .sample-badge{
    display:inline-block; margin-left:6px; font-size:10px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; color:#9A6210;
    background:#FFF2DE; padding:2px 7px; border-radius:999px; vertical-align:middle;
  }
  .safety-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:10px; }
  .feed-card{ cursor:pointer; }
  .feed-card .story-card, .feed-card .prof-card{ width:auto; margin: 0 18px 12px; }
  .search-box{ padding: 0 18px 12px; }
  .search-box input{
    width:100%; border:1px solid var(--line); border-radius:999px;
    padding:12px 16px; font-size:15px; font-family:var(--font-body); background:var(--bg);
  }
  .search-h{ font-family:var(--font-display); font-size:14px; padding: 8px 18px 4px; }
  .aside-copy{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); }
  .aside-link{ font-size:13px; font-weight:700; color:#1E4CA2; text-decoration:none; }
  .empty-action{ margin-top:16px; display:inline-flex; flex:none; padding:10px 18px; }
  .form-error{ color:var(--warn); font-size:13px; font-weight:600; min-height:1.2em; margin:8px 0; }
  .mode-banner{
    font-size:12.5px; line-height:1.5; padding:10px 12px; border-radius:10px; margin: 0 0 14px;
  }
  .mode-banner.warn{ background:#FFF2DE; color:#9A6210; }
  .mode-banner.ok{ background:var(--mint-soft); color:#1E4CA2; }
  .gate{
    position:fixed; inset:0; z-index:200; background:var(--bg);
    display:flex; align-items:flex-start; justify-content:center; padding:24px 16px;
    overflow-y:auto;
  }
  .gate[hidden]{ display:none !important; }
  .gate-card{
    width:100%; max-width:420px; background:var(--surface);
    border:1px solid var(--line); border-radius:20px; padding:28px 22px 22px;
    margin:auto;
  }
  .gate-brand{ margin-bottom:18px; }
  .gate-title{ font-family:var(--font-display); font-size:22px; letter-spacing:-0.03em; margin-bottom:8px; }
  .gate-lede{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin-bottom:16px; }
  .gate-fine{ font-size:12px; line-height:1.5; color:var(--ink-soft); margin-top:14px; }
  .gate-fine a{ color:#1E4CA2; }
  .gate-card label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); display:block; margin:12px 0 6px; }
  .gate-card input{
    width:100%; border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:12px; font-size:15px; font-family:var(--font-body); background:var(--bg);
  }
  .onboard-dots{ display:flex; gap:6px; margin-top:18px; }
  .onboard-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); }
  .onboard-dots span.on{ background:var(--mint); }
  .legal-page{ max-width:680px; margin:0 auto; padding:32px 20px 80px; font-family:var(--font-body); color:var(--ink); }
  .legal-page h1{ font-family:var(--font-display); font-size:28px; margin: 12px 0 16px; }
  .legal-page h2{ font-family:var(--font-display); font-size:18px; margin: 24px 0 8px; }
  .legal-page p, .legal-page li{ font-size:15px; line-height:1.65; color:var(--ink-soft); }
  .legal-page ul{ padding-left:18px; margin: 8px 0 16px; }
  .legal-page a{ color:#1E4CA2; }
  .app[hidden]{ display:none !important; }
  .pill{ font-family: inherit; }
  .day-chip, .color-dot, .sg-block{ font-family: inherit; }
  .sg-block{ border:1px solid rgba(0,0,0,0.06); text-align:left; }

.auth-tabs{ display:flex; gap:6px; background:var(--bg,#F4F6F8); padding:4px; border-radius:12px; margin-bottom:14px; }
.auth-tab{ flex:1; border:0; background:transparent; padding:9px 0; border-radius:9px; font:inherit; font-weight:700; font-size:14px; color:var(--ink-soft); cursor:pointer; }
.auth-tab.on{ background:#fff; color:var(--ink,#111); box-shadow:0 1px 3px rgba(0,0,0,.12); }
#nickRow[hidden], #confirmRow[hidden]{ display:none; }

.preview-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.preview-item{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; display:flex; flex-direction:column; gap:3px; background:var(--bg); }
.preview-item strong{ font-size:14.5px; }
.preview-item span, .preview-empty{ font-size:13px; color:var(--ink-soft); line-height:1.45; }
.preview-lock{ font-size:13.5px; font-weight:700; color:var(--ink-soft); margin:4px 0 12px; }
.preview-card{ max-height:92vh; overflow:auto; }

.guest-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; background:var(--surface); border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-soft); }
.guest-bar[hidden]{ display:none; }
.guest-bar-btns{ display:flex; gap:6px; }
.guest-bar .btn{ padding:6px 12px; font-size:13px; flex:none; white-space:nowrap; }
.guest-foot{ margin:16px 14px 90px; padding:18px; border:1px dashed var(--line); border-radius:14px; text-align:center; }
.guest-foot p{ font-size:14px; font-weight:700; color:var(--ink-soft); margin:0 0 12px; }
.guest-foot-btns{ display:flex; gap:8px; justify-content:center; }

.shot{ position:fixed; inset:0; z-index:300; background:#fff; padding:max(env(safe-area-inset-top),14px) 12px 14px; overflow:auto; font-family:var(--font-body); color:var(--ink); }
.shot[hidden]{ display:none; }
.shot-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:4px 4px 10px; }
.shot-title h2{ font-family:var(--font-display); font-size:20px; letter-spacing:-0.03em; margin:0; }
.shot-title span{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.shot-grid{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.shot-head{ display:grid; grid-template-columns:34px repeat(5, minmax(0,1fr)); background:var(--bg); border-bottom:1px solid var(--line); }
.shot-head div{ padding:8px 0; text-align:center; font-size:12px; font-weight:700; color:var(--ink-soft); }
.shot-body{ display:grid; grid-template-columns:34px repeat(5, minmax(0,1fr)); }
.shot-times div{ height:var(--sr); font-size:9.5px; font-weight:600; color:var(--ink-soft); text-align:center; padding-top:2px; border-top:1px solid var(--line); }
.shot-times div:first-child{ border-top:none; }
.shot-col{ position:relative; border-left:1px solid var(--line); }
.shot-col i{ display:block; height:var(--sr); border-top:1px solid var(--line); }
.shot-col i:first-child{ border-top:none; }
.shot-block{ position:absolute; left:2px; right:2px; border-radius:7px; padding:3px 4px; overflow:hidden; line-height:1.2; }
.shot-block b{ display:block; font-size:10.5px; font-weight:800; }
.shot-block span{ display:block; font-size:9px; font-weight:600; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shot-hint{ margin-top:12px; text-align:center; font-size:12.5px; color:var(--ink-soft); animation: shotfade .6s ease 3s forwards; }
@keyframes shotfade{ to{ opacity:0; } }

.q-pills{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.q-pill{ height:40px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--ink-soft); cursor:pointer; padding:0; }
.q-pill.on{ background:var(--mint-soft); border-color:var(--mint); color:#1E4CA2; }
#profRevYear{ width:100%; }

/* ===== Course work plans ===== */
.cw-intro{ padding:4px 18px 12px; font-size:13.5px; color:var(--ink-soft); }
.cw-empty{ margin:0 18px 12px; padding:18px; text-align:center; color:var(--ink-soft); font-size:14px; background:var(--surface); border:1px dashed var(--line); border-radius:14px; }
.cw-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 18px 12px;cursor:pointer}
.cw-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cw-title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-0.02em;margin:0}
.cw-sub{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.cw-mine{font-size:11px;font-weight:700;color:#9A6210;background:#FFF2DE;padding:2px 8px;border-radius:999px;white-space:nowrap}
.cw-lbl{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 5px}
.cw-chips{display:flex;flex-wrap:wrap;gap:6px}
.cw-c{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--mint-soft);color:#1E4CA2;display:inline-flex;gap:6px;align-items:center}
.cw-c.s{background:#E8EAFF;color:#3D4CCC}
.cw-cx{border:0;background:none;color:inherit;opacity:.65;font-size:15px;line-height:1;cursor:pointer;padding:0}
.cw-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.cw-stat{background:var(--bg);border-radius:10px;padding:8px 10px}
.cw-stat b{display:block;font-family:var(--font-display);font-size:17px}
.cw-stat span{font-size:11px;color:var(--ink-soft);font-weight:600}
.cw-live{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#1E4CA2;margin-top:12px}
.cw-live i{width:7px;height:7px;border-radius:50%;background:var(--mint);display:inline-block}
.cw-btn{display:block;margin:0 18px 14px;width:calc(100% - 36px)}
.cw-back{padding:6px 18px 4px}
.cw-edit{display:flex;gap:8px;margin:12px 18px}
.cw-q{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0 18px 12px;overflow:hidden}
.cw-qh{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg)}
.cw-qh b{font-family:var(--font-display);font-size:15px}
.cw-chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-left:8px}
.cw-done{background:#E6ECF8;color:#1E4CA2}.cw-now{background:#E8EAFF;color:#3D4CCC}.cw-planned{background:#fff;color:var(--ink-soft);border:1px solid var(--line)}
.cw-cr{font-size:12px;font-weight:700;color:var(--ink-soft)}
.cw-edit-q{border:0;background:none;color:#1E4CA2;font-weight:700;font-size:12px;cursor:pointer;margin-left:8px;padding:0}
.cw-cl{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.cw-a{font-weight:700;font-size:14px}.cw-b{font-size:12.5px;color:var(--ink-soft);margin-top:1px}.cw-p{font-size:12px;color:var(--ink-soft);margin-top:2px}
.cw-r{text-align:right}.cw-r .k{font-size:12px;font-weight:600;color:var(--ink-soft)}.cw-r .g{font-family:var(--font-display);font-weight:700;font-size:15px;margin-top:2px}
.cw-r .g.na{color:#B0B7C3;font-weight:500}
.cw-comments{margin:18px 18px 24px}
.cw-comments h4{font-family:var(--font-display);font-size:15px;margin:0 0 8px}
.cw-cm{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:14px}
.cw-cm-h{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ink-soft);margin-bottom:3px}
.cw-cm-h b{color:var(--ink)}
.cw-cm-form{display:flex;gap:8px}
.cw-cm-form input,.cw-addrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);padding:10px 12px;font-size:14px;font-family:inherit}
.cw-addrow{display:flex;gap:8px;margin-bottom:6px}
.cw-row{position:relative;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;background:var(--bg)}
.cw-row input{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:14px;font-family:inherit;background:var(--surface)}
.cw-row-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.cw-row > .cw-row-grid:first-of-type{padding-right:24px}
.cw-row-grid + input{margin-right:0}
.cw-x{position:absolute;right:6px;top:4px;border:0;background:none;font-size:20px;color:var(--ink-soft);cursor:pointer;line-height:1}
.cw-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cw-danger{display:block;margin:14px auto 2px;border:0;background:none;color:#C0392B;font-weight:700;font-size:13px;cursor:pointer}
.fab[hidden]{ display:none !important; }

/* ===== Professor / class search ===== */
.ps-wrap{padding:6px 18px 4px}
.ps-in{display:flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0 12px}
.ps-in input{flex:1;min-width:0;border:0;background:none;outline:none;padding:11px 0;font-size:14px;font-family:inherit;color:var(--ink)}
.ps-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 12px}
.ps-tab{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-weight:700;font-size:13px;color:var(--ink-soft);cursor:pointer;font-family:var(--font-body)}
.ps-tab.on{background:var(--mint-soft);border-color:var(--mint);color:#1E4CA2}
.ps-sug{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;margin:0 18px 12px;font-size:13.5px}
.ps-sug div{padding:10px 12px;color:var(--ink-soft);border-top:1px solid var(--line);cursor:pointer}
.ps-sug div:first-child{border-top:0}
.ps-sug div.on{background:var(--mint-soft);color:#1E4CA2;font-weight:700}
.ps-head{padding:0 18px;margin:4px 0 8px}
.ps-head b{font-family:var(--font-display);font-size:18px;display:block}
.ps-head span{font-size:12.5px;color:var(--ink-soft)}
.ps-sum{margin:0 18px 12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;justify-content:space-between;align-items:center}
.ps-big{font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-.03em}
.ps-st{color:#F5A524;font-size:13px;letter-spacing:2px}
.ps-sm{font-size:12px;color:var(--ink-soft);font-weight:600}
.ps-row{margin:0 18px 10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ps-row .t{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ps-row h4{margin:0;font-family:var(--font-display);font-size:15px}
.ps-row .m{font-size:12px;color:var(--ink-soft);margin-top:2px}
.ps-sc{background:var(--mint-soft);color:#1E4CA2;font-weight:800;border-radius:10px;padding:4px 10px;font-size:14px}
.ps-row p{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:8px 0 0}
.ps-link{border:0;background:none;padding:0;font-family:inherit;font-size:12px;font-weight:700;color:#1E4CA2;margin-top:8px;cursor:pointer}
.ps-lbl{margin:14px 18px 6px;font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
#profList[hidden]{display:none}
#profComposer[hidden]{display:none}
.ps-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.ps-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.ps-chip span{color:var(--ink-soft);font-weight:600;margin-left:2px}
.ps-chip b{margin-right:2px}
.ps-chip.empty{opacity:.55}
.ps-chip.empty{opacity:.55}

/* ===== Class picker in the review form ===== */
.pk-lbl{font-size:12px;font-weight:700;color:var(--ink-soft);margin:12px 0 6px}
.pk-chips{display:flex;flex-wrap:wrap;gap:8px}
.pk-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.pk-chip b{font-weight:800;margin-right:2px}
.pk-chip.on{background:var(--mint-soft);border-color:var(--mint);color:#1E4CA2;cursor:default}
.pk-chip.more{background:var(--bg);color:#1E4CA2;border-style:dashed;font-weight:700}
.pk-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);margin-top:6px}
.pk-list div{padding:10px 12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink);cursor:pointer}
.pk-list div:first-child{border-top:0}
.pk-list div b{margin-right:6px}
.pk-list div.more{color:#1E4CA2;font-weight:700;text-align:center;background:var(--bg)}
.pk-none{margin-top:6px;font-size:12.5px;color:var(--ink-soft)}
.pk-type{display:block;border:0;background:none;padding:0;margin-top:10px;font-family:inherit;font-size:12.5px;font-weight:700;color:#1E4CA2;cursor:pointer}
.pk-picked{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--mint);background:var(--mint-soft);color:#1E4CA2;font-weight:700;border-radius:12px;padding:11px 12px;font-size:14px}
.pk-picked button{border:0;background:none;color:#1E4CA2;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
#profClassFind[hidden],#profClassPicked[hidden],#profClassManual[hidden],#profClassBrowse[hidden]{display:none}
.pk-add{display:block;width:100%;margin-top:8px;border:1.5px dashed var(--mint);border-radius:12px;padding:12px;text-align:center;font-weight:800;font-size:14px;color:#1E4CA2;background:var(--mint-soft);cursor:pointer;font-family:inherit}
.pk-addbtn{display:block;width:100%;margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:11px 12px;text-align:center;font-weight:700;font-size:14px;color:#1E4CA2;background:var(--surface);cursor:pointer;font-family:inherit}
.pk-err{margin-top:8px;font-size:13px;font-weight:700;color:#C0392B}
.pk-note{margin-top:8px;font-size:12.5px;color:var(--ink-soft)}
#profClassErr[hidden]{display:none}

/* ===== Likes and hot posts ===== */
.like-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:4px 12px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.like-btn.on{background:var(--mint-soft);border-color:var(--mint);color:var(--mint)}
.like-btn:active{transform:scale(.96)}
.hot-wrap{padding:14px 18px 0}
.hot-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.hot-head h2{margin:0;font-family:var(--font-display);font-size:19px}
.hot-flame{background:#FFF2DE;color:#C2700A;font-weight:800;font-size:11px;border-radius:999px;padding:3px 9px}
.hot-main{background:var(--ink);color:#fff;border-radius:16px;padding:16px;margin-bottom:10px;cursor:pointer}
.hot-main .tag{font-size:11px;font-weight:700;color:#9CB4F2;text-transform:uppercase;letter-spacing:.05em}
.hot-main h3{margin:6px 0;font-family:var(--font-display);font-size:18px;line-height:1.25;color:#fff}
.hot-main p{margin:0;font-size:13px;color:#C7CCD8;line-height:1.5}
.hot-main .f{display:flex;gap:14px;margin-top:12px;font-size:13px;font-weight:700;align-items:center}
.hot-main .like-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.hot-main .like-btn.on{background:#fff;color:#1E4CA2;border-color:#fff}
.hot-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-bottom:8px;cursor:pointer}
.hot-row .n{font-family:var(--font-display);font-weight:800;color:#C2700A;width:18px}
.hot-row .t{flex:1;font-weight:700;font-size:14px;line-height:1.3}
.hot-row .l{font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
/* the phone bottom bar is for phones only */
@media (min-width: 900px){ .bottomnav{ display:none !important; } }

/* online classes */
.cls-seg{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.sched-online{ background:#F3F6FC; border:1px solid #C9D5EE; border-radius:12px; padding:8px 10px; margin:0 18px 10px; }
.sched-online[hidden]{ display:none; }
.so-title{ font-size:11px; font-weight:700; color:#1E4CA2; margin-bottom:6px; }
.so-chip{ font-family:inherit; background:#E6ECF8; color:#1E4CA2; border:1px dashed #1E4CA2; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; margin:0 6px 6px 0; cursor:pointer; }
.sg-online{ border-style:dashed !important; }
.shot-async{ font-size:12px; margin:0 0 8px; color:#1E4CA2; }

/* ===== Layout fixes (Oct 2026) ===== */
/* quarter switcher: name on its own row, buttons share the row below */
.qtr-nav{ flex-wrap:wrap; }
.qtr-nav .qtr-name{ order:-1; flex:1 1 100%; }
.qtr-nav .qtr-btn{ flex:1 1 0; max-width:none; min-width:0; }
.sched-toolbar{ flex-wrap:wrap; }
@media (max-width: 359px){
  .sched-grid-wrap{ padding:0 10px 20px; }
  .sched-grid{ min-width:0; --tcol:32px; }
}

/* phones: 16px inputs stop iPhone from zooming in when you tap a box */
@media (max-width: 899px){
  input, select, textarea{ font-size:16px !important; }
  .goal-edit input{ width:48px; }
}

@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---------- DESKTOP LAYOUT (kept last so it wins over the phone rules) ---------- */
@media (min-width: 900px){
  :root{ --nav-h: 0px; }
  body{ align-items:flex-start; padding:0; }
  .app{
    max-width:1200px; width:100%; margin:0 auto;
    min-height:100vh; box-shadow:none; background:transparent;
    display:grid;
    grid-template-columns: 240px minmax(0, 1fr) 320px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "topbar topbar topbar"
      "guest guest guest"
      "sidenav main aside";
  }
  .topbar{ grid-area: topbar; }
  .guest-bar{ grid-area: guest; }
  .school-bar{ display:none; }
  main{ grid-area: main; padding: 0 24px 60px; max-width:680px; width:100%; min-width:0; justify-self:center; }
  .fab{ right: max(24px, calc(50% - 600px + 24px)); bottom:32px; }
  .bottomnav{ display:none !important; }
  .comment-input-row{ bottom:0; }
  .filter-row{ flex-wrap:wrap; overflow:visible; }
  .board-cat{ background:var(--surface); border-color:var(--line); }
  .board-cat:hover{ border-color:var(--mint); }
  .modal-overlay{ align-items:center; justify-content:center; padding:24px; }
  .modal{ width:480px; max-width:100%; border-radius:20px; max-height:calc(100vh - 48px) !important; padding:22px; animation: pop .18s ease; }

  /* desktop side navigation */
  .desktop-nav{
    display:flex; flex-direction:column; gap:4px;
    grid-area: sidenav; padding:24px 16px; position:sticky; top:var(--topbar-h); height:fit-content;
  }
  .desktop-nav .dn-item{
    display:flex; align-items:center; gap:12px;
    padding:11px 14px; border-radius:12px; cursor:pointer;
    font-size:14.5px; font-weight:600; color:var(--ink-soft);
    transition: background .15s, color .15s;
    width:100%; background:none; border:none; text-align:left;
  }
  .desktop-nav .dn-item .ic{ font-size:18px; width:22px; text-align:center; }
  .desktop-nav .dn-item:hover{ background:var(--bg); color:var(--ink); }
  .desktop-nav .dn-item.active{ background:var(--mint-soft); color:#1E4CA2; }
  .desktop-nav .dn-divider{ height:1px; background:var(--line); margin:10px 14px; }
  .desktop-nav .dn-schools{ padding:0 14px; }
  .desktop-nav .dn-schools h4{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin: 14px 0 8px; }
  .desktop-nav .school-chip{ display:block; width:100%; text-align:left; margin-bottom:6px; border-radius:10px; }

  /* desktop right rail */
  .desktop-aside{
    grid-area: aside; padding:24px 24px 24px 0;
    display:flex; flex-direction:column; gap:18px; position:sticky; top:var(--topbar-h); height:fit-content;
  }
  .aside-card{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:var(--surface); }
  .aside-card h4{ font-family:var(--font-display); font-size:14px; margin-bottom:12px; }
  .aside-story{ display:flex; flex-direction:column; gap:2px; padding:8px 0; border-bottom:1px solid var(--line); }
  .aside-story:last-child{ border-bottom:none; }
  .aside-story .route{ font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; }
  .aside-story .major{ font-size:13px; font-weight:600; }
  .aside-cta{ background: linear-gradient(135deg, var(--ink), #2B3142); color:#fff; }
  .aside-cta h4{ color:#9CB4F2; }
  .aside-cta p{ font-size:12.5px; line-height:1.6; opacity:.85; margin-bottom:12px; }
}
@media (min-width: 1300px){
  .app{ grid-template-columns: 260px minmax(0, 1fr) 340px; }
}

/* sign up: school email notice */
.school-note{ background:#E6ECF8; border:1px solid #C9D5EE; border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.5; color:#12347A; margin:0 0 4px; }
.school-note b{ display:block; margin-bottom:2px; }
.school-note[hidden], .school-hint[hidden]{ display:none; }
.school-hint{ font-size:12.5px; line-height:1.45; color:#9A6210; background:#FFF2DE; border-radius:8px; padding:7px 10px; margin-top:6px; }
.mode-banner[hidden]{ display:none; }