/* ============================================
   我的课表 · iOS 26 Liquid Glass 设计
   ============================================ */

:root{
  /* 浅色模式 - 柔和流动背景 */
  --bg-1:#F5F0F7;
  --bg-2:#FFE8E0;
  --bg-3:#E0EBFF;
  --bg-4:#FFF5E0;
  --ink:#1A1A2E;
  --ink-soft:#4A4A6A;
  --ink-faint:#8A8AA0;
  --glass-bg:rgba(255,255,255,0.55);
  --glass-bg-strong:rgba(255,255,255,0.72);
  --glass-bg-soft:rgba(255,255,255,0.35);
  --glass-border:rgba(255,255,255,0.85);
  --glass-border-soft:rgba(255,255,255,0.5);
  --glass-shadow:rgba(31,38,135,0.12);
  --glass-highlight:rgba(255,255,255,0.9);
  --accent:#FF5E3A;
  --accent-soft:rgba(255,94,58,0.15);
  --gold:#FFB340;
  --line:rgba(0,0,0,0.06);
  /* 课程配色 - 鲜活玻璃色 */
  --c1:#FF5E3A; --c2:#34C759; --c3:#FFB340; --c4:#5AC8FA;
  --c5:#AF52DE; --c6:#FF9500; --c7:#5856D6; --c8:#FF2D55;
  --c9:#00C7BE; --c10:#FF6482;
}

/* 深色模式 - 深邃夜空玻璃 */
body.dark{
  --bg-1:#0A0A1A;
  --bg-2:#1A0A2E;
  --bg-3:#0A1A2E;
  --bg-4:#2E1A0A;
  --ink:#F5F5FA;
  --ink-soft:#B0B0C8;
  --ink-faint:#6A6A85;
  --glass-bg:rgba(40,40,60,0.55);
  --glass-bg-strong:rgba(60,60,85,0.72);
  --glass-bg-soft:rgba(30,30,50,0.35);
  --glass-border:rgba(255,255,255,0.18);
  --glass-border-soft:rgba(255,255,255,0.1);
  --glass-shadow:rgba(0,0,0,0.4);
  --glass-highlight:rgba(255,255,255,0.15);
  --accent:#FF7E5F;
  --accent-soft:rgba(255,126,95,0.2);
  --gold:#FFC857;
  --line:rgba(255,255,255,0.08);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

body{
  max-width:480px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;position:relative;
  overflow-x:hidden;
  /* 流动渐变背景 - 玻璃折射的内容来源 */
  background:
    radial-gradient(circle at 15% 10%, var(--bg-2) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, var(--bg-3) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, var(--bg-4) 0%, transparent 50%),
    radial-gradient(circle at 20% 60%, var(--bg-1) 0%, transparent 40%),
    var(--bg-1);
  background-attachment:fixed;
}

/* 背景动态光斑 - 增强玻璃折射感 */
body::before{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3) 0%, transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(255,200,150,0.2) 0%, transparent 25%);
  filter:blur(40px);
  animation:drift 20s ease-in-out infinite alternate;
}
body.dark::before{
  background:
    radial-gradient(circle at 30% 40%, rgba(90,200,250,0.15) 0%, transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(175,82,222,0.15) 0%, transparent 25%);
}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg);}
  100%{transform:translate(5%,-5%) rotate(180deg);}
}

.app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;}

/* ============================================
   液态玻璃基础材质
   ============================================ */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:
    0 8px 32px var(--glass-shadow),
    inset 0 1px 2px var(--glass-highlight),
    inset 0 -1px 1px rgba(0,0,0,0.04);
  position:relative;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%);
  opacity:0.6;
}
body.dark .glass::before{
  background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.03) 100%);
}

/* ============================================
   状态栏
   ============================================ */
.statusbar{
  height:50px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;font-size:15px;font-weight:600;color:var(--ink);
  position:sticky;top:0;z-index:20;
  background:var(--glass-bg-soft);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--glass-border-soft);
}
.statusbar .right{display:flex;gap:6px;align-items:center;font-size:11px;}

/* ============================================
   顶部标题区
   ============================================ */
.header{padding:12px 20px 16px;position:relative;z-index:2;}
.semester{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.2em;
  color:var(--ink-faint);text-transform:uppercase;margin-bottom:8px;
  font-weight:500;
}
.title-row{display:flex;justify-content:space-between;align-items:flex-end;}
.title{
  font-family:'Fraunces',serif;font-weight:600;font-size:40px;line-height:0.95;
  letter-spacing:-0.02em;color:var(--ink);
}
.title em{font-style:italic;font-weight:400;color:var(--accent);}

/* 周次胶囊 - 液态玻璃 */
.week-pill{
  font-family:'Fraunces',serif;font-size:13px;font-weight:500;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  color:var(--ink);
  padding:8px 16px;border-radius:24px;
  display:flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--glass-border);
  box-shadow:0 4px 16px var(--glass-shadow), inset 0 1px 1px var(--glass-highlight);
  transition:transform 0.2s, box-shadow 0.2s;
}
.week-pill:active{transform:scale(0.95);}
.week-pill .num{font-size:20px;font-weight:700;font-style:italic;color:var(--accent);}

/* ============================================
   下节课卡片 - 核心液态玻璃
   ============================================ */
.next-up{
  margin:0 20px 18px;padding:20px 22px;border-radius:28px;
  position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg, rgba(255,94,58,0.85) 0%, rgba(255,143,101,0.75) 100%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:
    0 12px 40px rgba(255,94,58,0.35),
    inset 0 1px 2px rgba(255,255,255,0.5),
    inset 0 -1px 1px rgba(0,0,0,0.1);
  color:#fff;
  transition:transform 0.2s;
}
.next-up:active{transform:scale(0.98);}
/* 玻璃光泽 */
.next-up::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.35) 0%, transparent 35%, transparent 65%, rgba(255,255,255,0.1) 100%);
}
/* 动态光斑 */
.next-up::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  pointer-events:none;
}
body.dark .next-up{
  background:linear-gradient(135deg, rgba(255,126,95,0.7) 0%, rgba(255,158,125,0.6) 100%);
  box-shadow:0 12px 40px rgba(255,126,95,0.25), inset 0 1px 2px rgba(255,255,255,0.2);
}
.next-up .label{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.25em;
  color:rgba(255,255,255,0.85);text-transform:uppercase;margin-bottom:10px;
  position:relative;z-index:2;font-weight:600;
}
.next-up .course-name{
  font-family:'Fraunces',serif;font-size:26px;font-weight:600;line-height:1.1;
  position:relative;z-index:2;letter-spacing:-0.01em;
}
.next-up .meta{
  font-size:12px;color:rgba(255,255,255,0.9);display:flex;gap:8px;align-items:center;
  margin-top:10px;position:relative;z-index:2;flex-wrap:wrap;
}
.next-up .meta .dot{width:3px;height:3px;background:rgba(255,255,255,0.6);border-radius:50%;}
.next-up .countdown{position:absolute;right:22px;bottom:20px;text-align:right;z-index:2;}
.next-up .countdown .num{
  font-family:'Fraunces',serif;font-size:36px;font-weight:700;font-style:italic;
  color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.next-up .countdown .unit{font-size:10px;color:rgba(255,255,255,0.85);letter-spacing:0.1em;}
.next-up.empty{cursor:default;}
.next-up.empty .course-name{font-size:17px;color:rgba(255,255,255,0.85);font-style:italic;font-weight:400;}

/* ============================================
   周次选择条 - 玻璃胶囊
   ============================================ */
.week-tabs{
  display:flex;gap:6px;margin:0 20px 16px;overflow-x:auto;padding:6px 4px;
  scrollbar-width:none;
  background:var(--glass-bg-soft);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-radius:20px;
  border:1px solid var(--glass-border-soft);
}
.week-tabs::-webkit-scrollbar{display:none;}
.week-tab{
  flex:0 0 auto;font-family:'Fraunces',serif;font-size:13px;font-weight:500;
  color:var(--ink-soft);padding:8px 14px;border-radius:16px;min-width:40px;text-align:center;
  cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.week-tab.active{
  background:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(255,94,58,0.4), inset 0 1px 1px rgba(255,255,255,0.3);
}
.week-tab.today{color:var(--accent);}
.week-tab.today.active{color:#fff;}

/* ============================================
   课表网格
   ============================================ */
.grid-wrap{flex:1;padding:0 20px;display:flex;flex-direction:column;min-height:0;}
.grid-head{
  display:grid;grid-template-columns:32px repeat(5,1fr);gap:4px;margin-bottom:8px;
}
.grid-head div{
  text-align:center;font-family:'Fraunces',serif;font-size:11px;color:var(--ink-faint);
  padding:6px 0;font-weight:500;
}
.grid-head div.today-h{color:var(--accent);font-weight:700;}
.grid-head div .d{font-size:16px;font-weight:600;color:var(--ink);display:block;line-height:1;}
.grid-head div.today-h .d{color:var(--accent);}
.grid-head div .wd{font-family:'JetBrains Mono';font-size:8px;letter-spacing:0.1em;text-transform:uppercase;margin-top:3px;display:block;}

.grid{
  display:grid;grid-template-columns:32px repeat(5,1fr);gap:4px;flex:1;min-height:0;
}
.time-col{
  font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--ink-faint);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;line-height:1.3;padding:2px;
}
.time-col .p{font-family:'Fraunces',serif;font-size:14px;font-weight:600;color:var(--ink-soft);font-style:italic;}

/* 空单元格 - 微玻璃 */
.cell{
  background:var(--glass-bg-soft);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:10px;position:relative;min-height:48px;
  border:1px solid var(--glass-border-soft);
}

/* 课程块 - 液态玻璃色块 */
.course{
  position:absolute;inset:2px;border-radius:9px;padding:6px 7px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;overflow:hidden;cursor:pointer;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.12),
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 -1px 1px rgba(0,0,0,0.08);
  transition:transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s;
}
.course::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.08) 100%);
}
.course:active{
  transform:scale(0.94);
  box-shadow:0 2px 6px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.5);
}
.course .cn{font-family:'Fraunces',serif;font-size:10px;font-weight:600;line-height:1.15;position:relative;z-index:1;}
.course .cl{font-size:7px;opacity:0.9;font-weight:500;position:relative;z-index:1;}

/* ============================================
   底部导航 - iOS 26 悬浮液态玻璃 Tab Bar
   ============================================ */
.tabbar{
  display:flex;justify-content:space-around;align-items:center;
  padding:8px 8px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  border:1px solid var(--glass-border);
  border-radius:32px;
  position:fixed;
  left:16px;right:16px;bottom:16px;
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:50;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.18),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 2px var(--glass-highlight),
    inset 0 -1px 1px rgba(0,0,0,0.04);
}
/* 悬浮底栏光泽 */
.tabbar::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.1) 100%);
}
body.dark .tabbar{
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 1px 2px var(--glass-highlight);
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:'JetBrains Mono';font-size:8px;letter-spacing:0.1em;
  color:var(--ink-faint);text-transform:uppercase;cursor:pointer;
  padding:10px 16px;border-radius:24px;
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;z-index:1;
  flex:1;
}
.tab.active{
  color:var(--accent);
  background:var(--accent-soft);
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.25), 0 2px 8px rgba(255,94,58,0.15);
  transform:translateY(-2px);
}
.tab svg{width:24px;height:24px;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);}
.tab.active svg{transform:scale(1.1);}
.tab:active svg{transform:scale(0.88);}

/* 内容区域底部留白，避免被悬浮底栏遮挡 */
.app{padding-bottom:96px;}

/* ============================================
   视图切换
   ============================================ */
.view{display:none;flex:1;flex-direction:column;}
.view.active{display:flex;}

/* ============================================
   课程详情页
   ============================================ */
.detail-view{padding:0 20px;}
.back{
  font-family:'JetBrains Mono';font-size:11px;color:var(--ink-soft);margin:10px 0 20px;
  display:flex;align-items:center;gap:6px;letter-spacing:0.1em;cursor:pointer;
  padding:8px 14px;border-radius:14px;width:fit-content;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border-soft);
  transition:transform 0.2s;
}
.back:active{transform:scale(0.95);}
.detail-tag{
  display:inline-block;font-family:'JetBrains Mono';font-size:9px;letter-spacing:0.2em;
  color:#fff;background:var(--accent);padding:5px 12px;border-radius:8px;text-transform:uppercase;
  margin-bottom:12px;font-weight:600;
  box-shadow:0 4px 12px rgba(255,94,58,0.3);
}
.detail-name{
  font-family:'Fraunces',serif;font-size:36px;font-weight:600;line-height:1;letter-spacing:-0.02em;
}
.detail-name em{font-style:italic;color:var(--accent);font-weight:400;}
.detail-sub{
  font-family:'Fraunces',serif;font-size:14px;color:var(--ink-soft);font-style:italic;margin-top:8px;
}

/* 信息卡 - 液态玻璃 */
.detail-info{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:20px;overflow:hidden;margin:20px 0;
  border:1px solid var(--glass-border);
  box-shadow:0 8px 24px var(--glass-shadow), inset 0 1px 1px var(--glass-highlight);
}
.detail-info .item{
  background:var(--glass-bg-soft);
  padding:16px 18px;
}
.detail-info .item .k{
  font-family:'JetBrains Mono';font-size:8px;letter-spacing:0.2em;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:6px;font-weight:600;
}
.detail-info .item .v{font-family:'Fraunces',serif;font-size:16px;font-weight:600;color:var(--ink);}

.section-title{
  font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:var(--ink-soft);
  margin:20px 0 12px;display:flex;align-items:center;gap:10px;
}
.section-title::before{content:"";width:16px;height:2px;background:var(--accent);border-radius:1px;}

/* 时段卡 - 液态玻璃 */
.slot-list{display:flex;flex-direction:column;gap:10px;}
.slot{
  display:flex;gap:14px;align-items:center;padding:14px 16px;
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-radius:18px;
  border:1px solid var(--glass-border);
  border-left:4px solid var(--accent);
  box-shadow:0 4px 16px var(--glass-shadow), inset 0 1px 1px var(--glass-highlight);
  transition:transform 0.2s;
}
.slot:active{transform:scale(0.98);}
.slot .day{
  font-family:'Fraunces',serif;font-size:24px;font-weight:700;font-style:italic;color:var(--ink);
  line-height:1;min-width:30px;
}
.slot .day .dw{font-size:9px;font-family:'JetBrains Mono';font-style:normal;color:var(--ink-faint);display:block;letter-spacing:0.1em;margin-top:3px;}
.slot .time{flex:1;}
.slot .time .p{font-family:'Fraunces',serif;font-size:14px;font-weight:600;color:var(--ink);}
.slot .time .t{font-family:'JetBrains Mono';font-size:10px;color:var(--ink-faint);margin-top:3px;}
.slot .weeks{
  font-family:'JetBrains Mono';font-size:9px;color:var(--ink-soft);
  background:var(--glass-bg-strong);padding:5px 10px;border-radius:10px;letter-spacing:0.05em;
  border:1px solid var(--glass-border-soft);
}
.slot .del-slot{
  background:var(--accent-soft);border:none;color:var(--accent);cursor:pointer;
  font-size:18px;padding:6px 10px;border-radius:10px;font-weight:600;
  transition:transform 0.2s;
}
.slot .del-slot:active{transform:scale(0.9);}

/* ============================================
   表单 - 液态玻璃输入
   ============================================ */
.form-view{padding:0 20px 40px;}
.form-group{margin-bottom:20px;}
.form-group label{
  display:block;font-family:'JetBrains Mono';font-size:9px;letter-spacing:0.2em;
  color:var(--ink-faint);text-transform:uppercase;margin-bottom:8px;font-weight:600;
}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:14px 16px;border-radius:14px;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  font-family:'DM Sans';font-size:15px;color:var(--ink);font-weight:500;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.04);
  transition:all 0.2s;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft), inset 0 1px 2px rgba(0,0,0,0.04);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* 颜色选择器 */
.color-picker{display:flex;gap:10px;flex-wrap:wrap;}
.color-dot{
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;
  box-shadow:0 4px 12px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.4);
  transition:transform 0.2s;
}
.color-dot.selected{
  border-color:var(--ink);transform:scale(1.15);
  box-shadow:0 6px 16px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.5);
}

/* 按钮 - 液态玻璃 */
.btn{
  display:block;width:100%;padding:16px;border:none;border-radius:16px;
  font-family:'Fraunces',serif;font-size:16px;font-weight:600;cursor:pointer;
  background:linear-gradient(135deg, var(--accent) 0%, #FF7E5F 100%);
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 8px 24px rgba(255,94,58,0.35), inset 0 1px 1px rgba(255,255,255,0.4);
  transition:transform 0.2s, box-shadow 0.2s;
  position:relative;overflow:hidden;
}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 40%);
}
.btn:active{transform:scale(0.97);box-shadow:0 4px 12px rgba(255,94,58,0.3), inset 0 1px 1px rgba(255,255,255,0.5);}

.btn-secondary{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  color:var(--ink);border:1px solid var(--glass-border);
  box-shadow:0 4px 16px var(--glass-shadow), inset 0 1px 1px var(--glass-highlight);
}
.btn-danger{
  background:var(--glass-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--accent);border:1px solid var(--accent);
  box-shadow:0 4px 16px var(--glass-shadow);
}

/* ============================================
   课程列表
   ============================================ */
.course-list{padding:0 20px;display:flex;flex-direction:column;gap:12px;}
.course-item{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-radius:18px;cursor:pointer;
  border:1px solid var(--glass-border);
  box-shadow:0 4px 16px var(--glass-shadow), inset 0 1px 1px var(--glass-highlight);
  transition:transform 0.2s;
}
.course-item:active{transform:scale(0.98);}
.course-item .color-bar{width:5px;height:40px;border-radius:3px;box-shadow:0 0 8px currentColor;}
.course-item .info{flex:1;}
.course-item .info .n{font-family:'Fraunces',serif;font-size:18px;font-weight:600;}
.course-item .info .t{font-size:12px;color:var(--ink-faint);margin-top:3px;}
.course-item .slots-count{
  font-family:'JetBrains Mono';font-size:10px;color:var(--ink-soft);
  background:var(--glass-bg-strong);padding:5px 10px;border-radius:10px;
  border:1px solid var(--glass-border-soft);
}

/* ============================================
   设置
   ============================================ */
.settings-view{padding:0 20px 40px;}
.setting-item{
  display:flex;justify-content:space-between;align-items:center;padding:16px 0;
  border-bottom:1px solid var(--line);
}
.setting-item .k{font-family:'Fraunces',serif;font-size:15px;font-weight:600;}
.setting-item .desc{font-size:11px;color:var(--ink-faint);margin-top:3px;}
.setting-item input{
  width:90px;text-align:right;
  background:var(--glass-bg);border:1px solid var(--glass-border-soft);
  border-radius:10px;padding:8px 10px;color:var(--ink);
}

/* ============================================
   Toast - 液态玻璃提示
   ============================================ */
.toast{
  position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  color:var(--ink);padding:14px 22px;border-radius:18px;
  font-size:13px;font-weight:600;z-index:1000;opacity:0;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
  border:1px solid var(--glass-border);
  box-shadow:0 12px 32px var(--glass-shadow), inset 0 1px 1px var(--glass-highlight);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================================
   动画
   ============================================ */
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes glassShine{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
.view.active > *{animation:rise 0.5s cubic-bezier(0.4,0,0.2,1) backwards;}
.view.active > *:nth-child(2){animation-delay:0.06s;}
.view.active > *:nth-child(3){animation-delay:0.12s;}
.view.active > *:nth-child(4){animation-delay:0.18s;}

/* ============================================
   空状态
   ============================================ */
.empty-state{
  text-align:center;padding:60px 20px;color:var(--ink-faint);
}
.empty-state .icon{font-size:56px;margin-bottom:18px;}
.empty-state .t{font-family:'Fraunces',serif;font-size:18px;font-style:italic;}

/* ============================================
   悬浮按钮 - 液态玻璃 FAB
   ============================================ */
.fab{
  position:fixed;bottom:max(96px,calc(16px + env(safe-area-inset-bottom) + 76px));right:24px;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, #FF7E5F 100%);
  color:#fff;border:none;font-size:30px;cursor:pointer;
  box-shadow:0 12px 32px rgba(255,94,58,0.45), inset 0 2px 2px rgba(255,255,255,0.4);
  z-index:30;transition:transform 0.2s cubic-bezier(0.4,0,0.2,1);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.fab::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
}
.fab:active{transform:scale(0.88) rotate(90deg);}

/* ============================================
   响应式优化
   ============================================ */
@media (max-width:360px){
  .title{font-size:34px;}
  .next-up{padding:18px 20px;}
  .next-up .course-name{font-size:22px;}
  .detail-name{font-size:30px;}
}

/* ============================================
   iOS 安全区适配
   ============================================ */
@supports (padding:max(0px)){
  .statusbar{padding-top:max(0px,env(safe-area-inset-top));height:max(50px,calc(50px + env(safe-area-inset-top)));}
}