/* =========================================================
   QR TRANSFER
   ========================================================= */
 
.qr-transfer-modal{
  max-width:460px;
  overflow:hidden;
}

.qr-subtitle{
  font-size:12px;
  margin-top:3px;
}

.qr-transfer-content{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.qr-transfer-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px;
  border:1px solid var(--border-light);
  border-radius:16px;
  background:var(--card-bg);
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.qr-transfer-option:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  border-color:#D0D0D5;
  background:#FBFBFC;
}

.qr-transfer-option:active{
  transform:scale(.98);
}

.qr-option-icon{
  width:44px;
  height:44px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:700;
  flex-shrink:0;
}

.send-icon{
  background:var(--apple-blue-bg);
  color:var(--apple-blue);
}

.receive-icon{
  background:var(--success-green-bg);
  color:var(--success-green);
}

.qr-option-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}

.qr-option-text strong{
  font-size:14px;
}

.qr-option-text span{
  font-size:11px;
  color:var(--text-sub);
}

.qr-option-arrow{
  font-size:25px;
  color:#A0A0A5;
  transition:transform .2s ease;
}

.qr-transfer-option:hover .qr-option-arrow{
  transform:translateX(3px);
}

.qr-transfer-screen{
  display:none;
  text-align:center;
  animation:qrScreenIn .35s cubic-bezier(.2,.8,.2,1);
}

.qr-transfer-screen.active{
  display:block;
}

@keyframes qrScreenIn{
  from{
    opacity:0;
    transform:translateY(12px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.qr-screen-title{
  font-size:20px;
  font-weight:700;
  margin-bottom:5px;
}

.qr-screen-description{
  font-size:12px;
  line-height:1.5;
  max-width:340px;
  margin:0 auto 18px;
}

.qr-code-wrapper{
  width:240px;
  height:240px;
  margin:0 auto 16px;
  padding:12px;
  background:#fff;
  border-radius:20px;
  box-shadow:
    0 10px 35px rgba(0,0,0,.10),
    0 0 0 1px var(--border-light);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:qrAppear .5s cubic-bezier(.2,.8,.2,1);
}

@keyframes qrAppear{
  0%{
    opacity:0;
    transform:scale(.75) rotate(-2deg);
  }
  70%{
    transform:scale(1.03);
  }
  100%{
    opacity:1;
    transform:scale(1) rotate(0);
  }
}

.qr-code img,
.qr-code canvas{
  max-width:100%;
  max-height:100%;
}

.qr-transfer-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:20px;
  background:var(--success-green-bg);
  color:#1e7e34;
  font-size:11px;
  font-weight:600;
  margin-bottom:16px;
}

.qr-reader{
  width:100%;
  max-width:360px;
  margin:0 auto 16px;
  overflow:hidden;
  border-radius:16px;
}

.qr-reader video{
  border-radius:16px;
}

.qr-reader__dashboard{
  font-size:12px;
}

.qr-reader__dashboard button{
  border:none;
  border-radius:8px;
  padding:8px 12px;
  background:var(--apple-blue);
  color:#fff;
  cursor:pointer;
}

.qr-reader__scan_region{
  position:relative;
}

.qr-reader__scan_region::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  height:2px;
  top:20%;
  background:var(--apple-blue);
  box-shadow:0 0 10px rgba(0,122,255,.8);
  animation:qrScanLine 2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes qrScanLine{
  0%,100%{
    top:20%;
    opacity:.5;
  }
  50%{
    top:78%;
    opacity:1;
  }
}

.qr-data-preview{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:18px 0;
}

.qr-data-preview div{
  padding:13px;
  background:var(--bg-color);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.qr-data-preview span{
  font-size:10px;
  color:var(--text-sub);
}

.qr-data-preview strong{
  font-size:20px;
}

.qr-warning{
  font-size:11px;
  line-height:1.5;
  color:var(--error-red);
  background:var(--error-red-bg);
  padding:10px 12px;
  border-radius:10px;
}

.qr-success-icon{
  width:64px;
  height:64px;
  margin:5px auto 14px;
  border-radius:50%;
  background:var(--success-green-bg);
  color:var(--success-green);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:700;
  animation:qrSuccessPop .5s cubic-bezier(.2,.8,.2,1);
}

@keyframes qrSuccessPop{
  0%{
    transform:scale(.4);
    opacity:0;
  }
  70%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

.qr-big-success{
  width:82px;
  height:82px;
  margin:5px auto 18px;
}

.qr-big-success svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.qr-success-circle{
  fill:none;
  stroke:var(--success-green);
  stroke-width:3;
  stroke-dasharray:151;
  stroke-dashoffset:151;
}

.qr-transfer-success.active .qr-success-circle{
  animation:qrDrawCircle .55s ease forwards;
}

.qr-success-check{
  fill:none;
  stroke:var(--success-green);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:42;
  stroke-dashoffset:42;
}

.qr-transfer-success.active .qr-success-check{
  animation:qrDrawCheck .35s ease .45s forwards;
}

@keyframes qrDrawCircle{
  to{
    stroke-dashoffset:0;
  }
}

@keyframes qrDrawCheck{
  to{
    stroke-dashoffset:0;
  }
}

@media(max-width:768px){
  .qr-transfer-modal{
    max-width:calc(100% - 18px);
  }

  .qr-code-wrapper{
    width:220px;
    height:220px;
  }

  .qr-option-icon{
    width:40px;
    height:40px;
  }
}

/* RESET SUCCESS ANIMATION */
.early-access-note{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  color:#8a8f98;
  margin-bottom:5px;
  letter-spacing:.2px;
}

.status-light{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#34C759;
  box-shadow:0 0 5px rgba(52,199,89,.7);
  flex-shrink:0;
  animation:statusDoubleBlink 3.5s infinite;
}

@keyframes statusDoubleBlink{
  0%, 70%{
    opacity:1;
    box-shadow:0 0 5px rgba(52,199,89,.7);
  }
  72%{
    opacity:.15;
    box-shadow:none;
  }
  74%{
    opacity:1;
    box-shadow:0 0 5px rgba(52,199,89,.7);
  }
  76%{
    opacity:.15;
    box-shadow:none;
  }
  78%, 100%{
    opacity:1;
    box-shadow:0 0 5px rgba(52,199,89,.7);
  }
}

.reset-success-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}

.reset-success-overlay.show{
  opacity:1;
  visibility:visible;
}

.reset-success-box{
  width:min(380px,calc(100% - 36px));
  background:rgba(255,255,255,.96);
  border-radius:24px;
  padding:32px 24px 28px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  transform:scale(.85);
  opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),
             opacity .25s ease;
}

.reset-success-overlay.show .reset-success-box{
  transform:scale(1);
  opacity:1;
}

.success-check{
  width:82px;
  height:82px;
  margin:0 auto 18px;
}

.success-check svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.success-circle{
  fill:none;
  stroke:#34C759;
  stroke-width:3;
  stroke-dasharray:151;
  stroke-dashoffset:151;
}

.reset-success-overlay.show .success-circle{
  animation:drawCircle .55s ease forwards;
}

.success-checkmark{
  fill:none;
  stroke:#34C759;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:42;
  stroke-dashoffset:42;
}

.reset-success-overlay.show .success-checkmark{
  animation:drawCheck .35s ease .45s forwards;
}

.reset-success-box h2{
  margin:0 0 7px;
  font-size:21px;
  font-weight:700;
  color:var(--text-main);
}

.reset-success-box p{
  margin:0;
  font-size:13px;
  color:var(--text-sub);
  line-height:1.5;
}

@keyframes drawCircle{
  to{
    stroke-dashoffset:0;
  }
}

@keyframes drawCheck{
  to{
    stroke-dashoffset:0;
  }
}

@media(max-width:768px){
  .reset-success-box{
    width:calc(100% - 28px);
    padding:28px 20px 25px;
    border-radius:22px;
  }

  .success-check{
    width:74px;
    height:74px;
  }

  .reset-success-box h2{
    font-size:19px;
  }
}

#reset-data-modal .modal{
  max-width:480px;
}

#confirm-reset-data{
  border:none;
}

#confirm-reset-data:hover{
  background:#D70015!important;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-color:#F5F5F7;
  --card-bg:#FFFFFF;
  --text-main:#1D1D1F;
  --text-sub:#6E6E73;
  --border-color:#D2D2D7;
  --border-light:#E5E5EA;
  --apple-blue:#007AFF;
  --apple-blue-bg:rgba(0,122,255,.08);
  --success-green:#34C759;
  --success-green-bg:rgba(52,199,89,.12);
  --warning-orange:#FF9500;
  --warning-orange-bg:rgba(255,149,0,.12);
  --error-red:#FF3B30;
  --error-red-bg:rgba(255,59,48,.12);
  --purple:#AF52DE;
  --purple-bg:rgba(175,82,222,.12);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-subtle:0 4px 12px rgba(0,0,0,.03);
  --shadow-hover:0 6px 16px rgba(0,0,0,.06);
  --shadow-modal:0 20px 40px rgba(0,0,0,.15);
  --font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",
  "SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --transition:all .2s ease;
}

body{
  background-color:var(--bg-color);
  color:var(--text-main);
  font-family:var(--font-family);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:24px;
  max-width:1400px;
  margin:0 auto;
}

h1{font-size:32px;font-weight:700;letter-spacing:-.5px}
h2{font-size:22px;font-weight:600;letter-spacing:-.3px}
h3{font-size:16px;font-weight:600}
p{font-size:14px;color:var(--text-sub)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 16px;
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:var(--transition);
  user-select:none;
  background:#E8E8ED;
  color:var(--text-main);
}
.btn:hover{background:#DEDEDE}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--apple-blue);color:#fff}
.btn-primary:hover{background:#0066CC}
.btn-icon{
  padding:8px;
  border-radius:50%;
  background:transparent;
  border:none;
  cursor:pointer
}
.btn-icon:hover{background:rgba(0,0,0,.05)}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:var(--radius-sm)}

header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:16px
}
.header-actions{display:flex;gap:10px;align-items:center}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin-bottom:28px
}
.dash-card{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  padding:20px;
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-subtle);
  display:flex;
  align-items:center;
  justify-content:space-between
}
.dash-info .num{font-size:28px;font-weight:700;margin-top:4px}

.circular-progress{position:relative;width:54px;height:54px}
.circular-progress svg{
  width:100%;height:100%;transform:rotate(-90deg)
}
.circular-progress circle{
  fill:none;stroke-width:6;stroke-linecap:round
}
.bg-circle{stroke:var(--border-light)}
.fg-circle{
  stroke:var(--apple-blue);
  stroke-dasharray:126;
  stroke-dashoffset:126;
  transition:stroke-dashoffset .5s ease
}
.percentage-text{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:12px;font-weight:700
}

.week-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
  background:var(--card-bg);
  padding:12px 20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-subtle);
  flex-wrap:wrap;
  gap:12px
}
.week-nav-controls{display:flex;align-items:center;gap:12px}
.current-week-display{font-weight:600;font-size:16px}
.calendar-legend{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:12px;
  font-weight:500;
  color:var(--text-sub)
}
.legend-item{display:flex;align-items:center;gap:4px}

/* CALENDAR */

.calendar-container{
  overflow-x:auto;
  padding-bottom:8px
}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(170px,1fr));
  gap:14px;
  min-width:1100px
}

.day-column{
  background:rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-light);
  padding:14px;
  display:flex;
  flex-direction:column;
  min-height:480px;
  transition:var(--transition)
}
.day-column.today{
  background:#fff;
  border-color:var(--apple-blue);
  box-shadow:0 0 0 1px var(--apple-blue),var(--shadow-subtle)
}

.day-header{
  text-align:center;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border-light)
}
.day-name{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-sub)
}
.today .day-name{color:var(--apple-blue)}
.day-date{font-size:18px;font-weight:700;margin-top:2px}

.classes-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex-grow:1
}
.empty-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex-grow:1;
  color:var(--border-color);
  font-size:13px;
  font-weight:500
}

/* CLASS CARD */

.class-card{
  background:var(--card-bg);
  border-radius:var(--radius-md);
  padding:12px;
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-subtle);
  position:relative;
  transition:var(--transition);
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden
}
.class-card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px)
}
.color-bar{
  position:absolute;
  top:0;left:0;bottom:0;width:4px
}
.class-card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-left:4px
}
.class-title{
  font-size:14px;
  font-weight:600;
  line-height:1.2
}
.type-tag{
  font-size:10px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px 6px;
  border-radius:4px;
  background:var(--bg-color);
  color:var(--text-sub);
  margin-top:3px
}
.class-time{
  font-size:12px;
  color:var(--text-sub);
  margin-top:2px
}
.class-details{
  font-size:11px;
  color:var(--text-sub);
  padding-left:4px;
  display:flex;
  flex-direction:column;
  gap:2px
}
.class-link{
  color:var(--apple-blue);
  text-decoration:none;
  word-break:break-all
}
.class-link:hover{text-decoration:underline}

/* ATTENDANCE */

.attendance-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin-top:4px
}
.att-btn{
  border:none;
  border-radius:var(--radius-sm);
  padding:6px 4px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  background:var(--bg-color);
  color:var(--text-main);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px
}
.att-btn:hover{filter:brightness(.95)}
.att-btn:active{transform:scale(.95)}

.status-attended{
  background:var(--success-green-bg);
  border-color:rgba(52,199,89,.4)
}
.status-missed{
  background:var(--error-red-bg);
  border-color:rgba(255,59,48,.4)
}
.status-watched{
  background:var(--purple-bg);
  border-color:rgba(175,82,222,.4)
}
.status-pending{
  background:var(--warning-orange-bg);
  border-color:rgba(255,149,0,.4)
}

.status-badge{
  font-size:11px;
  font-weight:600;
  padding:4px 8px;
  border-radius:var(--radius-sm);
  text-align:center;
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.status-attended .status-badge{
  color:#1e7e34;
  background:rgba(52,199,89,.15)
}

/* Fade completed/attended classes */
.class-card.status-attended{
  opacity:0.55;
}

.class-card.status-attended:hover{
  opacity:0.75;
}
.status-missed .status-badge{
  color:#c82333;
  background:rgba(255,59,48,.15)
}
.status-watched .status-badge{
  color:#6f42c1;
  background:rgba(175,82,222,.15)
}
.status-pending .status-badge{
  color:#d39e00;
  background:rgba(255,149,0,.15)
}
.reset-status-btn{
  background:transparent;
  border:none;
  cursor:pointer;
  color:var(--text-sub);
  font-size:10px;
  padding:2px 4px;
  border-radius:4px
}
.reset-status-btn:hover{background:rgba(0,0,0,.08)}

.mobile-tap-hint{display:none}

/* MOBILE VIEW SWITCHER */

.mobile-view-switcher{
  display:none;
}

/* SUBJECT STATISTICS */

.section-title{margin:32px 0 16px}
.subject-stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px
}
.subject-stat-card{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  padding:16px 20px;
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-subtle)
}
.subject-stat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px
}
.subject-tag{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600
}
.subject-color-dot{
  width:10px;height:10px;border-radius:50%
}
.progress-bar-bg{
  width:100%;
  height:8px;
  background:var(--bg-color);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:12px
}
.progress-bar-fill{
  height:100%;
  background:var(--apple-blue);
  border-radius:4px;
  transition:width .4s ease
}
.stat-details{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  font-size:12px;
  color:var(--text-sub)
}

/* =========================================================
   NAME / WELCOME MODAL
   ========================================================= */

.name-modal-box{
  max-width:420px;
}

.name-modal-box .modal-actions{
  justify-content:center;
}

.name-modal-box #save-user-name{
  width:100%;
}

@media(max-width:768px){
  .name-modal-box{
    max-width:calc(100% - 18px);
  }
}
   
/* MODAL */

.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;

  background:rgba(0,0,0,.3);
  backdrop-filter:blur(4px);

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:1000;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .32s ease,
    visibility 0s linear .42s;
}

.modal-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transition:
    opacity .32s ease,
    visibility 0s;
}

.modal{
  background:var(--card-bg);

  width:100%;
  max-width:480px;

  border-radius:var(--radius-lg);
  padding:24px;

  box-shadow:var(--shadow-modal);

  opacity:0;

  transform:
    translateY(12px)
    scale(.96);

  transition:
    opacity .28s ease,
    transform .42s cubic-bezier(.16,1,.3,1);

  max-height:90vh;
  overflow-y:auto;
}

.modal-overlay.active .modal{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px
}
.type-selector-group{
  display:flex;
  gap:10px;
  margin-bottom:18px
}
.type-radio-btn{
  flex:1;
  border:1px solid var(--border-color);
  padding:10px;
  border-radius:var(--radius-md);
  text-align:center;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  background:var(--bg-color);
  user-select:none;

  display:flex;
  align-items:center;
  justify-content:center;
}

.recurring-icon{
  width:16px;
  height:16px;
  fill:currentColor;
  flex:0 0 16px;
  margin-right:6px;
}

.recurring-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:currentColor;
  margin-right:6px;
}

.type-radio-btn.selected{
  border-color:var(--apple-blue);
  background:var(--apple-blue-bg);
  color:var(--apple-blue)
}.type-radio-btn{
  flex:1;
  border:1px solid var(--border-color);
  padding:10px;
  border-radius:var(--radius-md);
  text-align:center;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  background:var(--bg-color);
  user-select:none
}
.type-radio-btn.selected{
  border-color:var(--apple-blue);
  background:var(--apple-blue-bg);
  color:var(--apple-blue)
}
.form-group{margin-bottom:16px}
.form-group label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--text-sub);
  margin-bottom:6px;
  text-transform:uppercase
}
.form-control{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-color);
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color .2s
}
.form-control:focus{border-color:var(--apple-blue)}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
.color-picker-options{
  display:flex;
  gap:10px;
  margin-top:6px;
  flex-wrap:wrap
}
.color-option{
  width:28px;height:28px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .1s
}
.color-option:hover{transform:scale(1.1)}
.color-option.selected{border-color:var(--text-main)}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px
}

/* DROPDOWN */

.dropdown{position:relative}
/* =========================================================
   iOS-STYLE SETTINGS DROPDOWN
   ========================================================= */

.dropdown-menu{
  position:absolute;
  right:0;
  top:100%;

  background:rgba(255,255,255,0.48);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);

  border:1px solid rgba(255,255,255,0.65);
  border-radius:var(--radius-md);

  box-shadow:
    0 14px 35px rgba(0,0,0,0.14),
    0 3px 10px rgba(0,0,0,0.07);

  padding:6px;

  display:flex;
  flex-direction:column;
  min-width:140px;
  z-index:100;

  overflow:hidden;

  /* Hidden state */
  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:
    translateY(-8px)
    scale(0.94);

  transform-origin:top right;

  filter:blur(2px);

  transition:
    opacity 0.20s ease,
    transform 0.34s cubic-bezier(.16,1,.3,1),
    filter 0.28s ease,
    visibility 0s linear 0.34s;
}

/* OPEN */
.dropdown-menu.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:
    translateY(0)
    scale(1);

  filter:blur(0);

  transition:
    opacity 0.24s ease,
    transform 0.38s cubic-bezier(.16,1,.3,1),
    filter 0.32s ease,
    visibility 0s;
}
.dropdown-menu .dropdown-item{
  opacity:0;
  transform:translateY(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.28s cubic-bezier(.16,1,.3,1);
}

.dropdown-menu.show .dropdown-item{
  opacity:1;
  transform:translateY(0);
}

.dropdown-menu.show .dropdown-item:nth-child(1){
  transition-delay:0.02s;
}

.dropdown-menu.show .dropdown-item:nth-child(2){
  transition-delay:0.04s;
}

.dropdown-menu.show .dropdown-item:nth-child(3){
  transition-delay:0.06s;
}

.dropdown-menu.show .dropdown-item:nth-child(4){
  transition-delay:0.08s;
}

.dropdown-menu.show .dropdown-item:nth-child(5){
  transition-delay:0.10s;
}

.dropdown-menu.show .dropdown-item:nth-child(6){
  transition-delay:0.12s;
}

.dropdown-menu.show .dropdown-item:nth-child(7){
  transition-delay:0.14s;
}

.dropdown-menu.show .dropdown-item:nth-child(8){
  transition-delay:0.16s;
}
.dropdown-menu.show{display:flex}
.dropdown-item{
  padding:8px 12px;
  font-size:13px;
  border:none;
  background:none;
  text-align:left;
  cursor:pointer;
  border-radius:var(--radius-sm);
  color:var(--text-main)
}
.dropdown-item:hover{background:var(--bg-color)}
.dropdown-item.danger{color:var(--error-red)}
.settings-arrow{
  display:inline-block;
  margin-left:5px;
  font-size:11px;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}

.dropdown.open .settings-arrow{
  transform:rotate(180deg);
}
.desktop-class-time{display:block}
.mobile-class-time{display:none}

/* DESKTOP / MOBILE NAV BUTTONS */

#reset-btn{
  display:none;
}

#today-btn{
  display:inline-flex;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){
  body{
    padding:10px;
    max-width:100%
  }

  h1{font-size:25px}

  header{
    flex-direction:column;
    margin-bottom:16px;
    gap:12px
  }

  .header-actions{
    width:100%;
    justify-content:space-between
  }

  .header-actions .btn{
    padding:9px 12px;
    font-size:12px
  }

  /* DASHBOARD */

  .dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-bottom:14px
  }

  .dash-card{
    padding:12px;
    min-width:0;
    border-radius:15px
  }

  .dash-info{min-width:0}
  .dash-info .num{font-size:22px}
  .dash-card p{
    font-size:10px;
    white-space:nowrap
  }

  .circular-progress{
    width:40px;
    height:40px;
    flex-shrink:0
  }
  .percentage-text{font-size:9px}

  /* WEEK NAV */

  .week-nav{
    padding:10px;
    margin-bottom:10px;
    border-radius:15px;
    gap:8px
  }

  .week-nav-controls{
    width:100%;
    justify-content:space-between;
    gap:5px
  }

  .week-nav-controls .btn{
    flex:1;
    padding:7px 5px;
    font-size:11px
  }

  .current-week-display{
    width:100%;
    text-align:center;
    font-size:13px;
    order:-1
  }

  .calendar-legend{display:none}

  /* MOBILE NAV BUTTON VISIBILITY */

  #today-btn{
    display:none;
  }

  #reset-btn{
    display:inline-flex;
  }

  /* =====================================================
     TODAY / WEEKLY SWITCHER
     ===================================================== */

  .mobile-view-switcher{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    background:#E8E8ED;
    padding:4px;
    border-radius:13px;
    margin-bottom:10px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
    position:relative
  }

  .mobile-view-btn{
    border:none;
    background:transparent;
    color:var(--text-sub);
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    padding:9px 8px;
    border-radius:10px;
    cursor:pointer;
    transition:
      background .28s ease,
      color .28s ease,
      box-shadow .28s ease,
      transform .2s ease
  }

  .mobile-view-btn.active{
    background:#fff;
    color:var(--text-main);
    box-shadow:0 2px 7px rgba(0,0,0,.10)
  }

  .mobile-view-btn:active{
    transform:scale(.97)
  }

  /* =====================================================
     CALENDAR
     ===================================================== */

  .calendar-container{
    overflow:hidden;
    width:100%;
    padding-bottom:0
  }

  .calendar-grid{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:3px;
    transform-origin:center top
  }

  .calendar-grid.view-changing{
    animation:calendarViewChange .38s cubic-bezier(.22,.61,.36,1)
  }

  @keyframes calendarViewChange{
    0%{
      opacity:.25;
      transform:scale(.96) translateY(5px)
    }
    55%{
      opacity:.75;
      transform:scale(1.015) translateY(-1px)
    }
    100%{
      opacity:1;
      transform:scale(1) translateY(0)
    }
  }

  /* WEEKLY COLUMNS */

  .day-column{
    min-width:0;
    width:100%;
    min-height:270px;
    padding:4px;
    border-radius:11px;
    overflow:visible;
    transition:
      width .38s cubic-bezier(.22,.61,.36,1),
      min-height .38s ease,
      padding .38s ease,
      border-radius .38s ease,
      transform .38s ease,
      opacity .28s ease
  }

  .day-column.today{
    box-shadow:0 0 0 1px var(--apple-blue)
  }

  .day-header{
    padding-bottom:5px;
    margin-bottom:5px
  }

  .day-name{
    font-size:8px;
    letter-spacing:0;
    white-space:nowrap;
    overflow:hidden
  }

  .day-date{
    font-size:10px;
    margin-top:1px
  }

  .classes-list{
    gap:4px
  }

  /* MOBILE CLASS BLOCK */

  .class-card{
    padding:6px 4px 5px 6px;
    border-radius:8px;
    gap:3px;
    cursor:pointer;
    min-width:0;
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      padding .38s ease,
      border-radius .38s ease,
      box-shadow .38s ease,
      opacity .28s ease
  }

  .class-card:hover{
    transform:none;
    box-shadow:var(--shadow-subtle)
  }

  .color-bar{width:3px}

  .class-card-header{
    padding-left:1px;
    min-width:0
  }

  .class-title{
    font-size:9px;
    line-height:1.1;
    word-break:break-word;
    overflow-wrap:anywhere
  }

  .type-tag{
    font-size:6px;
    padding:1px 3px;
    margin-top:2px;
    gap:1px;
    white-space:nowrap
  }

  .desktop-class-time{display:none}

  .mobile-class-time{
    display:block;
    font-size:7px;
    line-height:1.15;
    white-space:nowrap
  }

  .class-details,
  .class-card .card-menu-btn,
  .class-card .attendance-actions,
  .class-card .status-badge,
  .class-card .reset-status-btn{
    display:none
  }

  .empty-day{
    font-size:7px;
    min-height:80px;
    text-align:center
  }

  .empty-day svg{
    width:12px;
    height:12px;
    margin-bottom:2px!important
  }

  /* =====================================================
     TODAY MODE
     ===================================================== */

  .calendar-grid.today-mode{
    display:block;
    min-width:0;
    width:100%
  }

  .calendar-grid.today-mode .day-column{
    display:none
  }

  .calendar-grid.today-mode .day-column.today{
    display:flex;
    width:100%;
    min-height:300px;
    padding:12px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 0 0 1px var(--apple-blue),
    0 8px 24px rgba(0,122,255,.08)
  }

  .calendar-grid.today-mode .day-column.today .day-header{
    padding-bottom:12px;
    margin-bottom:12px
  }

  .calendar-grid.today-mode .day-column.today .day-name{
    font-size:12px;
    letter-spacing:.5px
  }

  .calendar-grid.today-mode .day-column.today .day-date{
    font-size:20px;
    margin-top:3px
  }

  .calendar-grid.today-mode .day-column.today .classes-list{
    gap:10px
  }

  /* EXPANDED TODAY CARDS */

  .calendar-grid.today-mode .class-card{
    padding:14px 14px 13px 18px;
    border-radius:14px;
    gap:6px;
    box-shadow:0 3px 12px rgba(0,0,0,.05);
    cursor:pointer
  }

  .calendar-grid.today-mode .color-bar{
    width:4px
  }

  .calendar-grid.today-mode .class-card-header{
    padding-left:0
  }

  .calendar-grid.today-mode .class-title{
    font-size:16px;
    line-height:1.2
  }

  .calendar-grid.today-mode .type-tag{
    font-size:10px;
    padding:3px 7px;
    margin-top:5px
  }

  .calendar-grid.today-mode .mobile-class-time{
    font-size:13px;
    font-weight:500;
    margin-top:3px
  }

  /* SHOW FULL DETAILS IN TODAY MODE */

  .calendar-grid.today-mode .class-details{
    display:flex;
    font-size:12px;
    gap:4px;
    padding-left:0;
    margin-top:3px
  }

  .calendar-grid.today-mode .class-card .status-badge{
    display:flex
  }

  .calendar-grid.today-mode .class-card .attendance-actions{
    display:grid
  }

  .calendar-grid.today-mode .class-card .card-menu-btn{
    display:none
  }

  .calendar-grid.today-mode .class-card .reset-status-btn{
    display:block
  }

  .calendar-grid.today-mode .empty-day{
    font-size:12px;
    min-height:180px
  }

  .mobile-tap-hint{
    display:block;
    text-align:center;
    color:var(--text-sub);
    font-size:10px;
    margin:8px 0 0
  }

  /* SUBJECT STATS */

  .section-title{
    margin:22px 0 12px;
    font-size:19px
  }

  .subject-stats-grid{
    grid-template-columns:1fr;
    gap:8px
  }

  .subject-stat-card{
    padding:13px;
    border-radius:15px
  }

  /* MODAL */

  .modal{
    max-width:calc(100% - 18px);
    padding:18px;
    border-radius:18px;
    max-height:92vh
  }

  .form-row{
    flex-direction:column;
    gap:0
  }
}

/* =========================================================
   MOBILE ATTENDANCE / CLASS DETAIL SHEET
   ========================================================= */

.mobile-class-overlay{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.32);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);

  z-index:2000;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .32s ease,
    visibility 0s linear .46s;

  display:flex;

  align-items:flex-end;

  justify-content:center;
}

.mobile-class-overlay.active{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transition:
    opacity .32s ease,
    visibility 0s;
}

.mobile-class-sheet{

  width:100%;

  max-width:560px;

  background:#fff;

  border-radius:22px 22px 0 0;

  padding:18px;

  opacity:0;

  transform:
    translateY(100%)
    scale(.98);

  transform-origin:bottom center;

  transition:
    transform .48s cubic-bezier(.16,1,.3,1),
    opacity .30s ease;

  box-shadow:
    0 -10px 40px rgba(0,0,0,.15);
}

.mobile-class-overlay.active .mobile-class-sheet{

  opacity:1;

  transform:
    translateY(0)
    scale(1);
}

.mobile-sheet-handle{
  width:38px;
  height:4px;
  border-radius:10px;
  background:#D2D2D7;
  margin:0 auto 16px
}

.mobile-sheet-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px
}

.mobile-sheet-subject{
  font-size:20px;
  font-weight:700;
  line-height:1.2
}

.mobile-sheet-time{
  font-size:13px;
  color:var(--text-sub);
  margin-top:4px
}

.mobile-sheet-details{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:var(--text-sub);
  padding:12px;
  background:var(--bg-color);
  border-radius:12px;
  margin-bottom:14px
}

.mobile-sheet-label{
  font-size:12px;
  color:var(--text-sub);
  font-weight:600;
  margin-bottom:8px
}

.mobile-sheet-attendance{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.mobile-sheet-att-btn{
  min-height:48px;
  border:none;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:var(--bg-color);
  color:var(--text-main);
  transition:var(--transition)
}

.mobile-sheet-att-btn:active{transform:scale(.97)}

.mobile-sheet-att-btn.attended{
  background:var(--success-green-bg);
  color:#1e7e34
}

.mobile-sheet-att-btn.missed{
  background:var(--error-red-bg);
  color:#c82333
}

.mobile-sheet-att-btn.watched{
  background:var(--purple-bg);
  color:#6f42c1
}

.mobile-sheet-att-btn.pending{
  background:var(--warning-orange-bg);
  color:#b47700
}

.mobile-sheet-bottom{
  display:flex;
  gap:8px;
  margin-top:14px
}

.mobile-sheet-bottom .btn{flex:1}

@media(min-width:769px){
  .mobile-class-overlay{
    display:none!important
  }
  .mobile-tap-hint{
    display:none!important
  }
}

@media(max-width:768px){
  .header-actions{
    position:static;
  }

  .header-actions .dropdown{
    position:static;
  }

  #settings-menu{
    position:fixed !important;
    top:calc(60px + 4px);
    right:10px !important;
    left:auto !important;
    width:190px;
    max-width:calc(100vw - 20px);
    box-sizing:border-box;
    z-index:9999;
    transform-origin:top right;
  }

  #settings-menu .dropdown-item{
    display:flex;
    align-items:center;
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    white-space:nowrap;
    overflow:visible;
    color:var(--text-main);
  }

  #settings-menu .dropdown-item.danger{
    color:var(--error-red);
  }
}


/* =========================================================
   PERSISTENT DEVICE SYNC
   ========================================================= */

.sync-modal{
  max-width:460px;
  overflow:hidden;
}

.sync-screen{
  display:none;
  text-align:center;
  animation:syncScreenIn .35s cubic-bezier(.2,.8,.2,1);
}

.sync-screen.active{
  display:block;
}

@keyframes syncScreenIn{
  from{
    opacity:0;
    transform:translateY(12px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Main sync icon */

.sync-icon{
  width:72px;
  height:72px;
  margin:5px auto 18px;
  border-radius:22px;
  background:var(--apple-blue-bg);
  color:var(--apple-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  animation:syncIconAppear .5s cubic-bezier(.2,.8,.2,1);
}

@keyframes syncIconAppear{
  0%{
    opacity:0;
    transform:scale(.7) rotate(-8deg);
  }
  70%{
    transform:scale(1.06) rotate(2deg);
  }
  100%{
    opacity:1;
    transform:scale(1) rotate(0);
  }
}

/* Device connection card */

.sync-status-card{
  margin:22px 0 16px;
  padding:16px;
  border:1px solid var(--border-light);
  background:var(--bg-color);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.sync-device{
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  min-width:0;
  flex:1;
}

.sync-device-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.sync-device strong{
  display:block;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}

.sync-device span:not(.sync-device-icon){
  display:block;
  font-size:10px;
  color:var(--text-sub);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90px;
}

.sync-connection-line{
  width:30px;
  height:2px;
  background:var(--border-color);
  position:relative;
  flex-shrink:0;
}

.sync-connection-line::before,
.sync-connection-line::after{
  content:"";
  position:absolute;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--border-color);
  transform:translateY(-50%);
}

.sync-connection-line::before{
  left:-1px;
}

.sync-connection-line::after{
  right:-1px;
}

#sync-status-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--text-sub);
  transform:translate(-50%,-50%);
  z-index:2;
}

/* Connected state */

.sync-screen.connected .sync-connection-line{
  background:var(--success-green);
}

.sync-screen.connected #sync-status-dot{
  background:var(--success-green);
  box-shadow:0 0 8px rgba(52,199,89,.6);
}

/* Status message */

.sync-status-message{
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:12px;
  background:var(--bg-color);
  color:var(--text-sub);
  font-size:11px;
  line-height:1.4;
  margin-bottom:18px;
}

/* Buttons */

.sync-actions{
  margin-top:18px;
}

/* QR pairing screen */

#sync-qr-screen .qr-code-wrapper{
  margin-top:18px;
}

#sync-qr-status{
  margin-bottom:8px;
}

/* Live sync indicator */

.sync-live-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 12px;
  border-radius:20px;
  background:var(--success-green-bg);
  color:#1e7e34;
  font-size:11px;
  font-weight:600;
  margin-bottom:4px;
}

.sync-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--success-green);
  box-shadow:0 0 7px rgba(52,199,89,.7);
  animation:syncLivePulse 1.8s ease-in-out infinite;
}

@keyframes syncLivePulse{
  0%,100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.35;
    transform:scale(.7);
  }
}

/* Pairing button loading state */

#sync-pair-btn.sync-loading{
  pointer-events:none;
  opacity:.7;
}

#sync-pair-btn.sync-loading::before{
  content:"";
  width:13px;
  height:13px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:syncSpinner .7s linear infinite;
}

@keyframes syncSpinner{
  to{
    transform:rotate(360deg);
  }
}

/* Mobile */

@media(max-width:768px){

  .sync-modal{
    max-width:calc(100% - 18px);
  }

  .sync-status-card{
    padding:13px;
    gap:5px;
  }

  .sync-device-icon{
    width:36px;
    height:36px;
    border-radius:11px;
    font-size:18px;
  }

  .sync-device strong{
    font-size:10px;
  }

  .sync-device span:not(.sync-device-icon){
    font-size:9px;
    max-width:72px;
  }

  .sync-connection-line{
    width:22px;
  }

  .sync-icon{
    width:64px;
    height:64px;
    border-radius:19px;
    font-size:30px;
  }
}

/* =========================================================
   PRESENNT AUTH MODAL
   ========================================================= */

.auth-screen{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:rgba(15,15,18,.42);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.auth-screen.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* =========================================================
   AUTH CARD
   ========================================================= */

.auth-card{
  position:relative;

  width:min(420px,100%);

  padding:34px 32px 30px;

  background:rgba(255,255,255,.97);

  border:1px solid rgba(255,255,255,.8);

  border-radius:24px;

  box-shadow:
    0 25px 80px rgba(0,0,0,.18),
    0 8px 30px rgba(0,0,0,.08);

  text-align:center;

  transform:
    translateY(14px)
    scale(.94);

  opacity:0;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease;
}

.auth-screen.active .auth-card{
  transform:
    translateY(0)
    scale(1);

  opacity:1;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.auth-close-btn{
  position:absolute;

  top:14px;
  right:14px;

  width:32px;
  height:32px;

  border:none;
  border-radius:50%;

  background:#F2F2F7;

  color:#6E6E73;

  font-size:22px;
  line-height:1;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:
    background .2s ease,
    transform .2s ease,
    color .2s ease;
}

.auth-close-btn:hover{
  background:#E5E5EA;
  color:#1D1D1F;
}

.auth-close-btn:active{
  transform:scale(.9);
}


/* =========================================================
   PRESENNT LOGO
   ========================================================= */

.auth-logo{
  width:58px;
  height:58px;

  margin:0 auto 16px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:17px;

  background:#212529;
  color:#fff;

  font-size:26px;
  font-weight:800;

  letter-spacing:-1px;

  box-shadow:
    0 8px 20px rgba(33,37,41,.18);

  animation:authLogoAppear .45s cubic-bezier(.2,.8,.2,1);
}

@keyframes authLogoAppear{
  from{
    opacity:0;
    transform:scale(.7) rotate(-5deg);
  }

  to{
    opacity:1;
    transform:scale(1) rotate(0);
  }
}


/* =========================================================
   AUTH TITLE
   ========================================================= */

.auth-card h2{
  margin:0 0 6px;

  font-size:25px;
  font-weight:750;

  letter-spacing:-.5px;

  color:var(--text-main);
}

.auth-card > p{
  margin:0 0 22px;

  font-size:13px;

  color:var(--text-sub);
}


/* =========================================================
   AUTH FIELDS
   ========================================================= */

.auth-fields{
  display:flex;
  flex-direction:column;
  gap:10px;

  margin-bottom:12px;
}

.auth-card input{
  width:100%;
  box-sizing:border-box;

  padding:13px 14px;

  border:1px solid var(--border-color);
  border-radius:12px;

  background:#fff;

  color:var(--text-main);

  font-family:inherit;
  font-size:14px;

  outline:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.auth-card input::placeholder{
  color:#A1A1A6;
}

.auth-card input:focus{
  border-color:var(--apple-blue);

  box-shadow:
    0 0 0 3px var(--apple-blue-bg);
}


/* =========================================================
   MAIN AUTH BUTTON
   ========================================================= */

.auth-main-btn{
  width:100%;

  padding:13px 16px;

  border:none;
  border-radius:12px;

  background:#212529;
  color:#fff;

  font-family:inherit;

  font-size:14px;
  font-weight:650;

  cursor:pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;

  box-shadow:
    0 5px 14px rgba(33,37,41,.14);
}

.auth-main-btn:hover{
  background:#343a40;

  box-shadow:
    0 7px 20px rgba(33,37,41,.18);

  transform:translateY(-1px);
}

.auth-main-btn:active{
  transform:scale(.98);
}

.auth-main-btn:disabled{
  opacity:.65;
  cursor:default;
  transform:none;
}


/* =========================================================
   AUTH LOADING
   ========================================================= */

.auth-main-btn.loading{
  position:relative;

  color:transparent;
}

.auth-main-btn.loading::after{
  content:"";

  position:absolute;

  width:16px;
  height:16px;

  top:50%;
  left:50%;

  margin:
    -8px 0 0 -8px;

  border:2px solid rgba(255,255,255,.35);

  border-top-color:#fff;

  border-radius:50%;

  animation:authSpinner .7s linear infinite;
}

@keyframes authSpinner{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================================
   SECONDARY AUTH BUTTON
   ========================================================= */

.auth-secondary-btn{
  width:100%;

  margin-top:9px;

  padding:11px 14px;

  border:1px solid var(--border-light);
  border-radius:12px;

  background:#F5F5F7;

  color:var(--text-main);

  font-family:inherit;

  font-size:13px;
  font-weight:600;

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.auth-secondary-btn:hover{
  background:#EDEDF2;
  border-color:#D2D2D7;
}

.auth-secondary-btn:active{
  transform:scale(.98);
}


/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

.auth-link-btn{
  margin-top:13px;

  padding:4px;

  border:none;

  background:none;

  color:var(--text-sub);

  font-family:inherit;

  font-size:12px;

  cursor:pointer;

  transition:
    color .2s ease;
}

.auth-link-btn:hover{
  color:var(--apple-blue);
}


/* =========================================================
   AUTH MESSAGE
   ========================================================= */

#auth-message{
  min-height:20px;

  margin:13px 0 0;

  font-size:12px;

  line-height:1.4;

  transition:
    color .2s ease,
    opacity .2s ease;
}

#auth-message.success{
  color:#1e7e34;
}

#auth-message.error{
  color:var(--error-red);
}


/* =========================================================
   SIGN IN HEADER BUTTON
   ========================================================= */

.auth-open-btn{
  position:relative;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.auth-open-btn.signed-in{
  background:#F2F2F7;

  border-color:var(--border-light);

  color:var(--text-main);
}

.auth-open-btn.signed-in:hover{
  background:#E8E8ED;
}


/* =========================================================
   PREVENT BACKGROUND SCROLL WHILE AUTH IS OPEN
   ========================================================= */

body.auth-modal-open{
  overflow:hidden;
}


/* =========================================================
   MOBILE AUTH
   ========================================================= */

@media(max-width:768px){

  .auth-screen{
    padding:14px;
  }

  .auth-card{
    width:100%;

    padding:
      30px
      20px
      24px;

    border-radius:21px;
  }

  .auth-logo{
    width:52px;
    height:52px;

    border-radius:15px;

    font-size:23px;

    margin-bottom:14px;
  }

  .auth-card h2{
    font-size:23px;
  }

  .auth-card > p{
    font-size:12px;
  }

  .auth-close-btn{
    top:11px;
    right:11px;
  }

}
/* =========================================================
   PRESENNT — PREMIUM SIGN OUT ANIMATION
   ========================================================= */

.signout-overlay{
  position:fixed;
  inset:0;
  z-index:100000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:rgba(15,15,18,.48);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.signout-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* ---------------------------------------------------------
   MAIN BOX
   --------------------------------------------------------- */

.signout-box{
  width:min(390px,100%);

  padding:34px 28px 29px;

  background:rgba(255,255,255,.97);

  border:1px solid rgba(255,255,255,.9);

  border-radius:26px;

  text-align:center;

  box-shadow:
    0 30px 90px rgba(0,0,0,.22),
    0 10px 35px rgba(0,0,0,.10);

  transform:
    translateY(22px)
    scale(.88);

  opacity:0;

  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    opacity .35s ease;
}

.signout-overlay.active .signout-box{
  transform:
    translateY(0)
    scale(1);

  opacity:1;
}


/* ---------------------------------------------------------
   ANIMATION AREA
   --------------------------------------------------------- */

.signout-animation{
  position:relative;

  width:92px;
  height:92px;

  margin:0 auto 20px;

  display:flex;
  align-items:center;
  justify-content:center;
}


/* Outer expanding rings */

.signout-animation::before,
.signout-animation::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:74px;
  height:74px;

  border-radius:50%;

  border:1px solid rgba(33,37,41,.16);

  transform:
    translate(-50%,-50%)
    scale(.55);

  opacity:0;
}

.signout-overlay.active
.signout-animation::before{

  animation:
    signoutRing 1.5s ease-out .05s infinite;
}

.signout-overlay.active
.signout-animation::after{

  animation:
    signoutRing 1.5s ease-out .55s infinite;
}


/* ---------------------------------------------------------
   ICON CIRCLE
   --------------------------------------------------------- */

.signout-icon-wrap{
  position:relative;

  width:76px;
  height:76px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#F2F2F7;

  box-shadow:
    0 8px 25px rgba(0,0,0,.08);

  transform:scale(.5);
  opacity:0;
}

.signout-overlay.active
.signout-icon-wrap{

  animation:
    signoutIconPop
    .65s
    cubic-bezier(.16,1,.3,1)
    .08s
    forwards;
}


/* ---------------------------------------------------------
   SVG
   --------------------------------------------------------- */

.signout-svg{
  width:58px;
  height:58px;

  overflow:visible;
}


/* Circle */

.signout-circle{
  fill:none;

  stroke:#212529;

  stroke-width:3;

  stroke-linecap:round;

  stroke-dasharray:195;

  stroke-dashoffset:195;

  transform-origin:center;

  transform:rotate(-90deg);
}

.signout-overlay.active
.signout-circle{

  animation:
    signoutCircleDraw
    .65s
    cubic-bezier(.65,0,.35,1)
    .25s
    forwards;
}


/* Arrow */

.signout-arrow{
  fill:none;

  stroke:#212529;

  stroke-width:3.5;

  stroke-linecap:round;
  stroke-linejoin:round;

  stroke-dasharray:70;

  stroke-dashoffset:70;
}

.signout-overlay.active
.signout-arrow{

  animation:
    signoutArrowDraw
    .42s
    cubic-bezier(.65,0,.35,1)
    .72s
    forwards;
}


/* ---------------------------------------------------------
   SUCCESS STATE
   --------------------------------------------------------- */

.signout-overlay.success
.signout-icon-wrap{

  background:var(--success-green-bg);

  box-shadow:
    0 8px 28px rgba(52,199,89,.18);

  animation:
    signoutSuccessPop
    .55s
    cubic-bezier(.16,1,.3,1);
}

.signout-overlay.success
.signout-circle,

.signout-overlay.success
.signout-arrow{

  stroke:var(--success-green);
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.signout-box h2{
  margin:0 0 7px;

  font-size:21px;
  font-weight:700;

  color:var(--text-main);

  transform:translateY(8px);

  opacity:0;
}

.signout-overlay.active
.signout-box h2{

  animation:
    signoutTextIn
    .45s
    ease
    .65s
    forwards;
}


.signout-box p{
  margin:0 auto;

  max-width:300px;

  font-size:12px;

  line-height:1.5;

  color:var(--text-sub);

  transform:translateY(7px);

  opacity:0;
}

.signout-overlay.active
.signout-box p{

  animation:
    signoutTextIn
    .45s
    ease
    .75s
    forwards;
}


/* ---------------------------------------------------------
   PROGRESS BAR
   --------------------------------------------------------- */

.signout-progress{
  width:100%;

  height:4px;

  margin-top:23px;

  background:#E5E5EA;

  border-radius:10px;

  overflow:hidden;

  opacity:0;
}

.signout-overlay.active
.signout-progress{

  animation:
    signoutProgressFade
    .3s
    ease
    .85s
    forwards;
}

.signout-progress span{

  display:block;

  width:0%;

  height:100%;

  background:#212529;

  border-radius:10px;

  transform-origin:left;
}

.signout-overlay.active
.signout-progress span{

  animation:
    signoutProgress
    1.15s
    cubic-bezier(.4,0,.2,1)
    .9s
    forwards;
}


/* Success progress */

.signout-overlay.success
.signout-progress span{

  background:var(--success-green);
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes signoutIconPop{

  0%{
    opacity:0;
    transform:scale(.45) rotate(-12deg);
  }

  55%{
    opacity:1;
    transform:scale(1.12) rotate(3deg);
  }

  78%{
    transform:scale(.96) rotate(-1deg);
  }

  100%{
    opacity:1;
    transform:scale(1) rotate(0);
  }
}


@keyframes signoutCircleDraw{

  0%{
    stroke-dashoffset:195;
  }

  100%{
    stroke-dashoffset:0;
  }
}


@keyframes signoutArrowDraw{

  0%{
    stroke-dashoffset:70;
  }

  100%{
    stroke-dashoffset:0;
  }
}


@keyframes signoutRing{

  0%{
    opacity:.45;

    transform:
      translate(-50%,-50%)
      scale(.55);
  }

  70%{
    opacity:.12;
  }

  100%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(1.25);
  }
}


@keyframes signoutTextIn{

  from{
    opacity:0;
    transform:translateY(8px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


@keyframes signoutProgressFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}


@keyframes signoutProgress{

  0%{
    width:0%;
  }

  65%{
    width:72%;
  }

  100%{
    width:100%;
  }
}


@keyframes signoutSuccessPop{

  0%{
    transform:scale(1);
  }

  45%{
    transform:scale(1.12);
  }

  75%{
    transform:scale(.96);
  }

  100%{
    transform:scale(1);
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:768px){

  .signout-overlay{
    padding:14px;
  }

  .signout-box{
    width:100%;

    padding:
      30px
      22px
      25px;

    border-radius:22px;
  }

  .signout-animation{
    width:84px;
    height:84px;
  }

  .signout-icon-wrap{
    width:70px;
    height:70px;
  }

  .signout-svg{
    width:53px;
    height:53px;
  }

  .signout-box h2{
    font-size:19px;
  }

}
/* =========================================================
   PRESENNT — SIGN IN CARD LOADING
   ========================================================= */

.auth-card{
  position:relative;
}


/* ---------------------------------------------------------
   TRANSLUCENT WHITE LOADING LAYER
   --------------------------------------------------------- */

.signin-loading{
  position:absolute;
  inset:0;

  z-index:100;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:25px;

  border-radius:inherit;

  background:rgba(255,255,255,.78);

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .22s ease,
    visibility .22s ease;
}


/* ACTIVE */

.signin-loading.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* ---------------------------------------------------------
   LOADING CONTENT
   --------------------------------------------------------- */

.signin-loading-content{
  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;

  opacity:0;
  transform:translateY(8px) scale(.94);

  transition:
    opacity .3s ease,
    transform .4s cubic-bezier(.16,1,.3,1);
}

.signin-loading.active .signin-loading-content{
  opacity:1;
  transform:translateY(0) scale(1);
}


/* ---------------------------------------------------------
   SPINNER
   --------------------------------------------------------- */

.signin-loader{
  width:52px;
  height:52px;

  margin-bottom:14px;
}

.signin-loader svg{
  width:100%;
  height:100%;

  display:block;

  transform:rotate(-90deg);
}


/* Spinner track */

.signin-loader-track{
  fill:none;

  stroke:#E5E5EA;

  stroke-width:4;
}


/* Animated spinner */

.signin-loader-spinner{
  fill:none;

  stroke:#212529;

  stroke-width:4;

  stroke-linecap:round;

  stroke-dasharray:70 125;

  transform-origin:25px 25px;

  animation:
    signinLoaderSpin
    .85s
    linear
    infinite;
}

@keyframes signinLoaderSpin{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.signin-loading-title{
  font-size:18px;

  font-weight:700;

  color:var(--text-main);

  margin-bottom:5px;
}

.signin-loading-text{
  max-width:240px;

  font-size:12px;

  line-height:1.5;

  color:var(--text-sub);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:768px){

  .signin-loading{
    padding:20px;
  }

  .signin-loader{
    width:46px;
    height:46px;

    margin-bottom:12px;
  }

  .signin-loading-title{
    font-size:17px;
  }

}
/* =========================================================
   🌸 PRESENNT — SAKURA THEME
   ========================================================= */

:root {
  --sakura-bg: #fff7f9;
  --sakura-card: #ffffff;
  --sakura-card-soft: #FFF0F6;
  --sakura-primary: #f46299;
  --sakura-primary-dark: #F46299;
  --sakura-primary-soft: #FFE0EB;

  --sakura-text: #30282b;
  --sakura-text-sub: #786c70;
  --sakura-border: #F8C7D9;

  --sakura-success: #82a889;
  --sakura-error: #d97f8c;

  --sakura-shadow: 0 8px 30px rgba(180, 105, 125, 0.10);
}

/* Main theme */
[data-theme="sakura"] {
  --bg-main: var(--sakura-bg);
  --bg-card: var(--sakura-card);

  --text-main: var(--sakura-text);
  --text-sub: var(--sakura-text-sub);

  --primary: var(--sakura-primary);
  --primary-dark: var(--sakura-primary-dark);

  --border: var(--sakura-border);

  --success-green: var(--sakura-success);
  --error-red: var(--sakura-error);
}


/* =========================================================
   BACKGROUND
   ========================================================= */

[data-theme="sakura"] body {
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(244, 98, 153, 0.11),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(244, 98, 153, 0.07),
      transparent 30%
    ),
    var(--sakura-bg);

  color: var(--sakura-text);
}


/* =========================================================
   CARDS
   ========================================================= */

[data-theme="sakura"] .dash-card,
[data-theme="sakura"] .modal,
[data-theme="sakura"] .mobile-class-sheet {
  background: var(--sakura-card);
  border-color: var(--sakura-border);
  box-shadow: var(--sakura-shadow);
}


/* =========================================================
   BUTTONS
   ========================================================= */

[data-theme="sakura"] .btn {
  background: var(--sakura-card);
  color: var(--sakura-text);
  border-color: var(--sakura-border);
}

[data-theme="sakura"] .btn:hover {
  background: var(--sakura-card-soft);
  border-color: var(--sakura-primary);
}

[data-theme="sakura"] .btn-primary {
  background: var(--sakura-primary);
  border-color: var(--sakura-primary);
  color: #ffffff;
}

[data-theme="sakura"] .btn-primary:hover {
  background: var(--sakura-primary-dark);
  border-color: var(--sakura-primary-dark);
}


/* =========================================================
   INPUTS
   ========================================================= */

[data-theme="sakura"] .form-control,
[data-theme="sakura"] input,
[data-theme="sakura"] select {
  background: #fffafb;
  color: var(--sakura-text);
  border-color: var(--sakura-border);
}

[data-theme="sakura"] .form-control:focus,
[data-theme="sakura"] input:focus,
[data-theme="sakura"] select:focus {
  border-color: var(--sakura-primary);
  box-shadow: 0 0 0 3px rgba(244, 98, 153, 0.14);
}


/* =========================================================
   DROPDOWN
   ========================================================= */

[data-theme="sakura"] .dropdown-menu {
  background:rgba(255,248,250,0.48);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);

  border-color:rgba(255,255,255,0.65);

  box-shadow:
    0 14px 35px rgba(120,60,80,0.14),
    0 3px 10px rgba(120,60,80,0.07);
}

[data-theme="sakura"] .dropdown-item {
  color: var(--sakura-text);
}

[data-theme="sakura"] .dropdown-item:hover {
  background: var(--sakura-card-soft);
}

[data-theme="coffee"] .dropdown-menu {
  background:rgba(248,242,235,0.50);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);

  border-color:rgba(255,255,255,0.55);

  box-shadow:
    0 14px 35px rgba(70,45,25,0.14),
    0 3px 10px rgba(70,45,25,0.07);
}
/* =========================================================
   WEEK NAVIGATION
   ========================================================= */

[data-theme="sakura"] .week-nav {
  background: var(--sakura-card);
  border-color: var(--sakura-border);
}

[data-theme="sakura"] .current-week-display {
  color: var(--sakura-primary-dark);
}


/* =========================================================
   CALENDAR
   ========================================================= */

[data-theme="sakura"] .calendar-container,
[data-theme="sakura"] .calendar-grid {
  border-color: var(--sakura-border);
}

[data-theme="sakura"] .calendar-grid {
  background: var(--sakura-border);
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

[data-theme="sakura"] .section-title {
  color: var(--sakura-text);
}


/* =========================================================
   MODAL HEADERS
   ========================================================= */

[data-theme="sakura"] .modal-header {
  border-color: var(--sakura-border);
}

[data-theme="sakura"] .modal-header h2 {
  color: var(--sakura-text);
}


/* =========================================================
   ICON BUTTONS
   ========================================================= */

[data-theme="sakura"] .btn-icon {
  color: var(--sakura-text-sub);
}

[data-theme="sakura"] .btn-icon:hover {
  background: var(--sakura-card-soft);
  color: var(--sakura-primary-dark);
}


/* =========================================================
   MOBILE SWITCHER
   ========================================================= */

[data-theme="sakura"] .mobile-view-switcher {
  background: var(--sakura-card-soft);
}

[data-theme="sakura"] .mobile-view-btn {
  color: var(--sakura-text-sub);
}

[data-theme="sakura"] .mobile-view-btn.active {
  background: var(--sakura-card);
  color: var(--sakura-primary-dark);
}


/* =========================================================
   ATTENDANCE COLORS
   ========================================================= */

[data-theme="sakura"] .attended {
  background: rgba(130, 168, 137, 0.12);
  color: var(--sakura-success);
}

[data-theme="sakura"] .missed {
  background: rgba(217, 127, 140, 0.12);
  color: var(--sakura-error);
}


/* =========================================================
   SMOOTH THEME TRANSITION
   ========================================================= */

body,
.dash-card,
.modal,
.btn,
.dropdown-menu,
.dropdown-item,
.form-control,
input,
select,
.week-nav,
.mobile-view-switcher,
.mobile-view-btn,
.mobile-class-sheet {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* =========================================================
   🌸 SAKURA PETAL ANIMATION
   ========================================================= */

#sakura-petals {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 99999;
  opacity: 0;
}

#sakura-petals.active {
  opacity: 1;
}

.sakura-petal {
  position: absolute;
  top: -40px;
  width: 12px;
  height: 9px;
  background: #F46299;
  border-radius: 70% 30% 70% 30%;
  opacity: 0.75;
  animation: sakuraFall linear forwards;
  filter: drop-shadow(0 2px 3px rgba(160, 80, 100, 0.08));
}

.sakura-petal::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.35);
}

@keyframes sakuraFall {

  0% {
    transform:
      translate3d(0, -30px, 0)
      rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.75;
  }

  50% {
    transform:
      translate3d(35px, 50vh, 0)
      rotate(180deg);
  }

  100% {
    transform:
      translate3d(-45px, 110vh, 0)
      rotate(360deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sakura-petals {
    display: none;
  }
}
/* =========================================================
   🌸 SAKURA — LIGHT TIMETABLE
   ========================================================= */

[data-theme="sakura"] .calendar-container {
  background: #fff7f9;
  border-color: #f46299;
}

/* Remove the darker pink grid background */
[data-theme="sakura"] .calendar-grid {
  background: #fff7f9;
}

/* Individual timetable cells */
[data-theme="sakura"] .calendar-cell {
  background: #fffafb;
  border-color: #f46299;
}

/* Day / time headers */
[data-theme="sakura"] .calendar-header,
[data-theme="sakura"] .calendar-day-header,
[data-theme="sakura"] .time-label {
  background: #fff0f3;
  color: #6f4b53;
  border-color: #f46299;
}
/* =========================================================
   🌸 ATTENDANCE SUCCESS BURST
   Completely independent from normal Sakura petals
   ========================================================= */

#sakura-success-layer {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  overflow: visible;

  z-index: 100001;
}

.sakura-success-burst {
  position: fixed;

  width: 1px;
  height: 1px;

  pointer-events: none;

  transform: translate(-50%, -50%);
}

.sakura-success-petal {
  position: absolute;

  left: 0;
  top: 0;

  background: #F46299;

  border-radius: 70% 30% 70% 30%;

  opacity: 0;

  animation:
    sakuraSuccessBurst
    1.25s
    cubic-bezier(.2,.75,.25,1)
    forwards;

  filter:
    drop-shadow(
      0 2px 3px
      rgba(160, 80, 100, 0.08)
    );
}

.sakura-success-petal::after {
  content: "";

  position: absolute;
  inset: 1px;

  border-radius: inherit;

  background:
    rgba(255,255,255,0.35);
}

@keyframes sakuraSuccessBurst {

  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(0.3);
  }

  15% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.75;

    transform:
      translate(
        calc(-50% + var(--move-x) * 0.75),
        calc(-50% + var(--move-y) * 0.75)
      )
      rotate(180deg)
      scale(1);
  }

  100% {
    opacity: 0;

    transform:
      translate(
        calc(-50% + var(--move-x)),
        calc(-50% + var(--move-y))
      )
      rotate(360deg)
      scale(0.85);
  }
}

/* PRESENNT BRAND LOGO */
.app-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0 10px;
}

.app-logo img {
  width: 180px;
  height: auto;
  max-width: 70vw;
  display: block;
  object-fit: contain;
}

/* AUTH MODAL LOGO */
.auth-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px;
}

.auth-logo img {
  width: 150px;
  height: auto;
  display: block;
  object-fit: contain;
}
/* 🌸 Sakura — PRESENNT Logo */
[data-theme="sakura"] .presennt-logo {
  filter: brightness(0) saturate(100%)
          invert(67%)
          sepia(18%)
          saturate(1000%)
          hue-rotate(305deg)
          brightness(95%)
          contrast(90%);
}
/* =========================================================
   🌸 PRESENNT — SAKURA WELCOME TRANSITION
   ========================================================= */

.sakura-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: #fff7f9;
/* 🌸 Sakura Welcome — instant takeover */
.sakura-welcome-overlay {
  isolation: isolate;
}
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

.sakura-welcome-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   🌸 BACKGROUND
   ========================================================= */

.sakura-welcome-bg {
  position: relative;
  width: 100%;
  height: 100%;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255, 210, 220, 0.55),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(236, 174, 190, 0.30),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #fff8fa 0%,
      #fff1f5 45%,
      #fce7ed 100%
    );
}


/* =========================================================
   🌸 JAPANESE-STYLE SOFT GLOW
   ========================================================= */

.sakura-welcome-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background: rgba(255, 190, 207, 0.18);

  filter: blur(70px);

  pointer-events: none;

  animation: sakuraGlowFloat 6s ease-in-out infinite;
}

.glow-1 {
  top: -160px;
  left: -100px;
}

.glow-2 {
  right: -140px;
  bottom: -180px;

  width: 500px;
  height: 500px;

  animation-delay: -3s;
}

@keyframes sakuraGlowFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(20px, -15px, 0) scale(1.08);
  }
}


/* =========================================================
   🌸 DECORATIVE FLOWING PETALS
   ========================================================= */

.sakura-welcome-petals {
  position: absolute;
  inset: 0;

  pointer-events: none;
  overflow: hidden;
}

.sakura-welcome-petals span {
  position: absolute;

  font-size: 22px;

  opacity: 0;

  filter: blur(0.2px);

  animation:
    welcomePetalFloat
    6s
    ease-in-out
    infinite;
}

.sakura-welcome-petals span:nth-child(1) {
  left: 10%;
  top: 18%;
  animation-delay: 0s;
  font-size: 20px;
}

.sakura-welcome-petals span:nth-child(2) {
  left: 82%;
  top: 16%;
  animation-delay: 1.2s;
  font-size: 27px;
}

.sakura-welcome-petals span:nth-child(3) {
  left: 18%;
  top: 72%;
  animation-delay: 2.1s;
  font-size: 17px;
}

.sakura-welcome-petals span:nth-child(4) {
  left: 88%;
  top: 67%;
  animation-delay: 0.7s;
  font-size: 20px;
}

.sakura-welcome-petals span:nth-child(5) {
  left: 28%;
  top: 12%;
  animation-delay: 3s;
  font-size: 14px;
}

.sakura-welcome-petals span:nth-child(6) {
  left: 70%;
  top: 82%;
  animation-delay: 1.8s;
  font-size: 15px;
}

@keyframes welcomePetalFloat {

  0% {
    opacity: 0;
    transform:
      translate3d(0, 20px, 0)
      rotate(-20deg)
      scale(0.75);
  }

  20% {
    opacity: 0.65;
  }

  50% {
    opacity: 0.8;
    transform:
      translate3d(25px, -20px, 0)
      rotate(30deg)
      scale(1);
  }

  80% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(-15px, -55px, 0)
      rotate(80deg)
      scale(0.8);
  }
}


/* =========================================================
   🌸 WELCOME CONTENT
   ========================================================= */

.sakura-welcome-content {
  position: relative;
  z-index: 5;

  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;

  transform: translateY(28px) scale(0.96);
  opacity: 0;

  transition:
    opacity 0.8s cubic-bezier(.22,1,.36,1),
    transform 0.8s cubic-bezier(.22,1,.36,1);
}

.sakura-welcome-overlay.active .sakura-welcome-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* =========================================================
   🌸 MAIN FLOWER
   ========================================================= */

.sakura-welcome-flower {
  width: 76px;
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 46px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.95),
      rgba(255,226,233,0.75)
    );

  box-shadow:
    0 12px 40px rgba(190, 100, 125, 0.18),
    inset 0 0 20px rgba(255,255,255,0.8);

  animation:
    welcomeFlowerFloat
    3.5s
    ease-in-out
    infinite;
}

@keyframes welcomeFlowerFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(-7px) rotate(3deg);
  }
}


/* =========================================================
   🌸 DECORATIVE LINE
   ========================================================= */

.sakura-welcome-line {
  width: 0;
  height: 1px;

  margin: 22px 0 18px;

  background: #f46299;

  opacity: 0.65;

  transition:
    width 0.8s cubic-bezier(.22,1,.36,1);
}

.sakura-welcome-overlay.active .sakura-welcome-line {
  width: 90px;
}


/* =========================================================
   🌸 TITLE
   ========================================================= */

.sakura-welcome-content h1 {
  margin: 0;

  font-size: clamp(32px, 5vw, 56px);

  font-weight: 600;

  letter-spacing: -1.5px;

  color: #4a343a;

  text-shadow:
    0 3px 20px rgba(180, 100, 125, 0.12);
}


/* =========================================================
   🌸 SUBTITLE
   ========================================================= */

.sakura-welcome-content p {
  margin: 12px 20px 0;

  font-size: clamp(14px, 2vw, 18px);

  font-weight: 400;

  letter-spacing: 0.4px;

  color: #786c70;
}


/* =========================================================
   🌸 THEME APPLIED LABEL
   ========================================================= */

.sakura-welcome-sub {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-top: 26px;

  font-size: 10px;

  letter-spacing: 3px;

  font-weight: 600;

  color: #b06b7b;
}

.sakura-welcome-sub span:first-child,
.sakura-welcome-sub span:last-child {
  width: 28px;
  height: 1px;

  background: #dba1ad;

  opacity: 0.7;
}


/* =========================================================
   🌸 BOTTOM BRAND
   ========================================================= */

.sakura-welcome-bottom {
  position: absolute;

  bottom: 28px;
  left: 50%;

  transform: translateX(-50%);

  font-size: 11px;

  letter-spacing: 5px;

  font-weight: 600;

  color: #b98a94;

  opacity: 0;

  transition: opacity 1s ease 0.5s;
}

.sakura-welcome-overlay.active .sakura-welcome-bottom {
  opacity: 0.75;
}


/* =========================================================
   🌸 MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .sakura-welcome-flower {
    width: 64px;
    height: 64px;
    font-size: 38px;
  }

  .sakura-welcome-content h1 {
    letter-spacing: -0.8px;
  }

  .sakura-welcome-content p {
    max-width: 290px;
    line-height: 1.6;
  }

  .sakura-welcome-sub {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .sakura-welcome-sub span:first-child,
  .sakura-welcome-sub span:last-child {
    width: 18px;
  }
}


/* =========================================================
   🌸 REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sakura-welcome-overlay,
  .sakura-welcome-content,
  .sakura-welcome-line {
    transition: none;
  }

  .sakura-welcome-glow,
  .sakura-welcome-petals span,
  .sakura-welcome-flower {
    animation: none;
  }
}
/* =========================================================
   🌸 SAKURA WELCOME — EXIT ANIMATION
   ========================================================= */

.sakura-welcome-overlay.closing {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s cubic-bezier(.4,0,.2,1),
    visibility 0.7s ease;
}

.sakura-welcome-overlay.closing .sakura-welcome-content {
  opacity: 0;
  transform: translateY(-20px) scale(1.03);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(.4,0,.2,1);
}

.sakura-welcome-overlay.closing .sakura-welcome-flower {
  transform: scale(0.85) rotate(-8deg);
  transition: transform 0.55s ease;
}
/* =========================================================
   🌸 SAKURA — DARK PINK ACCENT
   ========================================================= */

:root {
  --sakura-accent-dark: #c95f7a;
}

/* 📊 Attendance Progress Circle */
[data-theme="sakura"] .fg-circle {
  stroke: var(--sakura-accent-dark) !important;
}
/* 🌸 Sakura — Today / Selected Timetable Box */

[data-theme="sakura"] .day-column.today {
  border-color: var(--sakura-accent-dark) !important;
  box-shadow:
    0 0 0 1px var(--sakura-accent-dark),
    var(--shadow-subtle) !important;
}

[data-theme="sakura"] .calendar-grid.today-mode .day-column.today {
  box-shadow:
    0 0 0 1px var(--sakura-accent-dark),
    0 8px 24px rgba(201, 95, 122, 0.08) !important;
}
/* 🌸 Sakura — Today Date Text */

[data-theme="sakura"] .day-column.today .day-name,
[data-theme="sakura"] .day-column.today .day-date {
  color: var(--sakura-accent-dark) !important;
}

```css
/* =========================================================
   ✨ PRESENNT — APPEARANCE MODAL REDESIGN
   Safe override — existing theme buttons & JS untouched
   ========================================================= */

/* ---------- Appearance Modal ---------- */

#theme-modal {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#theme-modal .theme-modal {
  width: min(500px, calc(100vw - 32px));
  max-width: 500px;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  animation: presentAppearanceIn 0.35s cubic-bezier(.22,1,.36,1);
}

/* ---------- Header ---------- */

#theme-modal .modal-header {
  padding: 24px 24px 20px;
  margin: 0;
  border-bottom: 1px solid var(--border-light);
  align-items: flex-start;
}

#theme-modal .modal-header h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

#theme-modal .modal-header .qr-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.68;
}

/* ---------- Close button ---------- */

#theme-modal #close-theme-modal {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease;
}

#theme-modal #close-theme-modal:hover {
  transform: rotate(90deg);
}


/* =========================================================
   THEME SECTION
   ========================================================= */

#theme-modal .theme-section {
  padding: 22px 24px 8px;
}

#theme-modal .theme-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#theme-modal .theme-section-title > span:first-child {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-main);
}

#theme-modal .theme-section-hint {
  font-size: 11px;
  color: var(--text-sub);
}


/* =========================================================
   THEME OPTIONS
   ========================================================= */

#theme-modal .theme-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ---------- Theme Card ---------- */

#theme-modal .theme-card {
  position: relative;
  width: 100%;
  min-height: 74px;

  display: flex;
  align-items: center;

  padding: 14px 16px;

  border: 1px solid var(--border-light);
  border-radius: 16px;

  background: var(--card-bg);

  text-align: left;
  cursor: pointer;

  overflow: hidden;

  transition:
    transform 0.22s cubic-bezier(.22,1,.36,1),
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}


/* ---------- Remove old visual preview ---------- */

#theme-modal .theme-preview {
  display: none !important;
}


/* ---------- Theme card information ---------- */

#theme-modal .theme-card-info {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;

  flex: 1;

  min-width: 0;
}

#theme-modal .theme-card-name {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 15px;
  font-weight: 650;

  color: var(--text-main);
}

#theme-modal .theme-card-description {
  display: block;

  margin-top: 4px;
  margin-left: 25px;

  font-size: 12px;
  line-height: 1.4;

  color: var(--text-sub);
}


/* =========================================================
   CUSTOM RADIO INDICATOR
   ========================================================= */

#theme-modal .theme-radio {
  position: relative;

  width: 18px;
  height: 18px;
  min-width: 18px;

  border-radius: 50%;

  border: 1.5px solid var(--border-light);

  background: transparent;

  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

#theme-modal .theme-card.selected .theme-radio {
  border-color: var(--primary);
  background: var(--primary);

  box-shadow:
    0 0 0 4px color-mix(
      in srgb,
      var(--primary) 12%,
      transparent
    );
}

#theme-modal .theme-card.selected .theme-radio::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 6px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #ffffff;
}


/* =========================================================
   HOVER / SELECTED STATES
   ========================================================= */

#theme-modal .theme-card:hover {
  transform: translateY(-1px);

  border-color: color-mix(
    in srgb,
    var(--primary) 45%,
    var(--border-light)
  );

  box-shadow:
    0 6px 20px rgba(0,0,0,0.06);
}

#theme-modal .theme-card:active {
  transform: scale(0.985);
}

#theme-modal .theme-card.selected {
  border-color: var(--primary);

  box-shadow:
    0 0 0 1px var(--primary),
    0 7px 22px rgba(0,0,0,0.06);
}


/* =========================================================
   🌸 SAKURA THEME CARD
   ========================================================= */

#theme-modal .sakura-theme-card {
  position: relative;

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(255,255,255,0.78) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 76% 70%,
      rgba(255,255,255,0.65) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 94% 82%,
      rgba(255,255,255,0.7) 0 1.5px,
      transparent 2.5px
    ),
    linear-gradient(
      135deg,
      #fffafa 0%,
      #fff1f5 45%,
      #f9dce4 100%
    );

  border-color: #f0d1d9;
}


/* ---------- Sakura decorative branch ---------- */

#theme-modal .sakura-theme-card::before {
  content: "🌸  🌸     🌸";

  position: absolute;

  right: -4px;
  top: -3px;

  font-size: 25px;
  letter-spacing: 4px;

  opacity: 0.58;

  transform: rotate(-8deg);

  pointer-events: none;
}

#theme-modal .sakura-theme-card::after {
  content: "";

  position: absolute;

  right: -15px;
  bottom: -22px;

  width: 150px;
  height: 75px;

  border-top: 2px solid rgba(105,72,72,0.16);

  border-radius: 50%;

  transform: rotate(-12deg);

  pointer-events: none;
}


/* ---------- Sakura text ---------- */

#theme-modal .sakura-theme-card .theme-card-name {
  color: #4b343b;
}

#theme-modal .sakura-theme-card .theme-card-description {
  color: #8b6870;
}

#theme-modal .sakura-theme-card .theme-radio {
  border-color: #F46299;
}


/* ---------- Sakura selected ---------- */

#theme-modal .sakura-theme-card.selected {
  border-color: #f46299;

  box-shadow:
    0 0 0 1px #f46299,
    0 8px 24px rgba(244,98,153,.12);
}

#theme-modal .sakura-theme-card.selected .theme-radio {
  background: #f46299;
  border-color: #f46299;

  box-shadow:
    0 0 0 4px rgba(244, 98, 153,0.14);
}


/* =========================================================
   ✨ INFORMATION BOX
   ========================================================= */

#theme-modal .theme-preview-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  margin: 14px 24px 4px;
  padding: 13px 14px;

  border: 1px solid var(--border-light);
  border-radius: 14px;

  background: var(--bg-color);

  color: var(--text-main);
}

#theme-modal .theme-preview-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  min-width: 28px;

  border-radius: 9px;

  background: color-mix(
    in srgb,
    var(--primary) 12%,
    transparent
  );

  font-size: 14px;
}

#theme-modal .theme-preview-note strong {
  display: block;

  margin-bottom: 3px;

  font-size: 12px;
  font-weight: 650;
}

#theme-modal .theme-preview-note p {
  margin: 0;

  font-size: 11px;
  line-height: 1.5;

  color: var(--text-sub);
}


/* =========================================================
   BOTTOM ACTION
   ========================================================= */

#theme-modal .modal-actions {
  padding: 18px 24px 22px;
  margin-top: 0;
}

#theme-modal #theme-cancel-btn {
  min-width: 90px;
}


/* =========================================================
   OPEN ANIMATION
   ========================================================= */

@keyframes presentAppearanceIn {
  from {
    opacity: 0;
    transform:
      translateY(12px)
      scale(0.97);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   🌸 SAKURA HOVER PETAL EFFECT
   ========================================================= */

#theme-modal .sakura-theme-card:hover::before {
  opacity: 0.82;
  transform:
    rotate(-8deg)
    translateY(-2px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #theme-modal .theme-modal {
    width: calc(100vw - 24px);
    border-radius: 21px;
  }

  #theme-modal .modal-header {
    padding: 20px 18px 17px;
  }

  #theme-modal .modal-header h2 {
    font-size: 21px;
  }

  #theme-modal .theme-section {
    padding: 18px 18px 6px;
  }

  #theme-modal .theme-section-title {
    margin-bottom: 10px;
  }

  #theme-modal .theme-card {
    min-height: 70px;
    padding: 13px 14px;
    border-radius: 15px;
  }

  #theme-modal .theme-card-name {
    font-size: 14px;
  }

  #theme-modal .theme-card-description {
    font-size: 11px;
  }

  #theme-modal .theme-preview-note {
    margin-left: 18px;
    margin-right: 18px;
  }

  #theme-modal .modal-actions {
    padding: 15px 18px 18px;
  }
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #theme-modal .theme-modal,
  #theme-modal .theme-card,
  #theme-modal #close-theme-modal {
    animation: none;
    transition: none;
  }
}
/* =========================================================
   ☕ PRESENNT — COFFEE THEME
   ========================================================= */

:root {
  --coffee-bg: #F6F1E8;
  --coffee-card: #FFFDF9;
  --coffee-card-soft: #F1E8DC;

  --coffee-primary: #9A8068;
  --coffee-primary-dark: #6F5A47;
  --coffee-primary-soft: #E8DDD0;

  --coffee-text: #352D27;
  --coffee-text-sub: #796E65;

  --coffee-border: #E5D9CB;

  --coffee-success: #7D9270;
  --coffee-error: #B86F68;

  --coffee-accent-dark: #795A42;

  --coffee-shadow:
    0 8px 30px rgba(101, 76, 54, 0.10);
}


/* =========================================================
   ☕ COFFEE COLOR SYSTEM
   ========================================================= */

[data-theme="coffee"] {

  --bg-main: var(--coffee-bg);
  --bg-card: var(--coffee-card);

  --text-main: var(--coffee-text);
  --text-sub: var(--coffee-text-sub);

  --primary: var(--coffee-primary);
  --primary-dark: var(--coffee-primary-dark);

  --border: var(--coffee-border);

  --success-green: var(--coffee-success);
  --error-red: var(--coffee-error);
}


/* =========================================================
   ☕ COFFEE BACKGROUND
   ========================================================= */

[data-theme="coffee"] body {

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(154, 128, 104, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(181, 151, 121, 0.10),
      transparent 30%
    ),
    var(--coffee-bg);

  color: var(--coffee-text);
}


/* =========================================================
   ☕ CARDS / MODALS
   ========================================================= */

[data-theme="coffee"] .dash-card,
[data-theme="coffee"] .modal,
[data-theme="coffee"] .mobile-class-sheet {

  background: var(--coffee-card);

  border-color: var(--coffee-border);

  box-shadow: var(--coffee-shadow);
}


/* =========================================================
   ☕ COFFEE ICON / ACCENT COLORS
   ========================================================= */

[data-theme="coffee"] .fg-circle {

  stroke: var(--coffee-accent-dark) !important;
}


[data-theme="coffee"] .day-column.today {

  border-color: var(--coffee-accent-dark) !important;

  box-shadow:
    0 0 0 1px var(--coffee-accent-dark),
    var(--shadow-subtle) !important;
}


[data-theme="coffee"]
.calendar-grid.today-mode
.day-column.today {

  box-shadow:
    0 0 0 1px var(--coffee-accent-dark),
    0 8px 24px rgba(121, 90, 66, 0.08) !important;
}


[data-theme="coffee"] .day-column.today .day-name,
[data-theme="coffee"] .day-column.today .day-date {

  color: var(--coffee-accent-dark) !important;
}


/* =========================================================
   ☕ COFFEE BUTTONS
   ========================================================= */

[data-theme="coffee"] .btn {

  box-shadow:
    0 4px 12px rgba(111, 90, 71, 0.10);
}


[data-theme="coffee"] .btn-primary,
[data-theme="coffee"] button.primary {

  background: var(--coffee-primary);
  border-color: var(--coffee-primary);
}


[data-theme="coffee"] .btn-primary:hover,
[data-theme="coffee"] button.primary:hover {

  background: var(--coffee-primary-dark);
  border-color: var(--coffee-primary-dark);
}


/* =========================================================
   ☕ COFFEE FORM ELEMENTS
   ========================================================= */

[data-theme="coffee"] input:focus,
[data-theme="coffee"] select:focus,
[data-theme="coffee"] textarea:focus {

  border-color: var(--coffee-primary);

  box-shadow:
    0 0 0 3px rgba(154, 128, 104, 0.12);
}


/* =========================================================
   ☕ COFFEE APPEARANCE PREVIEW
   ========================================================= */

.theme-preview-coffee {

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(154, 128, 104, 0.18),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(111, 90, 71, 0.12),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #F6F1E8,
      #EDE2D4
    );

}


/* Coffee preview top */

.theme-preview-coffee .theme-preview-top {

  background:
    linear-gradient(
      90deg,
      #9A8068,
      #6F5A47
    );

}


/* Coffee preview cards */

.theme-preview-coffee .theme-preview-card {

  background: rgba(255, 253, 249, 0.94);

  border-color: #E5D9CB;

  box-shadow:
    0 4px 12px rgba(111, 90, 71, 0.10);
}


/* =========================================================
   ☕ COFFEE CUP DECORATION
   ========================================================= */

.theme-preview-steam {

  position: absolute;

  font-size: 15px;

  opacity: 0.55;

  filter: grayscale(20%);
}


.theme-preview-coffee .steam-1 {

  right: 18px;
  top: 8px;

  transform: rotate(-8deg);
}


.theme-preview-coffee .steam-2 {

  right: 43px;
  top: 24px;

  font-size: 10px;

  opacity: 0.35;

  transform: rotate(10deg);
}


/* =========================================================
   ☕ COFFEE BEANS
   ========================================================= */

.coffee-preview-bean {

  position: absolute;

  width: 9px;
  height: 14px;

  border-radius: 50%;

  background: #795A42;

  opacity: 0.30;

  transform: rotate(35deg);
}


.coffee-preview-bean::after {

  content: "";

  position: absolute;

  width: 1px;
  height: 9px;

  background: #F1E8DC;

  left: 4px;
  top: 2px;

  border-radius: 50%;
}


.theme-preview-coffee .bean-1 {

  left: 15px;
  bottom: 13px;

  transform: rotate(-30deg);
}


.theme-preview-coffee .bean-2 {

  left: 32px;
  bottom: 22px;

  transform: rotate(45deg);

  opacity: 0.20;
}


/* =========================================================
   ☕ COFFEE FALLING PARTICLES
   ========================================================= */

#coffee-particles {

  position: fixed;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  overflow: hidden;

  z-index: 99999;

  opacity: 0;
}


#coffee-particles.active {

  opacity: 1;
}


.coffee-particle {

  position: absolute;

  top: -30px;

  width: 8px;
  height: 11px;

  border-radius: 50%;

  background: #9A8068;

  opacity: 0.22;

  animation:
    coffee-fall linear forwards;
}


@keyframes coffee-fall {

  0% {

    transform:
      translate3d(0, -30px, 0)
      rotate(0deg);

  }

  50% {

    transform:
      translate3d(25px, 50vh, 0)
      rotate(160deg);

  }

  100% {

    transform:
      translate3d(-20px, 110vh, 0)
      rotate(320deg);

  }

}


/* =========================================================
   ☕ COFFEE WELCOME OVERLAY
   ========================================================= */

.coffee-welcome-overlay {

  position: fixed;

  inset: 0;

  z-index: 200000;

  display: flex;

  align-items: center;
  justify-content: center;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255, 253, 249, 0.95),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #F6F1E8,
      #EDE2D4
    );

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}


.coffee-welcome-overlay.active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


.coffee-welcome-overlay.closing {

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.7s cubic-bezier(.4,0,.2,1),
    visibility 0.7s ease;
}


/* =========================================================
   ☕ WELCOME CONTENT
   ========================================================= */

.coffee-welcome-content {

  text-align: center;

  position: relative;

  z-index: 2;

  animation:
    coffeeWelcomeIn
    0.8s cubic-bezier(.22,1,.36,1)
    both;
}


@keyframes coffeeWelcomeIn {

  from {

    opacity: 0;

    transform:
      translateY(20px)
      scale(0.96);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


.coffee-welcome-cup {

  font-size: 62px;

  margin-bottom: 18px;

  filter:
    drop-shadow(
      0 8px 16px
      rgba(111, 90, 71, 0.16)
    );

  animation:
    coffeeCupFloat
    3s ease-in-out infinite;
}


@keyframes coffeeCupFloat {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-7px);

  }

}


.coffee-welcome-line {

  width: 55px;

  height: 1px;

  margin: 0 auto 22px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #9A8068,
      transparent
    );
}


.coffee-welcome-content h1 {

  margin: 0;

  color: #352D27;

  font-size: clamp(32px, 5vw, 52px);

  font-weight: 700;

  letter-spacing: -1.5px;
}


.coffee-welcome-content p {

  margin: 10px 0 25px;

  color: #796E65;

  font-size: 15px;
}


.coffee-welcome-sub {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  color: #795A42;

  font-size: 10px;

  letter-spacing: 2px;

  font-weight: 600;
}


.coffee-welcome-sub span:first-child,
.coffee-welcome-sub span:last-child {

  width: 35px;

  height: 1px;

  background: #D7C7B6;
}


/* =========================================================
   ☕ WELCOME BACKGROUND DETAILS
   ========================================================= */

.coffee-welcome-bg {

  position: absolute;

  inset: 0;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;
}


.coffee-welcome-glow {

  position: absolute;

  width: 320px;
  height: 320px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(154,128,104,0.13),
      transparent 70%
    );

  filter: blur(15px);

  animation:
    coffeeGlow
    5s ease-in-out infinite alternate;
}


@keyframes coffeeGlow {

  from {

    transform: scale(0.9);

    opacity: 0.6;

  }

  to {

    transform: scale(1.15);

    opacity: 1;

  }

}


.coffee-welcome-bottom {

  position: absolute;

  bottom: 32px;

  left: 0;
  right: 0;

  text-align: center;

  color: rgba(111, 90, 71, 0.35);

  font-size: 10px;

  letter-spacing: 5px;
}


/* =========================================================
   ☕ COFFEE EXIT ANIMATION
   ========================================================= */

.coffee-welcome-overlay.closing
.coffee-welcome-content {

  opacity: 0;

  transform:
    translateY(-20px)
    scale(1.03);

  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(.4,0,.2,1);
}


.coffee-welcome-overlay.closing
.coffee-welcome-cup {

  transform:
    scale(0.85)
    rotate(-6deg);

  transition:
    transform 0.55s ease;
}
/* =========================================================
   ☕ COFFEE APPEARANCE CARD — FORCE VISIBLE BACKGROUND
   ========================================================= */

.theme-preview.theme-preview-coffee {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;

  width: 100% !important;
  height: 100% !important;

  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(154, 128, 104, 0.25),
      transparent 32%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(111, 90, 71, 0.16),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #F8F3EA 0%,
      #F1E8DC 45%,
      #E8DDD0 100%
    ) !important;

  background-color: #F6F1E8 !important;

  border: 1px solid #E5D9CB !important;
}


/* Warm café glow */

.theme-preview.theme-preview-coffee::before {
  content: "" !important;

  position: absolute !important;
  inset: -30% !important;

  background:
    radial-gradient(
      circle at 70% 35%,
      rgba(154, 128, 104, 0.22),
      transparent 28%
    );

  pointer-events: none !important;

  z-index: 0 !important;
}


/* Keep preview elements above background */

.theme-preview.theme-preview-coffee
.theme-preview-top,
.theme-preview.theme-preview-coffee
.theme-preview-card,
.theme-preview.theme-preview-coffee
.theme-preview-steam,
.theme-preview.theme-preview-coffee
.coffee-preview-bean {
  z-index: 2 !important;
}


/* Coffee top bar */

.theme-preview.theme-preview-coffee
.theme-preview-top {
  background:
    linear-gradient(
      90deg,
      #6F5A47,
      #9A8068,
      #795A42
    ) !important;
}


/* Main preview cards */

.theme-preview.theme-preview-coffee
.theme-preview-card {
  background:
    rgba(255, 253, 249, 0.96) !important;

  border-color:
    #E5D9CB !important;

  box-shadow:
    0 5px 16px
    rgba(101, 76, 54, 0.12) !important;
}


/* Small preview card */

.theme-preview.theme-preview-coffee
.theme-preview-card.small {
  background:
    rgba(255, 253, 249, 0.92) !important;
}


/* Coffee cup */

.theme-preview.theme-preview-coffee::after {
  content: "☕" !important;

  position: absolute !important;

  right: 12px !important;
  bottom: 8px !important;

  font-size: 28px !important;

  opacity: 0.85 !important;

  z-index: 5 !important;

  filter:
    drop-shadow(
      0 4px 6px
      rgba(111, 90, 71, 0.20)
    );
}
/* =========================================================
   PRESENNT — BETA BADGE
   Fixed appearance across all themes
   ========================================================= */

.logo-with-beta {
  position: relative;
  display: inline-block;
}

.beta-badge {
  position: absolute;
  top: -1px;
  right: -42px;

  padding: 3px 7px;
  border-radius: 6px;

  background: #e53935;
  color: #ffffff;

  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.7px;

  white-space: nowrap;

  box-shadow: 0 2px 6px rgba(229, 57, 53, 0.25);

  opacity: 1;
}
/* =========================================================
   ❤️ PRESENNT — PERSONAL CREATOR MESSAGE
   ========================================================= */

.creator-message-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.creator-message-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.creator-message-card {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  padding: 38px 38px 32px;

  background: var(--card-bg, #ffffff);
  color: var(--text-main, #111111);

  border-radius: 24px;

  text-align: center;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.20);

  transform: translateY(35px) scale(0.94);
  opacity: 0;

  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
}

.creator-message-overlay.active .creator-message-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.creator-message-heart {
  font-size: 38px;
  margin-bottom: 14px;

  animation: creatorHeartIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes creatorHeartIn {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(10px);
  }

  60% {
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.creator-message-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  opacity: 0.55;
  margin-bottom: 12px;
}

.creator-message-card h2 {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 700;
}

.creator-message-text {
  text-align: left;
  font-size: 14px;
  line-height: 1.75;
}

.creator-message-text p {
  margin: 0 0 15px;
}

.creator-message-text strong {
  font-weight: 700;
}

.creator-message-signature {
  margin-top: 25px;
  margin-bottom: 26px;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.creator-message-signature span {
  font-size: 15px;
  font-weight: 700;
}

.creator-message-signature small {
  font-size: 11px;
  opacity: 0.55;
}

.creator-message-close {
  min-width: 150px;
}

/* Exit animation */
.creator-message-overlay.closing {
  opacity: 0;
}

.creator-message-overlay.closing .creator-message-card {
  transform: translateY(20px) scale(0.96);
  opacity: 0;
}

@media (max-width: 600px) {
  .creator-message-card {
    padding: 30px 24px 26px;
    border-radius: 20px;
  }

  .creator-message-card h2 {
    font-size: 26px;
  }

  .creator-message-text {
    font-size: 13px;
    line-height: 1.7;
  }
}

/* =========================================================
   PRESENNT — FLOATING TELEGRAM CONTACT
   ========================================================= */

.telegram-contact {
  position: fixed;
  right: 22px;
  bottom: 22px;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 10px;
  padding: 0;

  border-radius: 999px;

  background: #229ED9;
  color: #ffffff;

  text-decoration: none;

  box-shadow:
    0 8px 24px rgba(34, 158, 217, 0.30);

  z-index: 9998;

  overflow: hidden;

  transition:
    width 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

/* Telegram icon */
.telegram-contact-icon {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: 4px;
}

.telegram-contact-icon svg {
  width: 100%;
  height: 100%;

  fill: currentColor;
}

.telegram-contact:hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 30px rgba(34, 158, 217, 0.38);
}

/* Contact text */
.telegram-contact-text {
  max-width: 0;
  opacity: 0;

  white-space: nowrap;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1px;

  overflow: hidden;

  transition:
    max-width 0.55s ease,
    opacity 0.35s ease;
}

/* =========================================================
   EXPANDED STATE — DESKTOP
   ========================================================= */

.telegram-contact.expanded {
  width: 295px;

  padding: 0 18px 0 30px;

  justify-content: flex-start;
}

.telegram-contact.expanded .telegram-contact-text {
  max-width: 230px;
  opacity: 1;
}

/* =========================================================
   SOFT ATTENTION ANIMATION
   ========================================================= */

.telegram-contact.attention {
  animation:
    telegramAttention 0.8s
    cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes telegramAttention {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .telegram-contact {
    right: 16px;
    bottom: 16px;

    width: 50px;
    height: 50px;
  }

  .telegram-contact.expanded {
    width: 255px;

    padding: 0 14px 0 22px;

    justify-content: flex-start;
  }

  .telegram-contact.expanded .telegram-contact-text {
    max-width: 205px;
    opacity: 1;

    font-size: 11px;
  }

  .telegram-contact-icon {
    width: 24px;
    height: 24px;

    flex-basis: 24px;

    margin-left: 3px;
  }
}
/* Center Telegram icon inside the collapsed circle */
.telegram-contact:not(.expanded) .telegram-contact-icon {
  margin-left: 12px;
}
/* =========================================================
   PRESENNT — MISSED CLASSES MENU
   ========================================================= */

.missed-classes-overlay {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 9990;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.missed-classes-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* =========================================================
   MENU
   ========================================================= */

.missed-classes-menu {
  width: min(520px, calc(100vw - 32px));
  max-height: min(700px, calc(100vh - 40px));

  display: flex;
  flex-direction: column;

  background: var(--card-bg, #ffffff);
  color: var(--text-primary, #212529);

  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 22px;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.22);

  overflow: hidden;

  transform:
    translateY(18px)
    scale(0.94);

  opacity: 0;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}

.missed-classes-overlay.active .missed-classes-menu {
  transform:
    translateY(0)
    scale(1);

  opacity: 1;
}


/* =========================================================
   HEADER
   ========================================================= */

.missed-classes-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 24px 24px 18px;

  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.07));
}

.missed-classes-label {
  margin-bottom: 5px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;

  color: var(--primary-color, #1976d2);
  text-transform: uppercase;
}

.missed-classes-header h2 {
  margin: 0;

  font-size: 23px;
  font-weight: 800;

  letter-spacing: -0.4px;
}

.missed-classes-header p {
  margin: 5px 0 0;

  font-size: 13px;

  color: var(--text-secondary, #6c757d);
}

.missed-classes-close {
  flex: 0 0 auto;
}


/* =========================================================
   LIST
   ========================================================= */

.missed-classes-list {
  flex: 1;

  min-height: 80px;
  max-height: 500px;

  overflow-y: auto;

  padding: 12px 14px 16px;

  scrollbar-width: thin;
}

.missed-classes-list::-webkit-scrollbar {
  width: 6px;
}

.missed-classes-list::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 999px;
}


/* =========================================================
   MISSED CLASS ITEM
   ========================================================= */

.missed-class-item {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 15px 14px;

  margin-bottom: 8px;

  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.07));
  border-radius: 15px;

  background: var(--card-bg, #ffffff);

  color: inherit;

  text-align: left;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.missed-class-item:hover {
  transform: translateX(4px);

  border-color: var(--primary-color, #1976d2);

  box-shadow:
    0 7px 20px rgba(0, 0, 0, 0.08);
}

.missed-class-item:active {
  transform: scale(0.985);
}


/* =========================================================
   ITEM DATE
   ========================================================= */

.missed-class-date {
  width: 48px;
  min-width: 48px;
  height: 48px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  background: var(--primary-color, #1976d2);
  color: #ffffff;

  line-height: 1;
}

.missed-class-date-day {
  font-size: 18px;
  font-weight: 800;
}

.missed-class-date-month {
  margin-top: 4px;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.7px;
  text-transform: uppercase;
}


/* =========================================================
   ITEM INFORMATION
   ========================================================= */

.missed-class-info {
  min-width: 0;
  flex: 1;
}

.missed-class-name {
  margin-bottom: 5px;

  font-size: 15px;
  font-weight: 750;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missed-class-time {
  font-size: 12px;

  color: var(--text-secondary, #6c757d);
}

.missed-class-arrow {
  flex: 0 0 auto;

  font-size: 18px;

  color: var(--text-secondary, #6c757d);

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.missed-class-item:hover .missed-class-arrow {
  transform: translateX(4px);

  color: var(--primary-color, #1976d2);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.missed-classes-empty {
  min-height: 260px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 30px 20px;
}

.missed-classes-empty-icon {
  width: 64px;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;

  border-radius: 50%;

  background: rgba(76, 175, 80, 0.12);
  color: #4caf50;

  font-size: 28px;
  font-weight: 800;
}

.missed-classes-empty h3 {
  margin: 0;

  font-size: 18px;
  font-weight: 800;
}

.missed-classes-empty p {
  margin: 7px 0 0;

  font-size: 13px;

  color: var(--text-secondary, #6c757d);
}


/* =========================================================
   FOOTER
   ========================================================= */

.missed-classes-footer {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 13px 18px;

  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.07));

  font-size: 11px;
  font-weight: 600;

  color: var(--text-secondary, #6c757d);
}

.missed-classes-footer-icon {
  font-size: 15px;

  color: var(--primary-color, #1976d2);
}


/* =========================================================
   MISSED DASHBOARD CARD
   ========================================================= */

.missed-dashboard-card {
  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.missed-dashboard-card:hover {
  transform: translateY(-2px);
}

.missed-dashboard-card:active {
  transform: scale(0.985);
}


/* =========================================================
   SAKURA THEME
   ========================================================= */

[data-theme="sakura"] .missed-classes-menu {
  box-shadow:
    0 24px 70px rgba(170, 90, 110, 0.22);
}

[data-theme="sakura"] .missed-class-item:hover {
  box-shadow:
    0 8px 24px rgba(244, 98, 153, 0.20);
}


/* =========================================================
   COFFEE THEME
   ========================================================= */

[data-theme="coffee"] .missed-classes-menu {
  box-shadow:
    0 24px 70px rgba(70, 45, 25, 0.25);
}

[data-theme="coffee"] .missed-class-item:hover {
  box-shadow:
    0 8px 24px rgba(90, 65, 45, 0.18);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .missed-classes-overlay {
    padding: 12px;
  }

  .missed-classes-menu {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);

    border-radius: 20px;
  }

  .missed-classes-header {
    padding: 20px 18px 15px;
  }

  .missed-classes-header h2 {
    font-size: 20px;
  }

  .missed-classes-list {
    max-height: calc(100vh - 180px);

    padding: 10px;
  }

  .missed-class-item {
    gap: 11px;

    padding: 13px 11px;
  }

  .missed-class-date {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .missed-class-date-day {
    font-size: 16px;
  }

  .missed-class-name {
    font-size: 14px;
  }

  .missed-class-time {
    font-size: 11px;
  }

  .missed-classes-footer {
    padding: 11px 12px;

    font-size: 10px;
  }
}
/* =========================================================
   MISSED CLASS — PREMIUM SIGNAL HIGHLIGHT
   ========================================================= */

.class-card.missed-focus-highlight {
  position: relative;
  z-index: 20;

  animation:
    missedCardPulse 3.5s ease-out forwards;

  isolation: isolate;
}


/* Main glowing border */

.class-card.missed-focus-highlight::before {
  content: "";

  position: absolute;
  inset: -2px;

  border-radius: inherit;

  pointer-events: none;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 285deg,
      rgba(255,255,255,0) 305deg,
      rgba(255,255,255,0.95) 320deg,
      rgba(255,255,255,0) 335deg,
      transparent 350deg,
      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding: 2px;

  filter:
    drop-shadow(0 0 5px rgba(255,255,255,0.9))
    drop-shadow(0 0 12px rgba(255,255,255,0.55));

  animation:
    missedSignalSweep 1.45s linear infinite;

  opacity: 0;
}


/* Second signal stroke */

.class-card.missed-focus-highlight::after {
  content: "";

  position: absolute;
  inset: -5px;

  border-radius: inherit;

  pointer-events: none;

  border: 1px solid rgba(255,255,255,0.65);

  box-shadow:
    0 0 8px rgba(255,255,255,0.65),
    0 0 18px rgba(255,255,255,0.35);

  animation:
    missedOuterPulse 1.45s ease-in-out infinite;

  opacity: 0;
}


/* =========================================================
   CARD PULSE
   ========================================================= */

@keyframes missedCardPulse {

  0% {
    filter:
      brightness(1)
      drop-shadow(0 0 0 transparent);
  }

  12% {
    filter:
      brightness(1.08)
      drop-shadow(0 0 12px rgba(255,255,255,0.28));
  }

  28% {
    filter:
      brightness(1.03)
      drop-shadow(0 0 7px rgba(255,255,255,0.16));
  }

  100% {
    filter:
      brightness(1)
      drop-shadow(0 0 0 transparent);
  }

}


/* =========================================================
   FIRST SIGNAL — TRAVELS AROUND BORDER
   ========================================================= */

@keyframes missedSignalSweep {

  0% {
    transform: rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  42% {
    opacity: 1;
  }

  55% {
    opacity: 0.15;
  }

  100% {
    transform: rotate(360deg);
    opacity: 0;
  }

}


/* =========================================================
   SECOND SIGNAL — SOFTER FOLLOW-UP
   ========================================================= */

@keyframes missedOuterPulse {

  0% {
    opacity: 0;
    transform: scale(0.99);
  }

  15% {
    opacity: 0.9;
  }

  40% {
    opacity: 0.35;
    transform: scale(1.015);
  }

  65% {
    opacity: 0;
    transform: scale(1.025);
  }

  100% {
    opacity: 0;
    transform: scale(1.025);
  }

}
/* =========================================================
   APPLE-STYLE FROSTED APPEARANCE MODAL
   ========================================================= */

.theme-modal {
  background: rgba(255,255,255,0.90);

  backdrop-filter: blur(45px) saturate(150%);
  -webkit-backdrop-filter: blur(45px) saturate(150%);

  border: 0px solid rgba(255,255,255,0.65);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.14),
    0 4px 14px rgba(0,0,0,0.07);
}

/* 🌸 Sakura */
[data-theme="sakura"] .theme-modal {
  background: rgba(255,248,250,0.90);

  backdrop-filter: blur(45px) saturate(150%);
  -webkit-backdrop-filter: blur(45px) saturate(150%);

  border-color: rgba(255,255,255,0.65);

  box-shadow:
    0 20px 50px rgba(120,60,80,0.14),
    0 4px 14px rgba(120,60,80,0.07);
}

/* ☕ Coffee */
[data-theme="coffee"] .theme-modal {
  background: rgba(248,242,235,0.90);

  backdrop-filter: blur(45px) saturate(150%);
  -webkit-backdrop-filter: blur(45px) saturate(150%);

  border-color: rgba(255,255,255,0.55);

  box-shadow:
    0 20px 50px rgba(70,45,25,0.14),
    0 4px 14px rgba(70,45,25,0.07);
}

/* =========================================================
   ADD CLASS — APPLE FROSTED GLASS
   =======
================================================== */

#class-modal .modal-content {
  background: rgba(255,255,255,0.40);

  backdrop-filter: blur(45px) saturate(150%);
  -webkit-backdrop-filter: blur(45px) saturate(150%);
}
/* =========================================================
   🎋 BAMBOO THEME
   ========================================================= */

html[data-theme="bamboo"] {
  --bamboo-bg: #E8DFC9;
  --bamboo-surface: #F7F3E8;
  --bamboo-surface-soft: #F1EBDD;
  --bamboo-green: #5F7652;
  --bamboo-green-dark: #3F5138;
  --bamboo-wood: #B89A6A;
  --bamboo-text: #332F28;
  --bamboo-text-soft: #746B5D;
  --bamboo-border: #D5C8AE;
}


/* PAGE */

html[data-theme="bamboo"] body {
  background:
    linear-gradient(
      90deg,
      rgba(95, 118, 82, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(95, 118, 82, 0.025) 1px,
      transparent 1px
    ),
    var(--bamboo-bg);

  background-size: 34px 34px;
  color: var(--bamboo-text);
}


/* MAIN SURFACES */

html[data-theme="bamboo"] .app,
html[data-theme="bamboo"] .main-content,
html[data-theme="bamboo"] .dashboard,
html[data-theme="bamboo"] .content {
  color: var(--bamboo-text);
}


/* CARDS */

html[data-theme="bamboo"] .class-card,
html[data-theme="bamboo"] .stat-card,
html[data-theme="bamboo"] .subject-stat-card,
html[data-theme="bamboo"] .calendar-card,
html[data-theme="bamboo"] .week-nav,
html[data-theme="bamboo"] .section-card {
  background: var(--bamboo-surface);
  border-color: var(--bamboo-border);
  color: var(--bamboo-text);
  box-shadow:
    0 6px 18px rgba(70, 55, 35, 0.08);
}


/* TITLES */

html[data-theme="bamboo"] .class-title,
html[data-theme="bamboo"] .section-title,
html[data-theme="bamboo"] .stat-value {
  color: var(--bamboo-text);
}


/* SECONDARY TEXT */

html[data-theme="bamboo"] .class-time,
html[data-theme="bamboo"] .type-tag,
html[data-theme="bamboo"] .stat-label,
html[data-theme="bamboo"] .class-details {
  color: var(--bamboo-text-soft);
}


/* BUTTONS */

html[data-theme="bamboo"] .btn {
  background: var(--bamboo-green);
  border-color: var(--bamboo-green);
  color: #FFFFFF;
}

html[data-theme="bamboo"] .btn:hover {
  background: var(--bamboo-green-dark);
  border-color: var(--bamboo-green-dark);
}


/* ICON BUTTONS */

html[data-theme="bamboo"] .btn-icon {
  color: var(--bamboo-green-dark);
}

html[data-theme="bamboo"] .btn-icon:hover {
  background: rgba(95, 118, 82, 0.10);
}


/* LINKS */

html[data-theme="bamboo"] a,
html[data-theme="bamboo"] .class-link {
  color: var(--bamboo-green);
}


/* INPUTS */

html[data-theme="bamboo"] input,
html[data-theme="bamboo"] select,
html[data-theme="bamboo"] textarea {
  background: var(--bamboo-surface);
  border-color: var(--bamboo-border);
  color: var(--bamboo-text);
}

html[data-theme="bamboo"] input:focus,
html[data-theme="bamboo"] select:focus,
html[data-theme="bamboo"] textarea:focus {
  border-color: var(--bamboo-green);
  box-shadow:
    0 0 0 3px rgba(95, 118, 82, 0.12);
}


/* DROPDOWNS */

html[data-theme="bamboo"] .dropdown-menu {
  background: var(--bamboo-surface);
  border-color: var(--bamboo-border);
  box-shadow:
    0 10px 30px rgba(70, 55, 35, 0.14);
}

html[data-theme="bamboo"] .dropdown-item {
  color: var(--bamboo-text);
}

html[data-theme="bamboo"] .dropdown-item:hover {
  background: rgba(95, 118, 82, 0.08);
}


/* SETTINGS / MODALS */

html[data-theme="bamboo"] .modal-content,
html[data-theme="bamboo"] .modal-card {
  background: var(--bamboo-surface);
  border-color: var(--bamboo-border);
  color: var(--bamboo-text);
}


/* ACTIVE / SELECTED STATES */

html[data-theme="bamboo"] .selected,
html[data-theme="bamboo"] .active {
  border-color: var(--bamboo-green);
}


/* ATTENDANCE */

html[data-theme="bamboo"] .status-attended {
  border-color: rgba(95, 118, 82, 0.35);
}

html[data-theme="bamboo"] .status-watched {
  border-color: rgba(184, 154, 106, 0.45);
}


/* SCROLLBAR */

html[data-theme="bamboo"] ::-webkit-scrollbar {
  width: 9px;
}

html[data-theme="bamboo"] ::-webkit-scrollbar-track {
  background: var(--bamboo-bg);
}

html[data-theme="bamboo"] ::-webkit-scrollbar-thumb {
  background: var(--bamboo-wood);
  border-radius: 999px;
}

html[data-theme="bamboo"] ::-webkit-scrollbar-thumb:hover {
  background: var(--bamboo-green);
}
/* 🎋 Bamboo */
[data-theme="bamboo"] .theme-modal {
  background: rgba(247,243,232,0.90);

  backdrop-filter: blur(45px) saturate(120%);
  -webkit-backdrop-filter: blur(45px) saturate(120%);

  border-color: rgba(255,255,255,0.60);

  box-shadow:
    0 20px 50px rgba(70,55,35,0.14),
    0 4px 14px rgba(70,55,35,0.07);
}
/* =========================================================
   🎋 BAMBOO THEME — WELCOME OVERLAY
   ========================================================= */

.bamboo-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: none;
  align-items: center;
  justify-content: center;

  background: #E8DFC9;

  opacity: 0;
  pointer-events: none;

  overflow: hidden;
}

.bamboo-welcome-overlay.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.bamboo-welcome-overlay.closing {
  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.7s cubic-bezier(.4,0,.2,1);
}

.bamboo-welcome-overlay.closing
.bamboo-welcome-content {
  opacity: 0;
  transform: translateY(-10px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.bamboo-welcome-overlay.closing
.bamboo-welcome-bottom {
  opacity: 0;

  transition:
    opacity 0.7s ease;
}
.bamboo-welcome-bg {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      90deg,
      rgba(95,118,82,0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(95,118,82,0.025) 1px,
      transparent 1px
    ),
    #E8DFC9;

  background-size: 34px 34px;
}

.bamboo-welcome-content {
  position: relative;
  z-index: 5;

  text-align: center;

  opacity: 0;
  transform: translateY(18px);

  animation: bambooWelcomeContent 1s ease forwards;
}

.bamboo-welcome-symbol {
  font-size: 58px;
  margin-bottom: 18px;

  opacity: 0;
  transform: translateY(10px);

  animation: bambooWelcomeSymbol 0.8s ease 0.15s forwards;
}

.bamboo-welcome-line {
  width: 60px;
  height: 2px;

  margin: 0 auto 22px;

  background: #5F7652;
  border-radius: 999px;

  transform: scaleX(0);

  animation: bambooWelcomeLine 0.7s ease 0.45s forwards;
}

.bamboo-welcome-content h1 {
  margin: 0;

  color: #3F5138;

  font-size: clamp(32px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -1px;
}

.bamboo-welcome-content p {
  margin: 12px 0 24px;

  color: #746B5D;

  font-size: 15px;
}

.bamboo-welcome-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: #5F7652;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.bamboo-welcome-sub span:first-child,
.bamboo-welcome-sub span:last-child {
  width: 32px;
  height: 1px;

  background: #B89A6A;
}

.bamboo-welcome-bottom {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;

  text-align: center;

  color: rgba(63,81,56,0.45);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
}

/* 🎋 Floating bamboo elements */

.bamboo-welcome-leaves {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.bamboo-welcome-leaves span {
  position: absolute;

  font-size: 30px;

  opacity: 0;

  animation: bambooLeafFloat 4s ease-in-out infinite;
}

.bamboo-welcome-leaves span:nth-child(1) {
  left: 12%;
  top: 20%;
  animation-delay: 0.2s;
}

.bamboo-welcome-leaves span:nth-child(2) {
  right: 15%;
  top: 27%;
  animation-delay: 1s;
}

.bamboo-welcome-leaves span:nth-child(3) {
  left: 20%;
  bottom: 22%;
  animation-delay: 1.7s;
}

.bamboo-welcome-leaves span:nth-child(4) {
  right: 22%;
  bottom: 18%;
  animation-delay: 2.3s;
}

.bamboo-welcome-leaves span:nth-child(5) {
  right: 7%;
  top: 58%;
  animation-delay: 3s;
}


/* =========================================================
   🎋 BAMBOO WELCOME ANIMATIONS
   ========================================================= */

@keyframes bambooWelcomeContent {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bambooWelcomeSymbol {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bambooWelcomeLine {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes bambooLeafFloat {

  0% {

    opacity: 0;

    transform: translateY(15px) rotate(-5deg);

  }

  20% {

    opacity: 0.45;

  }

  50% {

    opacity: 0.6;

    transform: translateY(-10px) rotate(5deg);

  }

  80% {

    opacity: 0.45;

  }

  100% {

    opacity: 0;

    transform: translateY(-25px) rotate(-3deg);

  }

}
/* =========================================================
   🎋 BAMBOO — APPEARANCE CARD ARTWORK
   ========================================================= */

.theme-preview-bamboo {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      #F7F3E8,
      #E8DFC9
    );
}

/* Artwork container */

.bamboo-art {
  position: absolute;
  right: 14px;
  top: 7px;
  width: 82px;
  height: 92px;
  z-index: 5;
  pointer-events: none;
}

/* Bamboo stalks */

.bamboo-stalk {
  position: absolute;
  bottom: 0;
  width: 13px;
  border-radius: 7px;
  background:
    linear-gradient(
      90deg,
      #4F6745,
      #71875D,
      #526A47
    );
  transform-origin: bottom center;
}

.stalk-main {
  right: 29px;
  height: 86px;
  transform: rotate(7deg);
}

.stalk-side {
  right: 48px;
  height: 66px;
  transform: rotate(-9deg);
  opacity: 0.85;
}

/* Bamboo nodes */

.bamboo-stalk span {
  position: absolute;
  left: -1px;
  width: 15px;
  height: 4px;
  border-radius: 4px;
  background: #3F5138;
}

.stalk-main span:nth-child(1) {
  bottom: 21px;
}

.stalk-main span:nth-child(2) {
  bottom: 45px;
}

.stalk-main span:nth-child(3) {
  bottom: 68px;
}

.stalk-side span:nth-child(1) {
  bottom: 20px;
}

.stalk-side span:nth-child(2) {
  bottom: 43px;
}

/* Leaves */

.bamboo-leaf {
  position: absolute;
  width: 31px;
  height: 13px;
  background: #5F7652;
  border-radius: 100% 0 100% 0;
  transform-origin: left center;
  opacity: 0.95;
}

.leaf-left {
  right: 38px;
  top: 43px;
  transform: rotate(205deg);
}

.leaf-right {
  right: 18px;
  top: 30px;
  transform: rotate(-18deg);
}

.leaf-top {
  right: 26px;
  top: 11px;
  transform: rotate(-42deg);
  width: 27px;
  height: 11px;
}

/* Subtle leaf vein */

.bamboo-leaf::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 22px;
  height: 1px;
  background: rgba(247,243,232,0.55);
  transform: rotate(-8deg);
  transform-origin: left center;
}

/* Gentle movement */

.bamboo-art {
  animation: bambooPreviewFloat 4s ease-in-out infinite;
}

@keyframes bambooPreviewFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}
/* =========================================================
   🎋 BAMBOO THEME CARD — ARTWORK
   ========================================================= */

.theme-preview-bamboo {
  position: relative !important;
  overflow: hidden !important;

  background:
    linear-gradient(
      135deg,
      #F7F3E8 0%,
      #E8DFC9 100%
    ) !important;
}


/* Artwork container */

.bamboo-artwork {
  position: absolute !important;

  right: 12px !important;
  top: 5px !important;

  width: 82px !important;
  height: 94px !important;

  z-index: 20 !important;

  pointer-events: none;
}


/* Bamboo stems */

.bamboo-stem {
  position: absolute !important;

  bottom: 0 !important;

  width: 12px !important;

  border-radius: 7px !important;

  background:
    linear-gradient(
      90deg,
      #435A3A 0%,
      #71865B 45%,
      #526B45 100%
    ) !important;

  box-shadow:
    inset 1px 0 rgba(255,255,255,0.22),
    1px 2px 4px rgba(45,55,35,0.12);

  transform-origin: bottom center;
}


/* Main stem */

.bamboo-stem-1 {
  right: 27px !important;
  height: 88px !important;

  transform: rotate(7deg);
}


/* Side stem */

.bamboo-stem-2 {
  right: 47px !important;
  height: 67px !important;

  transform: rotate(-8deg);

  opacity: 0.88;
}


/* Bamboo joints */

.bamboo-stem i {
  position: absolute !important;

  left: -2px !important;

  width: 16px !important;
  height: 4px !important;

  border-radius: 4px !important;

  background: #394C32 !important;

  display: block !important;
}


.bamboo-stem-1 i:nth-child(1) {
  bottom: 19px;
}

.bamboo-stem-1 i:nth-child(2) {
  bottom: 43px;
}

.bamboo-stem-1 i:nth-child(3) {
  bottom: 67px;
}


.bamboo-stem-2 i:nth-child(1) {
  bottom: 19px;
}

.bamboo-stem-2 i:nth-child(2) {
  bottom: 42px;
}


/* =========================================================
   LEAVES
   ========================================================= */

.bamboo-leaf {
  position: absolute !important;

  width: 32px !important;
  height: 14px !important;

  background: #5F7652 !important;

  border-radius:
    100% 0 100% 0 !important;

  transform-origin: left center;

  display: block !important;

  opacity: 0.95;

  box-shadow:
    0 2px 4px rgba(45,55,35,0.08);
}


/* Left leaf */

.bamboo-leaf-1 {
  right: 35px !important;
  top: 45px !important;

  transform: rotate(202deg);
}


/* Right leaf */

.bamboo-leaf-2 {
  right: 13px !important;
  top: 31px !important;

  transform: rotate(-18deg);
}


/* Top leaf */

.bamboo-leaf-3 {
  right: 23px !important;
  top: 10px !important;

  width: 27px !important;
  height: 12px !important;

  transform: rotate(-43deg);
}


/* Leaf veins */

.bamboo-leaf::after {
  content: "" !important;

  position: absolute !important;

  left: 4px !important;
  top: 50% !important;

  width: 22px !important;
  height: 1px !important;

  background: rgba(247,243,232,0.6) !important;

  transform: rotate(-8deg);

  transform-origin: left center;
}


/* Gentle movement */

.bamboo-artwork {
  animation:
    bambooArtworkFloat
    4s
    ease-in-out
    infinite;
}


@keyframes bambooArtworkFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }

}


/* =========================================================
   HIDE OLD EMOJI LEAVES
   ========================================================= */

.bamboo-curtain-layer
.bamboo-curtain-left span,
.bamboo-curtain-layer
.bamboo-curtain-right span {
  display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .bamboo-curtain-layer .bamboo-curtain-left,
  .bamboo-curtain-layer .bamboo-curtain-right {

    width: 75vw;

    height: 100dvh;

    background-size: 100% 100%;
  }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 601px) {

  .bamboo-curtain-layer .bamboo-curtain-left,
  .bamboo-curtain-layer .bamboo-curtain-right {

    width: 70vw;

    height: 100vh;

    background-size: 100% 100%;
  }

}

 /* =========================================================
    🎋 BAMBOO LEAF CURTAIN — VISUAL
    ========================================================= */

.bamboo-curtain-layer {
  position: fixed;
  inset: 0;
  z-index: 99990;

  display: none;

  pointer-events: none;
  overflow: hidden;
}

.bamboo-curtain-layer.active {
  display: flex;
}


/* =========================================================
   CURTAIN PANELS
   ========================================================= */

.bamboo-curtain-left,
.bamboo-curtain-right {
  position: relative;

  width: 50%;
  height: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #536947 0%,
      #6F855A 45%,
      #405238 100%
    );

  box-shadow:
    inset 0 0 70px rgba(30,40,25,0.25);
}


/* =========================================================
   LEAVES
   ========================================================= */

.bamboo-curtain-left span,
.bamboo-curtain-right span {
  position: absolute;

  font-size: clamp(32px, 4vw, 58px);

  opacity: 0.9;

  filter:
    drop-shadow(
      0 5px 8px
      rgba(30,45,25,0.22)
    );

  animation:
    bambooCurtainLeafFloat
    4s
    ease-in-out
    infinite;
}


/* LEFT POSITIONS */

.bamboo-curtain-left span:nth-child(1) {
  left: 8%;
  top: 8%;
}

.bamboo-curtain-left span:nth-child(2) {
  left: 35%;
  top: 5%;
  animation-delay: .4s;
}

.bamboo-curtain-left span:nth-child(3) {
  left: 65%;
  top: 13%;
  animation-delay: .8s;
}

.bamboo-curtain-left span:nth-child(4) {
  left: 18%;
  top: 28%;
  animation-delay: 1.1s;
}

.bamboo-curtain-left span:nth-child(5) {
  left: 48%;
  top: 25%;
  animation-delay: .3s;
}

.bamboo-curtain-left span:nth-child(6) {
  left: 78%;
  top: 34%;
  animation-delay: .9s;
}

.bamboo-curtain-left span:nth-child(7) {
  left: 5%;
  top: 48%;
  animation-delay: .6s;
}

.bamboo-curtain-left span:nth-child(8) {
  left: 38%;
  top: 45%;
  animation-delay: 1.3s;
}

.bamboo-curtain-left span:nth-child(9) {
  left: 70%;
  top: 55%;
  animation-delay: .2s;
}

.bamboo-curtain-left span:nth-child(10) {
  left: 15%;
  top: 70%;
  animation-delay: 1s;
}

.bamboo-curtain-left span:nth-child(11) {
  left: 52%;
  top: 74%;
  animation-delay: .5s;
}

.bamboo-curtain-left span:nth-child(12) {
  left: 80%;
  top: 86%;
  animation-delay: 1.2s;
}


/* RIGHT POSITIONS */

.bamboo-curtain-right span:nth-child(1) {
  right: 8%;
  top: 7%;
}

.bamboo-curtain-right span:nth-child(2) {
  right: 38%;
  top: 4%;
  animation-delay: .5s;
}

.bamboo-curtain-right span:nth-child(3) {
  right: 68%;
  top: 15%;
  animation-delay: 1s;
}

.bamboo-curtain-right span:nth-child(4) {
  right: 18%;
  top: 27%;
  animation-delay: .7s;
}

.bamboo-curtain-right span:nth-child(5) {
  right: 50%;
  top: 31%;
  animation-delay: .2s;
}

.bamboo-curtain-right span:nth-child(6) {
  right: 78%;
  top: 38%;
  animation-delay: 1.1s;
}

.bamboo-curtain-right span:nth-child(7) {
  right: 5%;
  top: 50%;
  animation-delay: .4s;
}

.bamboo-curtain-right span:nth-child(8) {
  right: 40%;
  top: 47%;
  animation-delay: 1.2s;
}

.bamboo-curtain-right span:nth-child(9) {
  right: 72%;
  top: 58%;
  animation-delay: .6s;
}

.bamboo-curtain-right span:nth-child(10) {
  right: 15%;
  top: 69%;
  animation-delay: .9s;
}

.bamboo-curtain-right span:nth-child(11) {
  right: 52%;
  top: 76%;
  animation-delay: .3s;
}

.bamboo-curtain-right span:nth-child(12) {
  right: 80%;
  top: 87%;
  animation-delay: 1.3s;
}


/* =========================================================
   SUBTLE LEAF MOVEMENT
   ========================================================= */

@keyframes bambooCurtainLeafFloat {

  0% {
    transform:
      translateY(0)
      rotate(-8deg);
  }

  50% {
    transform:
      translateY(-10px)
      rotate(8deg);
  }

  100% {
    transform:
      translateY(0)
      rotate(-8deg);
  }

}


/* =========================================================
   CURTAIN OPENING
   ========================================================= */

.bamboo-curtain-layer.open
.bamboo-curtain-left {
  animation:
    bambooCurtainLeftOpen
    0.8s
    cubic-bezier(.65,0,.35,1)
    forwards;
}

.bamboo-curtain-layer.open
.bamboo-curtain-right {
  animation:
    bambooCurtainRightOpen
    0.8s
    cubic-bezier(.65,0,.35,1)
    forwards;
}


@keyframes bambooCurtainLeftOpen {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }

}


@keyframes bambooCurtainRightOpen {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }

}
/* =========================================================
   ADD / EDIT CLASS — FROSTED GLASS
   ========================================================= */

#class-modal .modal {
  background: rgba(255,255,255,0.90);

  backdrop-filter: blur(45px) saturate(150%);
  -webkit-backdrop-filter: blur(45px) saturate(150%);
}
/* =========================================================
   ADD / EDIT CLASS — APPLE FROSTED GLASS
   ========================================================= */

#class-modal > .modal {
  background: rgba(255, 255, 255, 0.85) !important;

  -webkit-backdrop-filter: blur(55px) saturate(150%) !important;
  backdrop-filter: blur(55px) saturate(150%) !important;

  border: 0px solid rgba(255, 255, 255, 0.65) !important;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.14),
    0 4px 14px rgba(0, 0, 0, 0.07) !important;
}

/* =========================================================
   RECURRING WEEKLY ICON
   ========================================================= */

.recurring-icon {
  width: 16px;
  height: 16px;

  fill: currentColor;

  flex: 0 0 16px;

  vertical-align: middle;

  margin-right: 6px;
}
.weekly-legend-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:#007AFF;
  vertical-align:middle;
}
/* Weekly icon inside timetable class cards */
.type-tag{
  display:inline-flex;
  align-items:center;
}

.weekly-card-icon{
  display:block;
  width:14px;
  height:14px;
  min-width:14px;
  min-height:14px;
  flex:0 0 14px;
  fill:#007AFF;
  stroke:none;
  margin:0 4px 0 0;
  padding:0;
  overflow:visible;
}
.type-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.weekly-card-icon{
  display:block !important;
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;

  flex:none !important;

  fill:#007AFF !important;
  stroke:none !important;

  margin:0 !important;
  padding:0 !important;

  overflow:visible !important;
}
.onetime-card-icon{
  display:block !important;
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  flex:none !important;

  color:#FF3B30;

  margin:0 !important;
  padding:0 !important;

  overflow:visible !important;
}


/* =========================================================
   PRESENNT DESKTOP SIDEBAR LAYOUT
   Desktop only — mobile layout remains unchanged.
   ========================================================= */
@media (min-width: 769px) {
  body {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 30px 32px 40px 320px;
  }

  .desktop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1500;
    box-sizing: border-box;
    width: 284px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 28px 18px 18px;
    background: var(--card-bg);
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    border-right: 1px solid var(--border-light);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 9px;
    margin-bottom: 38px;
    text-decoration: none;
  }

  .sidebar-brand-logo {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .sidebar-brand .presennt-logo {
    display: block;
    width: 164px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .sidebar-brand .beta-badge {
    flex: 0 0 auto;
    margin: 0;
  }

  .sidebar-section-label {
    padding: 0 12px;
    margin-bottom: 11px;
    color: var(--text-sub);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .sidebar-nav-item {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--text-sub);
    font: inherit;
    font-size: 14px;
    font-weight: 550;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
      background .22s ease,
      color .22s ease,
      border-color .22s ease,
      transform .22s cubic-bezier(.2,.8,.2,1);
  }

  .sidebar-nav-item svg {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sidebar-nav-item:hover {
    background: var(--bg-color);
    color: var(--text-main);
  }

  .sidebar-nav-item:active {
    transform: scale(.985);
  }

  .sidebar-nav-item.active {
    color: #F46299;
    background: rgba(244, 98, 153, .19);
    border-color: rgba(244, 98, 153, .13);
    font-weight: 650;
  }

  .sidebar-nav-item:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
  }

  .sidebar-bottom {
    margin-top: auto;
    padding: 0 4px;
  }

  .sidebar-motivation {
    position: relative;
    padding: 17px 14px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(244, 98, 153, .18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(244, 98, 153,.13), rgba(244, 98, 153,.035));
  }

  .sidebar-blossom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-bottom: 9px;
    border-radius: 9px;
    color: #F46299;
    background: rgba(244, 98, 153,.18);
    font-size: 19px;
    line-height: 1;
  }

  .sidebar-motivation p {
    margin: 0;
    color: var(--text-sub);
    font-size: 12px;
    line-height: 1.65;
  }

  .sidebar-motivation strong {
    color: var(--text-main);
    font-weight: 700;
  }

  .sidebar-credit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 10px 4px;
    border-top: 1px solid var(--border-light);
  }

  .sidebar-credit-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #f46299;
    box-shadow: 0 0 0 4px rgba(244, 98, 153,.14);
  }

  .sidebar-credit strong,
  .sidebar-credit small {
    display: block;
  }

  .sidebar-credit strong {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 650;
  }

  .sidebar-credit small {
    margin-top: 2px;
    color: var(--text-sub);
    font-size: 10px;
  }

  body > header {
    align-items: center;
    margin-bottom: 28px;
  }

  body > header .app-logo {
    display: none;
  }

  body > header #user-greeting {
    margin: 0;
    color: var(--text-main);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.65px;
    line-height: 1.25;
  }

  body > header .header-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  #my-classes-section,
  #statistics-section,
  #dashboard-home {
    scroll-margin-top: 28px;
  }
}

@media (max-width: 768px) {
  .desktop-sidebar {
    display: none !important;
  }
}


/* =========================================================
   PRESENNT SIDEBAR POLISH — THEME-AWARE NAVIGATION
   ========================================================= */
@media (min-width: 769px) {
  .sidebar-brand {
    position: relative;
    align-items: flex-start;
    gap: 0;
  }

  .sidebar-brand-logo {
    flex: 1 1 auto;
  }

  .sidebar-brand .beta-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1px 0 0 8px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 9px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(229, 57, 53, .2);
  }

  .sidebar-nav-item.active {
    color: var(--primary-dark, var(--primary));
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    border-color: color-mix(in srgb, var(--primary) 24%, transparent);
  }

  .sidebar-nav-item:hover {
    color: var(--primary-dark, var(--text-main));
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-color, transparent));
  }

  .sidebar-motivation {
    border-color: color-mix(in srgb, var(--primary) 20%, transparent);
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary) 13%, transparent),
      color-mix(in srgb, var(--primary) 4%, transparent)
    );
  }

  .sidebar-blossom {
    color: var(--primary-dark, var(--primary));
    background: color-mix(in srgb, var(--primary) 16%, transparent);
  }
}

html[data-theme="bamboo"] .sidebar-nav-item.active {
  color: var(--bamboo-green-dark);
  background: color-mix(in srgb, var(--bamboo-green) 17%, transparent);
  border-color: color-mix(in srgb, var(--bamboo-green) 26%, transparent);
}

html[data-theme="bamboo"] .sidebar-nav-item:hover {
  color: var(--bamboo-green-dark);
  background: color-mix(in srgb, var(--bamboo-green) 9%, transparent);
}

html[data-theme="bamboo"] .sidebar-motivation {
  border-color: color-mix(in srgb, var(--bamboo-green) 22%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bamboo-green) 14%, transparent),
    color-mix(in srgb, var(--bamboo-green) 4%, transparent)
  );
}

html[data-theme="bamboo"] .sidebar-blossom {
  color: var(--bamboo-green-dark);
  background: color-mix(in srgb, var(--bamboo-green) 17%, transparent);
}


/* =========================================================
   PRESENNT SIDEBAR — SAKURA ART + POLISHED MOTION
   ========================================================= */
@media (min-width: 769px) {
  /* Keep the badge tucked right beside the wordmark. */
  .sidebar-brand {
    align-items: center;
    padding-right: 6px;
    margin-bottom: 34px;
  }

  .sidebar-brand .presennt-logo {
    width: 158px;
  }

  .sidebar-brand .beta-badge {
    margin-left: 3px;
    transform: translateY(-2px);
  }

  /* Decorative branch replaces the old slogan card; sidebar only. */
  .sidebar-bottom {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding: 0;
  }

  .sidebar-sakura-art {
    width: 100%;
    max-width: 242px;
    margin: 0 auto -4px;
    opacity: .96;
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: sidebarSakuraArrive .8s cubic-bezier(.22,1,.36,1) both;
  }

  .sidebar-sakura-art svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .sidebar-sakura-art .sakura-branch-main {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: sidebarBranchDraw 1.15s cubic-bezier(.22,1,.36,1) .12s forwards;
  }

  .sidebar-sakura-art .sakura-branch-small {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: sidebarBranchDraw .85s ease .48s forwards;
  }

  .sidebar-sakura-art .sakura-bloom {
    transform-box: fill-box;
    transform-origin: center;
    animation: sidebarBloomIn .55s cubic-bezier(.22,1,.36,1) both;
  }

  .sidebar-sakura-art .sakura-bloom:nth-of-type(3) { animation-delay: .35s; }
  .sidebar-sakura-art .sakura-bloom:nth-of-type(4) { animation-delay: .48s; }
  .sidebar-sakura-art .sakura-bloom:nth-of-type(5) { animation-delay: .61s; }
  .sidebar-sakura-art .sakura-bloom:nth-of-type(6) { animation-delay: .74s; }
  .sidebar-sakura-art .sakura-bloom:nth-of-type(7) { animation-delay: .87s; }

  .sidebar-nav-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateX(0);
    transition:
      background .22s ease,
      color .22s ease,
      border-color .22s ease,
      transform .24s cubic-bezier(.2,.8,.2,1),
      box-shadow .24s ease;
    animation: sidebarNavArrive .48s cubic-bezier(.22,1,.36,1) backwards;
  }

  .sidebar-nav-item:nth-child(1) { animation-delay: .04s; }
  .sidebar-nav-item:nth-child(2) { animation-delay: .09s; }
  .sidebar-nav-item:nth-child(3) { animation-delay: .14s; }
  .sidebar-nav-item:nth-child(4) { animation-delay: .19s; }

  .sidebar-nav-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: inherit;
    background: var(--primary);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
  }

  .sidebar-nav-item:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 10%, transparent);
  }

  .sidebar-nav-item.active::before {
    transform: scaleY(.55);
  }

  .sidebar-nav-item svg {
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
  }

  .sidebar-nav-item:hover svg {
    transform: scale(1.08);
  }

  .sidebar-nav-item:active {
    transform: translateX(1px) scale(.985);
  }
}

@keyframes sidebarSakuraArrive {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: .96; transform: translateY(0) scale(1); }
}

@keyframes sidebarBranchDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes sidebarBloomIn {
  from { opacity: 0; scale: .35; }
  to { opacity: 1; scale: 1; }
}

@keyframes sidebarNavArrive {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-sakura-art,
  .sidebar-sakura-art .sakura-branch-main,
  .sidebar-sakura-art .sakura-branch-small,
  .sidebar-sakura-art .sakura-bloom,
  .sidebar-nav-item {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}


/* =========================================================
   PRESENNT — SAKURA SIDEBAR REFINEMENT
   ========================================================= */
@media (min-width: 769px) {
  /* The blossom branch is exclusive to Sakura and doesn't reserve space in other themes. */
  .desktop-sidebar .sidebar-sakura-art {
    display: none;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-bottom {
    min-height: 178px;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art {
    display: block;
    max-width: 250px;
    opacity: .98;
    animation: sidebarSakuraArrive .95s cubic-bezier(.16, 1, .3, 1) both;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art .sakura-branch-main {
    stroke-dasharray: 380;
    stroke-dashoffset: 380;
    animation: sidebarBranchDraw 1.35s cubic-bezier(.16, 1, .3, 1) .1s forwards;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art .sakura-branch-small {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: sidebarBranchDraw 1s cubic-bezier(.16, 1, .3, 1) .32s forwards;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art .sakura-bloom {
    animation: sidebarBloomIn .72s cubic-bezier(.16, 1, .3, 1) both;
  }

  .desktop-sidebar .sidebar-nav-item {
    border-radius: 17px;
    border-color: transparent;
    transition:
      background-color .34s cubic-bezier(.22, 1, .36, 1),
      color .3s cubic-bezier(.22, 1, .36, 1),
      transform .38s cubic-bezier(.22, 1, .36, 1),
      box-shadow .38s cubic-bezier(.22, 1, .36, 1);
    animation: sidebarNavArrive .65s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  .desktop-sidebar .sidebar-nav-item::before {
    display: none;
  }

  .desktop-sidebar .sidebar-nav-item.active {
    border-color: transparent !important;
    border-radius: 17px;
    color: var(--primary-dark, var(--text-main));
    background: color-mix(in srgb, var(--primary, var(--text-main)) 9%, transparent);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--primary, var(--text-main)) 7%, transparent);
  }

  .desktop-sidebar .sidebar-nav-item:hover {
    transform: translateX(2px);
    box-shadow: 0 5px 17px color-mix(in srgb, var(--primary, var(--text-main)) 7%, transparent);
  }

  .desktop-sidebar .sidebar-nav-item.active:hover {
    background: color-mix(in srgb, var(--primary, var(--text-main)) 14%, transparent);
  }

  .desktop-sidebar .sidebar-nav-item svg {
    transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  }

  .desktop-sidebar .sidebar-nav-item:hover svg {
    transform: scale(1.045);
  }

  .desktop-sidebar .sidebar-nav-item:active {
    transform: scale(.985);
  }

  .desktop-sidebar .sidebar-nav-item:focus-visible {
    outline: 2px solid var(--primary, var(--apple-blue));
    outline-offset: 3px;
  }
}

@keyframes sidebarNavArrive {
  from { opacity: 0; transform: translate3d(-6px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-sidebar .sidebar-sakura-art,
  .desktop-sidebar .sidebar-sakura-art *,
  .desktop-sidebar .sidebar-nav-item {
    animation: none !important;
    transition: none !important;
  }
}


/* Keep generic sidebar decoration neutral outside Sakura. */
@media (min-width: 769px) {
  .desktop-sidebar .sidebar-credit-dot {
    background: var(--text-sub);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-sub) 14%, transparent);
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-credit-dot {
    background: #F46299;
    box-shadow: 0 0 0 4px rgba(244, 98, 153, .14);
  }
}


/* =========================================================
   PRESENNT — CLEAN BORDERLESS CARDS
   Remove decorative box strokes across dashboards, timetable,
   statistics and other card-style surfaces. Keep form controls
   and keyboard focus indicators intact.
   ========================================================= */
:is(
  .dash-card,
  .day-column,
  .calendar-container,
  .calendar-grid,
  .calendar-cell,
  .calendar-header,
  .calendar-day-header,
  .time-label,
  .day-column.today,
  .modal,
  .modal-content,
  .mobile-class-sheet,
  .section-card,
  .stat-card,
  .stats-card,
  .stat-box,
  .dashboard-card,
  .dashboard-panel,
  .chart-card,
  .settings-card,
  .class-card,
  .attendance-card,
  .theme-card,
  .theme-option,
  .summary-card,
  .info-card,
  .panel-card,
  .card,
  .box-card,
  .class-box,
  .stats-box,
  .stat-tile,
  .metric-card
) {
  border: 0 !important;
}

.day-column.today {
  box-shadow: var(--shadow-subtle) !important;
}

.day-header {
  border-bottom: 0 !important;
}

/* Compact, monochrome Sakura branch — Sakura theme only. */
@media (min-width: 769px) {
  .desktop-sidebar .sidebar-sakura-art {
    display: none;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art {
    display: block;
    width: 100%;
    max-width: 178px;
    margin: 0 auto -4px;
    opacity: .68;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art svg {
    width: 100%;
    height: auto;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art svg * {
    stroke: #F46299;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art .sakura-bloom,
  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art .sakura-bloom * {
    fill: #F46299;
  }

  [data-theme="sakura"] .desktop-sidebar .sidebar-sakura-art .sakura-bloom {
    opacity: .9;
  }
}


/* =========================================================
   PRESENNT — PASTEL DESKTOP DASHBOARD REFRESH
   Desktop-only visual layer. Existing IDs and app logic stay intact.
   ========================================================= */
@media (min-width: 769px) {
  :root {
    --presennt-pink: #F16B9A;
    --presennt-ink: #263653;
    --presennt-muted: #7B8BAA;
    --presennt-line: #E5EAF3;
    --presennt-bg: #F8F9FD;
  }

  body {
    background: var(--presennt-bg);
    background-image:
      radial-gradient(ellipse at 78% 0%, rgba(241,107,154,.055), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.55), transparent 55%);
    color: var(--presennt-ink);
    padding: 28px 30px 34px 314px;
  }

  .desktop-sidebar {
    width: 294px;
    padding: 28px 19px 18px;
    background: rgba(255,255,255,.82);
    border-right: 1px solid rgba(229,234,243,.72);
    box-shadow: 8px 0 32px rgba(40,64,105,.025);
    backdrop-filter: blur(22px);
  }

  .desktop-greeting {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
  }

  .desktop-greeting-icon {
    display: grid;
    place-items: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFF8E9;
    color: #F7B52B;
    font-size: 32px;
    line-height: 1;
  }

  .desktop-greeting-copy h1 {
    margin: 0;
    color: var(--presennt-ink);
    font-size: clamp(20px, 1.65vw, 24px);
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.55px;
  }

  .desktop-greeting-copy p {
    margin: 7px 0 0;
    color: var(--presennt-muted);
    font-size: 13px;
    line-height: 1.4;
  }

  body > header {
    display: flex;
    min-height: 64px;
    gap: 22px;
    margin-bottom: 28px;
  }

  body > header .app-logo { display: none; }
  body > header .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
  }

  body > header .header-actions > .btn,
  body > header .header-actions .dropdown > .btn {
    min-height: 46px;
    padding: 0 19px;
    border: 1px solid rgba(229,234,243,.85);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: var(--presennt-ink);
    box-shadow: 0 5px 16px rgba(35,61,108,.055);
    font-size: 13px;
    font-weight: 550;
    white-space: nowrap;
  }

  body > header .header-actions #add-class-btn {
    padding: 0 22px;
    color: #fff;
    border-color: transparent;
    background: var(--presennt-pink);
    box-shadow: 0 7px 18px rgba(241,107,154,.2);
  }

  body > header .header-actions > .btn:hover,
  body > header .header-actions .dropdown > .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(35,61,108,.08);
  }

  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 26px;
  }

  .dash-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 132px;
    padding: 22px 20px;
    border: 1px solid rgba(229,234,243,.65) !important;
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 8px 24px rgba(36,59,102,.045);
  }

  .dash-card:nth-child(1) { background: linear-gradient(140deg,#fff,rgba(241,239,255,.72)); }
  .dash-card:nth-child(2) { background: linear-gradient(140deg,#fff,rgba(234,250,239,.7)); }
  .dash-card:nth-child(3) { background: linear-gradient(140deg,#fff,rgba(255,239,244,.72)); }
  .dash-card:nth-child(4) { background: linear-gradient(140deg,#fff,rgba(237,245,255,.8)); }

  .dash-info { min-width: 0; }
  .dash-info p {
    margin: 0 0 8px;
    color: var(--presennt-muted);
    font-size: 13px;
    font-weight: 550;
  }
  .dash-info .num {
    color: var(--presennt-ink) !important;
    font-size: clamp(25px, 2.1vw, 32px);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.05;
  }

  .dash-card::before {
    content: "";
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    order: -1;
    border-radius: 50%;
    background: rgba(116,100,255,.12);
  }
  .dash-card:nth-child(2)::before { background: rgba(36,173,101,.13); }
  .dash-card:nth-child(3)::before { background: rgba(235,79,125,.13); }
  .dash-card:nth-child(4)::before { display: none; }

  .circular-progress { flex: 0 0 78px; width: 78px; height: 78px; }
  .circular-progress svg { width: 78px; height: 78px; }
  .circular-progress .bg-circle { stroke: #DDEBFA; }
  .circular-progress .fg-circle { stroke: #3986F6; }
  .percentage-text { color: var(--presennt-ink); font-size: 15px; font-weight: 700; }

  .week-nav {
    display: grid;
    grid-template-columns: auto minmax(190px,1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 17px 18px;
    margin: 0;
    border: 1px solid rgba(229,234,243,.8);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 26px rgba(36,59,102,.035);
  }

  .week-nav-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    order: 0;
  }

  .week-nav-controls .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    min-width: 42px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--presennt-line);
    background: #fff;
    color: var(--presennt-ink);
    font-size: 12px;
    white-space: nowrap;
  }
  #prev-week-btn, #next-week-btn { font-size: 0; width: 42px; padding: 0; }
  #prev-week-btn::after { content: "‹"; font-size: 25px; line-height: 1; }
  #next-week-btn::after { content: "›"; font-size: 25px; line-height: 1; }
  #today-btn { color: var(--presennt-pink); border-color: rgba(241,107,154,.22); background: rgba(241,107,154,.07); }
  #reset-btn { min-width: 42px; padding: 0 10px; }

  .current-week-display {
    order: 1;
    text-align: left;
    color: var(--presennt-ink);
    font-size: 15px;
    font-weight: 650;
  }

  .calendar-legend {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  .calendar-legend .legend-item {
    padding: 10px 13px;
    border-radius: 999px;
    background: rgba(241,107,154,.09);
    color: var(--presennt-pink);
    font-size: 12px;
    white-space: nowrap;
  }
  .calendar-legend .legend-item + .legend-item { display: none; }

  .calendar-container {
    overflow: visible;
    padding: 0 14px 16px;
    border: 1px solid rgba(229,234,243,.8) !important;
    border-top: 0;
    border-radius: 0 0 20px 20px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 28px rgba(36,59,102,.04);
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  .day-column {
    min-width: 0;
    min-height: 450px;
    padding: 11px 8px;
    border: 1px solid var(--presennt-line) !important;
    border-radius: 16px;
    background: rgba(255,255,255,.62);
    box-shadow: none;
  }

  .day-column.today {
    background: rgba(255,241,247,.72);
    border: 1px solid rgba(241,107,154,.48) !important;
    box-shadow: 0 0 0 2px rgba(241,107,154,.045) !important;
  }

  .day-header {
    text-align: left;
    padding: 4px 3px 12px;
    margin-bottom: 9px;
    border-bottom: 0 !important;
  }
  .day-name { font-size: 11px; letter-spacing: .25px; color: var(--presennt-muted); }
  .day-date { margin-top: 5px; font-size: 14px; font-weight: 650; color: var(--presennt-ink); }
  .classes-list { gap: 8px; }

  .class-card {
    gap: 7px;
    padding: 12px 9px 10px;
    border: 1px solid rgba(229,234,243,.7) !important;
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 4px 12px rgba(36,59,102,.035);
    transform: none;
  }
  .class-card:hover { transform: translateY(-1px); box-shadow: 0 7px 15px rgba(36,59,102,.065); }
  .color-bar { display: none; }
  .class-card-header { padding-left: 0; gap: 5px; }
  .class-title { color: var(--presennt-ink); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
  .type-tag { font-size: 9px; padding: 2px 4px; margin-top: 4px; }
  .class-time { color: var(--presennt-muted); font-size: 10px; line-height: 1.4; margin-top: 4px; }
  .class-details { padding-left: 0; font-size: 10px; }
  .class-card .card-menu-btn { width: 22px; height: 22px; min-width: 22px; padding: 0; font-size: 12px; }

  .attendance-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
  }
  .attendance-actions .att-btn {
    display: inline-flex;
    flex: 0 0 27px;
    width: 27px;
    min-width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background: #F0F3F8;
    box-shadow: none;
    position: relative;
  }
  .attendance-actions .att-btn::first-letter { font-size: 13px; }
  .attendance-actions .att-btn[data-status="attended"] { background: rgba(36,173,101,.12); }
  .attendance-actions .att-btn[data-status="missed"] { background: rgba(235,79,125,.12); }
  .attendance-actions .att-btn[data-status="watched"] { background: rgba(57,134,246,.12); }
  .attendance-actions .att-btn[data-status="pending"] { background: rgba(139,151,171,.14); }
  .attendance-actions .att-btn:hover { filter: brightness(.96); transform: none; }
  .attendance-actions .att-btn[data-status="attended"]::after { content: "✓"; color: #24AD65; font-size: 14px; }
  .attendance-actions .att-btn[data-status="missed"]::after { content: "×"; color: #EB4F7D; font-size: 17px; }
  .attendance-actions .att-btn[data-status="watched"]::after { content: "▶"; color: #3986F6; font-size: 11px; }
  .attendance-actions .att-btn[data-status="pending"]::after { content: "◷"; color: #8B97AB; font-size: 15px; }
  .attendance-actions .att-btn:focus-visible { outline: 2px solid var(--presennt-pink); outline-offset: 2px; }
  .status-badge { gap: 5px; padding: 5px 6px; font-size: 10px; }
  .status-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reset-status-btn { flex: 0 0 auto; color: var(--presennt-pink); }

  .empty-day {
    min-height: 240px;
    gap: 8px;
    color: var(--presennt-muted);
    text-align: center;
    line-height: 1.55;
  }

  .sidebar-sakura-art { max-width: 178px; opacity: .5; }
}

@media (min-width: 769px) and (max-width: 1120px) {
  body { padding-left: 270px; padding-right: 20px; }
  .desktop-sidebar { width: 250px; }
  .dashboard-grid { gap: 10px; }
  .dash-card { padding: 16px 12px; gap: 8px; }
  .dash-card::before { flex-basis: 34px; width: 34px; height: 34px; }
  .circular-progress, .circular-progress svg { width: 62px; height: 62px; flex-basis: 62px; }
  .week-nav { grid-template-columns: auto minmax(130px,1fr); }
  .calendar-legend { display: none; }
  .calendar-grid { gap: 5px; }
  .day-column { padding: 8px 5px; }
  .class-title { font-size: 11px; }
  .attendance-actions { gap: 3px; }
  .attendance-actions .att-btn { flex-basis: 23px; width: 23px; min-width: 23px; height: 23px; }
}

@media (max-width: 768px) {
  .desktop-greeting { display: none !important; }
}

/* PRESENNT refinement pass */
@media (min-width:769px) {
 .dash-stat-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;margin-right:auto}
 .dash-stat-icon svg{width:25px;height:25px}
 .total-stat-icon{color:#6756F5;background:rgba(103,86,245,.13)}
 .attended-stat-icon{color:#24AD65;background:rgba(36,173,101,.14)}
 .missed-stat-icon{color:#EB4F7D;background:rgba(235,79,125,.19)}
 .attendance-stat-icon{color:#3986F6;background:rgba(57,134,246,.12)}
 .dash-card::before{display:none!important}
 .dash-card.missed-dashboard-card{background:linear-gradient(140deg,#fff,rgba(255,225,234,.94))!important}
 .dash-card.missed-dashboard-card .dash-stat-icon{background:rgba(235,79,125,.22)}
 #stat-missed{color:#D92F65!important}
 #add-class-btn{font-weight:500!important;display:inline-flex;align-items:center;justify-content:center;gap:9px}
 #add-class-btn .add-class-plus{display:block;flex:0 0 18px}
 .calendar-grid .day-header .day-date{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:4px 9px;border-radius:9px;background:rgba(57,134,246,.09);color:var(--presennt-ink)}
 [data-theme="sakura"] .calendar-grid .day-header .day-date{background:rgba(241,107,154,.13)}
 .class-card.status-missed{background:rgba(235,79,125,.095)!important;border-color:rgba(235,79,125,.24)!important}
 .class-card.status-attended{background:rgba(36,173,101,.075)!important;border-color:rgba(36,173,101,.22)!important}
 .class-card.status-watched{background:rgba(57,134,246,.075)!important;border-color:rgba(57,134,246,.22)!important}
 .class-card.status-pending{background:rgba(139,151,171,.055)!important}
 .theme-card[data-theme="coffee"],.theme-card[data-theme="bamboo"]{display:none!important}
 .desktop-sidebar .sidebar-nav-item#sidebar-settings-btn{display:none}
 .desktop-sidebar .sidebar-bottom{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 .desktop-sidebar .sidebar-settings-dropdown{width:100%}
 .desktop-sidebar .sidebar-settings-dropdown #menu-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;border:0;border-radius:16px;background:transparent;color:#7B8BAA;text-align:left;box-shadow:none;font-size:15px}
 .desktop-sidebar .sidebar-settings-dropdown #menu-btn .settings-arrow{margin-left:auto}
 .desktop-sidebar .sidebar-settings-dropdown .dropdown-menu{top:auto;left:0;right:auto;bottom:100%;width:100%;margin-bottom:8px}
 .desktop-sidebar .sidebar-auth-action{width:100%;justify-content:flex-start;border-radius:14px}
}

/* Coffee and Bamboo are retired themes across all layouts. */
.theme-card[data-theme="coffee"],
.theme-card[data-theme="bamboo"] { display:none !important; }

/* Settings opens as a theme-aware, translucent page-level panel. */
html:not([data-theme="sakura"]):not([data-theme="coffee"]):not([data-theme="bamboo"]) {
  --settings-accent: #3986F6;
  --settings-accent-soft: rgba(57,134,246,.10);
  --settings-panel: rgba(255,255,255,.76);
  --settings-text: #263653;
  --settings-muted: #7B8BAA;
  --settings-line: rgba(220,231,246,.8);
}
html[data-theme="sakura"] {
  --settings-accent: #F46299;
  --settings-accent-soft: rgba(244,98,153,.12);
  --settings-panel: rgba(255,250,252,.78);
  --settings-text: #30282B;
  --settings-muted: #786C70;
  --settings-line: rgba(248,199,217,.72);
}
html[data-theme="coffee"],html[data-theme="bamboo"] {
  --settings-accent: #3986F6;
  --settings-accent-soft: rgba(57,134,246,.10);
  --settings-panel: rgba(255,255,255,.76);
  --settings-text: #263653;
  --settings-muted: #7B8BAA;
  --settings-line: rgba(220,231,246,.8);
}
body:has(#settings-menu.show)::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(28,43,67,.13);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
#settings-menu.dropdown-menu.show {
  position:fixed !important;
  z-index:9999 !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:min(410px,calc(100vw - 32px)) !important;
  max-height:min(76vh,680px);
  overflow-y:auto;
  transform:translate(-50%,-50%);
  padding:12px;
  border:1px solid var(--settings-line) !important;
  border-radius:22px !important;
  background:var(--settings-panel) !important;
  color:var(--settings-text) !important;
  box-shadow:0 24px 80px rgba(25,43,75,.2) !important;
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
  animation:presenntSettingsIn .18s ease-out;
}
@keyframes presenntSettingsIn {
  from { opacity:0; }
  to { opacity:1; }
}
#settings-menu .dropdown-item {
  display:flex;
  align-items:center;
  width:100%;
  min-height:44px;
  padding:11px 14px;
  border:0 !important;
  border-radius:13px;
  background:transparent;
  color:var(--settings-text) !important;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  text-align:left;
}
#settings-menu .dropdown-item:hover,
#settings-menu .dropdown-item:focus-visible {
  background:var(--settings-accent-soft) !important;
  outline:none;
}
#settings-menu .dropdown-item.danger { color:#D94367 !important; }
.desktop-sidebar .sidebar-nav-item,
.desktop-sidebar #sidebar-settings-btn {
  font-family:inherit;
  font-size:15px;
  font-weight:500;
}
.desktop-sidebar #sidebar-settings-btn {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
}
.desktop-sidebar #sidebar-settings-btn:hover,
.desktop-sidebar #sidebar-settings-btn.active {
  color:var(--settings-accent,#3986F6);
}
.desktop-sidebar .sidebar-settings-dropdown #menu-btn { display:none !important; }
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item.active,
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item:hover {
  color:#3986F6 !important;
  background:rgba(57,134,246,.09) !important;
}
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item.active svg,
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item:hover svg { fill:currentColor; }
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item.active span,
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item:hover span { color:#3986F6 !important; }

/* Default theme uses blue as its only primary accent; Sakura keeps pink. */
html:not([data-theme="sakura"]):not([data-theme="coffee"]):not([data-theme="bamboo"]) {
  --presennt-pink:#3986F6;
  --settings-accent:#3986F6;
  --settings-accent-soft:rgba(57,134,246,.10);
}
html:not([data-theme="sakura"]) .dash-card.missed-dashboard-card {
  background:linear-gradient(140deg,#fff,rgba(235,242,253,.9)) !important;
}
html:not([data-theme="sakura"]) .dash-card.missed-dashboard-card .dash-stat-icon {
  background:rgba(57,134,246,.12) !important;
  color:#3986F6 !important;
}
html:not([data-theme="sakura"]) #stat-missed { color:#263653 !important; }
html:not([data-theme="sakura"]) .calendar-grid .day-column.today {
  background:rgba(57,134,246,.045);
  border-color:rgba(57,134,246,.38) !important;
}
html:not([data-theme="sakura"]) .class-card.status-missed {
  border-color:rgba(235,79,125,.2) !important;
}
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item.active,
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item:hover {
  background:rgba(57,134,246,.09) !important;
  color:#3986F6 !important;
}
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item.active span,
html:not([data-theme="sakura"]) .desktop-sidebar .sidebar-nav-item:hover span {
  color:#3986F6 !important;
}


/* Fix: keep the visible Settings navigation item enabled. */
@media (min-width:769px) {
  .desktop-sidebar .sidebar-nav-item#sidebar-settings-btn {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:48px;
    cursor:pointer;
  }
  .desktop-sidebar .sidebar-nav-item#sidebar-settings-btn > span {
    display:inline !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* Settings panel: viewport-centered modal with a smooth entrance. */
#settings-menu.settings-modal-panel {
  display:none;
  position:fixed !important;
  inset:50% auto auto 50% !important;
  z-index:10001 !important;
  width:min(410px,calc(100vw - 32px)) !important;
  max-height:min(76vh,680px);
  overflow-y:auto;
  margin:0 !important;
  transform:translate(-50%,-46%) scale(.97);
  transform-origin:center center;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.75,.25,1);
  border:1px solid var(--settings-line) !important;
  border-radius:22px !important;
  background:var(--settings-panel) !important;
  color:var(--settings-text) !important;
  box-shadow:0 24px 80px rgba(25,43,75,.2) !important;
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
}
#settings-menu.settings-modal-panel.show {
  display:block !important;
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
body.settings-modal-open::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(28,43,67,.14);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  animation:settingsBackdropIn .22s ease both;
}
@keyframes settingsBackdropIn {
  from { opacity:0; }
  to { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  #settings-menu.settings-modal-panel,
  body.settings-modal-open::after { transition:none; animation:none; }
}

/* Smoother Settings modal motion: short fade + gentle lift, no abrupt jump. */
#settings-menu.settings-modal-panel {
  display:block !important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-46%) scale(.965);
  transition:opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
  will-change:opacity,transform;
}
#settings-menu.settings-modal-panel.show {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s;
}
body.settings-modal-open::after {
  animation:settingsBackdropIn .28s ease both;
}
@media (prefers-reduced-motion:reduce) {
  #settings-menu.settings-modal-panel,
  #settings-menu.settings-modal-panel.show { transition:none; }
}


/* Consistent SVG icon styling in the Settings panel. */
#settings-menu .dropdown-item {
  gap: 12px;
}
#settings-menu .dropdown-item > svg {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--settings-muted);
}
#settings-menu .dropdown-item:hover > svg,
#settings-menu .dropdown-item:focus-visible > svg {
  color: var(--settings-accent);
}
#settings-menu .dropdown-item.danger > svg {
  color: #D94367;
}
#settings-menu .dropdown-item > span {
  min-width: 0;
}


/* The legacy header Settings trigger is only a hidden JS hook, never a visible control. */
.header-actions > .settings-menu-host,
#menu-btn[hidden] {
  display: none !important;
}

/* Keep the page blur/backdrop synchronized with the actual open modal state. */
body:not(.settings-modal-open)::after {
  content: none !important;
}


/* Settings layout hard-fix: the legacy host belongs in the sidebar, never beside Add Class. */
header#dashboard-home .header-actions .settings-menu-host {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
@media (min-width: 769px) {
  .desktop-sidebar .sidebar-nav #sidebar-settings-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* Use one backdrop only; duplicate ::before/::after layers caused excessive blur. */
body:has(#settings-menu.show)::before {
  content: none !important;
  display: none !important;
}


/* Blur only the page content behind Settings; keep the Settings panel crisp. */
body.settings-modal-open > *:not(#settings-menu) {
  filter: blur(6px) !important;
  transition: filter .2s ease;
}
body:not(.settings-modal-open) > *:not(#settings-menu) {
  filter: none;
}
body.settings-modal-open::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(0, 0, 0, .16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}
body:has(#settings-menu.show)::before {
  content: none !important;
  display: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#settings-menu.settings-modal-panel {
  z-index: 10001 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* PRESENNT polish: make the Settings panel more opaque and readable. */
#settings-menu.settings-modal-panel {
  background: rgba(255, 255, 255, .97) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}
html[data-theme="sakura"] #settings-menu.settings-modal-panel {
  background: rgba(255, 250, 252, .97) !important;
}
html[data-theme="coffee"] #settings-menu.settings-modal-panel {
  background: rgba(250, 246, 240, .97) !important;
}
html[data-theme="bamboo"] #settings-menu.settings-modal-panel {
  background: rgba(247, 243, 232, .97) !important;
}

/* Centered four-dot loader while the class data is loading. */
.calendar-loading-state {
  grid-column: 1 / -1;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.calendar-loading-state .loader {
  height: 30px;
  width: 75px;
  --_g: no-repeat radial-gradient(farthest-side, var(--apple-blue) 90%, #0000);
  background: var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 20% 50%;
  animation: presenntLoader43 1s infinite linear;
}
@keyframes presenntLoader43 {
  0% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%; }
  16.67% { background-position: calc(0*100%/3) 0, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%; }
  33.33% { background-position: calc(0*100%/3) 100%, calc(1*100%/3) 0, calc(2*100%/3) 50%, calc(3*100%/3) 50%; }
  50% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 100%, calc(2*100%/3) 0, calc(3*100%/3) 50%; }
  66.67% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 100%, calc(3*100%/3) 0; }
  83.33% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 100%; }
  100% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%; }
}
@media (max-width: 768px) {
  .calendar-loading-state { min-height: 360px; }
}


/* Final contrast polish: nearly solid Settings surfaces. */
#settings-menu.settings-modal-panel {
  background: rgba(255, 255, 255, .995) !important;
}
html[data-theme="sakura"] #settings-menu.settings-modal-panel {
  background: rgba(255, 250, 252, .995) !important;
}
html[data-theme="coffee"] #settings-menu.settings-modal-panel {
  background: rgba(250, 246, 240, .995) !important;
}
html[data-theme="bamboo"] #settings-menu.settings-modal-panel {
  background: rgba(247, 243, 232, .995) !important;
}

/* Loader uses the default blue, switching to Sakura pink with the theme. */
.calendar-loading-state .loader {
  --_loader-color: var(--apple-blue, #3986F6);
  --_g: no-repeat radial-gradient(farthest-side, var(--_loader-color) 90%, #0000);
}
html[data-theme="sakura"] .calendar-loading-state .loader {
  --_loader-color: #F46299;
}


/* Final Settings separation: darken only the page behind the panel and remove its outline. */
body.settings-modal-open::after {
  background: rgba(0, 0, 0, .24) !important;
  z-index: 10000 !important;
}
#settings-menu.settings-modal-panel {
  border: 0 !important;
  outline: 0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .24) !important;
}
html[data-theme="sakura"] #settings-menu.settings-modal-panel {
  background: #FFFAFC !important;
}
html[data-theme="coffee"] #settings-menu.settings-modal-panel {
  background: #FAF6F0 !important;
}
html[data-theme="bamboo"] #settings-menu.settings-modal-panel {
  background: #F7F3E8 !important;
}


/* Definitive fix: backdrop must sit below the Settings panel, never over it. */
body.settings-modal-open::after {
  z-index: 9999 !important;
  background: rgba(0, 0, 0, .24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}
#settings-menu.settings-modal-panel,
#settings-menu.settings-modal-panel.show {
  z-index: 10001 !important;
  opacity: 1;
  border: none !important;
  outline: none !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
}
html[data-theme="sakura"] #settings-menu.settings-modal-panel,
html[data-theme="sakura"] #settings-menu.settings-modal-panel.show {
  background-color: #FFFAFC !important;
}
html[data-theme="coffee"] #settings-menu.settings-modal-panel,
html[data-theme="coffee"] #settings-menu.settings-modal-panel.show {
  background-color: #FAF6F0 !important;
}
html[data-theme="bamboo"] #settings-menu.settings-modal-panel,
html[data-theme="bamboo"] #settings-menu.settings-modal-panel.show {
  background-color: #F7F3E8 !important;
}


/* Restore the Settings panel's original translucent opacity. */
#settings-menu.settings-modal-panel,
#settings-menu.settings-modal-panel.show {
  background: rgba(255, 255, 255, .76) !important;
  background-color: rgba(255, 255, 255, .76) !important;
  background-image: none !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}
html[data-theme="sakura"] #settings-menu.settings-modal-panel,
html[data-theme="sakura"] #settings-menu.settings-modal-panel.show {
  background: rgba(255, 250, 252, .78) !important;
  background-color: rgba(255, 250, 252, .78) !important;
}
html[data-theme="coffee"] #settings-menu.settings-modal-panel,
html[data-theme="coffee"] #settings-menu.settings-modal-panel.show {
  background: rgba(250, 246, 240, .76) !important;
  background-color: rgba(250, 246, 240, .76) !important;
}
html[data-theme="bamboo"] #settings-menu.settings-modal-panel,
html[data-theme="bamboo"] #settings-menu.settings-modal-panel.show {
  background: rgba(247, 243, 232, .76) !important;
  background-color: rgba(247, 243, 232, .76) !important;
}

/* Calendar icon tile for Weekly View: blue by default, pink in Sakura. */
.calendar-legend .weekly-legend-icon {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 5px;
  border-radius: 8px;
  color: #3986F6 !important;
  background: rgba(57, 134, 246, .12);
  stroke: currentColor;
}
html[data-theme="sakura"] .calendar-legend .weekly-legend-icon {
  color: #F46299 !important;
  background: rgba(244, 98, 153, .15);
}


/* Theme-aware active Today / Weekly selector: blue by default, pink in Sakura. */
@media (max-width: 768px) {
  .mobile-view-switcher {
    background: rgba(57, 134, 246, .10) !important;
    border: 1px solid rgba(57, 134, 246, .12);
  }
  .mobile-view-btn.active {
    background: #3986F6 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(57, 134, 246, .22) !important;
  }
  .mobile-view-btn:not(.active):hover {
    background: rgba(57, 134, 246, .07);
    color: #3986F6;
  }
  html[data-theme="sakura"] .mobile-view-switcher {
    background: rgba(244, 98, 153, .10) !important;
    border-color: rgba(244, 98, 153, .15);
  }
  html[data-theme="sakura"] .mobile-view-btn.active {
    background: #F46299 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(244, 98, 153, .22) !important;
  }
  html[data-theme="sakura"] .mobile-view-btn:not(.active):hover {
    background: rgba(244, 98, 153, .08);
    color: #D94C83;
  }
}

/* Smoothly animate calendar changes on desktop and mobile navigation. */
.calendar-grid {
  transform-origin: center top;
}
.calendar-grid.view-changing {
  animation: presenntCalendarSlide .42s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes presenntCalendarSlide {
  0% { opacity: .25; transform: translateY(9px) scale(.985); }
  65% { opacity: .88; transform: translateY(-1px) scale(1.003); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-grid.view-changing {
    animation: none !important;
  }
}


/* PRESENNT visibility fix: make the desktop Today control and Weekly View
   marker visibly blue in the default theme, while preserving Sakura pink. */
#today-btn {
  background: #3986F6 !important;
  border-color: #3986F6 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(57, 134, 246, .20) !important;
}
#today-btn:hover {
  background: #2875E8 !important;
  border-color: #2875E8 !important;
}
html[data-theme="sakura"] #today-btn {
  background: #F46299 !important;
  border-color: #F46299 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(244, 98, 153, .20) !important;
}
html[data-theme="sakura"] #today-btn:hover {
  background: #E94F89 !important;
  border-color: #E94F89 !important;
}

/* Make the Weekly View legend marker read as a clear blue tile. */
.calendar-legend .legend-item:first-child .weekly-legend-icon {
  box-sizing: border-box !important;
  width: 28px !important;
  height: 28px !important;
  padding: 5px !important;
  border-radius: 8px !important;
  background: rgba(57, 134, 246, .14) !important;
  color: #3986F6 !important;
}
html[data-theme="sakura"] .calendar-legend .legend-item:first-child .weekly-legend-icon {
  background: rgba(244, 98, 153, .16) !important;
  color: #F46299 !important;
}

/* Stronger, reliably retriggerable transition whenever the timetable rerenders. */
.calendar-grid.view-changing {
  animation: presenntCalendarSlide .58s cubic-bezier(.2, .75, .25, 1) both !important;
  will-change: opacity, transform;
}
@keyframes presenntCalendarSlide {
  0% { opacity: .08; transform: translateY(14px) scale(.975); }
  60% { opacity: .88; transform: translateY(-2px) scale(1.006); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-grid.view-changing {
    animation: none !important;
    will-change: auto;
  }
}


/* =========================================================
   PRESENNT — DESKTOP TIMETABLE TRANSITIONS (RETRIGGERABLE)
   The JavaScript toggles these classes after each week navigation.
   ========================================================= */
@media (min-width: 769px) {
  #calendar-grid.view-changing {
    animation: presenntCalendarSlide .58s cubic-bezier(.2, .75, .25, 1) both !important;
    will-change: opacity, transform;
  }

  #calendar-grid.view-changing-next {
    animation-name: presenntCalendarEnterFromRight !important;
  }

  #calendar-grid.view-changing-previous {
    animation-name: presenntCalendarEnterFromLeft !important;
  }

  #calendar-grid.view-changing-today {
    animation-name: presenntCalendarSlide !important;
  }

  #calendar-grid.view-changing .day-column {
    animation: presenntDayColumnEnter .48s cubic-bezier(.22, .61, .36, 1) both;
  }

  #calendar-grid.view-changing .day-column:nth-child(1) { animation-delay: 0ms; }
  #calendar-grid.view-changing .day-column:nth-child(2) { animation-delay: 45ms; }
  #calendar-grid.view-changing .day-column:nth-child(3) { animation-delay: 90ms; }
  #calendar-grid.view-changing .day-column:nth-child(4) { animation-delay: 135ms; }
  #calendar-grid.view-changing .day-column:nth-child(5) { animation-delay: 180ms; }
  #calendar-grid.view-changing .day-column:nth-child(6) { animation-delay: 225ms; }
  #calendar-grid.view-changing .day-column:nth-child(7) { animation-delay: 270ms; }
}

@keyframes presenntCalendarEnterFromRight {
  0% { opacity: .08; transform: translate3d(64px, 12px, 0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes presenntCalendarEnterFromLeft {
  0% { opacity: .08; transform: translate3d(-64px, 12px, 0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes presenntDayColumnEnter {
  0% { opacity: .05; transform: translate3d(0, 28px, 0) scale(.97); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Respect reduced-motion preferences with a brief fade rather than a slide. */
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  #calendar-grid.view-changing {
    animation: presenntCalendarReducedFade .18s ease-out both !important;
  }

  #calendar-grid.view-changing .day-column {
    animation: none !important;
  }
}

@keyframes presenntCalendarReducedFade {
  from { opacity: .65; }
  to { opacity: 1; }
}


/* Remove the extra background panel behind the timetable.
   Keep the individual weekday cards as the only visible timetable surfaces. */
#my-classes-section.calendar-container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
#my-classes-section #calendar-grid {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="sakura"] #my-classes-section.calendar-container,
html[data-theme="sakura"] #my-classes-section #calendar-grid {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   PRESENNT — ONE CONTINUOUS WEEK HEADER + TIMETABLE PANEL
   The week/date row's background now continues to the bottom
   of the timetable instead of looking like a separate strip.
   ========================================================= */
@media (min-width: 769px) {
  .timetable-panel {
    overflow: hidden;
    border: 1px solid rgba(229,234,243,.8);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 28px rgba(36,59,102,.04);
  }

  .week-nav {
    border: 0 !important;
    border-radius: 20px 20px 0 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .calendar-container {
    border: 0 !important;
    border-radius: 0 0 20px 20px;
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 16px;
  }

  [data-theme="sakura"] .timetable-panel {
    background: var(--sakura-card, #fff7f9);
    border-color: var(--sakura-border, #f4bfd0);
    box-shadow: 0 10px 28px rgba(210,105,145,.06);
  }
}

@media (max-width: 768px) {
  .timetable-panel {
    display: contents;
  }
}

/* PRESENNT — soften the outer timetable backdrop without a visible stroke.
   Keep the week/date row visually connected to the timetable below it. */
.calendar-container {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

[data-theme="sakura"] .calendar-container {
  background: rgba(244, 98, 153, 0.07) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}



/* PENDING RECORDING DASHBOARD CARD */
.pending-recording-card {
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-width: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.pending-recording-card:hover:not(.is-empty) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.pending-recording-card:focus-visible {
  outline: 2px solid var(--apple-blue);
  outline-offset: 3px;
}
.pending-recording-card.is-empty {
  cursor: default;
}
.pending-recording-card.is-empty:hover {
  transform: none;
  box-shadow: none;
}
.pending-recording-icon {
  flex: 0 0 auto;
  color: #b47700;
  background: var(--warning-orange-bg);
}
.pending-recording-info {
  min-width: 0;
  flex: 1;
}
.pending-recording-title {
  margin-top: 5px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-main);
  overflow-wrap: anywhere;
}
.pending-recording-meta {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-sub);
}
.pending-recording-card .dash-stat-icon svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 480px) {
  .pending-recording-title { font-size: 15px; }
  .pending-recording-card { padding: 16px; gap: 11px; }
}

/* SINGLE PENDING RECORDING WARNING */
.pending-warning-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 20, 24, .42);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.pending-warning-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.pending-warning-dialog {
  width: min(100%, 390px);
  padding: 26px 24px 22px;
  text-align: center;
  color: var(--text-main);
  background: var(--card-bg);
  border: 1px solid rgba(255, 59, 48, .22);
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .2);
  transform: translateY(8px) scale(.98);
  transition: transform .2s ease;
}
.pending-warning-overlay.active .pending-warning-dialog {
  transform: translateY(0) scale(1);
}
.pending-warning-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 17px;
  color: #dc2626;
  background: rgba(255, 59, 48, .11);
}
.pending-warning-icon svg { width: 29px; height: 29px; }
.pending-warning-dialog h2 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.3;
}
.pending-warning-dialog p {
  margin: 0;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.55;
}
.pending-warning-current {
  margin: 16px 0 18px;
  padding: 11px 12px;
  border-radius: 12px;
  color: #b42318;
  background: rgba(255, 59, 48, .08);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pending-warning-dialog .btn { width: 100%; }


/* PENDING RECORDING — SINGLE ATTENTION BOUNCE */
.class-card.pending-recording-focus {
  position: relative;
  z-index: 21;
  outline: 3px solid #ff3b30;
  outline-offset: 3px;
  animation: pendingRecordingBounce .78s cubic-bezier(.34, 1.56, .64, 1) 1;
}

@keyframes pendingRecordingBounce {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(-10px) scale(1.025); }
  52%  { transform: translateY(0) scale(1); }
  72%  { transform: translateY(-4px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .class-card.pending-recording-focus {
    animation: none;
  }
}


/* MOBILE REFERENCE-INSPIRED LAYOUT */
.mobile-bottom-nav{display:none}
@media(max-width:768px){
  body{padding-bottom:calc(94px + env(safe-area-inset-bottom));}
  .dashboard-grid#statistics-section{
    display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
    margin:10px 0 12px;padding:10px;border-radius:22px;background:var(--card-bg);box-shadow:var(--shadow-subtle);
  }
  #statistics-section .dash-card{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-width:0;min-height:94px;
    gap:6px;padding:10px 8px;border-radius:14px;box-shadow:none;border:1px solid var(--border-light);overflow:hidden;
  }
  #statistics-section .dash-stat-icon{width:25px;height:25px;min-width:25px;margin:0;border-radius:50%;display:grid;place-items:center}
  #statistics-section .dash-stat-icon svg{width:14px;height:14px}
  #statistics-section .dash-info{min-width:0;width:100%}
  #statistics-section .dash-info p{font-size:9px;line-height:1.2;margin:0 0 4px;white-space:normal}
  #statistics-section .dash-info .num{font-size:21px;line-height:1.1;font-weight:750}
  #statistics-section .pending-recording-title{font-size:12px;line-height:1.2;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  #statistics-section .pending-recording-meta{font-size:9px;line-height:1.25;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #statistics-section .pending-recording-card{gap:5px;padding:10px 8px;align-items:flex-start}
  .mobile-view-switcher{display:none !important}
  .calendar-container{overflow:visible !important;padding:8px 10px 12px !important;border-radius:0 0 22px 22px}
  #calendar-grid{display:block !important;min-width:0 !important;width:100%}
  #calendar-grid:not(.today-mode) .day-column{display:none}
  #calendar-grid:not(.today-mode) .day-column.mobile-selected-day{display:flex;min-height:0;padding:10px;border:0;background:transparent;box-shadow:none}
  #calendar-grid .day-header{display:none}
  #calendar-grid .classes-list{gap:7px}
  #calendar-grid .class-card{margin:0;border-radius:14px;min-height:53px}
  .mobile-tap-hint{display:none !important}
  .mobile-bottom-nav{
    position:fixed;z-index:900;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    padding:9px 10px;background:rgba(255,255,255,.76);
    border:1px solid rgba(255,255,255,.62);border-radius:24px;
    box-shadow:0 8px 30px rgba(20,30,50,.13),inset 0 1px 0 rgba(255,255,255,.65);
    -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
    transform:translateZ(0);
  }
  /* Slide the mobile navigation out of view while a class modal or class sheet is open. */
  body.class-modal-open .mobile-bottom-nav,
  body.mobile-class-sheet-open .mobile-bottom-nav{
    transform:translate3d(0, calc(100% + 28px), 0) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:transform .34s cubic-bezier(.22,.8,.25,1), opacity .24s ease !important;
  }
  .mobile-bottom-nav{
    transition:transform .34s cubic-bezier(.22,.8,.25,1), opacity .24s ease;
  }
  @media (prefers-reduced-motion: reduce){
    .mobile-bottom-nav,
    body.class-modal-open .mobile-bottom-nav,
    body.mobile-class-sheet-open .mobile-bottom-nav{
      transition:none !important;
    }
  }
  .mobile-bottom-nav-item{
    min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:transparent;color:var(--text-sub);text-decoration:none;font:inherit;font-size:10px;font-weight:500;padding:2px 0;cursor:pointer;
  }
  .mobile-bottom-nav-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-bottom-nav-item.active{color:var(--accent-color,var(--apple-blue));font-weight:650}
  .mobile-bottom-nav-item.active svg{stroke-width:2.2}
  [data-theme="sakura"] .mobile-bottom-nav-item.active{color:#f05b91}
  [data-theme="sakura"] .mobile-bottom-nav{background:rgba(255,250,252,.76);border-color:rgba(255,255,255,.62)}
  [data-theme="coffee"] .mobile-bottom-nav{background:rgba(250,246,240,.76)}
  [data-theme="bamboo"] .mobile-bottom-nav{background:rgba(246,250,243,.76)}
}
@media(max-width:390px){
  .dashboard-grid#statistics-section{gap:5px;padding:8px}
  #statistics-section .dash-card{padding:8px 6px;min-height:92px}
  #statistics-section .dash-info p{font-size:8px}
  #statistics-section .dash-info .num{font-size:19px}
  #statistics-section .pending-recording-title{font-size:10px}
  #statistics-section .pending-recording-meta{font-size:8px}
}


/* Mobile timetable: compact week strip + a single visible selected day. */
@media (max-width: 768px) {
  .week-nav { display:flex !important; flex-direction:column; gap:8px; padding:10px 12px !important; margin-bottom:0 !important; }
  .week-nav-controls { display:none !important; }
  .week-nav .calendar-legend { display:none !important; }
  .current-week-display { order:0; width:100%; text-align:left; font-size:12px !important; padding:2px 2px 5px; }
  #mobile-date-strip {
    display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px;
    padding:9px 10px 8px; background:var(--card-bg); border-radius:16px 16px 0 0;
  }
  .mobile-date-chip {
    min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:8px 1px; border:1px solid var(--border-light); border-radius:12px;
    background:rgba(128,145,170,.045); color:var(--text-sub); font:inherit; cursor:pointer;
  }
  .mobile-date-chip span { font-size:9px; line-height:1; }
  .mobile-date-chip strong { font-size:10px; line-height:1.1; font-weight:650; white-space:nowrap; }
  .mobile-date-chip.active { background:var(--accent-color,var(--apple-blue)); border-color:var(--accent-color,var(--apple-blue)); color:#fff; box-shadow:0 3px 10px rgba(57,134,246,.18); }
  html[data-theme="sakura"] .mobile-date-chip.active { background:#f46299; border-color:#f46299; box-shadow:0 3px 10px rgba(244,98,153,.2); }
  html[data-theme="coffee"] .mobile-date-chip.active { background:#9a7255; border-color:#9a7255; }
  html[data-theme="bamboo"] .mobile-date-chip.active { background:#628b61; border-color:#628b61; }
  .calendar-container { border-radius:0 0 20px 20px !important; padding:8px 10px 12px !important; }
  #calendar-grid:not(.today-mode) .day-column { display:none !important; }
  #calendar-grid:not(.today-mode) .day-column.mobile-selected-day { display:flex !important; width:100%; min-width:0; }
  #calendar-grid .classes-list { width:100%; min-width:0; gap:7px; }
  #calendar-grid .class-card { width:100%; box-sizing:border-box; }
}
@media (max-width: 390px) {
  #mobile-date-strip { gap:4px; padding-left:8px; padding-right:8px; }
  .mobile-date-chip { padding:7px 0; border-radius:10px; }
  .mobile-date-chip span { font-size:8px; }
  .mobile-date-chip strong { font-size:9px; }
}


/* MOBILE TIMETABLE REPAIR — reference layout, navigation and status */
@media (max-width: 768px) {
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; }

  /* Keep bottom navigation visible above the phone safe area. */
  nav.mobile-bottom-nav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 9999 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* The compact week bar retains working previous/today/reset/next controls. */
  .week-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .week-nav-controls {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    gap: 4px;
  }
  .week-nav-controls .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 20px !important;
    line-height: 1;
  }
  .week-nav-controls .mobile-today-control {
    width: auto;
    min-width: 58px;
    gap: 4px;
    padding: 0 7px !important;
    font-size: 10px !important;
  }
  .mobile-today-control svg {
    width: 14px; height: 14px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .current-week-display {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    min-width: 0;
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.25;
    padding: 0 !important;
    overflow-wrap: anywhere;
  }
  .week-nav .calendar-legend { display: none !important; }
  .mobile-view-switcher { display: none !important; }

  /* Always show the timetable; weekly mode shows the selected day beneath the 7-day strip. */
  #my-classes-section.calendar-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 100px;
    overflow: visible !important;
    margin-top: 0 !important;
    padding: 8px 10px 12px !important;
    border-radius: 0 0 20px 20px !important;
  }
  #calendar-grid {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    transform: none;
  }
  #calendar-grid .day-column { min-width: 0 !important; }
  #calendar-grid:not(.today-mode) .day-column { display: none !important; }
  #calendar-grid:not(.today-mode) .day-column.mobile-selected-day {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #calendar-grid .day-header { display: none !important; }
  #calendar-grid .classes-list { display: flex !important; width: 100%; gap: 7px !important; }
  #calendar-grid .empty-day {
    min-height: 42px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
  }

  /* Match the reference: subject + recurrence icon, time, status, chevron. */
  #calendar-grid .class-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 26px 10px;
    align-items: center;
    column-gap: 8px;
    min-height: 53px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px 9px 13px !important;
    border-radius: 14px !important;
    overflow: hidden;
    cursor: pointer;
  }
  #calendar-grid .class-card .class-card-header {
    grid-column: 1;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    min-width: 0;
    width: 100%;
    gap: 0;
  }
  #calendar-grid .class-card-header > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-width: 0;
    width: 100%;
    gap: 2px;
  }
  #calendar-grid .class-title {
    font-size: 11px !important;
    line-height: 1.2;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #calendar-grid .type-tag {
    display: flex !important;
    align-items: center;
    min-height: 10px;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1;
    color: var(--text-sub);
  }
  #calendar-grid .weekly-card-icon,
  #calendar-grid .onetime-card-icon {
    display: inline-block !important;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    fill: currentColor;
  }
  #calendar-grid .desktop-class-time { display: none !important; }
  #calendar-grid .mobile-class-time {
    display: block !important;
    position: absolute;
    left: 42%;
    right: 62px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px !important;
    line-height: 1.2;
    color: var(--text-sub);
    text-align: left;
    white-space: nowrap;
  }
  #calendar-grid .class-details,
  #calendar-grid .attendance-actions,
  #calendar-grid .status-badge { display: none !important; }
  #calendar-grid .dropdown { display: none !important; }
  #calendar-grid .mobile-class-status {
    grid-column: 2;
    grid-row: 1;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(120,140,170,.10);
    z-index: 1;
  }
  #calendar-grid .mobile-status-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }
  #calendar-grid .mobile-status-glyph.attended { color: #fff; background: #16c784; }
  #calendar-grid .mobile-status-glyph.missed { color: #fff; background: #ff4777; }
  #calendar-grid .mobile-status-glyph.watched { color: #fff; background: #3990ff; }
  #calendar-grid .mobile-status-glyph.pending { color: #65748b; background: #e8edf5; }
  #calendar-grid .mobile-status-glyph.unset { color: #7f8ca3; background: #edf1f7; }
  #calendar-grid .class-card::after {
    content: '›';
    grid-column: 3;
    grid-row: 1;
    color: #91a0b8;
    font-size: 20px;
    line-height: 1;
    justify-self: end;
  }
  #calendar-grid .color-bar { width: 3px !important; }
  .mobile-tap-hint { display: none !important; }
}
@media (max-width: 390px) {
  .current-week-display { font-size: 9px !important; }
  .week-nav-controls { gap: 3px; }
  .week-nav-controls .btn { min-width: 27px; width: 27px; height: 29px; }
  .week-nav-controls .mobile-today-control { min-width: 52px; font-size: 9px !important; }
  #calendar-grid .mobile-class-time { left: 43%; right: 59px; font-size: 8px !important; }
}


/* Final mobile navigation and timetable fixes */
@media (max-width: 768px) {
  nav.mobile-bottom-nav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 2147483000 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    pointer-events: auto !important;
  }
  nav.mobile-bottom-nav .mobile-bottom-nav-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .week-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    flex-direction: initial !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .week-nav-controls {
    display: flex !important;
    visibility: visible !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    gap: 4px !important;
    min-width: max-content;
  }
  .week-nav-controls #prev-week-btn,
  .week-nav-controls #next-week-btn,
  .week-nav-controls #today-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .current-week-display {
    grid-column: 1 !important;
    grid-row: 1 !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }
  #mobile-date-strip {
    display: grid !important;
    visibility: visible !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  #my-classes-section,
  #my-classes-section #calendar-grid,
  #my-classes-section #calendar-grid .day-column.mobile-selected-day,
  #my-classes-section #calendar-grid.today-mode .day-column {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #my-classes-section #calendar-grid .day-column.mobile-selected-day,
  #my-classes-section #calendar-grid.today-mode .day-column {
    display: flex !important;
  }
  #my-classes-section #calendar-grid .classes-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  #calendar-grid .class-card {
    grid-template-columns: minmax(0, 1fr) minmax(78px, .8fr) 25px 10px !important;
    position: relative !important;
  }
  #calendar-grid .class-card .class-card-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  #calendar-grid .class-card .mobile-class-time {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    min-width: 0 !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
  #calendar-grid .class-card .mobile-class-status {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  #calendar-grid .class-card::after {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }
}


/* TIMETABLE PANEL — continuous background without an outer outline */
.timetable-panel {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 769px) {
  .timetable-panel {
    background: var(--card-bg) !important;
    border-radius: 20px !important;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  /* Keep one continuous panel from the Today/arrows row through the final class row. */
  .timetable-panel {
    display: block !important;
    width: 100%;
    background: var(--card-bg) !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(30, 40, 70, .045) !important;
  }

  .timetable-panel .week-nav {
    margin-bottom: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .timetable-panel #mobile-date-strip {
    border-radius: 0 !important;
    background: transparent !important;
  }

  .timetable-panel .calendar-container,
  .timetable-panel #my-classes-section.calendar-container {
    width: 100% !important;
    margin-top: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 14px !important;
  }

  html[data-theme="sakura"] .timetable-panel {
    background: var(--sakura-card, #fff7f9) !important;
  }
  html[data-theme="coffee"] .timetable-panel {
    background: #faf6f0 !important;
  }
  html[data-theme="bamboo"] .timetable-panel {
    background: #f6faf3 !important;
  }
}


/* FINAL MOBILE FIX: keep the timetable surface extended to the fixed bottom nav */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  .timetable-panel {
    min-height: calc(100dvh - 150px - 76px);
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    background: var(--card-bg) !important;
  }

  .timetable-panel .calendar-container {
    min-height: 180px;
    padding-bottom: 14px !important;
  }

  nav.mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 64px !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    background: var(--card-bg) !important;
    border-top: 1px solid var(--border-light) !important;
    box-shadow: 0 -6px 22px rgba(25, 35, 55, .08) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2147483000 !important;
  }

  nav.mobile-bottom-nav .mobile-bottom-nav-item {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: var(--text-sub) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  nav.mobile-bottom-nav .mobile-bottom-nav-item svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
  }

  nav.mobile-bottom-nav .mobile-bottom-nav-item.active {
    color: var(--accent-color, var(--apple-blue)) !important;
    font-weight: 650 !important;
  }

  html[data-theme="sakura"] nav.mobile-bottom-nav {
    background: rgba(255, 250, 252, .98) !important;
  }
  html[data-theme="sakura"] nav.mobile-bottom-nav .mobile-bottom-nav-item.active {
    color: #f05b91 !important;
  }
  html[data-theme="coffee"] nav.mobile-bottom-nav {
    background: rgba(250, 246, 240, .98) !important;
  }
  html[data-theme="bamboo"] nav.mobile-bottom-nav {
    background: rgba(246, 250, 243, .98) !important;
  }
}


/* Responsive bottom navigation hardening: account for mobile viewport and safe areas. */
@media (max-width: 900px), (pointer: coarse) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
  body > nav.mobile-bottom-nav {
    display: grid !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100vw !important;
    height: calc(68px + env(safe-area-inset-bottom)) !important;
    min-height: 68px !important;
    padding: 6px max(10px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right)) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
    z-index: 2147483647 !important;
    transform: none !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item {
    display: flex !important; visibility: visible !important; opacity: 1 !important;
    min-width: 0 !important; width: 100% !important; height: 100% !important;
    align-items: center !important; justify-content: center !important;
    flex-direction: column !important; gap: 3px !important; padding: 2px 0 !important;
    border: 0 !important; background: transparent !important; text-decoration: none !important;
    font-size: 10px !important; line-height: 1.15 !important; cursor: pointer !important;
  }
  body > nav.mobile-bottom-nav svg { display: block !important; width: 22px !important; height: 22px !important; }
}


/* FINAL MOBILE NAV FIX: fixed to the visible viewport and always show labels */
@media screen and (max-width: 768px) {
  html, body {
    min-height: 100%;
    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  body > nav.mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: calc(68px + env(safe-area-inset-bottom)) !important;
    min-height: calc(68px + env(safe-area-inset-bottom)) !important;
    padding: 5px max(8px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    background: var(--card-bg, #fff) !important;
    border-top: 1px solid var(--border-light, rgba(20,30,50,.12)) !important;
    box-shadow: 0 -5px 22px rgba(20,30,50,.09) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2147483647 !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    color: var(--text-sub, #69758b) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font: 500 10px/1.15 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.15 !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item svg {
    display: block !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    overflow: visible !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item.active {
    color: var(--accent-color, #3986f6) !important;
    font-weight: 650 !important;
  }
  html[data-theme="sakura"] body > nav.mobile-bottom-nav {
    background: rgba(255,250,252,.98) !important;
  }
  html[data-theme="sakura"] body > nav.mobile-bottom-nav > .mobile-bottom-nav-item.active {
    color: #f05b91 !important;
  }
  html[data-theme="coffee"] body > nav.mobile-bottom-nav {
    background: rgba(250,246,240,.98) !important;
  }
  html[data-theme="bamboo"] body > nav.mobile-bottom-nav {
    background: rgba(246,250,243,.98) !important;
  }
}


/* PRESENNT MOBILE NAVIGATION — final viewport-anchored override */
@media screen and (max-width: 900px), (pointer: coarse) {
  body > nav.mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important;
    height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 5px max(8px, env(safe-area-inset-left, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    background: var(--card-bg, #fff) !important;
    border-top: 1px solid var(--border-light, rgba(20,30,50,.12)) !important;
    box-shadow: 0 -5px 22px rgba(20,30,50,.09) !important;
    visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
    transform: none !important; z-index: 2147483647 !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item {
    display: flex !important; min-width: 0 !important; width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 2px 0 !important;
    flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 3px !important; border: 0 !important; background: transparent !important;
    text-decoration: none !important;
    font: 500 10px/1.15 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item span {
    display: block !important; font-size: 10px !important; line-height: 1.15 !important;
    visibility: visible !important; opacity: 1 !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item svg {
    display: block !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important;
    fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important;
  }
  body > nav.mobile-bottom-nav > .mobile-bottom-nav-item.active {
    color: var(--accent-color, #3986f6) !important; font-weight: 650 !important;
  }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; }
  html { scroll-padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
}


/* PRESENNT mobile navigation: final override. Keep the bar pinned to the viewport,
   independent of app wrappers, and reserve room for it on short/tall displays. */
@media screen and (max-width: 900px), (pointer: coarse) {
  html body > nav.mobile-bottom-nav {
    display: grid !important;
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 5px max(8px, env(safe-area-inset-left, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    background: var(--card-bg, #fff) !important;
    border-top: 1px solid var(--border-light, rgba(20,30,50,.12)) !important;
    box-shadow: 0 -5px 22px rgba(20,30,50,.09) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2147483647 !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    color: var(--text-sub, #69758b) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font: 500 10px/1.15 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item svg {
    display: block !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item.active {
    color: var(--accent-color, #3986f6) !important;
    font-weight: 650 !important;
  }
  html[data-theme="sakura"] body > nav.mobile-bottom-nav {
    background: rgba(255,250,252,.98) !important;
  }
  html[data-theme="sakura"] body > nav.mobile-bottom-nav > .mobile-bottom-nav-item.active {
    color: #f05b91 !important;
  }
  html[data-theme="coffee"] body > nav.mobile-bottom-nav {
    background: rgba(250,246,240,.98) !important;
  }
  html[data-theme="bamboo"] body > nav.mobile-bottom-nav {
    background: rgba(246,250,243,.98) !important;
  }
  html body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; }
  html { scroll-padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; }
}


/* Mobile navigation polish: floating glass dock with Solar-style balanced icons. */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  }
  .mobile-bottom-nav {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: auto;
    min-height: 64px;
    padding: 8px 10px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .52);
    box-shadow: 0 8px 28px rgba(20, 30, 50, .12), inset 0 1px 0 rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    backdrop-filter: blur(24px) saturate(1.35);
    z-index: 9999;
    isolation: isolate;
  }
  .mobile-bottom-nav-item {
    min-height: 46px;
    gap: 4px;
    font-size: 10px;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav-item svg {
    display: block;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    overflow: visible;
  }
  [data-theme="sakura"] .mobile-bottom-nav {
    background: rgba(255, 248, 251, .70);
    border-color: rgba(255,255,255,.58);
  }
  [data-theme="coffee"] .mobile-bottom-nav { background: rgba(250, 246, 240, .70); }
  [data-theme="bamboo"] .mobile-bottom-nav { background: rgba(246, 250, 243, .70); }
}


/* PRESENNT — floating translucent mobile navigation dock (final override) */
@media screen and (max-width: 900px), (pointer: coarse) {
  html body > nav.mobile-bottom-nav {
    position: fixed !important;
    top: auto !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    border: 1px solid rgba(255,255,255,.52) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.70) !important;
    box-shadow: 0 8px 28px rgba(20,30,50,.14), inset 0 1px 0 rgba(255,255,255,.55) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    isolation: isolate !important;
    z-index: 2147483647 !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    color: var(--text-sub, #69758b) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font: 500 10px/1.15 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item span {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item svg {
    display: block !important;
    flex: 0 0 23px !important;
    width: 23px !important;
    height: 23px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item.active {
    color: var(--accent-color, #3986f6) !important;
    font-weight: 650 !important;
  }
  html[data-theme="sakura"] body > nav.mobile-bottom-nav {
    background: rgba(255,248,251,.72) !important;
    border-color: rgba(255,255,255,.58) !important;
  }
  html[data-theme="sakura"] body > nav.mobile-bottom-nav > .mobile-bottom-nav-item.active {
    color: #f05b91 !important;
  }
  html[data-theme="coffee"] body > nav.mobile-bottom-nav {
    background: rgba(250,246,240,.72) !important;
  }
  html[data-theme="bamboo"] body > nav.mobile-bottom-nav {
    background: rgba(246,250,243,.72) !important;
  }
  html body {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html {
    scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Final mobile dock polish: balanced outline icons and a more pill-shaped floating panel. */
@media screen and (max-width: 900px), (pointer: coarse) {
  html body > nav.mobile-bottom-nav {
    border-radius: 30px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255,255,255,.64) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.45) !important;
    backdrop-filter: blur(26px) saturate(1.45) !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item svg {
    width: 23px !important;
    height: 23px !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
  }
  html[data-theme="sakura"] body > nav.mobile-bottom-nav {
    background: rgba(255,248,251,.66) !important;
  }
  html[data-theme="coffee"] body > nav.mobile-bottom-nav {
    background: rgba(250,246,240,.66) !important;
  }
  html[data-theme="bamboo"] body > nav.mobile-bottom-nav {
    background: rgba(246,250,243,.66) !important;
  }
}


/* Mobile navigation: rounder floating dock and crisp, balanced icon strokes. */
@media screen and (max-width: 900px), (pointer: coarse) {
  html body > nav.mobile-bottom-nav {
    border-radius: 36px !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 68px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    gap: 3px !important;
  }
  html body > nav.mobile-bottom-nav > .mobile-bottom-nav-item svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    overflow: visible !important;
    stroke-width: 1.65 !important;
    vector-effect: non-scaling-stroke;
  }
}


/* Supplied PRESENNT home mark: preserve its solid filled silhouette in every navigation. */
.desktop-sidebar .sidebar-nav-item svg.presennt-home-icon,
nav.mobile-bottom-nav .mobile-bottom-nav-item svg.presennt-home-icon {
  fill: currentColor !important;
  stroke: none !important;
}
.desktop-sidebar .sidebar-nav-item svg.presennt-home-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
nav.mobile-bottom-nav .mobile-bottom-nav-item svg.presennt-home-icon {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
}


/* Navigation icon polish — consistent weight and alignment on desktop + mobile */
.desktop-sidebar .sidebar-nav-item svg.presennt-home-icon,
.desktop-sidebar .sidebar-nav-item svg.presennt-settings-icon,
.desktop-sidebar .sidebar-nav-item svg.presennt-statistics-icon,
nav.mobile-bottom-nav .mobile-bottom-nav-item svg.presennt-home-icon,
nav.mobile-bottom-nav .mobile-bottom-nav-item svg.presennt-settings-icon,
nav.mobile-bottom-nav .mobile-bottom-nav-item svg.presennt-statistics-icon {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
  display: block;
  overflow: visible;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Final navigation icon corrections: crisp stroke icons and a solid active home mark. */
.desktop-sidebar .sidebar-nav-item svg.presennt-home-icon,
nav.mobile-bottom-nav .mobile-bottom-nav-item svg.presennt-home-icon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}
.desktop-sidebar .sidebar-nav-item.active svg.presennt-home-icon,
nav.mobile-bottom-nav .mobile-bottom-nav-item.active svg.presennt-home-icon {
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}
.desktop-sidebar .sidebar-nav-item svg.presennt-settings-icon,
nav.mobile-bottom-nav .mobile-bottom-nav-item svg.presennt-settings-icon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
  transform-origin: center !important;
}


/* MOBILE ADD-CLASS ACTION — centered plus circle, mobile only */
@media (max-width: 768px) {
  body > header .header-actions #add-class-btn {
    display: none !important;
  }

  html body > nav.mobile-bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body > nav.mobile-bottom-nav > .mobile-add-class-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    -webkit-tap-highlight-color: transparent;
  }

  html body > nav.mobile-bottom-nav > .mobile-add-class-item .mobile-add-class-circle {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    background: var(--apple-blue, #0a84ff);
    color: #fff;
    box-shadow: 0 4px 12px rgba(10, 132, 255, .28);
    transition: transform .16s ease, box-shadow .16s ease;
  }

  html body > nav.mobile-bottom-nav > .mobile-add-class-item svg {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    margin: 4px 0 0 !important;
    stroke: currentColor !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
  }

  html body > nav.mobile-bottom-nav > .mobile-add-class-item:active .mobile-add-class-circle {
    transform: scale(.92);
  }

  html[data-theme="sakura"] body > nav.mobile-bottom-nav > .mobile-add-class-item .mobile-add-class-circle {
    background: #f05b91;
    box-shadow: 0 4px 12px rgba(240, 91, 145, .3);
  }
}

@media (min-width: 769px) {
  #mobile-add-class-btn {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-add-class-circle {
    transition: none !important;
  }
}

/* PRESENNT — smooth mobile Add Class entrance */
@media (max-width: 768px) {
  #class-modal.active > .modal {
    animation: presenntAddClassMobileIn .46s cubic-bezier(.16, 1, .3, 1) both;
    will-change: transform, opacity;
  }

  @keyframes presenntAddClassMobileIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 24px, 0) scale(.965);
    }
    68% {
      opacity: 1;
      transform: translate3d(0, -2px, 0) scale(1.004);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #class-modal.active > .modal {
    animation: none;
    will-change: auto;
  }
}

/* Smooth close for the mobile Add / Edit Class panel.
   The bottom navigation stays hidden until this exit animation completes. */
@media (max-width: 768px) {
  #class-modal.closing > .modal {
    animation: presenntAddClassMobileOut .28s cubic-bezier(.4, 0, 1, 1) both;
    pointer-events: none;
  }

  @keyframes presenntAddClassMobileOut {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
    to {
      opacity: 0;
      transform: translate3d(0, 14px, 0) scale(.975);
    }
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #class-modal.closing > .modal {
    animation: none;
  }
}

/* PRESENNT — JS-triggered slide-up bounce for the complete mobile navigation dock.
   Use the individual translate property so older transform declarations cannot cancel it. */
@media screen and (max-width: 768px) {
  html body > nav.mobile-bottom-nav {
    opacity: 1 !important;
    transition: none !important;
    will-change: translate, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  html body.class-modal-open > nav.mobile-bottom-nav,
  html body.mobile-class-sheet-open > nav.mobile-bottom-nav {
    translate: 0 calc(100% + 36px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  @keyframes presenntNavSlideUpBounce {
    0% {
      translate: 0 calc(100% + 36px);
      opacity: 0;
    }
    60% {
      translate: 0 -5px;
      opacity: 1;
    }
    76% {
      translate: 0 1.5px;
    }
    90% {
      translate: 0 -1px;
    }
    100% {
      translate: 0 0;
      opacity: 1;
    }
  }

  html body > nav.mobile-bottom-nav.nav-bounce-in {
    animation: presenntNavSlideUpBounce 560ms cubic-bezier(.2, .85, .25, 1) both !important;
    pointer-events: auto !important;
    /* Blur is expensive to repaint while the dock is moving. Restore the glass
       treatment automatically when the animation class is removed. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html body > nav.mobile-bottom-nav,
  html body.class-modal-open > nav.mobile-bottom-nav,
  html body.mobile-class-sheet-open > nav.mobile-bottom-nav,
  html body > nav.mobile-bottom-nav.nav-bounce-in {
    animation: none !important;
    transition: none !important;
    will-change: auto;
    translate: 0 0 !important;
  }
}


/* PRESENNT — remove the drop shadow from the mobile bottom navigation bar. */
html body > nav.mobile-bottom-nav {
  box-shadow: none !important;
  filter: none !important;
}


/* PRESENNT — mobile Settings modal close control, page blur and nav motion. */
@media screen and (max-width: 768px) {
  #settings-menu.settings-modal-panel {
    padding-top: 0 !important;
  }

  #settings-menu .mobile-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 18px 13px;
    margin: 0 0 7px;
    border-bottom: 1px solid var(--settings-line, rgba(120, 130, 150, .16));
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.02em;
  }

  #settings-menu .mobile-settings-header button {
    appearance: none;
    border: 0;
    padding: 7px 2px 7px 10px;
    background: transparent;
    color: #ff3b30;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #settings-menu .mobile-settings-header button:active {
    opacity: .65;
  }

  body.settings-modal-open::after {
    background: rgba(20, 25, 38, .12) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
    backdrop-filter: blur(8px) saturate(1.08) !important;
    animation: presenntSettingsBlurIn 220ms ease both !important;
  }

  @keyframes presenntSettingsBlurIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  html body.settings-modal-open > nav.mobile-bottom-nav {
    translate: 0 calc(100% + 30px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
  }

  html body > nav.mobile-bottom-nav.nav-bounce-in {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media screen and (min-width: 769px) {
  #settings-menu .mobile-settings-header {
    display: none !important;
  }
}

@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.settings-modal-open::after {
    animation: none !important;
  }
}


@media screen and (max-width: 768px) {
  html body.settings-modal-open > nav.mobile-bottom-nav {
    transition: translate 320ms cubic-bezier(.22, .8, .25, 1), opacity 220ms ease !important;
  }
}

/* PRESENNT — single, low-cost Settings animation system.
   Keep motion to opacity/translate; never blur the page or moving dock. */
#settings-menu.settings-modal-panel {
  display: block !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  transform-origin: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  will-change: opacity;
  transition: opacity 110ms ease-out, visibility 0s linear 110ms !important;
}
#settings-menu.settings-modal-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transform: translate(-50%, -50%);
  transition: opacity 110ms ease-out, visibility 0s linear 0s !important;
  animation: presenntSettingsMenuIn 230ms cubic-bezier(.2, .8, .2, 1) both !important;
}
@keyframes presenntSettingsMenuIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.94);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.012);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
#settings-menu.settings-modal-panel .dropdown-item,
#settings-menu.settings-modal-panel.show .dropdown-item {
  opacity: 1;
  transform: none;
  filter: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}
body.settings-modal-open::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(20, 25, 38, .16) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  animation: none !important;
  opacity: 1;
  transition: opacity 110ms linear !important;
  pointer-events: none !important;
}
body.settings-modal-closing::after {
  opacity: 0 !important;
}
body.settings-modal-open > *:not(#settings-menu) {
  filter: none !important;
  transition: none !important;
}
body:not(.settings-modal-open) > *:not(#settings-menu) {
  filter: none !important;
  transition: none !important;
}
@media screen and (max-width: 768px) {
  html body.settings-modal-open > nav.mobile-bottom-nav {
    translate: 0 calc(100% + 30px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: translate 180ms ease-out, opacity 140ms linear !important;
    animation: none !important;
  }
  html body > nav.mobile-bottom-nav.nav-bounce-in {
    animation: presenntNavSlideUpBounce 300ms cubic-bezier(.16, 1, .3, 1) both !important;
    pointer-events: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: translate, opacity;
  }
  @keyframes presenntNavSlideUpBounce {
    from { translate: 0 calc(100% + 36px); opacity: 0; }
    to { translate: 0 0; opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  #settings-menu.settings-modal-panel,
  #settings-menu.settings-modal-panel.show,
  body.settings-modal-open::after,
  body.settings-modal-closing::after,
  html body > nav.mobile-bottom-nav.nav-bounce-in {
    animation: none !important;
    transition: none !important;
  }
}

/* PRESENNT — restore the Settings background glass blur and improve panel opacity.
   Keep the blur on the static backdrop only, not on the moving navigation dock. */
body.settings-modal-open::after {
  -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
}
#settings-menu.settings-modal-panel,
#settings-menu.settings-modal-panel.show {
  background: rgba(255, 255, 255, .92) !important;
  background-color: rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme="sakura"] #settings-menu.settings-modal-panel,
html[data-theme="sakura"] #settings-menu.settings-modal-panel.show {
  background: rgba(255, 250, 252, .92) !important;
  background-color: rgba(255, 250, 252, .92) !important;
}
html[data-theme="coffee"] #settings-menu.settings-modal-panel,
html[data-theme="coffee"] #settings-menu.settings-modal-panel.show {
  background: rgba(250, 246, 240, .92) !important;
  background-color: rgba(250, 246, 240, .92) !important;
}
html[data-theme="bamboo"] #settings-menu.settings-modal-panel,
html[data-theme="bamboo"] #settings-menu.settings-modal-panel.show {
  background: rgba(247, 243, 232, .92) !important;
  background-color: rgba(247, 243, 232, .92) !important;
}



/* PRESENNT — mobile Settings entrance.
   Animate individual translate/scale properties so legacy transform rules cannot cancel it. */
@media screen and (max-width: 768px) {
  #settings-menu.settings-modal-panel {
    translate: 0 18px;
    scale: .965;
  }
  #settings-menu.settings-modal-panel.show {
    animation: presenntSettingsMobileIn 380ms cubic-bezier(.16, 1, .3, 1) both !important;
    transition: visibility 0s linear 0s !important;
    will-change: opacity, translate, scale;
  }

  @keyframes presenntSettingsMobileIn {
    0% {
      opacity: 0;
      translate: 0 18px;
      scale: .965;
    }
    72% {
      opacity: 1;
      translate: 0 -1px;
      scale: 1.006;
    }
    100% {
      opacity: 1;
      translate: 0 0;
      scale: 1;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  #settings-menu.settings-modal-panel,
  #settings-menu.settings-modal-panel.show {
    animation: none !important;
    transition: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
    will-change: auto;
  }
}


/* PRESENNT — compact class type and colorful SVG subject picker. */
#class-modal .type-selector-group { display:flex; gap:10px; margin-bottom:16px; }
#class-modal .type-radio-btn { flex:1; min-height:44px; gap:7px; border-radius:15px; }
#class-modal .type-radio-btn.selected { color:var(--accent-color, #3986f6); background:color-mix(in srgb, var(--accent-color, #3986f6) 10%, white); border-color:color-mix(in srgb, var(--accent-color, #3986f6) 35%, white); }
#class-modal .subject-icon-picker { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; margin-top:8px; }
#class-modal .subject-icon-option { display:grid; place-items:center; min-width:0; aspect-ratio:1; padding:10px; border:1px solid transparent; border-radius:15px; background:color-mix(in srgb, var(--subject-icon-color) 12%, white); color:var(--subject-icon-color); cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
#class-modal .subject-icon-option svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#class-modal .subject-icon-option[data-icon="atom"] svg circle { fill:currentColor; stroke:none; }
#class-modal .subject-icon-option[data-icon="star"] svg { fill:currentColor; stroke:currentColor; }
#class-modal .subject-icon-option.selected { border-color:var(--subject-icon-color); box-shadow:0 0 0 2px color-mix(in srgb, var(--subject-icon-color) 16%, transparent); transform:translateY(-1px); }
#class-modal .subject-icon-option:focus-visible, #class-modal .type-radio-btn:focus-visible { outline:2px solid var(--subject-icon-color, var(--accent-color, #3986f6)); outline-offset:2px; }
@media(max-width:600px) {
  #class-modal .subject-icon-picker { grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
  #class-modal .subject-icon-option { padding:7px; border-radius:11px; }
  #class-modal .subject-icon-option svg { width:21px; height:21px; }
  #class-modal .type-radio-btn { padding:9px 6px; font-size:12px; }
}


/* ===== Screenshot-matched Add Class modal (shared desktop/mobile, theme-aware) ===== */
#class-modal .class-modal-redesigned {
  width:min(1000px, calc(100vw - 44px)); max-width:1000px; padding:0; display:grid;
  grid-template-columns:34% minmax(0,66%); overflow:hidden; border-radius:24px;
  background:var(--surface-color, var(--bg-color, #fff)); color:var(--text-main);
  box-shadow:0 24px 80px rgba(28,38,72,.22);
}
#class-modal .class-modal-art { position:relative; min-width:0; min-height:660px; padding:28px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(ellipse at 35% 15%,rgba(255,255,255,.98),rgba(255,244,250,.97) 56%,rgba(252,225,240,.92)); color:#263f68; }
#class-modal .class-art-content { position:relative; z-index:1; text-align:center; margin-top:-12px; }
#class-modal .class-art-illustration { width:min(210px,100%); height:auto; display:block; margin:0 auto 12px; }
#class-modal .class-art-content h2 { font-size:clamp(24px,2.3vw,34px); line-height:1.15; margin:0 0 18px; color:#263f68; letter-spacing:-.7px; }
#class-modal .class-art-content p { font-size:14px; line-height:1.65; color:#8195bf; margin:0; }
#class-modal .class-art-note { position:absolute; z-index:1; left:14%; bottom:14%; display:flex; flex-direction:column; color:#f05b9b; font-size:13px; line-height:1.55; transform:rotate(-5deg); }
#class-modal .class-art-note span { font-size:25px; line-height:1; margin-bottom:4px; }
#class-modal .class-art-note i { display:block; width:42px; height:2px; margin-top:12px; background:#f05b9b; }
#class-modal .class-art-petal { position:absolute; color:#f4b4d2; opacity:.45; font-size:38px; }
#class-modal .petal-one { left:-12px; bottom:18px; } #class-modal .petal-two { right:-6px; top:12px; }
#class-modal .class-art-close { position:absolute; left:22px; top:20px; z-index:3; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.65); color:#526b98; border:1px solid rgba(226,215,235,.6); font-size:24px; }
#class-modal .class-modal-form-panel { min-width:0; padding:30px 32px 20px; display:flex; flex-direction:column; overflow:auto; max-height:min(88vh,900px); background:var(--surface-color, var(--bg-color, #fff)); }
#class-modal .class-form-heading { display:flex; justify-content:space-between; align-items:center; margin:0 0 16px; }
#class-modal .class-form-heading h2 { margin:0; font-size:18px; font-weight:700; color:var(--text-main,#253f68); }
#class-modal .class-mobile-close { display:none; }
#class-modal #class-form { display:flex; flex-direction:column; min-height:0; gap:0; }
#class-modal #class-form .form-group { margin-bottom:16px; }
#class-modal #class-form label { display:block; font-size:12px; font-weight:600; margin:0 0 7px; color:var(--text-main,#2d456d); }
#class-modal #class-form .optional-label { font-weight:400; color:var(--text-sub,#8396b9); }
#class-modal #class-form .form-control { width:100%; min-height:43px; box-sizing:border-box; border:1px solid var(--border-color,#dce3f4); border-radius:13px; padding:10px 13px; background:var(--input-bg,var(--bg-color,#fff)); color:var(--text-main,#263f68); box-shadow:none; font-size:13px; }
#class-modal #class-form .form-control::placeholder { color:#92a4c7; }
#class-modal #class-form .form-control:focus { outline:none; border-color:#a9b9ef; box-shadow:0 0 0 3px rgba(105,119,221,.08); }
#class-modal .type-selector-group { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }
#class-modal .type-radio-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 12px; border:1px solid var(--border-color,#e2e7f4); border-radius:14px; background:var(--bg-color,#f7f8fc); color:var(--text-sub,#60769c); font-size:13px; font-weight:600; cursor:pointer; transition:background .18s,border-color .18s,color .18s; }
#class-modal .type-radio-btn.selected { color:var(--accent-color,#e94e9a); border-color:color-mix(in srgb,var(--accent-color,#e94e9a) 30%,white); background:color-mix(in srgb,var(--accent-color,#e94e9a) 11%,white); }
#class-modal .recurring-icon { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:currentColor; margin:0; }
#class-modal .class-subject-control { position:relative; display:flex; align-items:center; }
#class-modal .class-subject-leading { position:absolute; left:12px; z-index:1; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb,var(--subject-icon-color,#f05b91) 15%,white); color:var(--subject-icon-color,#f05b91); pointer-events:none; }
#class-modal .class-subject-leading svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#class-modal .class-subject-control .form-control { padding-left:52px!important; padding-right:34px!important; }
#class-modal .class-subject-chevron { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:#637ca7; font-size:19px; pointer-events:none; }
#class-modal .class-date-time-row { gap:14px; }
#class-modal .class-date-time-row .form-group { min-width:0; flex:1; }
#class-modal .class-notes-group textarea.form-control { min-height:72px; resize:vertical; }
#class-modal .subject-icon-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:8px; }
#class-modal .subject-icon-option { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:7px; min-width:0; border:1px solid transparent; border-radius:15px; padding:8px 3px 5px; background:transparent; color:var(--text-sub,#60769c); cursor:pointer; font:inherit; font-size:11px; line-height:1.2; transition:background .18s,border-color .18s; }
#class-modal .subject-icon-option svg { width:31px; height:31px; padding:8px; box-sizing:content-box; border-radius:50%; background:color-mix(in srgb,var(--subject-icon-color) 16%,white); color:var(--subject-icon-color); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#class-modal .subject-icon-option[data-icon="atom"] svg circle { fill:currentColor; stroke:none; }
#class-modal .subject-icon-option[data-icon="star"] svg { fill:currentColor; stroke:currentColor; }
#class-modal .subject-icon-option.selected { background:color-mix(in srgb,var(--subject-icon-color) 8%,transparent); border-color:color-mix(in srgb,var(--subject-icon-color) 28%,transparent); color:var(--subject-icon-color); }
#class-modal .subject-icon-option:focus-visible,#class-modal .type-radio-btn:focus-visible { outline:2px solid var(--subject-icon-color,var(--accent-color,#3986f6)); outline-offset:2px; }
#class-modal .modal-actions { position:sticky; bottom:-20px; display:flex; justify-content:flex-end; align-items:center; gap:12px; margin:8px -32px -20px; padding:16px 32px 20px; border-top:1px solid var(--border-color,#edf0f8); background:var(--surface-color,var(--bg-color,#fff)); }
#class-modal .modal-actions .btn { min-height:42px; border-radius:24px; padding:10px 20px; }
#class-modal .modal-actions .btn-primary { background:var(--accent-color,#eb4f9b); color:#fff; border:0; }
#class-modal .modal-actions .btn:not(.btn-primary) { background:transparent; color:var(--text-sub,#7b8db0); }
@media(max-width:700px) {
 #class-modal .class-modal-redesigned { display:block; width:min(100%,560px); max-width:560px; max-height:94dvh; border-radius:20px; overflow:hidden; }
 #class-modal .class-modal-art { display:none; }
 #class-modal .class-modal-form-panel { padding:18px 13px 0; max-height:94dvh; }
 #class-modal .class-form-heading { margin-bottom:14px; }
 #class-modal .class-form-heading h2 { font-size:16px; }
 #class-modal .class-mobile-close { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; }
 #class-modal #class-form .form-group { margin-bottom:12px; }
 #class-modal #class-form .form-control { min-height:39px; padding:8px 10px; font-size:12px; }
 #class-modal .class-subject-leading { width:26px; height:26px; left:9px; }
 #class-modal .class-subject-control .form-control { padding-left:44px!important; }
 #class-modal .class-date-time-row { gap:10px; }
 #class-modal .subject-icon-picker { gap:3px; }
 #class-modal .subject-icon-option { gap:5px; padding:6px 1px 4px; font-size:9px; border-radius:10px; }
 #class-modal .subject-icon-option svg { width:23px; height:23px; padding:6px; }
 #class-modal .modal-actions { margin:7px -13px 0; padding:12px 13px calc(12px + env(safe-area-inset-bottom)); bottom:0; }
 #class-modal .modal-actions .btn { min-height:38px; padding:9px 15px; font-size:12px; }
}
@media(max-width:380px) {
 #class-modal .class-date-time-row { gap:7px; }
 #class-modal .subject-icon-option { font-size:8px; }
}


/* Desktop refinement: keep the Add Class modal long, balanced and stable. */
@media (min-width: 701px) {
  #class-modal.modal-overlay {
    padding: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }
  #class-modal .class-modal-redesigned {
    width: min(1080px, calc(100vw - 64px)) !important;
    max-width: 1080px !important;
    min-height: min(760px, calc(100vh - 64px)) !important;
    max-height: calc(100vh - 48px) !important;
    grid-template-columns: 34% minmax(0, 66%) !important;
    align-items: stretch !important;
    border-radius: 26px !important;
  }
  #class-modal .class-modal-art {
    min-height: 0 !important;
    height: 100% !important;
    padding: 34px 28px !important;
    justify-content: center !important;
  }
  #class-modal .class-art-illustration {
    width: min(230px, 100%) !important;
    margin-bottom: 20px !important;
  }
  #class-modal .class-art-content h2 {
    font-size: clamp(28px, 2.4vw, 36px) !important;
    margin-bottom: 18px !important;
  }
  #class-modal .class-art-content p {
    font-size: 15px !important;
  }
  #class-modal .class-modal-form-panel {
    max-height: calc(100vh - 48px) !important;
    padding: 32px 34px 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  #class-modal .class-form-heading { margin-bottom: 22px !important; }
  #class-modal .class-form-heading h2 { font-size: 20px !important; }
  #class-modal #class-form .form-group { margin-bottom: 19px !important; }
  #class-modal #class-form label { font-size: 13px !important; margin-bottom: 8px !important; }
  #class-modal #class-form .form-control { min-height: 48px !important; padding: 12px 15px !important; font-size: 14px !important; border-radius: 14px !important; }
  #class-modal .class-subject-control .form-control { padding-left: 56px !important; padding-right: 38px !important; }
  #class-modal .class-subject-leading { width: 34px !important; height: 34px !important; left: 12px !important; }
  #class-modal .class-subject-leading svg { width: 19px !important; height: 19px !important; }
  #class-modal .type-selector-group { gap: 12px !important; }
  #class-modal .type-radio-btn { min-height: 48px !important; font-size: 14px !important; border-radius: 15px !important; }
  #class-modal .class-date-time-row { gap: 18px !important; }
  #class-modal .class-notes-group textarea.form-control { min-height: 84px !important; }
  #class-modal .subject-icon-picker { gap: 10px !important; margin-top: 10px !important; }
  #class-modal .subject-icon-option { gap: 8px !important; font-size: 12px !important; padding: 10px 4px 8px !important; }
  #class-modal .subject-icon-option svg { width: 32px !important; height: 32px !important; padding: 10px !important; }
  #class-modal .modal-actions {
    margin: 10px -34px 0 !important;
    padding: 18px 34px 24px !important;
    bottom: 0 !important;
    gap: 14px !important;
  }
  #class-modal .modal-actions .btn { min-height: 46px !important; padding: 12px 22px !important; font-size: 14px !important; }
}
@media (min-width: 701px) and (max-height: 800px) {
  #class-modal .class-modal-redesigned { min-height: 0 !important; }
  #class-modal .class-modal-form-panel { padding-top: 22px !important; }
  #class-modal .class-form-heading { margin-bottom: 14px !important; }
  #class-modal #class-form .form-group { margin-bottom: 12px !important; }
  #class-modal #class-form .form-control { min-height: 42px !important; }
  #class-modal .class-notes-group textarea.form-control { min-height: 64px !important; }
}


/* Desktop: fit every Add Class control in one modal frame; no internal scrolling. */
@media (min-width: 701px) {
  #class-modal.modal-overlay {
    padding: 16px !important;
    overflow: hidden !important;
  }
  #class-modal .class-modal-redesigned {
    height: min(760px, calc(100vh - 32px)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 32px) !important;
    width: min(1080px, calc(100vw - 48px)) !important;
    grid-template-columns: 34% minmax(0, 66%) !important;
    overflow: hidden !important;
  }
  #class-modal .class-modal-art { min-height: 0 !important; height: 100% !important; }
  #class-modal .class-modal-form-panel {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 24px 30px 0 !important;
    box-sizing: border-box !important;
  }
  #class-modal .class-form-heading { margin-bottom: 12px !important; flex: 0 0 auto !important; }
  #class-modal #class-form { min-height: 0 !important; height: calc(100% - 40px) !important; overflow: hidden !important; }
  #class-modal #class-form .form-group { margin-bottom: 11px !important; }
  #class-modal #class-form label { margin-bottom: 5px !important; font-size: 12px !important; }
  #class-modal #class-form .form-control { min-height: 40px !important; padding: 8px 12px !important; font-size: 13px !important; }
  #class-modal .class-subject-control .form-control { padding-left: 52px !important; padding-right: 34px !important; }
  #class-modal .class-subject-leading { width: 30px !important; height: 30px !important; }
  #class-modal .class-form-heading h2 { font-size: 18px !important; }
  #class-modal .type-radio-btn { min-height: 40px !important; padding: 8px 12px !important; }
  #class-modal .class-date-time-row { gap: 14px !important; }
  #class-modal .class-notes-group textarea.form-control { min-height: 58px !important; height: 58px !important; resize: none !important; }
  #class-modal .subject-icon-picker { margin-top: 4px !important; gap: 7px !important; }
  #class-modal .subject-icon-option { gap: 0 !important; padding: 4px !important; min-height: 54px !important; }
  #class-modal .subject-icon-option span { display: none !important; }
  #class-modal .subject-icon-option svg { width: 25px !important; height: 25px !important; padding: 8px !important; }
  #class-modal .modal-actions {
    flex: 0 0 auto !important;
    margin: auto -30px 0 !important;
    padding: 13px 30px 18px !important;
    bottom: 0 !important;
  }
}
@media (min-width: 701px) and (max-height: 720px) {
  #class-modal .class-modal-redesigned { height: calc(100vh - 24px) !important; }
  #class-modal .class-modal-form-panel { padding-top: 14px !important; }
  #class-modal .class-form-heading { margin-bottom: 8px !important; }
  #class-modal #class-form .form-group { margin-bottom: 7px !important; }
  #class-modal #class-form .form-control { min-height: 35px !important; }
  #class-modal .class-notes-group textarea.form-control { min-height: 44px !important; height: 44px !important; }
  #class-modal .subject-icon-option { min-height: 44px !important; }
  #class-modal .subject-icon-option svg { width: 21px !important; height: 21px !important; padding: 6px !important; }
  #class-modal .modal-actions { padding-top: 8px !important; padding-bottom: 10px !important; }
}


/* Final modal fixes: visible icon grid, usable subject chooser, blurred backdrop and top layer. */
#class-modal.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate;
  background: rgba(32, 43, 72, .30) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
}
#class-modal.modal-overlay.active,
#class-modal.modal-overlay.show { display:flex !important; }
#class-modal .class-modal-redesigned { position:relative !important; z-index:1 !important; }
#class-modal .class-modal-form-panel { position:relative; z-index:1; }
#class-modal .class-subject-control { width:100%; min-width:0; }
#class-modal #input-subject { min-width:0; cursor:text; }
#class-modal #existing-subjects-list { max-width:100%; }
#class-modal .class-subject-control:focus-within { z-index:5; }
@media (min-width:701px) {
  #class-modal .class-modal-redesigned {
    height:min(760px, calc(100vh - 32px)) !important;
    min-height:0 !important;
  }
  #class-modal .class-modal-form-panel {
    overflow:hidden !important;
  }
  #class-modal #class-form {
    display:flex !important;
    flex-direction:column !important;
    height:calc(100% - 40px) !important;
    overflow:hidden !important;
  }
  #class-modal .subject-icon-picker {
    display:grid !important;
    grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
    align-items:center !important;
    gap:3px !important;
    width:100% !important;
    overflow:visible !important;
  }
  #class-modal .subject-icon-option {
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:2px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  #class-modal .subject-icon-option svg {
    width:19px !important;
    height:19px !important;
    padding:5px !important;
    box-sizing:content-box !important;
  }
}
@media (max-width:700px) {
  #class-modal.modal-overlay {
    overflow-y:auto !important;
    -webkit-backdrop-filter:blur(8px) saturate(115%) !important;
    backdrop-filter:blur(8px) saturate(115%) !important;
  }
  #class-modal .subject-icon-picker {
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  }
  #class-modal .subject-icon-option span { display:none !important; }
  #class-modal .subject-icon-option svg { width:19px !important; height:19px !important; padding:5px !important; }
}
@media (prefers-reduced-motion:no-preference) {
  #class-modal .class-modal-redesigned {
    animation:presenntClassModalIn 260ms cubic-bezier(.16,1,.3,1) both;
    transform-origin:center;
  }
  #class-modal.modal-overlay { animation:presenntClassBackdropIn 180ms ease-out both; }
}
@keyframes presenntClassModalIn {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes presenntClassBackdropIn {
  from { opacity:0; }
  to { opacity:1; }
}


/* Theme-aware Add Class artwork and comfortable mobile edge spacing. */
html[data-theme="default"] #class-modal .class-modal-art,
html:not([data-theme]) #class-modal .class-modal-art,
html[data-theme="light"] #class-modal .class-modal-art {
  background:radial-gradient(ellipse at 35% 12%,#ffffff 0%,#f4f8ff 58%,#e7f0ff 100%) !important;
  color:#203d70 !important;
}
html[data-theme="default"] #class-modal .class-art-illustration,
html:not([data-theme]) #class-modal .class-art-illustration,
html[data-theme="light"] #class-modal .class-art-illustration {
  filter:hue-rotate(155deg) saturate(.78) !important;
}
html[data-theme="default"] #class-modal .class-art-content h2,
html:not([data-theme]) #class-modal .class-art-content h2,
html[data-theme="light"] #class-modal .class-art-content h2 { color:#203d70 !important; }
html[data-theme="default"] #class-modal .class-art-content p,
html:not([data-theme]) #class-modal .class-art-content p,
html[data-theme="light"] #class-modal .class-art-content p { color:#7288ad !important; }
html[data-theme="default"] #class-modal .class-art-note,
html:not([data-theme]) #class-modal .class-art-note,
html[data-theme="light"] #class-modal .class-art-note { color:#3986f6 !important; }
html[data-theme="default"] #class-modal .class-art-note i,
html:not([data-theme]) #class-modal .class-art-note i,
html[data-theme="light"] #class-modal .class-art-note i { background:#3986f6 !important; }
html[data-theme="default"] #class-modal .class-art-petal,
html:not([data-theme]) #class-modal .class-art-petal,
html[data-theme="light"] #class-modal .class-art-petal { color:#8dbbff !important; }
html[data-theme="default"] #class-modal .class-art-close,
html:not([data-theme]) #class-modal .class-art-close,
html[data-theme="light"] #class-modal .class-art-close { color:#315d9b !important; }
html[data-theme="default"] #class-modal .class-mobile-close,
html:not([data-theme]) #class-modal .class-mobile-close,
html[data-theme="light"] #class-modal .class-mobile-close { color:#315d9b !important; }
html[data-theme="default"] #class-modal .type-radio-btn.selected,
html:not([data-theme]) #class-modal .type-radio-btn.selected,
html[data-theme="light"] #class-modal .type-radio-btn.selected {
  color:#3986f6 !important;
  border-color:rgba(57,134,246,.34) !important;
  background:#edf5ff !important;
}
html[data-theme="default"] #class-modal .modal-actions .btn-primary,
html:not([data-theme]) #class-modal .modal-actions .btn-primary,
html[data-theme="light"] #class-modal .modal-actions .btn-primary { background:#3986f6 !important; }
html[data-theme="default"] #class-modal .subject-icon-option.selected,
html:not([data-theme]) #class-modal .subject-icon-option.selected,
html[data-theme="light"] #class-modal .subject-icon-option.selected {
  background:color-mix(in srgb,var(--subject-icon-color) 9%,transparent) !important;
}
@media(max-width:700px) {
  #class-modal.modal-overlay {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    box-sizing:border-box !important;
  }
  #class-modal .class-modal-redesigned {
    width:calc(100vw - 24px) !important;
    max-width:560px !important;
    max-height:calc(100dvh - 24px) !important;
    border-radius:22px !important;
    margin:0 auto !important;
  }
  #class-modal .class-modal-form-panel {
    max-height:calc(100dvh - 24px) !important;
    border-radius:22px !important;
  }
}


/* Class picker: real, non-editable dropdown with a deliberate "add new" flow. */
#class-modal .class-picker-wrap { position:relative; min-width:0; }
#class-modal .class-picker-trigger { display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; padding:8px 13px !important; }
#class-modal .class-picker-trigger[hidden] { display:none !important; }
#class-modal .class-picker-current-icon,.class-picker-option-icon { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:10px; color:var(--subject-icon-color,#3986f6); background:color-mix(in srgb,var(--subject-icon-color,#3986f6) 13%,white); }
#class-modal .class-picker-current-icon svg,.class-picker-option-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#class-modal .class-picker-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#class-modal .class-picker-chevron { margin-left:auto; color:var(--text-sub,#7184a5); font-size:19px; }
#class-modal .class-picker-menu { position:absolute; z-index:100; inset-inline:0; top:calc(100% + 7px); max-height:min(280px,42vh); overflow-y:auto; padding:7px; border:1px solid var(--border-color,#e1e8f5); border-radius:16px; background:var(--surface-color,#fff); box-shadow:0 18px 45px rgba(29,51,89,.18); }
#class-modal .class-picker-menu[hidden],#class-modal #subject-icon-group[hidden] { display:none !important; }
#class-modal .class-picker-option { width:100%; min-height:45px; display:flex; align-items:center; gap:11px; padding:7px 10px; border:0; border-radius:11px; background:transparent; color:var(--text-main,#2d456d); text-align:left; font:inherit; font-size:13px; cursor:pointer; }
#class-modal .class-picker-option:hover,#class-modal .class-picker-option:focus-visible { outline:none; background:var(--hover-bg,#f1f6ff); }
#class-modal .class-picker-option>span:nth-child(2) { flex:1; min-width:0; }
#class-modal .class-picker-check { width:17px; height:17px; fill:none; stroke:#3986f6; stroke-width:2; opacity:0; }
#class-modal .class-picker-add-new { color:var(--accent-color,#3986f6); font-weight:650; }
#class-modal .class-picker-add-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:color-mix(in srgb,var(--accent-color,#3986f6) 12%,white); font-size:22px; }
#class-modal .class-picker-arrow { width:17px; height:17px; margin-left:auto; fill:none; stroke:currentColor; stroke-width:2; }
#class-modal .class-picker-divider { height:1px; margin:6px 4px; background:var(--border-color,#edf0f8); }
#class-modal .class-picker-empty { margin:8px 10px; color:var(--text-sub,#8396b9); font-size:12px; }
#class-modal .class-picker-hint { margin:6px 2px 0; color:var(--text-sub,#8396b9); font-size:11px; }
#class-modal #input-subject.new-class-name-input { display:block !important; margin-top:0; }
#class-modal .class-picker-group.is-new-class .class-picker-hint { color:var(--accent-color,#3986f6); }
#class-modal .class-picker-group.is-new-class .class-picker-trigger { display:none !important; }
#class-modal .class-picker-group.is-new-class .class-picker-wrap:before { content:"＋ New class"; display:block; margin:0 0 7px; color:var(--accent-color,#3986f6); font-size:12px; font-weight:650; }
html:not([data-theme]) #class-modal .class-art-note span,
html:not([data-theme]) #class-modal .class-art-petal,
html[data-theme="default"] #class-modal .class-art-note span,
html[data-theme="default"] #class-modal .class-art-petal,
html[data-theme="light"] #class-modal .class-art-note span,
html[data-theme="light"] #class-modal .class-art-petal { display:none !important; }
html:not([data-theme]) #class-modal .class-art-illustration,
html[data-theme="default"] #class-modal .class-art-illustration,
html[data-theme="light"] #class-modal .class-art-illustration { filter:none !important; }
html:not([data-theme]) #class-modal .class-art-illustration > circle:first-of-type,
html[data-theme="default"] #class-modal .class-art-illustration > circle:first-of-type,
html[data-theme="light"] #class-modal .class-art-illustration > circle:first-of-type { fill:#e8f1ff !important; }
html:not([data-theme]) #class-modal .class-art-illustration > defs linearGradient stop,
html[data-theme="default"] #class-modal .class-art-illustration > defs linearGradient stop,
html[data-theme="light"] #class-modal .class-art-illustration > defs linearGradient stop { stop-color:#cfe2ff !important; }
html:not([data-theme]) #class-modal .class-art-illustration > g:nth-of-type(2) rect,
html[data-theme="default"] #class-modal .class-art-illustration > g:nth-of-type(2) rect,
html[data-theme="light"] #class-modal .class-art-illustration > g:nth-of-type(2) rect { fill:#d7e7ff !important; }
html:not([data-theme]) #class-modal .class-art-illustration > g:nth-of-type(2) rect:first-child,
html[data-theme="default"] #class-modal .class-art-illustration > g:nth-of-type(2) rect:first-child,
html[data-theme="light"] #class-modal .class-art-illustration > g:nth-of-type(2) rect:first-child { fill:#9dc4ff !important; }
@media(max-width:700px) {
 #class-modal .class-picker-menu { max-height:min(250px,35vh); }
 #class-modal .class-picker-trigger { min-height:42px !important; }
}

html:not([data-theme]) #class-modal .class-art-illustration > circle[cx="157"],
html[data-theme="default"] #class-modal .class-art-illustration > circle[cx="157"],
html[data-theme="light"] #class-modal .class-art-illustration > circle[cx="157"] { fill:#3986f6 !important; }
html:not([data-theme]) #class-modal .class-art-illustration > g:nth-of-type(3) path,
html[data-theme="default"] #class-modal .class-art-illustration > g:nth-of-type(3) path,
html[data-theme="light"] #class-modal .class-art-illustration > g:nth-of-type(3) path { stroke:#fff !important; }

/* Requested type visibility and theme-aware new-class action. */
html[data-theme="sakura"] #class-modal .class-picker-add-new,
html[data-theme="sakura"] #class-modal .class-picker-group.is-new-class .class-picker-hint {
  color:#e85b91 !important;
}
html[data-theme="sakura"] #class-modal .class-picker-add-new .class-picker-add-icon {
  color:#e85b91 !important;
  background:rgba(232,91,145,.13) !important;
}


/* Duplicate-class confirmation — responsive and theme-aware. */
.duplicate-class-overlay[hidden] { display:none !important; }
.duplicate-class-overlay {
  /* Render above the Add Class modal so the warning is never hidden behind it. */
  position:fixed; inset:0; z-index:2147483647; display:flex; align-items:center; justify-content:center;
  padding:18px; box-sizing:border-box; background:rgba(19,31,54,.28);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
}
.duplicate-class-dialog {
  width:min(100%,430px); max-height:calc(100dvh - 36px); overflow:auto; box-sizing:border-box;
  padding:26px; border:1px solid var(--border-color,#e1e8f5); border-radius:24px;
  background:var(--surface-color,#fff); color:var(--text-main,#243654);
  box-shadow:0 24px 70px rgba(20,35,64,.24); animation:duplicateWarningIn .2s ease-out both;
}
.duplicate-class-symbol {
  width:48px;height:48px;display:grid;place-items:center;border-radius:16px;margin-bottom:17px;
  color:#d97706;background:#fff3d7;
}
.duplicate-class-symbol svg { width:25px;height:25px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.duplicate-class-dialog h2 { margin:0 0 9px;font-size:20px;line-height:1.3;letter-spacing:-.35px; }
.duplicate-class-dialog>p { margin:0 0 16px;color:var(--text-sub,#72819a);font-size:13px;line-height:1.55; }
.duplicate-class-list { list-style:none;display:grid;gap:8px;margin:0 0 22px;padding:0; }
.duplicate-class-item { display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border-color,#e1e8f5);border-radius:14px;background:var(--hover-bg,#f6f8fc); }
.duplicate-class-calendar { flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(57,134,246,.12);color:#3986f6;font-size:22px; }
.duplicate-class-details { min-width:0;display:grid;gap:4px; }
.duplicate-class-details strong { font-size:13px;font-weight:700; }
.duplicate-class-details small { font-size:12px;color:var(--text-sub,#72819a); }
.duplicate-class-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.duplicate-class-actions button { min-height:45px;padding:11px 14px;border-radius:13px;font:inherit;font-size:13px;font-weight:650;cursor:pointer; }
.duplicate-class-back { color:var(--text-main,#33445f);background:var(--surface-color,#fff);border:1px solid var(--border-color,#dce4f1); }
.duplicate-class-confirm { color:#fff;background:#3986f6;border:1px solid transparent; }
html[data-theme="sakura"] .duplicate-class-dialog { border-color:#f4c7d9; }
html[data-theme="sakura"] .duplicate-class-symbol { color:#d94682;background:#ffe7f1; }
html[data-theme="sakura"] .duplicate-class-calendar { color:#d94682;background:#ffe5f0; }
html[data-theme="sakura"] .duplicate-class-confirm { background:#e85b91; }
html[data-theme="sakura"] .duplicate-class-back { border-color:#f0c7d8;color:#9f315e; }
@media(max-width:480px) {
  .duplicate-class-dialog { padding:22px 18px 18px;border-radius:21px; }
  .duplicate-class-dialog h2 { font-size:18px; }
  .duplicate-class-actions { gap:8px; }
  .duplicate-class-actions button { min-height:44px;padding:10px 8px;font-size:12px; }
}
@keyframes duplicateWarningIn { from { opacity:0;transform:translateY(8px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }

/* My Classes dashboard view — inline with the app, responsive and theme-aware. */
.my-classes-overview { width:min(100% - 32px, 1080px); margin:28px auto 40px; color:var(--text-main,#263957); }
.my-classes-overview[hidden],.timetable-panel[hidden],.dashboard-grid[hidden] { display:none !important; }
.my-classes-heading-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 22px; }
.my-classes-eyebrow { margin:0 0 7px; color:var(--accent-color,#3986f6); font-size:10px; font-weight:800; letter-spacing:1.6px; }
.my-classes-heading-row h2 { margin:0; font-size:clamp(25px,3vw,32px); letter-spacing:-.8px; }
.my-classes-subtitle { margin:7px 0 0; color:var(--text-sub,#7b8ba5); font-size:13px; }
.my-classes-count { flex-shrink:0; padding:8px 12px; border-radius:999px; color:var(--accent-color,#3986f6); background:var(--hover-bg,#eef5ff); font-size:12px; font-weight:700; }
.my-classes-list { overflow:hidden; border:1px solid var(--border-color,#e1e8f5); border-radius:20px; background:var(--surface-color,#fff); box-shadow:0 8px 28px rgba(32,55,94,.045); }
.my-class-row { min-height:76px; display:flex; align-items:center; gap:15px; padding:13px 18px; border-bottom:1px solid var(--border-color,#edf0f6); transition:background .16s ease; }
.my-class-row:last-child { border-bottom:0; }
.my-class-row:hover { background:var(--hover-bg,#f8faff); }
.my-class-icon { flex:0 0 43px; width:43px; height:43px; display:grid; place-items:center; border-radius:14px; color:var(--my-class-icon-color,#3986f6); background:color-mix(in srgb,var(--my-class-icon-color,#3986f6) 12%,var(--surface-color,#fff)); }
.my-class-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.my-class-main { flex:1; min-width:0; }
.my-class-main h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; }
.my-class-main p { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:6px 0 0; color:var(--text-sub,#7b8ba5); font-size:12px; }
.my-class-dot { opacity:.6; }
.my-class-edit { flex:0 0 39px; width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--border-color,#e1e8f5); border-radius:12px; color:var(--text-sub,#7184a5); background:var(--surface-color,#fff); cursor:pointer; transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease; }
.my-class-edit:hover { color:var(--accent-color,#3986f6); border-color:var(--accent-color,#3986f6); background:var(--hover-bg,#f1f6ff); transform:translateY(-1px); }
.my-class-edit svg { width:18px; height:18px; }
.my-classes-empty { padding:48px 22px; text-align:center; }
.my-classes-empty-icon { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 14px; border-radius:16px; color:var(--accent-color,#3986f6); background:var(--hover-bg,#eef5ff); font-size:28px; }
.my-classes-empty h3 { margin:0 0 8px; font-size:17px; }
.my-classes-empty p { max-width:340px; margin:0 auto 18px; color:var(--text-sub,#7b8ba5); font-size:13px; line-height:1.6; }
html[data-theme="sakura"] .my-classes-eyebrow,html[data-theme="sakura"] .my-classes-count { color:#d94f86; }
html[data-theme="sakura"] .my-classes-count,html[data-theme="sakura"] .my-classes-empty-icon { background:#ffe8f1; }
html[data-theme="sakura"] .my-class-edit:hover { color:#d94f86; border-color:#e88bb0; background:#fff0f6; }
html[data-theme="coffee"] .my-classes-eyebrow,html[data-theme="coffee"] .my-classes-count { color:var(--coffee-accent,#9b6a43); }
html[data-theme="bamboo"] .my-classes-eyebrow,html[data-theme="bamboo"] .my-classes-count { color:var(--bamboo-green,#5f7652); }
@media(max-width:700px) {
 .my-classes-overview { width:calc(100% - 28px); margin:22px auto calc(100px + env(safe-area-inset-bottom)); }
 .my-classes-heading-row { align-items:flex-start; margin-bottom:17px; }
 .my-classes-heading-row h2 { font-size:26px; }
 .my-classes-subtitle { max-width:230px; line-height:1.5; font-size:12px; }
 .my-classes-count { margin-top:4px; padding:7px 10px; font-size:11px; }
 .my-classes-list { border-radius:17px; }
 .my-class-row { min-height:70px; gap:11px; padding:12px 11px; }
 .my-class-icon { flex-basis:39px; width:39px; height:39px; border-radius:12px; }
 .my-class-icon svg { width:20px; height:20px; }
 .my-class-main h3 { font-size:13px; }
 .my-class-main p { gap:5px; font-size:11px; }
 .my-class-edit { flex-basis:36px; width:36px; height:36px; border-radius:11px; }
 .my-classes-empty { padding:38px 18px; }
}


/* My Classes: a focused view with no timetable or greeting chrome. */
#dashboard-home.my-classes-active .desktop-greeting { display:none !important; }
#dashboard-home.my-classes-active { min-height:0; }
.my-classes-heading-row h2 { margin:0; }
.my-class-row-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.my-class-delete { flex:0 0 39px; width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--border-color,#e1e8f5); border-radius:12px; color:var(--text-sub,#7184a5); background:var(--surface-color,#fff); cursor:pointer; transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease; }
.my-class-delete svg { width:18px; height:18px; }
.my-class-delete:hover { color:#d94343; border-color:#e98b8b; background:color-mix(in srgb,#e94343 8%,var(--surface-color,#fff)); transform:translateY(-1px); }
.delete-class-confirm-overlay[hidden] { display:none !important; }
.delete-class-confirm-overlay { position:fixed; inset:0; z-index:2147483647; display:flex; align-items:center; justify-content:center; padding:18px; box-sizing:border-box; background:rgba(15,24,40,.36); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); }
.delete-class-confirm-dialog { width:min(100%,420px); box-sizing:border-box; padding:27px; border:1px solid var(--border-color,#e1e8f5); border-radius:24px; background:var(--surface-color,#fff); color:var(--text-main,#263957); box-shadow:0 24px 70px rgba(15,24,40,.25); animation:duplicateWarningIn .2s ease-out both; }
.delete-class-confirm-icon { width:49px; height:49px; display:grid; place-items:center; margin-bottom:17px; border-radius:16px; color:#d94343; background:#ffebeb; }
.delete-class-confirm-icon svg { width:24px; height:24px; }
.delete-class-confirm-dialog h2 { margin:0 0 9px; font-size:20px; letter-spacing:-.4px; }
.delete-class-confirm-dialog p { margin:0 0 22px; color:var(--text-sub,#71819a); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.delete-class-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.delete-class-confirm-actions button { min-height:45px; padding:11px 13px; border-radius:13px; font:inherit; font-size:13px; font-weight:650; cursor:pointer; }
.delete-class-cancel { color:var(--text-main,#33445f); background:var(--surface-color,#fff); border:1px solid var(--border-color,#dce4f1); }
.delete-class-confirm-button { color:#fff; background:#dc4545; border:1px solid transparent; }
html[data-theme="sakura"] .delete-class-confirm-icon { color:#cf3c73; background:#ffe5ef; }
html[data-theme="sakura"] .delete-class-confirm-button { background:#d94f86; }
html[data-theme="sakura"] .delete-class-cancel { border-color:#f0c7d8; color:#9f315e; }
@media(max-width:700px) {
  .my-class-row-actions { gap:6px; }
  .my-class-edit,.my-class-delete { flex-basis:35px; width:35px; height:35px; border-radius:10px; }
  .my-class-edit svg,.my-class-delete svg { width:17px; height:17px; }
  .delete-class-confirm-dialog { padding:23px 19px 19px; border-radius:21px; }
  .delete-class-confirm-actions { gap:8px; }
  .delete-class-confirm-actions button { padding:10px 8px; font-size:12px; }
}


/* Keep the Home statistics cards exclusive to the Home tab on mobile too. */
@media (max-width: 768px) {
  body.my-classes-view #statistics-section,
  body.my-classes-view .dashboard-grid#statistics-section {
    display: none !important;
  }
}

/* Compact monthly payment controls for My Classes. */
.my-classes-heading-row { align-items:center; } .my-classes-heading-row>div { min-width:0; }
.payment-month-switcher { display:flex; align-items:center; gap:5px; width:max-content; margin-top:10px; padding:3px; border:1px solid var(--border-color,#e1e8f5); border-radius:999px; background:var(--surface-color,#fff); }
.payment-month-switcher button { width:29px; height:29px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--text-main,#263957); background:transparent; font:inherit; font-size:23px; line-height:1; cursor:pointer; transition:background .16s ease,transform .16s ease; }
.payment-month-switcher button:hover:not(:disabled) { background:var(--hover-bg,#eef5ff); } .payment-month-switcher button:active:not(:disabled) { transform:scale(.92); } .payment-month-switcher button:disabled { opacity:.3; cursor:default; }
.payment-month-switcher span { min-width:112px; text-align:center; font-size:12px; font-weight:650; white-space:nowrap; }
.my-class-payment { flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.payment-status { min-height:33px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 11px; border:1px solid transparent; border-radius:999px; font:inherit; font-size:11px; font-weight:700; white-space:nowrap; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
button.payment-status { cursor:pointer; } button.payment-status:active { transform:scale(.96); } .payment-status svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.payment-status.is-paid { color:#168453; background:#e8f8ef; border-color:#c8eed8; } .payment-status.is-unpaid { color:#a56b08; background:#fff5dc; border-color:#f4e2ae; } .payment-unpaid-dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.75; }
.payment-status.is-not-joined { color:var(--text-sub,#7b8ba5); background:var(--hover-bg,#f3f5f9); border-color:var(--border-color,#e1e8f5); }
.payment-month-summary { margin:14px 2px 0; padding:14px 2px 0; } .payment-summary-copy { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text-sub,#7b8ba5); font-size:12px; } .payment-summary-copy strong { color:var(--text-main,#263957); font-size:12px; font-weight:700; }
.payment-progress { height:4px; margin-top:10px; overflow:hidden; border-radius:999px; background:var(--border-color,#e6ebf3); } .payment-progress span { display:block; height:100%; border-radius:inherit; background:#2fa56c; transition:width .25s ease; } .payment-month-summary>p { margin:7px 0 0; color:var(--text-sub,#7b8ba5); font-size:11px; text-align:right; }
html[data-theme="sakura"] .payment-month-switcher { border-color:#f0c7d8; } html[data-theme="sakura"] .payment-month-switcher button:hover:not(:disabled) { background:#ffeaf2; } html[data-theme="sakura"] .payment-status.is-paid { color:#267d58; background:#e7f7ed; border-color:#c6ead4; } html[data-theme="sakura"] .payment-status.is-unpaid { color:#9c6810; background:#fff3d6; border-color:#f1dfa9; }
html[data-theme="coffee"] .payment-month-switcher button:hover:not(:disabled) { background:var(--hover-bg,#f4ece5); } html[data-theme="bamboo"] .payment-month-switcher button:hover:not(:disabled) { background:var(--hover-bg,#edf3e9); }
@media(max-width:700px) { .my-classes-heading-row { gap:8px; } .payment-month-switcher { gap:2px; margin-top:8px; } .payment-month-switcher button { width:27px; height:27px; } .payment-month-switcher span { min-width:98px; font-size:11px; } .my-class-row { gap:8px; padding:11px 9px; } .my-class-payment { max-width:74px; } .payment-status { min-height:29px; gap:4px; padding:0 7px; font-size:10px; } .my-class-row-actions { gap:4px; } .my-class-edit,.my-class-delete { flex-basis:31px; width:31px; height:31px; } .my-class-main p { line-height:1.35; } .payment-month-summary { margin-top:12px; } }
@media(max-width:390px) { .my-classes-heading-row h2 { font-size:23px; } .payment-month-switcher span { min-width:84px; } .my-class-row { gap:6px; } .my-class-payment { max-width:66px; } .payment-status { padding:0 6px; font-size:9px; } .my-class-edit,.my-class-delete { flex-basis:29px; width:29px; height:29px; } }


/* Deliberate confirmation before changing a monthly payment record. */
.payment-confirm-overlay[hidden] { display:none !important; }
.payment-confirm-overlay { position:fixed; inset:0; z-index:2147483647; display:flex; align-items:center; justify-content:center; padding:18px; box-sizing:border-box; background:rgba(15,24,40,.36); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); animation:paymentConfirmFade .16s ease-out both; }
.payment-confirm-dialog { width:min(100%,390px); box-sizing:border-box; padding:25px; border:1px solid var(--border-color,#e1e8f5); border-radius:23px; background:var(--surface-color,#fff); color:var(--text-main,#263957); box-shadow:0 24px 70px rgba(15,24,40,.25); animation:paymentConfirmIn .2s ease-out both; }
.payment-confirm-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:16px; border-radius:15px; color:#168453; background:#e8f8ef; }
.payment-confirm-icon svg { width:24px; height:24px; }
.payment-confirm-dialog h2 { margin:0 0 8px; font-size:19px; letter-spacing:-.35px; }
.payment-confirm-dialog p { margin:0 0 21px; color:var(--text-sub,#71819a); font-size:13px; line-height:1.6; }
.payment-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.payment-confirm-actions button { min-height:44px; padding:10px 12px; border-radius:13px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:transform .15s ease,background .15s ease; }
.payment-confirm-actions button:active { transform:scale(.98); }
.payment-confirm-back { border:1px solid var(--border-color,#dce4f1); color:var(--text-main,#33445f); background:var(--surface-color,#fff); }
.payment-confirm-yes { border:1px solid transparent; color:#fff; background:#168453; }
.payment-confirm-yes.is-unpaid-action { background:#b77912; }
html[data-theme="sakura"] .payment-confirm-icon { color:#267d58; background:#e7f7ed; }
html[data-theme="sakura"] .payment-confirm-yes { background:#2c9665; }
html[data-theme="sakura"] .payment-confirm-yes.is-unpaid-action { background:#b77912; }
html[data-theme="sakura"] .payment-confirm-back { border-color:#f0c7d8; color:#9f315e; }
@media(max-width:480px) { .payment-confirm-dialog { padding:22px 18px 18px; border-radius:21px; } .payment-confirm-actions { gap:8px; } .payment-confirm-actions button { padding:10px 8px; font-size:12px; } }
@keyframes paymentConfirmFade { from { opacity:0; } to { opacity:1; } }
@keyframes paymentConfirmIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }


/* Payment confirmation uses the same mobile dock motion as class/settings sheets. */
@media screen and (max-width: 768px) {
  html body.payment-confirm-open > nav.mobile-bottom-nav {
    translate: 0 calc(100% + 36px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html body.payment-confirm-open > nav.mobile-bottom-nav {
    translate: 0 calc(100% + 36px) !important;
    opacity: 0 !important;
    transition: none !important;
  }
}


/* Timetable class cards: selected subject icon + subtle matching colour wash. */
.class-card {
  background: linear-gradient(125deg,
    color-mix(in srgb, var(--class-tint, #3986f6) 10%, var(--card-bg, #fff)) 0%,
    color-mix(in srgb, var(--class-tint, #3986f6) 4%, var(--card-bg, #fff)) 54%,
    var(--card-bg, #fff) 100%);
}
.class-title { display:flex; align-items:center; gap:7px; min-width:0; }
.timetable-class-icon {
  flex:0 0 20px; width:20px; height:20px; display:inline-grid; place-items:center;
  color:var(--class-icon-tint, var(--class-tint, #3986f6));
  border-radius:6px;
  background:color-mix(in srgb, var(--class-icon-tint, var(--class-tint, #3986f6)) 13%, transparent);
}
.timetable-class-icon svg {
  display:block; width:14px; height:14px; max-width:100%; max-height:100%;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.timetable-class-name { min-width:0; overflow-wrap:anywhere; }
@media(max-width:768px) {
  .timetable-class-icon { flex-basis:17px; width:17px; height:17px; border-radius:5px; }
  .timetable-class-icon svg { width:12px; height:12px; }
  .class-title { gap:5px; }
}
html[data-theme="sakura"] .class-card {
  background:linear-gradient(125deg,
    color-mix(in srgb, var(--class-tint, #e88baa) 11%, var(--card-bg, #fff)) 0%,
    color-mix(in srgb, var(--class-tint, #e88baa) 4%, var(--card-bg, #fff)) 58%,
    var(--card-bg, #fff) 100%);
}