.course-block:hover{
      transform:translateY(-2px) scale(1.006);
      filter:saturate(1.035) brightness(1.015);
      box-shadow:
        0 14px 30px color-mix(in srgb,var(--course-light-a) 27%,transparent),
        inset 0 0 0 1px rgba(255,255,255,.17),
        inset 0 1px 0 rgba(255,255,255,.22)!important;
    }
    .course-title{
      text-shadow:0 1px 1px rgba(0,0,0,.08);
    }
    .course-sub{
      opacity:.88;
    }
    .course-time{
      background:rgba(20,24,38,.15)!important;
      border:1px solid rgba(255,255,255,.14)!important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter:blur(4px);
    }

    html[data-theme="dark"] .course-block{
      background:linear-gradient(138deg,var(--course-dark-a),var(--course-dark-b))!important;
      border:0!important;
      box-shadow:
        0 10px 27px color-mix(in srgb,var(--course-dark-a) 25%,transparent),
        inset 0 0 0 1px rgba(255,255,255,.075),
        inset 0 1px 0 rgba(255,255,255,.10)!important;
    }
    html[data-theme="dark"] .course-block::before{
      background:
        linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.018) 38%,transparent 64%);
    }
    html[data-theme="dark"] .course-block::after{
      background:color-mix(in srgb,var(--course-dark-b) 58%,white 42%);
      opacity:.68;
    }
    html[data-theme="dark"] .course-block:hover{
      filter:saturate(1.06) brightness(1.045);
      box-shadow:
        0 15px 33px color-mix(in srgb,var(--course-dark-a) 32%,transparent),
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 1px 0 rgba(255,255,255,.12)!important;
    }
    html[data-theme="dark"] .course-time{
      background:rgba(7,10,17,.18)!important;
      border-color:rgba(255,255,255,.10)!important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }

/* ===== Mobile redesign preview ===== */
@media(max-width:760px){
  :root{--dayLabel:84px;--laneH:96px}
  .app{padding:8px 8px 18px}
  .hero{padding:14px;border-radius:20px;gap:14px}
  .brand{align-items:flex-start;gap:10px}
  .app-logo{width:44px;height:44px;border-radius:14px}
  .app-logo svg{width:22px;height:22px}
  .brand h1{font-size:21px}
  .brand p{font-size:10.5px;line-height:1.7;margin-top:3px}
  .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
  .hero-actions .btn{width:100%;min-height:42px;padding:8px 9px;font-size:10px;box-shadow:none}

  .planbar{display:block;padding:10px;border-radius:16px;margin:9px 0}
  .plan-left{display:block;width:100%}
  .plan-label{display:block;margin-bottom:7px}
  .plan-list{display:flex;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:0 0 5px;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .plan-tab{flex:0 0 auto;max-width:180px;min-height:38px}
  .plan-tab-name{max-width:135px}
  .plan-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px;margin:7px 0 0}
  .plan-actions .btn{width:100%;min-width:0;white-space:normal;line-height:1.45;padding:7px 5px;font-size:9.4px}
  .plan-hint{margin-top:8px;font-size:9.5px;line-height:1.75}

  .metrics{gap:8px;margin-bottom:10px}
  .metric{min-width:0;padding:10px;border-radius:16px;gap:9px;align-items:flex-start}
  .metric-icon{width:36px;height:36px;border-radius:12px;font-size:15px;flex:0 0 auto}
  .metric-label{font-size:9.4px;line-height:1.5}
  .metric-value{font-size:18px;line-height:1.2;margin-top:1px}
  .metric-value.session-summary{font-size:15.5px;white-space:normal}
  .metric-note{font-size:8.6px;line-height:1.55}

  .workspace{gap:10px}
  .panel{border-radius:18px}
  .panel-head{padding:13px 14px;gap:9px}
  .panel-head h2{font-size:14px}
  .panel-head p{font-size:9.7px}
  .toolbar{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:6px}
  .toolbar .btn{width:100%;min-width:0;white-space:normal;line-height:1.45;padding:7px 6px}

  .timeline-scroll{max-height:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .axis-corner,.day-label{width:var(--dayLabel);min-width:var(--dayLabel)}
  .axis-corner{font-size:9px}
  .day-label{font-size:10.5px}
  .course-block{top:10px;height:76px;border-radius:13px;padding:9px 10px}
  .course-title{font-size:10.5px;margin-bottom:3px}
  .course-sub{font-size:8.6px;margin-bottom:4px}
  .course-time{font-size:8.3px;padding:2px 5px}
  .empty-timeline{min-width:580px;padding:54px 16px}

  .course-list{max-height:none;padding:8px}
  .course-card{padding:11px;border-radius:14px}
  .course-card h3{font-size:12px}
  .card-actions{gap:5px}
  .mini{width:36px;height:36px;border-radius:10px}
  .card-controls{grid-template-columns:1fr;gap:6px}
  .status-toggle{width:100%;min-height:38px}
  .group-select{min-height:38px}

  .modal-backdrop{padding:0;align-items:stretch}
  .modal{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .modal-head{padding:13px 14px}
  .modal-head h2{font-size:16px}
  .modal-body{padding:11px}
  .section{padding:11px;border-radius:14px;margin-bottom:9px}
  .modal-foot{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px 10px}
  .modal-foot .btn{width:100%;min-height:44px}
  #saveCourseBtn{grid-column:1/-1}

  .app-dialog-backdrop,.jalali-backdrop{padding:9px}
  .app-dialog,.jalali-picker{border-radius:18px}
  .app-dialog-actions{gap:6px;padding:10px 12px 13px}
  .app-dialog-actions .btn{min-height:42px}
}

@media(max-width:480px){
  .metric-note{display:none}
  .form-grid{grid-template-columns:1fr}
  .span2,.span4{grid-column:auto}
  .group-head{grid-template-columns:1fr}
  .active-radio{grid-column:auto}
  .session-row{grid-template-columns:1fr}
  .session-row .remove-session{grid-column:auto;width:100%;min-height:38px}
  .exam-grid{grid-template-columns:1fr}
  .exam-grid .exam-date{grid-column:auto}
  .plan-actions{grid-template-columns:1fr 1fr}
  .plan-actions .btn:last-child{grid-column:1/-1}
  .hero-actions .btn{font-size:9.5px}
}