:root {
    --p500: #2B3D72; --p400: #3E57A3; --p300: #7A8FCD; --p200: #B5C1E3; --p100: #F0F3F9;
    --s500: #F46E57; --s400: #FACEC6; --s050: #FEF3EC; --accent-blue: #7795F8; --accent-blue-bg: #ECF0FE;
    --n900: #292625; --n600: #56504E; --n400: #A8A19F; --n300: #817774; --n100: #F5F5F4;
    --success: #2DB477; --success-bg: #DEF7EB; --warning: #F5A623; --warning-bg: #FDEDD3;
    --bg: #F5F7FF; --rule: #E7EBF5; --font: 'DM Sans', sans-serif; --r-card: 20px; --r-pill: 999px;
    --shadow: 0 2px 12px rgba(43,61,114,0.06);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--font); background: var(--bg); color: var(--n900); font-size: 14px; line-height: 1.5; }
  
  /* Dashboard Hide/Show */
  #dashboard-view { display: none; }
  #login-view { display: flex; align-items: center; justify-content: center; height: 100vh; }
  
  /* Login Box CSS */
  .login-box { background: #fff; padding: 40px; border-radius: 20px; box-shadow: var(--shadow); text-align: center; max-width: 360px; width: 90%; border: 1px solid var(--rule); }
  .login-box img { width: 40px; margin-bottom: 16px; }
  .login-box h2 { color: var(--p500); margin: 0 0 8px 0; font-size: 20px; }
  .login-box p { color: var(--n300); margin: 0 0 24px 0; font-size: 14px; }
  input[type="password"] { width: 100%; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--rule); border-radius: 8px; font-size: 15px; outline: none; }
  input[type="password"]:focus { border-color: var(--p500); }
  button { width: 100%; padding: 14px; background: var(--s500); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s;}
  button:hover { background: #E25B45; }
  #msg { margin-top: 16px; font-size: 13px; font-weight: 600; min-height: 20px; }
  .error { color: var(--s500); }
  .loading { color: var(--p500); }
  
  /* Exact Original Dashboard CSS */
  .nav { position: sticky; top: 0; z-index: 200; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: var(--p500); border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav-left  { display: flex; align-items: center; gap: 10px; }
  .nav-logo-img { width: 19px; height: 19px; display: block; flex-shrink: 0; }
  .nav-logo  { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
  .nav-div   { width: 1px; height: 13px; background: rgba(255,255,255,0.18); }
  .nav-title { font-size: 13px; font-weight: 300; color: var(--p200); }
  .nav-right { display: flex; align-items: center; gap: 10px; }
  .nav-warning { font-size: 11px; font-weight: 600; color: var(--s400); background: rgba(244,110,87,0.15); border-radius: var(--r-pill); padding: 3px 10px; }
  .page { max-width: 1280px; margin: 0 auto; padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
  .hero { background: linear-gradient(135deg, var(--s050) 0%, var(--s400) 100%); border: 1px solid var(--s400); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 22px 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; position: relative; overflow: hidden; }
  .hero::after { content: ''; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(244,110,87,0.12); }
  .hero::before { content: ''; position: absolute; right: 60px; bottom: -100px; width: 180px; height: 180px; border-radius: 50%; background: rgba(244,110,87,0.06); }
  .hero-kpi { display: flex; align-items: center; gap: 18px; flex-shrink: 0; position: relative; z-index: 1; }
  .hero-kpi__number { font-size: 52px; font-weight: 700; line-height: 1; color: var(--p500); letter-spacing: -0.03em; }
  .hero-kpi__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s500); margin-bottom: 5px; }
  .hero-kpi__sub { font-size: 13px; font-weight: 300; color: var(--n600); }
  .hero-kpi__sub strong { color: var(--p500); font-weight: 600; }
  .hero-divider { width: 1px; height: 42px; background: var(--s400); opacity: 0.5; margin: 0 14px; }
  .hero-narrative { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
  .hn-chip { background: rgba(255,255,255,0.75); border: 1px solid rgba(244,110,87,0.22); border-radius: var(--r-pill); padding: 7px 16px; text-align: center; }
  .hn-chip__num { font-size: 16px; font-weight: 700; color: var(--p500); line-height: 1.2; }
  .hn-chip__num.now { color: var(--s500); }
  .hn-chip__lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n300); }
  .hn-arrow { color: rgba(244,110,87,0.4); font-size: 14px; }
  .status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .sc { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
  .sc__top { display: flex; align-items: center; gap: 12px; }
  .sc__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--p100); color: var(--p500); }
  .sc__icon svg { width: 19px; height: 19px; }
  .sc__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n300); }
  .sc__value { font-size: 40px; font-weight: 700; line-height: 1; color: var(--p500); letter-spacing: -0.02em; }
  .sc__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .sc__note { font-size: 12px; font-weight: 500; color: var(--n300); line-height: 1.4; background: var(--bg); border-radius: var(--r-pill); padding: 4px 12px; white-space: nowrap; }
  .sc__divider { width: 1px; height: 28px; background: var(--rule); flex-shrink: 0; }
  .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
  .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; gap: 20px; flex-wrap: nowrap; overflow: hidden; }
  .panel-head__title { font-size: 14px; font-weight: 700; color: var(--p500); }
  .panel-legend { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--n400); white-space: nowrap; background: var(--bg); border-radius: var(--r-pill); padding: 4px 11px; }
  .leg-sq      { width: 10px; height: 8px; border-radius: 3px; }
  .leg-solid   { width: 16px; border-top: 2px solid; }
  .leg-dashed  { width: 16px; border-top: 2px dashed; }
  .leg-dot     { width: 8px; height: 8px; border-radius: 50%; }
  .leg-today   { width: 1px; height: 12px; border-left: 2px dashed rgba(244,110,87,0.7); }
  .panel-body  { padding: 6px 18px 16px; flex: 1; }
  @media(max-width:960px) { .charts-row { grid-template-columns: 1fr; } .status-row { grid-template-columns: 1fr; } .hero-divider { display: none; } }