*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito','Noto Sans TC',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
.app{width:100vw;height:100vh;display:flex;flex-direction:column}

/* === PANELS === */
#main-content{flex:1;position:relative;overflow:hidden}
.panel{position:absolute;inset:0;overflow-y:auto;transition:transform .35s cubic-bezier(.77,0,.175,1),opacity .35s ease}
.panel.active{transform:translateX(0);opacity:1;pointer-events:all}
.panel.right{transform:translateX(100%);opacity:0;pointer-events:none}
.panel.left{transform:translateX(-100%);opacity:0;pointer-events:none}

/* === 角色選擇 === */
#panel-role{display:flex;align-items:center;justify-content:center;min-height:100%;padding:24px;background:linear-gradient(160deg,#dbeeff 0%,var(--bg) 60%)}
.role-wrap{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:36px}
.role-header{text-align:center}
.role-logo-img{width: 30rem;;height:auto;margin-bottom:10px;display:block;margin-left:auto;margin-right:auto}
.role-subtitle{font-size:.88rem;font-weight:600;color:var(--muted)}
.role-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.role-card{background:white;border-radius:24px;padding:28px 12px 22px;box-shadow:0 8px 28px rgba(44,100,160,.12);border:2.5px solid transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:inherit;transition:all .18s}
.role-card:active{transform:scale(.94)}
.role-card.role-teacher{border-color:#b3d7f5}
.role-card.role-teacher:hover{border-color:var(--blue);box-shadow:0 12px 36px rgba(44,100,160,.2);transform:translateY(-3px)}
.role-card.role-student{border-color:#ffc9a0}
.role-card.role-student:hover{border-color:var(--orange);box-shadow:0 12px 36px rgba(230,126,34,.15);transform:translateY(-3px)}
.role-icon{font-size:3rem;line-height:1}
.role-name{font-size:1.05rem;font-weight:900;color:var(--blue-dk)}
.role-sub{font-size:.72rem;font-weight:600;color:var(--muted);text-align:center;line-height:1.5}

/* === 教師登入 === */
#panel-teacher-login{display:flex;align-items:center;justify-content:center;min-height:100%;padding:24px;background:linear-gradient(160deg,#dbeeff 0%,var(--bg) 60%)}
.tlogin-wrap{width:100%;max-width:360px}
.tlogin-card{background:white;border-radius:24px;padding:28px 24px;box-shadow:0 8px 32px rgba(44,100,160,.15)}
.btn-back-role{background:none;border:none;color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer;padding:0;margin-bottom:18px;font-family:inherit;display:flex;align-items:center;gap:4px;transition:color .15s}
.btn-back-role:hover{color:var(--blue-dk)}
.btn-google{width:100%;padding:12px;border:2px solid var(--border);border-radius:12px;background:white;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;transition:all .15s;color:var(--text)}
.btn-google:hover{border-color:var(--blue);background:var(--blue-lt)}
.btn-google:active{transform:scale(.97)}
.login-divider{text-align:center;position:relative;margin:14px 0}
.login-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)}
.login-divider span{background:white;padding:0 12px;font-size:.76rem;font-weight:700;color:var(--muted);position:relative}
.btn-login-primary{width:100%;padding:13px;border:none;border-radius:12px;background:var(--blue);color:white;font-size:.95rem;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s;margin-top:4px}
.btn-login-primary:active{background:var(--blue-dk);transform:scale(.97)}
.btn-login-primary:disabled{opacity:.6;cursor:not-allowed}

/* === 學生登入 === */
#panel-login{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:24px;background:linear-gradient(160deg,#fff4e6 0%,var(--bg) 60%)}
.slogin-wrap{width:100%;max-width:360px}
.login-card{width:100%;background:var(--white);border-radius:24px;padding:28px 24px;box-shadow:0 8px 32px rgba(44,100,160,.15)}
.login-school{text-align:center;font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:2px;margin-bottom:6px}
.login-title{text-align:center;font-size:1.6rem;font-weight:900;color:var(--blue-dk);margin-bottom:24px}
.login-title span{color:var(--orange)}
.login-label{font-size:.8rem;font-weight:800;color:var(--muted);display:block;margin-bottom:8px}
.login-input{width:100%;border:2.5px solid #d4e8f8;border-radius:12px;padding:12px 16px;font-size:1rem;font-family:'Noto Sans TC',sans-serif;outline:none;transition:border-color .2s;color:var(--text);margin-bottom:16px}
.login-input:focus{border-color:var(--blue)}
.pin-display{display:flex;justify-content:center;gap:12px;margin-bottom:16px}
.pin-dot{width:18px;height:18px;border-radius:50%;border:2.5px solid #c8d8ec;background:transparent;transition:all .15s}
.pin-dot.filled{background:var(--blue);border-color:var(--blue)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.pin-btn{padding:14px;border:none;border-radius:14px;background:var(--blue-lt);color:var(--blue-dk);font-size:1.3rem;font-weight:900;cursor:pointer;transition:all .15s;font-family:inherit}
.pin-btn:active{background:var(--blue);color:white;transform:scale(.93)}
.pin-btn-del{background:#fff3e0;color:var(--orange)}
.pin-btn-ok{background:var(--blue);color:white}
.pin-btn-ok:disabled{background:#b0c8e8;cursor:not-allowed}
.login-error{text-align:center;font-size:.85rem;font-weight:700;color:var(--red);padding:10px;border-radius:10px;background:#fff0f0;display:none;margin-bottom:10px}
.login-error.show{display:block}
.login-switch{text-align:center;font-size:.82rem;font-weight:700;color:var(--muted);margin-top:14px}
.login-switch a{color:var(--blue);cursor:pointer;font-weight:800}

/* === HUB === */
#panel-hub{background:var(--bg)}
.hub-screen{display:flex;min-height:100vh;background:var(--bg)}

/* Sidebar（桌面版） */
.hub-sidebar{width:220px;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;background:var(--white);border-right:1px solid var(--border);padding:20px 14px;z-index:100;overflow-y:auto}
.hub-sidebar-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;padding:0 6px}
.hub-sidebar-avatar{font-size:2rem;line-height:1;flex-shrink:0}
.hub-sidebar-name{font-size:1rem;font-weight:900;color:var(--blue-dk);word-break:break-all}
.hub-sidebar-sub{font-size:.72rem;color:var(--muted);font-weight:600;margin-top:2px}
.hub-sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.hub-tab{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;font-size:.92rem;font-weight:800;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;transition:all .15s;font-family:inherit;color:var(--text)}
.hub-tab:hover{background:#f3f7fd}
.hub-tab.active{background:var(--blue-lt);color:var(--blue-dk)}
.hub-sidebar-footer{padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.btn-logout-hub{width:100%;padding:10px;border-radius:10px;background:#fff0f0;color:var(--red);font-size:.85rem;font-weight:800;border:none;cursor:pointer;font-family:inherit;transition:background .15s}
.btn-logout-hub:hover{background:#fee2e2}

/* 主內容區 */
.hub-content{flex:1;overflow-y:auto;padding:28px 24px 60px;max-width:760px}
.hub-panel{display:none}
.hub-panel.active{display:block}

/* 底部 tab bar（手機版才顯示） */
.hub-bottom-nav{display:none}

.hub-section-label{font-size:.78rem;font-weight:900;color:var(--muted);letter-spacing:1px;margin-bottom:12px}
.hub-subject-group{margin-bottom:20px}
.hub-group-title{font-size:.78rem;font-weight:900;color:var(--muted);letter-spacing:1px;margin-bottom:10px}
.subjects-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.subject-card{background:var(--white);border-radius:20px;padding:20px 14px 18px;box-shadow:0 4px 18px rgba(44,100,160,.1);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .18s;border:2.5px solid transparent;text-align:center}
.subject-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(44,100,160,.18)}
.subject-card:active{transform:scale(.95)}
.subject-card.theme-blue{border-color:#b3d7f5}
.subject-card.theme-orange{border-color:#ffc9a0}
.subject-card.theme-green{border-color:#a8e6c0}
.subject-card.theme-purple{border-color:#d4b8f0}
.subject-card.theme-teal{border-color:#a0ddd4}
.subject-icon{font-size:2.2rem}
.subject-name{font-size:1rem;font-weight:900;color:var(--blue-dk)}
.subject-desc{font-size:.75rem;color:var(--muted);font-weight:600;line-height:1.5}
.subject-badge{font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:20px;margin-top:4px}
.subject-badge.green{background:#e8f8ee;color:var(--green-dk)}
.subject-badge.orange{background:#fff3e0;color:#b05000}
.subject-badge.blue{background:var(--blue-lt);color:var(--blue-dk)}
.activity-card{background:var(--white);border-radius:18px;padding:16px;box-shadow:0 4px 18px rgba(44,100,160,.08)}
.activity-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f4f8}
.activity-row:last-child{border-bottom:none}
.activity-icon{font-size:1.5rem;flex-shrink:0}
.activity-info{flex:1}
.activity-title{font-size:.9rem;font-weight:800}
.activity-sub{font-size:.75rem;color:var(--muted);font-weight:600;margin-top:2px}
.activity-score{font-size:.85rem;font-weight:900;color:var(--blue-dk);white-space:nowrap}
.activity-empty{text-align:center;padding:20px;font-size:.88rem;color:var(--muted);font-weight:600}

/* === IFRAME === */
#panel-subject{background:#000}
#subject-frame{width:100%;height:100%;border:none;display:block}

/* === 個人資料（inline panel 內） === */
.profile-avatar-big{font-size:3rem;text-align:center;display:block;margin-bottom:16px}
.profile-body{padding:0;max-width:600px}
.profile-section{background:var(--white);border-radius:18px;padding:18px 16px;margin-bottom:14px;box-shadow:0 4px 18px rgba(44,100,160,.08)}
.profile-section-title{font-size:.82rem;font-weight:900;color:var(--muted);letter-spacing:1px;margin-bottom:14px}
.profile-input{width:100%;border:2px solid #d4e8f8;border-radius:10px;padding:10px 14px;font-size:.95rem;font-family:'Noto Sans TC',sans-serif;outline:none;color:var(--text);transition:border-color .2s}
.profile-input:focus{border-color:var(--blue)}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avatar-btn{font-size:1.6rem;padding:8px;border:2.5px solid transparent;border-radius:12px;cursor:pointer;background:var(--blue-lt);transition:all .15s;text-align:center}
.avatar-btn.selected{border-color:var(--blue);background:#d4e8f8}
.avatar-btn:active{transform:scale(.9)}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme-btn{padding:10px;border-radius:12px;border:2.5px solid transparent;cursor:pointer;font-size:.82rem;font-weight:800;transition:all .15s;text-align:center}
.theme-btn.selected{border-color:var(--blue-dk)}
.theme-btn:active{transform:scale(.95)}
.sound-row{display:flex;align-items:center;justify-content:space-between}
.sound-toggle{width:52px;height:28px;border-radius:20px;border:none;cursor:pointer;position:relative;transition:background .25s}
.sound-knob{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;background:white;transition:left .25s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.btn-save-profile{width:100%;padding:14px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:white;font-size:1rem;font-weight:900;cursor:pointer;font-family:inherit;margin-bottom:14px;box-shadow:0 4px 14px rgba(45,111,168,.3);transition:all .15s}
.btn-save-profile:active{transform:scale(.97)}
.btn-logout{width:100%;padding:12px;border:2px solid #ffb3b3;border-radius:14px;background:#fff0f0;color:var(--red);font-size:.95rem;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s;margin-bottom:40px}
.btn-logout:active{transform:scale(.97)}
.overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex}
.overlay-box{background:white;border-radius:24px;padding:28px 24px;max-width:320px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.overlay-icon{font-size:2.5rem;margin-bottom:10px}
.overlay-title{font-size:1.2rem;font-weight:900;margin-bottom:6px}
.overlay-sub{font-size:.88rem;color:var(--muted);font-weight:600;margin-bottom:20px}
.overlay-btns{display:flex;gap:10px}
.btn-cancel{flex:1;padding:12px;border:2px solid #d4e8f8;border-radius:12px;background:var(--blue-lt);color:var(--blue-dk);font-weight:800;cursor:pointer;font-family:inherit}
.btn-confirm{flex:1;padding:12px;border:none;border-radius:12px;background:var(--red);color:white;font-weight:800;cursor:pointer;font-family:inherit}
.spinner{width:36px;height:36px;border:4px solid rgba(74,144,217,.2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* === PWA 安裝橫幅 === */
.pwa-banner{position:fixed;bottom:0;left:0;right:0;z-index:8000;background:var(--blue-dk);color:white;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -4px 20px rgba(0,0,0,.25);animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pwa-banner-left{display:flex;align-items:center;gap:12px;min-width:0}
.pwa-banner-icon{font-size:1.8rem;flex-shrink:0}
.pwa-banner-title{font-size:.95rem;font-weight:900}
.pwa-banner-sub{font-size:.75rem;opacity:.8;margin-top:2px}
.pwa-banner-btns{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn-pwa-install{padding:9px 18px;border:none;border-radius:20px;background:white;color:var(--blue-dk);font-size:.88rem;font-weight:900;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.btn-pwa-install:active{transform:scale(.95)}
.btn-pwa-dismiss{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:white;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.btn-pwa-dismiss:hover{background:rgba(255,255,255,.15)}

/* === 班級加入 === */
.join-class-row{display:flex;gap:8px;align-items:center}
.join-code-input{flex:1;border:2px solid #d4e8f8;border-radius:10px;padding:9px 12px;font-size:1rem;font-family:'Noto Sans TC',sans-serif;outline:none;letter-spacing:3px;text-transform:uppercase;color:var(--text);transition:border-color .2s}
.join-code-input:focus{border-color:var(--blue)}
.btn-join-class{padding:9px 16px;border:none;border-radius:10px;background:var(--blue);color:white;font-size:.88rem;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.btn-join-class:active{transform:scale(.96)}
.join-class-error{font-size:.8rem;font-weight:700;color:var(--red);margin-top:6px;min-height:18px}
.class-joined-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.class-joined-name{font-size:.95rem;font-weight:800;color:var(--blue-dk);margin-bottom:3px}
.class-joined-code{font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:2px}
.btn-leave-class{padding:6px 12px;border:1.5px solid #fecaca;border-radius:8px;background:#fff5f5;color:var(--red);font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s;flex-shrink:0}
.btn-leave-class:active{background:#fee2e2}

/* ══════════════════════════════════════
   響應式斷點（index.html 專屬）
   ══════════════════════════════════════ */

/* 平板（≤ 768px） */
@media (max-width: 768px) {
  .role-wrap   { gap: 28px; }
  .hub-sidebar { display: none; }
  .hub-content { padding: 16px 14px 90px; max-width: 100%; }
  .hub-bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    z-index: 200;
    box-shadow: 0 -2px 12px rgba(44,100,160,.08);
  }
  .hub-bottom-btn {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 3px;
    padding: 10px 0 12px;
    background: transparent; border: none; cursor: pointer;
    font-size: .68rem; font-weight: 700; color: var(--muted);
    transition: color .15s; font-family: inherit;
  }
  .hub-bottom-btn.active { color: var(--blue-dk); }
  .hub-bottom-icon { font-size: 1.4rem; line-height: 1; }
}

/* 手機（≤ 480px） */
@media (max-width: 480px) {
  /* 角色選擇 */
  .role-wrap     { gap: 20px; padding: 20px; }
  .role-card     { padding: 20px 10px 16px; border-radius: 18px; }
  .role-icon     { font-size: 2.4rem; }
  .role-name     { font-size: .95rem; }
  .role-title    { font-size: 1.5rem; }
  .role-subtitle { font-size: .82rem; }

  /* 登入頁 */
  .slogin-wrap, .tlogin-wrap { padding: 14px; }
  .login-card, .tlogin-card  { padding: 20px 16px; border-radius: 18px; }
  .login-title               { font-size: 1.4rem; margin-bottom: 18px; }
  .pin-pad                   { gap: 8px; margin-bottom: 14px; }
  .pin-btn                   { padding: 11px; font-size: 1.1rem; }

  /* Hub 主頁 */
  .subjects-grid { gap: 10px; }
  .subject-card  { padding: 16px 10px 14px; border-radius: 16px; }
  .subject-icon  { font-size: 1.9rem; }
  .subject-name  { font-size: .9rem; }
  .subject-desc  { font-size: .7rem; }

  /* 個人資料 - 頭像格 6→4 欄 */
  .profile-body .avatar-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .avatar-btn                { font-size: 1.4rem; padding: 6px; }

  /* 主題色格 3→2 欄 */
  .theme-grid { grid-template-columns: 1fr 1fr; }

  .profile-avatar-big { font-size: 2.4rem; }
}

/* 極窄手機（≤ 360px） */
@media (max-width: 360px) {
  .role-cards    { gap: 10px; }
  .role-title    { font-size: 1.3rem; }
  .pin-btn       { padding: 9px; font-size: 1rem; }
  .subject-icon  { font-size: 1.7rem; }
  .subject-name  { font-size: .85rem; }
}