/* ══════════════════════════════════════
   靠天吃饭 · Design System
   ══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f6f8;--card:#fff;
  --accent:#4f6af5;--accent-light:#eef0ff;
  --text:#1a1d23;--text2:#7b8191;--text3:#b0b7c3;
  --border:#e8eaef;--radius:10px;
  --success:#10b981;--danger:#ef4444;--warning:#f59e0b;
  --green-bg:#ecfdf5;--red-bg:#fef2f2;--yellow-bg:#fffbeb;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;font-size:15px;line-height:1.5;
}

/* Layout */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:210px;background:var(--card);
  border-right:1px solid var(--border);padding:20px 10px;overflow-y:auto;z-index:200;
}
.sidebar-brand{font-size:.85rem;font-weight:700;padding:0 12px 20px;color:var(--accent);display:flex;align-items:center;gap:8px}
.sidebar .nav-label{font-size:.65rem;font-weight:600;color:var(--text3);padding:16px 12px 6px;letter-spacing:.05em;text-transform:uppercase}
.sidebar a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;margin:1px 0;font-size:.82rem;font-weight:500;color:var(--text2);text-decoration:none;transition:all .12s}
.sidebar a:hover{background:var(--accent-light);color:var(--accent)}
.sidebar a.active{background:var(--accent);color:#fff}
.sidebar .store-link{padding-left:32px;font-size:.8rem}
.sidebar .action-link{color:var(--accent);font-size:.78rem}
.main{margin-left:210px;min-height:100vh}
.container{max-width:960px;margin:0 auto;padding:28px 24px 60px}

/* Cards */
.card{background:var(--card);border-radius:var(--radius);padding:18px 20px;margin-bottom:12px;border:1px solid var(--border)}
.card-title{font-size:.78rem;font-weight:600;color:var(--text2);margin-bottom:12px;letter-spacing:.02em}
.card-label{font-size:.7rem;color:var(--accent);font-weight:600;margin-bottom:4px}
.card-amount{font-size:1.2rem;font-weight:700;color:var(--text)}
.card-sub{font-size:.68rem;color:var(--text2)}
.chart-label{font-size:.7rem;color:var(--text2);font-weight:600}

/* Revenue cards on dashboard */
.revenue-card{border-radius:10px;padding:14px 16px;cursor:pointer}
.card-accent{background:var(--accent-light)}
.card-yellow{background:var(--yellow-bg)}
.card-green{background:var(--green-bg)}

/* Stats */
.stat-row{display:flex;gap:16px;flex-wrap:wrap}
.stat-item{flex:1;min-width:120px;padding:12px 16px;background:var(--bg);border-radius:8px}
.stat-item .val{font-size:1.3rem;font-weight:700;line-height:1.2}
.stat-item .lbl{font-size:.72rem;color:var(--text2);margin-top:2px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 20px;border-radius:8px;border:none;font-size:.88rem;font-weight:600;
  cursor:pointer;text-decoration:none;transition:all .12s;line-height:1;
}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{opacity:.9}
.btn-outline{background:var(--accent-light);color:var(--accent)}.btn-outline:hover{opacity:.85}
.btn-sm{padding:8px 14px;font-size:.8rem}
.btn-xs{padding:4px 9px;font-size:.7rem;border-radius:6px}
.range-btn{border:1px solid var(--border);background:var(--bg);color:var(--text2)}
.range-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Forms */
input,select{width:100%;padding:9px 12px;border:2px solid var(--border);border-radius:8px;font-size:.88rem;font-family:inherit;background:#f8f9fb;color:var(--text);outline:none;transition:border-color .15s}
input:focus,select:focus{border-color:var(--accent)}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:.84rem}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border)}
th{font-weight:600;color:var(--text2);font-size:.73rem;white-space:nowrap;background:var(--bg);position:sticky;top:0;z-index:1}
tr:hover td{background:#f8f9fb}
.text-right{text-align:right}.text-center{text-align:center}

/* Badges */
.badge{padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600}
.badge-green{background:var(--green-bg);color:var(--success)}
.badge-red{background:var(--red-bg);color:var(--danger)}
.badge-yellow{background:var(--yellow-bg);color:var(--warning)}

/* Progress */
.progress-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.progress-bar .fill{height:100%;border-radius:4px}
.fill-blue{background:var(--accent)}.fill-green{background:var(--success)}.fill-orange{background:var(--warning)}.fill-red{background:var(--danger)}

/* Layout helpers */
.flex{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* Tabs */
.tabs{display:flex;gap:2px;background:var(--border);padding:3px;border-radius:10px;overflow:hidden}
.tab{flex:1;text-align:center;padding:8px 12px;font-size:.8rem;font-weight:600;color:var(--text2);cursor:pointer;border-radius:8px;transition:all .15s;user-select:none;background:transparent}
.tab:hover{color:var(--accent)}
.tab.active{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.tab-content{display:none}
.tab-content.active{display:block}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999;align-items:center;justify-content:center;display:none}
.modal-overlay.show{display:flex}
.modal-box{background:var(--card);border-radius:14px;padding:20px 24px;width:400px;max-width:92vw;max-height:90vh;overflow-y:auto}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .3s ease both}
.store-section.fade-in:nth-child(1){animation-delay:0s}
.store-section.fade-in:nth-child(2){animation-delay:.05s}
.store-section.fade-in:nth-child(3){animation-delay:.1s}
.store-section.fade-in:nth-child(4){animation-delay:.15s}
.store-section.fade-in:nth-child(5){animation-delay:.2s}

/* ═══ Animations & Transitions ═══ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}

/* Card hover */
.card{transition:box-shadow .2s,border-color .2s}
.card:hover{border-color:#d0d5e0;box-shadow:0 2px 12px rgba(0,0,0,.04)}

/* Store section cards */
.store-section{animation:fadeInUp .35s ease both}
.store-section:nth-child(1){animation-delay:0s}
.store-section:nth-child(2){animation-delay:.04s}
.store-section:nth-child(3){animation-delay:.08s}
.store-section:nth-child(4){animation-delay:.12s}
.store-section:nth-child(5){animation-delay:.16s}

/* Revenue cards */
.revenue-card{transition:transform .15s,box-shadow .15s;cursor:pointer}
.revenue-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.08)}

/* Stat items */
.stat-item{transition:transform .15s,box-shadow .15s}
.stat-item:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* Table rows */
tbody tr{transition:background .12s}

/* Buttons */
.btn{transition:all .15s}
.btn:active{transform:scale(.97)}
.btn-primary:hover{box-shadow:0 4px 14px rgba(79,106,245,.3)}
.btn-outline:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* Tabs */
.tab{transition:all .2s}

/* Sidebar links */
.sidebar a{transition:all .15s}
.sidebar a:hover{padding-left:16px}

/* Modal */
.modal-overlay.show{animation:fadeIn .2s ease}
.modal-box{animation:fadeInUp .25s ease}

/* Select / Input */
input,select{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus{box-shadow:0 0 0 3px rgba(79,106,245,.1)}

/* Badge */
.badge{transition:transform .15s}
.badge:hover{transform:scale(1.05)}

/* Tab content */
.tab-content.active{animation:fadeInUp .2s ease}

/* Progress bar */
.progress-bar .fill{transition:width .3s ease}

/* Nav active indicator */
.sidebar a.active{animation:slideIn .2s ease}

/* Proc cards */
.proc-card{transition:transform .15s,box-shadow .15s}
.proc-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* Category chips */
.cat-chip{transition:all .15s}
.cat-chip:hover{transform:translateY(-2px);box-shadow:0 3px 12px rgba(0,0,0,.1)}

/* Month check labels */
.month-check-label{transition:all .15s}
.month-check-label:has(input:checked){background:var(--accent-light);border-color:var(--accent)}

/* Chat message */
.chat-msg{animation:fadeInUp .2s ease}

/* Empty state pulse */
@keyframes softPulse{0%,100%{opacity:.6}50%{opacity:1}}
.empty-pulse{animation:softPulse 2s ease infinite}

/* Page transition */
.container > * {animation:fadeIn .25s ease}

/* ═══ Mobile hamburger ═══ */
.mobile-topbar{
  display:none;
  position:fixed;top:0;left:0;right:0;height:48px;background:var(--card);
  border-bottom:1px solid var(--border);z-index:300;padding:0 10px;
  align-items:center;justify-content:space-between;
}
.mobile-topbar .brand{font-size:.82rem;font-weight:700;color:var(--accent);text-decoration:none}
.hamburger{
  background:none;border:none;font-size:1.4rem;color:var(--text);cursor:pointer;
  padding:4px 8px;line-height:1;min-height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;
}
.hamburger:active{background:var(--bg)}
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:299;
}

/* ═══ Responsive ═══ */
@media(max-width:768px){
  /* Show mobile topbar */
  .mobile-topbar{display:flex}
  .sidebar-overlay.show{display:block;animation:fadeIn .15s ease}

  /* Sidebar → slide-out drawer */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:240px;z-index:500;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    padding:12px 10px 20px;overflow-y:auto;
    box-shadow:2px 0 20px rgba(0,0,0,.12);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-brand{font-size:.85rem;padding:0 12px 16px}
  .sidebar .nav-label{display:block;font-size:.62rem;padding:14px 12px 4px}
  .sidebar a{display:flex;padding:10px 12px;font-size:.8rem;white-space:normal}
  .sidebar .store-link{display:flex;padding-left:32px;font-size:.78rem}
  .sidebar a.active{border-radius:8px}
  .sidebar a.action-link{font-size:.78rem;padding:10px 12px}

  /* Bottom section visible in drawer */
  .sidebar > div[style*="bottom"]{
    position:static !important;display:block !important;
    margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
  }

  .main{margin-left:0;padding-top:48px}
  .container{padding:12px 10px 80px}

  /* Grids → single column */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:8px}
  .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .stat-item{min-width:0}

  /* Tables → scrollable */
  table{font-size:.72rem}
  th,td{padding:6px 8px}
  .card{padding:12px 14px;margin-bottom:8px}

  /* Smaller headings */
  h1{font-size:1.1rem}
  h2{font-size:.9rem}

  /* Narrow forms */
  input,select{font-size:.8rem;padding:7px 10px}
  .btn{font-size:.78rem;padding:9px 16px}
  .btn-sm{padding:7px 12px;font-size:.72rem}
  .btn-xs{padding:5px 10px;font-size:.68rem}

  /* Chat panel reposition */
  #chat-panel{left:50% !important;width:92vw !important;max-height:60vh}
  #chat-bubble{bottom:16px;right:16px;width:44px;height:44px;font-size:1.1rem}

  /* Modal full width */
  .modal-box{width:94vw;padding:16px}

  /* Tabs */
  .tab{padding:6px 8px;font-size:.7rem}

  /* Revenue cards */
  .revenue-card{padding:10px 12px}

  /* Proc summary */
  .proc-summary{grid-template-columns:repeat(2,1fr) !important;gap:6px}
  .proc-card{padding:10px}

  /* Flex-between stays row when it contains chart toggle or range buttons */
  .flex-between{flex-direction:column;align-items:flex-start}
  .flex-between:has(.range-btns){flex-direction:row;align-items:center}
  .flex-between:has(.card-title){flex-direction:row;align-items:center}

  /* Compare slots */
  .slot-card .flex{flex-direction:column;align-items:stretch}
  .slot-card select{width:100%}

  /* Store section cards — keep header row */
  .store-section .flex-between:first-child{flex-direction:row}

  /* Scrollable tables */
  .card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:500px}

  /* Chart heights — increase container on mobile */
  #trendChartWrap,#compareMonthChartWrap,#compareChartWrap{height:220px}
  [style*="height:180px"]{height:200px !important}
  [style*="height:120px"]{height:160px !important}

  /* Range buttons wrap on small screens */
  .range-btns{flex-wrap:wrap;gap:3px}
  .range-btns .btn-xs{padding:4px 7px;font-size:.65rem}

  /* Store detail page: header buttons wrap */
  .container .flex-between:first-child > .flex{flex-wrap:wrap;gap:4px}
  .container .flex-between:first-child > .flex select,
  .container .flex-between:first-child > .flex .btn{font-size:.7rem;padding:5px 8px}

  /* Status panel — center on mobile */
  #status-panel{
    left:50% !important;transform:translateX(-50%);
    bottom:16px;max-width:90vw;width:360px;
  }
}

/* Touch-friendly */
@media(pointer:coarse){
  .btn,.sidebar a,.tab,.revenue-card,.cat-chip,.month-check-label,
  .hamburger{
    min-height:40px;display:inline-flex;align-items:center;
  }
  input,select{min-height:40px}
}