/* ============================================================
   爱上水果 · 内部管理系统 —— 移动端「暗夜玻璃 · 高端科技」皮肤
   ------------------------------------------------------------
   · 仅在手机宽度（<=768px，底部导航 <=700px）生效，桌面端完全不受影响
   · 请在本文件之后加载：style.css → mobile.css
   · 设计语言：深空黑底 + 品牌橙辉光 + 玻璃拟态卡片 + 悬浮 Dock 导航
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- 1. 全局暗色设计令牌 ---------- */
  :root {
    color-scheme: dark;

    --bg: #101010;
    --surface: rgba(255, 255, 255, .06);
    --surface-2: rgba(255, 255, 255, .10);
    --line: rgba(255, 255, 255, .09);
    --ink: #F3F4F6;
    --ink-2: #A8B0BE;
    --ink-3: #697180;

    --brand: #E8492A;
    --brand-hover: #F07A1B;
    --brand-soft: rgba(232, 73, 42, .18);
    --brand-glow: rgba(240, 122, 27, .45);

    --ok: #34D399;
    --ok-soft: rgba(52, 211, 153, .14);
    --warn: #FBBF24;
    --warn-soft: rgba(251, 191, 36, .14);
    --danger: #F87171;
    --danger-soft: rgba(248, 113, 113, .16);
    --info: #60A5FA;
    --info-soft: rgba(96, 165, 250, .16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 52px rgba(0, 0, 0, .6);
  }

  * { -webkit-tap-highlight-color: transparent; }

  html, body { background: #101010; }

  body {
    background:
      radial-gradient(1100px 620px at 88% -12%, rgba(255, 92, 122, .16) 0, transparent 55%),
      radial-gradient(900px 560px at -14% 18%, rgba(255, 61, 127, .10) 0, transparent 52%),
      radial-gradient(1000px 720px at 50% 118%, rgba(96, 165, 250, .07) 0, transparent 62%),
      linear-gradient(180deg, #0B0C11 0%, #0D0F15 46%, #090A0E 100%);
    background-attachment: fixed;
    color: var(--ink);
  }

  /* 表单控件统一继承字体，观感更精致 */
  input, select, textarea, button { font-family: inherit; }

  /* 深色自动填充（登录页记住密码时不再出现刺眼白块） */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #161922 inset;
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    transition: background-color 99999s;
  }

  /* ---------- 2. 登录页 · 星夜玻璃 ---------- */
  .login-view {
    background:
      radial-gradient(900px 600px at 85% 6%, var(--brand-glow) 0, transparent 56%),
      radial-gradient(720px 520px at 6% 96%, rgba(255, 61, 127, .14) 0, transparent 55%),
      linear-gradient(155deg, #121319 0%, #0A0B0F 70%);
  }
  .login-wrap { margin-top: 0; gap: 26px; }

  .login-brand { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .login-brand .logo {
    width: 84px;
    height: 84px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, .04),
      0 18px 44px rgba(0, 0, 0, .55),
      0 0 56px rgba(255, 96, 54, .28);
  }
  .login-brand h1 {
    margin-top: 16px;
    font-size: 28px;
    letter-spacing: .12em;
    background: linear-gradient(92deg, #FFFFFF 12%, #FFC0D4 60%, #FF6B9E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .login-brand .sys { letter-spacing: .06em; }
  .login-brand .slogan { font-size: 17px; color: rgba(255, 255, 255, .88); }

  .login-card {
    background: rgba(19, 21, 28, .68);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
    padding: 28px 22px;
  }
  .login-card .top h2 {
    background: linear-gradient(92deg, #FFFFFF, #D9DEE8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .field input {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .11);
    color: var(--ink);
    border-radius: 14px;
    padding: 14px 14px 14px 44px;
  }
  .field input::placeholder { color: var(--ink-3); }
  .field input:focus {
    background: rgba(255, 255, 255, .085);
    border-color: rgba(255, 92, 122, .68);
    box-shadow: 0 0 0 4px rgba(255, 92, 122, .16), 0 0 24px rgba(255, 92, 122, .14);
  }
  .field .ico { color: var(--ink-3); }
  .field .eye:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
  .btn-primary {
    border-radius: 14px;
    background: linear-gradient(135deg, #FF7A3D 0%, #FF3D7F 100%);
    box-shadow: 0 10px 28px rgba(255, 92, 122, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
    letter-spacing: .3em;
    text-indent: .3em;
  }
  .btn-primary:active { transform: scale(.97); box-shadow: 0 4px 14px rgba(255, 92, 122, .4); }
  .login-foot { color: var(--ink-3); }

  /* ---------- 3. 顶栏 · 深空玻璃 ---------- */
  .topbar {
    background: rgba(11, 12, 17, .78);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .topbar .brand {
    background: linear-gradient(92deg, #FFFFFF 30%, #FFB39A 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .userbox { color: var(--ink-2); }

  /* ---------- 4. 顶部页签 · 隐藏滚动条 + 辉光指示 ---------- */
  .tabs {
    background: rgba(11, 12, 17, .72);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { color: var(--ink-2); letter-spacing: .02em; }
  .tabs button.active {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 18px rgba(255, 107, 61, .55);
  }
  .tabs button.active::after {
    background: linear-gradient(90deg, #FF7A3D, #FF3D7F);
    box-shadow: 0 0 14px var(--brand-glow);
  }

  /* ---------- 5. 页面标题 ---------- */
  .page-head .t {
    background: linear-gradient(92deg, #FFFFFF 40%, #C9CFDB 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .page-head .t::before {
    background: linear-gradient(180deg, #FF7A3D, #FF3D7F);
    box-shadow: 0 0 12px var(--brand-glow);
  }
  h3 { color: var(--ink-2); letter-spacing: .04em; }

  /* ---------- 6. 首页 Hero · 数据舱 ---------- */
  .hero {
    background:
      radial-gradient(420px 220px at 92% -20%, rgba(255, 122, 61, .3) 0, transparent 62%),
      radial-gradient(300px 200px at -8% 120%, rgba(255, 61, 127, .14) 0, transparent 60%),
      linear-gradient(158deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .015) 42%, rgba(0, 0, 0, .18) 100%),
      linear-gradient(150deg, #1A1520, #0E0A12);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(320px 240px at 88% 0%, rgba(0, 0, 0, .5), transparent 72%);
    mask-image: radial-gradient(320px 240px at 88% 0%, rgba(0, 0, 0, .5), transparent 72%);
    pointer-events: none;
  }
  .hero-logo {
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .05), 0 0 34px rgba(255, 92, 122, .3);
  }
  .hero-title { letter-spacing: .02em; }
  .hero-quote {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }

  /* ---------- 7. KPI 数据卡 · 玻璃辉光 ---------- */
  .card {
    background: linear-gradient(168deg, rgba(255, 255, 255, .062) 0%, rgba(255, 255, 255, .024) 100%);
    border: 1px solid rgba(255, 255, 255, .085);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .card .num {
    text-shadow: 0 0 26px rgba(255, 255, 255, .14);
    font-variant-numeric: tabular-nums;
  }
  .card .card-accent { opacity: .85; }
  .card .card-ico { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
  .card.yellow.alert {
    background: linear-gradient(168deg, rgba(251, 191, 36, .15) 0%, rgba(255, 255, 255, .02) 100%);
    box-shadow: 0 10px 30px rgba(251, 191, 36, .1), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .card.red.alert {
    background: linear-gradient(168deg, rgba(248, 113, 113, .16) 0%, rgba(255, 255, 255, .02) 100%);
    box-shadow: 0 10px 30px rgba(248, 113, 113, .1), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .card.blue.alert {
    background: linear-gradient(168deg, rgba(96, 165, 250, .16) 0%, rgba(255, 255, 255, .02) 100%);
    box-shadow: 0 10px 30px rgba(96, 165, 250, .1), inset 0 1px 0 rgba(255, 255, 255, .05);
  }

  /* ---------- 8. 列表与状态 ---------- */
  .day-group {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
  }
  .day-group summary { background: rgba(255, 255, 255, .05); }
  .item {
    background: rgba(255, 255, 255, .042);
    border-color: rgba(255, 255, 255, .08);
    border-left-color: rgba(255, 255, 255, .14);
  }
  .item.normal { border-left-color: var(--ok); }
  .item.yellow { background: rgba(251, 191, 36, .09); border-left-color: var(--warn); }
  .item.red { background: rgba(248, 113, 113, .1); border-left-color: var(--danger); }
  .item .name { color: #fff; }
  .badge.normal { color: #4ADE80; }
  .badge.yellow { color: #FCD34D; }
  .badge.red { color: #FCA5A5; }
  .badge.low { color: #93C5FD; }
  .date-chip {
    background: var(--brand-soft);
    border-color: rgba(255, 92, 122, .3);
    color: #FFAFC6;
  }
  .qty-strong { color: #FF7A94; text-shadow: 0 0 14px rgba(255, 92, 122, .35); }
  .hint {
    background: rgba(251, 191, 36, .1);
    border-color: rgba(251, 191, 36, .26);
    color: #FCD34D;
  }

  /* ---------- 9. 工具栏 / 按钮 · 玻璃控件 ---------- */
  .toolbar input, .toolbar select {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .11);
    color: var(--ink);
    border-radius: 13px;
  }
  .toolbar input::placeholder { color: var(--ink-3); }
  .toolbar input:focus, .toolbar select:focus {
    border-color: rgba(255, 107, 61, .6);
    box-shadow: 0 0 0 3px rgba(255, 92, 122, .16);
  }
  button.primary {
    background: linear-gradient(135deg, #FF7A3D 0%, #FF3D7F 100%);
    box-shadow: 0 8px 24px rgba(255, 92, 122, .34), inset 0 1px 0 rgba(255, 255, 255, .22);
  }
  button.primary:active { box-shadow: 0 4px 14px rgba(255, 92, 122, .38); }
  button.secondary {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .11);
    color: var(--ink);
  }
  button.secondary:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .09); }
  button.danger {
    background: rgba(248, 113, 113, .12);
    border-color: rgba(248, 113, 113, .32);
    color: #FCA5A5;
  }
  .load-more {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: var(--ink-2);
  }
  .load-more:hover { color: #FF835C; border-color: rgba(255, 92, 122, .55); }

  /* 下拉菜单 / 抽屉 */
  .more-menu, .more-panel {
    background: rgba(21, 23, 30, .94);
    border-color: rgba(255, 255, 255, .1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  .more-menu button, .more-panel button { color: var(--ink); }
  .more-menu button:hover, .more-panel button:hover { background: rgba(255, 255, 255, .07); }

  /* ---------- 10. 图片网格 ---------- */
  .img-card {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .09);
  }
  .img-card .meta { color: var(--ink-2); }

  /* ---------- 11. 弹窗 / 抽屉 / 轻提示 ---------- */
  .modal {
    background: rgba(4, 5, 8, .64);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .modal-box {
    background: rgba(20, 22, 29, .94);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .modal-body input, .modal-body select, .modal-body textarea {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .11);
    color: var(--ink);
  }
  .modal-body input::placeholder, .modal-body textarea::placeholder { color: var(--ink-3); }
  .modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus {
    border-color: rgba(255, 107, 61, .6);
    box-shadow: 0 0 0 3px rgba(255, 92, 122, .16);
  }
  .sheet-mask { background: rgba(4, 5, 8, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .sheet-box {
    background: rgba(19, 21, 28, .92);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .sheet-box button { color: var(--ink); }
  .sheet-box button:hover { background: rgba(255, 255, 255, .07); }
  .toast {
    background: rgba(24, 26, 33, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
    color: #fff;
  }

  /* ---------- 12. 空状态 / 骨架屏 ---------- */
  .empty {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .12);
  }
  .empty-ico { background: rgba(255, 255, 255, .06); color: var(--ink-3); }
  .skeleton { background: rgba(255, 255, 255, .07); }
  .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
  }

  /* ---------- 13. 分析页条形图 ---------- */
  .bar-track { background: rgba(255, 255, 255, .08); }
  .bar-fill { background: linear-gradient(90deg, #FF7A3D, #FF3D7F); box-shadow: 0 0 12px rgba(255, 92, 122, .4); }
  .bar-fill.green { background: linear-gradient(90deg, #4ADE80, #2FBF71); box-shadow: 0 0 12px rgba(52, 211, 153, .35); }

  /* ---------- 14. 其他 ---------- */
  .bg-watermark { opacity: .05; }
  .splash { background: linear-gradient(155deg, #121319, #0A0B0F); }
  .splash img {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .14),
      0 14px 44px rgba(0, 0, 0, .6),
      0 0 70px rgba(255, 96, 54, .26);
  }
  .app-footer { color: var(--ink-3); opacity: .8; }
  .link { color: var(--ink-2); }
  .link:hover { color: #FF7A94; }
  .lightbox { background: rgba(4, 5, 8, .96); }
}

/* ============================================================
   底部悬浮 Dock 导航（与原底部导航同断点 <=700px）
   ============================================================ */
@media (max-width: 700px) {
  .bottom-nav {
    left: 14px;
    right: 14px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 8px 8px;
    border-radius: 26px;
    background: rgba(17, 19, 25, .82);
    backdrop-filter: blur(26px) saturate(1.5);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
      0 18px 44px rgba(0, 0, 0, .55),
      inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  .bottom-nav button {
    color: var(--ink-3);
    font-size: 10.5px;
    letter-spacing: .03em;
    position: relative;
  }
  .bottom-nav button.active {
    color: #FF7A94;
    font-weight: 700;
  }
  .bottom-nav button.active .ico {
    filter: drop-shadow(0 0 10px rgba(255, 107, 61, .65));
    transform: translateY(-2px);
  }
  .bottom-nav button.active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #FF7A3D, #FF3D7F);
    box-shadow: 0 0 12px var(--brand-glow);
  }

  main { padding-bottom: 132px; }
  .app-footer { padding-bottom: 24px; }

  /* 弹层按钮触控增强 */
  .sheet-box button { border-radius: 14px; min-height: 48px; }
}

/* ============================================================
   16. 原生 APP 化瘦身（正规 APP 布局节奏）
   ============================================================ */
@media (max-width: 700px) {
  /* 顶栏精简：隐藏冗长角色文字，紧凑高度 */
  .topbar { padding: 10px 14px; }
  .topbar .brand { font-size: 14.5px; letter-spacing: 0; }
  .brand-logo-sm { width: 22px; height: 22px; margin-right: 5px; border-radius: 6px; }
  .userbox { gap: 8px; font-size: 13px; }
  .userbox #userName { display: none; }
  .link { font-size: 13px; text-decoration: none; padding: 6px 2px; }

  /* 隐藏页脚（底部 Dock 已承担品牌位） */
  .app-footer { display: none; }

  /* 内容节奏收紧 */
  main { padding: 12px 12px 118px; }
  .page-head { margin-bottom: 12px; }
  .page-head .t { font-size: 18px; }
  .page-head .s { font-size: 12px; margin-top: 2px; }
  h3 { font-size: 14px; margin: 4px 0 8px; }

  /* Hero 数据舱收紧 */
  .hero { padding: 18px 16px; border-radius: 18px; margin-bottom: 12px; }
  .hero-logo { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; }
  .hero-title { font-size: 20px; }
  .hero-sub { font-size: 12.5px; margin-top: 4px; }
  .hero-quote { margin-top: 10px; padding: 8px 12px; font-size: 13.5px; border-radius: 12px; }

  /* KPI 卡收紧 */
  .cards { gap: 10px; margin-bottom: 14px; }
  .card { padding: 14px; border-radius: 16px; }
  .card .num { font-size: 26px; }
  .card .card-top { margin-bottom: 6px; }
  .card .card-ico { width: 30px; height: 30px; padding: 7px; border-radius: 9px; }
  .card small { font-size: 11px; }

  /* 列表与工具栏收紧 */
  .item { padding: 12px 14px; border-radius: 14px; }
  .item .name { font-size: 15px; }
  .toolbar { gap: 6px; margin-bottom: 10px; }
  .toolbar input, .toolbar select { padding: 9px 11px; }

  /* Dock 微调 */
  .bottom-nav button .ico { width: 22px; height: 22px; }

  /* 顶部页签栏隐藏：Dock 承担全部导航（原「更多」下拉被滚动容器裁剪，已移除） */
  .tabs { display: none !important; }

  /* 「更多」快捷中心抽屉 */
  .sheet-box { border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); max-height: 72vh; overflow-y: auto; }
  .sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); margin: 0 auto 10px; }
  .sheet-title { font-size: 11.5px; color: rgba(255,255,255,.45); letter-spacing: .12em; margin: 8px 6px 6px; }
  .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 2px 8px; }
  .sheet-grid button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 58px; padding: 10px 4px; border-radius: 14px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    color: var(--ink, #fff); font-size: 12px; text-align: center;
  }
  .sheet-grid button:active { transform: scale(.96); background: rgba(255,255,255,.1); }
}