:root{--bg:#f6f7fb;--card:#fff;--line:#e9ecf3;--text:#1f2937;--muted:#667085;--blue:#4f46e5;--blue2:#eef2ff;--danger:#dc2626;--ok:#16a34a}
*{box-sizing:border-box}body{margin:0;font-family:"Microsoft YaHei",Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{background:var(--blue);color:white;border:0;border-radius:10px;padding:10px 16px;cursor:pointer}button:hover{filter:brightness(.95)}input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:10px;background:white}textarea{min-height:80px;resize:vertical}.hidden{display:none!important}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef2ff,#fff7ed)}.login-card{width:380px;background:var(--card);box-shadow:0 20px 60px #0001;border-radius:24px;padding:30px;display:grid;gap:10px}.login-card h1{margin:0;font-size:25px}.muted,.tip,#statusText{color:var(--muted);font-size:14px}.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}aside{background:#111827;color:white;padding:18px;display:flex;flex-direction:column;gap:10px}.brand{font-size:20px;font-weight:700;margin-bottom:20px}.nav{background:transparent;text-align:left;border-radius:12px}.nav.active,.nav:hover{background:#374151}main{padding:24px;overflow:auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h2{margin:0 0 6px}h3{margin-top:24px}.cards{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:16px}.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 8px 30px #1018280a}.card-num{font-size:34px;font-weight:800;color:var(--blue);margin-bottom:8px}.form-grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:12px;align-items:center;margin-bottom:18px}.lesson-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}.lesson-grid textarea,.lesson-grid .check{grid-column:span 3}.inline{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}.inline input,.inline select{min-width:180px}table{width:100%;border-collapse:separate;border-spacing:0;background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}th{background:#f9fafb;color:#475467;font-weight:700}tr:last-child td{border-bottom:0}.badge{display:inline-block;padding:4px 8px;border-radius:99px;background:var(--blue2);color:var(--blue);font-size:12px}.danger{color:var(--danger)}.ok{color:var(--ok)}.photos{display:flex;gap:6px;flex-wrap:wrap}.photos img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}.link{color:var(--blue);cursor:pointer;text-decoration:underline}.small-btn{padding:6px 10px;border-radius:8px;font-size:12px}.secondary{background:#475467}.danger-btn{background:var(--danger)}@media(max-width:900px){.app{grid-template-columns:1fr}aside{position:static}.cards,.form-grid,.lesson-grid{grid-template-columns:1fr}.lesson-grid textarea,.lesson-grid .check{grid-column:auto}}
.user-info{font-size:13px;color:#cbd5e1;background:#1f2937;border-radius:10px;padding:8px 10px;margin:-10px 0 12px}.password-panel{display:grid;gap:10px;max-width:420px}.admin-only.hidden,.admin-frontdesk-only.hidden{display:none!important}


.brand-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 6px;
}


/* artclass-logo-start */
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    flex: 0 0 auto;
}
/* artclass-logo-end */

/* artclass-h5-notify-start */
.notify-panel{position:fixed;inset:0;background:#10182888;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.notify-card{width:min(720px,96vw);background:white;border-radius:22px;padding:20px;box-shadow:0 24px 80px #0003}.notify-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.notify-head h3{margin:0}.notify-card textarea{width:100%;min-height:260px;margin-top:12px;white-space:pre-wrap}.notify-card input{width:100%;margin-top:10px}.student-actions{display:flex;gap:6px;flex-wrap:wrap}.small-btn + .small-btn{margin-left:4px}
/* artclass-h5-notify-end */

/* artclass-management-upgrade-start */
.inline.wrap { flex-wrap: wrap; gap: 10px; }
.management-page .panel label { color: #475569; font-size: 14px; }
.management-page table td { vertical-align: middle; }
.management-page .danger b { color: #dc2626; }
.management-page .muted { color: #64748b; font-size: 13px; }
.management-nav { position: relative; }
@media (max-width: 900px){
  .management-page .form-grid { grid-template-columns: 1fr; }
}
/* artclass-management-upgrade-end */

/* artclass-experience-upgrade-start */
.exp-section{margin-top:22px}.exp-cards .card-num{font-size:28px}.exp-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wrap{flex-wrap:wrap}.exp-page input,.exp-page select,.exp-page textarea{min-width:0}.small-muted{font-size:12px;color:#777}.hour-chip{background:#f3eefc;color:#5e35b1;border-radius:999px;padding:8px 12px;font-weight:700;white-space:nowrap}.feedback-card{border-radius:18px;box-shadow:0 12px 30px #00000012;border:1px solid #eee}.feedback-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.feedback-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:12px 0}.feedback-photos img{width:100%;height:120px;object-fit:cover;border-radius:12px}.feedback-block{background:#faf7ff;border:1px solid #f0e8ff;border-radius:14px;padding:12px;margin-top:10px}.feedback-block p{white-space:pre-wrap;margin:8px 0 0}.privacy-check{display:block;margin-top:14px;padding:12px;border:1px solid #eee;border-radius:12px;background:#fafafa;line-height:1.5}.no-photo{padding:30px;text-align:center;color:#999;background:#fafafa;border-radius:12px}@media(max-width:900px){.exp-two-col{grid-template-columns:1fr}.feedback-head{display:block}.hour-chip{display:inline-block;margin-top:8px}}
/* artclass-experience-upgrade-end */

/* artclass-teacher-mode-start */
body.teacher-mode #page-hours,
body.teacher-mode #page-payments,
body.teacher-mode #page-users,
body.teacher-mode #page-backups,
body.teacher-mode #page-logs,
body.teacher-mode #page-teachers,
body.teacher-mode #page-records,
body.teacher-mode #page-report,
body.teacher-mode #page-students,
body.teacher-mode #page-lesson {
  display: none !important;
}
.teacher-mode-page .panel.inline.wrap { align-items: center; }
.teacher-mode .danger-btn { display: none !important; }
.teacher-mode .admin-only,
.teacher-mode .admin-frontdesk-only { display: none !important; }
.teacher-mode .card-num { color: #4f46e5; }
/* artclass-teacher-mode-end */

/* artclass-teacher-menu-fix-start */
.teacher-menu-force-hidden { display: none !important; }
body.teacher-strict-menu #page-students,
body.teacher-strict-menu #page-teachers,
body.teacher-strict-menu #page-lesson,
body.teacher-strict-menu #page-records,
body.teacher-strict-menu #page-hours,
body.teacher-strict-menu #page-report,
body.teacher-strict-menu #page-payments,
body.teacher-strict-menu #page-users,
body.teacher-strict-menu #page-backups,
body.teacher-strict-menu #page-logs,
body.teacher-strict-menu #page-renewal {
  display: none !important;
}
/* artclass-teacher-menu-fix-end */

/* artclass-delete-soft-upgrade-start */
.soft-delete-student,
.soft-delete-teacher {
  white-space: nowrap;
}
/* artclass-delete-soft-upgrade-end */


/* artclass-beian-start */
.site-beian-footer {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 12px;
    margin-top: 32px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
    background: transparent;
}

.site-beian-footer a {
    color: #64748b;
    text-decoration: none;
}

.site-beian-footer a:hover {
    color: #4f46e5;
    text-decoration: underline;
}
/* artclass-beian-end */

/* artclass-mobile-upgrade-start */
.mobile-topbar,
.mobile-overlay,
.mobile-bottom-bar,
.mobile-quick-actions { display: none; }
.mobile-only { display: none !important; }

@media (max-width: 820px) {
  html, body { width: 100%; overflow-x: hidden; }
  body { background: #f6f7fb; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .mobile-only { display: initial !important; }

  .login-wrap { padding: 18px; align-items: stretch; }
  .login-card { width: 100%; max-width: 420px; margin: auto; border-radius: 22px; padding: 24px; }
  .login-card h1 { font-size: 22px; line-height: 1.35; }

  .app { display: block; min-height: 100vh; }
  .mobile-topbar {
    display: flex;
    position: fixed;
    z-index: 1200;
    left: 0;
    right: 0;
    top: 0;
    min-height: 56px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line, #e9ecf3);
    align-items: center;
    gap: 10px;
  }
  .mobile-menu-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 14px;
    background: #111827;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
  }
  .mobile-title-wrap { min-width: 0; flex: 1; }
  .mobile-title { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-subtitle { font-size: 12px; color: var(--muted, #667085); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-refresh-btn { width: 42px; height: 42px; padding: 0; border-radius: 14px; background: #4f46e5; color: #fff; flex: 0 0 auto; }

  .mobile-overlay {
    display: none;
    position: fixed;
    z-index: 1180;
    inset: 0;
    background: rgba(15, 23, 42, .42);
  }
  body.mobile-menu-open .mobile-overlay { display: block; }

  aside {
    position: fixed !important;
    z-index: 1190;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(82vw, 310px);
    max-width: 310px;
    padding: 18px;
    padding-top: max(18px, env(safe-area-inset-top));
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 20px 0 60px rgba(0,0,0,.18);
  }
  body.mobile-menu-open aside { transform: translateX(0); }
  aside .brand { font-size: 18px; line-height: 1.35; margin-bottom: 16px; }
  aside .nav, aside button { min-height: 44px; font-size: 15px; }

  main {
    padding: 72px 12px 92px !important;
    overflow: visible;
  }
  main > header {
    display: none !important;
  }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; margin-top: 18px; }
  h4 { font-size: 16px; margin: 10px 0; }

  .cards,
  .exp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .card, .panel {
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
  }
  .card-num { font-size: 26px; }

  .form-grid,
  .lesson-grid,
  .password-panel,
  .exp-two-col { grid-template-columns: 1fr !important; gap: 10px !important; }
  .lesson-grid textarea,
  .lesson-grid .check { grid-column: auto !important; }

  .inline,
  .panel.inline {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }
  .inline input,
  .inline select,
  .inline button,
  .panel.inline input,
  .panel.inline select,
  .panel.inline button { min-width: 0 !important; width: 100%; }

  input, select, textarea, button {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  textarea { min-height: 112px; line-height: 1.6; }
  input[type="checkbox"] { width: auto; min-height: auto; }
  input[type="file"] { padding: 12px; line-height: 1.5; }
  .check { display: flex; align-items: center; gap: 8px; line-height: 1.5; }
  .small-btn { min-height: 36px; width: auto; display: inline-flex; align-items: center; justify-content: center; margin: 3px 4px 3px 0; }

  table.mobile-card-table {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  table.mobile-card-table thead { display: none; }
  table.mobile-card-table tbody { display: block; width: 100%; }
  table.mobile-card-table tr {
    display: block;
    width: 100%;
    margin: 10px 0;
    background: #fff;
    border: 1px solid var(--line, #e9ecf3);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .06);
    overflow: hidden;
  }
  table.mobile-card-table td {
    display: grid;
    grid-template-columns: minmax(88px, 35%) 1fr;
    gap: 10px;
    align-items: start;
    width: 100%;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line, #e9ecf3);
    word-break: break-word;
  }
  table.mobile-card-table td:last-child { border-bottom: 0; }
  table.mobile-card-table td::before {
    content: attr(data-label);
    color: var(--muted, #667085);
    font-weight: 700;
    font-size: 13px;
  }
  table.mobile-card-table td[colspan] { display: block; text-align: center; color: var(--muted, #667085); }
  table.mobile-card-table td[colspan]::before { display: none; }
  table.mobile-card-table .photos { grid-column: 2; }
  .photos img { width: 66px; height: 66px; }

  .mobile-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 16px;
  }
  .mobile-quick-card {
    border: 1px solid var(--line, #e9ecf3);
    border-radius: 18px;
    background: #fff;
    padding: 14px;
    min-height: 82px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    color: var(--text, #1f2937);
    text-decoration: none;
  }
  .mobile-quick-card strong { font-size: 16px; }
  .mobile-quick-card span { color: var(--muted, #667085); font-size: 12px; }

  .mobile-bottom-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    z-index: 1150;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line, #e9ecf3);
  }
  .mobile-tab {
    border: 0;
    background: transparent;
    color: #475467;
    border-radius: 12px;
    padding: 6px 4px;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
  }
  .mobile-tab .ico { font-size: 19px; line-height: 1; }
  .mobile-tab.active { color: #4f46e5; background: #eef2ff; }
  .mobile-tab.menu-tab { color: #111827; }

  .notify-modal, .modal, .dialog {
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 420px) {
  .cards,
  .exp-cards,
  .mobile-quick-actions { grid-template-columns: 1fr !important; }
  table.mobile-card-table td { grid-template-columns: 1fr; gap: 4px; }
  table.mobile-card-table .photos { grid-column: 1; }
  .mobile-title { font-size: 15px; }
}

/* 家长手机端增强 */
@media (max-width: 700px) {
  .phone { max-width: 100% !important; }
  .phone header { border-radius: 0 0 22px 22px; }
  .lesson, .card, .feedback-card { margin: 12px; border-radius: 18px; }
  .photos, .feedback-photos { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .photos img, .feedback-photos img { height: auto !important; aspect-ratio: 1/1; }
}
/* artclass-mobile-upgrade-end */

/* artclass-bottom-nav-click-effect-start */
@media (max-width: 820px) {
  #mobileBottomBar .mobile-tab,
  #mobileBottomBar .stable-cat-tab {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    will-change: transform !important;
  }

  #mobileBottomBar .mobile-tab.cat-nav-pop,
  #mobileBottomBar .stable-cat-tab.cat-nav-pop {
    animation: catNavButtonPopOnce .24s ease-out both !important;
  }

  #mobileBottomBar .mobile-tab.cat-nav-pop .ico-wrap,
  #mobileBottomBar .mobile-tab.cat-nav-pop .stable-cat-icon-wrap,
  #mobileBottomBar .stable-cat-tab.cat-nav-pop .ico-wrap,
  #mobileBottomBar .stable-cat-tab.cat-nav-pop .stable-cat-icon-wrap {
    animation: catNavIconWrapPopOnce .24s ease-out both !important;
  }

  #mobileBottomBar .mobile-tab.cat-nav-pop img,
  #mobileBottomBar .stable-cat-tab.cat-nav-pop img {
    animation: catNavIconPopOnce .24s ease-out both !important;
  }

  @keyframes catNavButtonPopOnce {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
  }

  @keyframes catNavIconWrapPopOnce {
    0% { transform: scale(1); }
    50% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }

  @keyframes catNavIconPopOnce {
    0% { transform: scale(1); }
    50% { transform: scale(1.26); }
    100% { transform: scale(1); }
  }

  #mobileBottomBar .mobile-tab.active.cat-nav-pop,
  #mobileBottomBar .stable-cat-tab.active.cat-nav-pop {
    animation: catNavActiveButtonPopOnce .24s ease-out both !important;
  }

  @keyframes catNavActiveButtonPopOnce {
    0% { transform: translateY(-3px) scale(1); }
    50% { transform: translateY(-8px) scale(1.08); }
    100% { transform: translateY(-3px) scale(1); }
  }
}
/* artclass-bottom-nav-click-effect-end */

/* artclass-stable-bottom-nav-start */
@media (max-width: 820px) {
  body {
    padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  }

  main,
  .main,
  .content,
  #main,
  #appView main {
    padding-bottom: calc(154px + env(safe-area-inset-bottom)) !important;
  }

  #mobileBottomBar.mobile-bottom-bar.stable-cat-bottom-bar {
    min-height: 126px !important;
    padding: 8px 4px calc(14px + env(safe-area-inset-bottom)) !important;
    gap: 2px !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: 0 -12px 34px rgba(15, 23, 42, .14) !important;
    border-top: 1px solid rgba(226, 232, 240, .95) !important;
    align-items: center !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab {
    min-height: 102px !important;
    padding: 4px 1px 6px !important;
    border-radius: 20px !important;
    gap: 4px !important;
    overflow: visible !important;
    transform-origin: center bottom !important;
    transition: transform .15s ease, background .18s ease, box-shadow .18s ease !important;
  }

  #mobileBottomBar .stable-cat-icon-wrap {
    width: 76px !important;
    height: 76px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    transition: transform .15s ease, background .18s ease, box-shadow .18s ease !important;
  }

  #mobileBottomBar .stable-cat-icon {
    width: 68px !important;
    height: 68px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    transform-origin: center center !important;
    transition: transform .15s ease !important;
  }

  #mobileBottomBar .stable-cat-label {
    font-size: 13px !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active {
    color: #4f46e5 !important;
    background: linear-gradient(180deg, #f8f9ff 0%, #eef2ff 100%) !important;
    box-shadow: 0 10px 22px rgba(79, 70, 229, .18) !important;
    transform: translateY(-4px) !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active .stable-cat-icon-wrap {
    width: 92px !important;
    height: 92px !important;
    background: rgba(255,255,255,.99) !important;
    box-shadow: 0 10px 22px rgba(79,70,229,.22) !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active .stable-cat-icon {
    width: 84px !important;
    height: 84px !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active .stable-cat-label {
    font-size: 13.5px !important;
    font-weight: 900 !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab:active {
    transform: translateY(-7px) scale(1.04) !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab:active .stable-cat-icon-wrap {
    transform: scale(1.14) !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab:active .stable-cat-icon {
    transform: scale(1.16) !important;
  }
}

@media (max-width: 430px) {
  #mobileBottomBar.mobile-bottom-bar.stable-cat-bottom-bar {
    min-height: 120px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab {
    min-height: 96px !important;
    border-radius: 18px !important;
  }

  #mobileBottomBar .stable-cat-icon-wrap {
    width: 70px !important;
    height: 70px !important;
  }

  #mobileBottomBar .stable-cat-icon {
    width: 62px !important;
    height: 62px !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active .stable-cat-icon-wrap {
    width: 84px !important;
    height: 84px !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active .stable-cat-icon {
    width: 76px !important;
    height: 76px !important;
  }
}

@media (max-width: 390px) {
  body {
    padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
  }

  main,
  .main,
  .content,
  #main,
  #appView main {
    padding-bottom: calc(144px + env(safe-area-inset-bottom)) !important;
  }

  #mobileBottomBar.mobile-bottom-bar.stable-cat-bottom-bar {
    min-height: 114px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab {
    min-height: 90px !important;
    border-radius: 16px !important;
  }

  #mobileBottomBar .stable-cat-icon-wrap {
    width: 64px !important;
    height: 64px !important;
  }

  #mobileBottomBar .stable-cat-icon {
    width: 56px !important;
    height: 56px !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active .stable-cat-icon-wrap {
    width: 76px !important;
    height: 76px !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active .stable-cat-icon {
    width: 68px !important;
    height: 68px !important;
  }

  #mobileBottomBar .stable-cat-label {
    font-size: 11.5px !important;
  }
}
/* artclass-stable-bottom-nav-end */

/* artclass-mobile-cat-theme-cards-start */
@media (max-width: 820px) {
  /* 首页统计卡片：猫猫主题色 */
  #page-dashboard .cards {
    gap: 12px !important;
  }

  #page-dashboard .cards .card {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    padding: 16px 14px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #page-dashboard .cards .card::before {
    content: '' !important;
    position: absolute !important;
    right: -12px !important;
    top: -12px !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.26) !important;
    pointer-events: none !important;
  }

  #page-dashboard .cards .card::after {
    content: '' !important;
    position: absolute !important;
    left: -14px !important;
    bottom: -14px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.18) !important;
    pointer-events: none !important;
  }

  #page-dashboard .cards .card .label,
  #page-dashboard .cards .card .title,
  #page-dashboard .cards .card .name,
  #page-dashboard .cards .card small,
  #page-dashboard .cards .card p {
    color: rgba(51, 65, 85, .78) !important;
  }

  #page-dashboard .cards .card .value,
  #page-dashboard .cards .card strong,
  #page-dashboard .cards .card h3,
  #page-dashboard .cards .card h4,
  #page-dashboard .cards .card .num,
  #page-dashboard .cards .card .count {
    color: #0f172a !important;
    font-weight: 800 !important;
  }

  /* 猫猫主题柔和色 */
  #page-dashboard .cards .card:nth-child(1) {
    background: linear-gradient(180deg, #FDE2E4 0%, #FBC4AB 100%) !important; /* 学生数 */
  }

  #page-dashboard .cards .card:nth-child(2) {
    background: linear-gradient(180deg, #E9D8FD 0%, #D0BFFF 100%) !important; /* 教师数 */
  }

  #page-dashboard .cards .card:nth-child(3) {
    background: linear-gradient(180deg, #D8F3DC 0%, #B7E4C7 100%) !important; /* 课时 */
  }

  #page-dashboard .cards .card:nth-child(4) {
    background: linear-gradient(180deg, #FFF1C1 0%, #FFD6A5 100%) !important; /* 本月消课 */
  }

  #page-dashboard .cards .card:nth-child(5) {
    background: linear-gradient(180deg, #FCE1F1 0%, #F9C5D5 100%) !important; /* 本月收入 */
  }

  #page-dashboard .cards .card:nth-child(6) {
    background: linear-gradient(180deg, #FAD2E1 0%, #FBCFE8 100%) !important; /* 续费提醒 */
  }

  #page-dashboard .cards .card:nth-child(7) {
    background: linear-gradient(180deg, #E0F2FE 0%, #BAE6FD 100%) !important;
  }

  #page-dashboard .cards .card:nth-child(8) {
    background: linear-gradient(180deg, #FDE68A 0%, #FCD34D 100%) !important;
  }

  #page-dashboard .cards .card:nth-child(9) {
    background: linear-gradient(180deg, #E9EDC9 0%, #D9ED92 100%) !important;
  }

  #page-dashboard .cards .card:nth-child(10) {
    background: linear-gradient(180deg, #E0C3FC 0%, #C2E9FB 100%) !important;
  }

  /* 底下快捷入口卡片：老师上课 / 课程表 / 学生查看 / 我的课时等 */
  #mobileQuickActions {
    gap: 12px !important;
    margin-top: 12px !important;
  }

  #mobileQuickActions .mobile-quick-card {
    position: relative !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 16px 14px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
    transform: translateY(0) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }

  #mobileQuickActions .mobile-quick-card::after {
    content: '' !important;
    position: absolute !important;
    right: -10px !important;
    top: -10px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.24) !important;
    pointer-events: none !important;
  }

  #mobileQuickActions .mobile-quick-card strong {
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  #mobileQuickActions .mobile-quick-card span {
    color: rgba(51, 65, 85, .78) !important;
    font-size: 12px !important;
  }

  #mobileQuickActions .mobile-quick-card:active {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 22px rgba(79, 70, 229, .12) !important;
  }

  #mobileQuickActions .mobile-quick-card:nth-child(1) {
    background: linear-gradient(180deg, #FDE2E4 0%, #FBC4AB 100%) !important; /* 老师上课 / 快速消课 */
  }

  #mobileQuickActions .mobile-quick-card:nth-child(2) {
    background: linear-gradient(180deg, #E9D8FD 0%, #D0BFFF 100%) !important; /* 课程表 / 快速续费 */
  }

  #mobileQuickActions .mobile-quick-card:nth-child(3) {
    background: linear-gradient(180deg, #D8F3DC 0%, #B7E4C7 100%) !important; /* 学生查看 / 学生查询 */
  }

  #mobileQuickActions .mobile-quick-card:nth-child(4) {
    background: linear-gradient(180deg, #FFF1C1 0%, #FFD6A5 100%) !important; /* 我的课时 / 续费提醒 */
  }
}
/* artclass-mobile-cat-theme-cards-end */

/* artclass-bottom-nav-cream-bg-start */
@media (max-width: 820px) {
  #mobileBottomBar.mobile-bottom-bar.stable-cat-bottom-bar,
  #mobileBottomBar.mobile-bottom-bar,
  .mobile-bottom-bar.stable-cat-bottom-bar {
    background: linear-gradient(180deg, #FFF4D6 0%, #FFE3B3 100%) !important;
    border-top: 1px solid rgba(245, 158, 11, .18) !important;
    box-shadow: 0 -12px 34px rgba(245, 158, 11, .12) !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab,
  #mobileBottomBar .mobile-tab {
    background-color: transparent !important;
  }

  #mobileBottomBar .mobile-tab.stable-cat-tab.active,
  #mobileBottomBar .mobile-tab.active {
    background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,248,235,.96) 100%) !important;
    box-shadow: 0 10px 22px rgba(251, 146, 60, .16) !important;
  }
}
/* artclass-bottom-nav-cream-bg-end */

/* artclass-topbar-force-cream-start */
@media (max-width: 820px) {
  #mobileTopbar,
  .mobile-topbar,
  #mobileTopbar.force-cream-topbar,
  .mobile-topbar.force-cream-topbar {
    background: linear-gradient(180deg, #FFF4D6 0%, #FFE3B3 100%) !important;
    border-bottom: 1px solid rgba(245, 158, 11, .22) !important;
    box-shadow: 0 8px 22px rgba(245, 158, 11, .14) !important;
  }

  #mobileTopbar .mobile-title,
  .mobile-topbar .mobile-title,
  #mobileTopbar #mobileTitle,
  .mobile-topbar #mobileTitle {
    color: #7c2d12 !important;
    font-weight: 900 !important;
  }

  #mobileTopbar .mobile-subtitle,
  .mobile-topbar .mobile-subtitle,
  #mobileTopbar #mobileSubtitle,
  .mobile-topbar #mobileSubtitle {
    color: rgba(124, 45, 18, .78) !important;
  }

  #mobileMenuBtn,
  .mobile-menu-btn,
  #mobileTopbar .mobile-menu-btn,
  .mobile-topbar .mobile-menu-btn,
  .force-cream-logo-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 7px 16px rgba(251, 146, 60, .18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  #mobileMenuBtn .force-cream-logo-img,
  .mobile-menu-btn .force-cream-logo-img,
  .force-cream-logo-img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px !important;
  }

  #mobileMenuBtn:active,
  .mobile-menu-btn:active,
  .force-cream-logo-button:active {
    transform: scale(1.06) !important;
  }

  #mobileRefreshBtn,
  .mobile-refresh-btn,
  .force-cream-refresh-button {
    background: rgba(255,255,255,.78) !important;
    color: #9a3412 !important;
    border-radius: 16px !important;
    box-shadow: 0 7px 16px rgba(251, 146, 60, .18) !important;
  }
}
/* artclass-topbar-force-cream-end */

/* artclass-disable-add-to-desktop-start */
#pwaInstallBtn,
#installAppBtn,
#addToHomeBtn,
#addDesktopBtn,
#desktopInstallBtn,
#parentInstallBtn,
#parentAddToHomeBtn,
.pwa-install,
.install-app,
.add-to-home,
.add-desktop,
.desktop-install,
.pwa-button,
.floating-install,
.install-button,
.install-banner,
.pwa-banner,
.add-home,
.add-home-screen,
[data-pwa-install],
[data-install],
[data-add-home] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* artclass-disable-add-to-desktop-end */