*{box-sizing:border-box}
:root{--module:var(--gold);--module-soft:#fff3cf;--module-dark:#8a6300}
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Sarabun","Prompt","Noto Sans Thai",Roboto,Arial,sans-serif;font-size:15px;line-height:1.55}
button,input,textarea{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}em{color:var(--danger);font-style:normal}#viewApp{min-height:100dvh;display:flex;flex-direction:column}
.loading-overlay{position:fixed;inset:0;background:rgba(11,31,58,.45);display:flex;align-items:center;justify-content:center;z-index:9000}
.loading-box{background:var(--white);padding:var(--space-5) var(--space-6);border-radius:var(--radius);display:flex;align-items:center;gap:var(--space-3);box-shadow:var(--shadow);font-weight:700}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--module);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--module-dark);color:var(--white);padding:12px 18px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:9100;max-width:90vw;text-align:center;font-weight:700}
.toast.success{background:var(--success)}.toast.error{background:var(--danger)}.toast.warn{background:var(--warn)}
.login-wrap{min-height:100dvh;background:radial-gradient(1000px 560px at 10% -10%,rgba(214,162,30,.16),transparent 60%),radial-gradient(900px 520px at 110% 110%,rgba(11,31,58,.16),transparent 60%),var(--bg);display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;gap:var(--space-4);padding:32px var(--space-5) 12px}
.login-card{width:100%;max-width:620px;background:var(--white);padding:40px 48px;border-radius:var(--radius);box-shadow:var(--shadow);transform:translateY(42px)}
.portal-link{display:inline-flex;align-items:center;margin-bottom:var(--space-5);color:var(--muted);text-decoration:none;font-weight:800}.portal-link:hover{color:var(--navy)}
.brand{display:flex;gap:var(--space-4);align-items:center;justify-content:center;text-align:left;margin-bottom:var(--space-5)}.brand h1{font-size:1.5rem;margin:0;color:var(--navy)}.brand p{margin:0;font-size:1rem}
.brand-mark{width:72px;height:72px;border-radius:12px;background:var(--white);display:flex;align-items:center;justify-content:center;overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}.brand-mark.sm{width:32px;height:32px;border-radius:8px}.topbar .brand-mark.sm{background:transparent;border-radius:0;overflow:visible}.topbar .brand-mark.sm img{border-radius:0}
.auth-toggle{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg);border-radius:var(--radius-sm);padding:4px;margin-bottom:var(--space-5)}
.auth-tab{background:transparent;border:0;padding:12px;border-radius:6px;color:var(--muted);font-weight:800;cursor:pointer}.auth-tab.active{background:var(--white);color:var(--navy);box-shadow:0 1px 3px rgba(11,31,58,.08)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}.field>span{font-weight:700;color:var(--navy)}
.field input,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);outline:none}.field textarea{resize:vertical;min-height:92px}.field input:focus,.field textarea:focus{border-color:var(--module);box-shadow:0 0 0 3px rgba(15,118,110,.18)}
.hint{color:var(--muted);font-size:.9rem;text-align:center}.btn{border:0;border-radius:var(--radius-sm);padding:12px 18px;min-height:44px;font-weight:800;cursor:pointer}.btn-primary{background:var(--module);color:var(--white)}.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.25)}.btn-success{background:var(--success);color:var(--white)}.btn-block{width:100%}.btn-sm{padding:8px 12px;min-height:36px;font-size:.9rem}
.topbar{background:var(--module-dark);color:var(--white);padding:12px 16px;display:flex;justify-content:space-between;align-items:center}.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px}.badge{background:var(--module-soft);color:var(--module-dark);padding:2px 8px;border-radius:999px;font-weight:800;font-size:.8rem}
.container{width:100%;max-width:1040px;margin:0 auto;padding:var(--space-5);flex:1 0 auto}.footer{display:flex;flex-direction:column;justify-content:center;gap:4px;text-align:center;padding:var(--space-5) var(--space-4);font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);background:#fff;margin-top:auto}.login-footer{width:min(680px,100%);border-top:1px solid rgba(15,23,42,.08);background:transparent;padding:12px var(--space-4) 0;margin-top:0;align-self:end}.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-5);margin-bottom:var(--space-5)}.card h2{margin:0;color:var(--navy)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-bottom:var(--space-5)}.stat-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4)}.stat-card .label{color:var(--muted);font-size:.85rem}.stat-card .value{color:var(--navy);font-size:1.8rem;font-weight:900}
.toolbar{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.search{min-width:220px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.contact-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.btn-edit-contact{display:inline-flex;align-items:center;justify-content:center;width:38px;min-width:38px;min-height:38px;padding:0;color:var(--module-dark);border-color:rgba(138,99,0,.28);background:#fff8e2;font-size:1.15rem;line-height:1}.btn-cancel-contact{color:var(--module-dark);border:1px solid rgba(138,99,0,.28);background:#fff8e2}.contact-detail{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fafbfd;padding:var(--space-4);margin-bottom:var(--space-4)}.contact-detail dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0}.contact-detail div{min-width:0}.contact-detail dt{color:var(--muted);font-size:.82rem;font-weight:800}.contact-detail dd{margin:3px 0 0;color:var(--navy);font-weight:800;white-space:pre-wrap;overflow-wrap:anywhere}.contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--space-4)}.contact-form .field{margin-bottom:14px}.field-wide{grid-column:1/-1}.contact-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}.contact-status{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:800}.contact-status.ok{background:#e3f6e9;color:#166e3c}.contact-status.warn{background:#fff5d9;color:#8a6300}
.record-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-4);margin-bottom:var(--space-3);background:#fff}.record-head{display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start}.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:800}.pill-pending{background:#fff5d9;color:#8a6300}.pill-confirmed{background:#e3f6e9;color:#166e3c}.topic-chip{display:inline-block;background:#eef2f8;color:var(--navy);padding:2px 8px;border-radius:999px;font-size:.78rem;margin:0 4px 4px 0}.detail-block{background:#fafbfd;border:1px solid var(--line);padding:var(--space-3);border-radius:var(--radius-sm);white-space:pre-wrap;margin-top:8px}.empty{text-align:center;color:var(--muted);padding:var(--space-6)}
@media(max-width:700px){.login-wrap{min-height:100dvh;padding:var(--space-4) var(--space-4) 10px}.login-card{padding:var(--space-6);max-width:480px;transform:none}.auth-toggle{grid-template-columns:1fr}.auth-tab{padding:10px 8px;font-size:.86rem}.brand{justify-content:flex-start}.brand-mark{width:52px;height:52px;font-size:1.45rem}.brand h1{font-size:1.15rem}.brand p{font-size:.85rem}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.toolbar,.record-head,.topbar{align-items:stretch;flex-direction:column}.search{width:100%}.footer{gap:4px}.login-footer{width:100%;font-size:.74rem}}

@media(max-width:760px){
  html,body{font-size:16px;background:linear-gradient(180deg,var(--module-dark) 0 156px,var(--bg) 156px 100%)}
  #viewApp{background:transparent}
  .login-wrap{display:block;min-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,var(--module-dark) 0 168px,var(--bg) 168px 100%)}
  .login-card{padding:22px 16px;border-radius:22px 22px 18px 18px;box-shadow:0 18px 42px rgba(4,13,27,.2);border-top:4px solid var(--module);margin-top:18px}
  .portal-link{margin-bottom:14px}
  .brand{gap:12px;margin-bottom:18px}
  .brand h1{line-height:1.25}
  .auth-toggle{gap:4px}
  .auth-tab{min-height:46px}
  .field{margin-bottom:14px}
  .field input,.field textarea{min-height:48px;font-size:16px}
  .btn{width:100%;min-height:48px;padding:12px 14px}
  .topbar{position:sticky;top:0;z-index:50;padding:calc(10px + env(safe-area-inset-top)) 12px 14px;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(4,13,27,.18)}
  .topbar-left,.topbar-right{width:100%;justify-content:space-between}
  .topbar-right{align-items:center}
  .user-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .btn{width:auto;min-width:92px;min-height:42px;padding:9px 12px;border-radius:999px}
  .container{padding:14px 10px calc(20px + env(safe-area-inset-bottom))}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .card,.stat-card,.record-card{border-radius:10px;box-shadow:0 4px 14px rgba(11,31,58,.09)}
  .card{padding:14px;margin-bottom:12px;border:1px solid rgba(227,232,239,.86)}
  .stat-card{min-width:0;padding:10px 8px}
  .stat-card .label{font-size:.72rem;line-height:1.25;overflow-wrap:anywhere}
  .stat-card .value{font-size:1.45rem;line-height:1.15}
  .toolbar{gap:10px;margin-bottom:12px}
  .toolbar h2{font-size:1.05rem;line-height:1.3;margin:0}
  .search{min-width:0;min-height:46px;font-size:16px}
  .contact-toolbar-actions{justify-content:flex-start}
  .contact-detail{padding:12px}
  .contact-detail dl{grid-template-columns:1fr;gap:12px}
  .contact-form{grid-template-columns:1fr;gap:0}
  .contact-actions{display:grid;grid-template-columns:1fr 1fr}
  .contact-status{align-self:flex-start}
  .record-card{padding:14px}
  .record-head{gap:8px}
  .pill{align-self:flex-start}
  .topic-chip{line-height:1.8}
  .detail-block{max-height:220px;overflow:auto}
  .record-card .btn{margin-top:2px}
  .toast{left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));transform:none;max-width:none}
  .loading-box{width:min(320px,calc(100vw - 32px));justify-content:center;padding:18px}
  .footer{display:flex;padding:12px 10px calc(14px + env(safe-area-inset-bottom));font-size:.72rem}
}

@media(max-width:380px){
  .brand h1{font-size:1.05rem}
  .brand p{font-size:.8rem}
  .badge{display:inline-flex;width:max-content;margin:4px 0 0}
}