/* ============================================================
   Leo 血壓記錄器 - 設計系統 (Soft UI Evolution)
   配色: 醫療青綠 + 信任藍, 狀態色對應 WHO 血壓分級
   ============================================================ */

:root {
   /* 主色 */
   --primary: #0EA5A4;
   --primary-dark: #0B7C7B;
   --primary-soft: #E6FBFA;
   --accent: #2563EB;
   --accent-dark: #1D4ED8;

   /* 狀態色 (WHO 分級) */
   --st-optimal: #15803D;  --st-optimal-bg: #DCFCE7;
   --st-normal:  #16A34A;  --st-normal-bg:  #F0FDF4;
   --st-elev:    #D97706;  --st-elev-bg:    #FEF3C7;
   --st-high1:   #EA580C;  --st-high1-bg:   #FFEDD5;
   --st-high2:   #DC2626;  --st-high2-bg:   #FEF2F2;
   --st-high3:   #B91C1C;  --st-high3-bg:   #FEE2E2;

   /* 中性 */
   --bg:        #F5F8FA;
   --card:      #FFFFFF;
   --border:    #E5EBF0;
   --text:      #0F172A;
   --text-soft: #475569;
   --text-mute: #94A3B8;

   /* 陰影 (Soft UI) */
   --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
   --shadow-md: 0 4px 14px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
   --shadow-lg: 0 12px 32px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);
   --shadow-primary: 0 8px 20px rgba(14,165,164,0.28);

   /* 形態 */
   --radius-sm: 8px;
   --radius:    12px;
   --radius-lg: 18px;

   --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "PingFang SC", "Microsoft YaHei", "Noto Sans TC", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
   --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
   margin: 0;
   padding: 0;
   font-family: var(--font);
   background: var(--bg);
   color: var(--text);
   font-size: 15px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }

/* ===== 頂部導航 ===== */
.topbar {
   background: var(--card);
   border-bottom: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
   position: sticky;
   top: 0;
   z-index: 100;
   backdrop-filter: saturate(180%) blur(8px);
}
.topbar-inner {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 20px;
   height: 60px;
   display: flex;
   align-items: center;
   gap: 20px;
}
.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 17px;
   color: var(--text);
   letter-spacing: -0.01em;
}
.brand-logo {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--primary), var(--accent));
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   box-shadow: var(--shadow-primary);
}
.nav {
   display: flex;
   gap: 4px;
   margin-left: auto;
   align-items: center;
}
.nav a {
   padding: 8px 14px;
   border-radius: var(--radius-sm);
   color: var(--text-soft);
   font-size: 14px;
   font-weight: 500;
   transition: all 180ms ease;
}
.nav a:hover {
   background: var(--primary-soft);
   color: var(--primary-dark);
}
.nav a.active {
   background: var(--primary-soft);
   color: var(--primary-dark);
   font-weight: 600;
}
.nav .divider { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }

/* 移動端折疊選單 */
.nav-toggle {
   display: none;
   background: transparent;
   border: none;
   padding: 8px;
   color: var(--text);
}

/* ===== 容器 ===== */
.container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 28px 20px 80px;
}
.page-head {
   margin-bottom: 24px;
}
.page-head h1 {
   margin: 0 0 4px;
   font-size: 24px;
   font-weight: 700;
   letter-spacing: -0.02em;
}
.page-head .subtitle {
   color: var(--text-mute);
   font-size: 14px;
}

/* ===== 卡片網格 (首頁 Bento) ===== */
.card-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}
.card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 24px;
   text-decoration: none;
   color: inherit;
   transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
   display: flex;
   flex-direction: column;
   gap: 14px;
   position: relative;
   overflow: hidden;
}
.card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-lg);
   border-color: transparent;
}
.card-icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   flex-shrink: 0;
}
.card-icon.c-1 { background: linear-gradient(135deg, #0EA5A4, #0B7C7B); }
.card-icon.c-2 { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.card-icon.c-3 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.card-icon.c-4 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.card-title {
   font-size: 17px;
   font-weight: 700;
   letter-spacing: -0.01em;
}
.card-desc {
   color: var(--text-mute);
   font-size: 13.5px;
   line-height: 1.45;
}

/* 概覽儀表盤 */
.overview {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-bottom: 28px;
}
.overview-item {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 20px 22px;
   box-shadow: var(--shadow-sm);
}
.overview-item .label {
   font-size: 13px;
   color: var(--text-mute);
   margin-bottom: 8px;
}
.overview-item .value {
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.1;
}
.overview-item .value small {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-mute);
   margin-left: 3px;
}
.overview-item .sub {
   margin-top: 8px;
   font-size: 12.5px;
   color: var(--text-soft);
}

/* ===== 狀態徽章 (WHO 分級) ===== */
.badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 10px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
}
.badge::before {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: currentColor;
}
.badge.optimal { color: var(--st-optimal); background: var(--st-optimal-bg); }
.badge.normal  { color: var(--st-normal);  background: var(--st-normal-bg); }
.badge.elevated{ color: var(--st-elev);    background: var(--st-elev-bg); }
.badge.high1   { color: var(--st-high1);   background: var(--st-high1-bg); }
.badge.high2   { color: var(--st-high2);   background: var(--st-high2-bg); }
.badge.high3   { color: var(--st-high3);   background: var(--st-high3-bg); }

/* ===== 通用卡片塊 ===== */
.panel {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 24px;
   box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: 18px; }
.panel-title {
   margin: 0 0 18px;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -0.01em;
}

/* ===== 表單 ===== */
.field { margin-bottom: 16px; }
.field label {
   display: block;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-soft);
   margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
   width: 100%;
   padding: 11px 14px;
   border: 1.5px solid var(--border);
   border-radius: var(--radius);
   background: var(--card);
   color: var(--text);
   transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
   outline: none;
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(14,165,164,0.16);
}
.field .err {
   color: var(--st-high2);
   font-size: 12.5px;
   margin-top: 5px;
}
.field .hint {
   color: var(--text-mute);
   font-size: 12.5px;
   margin-top: 5px;
}
.input-error input, .input-error select {
   border-color: var(--st-high2);
}

/* ===== 按鈕 ===== */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 11px 20px;
   border-radius: var(--radius);
   border: 1.5px solid transparent;
   font-size: 14.5px;
   font-weight: 600;
   transition: all 180ms ease;
   background: transparent;
   color: var(--text-soft);
}
.btn:hover { background: var(--bg); }
.btn-primary {
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   color: #fff;
   box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
   background: linear-gradient(135deg, var(--primary-dark), #085F5E);
   transform: translateY(-1px);
   box-shadow: 0 10px 24px rgba(14,165,164,0.36);
}
.btn-accent {
   background: linear-gradient(135deg, var(--accent), var(--accent-dark));
   color: #fff;
}
.btn-accent:hover {
   background: linear-gradient(135deg, var(--accent-dark), #1E40AF);
   transform: translateY(-1px);
}
.btn-ghost {
   background: transparent;
   color: var(--text-soft);
   border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg); border-color: var(--text-mute); }
.btn-danger {
   background: #fff;
   color: var(--st-high2);
   border-color: #FCA5A5;
}
.btn-danger:hover { background: #FEF2F2; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== 登入頁 ===== */
.auth-wrap {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   background:
      radial-gradient(1200px 600px at 10% -10%, rgba(14,165,164,0.12), transparent 60%),
      radial-gradient(1000px 500px at 110% 110%, rgba(37,99,235,0.12), transparent 60%),
      var(--bg);
}
.auth-card {
   width: 100%;
   max-width: 400px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 22px;
   padding: 36px 32px;
   box-shadow: var(--shadow-lg);
}
.auth-logo {
   width: 56px;
   height: 56px;
   border-radius: 16px;
   background: linear-gradient(135deg, var(--primary), var(--accent));
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   margin: 0 auto 16px;
   box-shadow: var(--shadow-primary);
}
.auth-title {
   text-align: center;
   font-size: 22px;
   font-weight: 700;
   margin: 0 0 4px;
   letter-spacing: -0.02em;
}
.auth-subtitle {
   text-align: center;
   color: var(--text-mute);
   font-size: 14px;
   margin-bottom: 28px;
}

/* ===== 提示 ===== */
.flash {
   padding: 12px 16px;
   border-radius: var(--radius);
   margin-bottom: 18px;
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 10px;
}
.flash.success { background: var(--st-normal-bg);  color: #14532D; border: 1px solid #BBF7D0; }
.flash.error   { background: var(--st-high2-bg);   color: #7F1D1D; border: 1px solid #FECACA; }
.flash.info    { background: #EFF6FF; color: #1E3A8A; border: 1px solid #BFDBFE; }

/* ===== 記錄頁 ===== */
.record-time {
   background: linear-gradient(135deg, var(--primary-soft), #EFF6FF);
   border: 1px solid #BAE6E4;
   border-radius: var(--radius);
   padding: 16px 20px;
   text-align: center;
   margin-bottom: 22px;
}
.record-time .time {
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--primary-dark);
}
.record-time .date {
   font-size: 13px;
   color: var(--text-soft);
   margin-bottom: 4px;
}

.hand-block {
   border: 1.5px dashed var(--border);
   border-radius: var(--radius-lg);
   padding: 18px 18px 6px;
   margin-bottom: 16px;
   background: #FCFDFE;
}
.hand-block.left  { border-color: #BAE6E4; background: #F0FBFB; }
.hand-block.right { border-color: #BFDBFE; background: #F5F9FF; }
.hand-block-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px;
}
.hand-block-head .name {
   font-weight: 700;
   font-size: 15px;
   display: flex;
   align-items: center;
   gap: 8px;
}
.hand-icon {
   width: 28px;
   height: 28px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 14px;
}
.hand-block.left  .hand-icon { background: var(--primary); }
.hand-block.right .hand-icon { background: var(--accent); }
.three-cols {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
}
.live-level {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 18px;
   background: var(--st-normal-bg);
   border-radius: var(--radius);
   margin: 8px 0 18px;
   transition: background 200ms ease;
   border: 1px solid #BBF7D0;
}
.live-level .ll-label { font-size: 13px; color: var(--text-soft); }
.live-level .ll-value { font-weight: 700; font-size: 16px; }

/* ===== 表格 ===== */
.table-wrap {
   overflow-x: auto;
   border-radius: var(--radius);
   border: 1px solid var(--border);
}
table.data {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
   min-width: 720px;
}
table.data th, table.data td {
   padding: 12px 14px;
   text-align: left;
   border-bottom: 1px solid var(--border);
}
table.data th {
   background: #F8FAFC;
   font-size: 12.5px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--text-mute);
   font-weight: 600;
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #F8FBFC; }
table.data .num { font-variant-numeric: tabular-nums; font-weight: 600; }
table.data .time-cell { color: var(--text-soft); font-size: 13px; }
.muted-cell { color: var(--text-mute); }

/* ===== 工具欄 (歷史/圖表) ===== */
.toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   margin-bottom: 18px;
}
.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
   padding: 7px 14px;
   border-radius: 999px;
   border: 1.5px solid var(--border);
   background: var(--card);
   color: var(--text-soft);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   transition: all 160ms ease;
}
.chip:hover { border-color: var(--primary); color: var(--primary-dark); }
.chip.active {
   background: var(--primary);
   color: #fff;
   border-color: var(--primary);
   box-shadow: 0 4px 12px rgba(14,165,164,0.3);
}
.toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.date-pair { display: flex; align-items: center; gap: 6px; }
.date-pair input[type=date] {
   padding: 7px 10px;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-sm);
   font-size: 13px;
}

.empty {
   text-align: center;
   padding: 48px 20px;
   color: var(--text-mute);
}
.empty .empty-icon {
   width: 56px;
   height: 56px;
   margin: 0 auto 12px;
   border-radius: 16px;
   background: var(--bg);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-mute);
}

/* ===== 圖表頁 ===== */
.chart-toggles {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 16px;
}
.chart-toggles .toggle {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 6px 12px;
   border-radius: 999px;
   border: 1.5px solid var(--border);
   background: var(--card);
   font-size: 13px;
   cursor: pointer;
   user-select: none;
   color: var(--text-soft);
}
.chart-toggles .toggle.on { color: var(--text); border-color: transparent; background: var(--bg); }
.chart-toggles .dot { width: 10px; height: 10px; border-radius: 50%; }
.chart-canvas-wrap {
   position: relative;
   height: 380px;
   background: #FCFDFE;
   border-radius: var(--radius);
   padding: 16px;
   border: 1px solid var(--border);
}
.chart-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-top: 18px;
}
.chart-stat {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 14px;
   text-align: center;
}
.chart-stat .lab { font-size: 12px; color: var(--text-mute); margin-bottom: 4px; }
.chart-stat .val { font-size: 20px; font-weight: 700; }

/* ===== 頁腳 ===== */
.footer {
   text-align: center;
   color: var(--text-mute);
   font-size: 12.5px;
   padding: 20px;
}

/* ===== 響應式 ===== */
@media (max-width: 900px) {
   .overview { grid-template-columns: 1fr; }
   .chart-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
   .card-grid { grid-template-columns: repeat(2, 1fr); }
   .nav { display: none; }
   .nav.open {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      background: var(--card);
      border-bottom: 1px solid var(--border);
      padding: 12px 20px;
      box-shadow: var(--shadow-md);
      margin: 0;
   }
   .nav.open a { width: 100%; }
   .nav.open .divider { display: none; }
   .nav-toggle { display: inline-flex; margin-left: auto; }
}
@media (max-width: 480px) {
   .card-grid { grid-template-columns: 1fr; }
   .three-cols { grid-template-columns: 1fr 1fr; gap: 8px; }
   .container { padding: 20px 14px 60px; }
   .auth-card { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      transition: none !important;
      animation: none !important;
   }
}