*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-family);background:linear-gradient(180deg,#f0f2f5 0%,#f8fafc 100%);background-attachment:fixed;color:var(--clr-text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.page{display:flex;height:100vh;overflow:hidden}

/* ===== 侧边栏 - 暗色高级质感 ===== */
.sidebar{width:var(--clr-sidebar-width);background:linear-gradient(180deg,#0b0b16 0%,#12121f 40%,#1a1a2e 100%);color:var(--clr-white);flex-shrink:0;display:flex;flex-direction:column;position:relative;z-index:10;box-shadow:4px 0 24px rgba(0,0,0,.15)}
.sidebar::after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(139,92,246,.15),rgba(255,255,255,.04),rgba(139,92,246,.08))}
.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:8px}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
.sidebar-nav-footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.06)}
.sidebar h2{background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(167,139,250,.1));padding:var(--space-xl) var(--space-lg);font-size:var(--font-lg);font-weight:700;text-align:center;border-bottom:1px solid rgba(255,255,255,.06);letter-spacing:.5px;position:relative}
.sidebar h2::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.4),transparent)}
.nav-item{padding:13px 20px;cursor:pointer;color:rgba(255,255,255,.55);transition:all .25s cubic-bezier(.4,0,.2,1);border-left:3px solid transparent;font-size:var(--font-base);position:relative;display:flex;align-items:center;gap:8px}
.nav-item:hover{background:rgba(139,92,246,.08);color:rgba(255,255,255,.85);border-left-color:rgba(139,92,246,.4)}
.nav-item.active{background:linear-gradient(90deg,rgba(139,92,246,.15),rgba(139,92,246,.04));color:#fff;border-left-color:#8b5cf6;font-weight:600;box-shadow:inset 0 0 0 1px rgba(139,92,246,.1)}
.nav-item.active::before{content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:#8b5cf6;border-radius:0 3px 3px 0;box-shadow:0 0 12px rgba(139,92,246,.5)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#f0f2f5 0%,#f8fafc 50%,#f1f5f9 100%);background-attachment:fixed}

/* ===== Header - 玻璃态 ===== */
.header{background:linear-gradient(135deg,rgba(15,15,26,.94),rgba(26,26,46,.92));backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));color:var(--clr-white);padding:var(--space-md) 28px;font-size:var(--font-lg);font-weight:600;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(139,92,246,.15);position:relative;z-index:5}
.header::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.3),transparent)}
.header .user-info{font-size:var(--font-md);color:rgba(255,255,255,.6);display:flex;align-items:center;gap:8px}
.header .user-info::before{content:"";display:inline-block;width:8px;height:8px;background:#10b981;border-radius:50%;box-shadow:0 0 8px rgba(16,185,129,.5)}
.content{flex:1;overflow-y:auto;padding:var(--space-2xl)}

/* ===== 卡片 - 玻璃感阴影 ===== */
.card{background:var(--surface-1);border-radius:14px;padding:var(--space-2xl);margin-bottom:var(--space-xl);box-shadow:var(--shadow-card);border:var(--border-glass);transition:box-shadow .3s ease,transform .3s ease}
.card:hover{box-shadow:0 0 0 1px rgba(0,0,0,.04),0 4px 6px rgba(0,0,0,.04),0 16px 32px rgba(0,0,0,.06)}
.card-title{font-size:var(--font-lg);font-weight:700;margin-bottom:var(--space-lg);color:#1e1b4b;padding-bottom:var(--space-md);position:relative;display:flex;align-items:center;gap:8px}
.card-title::after{content:"";position:absolute;bottom:0;left:0;width:40px;height:3px;background:var(--gradient-brand);border-radius:2px}

/* ===== 统计卡片 - 玻璃态渐变 ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-lg);margin-bottom:var(--space-2xl)}
.stat-card{background:var(--gradient-card-purple);border-radius:14px;padding:var(--space-xl);color:var(--clr-white);position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(102,126,234,.25);transition:transform .25s ease,box-shadow .25s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(102,126,234,.35)}
.stat-card::before{content:"";position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);border-radius:50%;transform:translate(30%,-30%)}
.stat-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.25)}
.stat-card.green{background:var(--gradient-card-teal);box-shadow:0 4px 20px rgba(13,148,136,.25)}
.stat-card.green:hover{box-shadow:0 8px 30px rgba(13,148,136,.35)}
.stat-card.orange{background:var(--gradient-card-amber);box-shadow:0 4px 20px rgba(245,158,11,.25)}
.stat-card.orange:hover{box-shadow:0 8px 30px rgba(245,158,11,.35)}
.stat-card.red{background:var(--gradient-card-rose);box-shadow:0 4px 20px rgba(225,29,72,.25)}
.stat-card.red:hover{box-shadow:0 8px 30px rgba(225,29,72,.35)}
.stat-card .num{font-size:30px;font-weight:800;margin:var(--space-sm) 0;letter-spacing:-.5px}
.stat-card .label{font-size:var(--font-md);opacity:.85;font-weight:500}

/* ===== 表格 - 现代圆角 ===== */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--font-md);border:1px solid rgba(0,0,0,.05);border-radius:12px;overflow:hidden}
.table th{background:linear-gradient(180deg,#f8fafc,#f1f5f9);padding:12px var(--space-md);text-align:left;font-weight:600;color:#475569;font-size:var(--font-sm);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid rgba(0,0,0,.06)}
.table td{padding:12px var(--space-md);border-bottom:1px solid rgba(0,0,0,.04);color:var(--clr-text-primary);transition:background .15s}
.table tbody tr{transition:all .2s ease}
.table tbody tr:hover{background:rgba(139,92,246,.03);box-shadow:inset 4px 0 0 rgba(139,92,246,.15)}
.table tbody tr:last-child td{border-bottom:none}
.table .actions{display:flex;gap:var(--space-sm)}
.btn{padding:var(--space-sm) 16px;border:none;border-radius:8px;cursor:pointer;font-size:var(--font-md);font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;letter-spacing:.2px}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent);pointer-events:none}
.btn-primary{background:var(--gradient-brand);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,.35)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.25)}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(16,185,129,.35)}
.btn-success:active{transform:translateY(0) scale(.98)}
.btn-danger{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;box-shadow:0 2px 8px rgba(239,68,68,.25)}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(239,68,68,.35)}
.btn-danger:active{transform:translateY(0) scale(.98)}
.btn-sm{padding:var(--space-xs) 12px;font-size:var(--font-sm);border-radius:6px}

/* ===== 输入框 ===== */
input,select,textarea{width:100%;padding:10px var(--space-md);border:1.5px solid rgba(0,0,0,.08);border-radius:8px;font-size:var(--font-md);outline:none;transition:all .2s ease;background:var(--surface-2);color:var(--clr-text-primary)}
input:hover,select:hover,textarea:hover{border-color:rgba(0,0,0,.15)}
input:focus,select:focus,textarea:focus{border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px rgba(139,92,246,.1),0 2px 8px rgba(0,0,0,.04)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.form-group{margin-bottom:var(--space-md)}
.form-group label{display:block;margin-bottom:6px;font-size:var(--font-sm);font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.5px}

/* ===== 模态窗口 - 玻璃态 ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,15,26,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-overlay.active{display:flex}
.modal{background:var(--surface-1);border-radius:16px;padding:32px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05);animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes modalIn{from{transform:translateY(20px) scale(.96);opacity:0}}
.modal h3{margin-bottom:var(--space-xl);font-size:var(--font-xl);font-weight:700;color:#1e1b4b;position:relative;padding-bottom:var(--space-md)}
.modal h3::after{content:"";position:absolute;bottom:0;left:0;width:36px;height:3px;background:var(--gradient-brand);border-radius:2px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:var(--space-xl)}
.search-bar{display:flex;gap:10px;margin-bottom:var(--space-lg);flex-wrap:wrap;background:var(--surface-2);padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.04)}
.search-bar input{flex:1;min-width:200px;background:#fff}
.tab{display:none}
.tab.active{display:block}
.order-detail{margin-top:var(--space-md);padding:var(--space-md);background:var(--surface-2);border-radius:12px;font-size:var(--font-md);border:1px solid rgba(0,0,0,.04)}
.order-item{display:flex;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px dashed rgba(0,0,0,.06)}

/* ===== 徽章 - 圆点指示器 ===== */
.badge{padding:3px 10px;border-radius:20px;font-size:var(--font-xs);font-weight:600;letter-spacing:.2px;display:inline-flex;align-items:center;gap:5px}
.badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-pending{background:#fff7ed;color:#c2410c}.badge-pending::before{background:#f97316}
.badge-paid{background:#ecfdf5;color:#065f46}.badge-paid::before{background:#10b981}
.badge-shipped{background:#eff6ff;color:#1e40af}.badge-shipped::before{background:#3b82f6}
.badge-confirmed{background:#ecfdf5;color:#065f46}.badge-confirmed::before{background:#10b981}
.badge-cancelled{background:#fef2f2;color:#991b1b}.badge-cancelled::before{background:#ef4444}
.badge-checking{background:#fff7ed;color:#c2410c}.badge-checking::before{background:#f97316}
.badge-in_stock{background:#ecfdf5;color:#065f46}.badge-in_stock::before{background:#10b981}
.badge-out_of_stock{background:#fef2f2;color:#991b1b}.badge-out_of_stock::before{background:#ef4444}
.badge-completed{background:#f3f4f6;color:#6b7280}.badge-completed::before{background:#9ca3af}
.btn-xs{padding:3px 8px;font-size:var(--font-xs);border-radius:5px;font-weight:600}
.stock-in{color:#059669;font-weight:600}
.stock-out{color:#dc2626;font-weight:600}

/* ===== 空状态 ===== */
.empty{text-align:center;padding:48px 20px;color:#94a3b8;font-size:var(--font-base)}

/* ===== Toast - 毛玻璃 ===== */
.toast{position:fixed;bottom:var(--space-2xl);right:var(--space-2xl);padding:var(--space-md) var(--space-xl);border-radius:12px;font-size:var(--font-base);z-index:9999;animation:toastIn .3s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px rgba(0,0,0,.12);font-weight:500}
.toast-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.toast-error{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff}
.toast-info{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff}
@keyframes toastIn{from{transform:translateY(16px) scale(.95);opacity:0}}

/* ===== 登录 - 暗色渐变背景 ===== */
.login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#0b0b16 0%,#1a1a2e 50%,#0f0f1a 100%);display:none;align-items:center;justify-content:center;z-index:9999}
.login-overlay::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(139,92,246,.15),transparent 60%)}
.login-overlay.active{display:flex}
.login-box{background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:40px;width:90%;max-width:400px;box-shadow:0 25px 60px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1);position:relative;z-index:1}
.login-box h2{text-align:center;margin-bottom:28px;font-size:24px;font-weight:700;background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-box input{margin-bottom:var(--space-lg)}
.login-box .btn{width:100%;padding:12px;font-size:15px;margin-top:var(--space-sm);border-radius:10px}

/* ===== 预览卡片 ===== */
.preview-card{background:var(--surface-2);border:2px dashed rgba(0,0,0,.08);border-radius:14px;padding:var(--space-lg);text-align:center;min-height:120px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-sm);transition:border-color .2s}
.preview-card:hover{border-color:rgba(139,92,246,.3)}
.preview-card img{max-width:100%;max-height:160px;border-radius:10px}
.inline-edit{background:#fff7ed;border:1.5px solid #fbbf24;padding:4px 10px;border-radius:6px;width:80px;font-size:var(--font-sm);font-weight:500}

/* ===== 侧边栏分组折叠 ===== */
.nav-group { margin-bottom: 2px; }
.nav-group-title {
  padding: 12px 14px 8px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
  border-left: 3px solid rgba(255,255,255,0.25);
  margin: 4px 8px 2px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}
.nav-group-title:hover { color: rgba(255,255,255,0.7); }
.nav-group-title::after {
  content: ' ▾';
  font-size: 10px;
  opacity: 0.6;
  float: right;
  transition: transform 0.2s;
}
.nav-group-title.collapsed::after { transform: rotate(-90deg); }
.nav-group-items { overflow: hidden; }
.nav-group-items .nav-item { padding-left: 28px; font-size: 13px; }
/* 组件面板 - 双列网格 */
#designerPalette {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
#designerPalette hr {
  grid-column: 1 / -1;
  margin: 2px 0;
}
.designer-comp-btn{
  padding:5px 3px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  cursor:pointer;
  text-align:center;
  font-size:10px;
  background:#fff;
  transition:all .15s ease;
  color:#475569;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  white-space:nowrap;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
}
.designer-comp-btn:hover{
  background:#f5f3ff;
  border-color:#a78bfa;
  color:#7c3aed;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(124,58,237,.15),0 2px 4px rgba(0,0,0,.08);
}
.designer-comp-btn:active{
  transform:translateY(0) scale(.96);
  box-shadow:0 0 0 2px rgba(124,58,237,.25),0 1px 2px rgba(0,0,0,.06);
  background:#ede9fe;
}

/* 组件面板图标 */
.comp-icon { width:14px; height:14px; flex-shrink:0; object-fit:contain; }

/* 手机状态栏图标 */
.phone-status-icons { display:flex; align-items:center; gap:6px; }
.phone-status-icons svg { flex-shrink:0; }

/* 区域头删除按钮 */
.dc-sec-head .sec-del-btn{font-size:14px;color:#94a3b8;cursor:pointer;padding:0 4px;line-height:1;transition:color .15s}
.dc-sec-head .sec-del-btn:hover{color:#dc2626 !important}

/* 图层拖拽排序 */
.layer-item { transition: background .15s, border-color .15s, transform .15s; }
.layer-item:hover { background: #f5f3ff !important; }
.layer-item.layer-dragover { border-color: #7c3aed !important; background: #f5f3ff !important; transform: scale(1.02); }
.layer-dragover + .layer-item { border-top: 2px solid #7c3aed; }

/* 主分类样式优化 */
.sidebar-nav .nav-section { 
  font-size: 14px; font-weight: 700; 
  padding: 8px 16px; margin: 4px 8px;
  border: 2px solid #e0e7ff; border-radius: 8px;
  background: linear-gradient(135deg, #f0f4ff, #e8edff);
  color: #4338ca; letter-spacing: 0.5px;
}
.sidebar-nav .nav-sub { font-size: 12px; padding: 4px 16px 4px 28px; color: #64748b; }