/* ===========================
   RESET & VARIABLES
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --primary: #4f46e5; --primary-dark: #3730a3; --primary-light: #818cf8;
  --accent: #06b6d4; --accent-dark: #0891b2;
  --success: #10b981; --danger: #ef4444; --warning: #f59e0b;
  --bg: #f0f4ff; --surface: #ffffff; --surface2: #f8faff;
  --text-primary: #1e1b4b; --text-secondary: #6b7280; --text-muted: #9ca3af;
  --border: #e2e8f0;
  --shadow-md: 0 4px 16px rgba(79,70,229,0.12);
  --shadow-lg: 0 12px 40px rgba(79,70,229,0.2);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --safe-top: env(safe-area-inset-top,0px); --safe-bottom: env(safe-area-inset-bottom,0px);
  --safe-left: env(safe-area-inset-left,0px); --safe-right: env(safe-area-inset-right,0px);
  --touch-min: 44px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Sarabun', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; }

/* ===========================
   TOAST
   =========================== */
.toast-container { position: fixed; top: calc(16px + var(--safe-top)); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: min(calc(100vw - 32px), 400px); }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; color: white; box-shadow: 0 4px 20px rgba(0,0,0,0.2); pointer-events: all; animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; }
.toast-success { background: var(--success); } .toast-error { background: var(--danger); } .toast-info { background: var(--primary); }
@keyframes toastIn { from{opacity:0;transform:translateY(-10px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastOut { to{opacity:0;transform:translateY(-10px) scale(0.95)} }

/* ===========================
   HERO
   =========================== */
.hero { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: calc(60px + var(--safe-top)) 20px 100px; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #312e81 0%, #4f46e5 40%, #7c3aed 70%, #0891b2 100%); }
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(129,140,248,0.3) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(6,182,212,0.2) 0%, transparent 50%); }
.hero-bg::before { content:''; position:absolute; width:350px; height:350px; border-radius:50%; background:rgba(255,255,255,0.05); top:-80px; right:-80px; animation:floatBubble 8s ease-in-out infinite; }
.hero-bg::after { content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.04); bottom:30px; left:5%; animation:floatBubble 10s ease-in-out infinite reverse; }
@keyframes floatBubble { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-20px) scale(1.05)} }
.hero-content { position:relative; z-index:2; text-align:center; color:white; max-width:640px; padding:0 4px; }
.school-badge { display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); border:2px solid rgba(255,255,255,0.3); margin-bottom:20px; animation:pulseBadge 3s ease-in-out infinite; }
.school-emoji { font-size:2rem; }
@keyframes pulseBadge { 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.2)} 50%{box-shadow:0 0 0 14px rgba(255,255,255,0)} }
.hero-title { font-size:clamp(1.7rem,5vw,2.8rem); font-weight:800; letter-spacing:-0.3px; margin-bottom:6px; text-shadow:0 2px 20px rgba(0,0,0,0.25); }
.hero-subtitle { font-size:clamp(0.75rem,2vw,0.9rem); opacity:0.65; letter-spacing:3px; text-transform:uppercase; margin-bottom:16px; }
.hero-desc { font-size:clamp(0.9rem,2.5vw,1.05rem); opacity:0.88; line-height:1.75; margin-bottom:28px; }
.hero-btn { display:inline-flex; align-items:center; gap:8px; background:white; color:var(--primary); font-family:'Sarabun',sans-serif; font-size:clamp(0.9rem,2.5vw,1rem); font-weight:700; padding:13px 28px; border-radius:50px; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,0.2); transition:var(--transition); min-height:var(--touch-min); }
.hero-btn:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,0.25); }
.hero-wave { position:absolute; bottom:0; left:0; right:0; z-index:2; line-height:0; }
.hero-wave svg { width:100%; height:70px; }

/* ===========================
   LAYOUT
   =========================== */
.container { max-width:820px; margin:0 auto; padding:0 16px; }
@media(min-width:640px){.container{padding:0 24px;}}
.main-content { background:var(--bg); padding-bottom:calc(80px + var(--safe-bottom)); }

/* ===========================
   STEPS
   =========================== */
.steps-section { padding:40px 0 24px; }
.steps-grid { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.step-card { background:var(--surface); border-radius:var(--radius-lg); padding:20px 14px; text-align:center; flex:1; min-width:0; box-shadow:var(--shadow-md); border:1px solid rgba(79,70,229,0.07); transition:var(--transition); }
.step-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.step-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; margin-bottom:10px; }
.step-icon-1{background:linear-gradient(135deg,#ede9fe,#c7d2fe);color:var(--primary);}
.step-icon-2{background:linear-gradient(135deg,#cffafe,#a5f3fc);color:var(--accent-dark);}
.step-icon-3{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:var(--success);}
.step-card h3{font-size:clamp(0.8rem,2vw,0.92rem);font-weight:700;margin-bottom:4px;}
.step-card p{font-size:clamp(0.72rem,1.8vw,0.8rem);color:var(--text-secondary);}
.step-arrow{font-size:1.6rem;color:var(--primary-light);opacity:0.5;flex-shrink:0;}
@media (max-width: 639px) {
  .steps-grid { flex-direction: column; gap: 12px; }
  .step-arrow { transform: rotate(90deg); margin: -4px 0; font-size: 1.4rem; }
  .step-card { width: 100%; display: flex; align-items: center; text-align: left; padding: 12px 16px; gap: 16px; }
  .step-icon { margin-bottom: 0; flex-shrink: 0; }
  .step-card h3 { margin-bottom: 2px; }
}

/* ===========================
   FORM CARD
   =========================== */
.form-section{padding:8px 0 0;}
.form-card{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid rgba(79,70,229,0.07);}
.form-header{display:flex;align-items:center;gap:14px;padding:22px 24px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;}
.form-header-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;border-radius:var(--radius-md);background:rgba(255,255,255,0.2);}
.form-header h2{font-size:clamp(1.1rem,3vw,1.3rem);font-weight:700;}
.form-header p{font-size:0.85rem;opacity:0.8;}
.visit-form{padding:24px 20px;}
@media(min-width:640px){.visit-form{padding:28px;}}

/* ===========================
   FORM ELEMENTS
   =========================== */
.section-label{display:flex;align-items:center;gap:7px;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--primary);padding-bottom:14px;margin-bottom:4px;border-bottom:2px solid var(--bg);margin-top:8px;}
.section-label:first-child{margin-top:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 80px;gap:14px;margin-bottom:16px;}
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.form-row .form-group,.form-row-3 .form-group{margin-bottom:0;}
label{font-size:0.88rem;font-weight:600;color:var(--text-primary);}
.required{color:var(--danger);}
input[type="text"],input[type="tel"],input[type="number"],input[type="search"],select,textarea {
  font-family:'Sarabun',sans-serif;font-size:16px;color:var(--text-primary);background:var(--surface2);
  border:2px solid var(--border);border-radius:var(--radius-md);padding:11px 14px;
  transition:var(--transition);outline:none;width:100%;min-height:var(--touch-min);
  -webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--text-muted);}
input:focus,select:focus,textarea:focus{border-color:var(--primary);background:white;box-shadow:0 0 0 4px rgba(79,70,229,0.1);}
input.error,select.error{border-color:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,0.1);}
select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;}
textarea{resize:vertical;min-height:80px;}

/* ===========================
   MAP
   =========================== */
.map-container{border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--border);margin-bottom:16px;transition:border-color var(--transition);}
.map-container.has-pin{border-color:var(--primary);}
.map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--surface2);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.map-info{display:flex;align-items:center;gap:6px;font-size:0.8rem;color:var(--text-secondary);flex:1;}
.map-actions{display:flex;gap:8px;}
.map-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:'Sarabun',sans-serif;font-size:0.83rem;font-weight:600;transition:var(--transition);min-height:var(--touch-min);white-space:nowrap;}
.map-btn-primary{background:var(--primary);color:white;}
.map-btn-primary:hover{background:var(--primary-dark);}
.map-btn-danger{background:#fee2e2;color:var(--danger);}
.map-btn-danger:hover{background:var(--danger);color:white;}
.map-frame{width:100%;height:300px;background:#e2e8f0;}
@media(min-width:640px){.map-frame{height:360px;}}
.pin-info{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(135deg,#ede9fe,#dbeafe);border-top:1px solid rgba(79,70,229,0.12);font-size:0.83rem;color:var(--primary-dark);flex-wrap:wrap;}
.pin-text{flex:1;min-width:120px;}
.open-map-btn{display:inline-flex;align-items:center;gap:4px;background:var(--primary);color:white;padding:6px 12px;border-radius:20px;text-decoration:none;font-size:0.78rem;font-weight:600;transition:var(--transition);white-space:nowrap;min-height:32px;}
.open-map-btn:hover{background:var(--primary-dark);}

/* ===========================
   SUBMIT BUTTON
   =========================== */
.form-actions{padding-top:12px;margin-top:8px;border-top:2px solid var(--bg);}
.btn-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;background:linear-gradient(135deg,var(--primary),#7c3aed);color:white;border:none;border-radius:var(--radius-md);font-family:'Sarabun',sans-serif;font-size:1.05rem;font-weight:700;cursor:pointer;transition:var(--transition);box-shadow:0 4px 18px rgba(79,70,229,0.38);min-height:52px;}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(79,70,229,0.45);}
.btn-submit:disabled{opacity:0.6;pointer-events:none;}
.btn-submit-text,.btn-submit-loading{display:flex;align-items:center;gap:8px;}
.spin{animation:spin 1s linear infinite;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ===========================
   MODALS
   =========================== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));opacity:0;pointer-events:none;transition:opacity 0.28s ease;}
.modal-overlay.active{opacity:1;pointer-events:all;}
.modal{background:white;border-radius:var(--radius-xl);padding:28px 24px;width:100%;max-width:440px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,0.3);transform:scale(0.92) translateY(16px);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);position:relative;max-height:calc(100vh - 40px);overflow-y:auto;}
.modal-overlay.active .modal{transform:scale(1) translateY(0);}
.success-circle{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--success),#059669);box-shadow:0 8px 28px rgba(16,185,129,0.4);margin-bottom:16px;animation:successPop 0.5s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes successPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.success-modal h2{font-size:1.4rem;font-weight:800;margin-bottom:8px;}
.success-modal p{color:var(--text-secondary);line-height:1.7;margin-bottom:16px;}
.success-detail{background:var(--surface2);border-radius:var(--radius-md);padding:14px;text-align:left;margin-bottom:20px;font-size:0.86rem;border:1px solid var(--border);}
.detail-row{display:flex;gap:8px;padding:3px 0;}
.detail-label{color:var(--text-muted);min-width:72px;flex-shrink:0;font-size:0.82rem;}
.detail-value{font-weight:600;word-break:break-word;}
.btn-close-modal{display:inline-flex;align-items:center;padding:12px 32px;background:linear-gradient(135deg,var(--success),#059669);color:white;border:none;border-radius:50px;font-family:'Sarabun',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:var(--transition);min-height:var(--touch-min);box-shadow:0 4px 16px rgba(16,185,129,0.35);}
.btn-close-modal:hover{transform:translateY(-2px);}
.modal-close-btn{position:absolute;top:14px;right:14px;width:36px;height:36px;border:none;background:var(--bg);border-radius:50%;cursor:pointer;font-size:0.88rem;color:var(--text-secondary);transition:var(--transition);display:flex;align-items:center;justify-content:center;}
.modal-close-btn:hover{background:var(--border);}
.teacher-modal-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:var(--primary);margin-bottom:14px;}
.teacher-login-modal h2{font-size:1.3rem;font-weight:800;margin-bottom:6px;}
.teacher-login-modal p{color:var(--text-secondary);font-size:0.88rem;margin-bottom:20px;}
.pin-input-container{margin-bottom:20px;}
.pin-dots{display:flex;gap:12px;justify-content:center;margin-bottom:10px;}
.pin-dot{width:14px;height:14px;border-radius:50%;background:var(--border);border:2px solid var(--border);transition:var(--transition);display:block;}
.pin-dot.filled{background:var(--primary);border-color:var(--primary);transform:scale(1.2);}
.pin-dot.error-dot{background:var(--danger);border-color:var(--danger);animation:shakeDot 0.4s ease;}
@keyframes shakeDot{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pin-error{font-size:0.82rem;color:var(--danger);font-weight:600;min-height:20px;}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:260px;margin:0 auto;}
.pin-key{display:flex;align-items:center;justify-content:center;height:58px;border-radius:var(--radius-md);border:2px solid var(--border);background:var(--surface2);font-family:'Sarabun',sans-serif;font-size:1.25rem;font-weight:700;color:var(--text-primary);cursor:pointer;transition:var(--transition);user-select:none;-webkit-user-select:none;}
.pin-key:hover,.pin-key:active{background:var(--primary);color:white;border-color:var(--primary);}
.pin-key-clear{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.pin-key-clear:hover{background:var(--warning);color:white;border-color:var(--warning);}
.pin-key-ok{background:linear-gradient(135deg,var(--success),#059669);color:white;border-color:transparent;font-size:1.4rem;}

/* ===========================
   TEACHER DASHBOARD
   =========================== */
.full-overlay{align-items:flex-start;padding:calc(10px + var(--safe-top)) 10px calc(10px + var(--safe-bottom));}
.dashboard-modal{max-width:960px;width:100%;text-align:left;padding:0;max-height:calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom));height:calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom));display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl);}
.dashboard-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.dashboard-modal .dashboard-header { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.dashboard-title{display:flex;align-items:center;gap:10px;}
.dashboard-title h2{font-size:clamp(1rem,3vw,1.2rem);font-weight:800;}
.dashboard-title p{font-size:0.78rem;opacity:0.75;}
.dashboard-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}

/* Dashboard Action Buttons */
.btn-teacher-loc,.btn-map-view,.btn-refresh,.btn-export,.btn-close-dashboard {
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 12px;border:1px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.12);color:white;border-radius:var(--radius-sm);
  font-family:'Sarabun',sans-serif;font-size:0.82rem;font-weight:600;
  cursor:pointer;transition:var(--transition);min-height:var(--touch-min);white-space:nowrap;
}
.btn-teacher-loc:hover{background:rgba(16,185,129,0.4);}
.btn-map-view:hover{background:rgba(6,182,212,0.4);}
.btn-refresh:hover{background:rgba(255,255,255,0.22);}
.btn-export:hover{background:rgba(255,255,255,0.22);}
.btn-close-dashboard:hover{background:rgba(239,68,68,0.4);}

/* Stats Bar */
.stats-bar{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;}
.stat-item{flex:1;text-align:center;padding:12px 6px;border-right:1px solid var(--border);}
.stat-item:last-child{border-right:none;}
.stat-item.stat-visited .stat-num{color:var(--success);}
.stat-num{display:block;font-size:clamp(1.4rem,4vw,1.9rem);font-weight:800;color:var(--primary);line-height:1;margin-bottom:2px;}
.stat-label{font-size:0.7rem;color:var(--text-muted);font-weight:600;}

/* Legend Bar */
.map-legend-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;overflow-x:auto;}
.legend-title{font-size:0.75rem;font-weight:700;color:var(--text-secondary);white-space:nowrap;}
.legend-item{display:flex;align-items:center;gap:4px;font-size:0.73rem;color:var(--text-secondary);white-space:nowrap;}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* Filter Bar */
.filter-bar{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;align-items:center;}
.search-input{flex:1;min-width:140px;font-size:0.9rem;padding:8px 12px;border:2px solid var(--border);border-radius:var(--radius-md);outline:none;transition:var(--transition);min-height:var(--touch-min);font-family:'Sarabun',sans-serif;}
.search-input:focus{border-color:var(--primary);}
.filter-select{padding:8px 32px 8px 12px;border:2px solid var(--border);border-radius:var(--radius-md);font-size:0.85rem;outline:none;cursor:pointer;min-height:var(--touch-min);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;-webkit-appearance:none;appearance:none;font-family:'Sarabun',sans-serif;}
.filter-select:focus{border-color:var(--primary);}
.sort-dist-label{display:flex;align-items:center;gap:6px;font-size:0.82rem;font-weight:600;color:var(--text-secondary);cursor:pointer;white-space:nowrap;padding:4px 0;}
.sort-dist-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}

/* Records */
.records-container{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.empty-state,.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--text-muted);text-align:center;flex:1;}
.empty-state svg,.loading-state svg{opacity:0.4;}
.empty-state p,.loading-state p{font-size:0.92rem;}

/* ===========================
   RECORD CARD (Enhanced)
   =========================== */
.record-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;display:flex;gap:10px;align-items:flex-start;transition:var(--transition);position:relative;}
.record-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow-md);}
.record-card.visited{background:#f0fdf4;border-color:#a7f3d0;}

/* Left column: color dot + badge */
.record-left{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
.record-color-dot{width:14px;height:14px;border-radius:50%;border:2px solid white;box-shadow:0 1px 4px rgba(0,0,0,0.2);flex-shrink:0;}
.record-badge{display:flex;align-items:center;justify-content:center;width:42px;min-height:42px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary),#7c3aed);color:white;font-size:0.68rem;font-weight:800;text-align:center;line-height:1.2;padding:4px;}

.record-body{flex:1;min-width:0;}
.record-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap;}
.record-name{font-size:0.95rem;font-weight:700;}
.record-class{font-size:0.7rem;font-weight:600;padding:2px 7px;background:#ede9fe;color:var(--primary);border-radius:20px;}
.has-pin-badge{font-size:0.7rem;padding:2px 6px;background:#d1fae5;color:#065f46;border-radius:4px;}
.no-pin-badge{font-size:0.7rem;padding:2px 6px;background:#fef3c7;color:#92400e;border-radius:4px;}

/* Distance Badge */
.dist-badge{font-size:0.7rem;padding:2px 7px;background:linear-gradient(135deg,#dbeafe,#ede9fe);color:var(--primary-dark);border-radius:20px;font-weight:700;white-space:nowrap;}

.record-info{display:flex;gap:10px;font-size:0.8rem;color:var(--text-secondary);flex-wrap:wrap;margin-bottom:3px;}
.phone-link{color:var(--accent-dark);text-decoration:none;font-weight:600;}
.phone-link:hover{text-decoration:underline;}
.record-address{font-size:0.79rem;color:var(--text-secondary);margin-bottom:3px;}
.record-note{font-size:0.77rem;color:var(--warning);background:#fffbeb;padding:3px 8px;border-radius:5px;display:inline-block;margin-bottom:3px;}
.record-time{font-size:0.7rem;color:var(--text-muted);margin-bottom:8px;}

/* Teacher Controls Row */
.record-teacher-controls{display:flex;flex-direction:column;gap:8px;}

/* Visit Toggle Button */
.btn-visit-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:2px solid var(--border);background:white;color:var(--text-secondary);border-radius:var(--radius-sm);font-family:'Sarabun',sans-serif;font-size:0.8rem;font-weight:600;cursor:pointer;transition:var(--transition);min-height:36px;width:100%;justify-content:center;}
.btn-visit-toggle:hover{border-color:var(--success);color:var(--success);background:#f0fdf4;}
.btn-visit-toggle.visited{background:#d1fae5;border-color:var(--success);color:#065f46;}

/* Color Picker */
.color-picker-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.color-picker-label{font-size:0.75rem;color:var(--text-muted);font-weight:600;white-space:nowrap;}
.color-pills{display:flex;gap:5px;flex-wrap:wrap;}
.color-pill{width:22px;height:22px;border-radius:50%;border:2px solid white;cursor:pointer;transition:var(--transition);box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.color-pill:hover{transform:scale(1.2);}
.color-pill.active{box-shadow:0 0 0 3px rgba(79,70,229,0.4),0 1px 3px rgba(0,0,0,0.2);transform:scale(1.15);}

/* Action Buttons */
.record-actions{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex-shrink:0;}
.btn-navigate, .btn-open-map, .btn-delete-record {
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  border:none;border-radius:6px;font-family:'Sarabun',sans-serif;font-weight:600;
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition);
}
.btn-navigate{padding:7px 10px;background:linear-gradient(135deg,var(--primary),#7c3aed);color:white;font-size:0.77rem;font-weight:700;min-height:32px;box-shadow:0 2px 8px rgba(79,70,229,0.3);}
.btn-navigate:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(79,70,229,0.4);}
.btn-open-map{padding:6px 10px;background:var(--accent);color:white;font-size:0.75rem;min-height:30px;}
.btn-open-map:hover{background:var(--accent-dark);}
.btn-delete-record{padding:6px 10px;background:#fee2e2;color:var(--danger);font-size:0.75rem;min-height:30px;}
.btn-delete-record:hover{background:var(--danger);color:white;}

/* ===========================
   TEACHER MAP MODAL
   =========================== */
.teacher-map-modal{max-width:100%;width:100%;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom));height:calc(100dvh - var(--safe-top) - var(--safe-bottom));text-align:left;padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-md);}
.teacher-map-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(135deg,#0891b2,#0e7490);color:white;gap:12px;flex-wrap:wrap;flex-shrink:0;}
.teacher-map-modal .teacher-map-header { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.teacher-map-title{display:flex;align-items:center;gap:10px;}
.teacher-map-title h2{font-size:clamp(1rem,3vw,1.2rem);font-weight:800;}
.teacher-map-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.map-search-input{padding:8px 14px;border:none;border-radius:var(--radius-md);font-family:'Sarabun',sans-serif;font-size:0.9rem;outline:none;min-width:160px;min-height:var(--touch-min);}
.teacher-map-view{flex:1;min-height:0;}
.map-bottom-legend{display:flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border-top:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;overflow-x:auto;}

/* ===========================
   TEACHER SHIELD BUTTON
   =========================== */
.teacher-shield-btn{position:fixed;bottom:calc(24px + var(--safe-bottom));right:calc(20px + var(--safe-right));width:54px;height:54px;border-radius:50%;border:none;background:linear-gradient(135deg,#312e81,#4f46e5,#7c3aed);color:white;cursor:pointer;z-index:900;box-shadow:0 4px 18px rgba(79,70,229,0.4),0 0 0 3px rgba(79,70,229,0.12);transition:var(--transition);display:flex;align-items:center;justify-content:center;}
.teacher-shield-btn:hover{transform:scale(1.1) rotate(-5deg);box-shadow:0 8px 28px rgba(79,70,229,0.5),0 0 0 6px rgba(79,70,229,0.12);}
.teacher-shield-btn:active{transform:scale(0.95);}
.shield-icon{width:26px;height:26px;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.25));}
.shield-tooltip{position:absolute;right:64px;background:rgba(17,24,39,0.9);color:white;padding:6px 12px;border-radius:8px;font-family:'Sarabun',sans-serif;font-size:0.78rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease;}
.shield-tooltip::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:rgba(17,24,39,0.9);border-right:none;}
.teacher-shield-btn:hover .shield-tooltip{opacity:1;}

/* ===========================
   FOOTER
   =========================== */
.site-footer{background:var(--primary-dark);color:rgba(255,255,255,0.55);text-align:center;padding:calc(18px + var(--safe-bottom)) 20px 18px;font-size:0.8rem;}

/* ===========================
   RESPONSIVE
   =========================== */
@media(max-width:400px){
  .hero-title{font-size:1.6rem;}
  .steps-grid{gap:6px;}
  .step-card{padding:14px 10px;}
  .step-icon{width:40px;height:40px;}
  .form-row{grid-template-columns:1fr;}
  .form-row-3{grid-template-columns:1fr;}
  .form-row-3 .form-group:last-child{max-width:100%;}
  .visit-form{padding:18px 14px;}
  .dashboard-header{gap:6px;}
  .btn-teacher-loc span,.btn-map-view span,.btn-export span{display:none;}
}
@media(max-width:639px){
  .form-row{grid-template-columns:1fr;}
  .form-row-3{grid-template-columns:1fr 1fr;}
  .form-row-3 .form-group:last-child{grid-column:span 2;max-width:140px;}
  .dashboard-title svg{display:none;}
  .map-legend-bar{padding:6px 12px;}
  .record-card { flex-direction: column; }
  .record-left { flex-direction: row; width: 100%; justify-content: flex-start; margin-bottom: 4px; }
  .record-teacher-controls{margin-top:4px;}
  .record-actions{flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;width:100%;margin-top:8px;gap:6px;}
  .record-actions a, .record-actions button { flex: 1; padding:10px 8px;}
  .full-overlay { padding: 0; }
  .dashboard-modal { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .dashboard-modal .dashboard-header { border-radius: 0; padding: 12px; }
  .teacher-map-modal { border-radius: 0; }
  .teacher-map-modal .teacher-map-header { border-radius: 0; padding: 12px; }
}
@media(min-width:640px) and (max-width:1023px){
  .hero{min-height:420px;}
  .map-frame{height:340px;}
}
@media(max-height:500px) and (orientation:landscape){
  .hero{min-height:300px;padding-top:40px;padding-bottom:70px;}
  .school-badge{width:56px;height:56px;margin-bottom:12px;}
  .hero-desc{display:none;}
  .map-frame{height:240px;}
}
@media(min-width:1024px){.hero{min-height:500px;}.map-frame{height:380px;}}

/* Leaflet */
.leaflet-container{font-family:'Sarabun',sans-serif!important;}
.leaflet-control-attribution{font-size:9px!important;}
.leaflet-popup-content{font-family:'Sarabun',sans-serif;}