/* Larger, clearer screen presentation shared by every application page. */
@media screen {
  :root {
    --blue: #006b99;
    --deep: #163440;
    --green: #12633f;
    --muted: #3c5660;
    --line: #708c94;
    --cream: #f3f8f5;
  }
  body { font-size: 20px; line-height: 1.85; }
  a { color: #005c87; text-underline-offset: 5px; }
  p, li { overflow-wrap: break-word; }
  .muted, .text-muted { color: var(--muted) !important; }
  .brand-title { font-size: 30px; line-height: 1.6; }
  .brand-sub { font-size: 18px; letter-spacing: 1px; }
  .clock { position: static; margin-top: 12px; font-size: 18px; font-weight: 500; }
  .main-nav { border-block-width: 2px; }
  .nav-inner { flex-wrap: wrap; gap: 14px; }
  .wordmark { font-size: 24px; }
  .nav-links { order: 3; flex: 0 0 100%; gap: 10px; padding: 8px 0; }
  .nav-account { margin-left: auto; }
  .nav-links a { font-size: 20px; font-weight: 600; padding: 10px 16px; min-height: 52px; border: 2px solid var(--line); }
  .nav-links a.active { background: #d9effb; color: #00466a; border-color: #005c87; text-decoration: underline; text-decoration-thickness: 3px; }
  .avatar { width: 52px; height: 52px; font-size: 22px; border: 2px solid #12633f; color: #12432f; flex-shrink: 0; }
  .logout-btn, .menu-toggle { font-size: 20px; font-weight: 600; color: var(--deep); border: 2px solid var(--line); background: white; min-height: 52px; padding: 8px 14px; border-radius: 12px; }
  .eyebrow, .pill { font-size: 18px; line-height: 1.7; letter-spacing: .3px; }
  .pill { border-width: 2px; }
  .hero { border: 2px solid var(--line); }
  .hero-copy { padding: 36px; min-width: 0; }
  .hero h1 { font-size: clamp(38px, 4vw, 54px); letter-spacing: 0; line-height: 1.5; }
  .hero p { font-size: 22px; line-height: 1.85; color: #274b43; max-width: none; }
  .hero p br { display: none; }
  .hero-image { min-width: 0; flex-direction: column; }
  .hero-image > img { flex: 1; min-height: 0; }
  .hero-note { position: static; margin: 14px; background: white; border: 2px solid var(--line); font-size: 20px; }
  .hero-note span, .helper-row { font-size: 18px; color: #294d42; }
  .btn, .btn-sm { font-size: 20px; line-height: 1.6; font-weight: 700; padding: 12px 22px; min-height: 56px; border-width: 2px; white-space: normal; }
  .btn-primary { --bs-btn-bg: #006b99; --bs-btn-border-color: #006b99; --bs-btn-hover-bg: #004d73; --bs-btn-hover-border-color: #004d73; --bs-btn-active-bg: #004263; background: #006b99; color: white; border-color: #00577d; }
  .btn-success { background: #12633f; border-color: #0b4e30; color: white; }
  .btn-success:hover, .btn-success:active { background: #0b4e30 !important; border-color: #0b4e30 !important; }
  .btn-danger { background: #a51f38; border-color: #871329; color: white; }
  .btn-light { background: white; color: #193d4b; border: 2px solid #587880; }
  .btn-outline-primary { color: #00547c; border-color: #00547c; }
  .btn:disabled { opacity: 1; background: #e2e8eb; border: 2px dashed #70828b; color: #4c5b64; cursor: not-allowed; }
  .controls, .hero-actions { gap: 16px; }
  .quick-strip, .feature-card, .panel, .auth-shell, .stat { border-width: 2px; }
  .quick-item { border-right-width: 2px; }
  .quick-item b { font-size: 22px; }
  .quick-item small { font-size: 18px; }
  .quick-icon { min-width: 56px; height: 56px; color: #175039; }
  .section-heading h2, .panel h2 { font-size: 30px; line-height: 1.6; }
  .section-heading p, .page-head p, .care-banner p { font-size: 20px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .feature-card { display: flex; flex-direction: column; }
  .feature-card img { height: 240px; }
  .feature-body { flex: 1; display: flex; flex-direction: column; padding: 24px; }
  .feature-body h3, .panel h3 { font-size: 25px; line-height: 1.6; }
  .feature-body p { font-size: 20px; min-height: 0; }
  .feature-body a { font-size: 20px; margin-top: auto; padding: 10px 0; min-height: 52px; text-decoration: underline; }
  .care-banner { border: 2px solid #547f99; flex-wrap: wrap; }
  .care-banner h3, .auth-art h2 { font-size: 30px; line-height: 1.6; }
  .page-head h1, .auth-form h1 { font-size: 36px; line-height: 1.6; }
  .auth-shell { max-width: 1080px; }
  .form-label { font-size: 22px; font-weight: 600; color: #183d49; margin-bottom: 10px; }
  .form-control, .form-select { font-size: 22px; min-height: 60px; line-height: 1.6; color: #163440; background-color: white; border: 2px solid #617d87; padding: 12px 16px; }
  .form-control::placeholder { color: #526975; opacity: 1; }
  input:-webkit-autofill::first-line { font-family: 'Noto Sans Thai', sans-serif; font-size: 22px; }
  .form-select { padding-right: 44px; }
  .form-help, small, .small { font-size: 18px; }
  input[type="checkbox"], input[type="radio"] { width: 26px; height: 26px; vertical-align: middle; accent-color: #006b99; margin-right: 8px; }
  label:has(input[type="checkbox"]), label:has(input[type="radio"]) { padding-block: 10px; cursor: pointer; }
  .stat small, .stat span, .mini-stats span { font-size: 20px; }
  .stat span { color: #12633f; }
  .stat strong, .mini-stats b { font-size: 40px; }
  .mini-stats > div, .direction { border: 2px solid var(--line); }
  .direction strong { font-size: 32px; }
  .direction .arrow { color: #006550; }
  .table { font-size: 20px; --bs-table-color: #163440; --bs-table-border-color: #7c959e; border: 2px solid #617d87; }
  .table th { font-size: 20px; padding: 16px; background: #dceee5; color: #173e31; border: 1px solid #7c959e; }
  .table td { padding: 16px; border: 1px solid #7c959e; }
  .table tbody tr:nth-child(even) > td { background: #eef5f7; }
  .table td a, .panel > a, .auth-form p a { text-decoration: underline; font-weight: 600; }
  .table td a { display: inline-block; padding: 10px 4px; min-height: 48px; }
  .table-responsive { max-width: 100%; }
  .badge { font-size: 18px; font-weight: 600; line-height: 1.6; border: 2px solid currentColor; white-space: normal; }
  .status-online { background: #def5e7; color: #125333; }
  .status-offline { background: #edf0f1; color: #354d59; }
  .status-pending { background: #fff1ca; color: #664800; }
  .alert { font-size: 20px; line-height: 1.8; border: 2px solid currentColor; }
  footer { border-top-width: 2px; font-size: 20px; }
  footer small, .footer-intro > span:last-child { font-size: 18px; }
  .panel, .stat, .device-layout > *, .auth-form { min-width: 0; }
  .manual-content .no-print { flex-wrap: wrap; }
  .manual-content table { width: 100%; border: 2px solid #617d87; }
  .manual-content th, .manual-content td { padding: 12px; border: 1px solid #617d87; }
  :focus-visible { outline: 4px solid #003f65 !important; outline-offset: 4px; }
  .form-control:focus, .form-select:focus { border-color: #003f65; box-shadow: 0 0 0 4px #f6cb4b; }
  :target { scroll-margin-top: 210px; }
}

@media screen and (min-width: 1101px) {
  .nav-links:has(> a:only-child) { flex: 1; order: 0; }
}

@media screen and (max-width: 1100px) {
  .menu-toggle { display: block; margin-left: auto; }
  .nav-account { margin-left: 0; }
  .nav-links { display: none; flex-direction: column; align-items: stretch; max-height: 55vh; overflow-y: auto; }
  .nav-links.open { display: flex; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-strip { grid-template-columns: 1fr; padding: 8px 24px; }
  .quick-item { border-right: 0; border-bottom: 2px solid var(--line); padding: 20px 0; }
  .hero { grid-template-columns: 1fr; }
  .hero-image > img { width: 100%; max-height: 450px; object-fit: cover; }
  .hero-note { align-self: stretch; }
  .device-layout { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
  .main-nav { position: static; }
  .nav-inner { padding: 14px 16px; }
  .wordmark { font-size: 22px; }
  .nav-account { width: 100%; justify-content: flex-end; }
  .nav-links { order: 4; }
  .brand-title { font-size: 26px; }
  .brand-sub { font-size: 18px; }
  .brand-header img { width: 140px; height: 140px; }
  .hero-copy { padding: 26px 20px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 22px; }
  .hero-image { height: auto; }
  .hero-image > img { flex: none; height: 280px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-note { font-size: 20px; padding: 18px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card img { height: 230px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .section-heading h2, .panel h2, .care-banner h3 { font-size: 28px; }
  .feature-body h3 { font-size: 25px; }
  .page-head h1, .auth-form h1 { font-size: 32px; }
  .panel, .auth-form { padding: 22px 18px; }
  .stat { padding: 18px 14px; }
  .stat strong { font-size: 36px; }
  .stat small, .stat span { font-size: 18px; }
  .controls .btn { flex: 1 1 180px; }
  .panel > form.d-flex { flex-wrap: wrap; }
  .panel > form.d-flex .form-control { flex: 1 1 100%; }
  :target { scroll-margin-top: 20px; }
}

@media screen and (max-width: 380px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .feature-card:hover { transform: none; }
}
.route-grid,.io-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.route-card{border:3px solid #b8e5eb;border-radius:20px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:4px;background:#fff}.route-card:has(input:checked){border-color:#038c9e;background:#e8fbf8;box-shadow:0 0 0 4px rgba(3,140,158,.12)}.route-card input{width:22px;height:22px}.route-symbol{font-size:42px;font-weight:900;color:#087e90;line-height:1}.route-card strong{font-size:22px}.io-card{border:3px solid #cbdfe3;border-radius:18px;padding:15px;background:#f7fbfc;display:flex;flex-direction:column;min-height:125px}.io-card span{font-size:14px;font-weight:800;color:#557278}.io-card strong{font-size:20px;margin:5px 0}.io-card b{margin-top:auto;font-size:20px}.io-card.active{border-color:#00a884;background:#e7fff6;box-shadow:0 0 0 4px rgba(0,168,132,.1)}.io-card.output.green.active{background:#dcfce7;border-color:#16803d}.io-card.output.amber.active{background:#fff4d6;border-color:#e39900}.io-card.output.blue.active{background:#e3f2ff;border-color:#0878c9}.io-card.output.red.active{background:#ffe5e8;border-color:#d72d45}.io-card.output.purple.active{background:#f4e7ff;border-color:#8a32bd}.training-live{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:15px;background:linear-gradient(135deg,#e5fff4,#e7f8ff)}.training-live>div{display:flex;flex-direction:column}.training-live strong{font-size:26px}.training-live .target-notice{grid-column:1/-1;border:4px solid #16803d;border-radius:18px;background:#dcfce7;padding:18px;color:#075a2b}.training-live .target-notice strong{font-size:28px}.training-live .target-notice span{font-size:20px;font-weight:800}.progress{height:14px;border:1px solid #80aa9d}@media(max-width:768px){.training-live{grid-template-columns:1fr 1fr}.training-live .target-notice{grid-column:1/-1}.route-grid,.io-grid{grid-template-columns:1fr}}
.route-display svg{display:block;width:100%;max-height:520px;border:3px solid #b8dfe5;border-radius:20px;background:#fbffff}.route-display .map-label{font:700 22px system-ui,sans-serif;fill:#315f67}