:root{
  --primary:#1565c0;
  --primary-dark:#0d47a1;
  --secondary:#00acc1;
  --success:#43a047;
  --warning:#fb8c00;
  --danger:#e53935;
  --bg:#eef5fb;
  --card:#ffffff;
  --text:#1d2b3a;
  --muted:#6b7a8a;
  --line:#dbe7f3;
  --radius:22px;
  --shadow:0 14px 34px rgba(21,101,192,.13);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Tahoma","Noto Sans Thai",sans-serif;background:radial-gradient(circle at top right,#d8f7ff,transparent 34%),linear-gradient(180deg,#eef7ff,#f7fbff 48%,#eef5fb);color:var(--text)}
a{text-decoration:none;color:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{width:278px;background:linear-gradient(180deg,var(--primary-dark),var(--primary) 72%,#008ca3);color:#fff;padding:22px 18px;position:fixed;inset:0 auto 0 0;box-shadow:12px 0 40px rgba(13,71,161,.18)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:30px;padding:8px}.brand-icon{font-size:32px;background:rgba(255,255,255,.15);width:58px;height:58px;border-radius:20px;display:grid;place-items:center}.brand strong{font-size:20px;display:block}.brand small{opacity:.85}.nav-link{display:block;padding:14px 16px;border-radius:16px;margin-bottom:8px;color:#eaf6ff;font-weight:800;transition:.18s}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.18);transform:translateX(2px)}.nav-link.logout{margin-top:24px;background:rgba(229,57,53,.18)}
.main{flex:1;margin-left:278px;padding:26px;max-width:1300px}.main-login{margin-left:0;max-width:none;padding:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);border:1px solid #fff;border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow)}.topbar h1{margin:0 0 4px;font-size:26px}.topbar p{margin:0;color:var(--muted)}.user-chip{background:#e3f2fd;color:var(--primary-dark);padding:10px 14px;border-radius:999px;font-weight:800}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#b3e5fc,transparent 38%),linear-gradient(135deg,#e3f2fd,#f7fbff)}.login-card{width:min(430px,100%);background:#fff;border-radius:30px;padding:36px;box-shadow:0 24px 70px rgba(13,71,161,.18);text-align:center}.login-logo{width:84px;height:84px;border-radius:30px;display:grid;place-items:center;margin:0 auto 16px;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:42px}.login-card h1{font-size:26px;margin:0}.login-card p{color:var(--muted);margin:8px 0 24px}
.login-form{margin-top:22px;text-align:left;display:grid;gap:18px}.login-field{display:grid;gap:8px}.login-form label{text-align:left;margin:0;color:#0f1f33;font-weight:900}.login-form input{height:46px}.login-submit{margin-top:4px}.login-help-text{text-align:center;color:#78909c;font-size:13px;font-weight:700;line-height:1.45;margin-top:-6px}

.card,.hero-card{background:rgba(255,255,255,.92);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid #fff;margin-bottom:22px}.hero-card{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#ffffff,#e7f8ff);overflow:hidden;position:relative}.hero-card:after{content:"";position:absolute;right:-42px;top:-42px;width:170px;height:170px;border-radius:50%;background:rgba(0,172,193,.13)}.hero-card h2{font-size:30px;margin:4px 0}.hero-card p{margin:0;color:var(--muted)}.eyebrow{font-size:13px;font-weight:900;color:var(--secondary);letter-spacing:.08em;text-transform:uppercase}.hero-stat{min-width:150px;text-align:center;border-radius:22px;background:#fff;padding:16px;box-shadow:0 10px 26px rgba(0,172,193,.12);z-index:1}.hero-stat span{display:block;color:var(--muted);font-size:13px}.hero-stat strong{display:block;color:var(--primary-dark);font-size:23px;margin-top:4px}.card h2{margin:0 0 18px;font-size:22px}.highlight{background:linear-gradient(135deg,#ffffff,#e0f7fa)}.glass-card{background:rgba(255,255,255,.86)}
.grid{display:grid;gap:22px}.grid.two{grid-template-columns:1fr 1fr}.info-list{display:grid;gap:12px}.info-list div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.info-list span{color:var(--muted)}.goal-list{margin:0;padding-left:22px;line-height:1.9}.form label{display:block;font-weight:800;margin:0 0 7px}.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:15px;padding:12px 14px;font-size:16px;background:#fbfdff}.form input:focus,.form textarea:focus{outline:3px solid rgba(0,172,193,.16);border-color:var(--secondary)}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.form-grid.single-date{grid-template-columns:minmax(220px,320px);margin-bottom:16px}.full-row{grid-column:1/-1}.actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}.sticky-actions{position:sticky;bottom:10px;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);padding:12px;border-radius:18px}.btn{border:0;border-radius:15px;padding:12px 18px;font-weight:900;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 10px 20px rgba(21,101,192,.18)}.btn.ghost{background:#eaf3fb;color:var(--primary-dark)}.btn.full{width:100%}.alert{border-radius:15px;padding:12px 16px;margin:0 0 18px;font-weight:800}.alert.danger{background:#ffebee;color:#b71c1c}.alert.success{background:#e8f5e9;color:#1b5e20}.alert.info{background:#e3f2fd;color:#0d47a1}
.risk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.risk-item{border-radius:19px;padding:16px;text-align:center}.risk-item span{display:block;color:var(--muted);margin-bottom:5px}.risk-item strong{font-size:22px}.risk-item.good{background:#e8f5e9;color:#1b5e20}.risk-item.bad{background:#ffebee;color:#b71c1c}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.section-head.compact p{margin:0;color:var(--muted)}.section-head h2{margin-bottom:6px}.section-head p{margin:0;color:var(--muted)}.score-badge{min-width:138px;text-align:center;border-radius:20px;background:linear-gradient(135deg,#e3f2fd,#e0f7fa);padding:14px}.score-badge strong{font-size:28px;display:block;color:var(--primary-dark)}.score-badge span{font-weight:900;color:var(--success)}
.assessment-table{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.table-row{display:grid;grid-template-columns:60px minmax(260px,1fr) 90px 90px 90px;border-bottom:1px solid var(--line);align-items:stretch}.table-row:last-child{border-bottom:0}.table-row>div,.table-row>label{padding:12px;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center}.table-row>div:nth-child(2){justify-content:flex-start}.table-row>*:last-child{border-right:0}.table-head{background:#eef7ff;font-weight:900;color:var(--primary-dark);text-align:center}.qno{font-weight:900;color:var(--primary-dark)}.qtext{line-height:1.5}.assessment-table input[type="radio"]{width:21px;height:21px;accent-color:var(--primary)}.score-help{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0}.score-help div{background:#f4f9fd;border-radius:13px;padding:10px;text-align:center}.result-card{background:linear-gradient(135deg,#fffde7,#e8f5e9);border-radius:18px;padding:18px;margin-top:18px}.result-card h3{margin:0 0 8px}.result-score{font-size:22px;font-weight:900;color:var(--primary-dark)}
.history-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}.history-table{width:100%;border-collapse:collapse;min-width:720px}.history-table th,.history-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}.history-table th{background:#eef7ff;color:var(--primary-dark);font-weight:900}.history-table tr:last-child td{border-bottom:0}.trend-strip,.score-trend{height:160px;display:flex;align-items:end;gap:10px;padding:16px;border-radius:18px;background:linear-gradient(180deg,#f8fcff,#edf8fb);border:1px solid var(--line);margin:14px 0 18px;overflow:auto}.trend-bar,.score-bar{height:120px;min-width:42px;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:6px}.trend-bar span,.score-bar span{display:block;width:28px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,var(--secondary),var(--primary));box-shadow:0 8px 16px rgba(21,101,192,.18)}.trend-bar small,.score-bar small{font-size:11px;color:var(--muted);font-weight:800;white-space:nowrap}.score-bar span{background:linear-gradient(180deg,var(--success),var(--secondary))}
@media(max-width:900px){.sidebar{position:relative;width:100%;inset:auto}.app-shell{display:block}.main{margin-left:0;padding:14px}.topbar,.hero-card{display:block}.grid.two,.form-grid,.risk-grid,.score-help{grid-template-columns:1fr}.table-row{grid-template-columns:42px 1fr 58px 58px 58px;font-size:14px}.table-row>div,.table-row>label{padding:8px}.user-chip{display:inline-block;margin-top:10px}.hero-stat{margin-top:14px}.sticky-actions{position:static}}

.trend-line-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0 20px}.trend-line-card{background:linear-gradient(180deg,#ffffff,#f7fcff);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 8px 20px rgba(21,101,192,.07)}.trend-line-card.has-risk{border-color:#ffcdd2;background:linear-gradient(180deg,#ffffff,#fff7f7)}.trend-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}.trend-card-head h3{font-size:18px;margin:0 0 4px;color:var(--primary-dark)}.trend-card-head p{margin:0;color:var(--muted);font-size:13px}.latest-value{font-size:22px;white-space:nowrap;border-radius:14px;padding:7px 10px;background:#e8f5e9;color:#1b5e20}.latest-value.risk{background:#ffebee;color:#b71c1c}.trend-svg{width:100%;height:auto;display:block}.trend-normal-band{fill:#e8f5e9;opacity:.8}.trend-grid-line{stroke:#dbe7f3;stroke-width:1}.trend-axis{stroke:#b7c9db;stroke-width:1.3}.trend-line{fill:none;stroke:var(--primary);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}.trend-line.secondary{stroke:var(--secondary);stroke-dasharray:6 5}.trend-point{stroke:#fff;stroke-width:2}.trend-point.normal{fill:var(--success)}.trend-point.risk{fill:var(--danger)}.trend-x-label{font-size:11px;fill:#6b7a8a;font-weight:800}.trend-legend{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12px;font-weight:800}.trend-legend span{display:inline-flex;align-items:center;gap:6px}.trend-legend i{width:16px;height:4px;border-radius:99px;background:var(--primary);display:inline-block}.trend-legend i.secondary{background:var(--secondary)}.risk-hint b{width:10px;height:10px;border-radius:50%;background:var(--danger);display:inline-block}.value-risk{color:#b71c1c!important;background:#ffebee;font-weight:900}.history-table td.value-risk strong{color:#b71c1c}@media(max-width:900px){.trend-line-grid{grid-template-columns:1fr}.trend-card-head{display:block}.latest-value{display:inline-block;margin-top:8px}.trend-strip{display:none}}

/* Phase 1.4: assessment header refinement + admin dashboard */
.table-row{grid-template-columns:68px minmax(280px,1fr) 112px 112px 112px}.frequency-option-head{display:flex!important;flex-direction:column;gap:2px;align-items:center!important;justify-content:center!important;line-height:1.2;text-align:center;white-space:normal}.frequency-option-head strong{font-size:15px;color:var(--primary-dark)}.frequency-option-head span{font-size:12px;color:#5f6f82;font-weight:800}.assessment-table .table-head>div{min-height:62px}.assessment-table .table-head{background:linear-gradient(180deg,#f0f8ff,#e4f2fd)}
.admin-hero{background:linear-gradient(135deg,#ffffff,#e6f7ff)}.admin-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.admin-kpi{background:rgba(255,255,255,.92);border:1px solid #fff;border-radius:22px;padding:18px;box-shadow:var(--shadow)}.admin-kpi span{display:block;color:var(--muted);font-weight:800}.admin-kpi strong{display:inline-block;font-size:34px;color:var(--primary-dark);margin:6px 4px 0 0}.admin-kpi small{color:var(--muted);font-weight:800}.admin-kpi.risk{background:linear-gradient(135deg,#fff,#fff4f4)}.admin-kpi.risk strong{color:var(--danger)}.dept-chart{display:grid;gap:13px}.dept-row{display:grid;grid-template-columns:minmax(170px,300px) 1fr 90px;gap:14px;align-items:center}.dept-name{font-weight:900;color:var(--primary-dark)}.dept-name small{display:block;color:var(--muted);font-weight:700;margin-top:2px}.dept-bar-wrap{height:18px;border-radius:99px;background:#e8f1fa;overflow:hidden}.dept-bar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--success),var(--secondary));min-width:8px}.dept-bar.risk{background:linear-gradient(90deg,#ff7043,var(--danger))}.dept-value{text-align:right;color:var(--muted)}.dept-value strong{font-size:22px;color:var(--danger)}.risk-tags{display:flex;gap:6px;flex-wrap:wrap}.risk-tags span{background:#ffebee;color:#b71c1c;border-radius:999px;padding:4px 8px;font-weight:900;font-size:12px;white-space:nowrap}.empty-state{text-align:center;color:var(--muted);font-weight:900;padding:22px}.admin-risk-table{min-width:1120px}.admin-risk-table small{color:var(--muted)}
@media(max-width:900px){.table-row{grid-template-columns:44px minmax(160px,1fr) 66px 66px 66px}.frequency-option-head strong{font-size:12px}.frequency-option-head span{font-size:10px}.admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dept-row{grid-template-columns:1fr}.dept-value{text-align:left}}

/* Phase 1.5: admin department drill-down */
.admin-kpi.warn{background:linear-gradient(135deg,#fff,#fff8e1)}.admin-kpi.warn strong{color:var(--warning)}
.dept-row-link{padding:10px 12px;border-radius:16px;transition:.18s;border:1px solid transparent}.dept-row-link:hover{background:#f6fbff;border-color:var(--line);transform:translateY(-1px);box-shadow:0 8px 18px rgba(21,101,192,.08)}
.dept-detail-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-actions-row{display:flex;justify-content:flex-start;margin:-6px 0 18px}.btn-secondary{display:inline-flex;align-items:center;gap:8px;border-radius:14px;background:#eaf3fb;color:var(--primary-dark);padding:11px 16px;font-weight:900;border:1px solid var(--line)}.btn-secondary:hover{background:#dff0ff}.status-good{display:inline-flex;border-radius:999px;background:#e8f5e9;color:#1b5e20;padding:5px 10px;font-weight:900;font-size:12px}.row-risk{background:#fffafa}.compact-table{min-width:760px}
@media(max-width:900px){.dept-detail-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-actions-row{margin-top:0}}

/* Mobile UI Patch: assessment form user-friendly on phone */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }
.card, .hero-card, .topbar { min-width: 0; }
.option-label { display: none; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .main { padding: 10px; width: 100%; }
  .topbar { padding: 14px 16px; border-radius: 20px; }
  .topbar h1 { font-size: 20px; line-height: 1.25; }
  .card, .hero-card { padding: 18px; border-radius: 22px; margin-bottom: 16px; }
  .hero-card h2 { font-size: 24px; line-height: 1.28; }
  .section-head { display: block; }
  .section-head h2 { font-size: 24px; line-height: 1.35; }
  .section-head p { line-height: 1.55; }
  .score-badge { width: 100%; margin-top: 14px; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 18px; }
  .score-badge strong { font-size: 28px; }

  .assessment-table {
    border: 0;
    background: transparent;
    overflow: visible;
    display: grid;
    gap: 14px;
  }
  .assessment-table .table-head { display: none; }
  .assessment-table .assessment-item-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 20px rgba(21,101,192,.06);
    font-size: 16px;
  }
  .assessment-table .assessment-item-row > div,
  .assessment-table .assessment-item-row > label {
    border-right: 0;
    padding: 14px;
  }
  .assessment-table .assessment-item-row .qno {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    align-items: flex-start;
    background: #eef7ff;
    font-size: 20px;
    border-right: 1px solid var(--line);
  }
  .assessment-table .assessment-item-row .qtext {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 17px;
    line-height: 1.55;
    word-break: break-word;
  }
  .assessment-table .assessment-item-row .option-cell {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 12px;
    min-height: 58px;
    border-top: 1px solid var(--line);
    cursor: pointer;
    background: #fbfdff;
    transition: .15s ease;
  }
  .assessment-table .assessment-item-row .option-cell:hover,
  .assessment-table .assessment-item-row .option-cell:has(input:checked) {
    background: #eaf6ff;
  }
  .assessment-table input[type="radio"] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin: 0;
  }
  .option-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
  }
  .option-label strong { color: var(--primary-dark); font-size: 17px; }
  .option-label small { color: var(--muted); font-size: 13px; font-weight: 800; }

  .form-grid.single-date { grid-template-columns: 1fr; }
  .form input, .form textarea, input, textarea, select { font-size: 16px; }
  .actions, .sticky-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .sticky-actions { position: static; background: transparent; padding: 0; }
  .btn { width: 100%; min-height: 48px; }
  .score-help { grid-template-columns: 1fr; }
  .history-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 380px) {
  .main { padding: 8px; }
  .card, .hero-card { padding: 14px; }
  .assessment-table .assessment-item-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .assessment-table .assessment-item-row > div,
  .assessment-table .assessment-item-row > label {
    padding: 12px;
  }
  .assessment-table .assessment-item-row .qtext { font-size: 16px; }
}


/* Profile BMR + mobile date field patch */
.health-target-card{display:flex;flex-direction:column;gap:16px}.bmr-card{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;border:1px solid rgba(21,101,192,.12);background:linear-gradient(135deg,#ffffff,#e6f8ff);border-radius:24px;padding:18px 20px;box-shadow:0 12px 28px rgba(21,101,192,.10)}.bmr-card span{display:block;color:var(--muted);font-weight:800;margin-bottom:4px}.bmr-card strong{color:var(--primary-dark)}.bmr-card>div:first-child strong{font-size:22px}.bmr-value{text-align:right}.bmr-value strong{display:block;font-size:36px;line-height:1;color:var(--primary-dark)}.bmr-value small{display:block;color:var(--success);font-weight:900;margin-top:6px}.date-field-wrap{min-width:0}.date-input{width:100%;max-width:100%;min-width:0;appearance:auto;-webkit-appearance:auto}.form-grid>div{min-width:0}.form input[type="date"]{line-height:1.2}

@media(max-width:640px){.health-target-card{gap:14px}.bmr-card{grid-template-columns:1fr;padding:16px;border-radius:22px}.bmr-value{text-align:left}.bmr-value strong{font-size:38px}.date-field-wrap{grid-column:1 / -1}.date-input{font-size:18px;text-align:center;min-height:58px;padding-left:12px;padding-right:12px}.form-grid{grid-template-columns:1fr!important}.form label{line-height:1.35}}

/* Phase 1.6: cholesterol field/table responsive refinement */
.risk-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.admin-risk-table{min-width:1220px;}


/* Health Bank icon / PWA patch */
.brand-icon img{width:34px;height:34px;display:block;border-radius:10px}
.login-logo img{width:58px;height:58px;display:block;border-radius:16px}