/* ============================================================
   城关小学设备报修平台 v1.5 — 视觉系统
   设计基调：温暖活泼 · 清晰易读 · 适度留白
   主色：活力橙 #F97316（贴合校园氛围，呼应"工具维修"语义）
   ============================================================ */

:root{
  /* 主色 —— 活力橙 */
  --primary:#F97316;
  --primary-dark:#EA580C;
  --primary-darker:#C2410C;
  --primary-light:#FFF1E6;
  --primary-lighter:#FFF8F2;
  /* 语义色 */
  --success:#16A34A; --success-light:#DCFCE7; --success-dark:#15803D;
  --warning:#F59E0B; --warning-light:#FEF3C7; --warning-dark:#B45309;
  --danger:#F43F5E;  --danger-light:#FFE4E6;  --danger-dark:#E11D48;
  --info:#0EA5E9;    --info-light:#E0F2FE;    --info-dark:#0369A1;
  --purple:#8B5CF6;  --purple-light:#EDE9FE;
  --pink:#EC4899;    --pink-light:#FCE7F3;
  /* 中性色 —— 带一丝冷调，比纯灰更柔和 */
  --gray-50:#F8FAFC;
  --gray-100:#F1F5F9;
  --gray-200:#E2E8F0;
  --gray-300:#CBD5E1;
  --gray-400:#94A3B8;
  --gray-500:#64748B;
  --gray-600:#475569;
  --gray-700:#334155;
  --gray-800:#1E293B;
  --gray-900:#0F172A;
  /* 形状与阴影 */
  --radius:10px;
  --radius-lg:16px;
  --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --shadow:0 2px 4px rgba(15,23,42,.03),0 4px 12px rgba(15,23,42,.07);
  --shadow-lg:0 8px 24px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.05);
  --shadow-primary:0 4px 14px rgba(249,115,22,.28);
}

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

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--gray-100);color:var(--gray-800);line-height:1.65;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ========== 登录页 ========== */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FB923C 0%,#F97316 45%,#FB7185 100%);
  padding:20px;position:relative;overflow:hidden;
}
/* 背景装饰光斑，增添活力 */
.login-page::before,.login-page::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;
}
.login-page::before{width:420px;height:420px;background:rgba(255,255,255,.10);top:-140px;right:-110px}
.login-page::after{width:320px;height:320px;background:rgba(255,255,255,.08);bottom:-100px;left:-90px}
.login-card{
  width:100%;max-width:430px;background:#fff;border-radius:var(--radius-xl);
  box-shadow:0 24px 60px rgba(124,45,18,.28);padding:38px 34px;position:relative;z-index:1;
}
.login-logo{text-align:center;margin-bottom:26px}
.login-logo .icon{
  width:76px;height:76px;border-radius:24px;display:inline-flex;align-items:center;justify-content:center;
  font-size:38px;margin-bottom:16px;
  background:linear-gradient(135deg,#FB923C,#F97316);
  box-shadow:0 8px 20px rgba(249,115,22,.34);
}
.login-logo h1{font-size:23px;font-weight:700;color:var(--gray-900);letter-spacing:.5px}
.login-logo p{font-size:13px;color:var(--gray-500);margin-top:5px}

/* ========== 表单 ========== */
.form-group{margin-bottom:17px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:7px}
.form-control{
  width:100%;padding:11px 14px;font-size:14px;color:var(--gray-800);
  border:1.5px solid var(--gray-200);border-radius:var(--radius);
  transition:all .18s ease;background:var(--gray-50);
}
.form-control::placeholder{color:var(--gray-400)}
.form-control:hover{border-color:var(--gray-300);background:#fff}
.form-control:focus{
  outline:none;border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 4px rgba(249,115,22,.13);
}
textarea.form-control{resize:vertical;min-height:88px;line-height:1.6}
textarea.import-area{min-height:170px;font-family:Consolas,"Courier New",monospace;font-size:13px}
select.form-control{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394A3B8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}

/* ========== 按钮 ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;font-size:14px;font-weight:600;font-family:inherit;
  border:none;border-radius:var(--radius);cursor:pointer;
  transition:all .18s ease;background:var(--primary);color:#fff;white-space:nowrap;
}
.btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-primary)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-block{width:100%}
.btn-primary{background:var(--primary)}.btn-primary:hover{background:var(--primary-dark);box-shadow:var(--shadow-primary)}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:8px}
.btn-lg{padding:13px 26px;font-size:15.5px;border-radius:var(--radius-lg)}
.btn-success{background:var(--success)}.btn-success:hover{background:var(--success-dark);box-shadow:0 4px 14px rgba(22,163,74,.3)}
.btn-warning{background:var(--warning)}.btn-warning:hover{background:var(--warning-dark);box-shadow:0 4px 14px rgba(245,158,11,.3)}
.btn-danger{background:var(--danger)}.btn-danger:hover{background:var(--danger-dark);box-shadow:0 4px 14px rgba(244,63,94,.3)}
.btn-info{background:var(--info)}.btn-info:hover{background:var(--info-dark);box-shadow:0 4px 14px rgba(14,165,233,.3)}
.btn-ghost{background:#fff;color:var(--gray-700);border:1.5px solid var(--gray-200)}
.btn-ghost:hover{background:var(--gray-50);border-color:var(--gray-300);transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* ========== 提示条 ========== */
.alert{padding:13px 16px;border-radius:var(--radius);font-size:14px;margin-bottom:16px;border:1px solid transparent;line-height:1.6}
.alert-success{background:var(--success-light);color:var(--success-dark);border-color:#86EFAC}
.alert-danger{background:var(--danger-light);color:var(--danger-dark);border-color:#FDA4AF}
.alert-warning{background:var(--warning-light);color:var(--warning-dark);border-color:#FCD34D}
.alert-info{background:var(--info-light);color:var(--info-dark);border-color:#7DD3FC}

/* ========== 布局 ========== */
.app-layout{display:flex;min-height:100vh}

/* 侧栏 —— 深色橙调，比纯黑柔和 */
.sidebar{
  width:242px;flex-shrink:0;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1E293B 0%,#0F172A 100%);
  position:relative;
}
.sidebar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#FB923C,#F43F5E)}
.sidebar-header{padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;font-size:15px;margin-right:6px;
  background:linear-gradient(135deg,#FB923C,#F43F5E);box-shadow:0 2px 8px rgba(249,115,22,.4);
  vertical-align:middle;
}
.sidebar-header h2{font-size:16.5px;font-weight:700;color:#fff;letter-spacing:.3px}
.sidebar-header p{font-size:11.5px;color:rgba(255,255,255,.45);margin-top:5px}
.sidebar-nav{flex:1;padding:14px 10px;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:11px 16px;margin-bottom:3px;
  color:rgba(255,255,255,.68);cursor:pointer;font-size:14px;font-weight:500;
  border-radius:var(--radius);border-left:3px solid transparent;
  transition:all .18s ease;user-select:none;
}
.nav-item span:first-child{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.nav-item.active{
  background:linear-gradient(90deg,rgba(249,115,22,.26),rgba(249,115,22,.10));
  color:#fff;border-left-color:var(--primary);font-weight:600;
}
.sidebar-footer{padding:15px 20px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:rgba(255,255,255,.38)}

/* 主区域 */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{
  background:#fff;padding:13px 28px;border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow-sm);position:relative;z-index:10;
}
.topbar-title{font-size:18px;font-weight:700;color:var(--gray-900)}
.topbar-right{display:flex;align-items:center;gap:18px}
.user-info{display:flex;align-items:center;gap:11px;font-size:14px}
.user-avatar{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;font-size:15px;
  background:linear-gradient(135deg,#FB923C,#F43F5E);
  box-shadow:0 3px 10px rgba(249,115,22,.3);
}
.role-badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.role-teacher{background:var(--info-light);color:var(--info-dark)}
.role-admin{background:var(--pink-light);color:#BE185D}
.role-principal{background:var(--warning-light);color:var(--warning-dark)}
.role-repairman{background:var(--success-light);color:var(--success-dark)}
.notification-bell{position:relative;cursor:pointer;font-size:19px;transition:transform .18s;display:inline-block}
.notification-bell:hover{transform:scale(1.15)}
.notification-bell .badge{
  position:absolute;top:-5px;right:-7px;background:var(--danger);color:#fff;
  font-size:10.5px;font-weight:700;border-radius:10px;padding:1.5px 6px;min-width:19px;text-align:center;
  border:2px solid #fff;box-shadow:0 2px 6px rgba(244,63,94,.35);
  animation:bellPulse 2.4s ease-in-out infinite;
}
@keyframes bellPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.content-area{flex:1;padding:26px 28px;overflow-y:auto}

/* ========== 卡片 ========== */
.card{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);
  margin-bottom:20px;overflow:hidden;border:1px solid rgba(226,232,240,.7);
}
.card-header{
  padding:16px 20px;border-bottom:1px solid var(--gray-100);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#fff,var(--gray-50));
}
.card-body{padding:20px}

/* 统计卡 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
  background:#fff;border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid rgba(226,232,240,.7);
  border-left:4px solid var(--primary);transition:all .2s ease;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* 右上角装饰圆 */
.stat-card::after{
  content:'';position:absolute;top:-22px;right:-22px;width:74px;height:74px;
  border-radius:50%;background:var(--primary-light);opacity:.5;
}
.stat-card>*{position:relative;z-index:1}
.stat-card.success{border-left-color:var(--success)}.stat-card.success::after{background:var(--success-light)}
.stat-card.warning{border-left-color:var(--warning)}.stat-card.warning::after{background:var(--warning-light)}
.stat-card.danger{border-left-color:var(--danger)}.stat-card.danger::after{background:var(--danger-light)}
.stat-card.info{border-left-color:var(--info)}.stat-card.info::after{background:var(--info-light)}
.stat-label{font-size:12.5px;color:var(--gray-500);margin-bottom:6px;font-weight:500}
.stat-value{font-size:29px;font-weight:800;color:var(--gray-900);line-height:1.15;letter-spacing:-.5px}

/* ========== 表格 ========== */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.data-table th{
  background:linear-gradient(180deg,var(--gray-50),var(--gray-100));
  padding:12px 15px;text-align:left;font-weight:700;font-size:12.5px;color:var(--gray-600);
  border-bottom:2px solid var(--gray-200);white-space:nowrap;letter-spacing:.2px;
}
.data-table th:first-child{border-top-left-radius:8px}
.data-table th:last-child{border-top-right-radius:8px}
.data-table td{padding:12px 15px;border-bottom:1px solid var(--gray-100);vertical-align:middle;color:var(--gray-700)}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover td{background:var(--primary-lighter)}
.data-table tbody tr:last-child td{border-bottom:none}

/* ========== 状态标签 ========== */
.status-tag{
  display:inline-block;padding:3.5px 11px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.5;
}
.status-pending{background:var(--warning-light);color:var(--warning-dark)}
.status-accepted{background:var(--info-light);color:var(--info-dark)}
.status-repairing{background:var(--purple-light);color:#6D28D9}
.status-completed{background:var(--success-light);color:var(--success-dark)}
.status-cancelled{background:var(--gray-100);color:var(--gray-500)}
.priority-urgent{background:var(--danger-light);color:var(--danger-dark)}
.priority-normal{background:var(--gray-100);color:var(--gray-600)}

/* ========== 弹窗 ========== */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(15,23,42,.5);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;
  animation:fadeIn .2s ease;
}
.modal{
  background:#fff;border-radius:var(--radius-xl);width:92%;max-width:520px;
  max-height:88vh;overflow-y:auto;box-shadow:0 24px 60px rgba(15,23,42,.3);
  animation:slideUp .26s cubic-bezier(.16,1,.3,1);
}
.modal-wide{max-width:680px}
.modal-narrow{max-width:390px}
.modal-header{
  padding:18px 24px;border-bottom:1px solid var(--gray-100);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:#fff;z-index:2;
}
.modal-header h3{font-size:16.5px;font-weight:700;color:var(--gray-900)}
.modal-close{cursor:pointer;border:none;background:var(--gray-100);width:30px;height:30px;border-radius:8px;
  font-size:17px;color:var(--gray-500);transition:all .16s;line-height:1;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--danger-light);color:var(--danger-dark)}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--gray-100);display:flex;justify-content:flex-end;gap:10px;background:var(--gray-50)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* ========== 批量导入 ========== */
.import-preview{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:15px;margin-top:14px}
.import-preview h4{font-size:13.5px;color:var(--gray-700);margin-bottom:9px;font-weight:700}
.import-preview .name-list{max-height:145px;overflow-y:auto}
.import-preview .name-item{
  display:inline-block;background:var(--info-light);color:var(--info-dark);
  padding:4px 11px;border-radius:14px;font-size:12px;margin:2px;font-weight:500;
}
.import-preview .name-item.warn{background:var(--danger-light);color:var(--danger-dark)}
.import-stat{display:flex;gap:18px;margin-top:11px;font-size:13px}
.import-stat .count{font-weight:700;color:var(--primary)}
.import-stat .count.ok{color:var(--success)}.import-stat .count.skip{color:var(--warning-dark)}
.import-result{text-align:center;padding:20px}
.import-result .big-count{font-size:42px;font-weight:800;line-height:1.1}
.import-result .big-count.ok{color:var(--success)}.import-result .big-count.skip{color:var(--warning)}

/* 庆祝弹窗 */
.celebration-modal .modal{text-align:center}
.celebration-icon{font-size:64px;margin-bottom:14px;animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
.celebration-title{font-size:21px;font-weight:700;color:var(--success-dark);margin-bottom:8px}
.celebration-content{color:var(--gray-600);margin-bottom:22px;font-size:14px}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ========== 通知面板 ========== */
.notification-panel{
  position:fixed;top:70px;right:20px;width:350px;max-height:500px;z-index:900;
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 12px 32px rgba(15,23,42,.16);border:1px solid var(--gray-200);
  animation:slideUp .22s cubic-bezier(.16,1,.3,1);
}
.notification-panel-header{
  padding:14px 18px;border-bottom:1px solid var(--gray-100);
  display:flex;justify-content:space-between;align-items:center;background:var(--gray-50);
}
.notification-item{padding:14px 18px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .15s}
.notification-item:hover{background:var(--gray-50)}
.notification-item.unread{background:var(--primary-lighter);border-left:3px solid var(--primary)}
.notification-item .title{font-weight:600;font-size:13.5px;color:var(--gray-800)}
.notification-item .content{font-size:12.5px;color:var(--gray-500);margin-top:4px}
.notification-item .time{font-size:11px;color:var(--gray-400);margin-top:6px}

/* ========== 工具类 ========== */
.text-center{text-align:center}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:16px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:16px}
.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}.gap-2{gap:8px}
.hidden{display:none!important}

.empty-state{text-align:center;padding:48px 20px;color:var(--gray-500)}
.empty-state .icon{font-size:48px;margin-bottom:12px;opacity:.45}
.loading{text-align:center;padding:40px;color:var(--gray-500)}
.spinner{
  width:34px;height:34px;border:3px solid var(--gray-200);border-top-color:var(--primary);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== 选项卡 ========== */
.tabs{display:flex;border-bottom:2px solid var(--gray-200);margin-bottom:20px;overflow-x:auto}
.tab-item{
  padding:10px 20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--gray-500);
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .18s;white-space:nowrap;
}
.tab-item:hover{color:var(--primary)}
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:700}

/* 评分星 */
.rating{display:inline-flex;gap:4px}
.rating .star{cursor:pointer;font-size:23px;color:var(--gray-300);transition:all .15s;line-height:1}
.rating .star:hover,.rating .star.active{color:#FBBF24;transform:scale(1.12)}

/* ========== 排队视图 ========== */
.queue-card{
  cursor:pointer;transition:all .2s ease;border-left:4px solid var(--info);
  border-radius:var(--radius-lg);
}
.queue-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-left-color:var(--primary)}
.queue-card-head{display:flex;align-items:center;gap:16px;padding:16px 20px}
.queue-pos{
  text-align:center;min-width:66px;padding:8px 12px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#FB923C,#F97316);box-shadow:0 4px 12px rgba(249,115,22,.3);
}
.queue-pos-num{font-size:27px;font-weight:800;color:#fff;line-height:1.1}
.queue-pos-label{font-size:10.5px;color:rgba(255,255,255,.9);margin-top:2px;font-weight:600}
.queue-bar{height:9px;background:var(--gray-200);border-radius:5px;overflow:hidden}
.queue-bar-fill{height:100%;background:linear-gradient(90deg,#FBBF24,#F97316,#F43F5E);border-radius:5px;transition:width .5s cubic-bezier(.16,1,.3,1)}

/* ========== 打印报表 ========== */
.print-doc{background:#fff}
.print-title{text-align:center;font-size:22px;font-weight:800;letter-spacing:5px;padding:10px 0 6px;color:#000}
.print-sub{text-align:center;font-size:12px;color:#555;padding-bottom:14px;border-bottom:2px solid #333;margin-bottom:14px}
.print-sum-table,.print-detail-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:16px}
.print-sum-table th,.print-sum-table td,.print-detail-table th,.print-detail-table td{border:1px solid #666;padding:5px 6px;text-align:left}
.print-sum-table th,.print-detail-table th{background:#f0f0f0;font-weight:600;text-align:center;white-space:nowrap}
.print-sum-table tfoot td,.print-total td{background:#f5f5f5;font-weight:700}
.print-detail-title{font-size:14px;font-weight:600;padding:6px 0;margin-bottom:8px;color:#000}
.print-note{font-size:10.5px;color:#666;line-height:1.6;margin:-6px 0 14px;padding:8px 10px;background:#fafafa;border-left:3px solid #ccc}
.print-sign{display:flex;justify-content:space-between;margin-top:26px;font-size:12px;color:#333;padding-top:10px}

/* ============================================================
   响应式适配
   断点策略：1440 大屏 / 1200 笔记本 / 1024 平板横 / 768 平板竖
            600 手机大 / 480 手机小 / 360 超窄屏
   适配目标：iPhone(Safari) / Android Chrome / 华为浏览器 / 小米 OPPO vivo
   ============================================================ */

/* ---- 大屏与笔记本：内容区留白更充裕 ---- */
@media(min-width:1440px){
  .content-area{padding:32px 40px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
  .sidebar{width:252px}
}
@media(max-width:1200px){
  .content-area{padding:24px 22px}
}

/* ---- 平板横屏：侧栏收窄 ---- */
@media(max-width:1024px) and (orientation:landscape){
  .sidebar{width:200px}
  .nav-item{padding:10px 14px;font-size:13.5px}
  .content-area{padding:20px}
  .topbar{padding:12px 20px}
}

/* ========== 移动端核心改造：抽屉式导航 ========== */
@media(max-width:768px){
  /* 抽屉遮罩 */
  .drawer-mask{
    position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:998;
    opacity:0;visibility:hidden;transition:all .28s ease;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .drawer-mask.show{opacity:1;visibility:visible}

  /* 侧栏改为抽屉 */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;
    z-index:999;transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow:0 0 40px rgba(0,0,0,.3);
    /* 抽屉内顶部安全区 */
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
  }
  .sidebar.drawer-open{transform:translateX(0)}
  .sidebar::after{display:none}

  /* 顶栏：安全区 + 汉堡按钮 */
  .topbar{
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px 14px;
    position:sticky;top:0;z-index:900;
  }
  .hamburger{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;margin-right:10px;flex-shrink:0;
    border:none;background:var(--primary-light);border-radius:11px;
    font-size:19px;cursor:pointer;color:var(--primary-dark);
    transition:all .18s;-webkit-tap-highlight-color:transparent;
  }
  .hamburger:active{background:var(--primary);color:#fff;transform:scale(.94)}

  .topbar-title{font-size:16px;font-weight:700;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-right{gap:10px;flex-shrink:0}
  .user-info .user-info-text{display:none}
  .user-avatar{width:36px;height:36px;border-radius:11px}
  .role-badge{font-size:11px;padding:2px 9px}
  #lb{padding:8px 12px}

  .sidebar-header{padding:18px 18px}
  .sidebar-nav{padding:10px}
  .nav-item{padding:14px 16px;margin-bottom:4px;font-size:15px;border-radius:12px;
    min-height:48px;-webkit-tap-highlight-color:transparent}
  .nav-item span:first-child{font-size:17px;width:22px}
  .sidebar-footer{padding:14px 18px;font-size:11px}

  /* 内容区：底部安全区 */
  .content-area{
    padding:16px 14px calc(28px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;
  }

  /* 统计卡：一行2列 */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:18px}
  .stat-card{padding:15px 14px;border-radius:14px}
  .stat-card:hover{transform:none}
  .stat-label{font-size:11.5px;margin-bottom:4px}
  .stat-value{font-size:23px;font-weight:800}

  /* 按钮：触摸目标放大到 44px（苹果 HIG / 安卓规范） */
  .btn{min-height:44px;padding:12px 18px;font-size:15px;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .btn-sm{min-height:38px;padding:9px 14px;font-size:13.5px;border-radius:9px}
  .btn-lg{min-height:50px;font-size:16px}

  /* 卡片 */
  .card{border-radius:14px;margin-bottom:16px}
  .card-header{padding:14px 16px;font-size:14.5px}
  .card-body{padding:16px}

  /* 表单：字号必须 ≥16px，否则 iOS 会自动放大页面 */
  .form-group{margin-bottom:15px}
  .form-group label{font-size:13.5px;margin-bottom:7px}
  .form-control{
    font-size:16px;padding:12px 14px;min-height:46px;
    border-radius:11px;-webkit-appearance:none;appearance:none;
  }
  textarea.form-control{min-height:100px;font-size:16px}
  select.form-control{background-position:right 14px center;padding-right:38px}

  /* 弹窗：贴近底部更像原生，顶部留安全区 */
  .modal-overlay{padding:16px;padding-top:calc(16px + env(safe-area-inset-top));
    align-items:flex-end;overflow-y:auto}
  .modal{width:100%;max-width:100%;max-height:88vh;border-radius:20px 20px 16px 16px;
    animation:slideUpMobile .3s cubic-bezier(.32,.72,0,1)}
  .modal-header{padding:16px 18px}
  .modal-header h3{font-size:16px}
  .modal-body{padding:18px}
  .modal-footer{padding:14px 18px;gap:9px}
  .modal-footer .btn{flex:1}
  .modal-close{width:34px;height:34px;font-size:18px}
  @keyframes slideUpMobile{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

  /* 选项卡：可横向滑动 */
  .tabs{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -16px 16px;padding:0 16px;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab-item{padding:10px 16px;font-size:14.5px;min-height:44px;display:flex;align-items:center}

  /* 表格 → 卡片式布局：每行变一张卡 */
  .table-wrap{overflow-x:visible;-webkit-overflow-scrolling:auto}
  .data-table{width:100%;font-size:14px;display:block}
  .data-table thead{display:none}
  .data-table tbody{display:block}
  .data-table tr{
    display:block;background:#fff;border:1px solid var(--gray-200);
    border-radius:14px;padding:6px 4px;margin-bottom:12px;box-shadow:var(--shadow-sm);
  }
  .data-table td{
    display:flex;align-items:flex-start;gap:10px;padding:7px 13px;
    border-bottom:none;text-align:left;line-height:1.5;
  }
  .data-table td::before{
    content:attr(data-label);flex-shrink:0;min-width:66px;
    font-size:12.5px;font-weight:700;color:var(--gray-500);
  }
  .data-table td:last-child{border-top:1px dashed var(--gray-200);margin-top:5px;padding-top:11px}
  .data-table tbody tr:hover td{background:transparent}

  /* 排队卡片 */
  .queue-card{border-radius:14px}
  .queue-card-head{flex-direction:row;align-items:flex-start;gap:12px;padding:15px 16px}
  .queue-pos{min-width:58px;padding:7px 9px}
  .queue-pos-num{font-size:23px}
  .queue-pos-label{font-size:10px}
  .queue-bar{height:7px}

  /* 评分星加大 */
  .rating .star{font-size:30px;padding:2px}

  /* 通知面板：全屏式，更适合手机 */
  .notification-panel{
    top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:76vh;
    border-radius:20px 20px 0 0;animation:slideUpMobile .3s cubic-bezier(.32,.72,0,1);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .notification-panel-header{padding:15px 18px}
  .notification-item{padding:14px 18px;-webkit-tap-highlight-color:transparent}

  /* 空状态 */
  .empty-state{padding:40px 18px}
  .empty-state .icon{font-size:42px}

  /* 提示浮条：避开状态栏 */
  .alert{font-size:13.5px;padding:12px 14px;border-radius:11px}

  /* 导入预览 */
  .import-preview{padding:13px}
  .import-preview .name-list{max-height:120px}
}

/* ---- 小屏手机（iPhone SE 等）---- */
@media(max-width:480px){
  .content-area{padding:14px 11px calc(26px + env(safe-area-inset-bottom))}
  .stat-grid{gap:9px}
  .stat-card{padding:13px 12px}
  .stat-value{font-size:21px}
  .card-body{padding:14px}
  .btn{font-size:14.5px;padding:12px 14px}
  .modal-footer{flex-direction:column-reverse}
  .modal-footer .btn{width:100%}
  .queue-card-head{flex-direction:column;align-items:stretch}
  .queue-pos{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:8px}
  .queue-pos-num{font-size:21px}
  .topbar-title{font-size:15px}
  .notification-bell{font-size:18px}
  .celebration-icon{font-size:52px}
  .celebration-title{font-size:18px}
  .data-table td::before{min-width:58px;font-size:12px}
}

/* ---- 超窄屏（部分老旧安卓机）---- */
@media(max-width:360px){
  .content-area{padding:12px 9px calc(24px + env(safe-area-inset-bottom))}
  .stat-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-value{font-size:19px}
  .stat-label{font-size:11px}
  .sidebar{width:250px}
  .hamburger{width:38px;height:38px;font-size:17px}
  .topbar{padding-left:10px;padding-right:10px}
  .btn-sm{font-size:12.5px;padding:8px 11px;min-height:36px}
  .role-badge{font-size:10.5px;padding:2px 7px}
}

/* ---- 横屏矮屏（如手机横放）---- */
@media(max-height:500px) and (orientation:landscape){
  .topbar{padding-top:8px;padding-bottom:8px}
  .modal{max-height:92vh}
  .modal-overlay{padding:10px}
  .login-card{padding:24px 26px}
  .login-logo{margin-bottom:16px}
  .login-logo .icon{width:56px;height:56px;font-size:28px;margin-bottom:10px}
  .login-logo h1{font-size:19px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ---- 触屏设备：去掉 hover 上浮，避免「粘住」---- */
@media(hover:none) and (pointer:coarse){
  .btn:hover{transform:none;box-shadow:none}
  .btn-success:hover{box-shadow:none}
  .btn-warning:hover{box-shadow:none}
  .btn-danger:hover{box-shadow:none}
  .btn-info:hover{box-shadow:none}
  .btn-ghost:hover{background:#fff;transform:none;box-shadow:none}
  .stat-card:hover{transform:none;box-shadow:var(--shadow)}
  .queue-card:hover{transform:none;box-shadow:var(--shadow)}
  .data-table tbody tr:hover td{background:transparent}
  .nav-item:hover{background:transparent;transform:none}
  .nav-item.active:hover{background:linear-gradient(90deg,rgba(249,115,22,.26),rgba(249,115,22,.10))}
  .notification-item:hover{background:transparent}
  .notification-item.unread:hover{background:var(--primary-lighter)}
  .notification-bell:hover{transform:none}
  .celebration-icon{animation:none}
  .notification-bell .badge{animation:none}
  .queue-bar-fill{transition:none}
  .modal{animation:fadeIn .2s ease}
}

/* ---- 尊重系统「减少动态效果」设置 ---- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- 悬停设备（桌面）恢复动画 ---- */
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
}

@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff!important}
  .sidebar,.topbar,.no-print,.notification-panel,.alert,.modal-overlay,.tabs,.btn{display:none!important}
  .app-layout,.main-content,.content-area{display:block!important;padding:0!important;overflow:visible!important;height:auto!important}
  .content-area{padding:0!important}
  .card{box-shadow:none!important;border:none!important;margin:0!important;padding:0!important}
  .print-title{font-size:20px;letter-spacing:3px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-sub{font-size:11px}
  .print-sum-table,.print-detail-table{font-size:10px;page-break-inside:auto}
  .print-sum-table th,.print-sum-table td,.print-detail-table th,.print-detail-table td{padding:3px 4px;border:1px solid #333}
  .print-detail-table thead{display:table-header-group}
  .print-detail-table tr{page-break-inside:avoid;page-break-after:auto}
  .print-sum-table th,.print-sum-table td,.print-detail-table th,.print-detail-table td,.print-total td{background:transparent!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-sum-table th,.print-detail-table th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-sign{page-break-inside:avoid}
  .print-note{page-break-inside:avoid;font-size:9.5pt;border-left-width:2px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}