:root{--bg-main: #f8fafc;--bg-card: rgba(255, 255, 255, .92);--bg-card-hover: rgba(255, 255, 255, .98);--border-card: rgba(226, 232, 240, .85);--primary-50: #eef2ff;--primary-100: #e0e7ff;--primary-500: #6366f1;--primary-600: #4f46e5;--primary-700: #4338ca;--primary-900: #312e81;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--red-50: #fef2f2;--red-100: #fee2e2;--red-500: #ef4444;--red-600: #dc2626;--red-glow: rgba(239, 68, 68, .35);--yellow-50: #fffbeb;--yellow-100: #fef3c7;--yellow-500: #f59e0b;--yellow-600: #d97706;--yellow-glow: rgba(245, 158, 11, .35);--green-50: #ecfdf5;--green-100: #d1fae5;--green-500: #10b981;--green-600: #059669;--green-glow: rgba(16, 185, 129, .35);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .06);--shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, .09), 0 4px 6px -4px rgba(15, 23, 42, .05);--shadow-xl: 0 20px 30px -10px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .06);--glass-bg: rgba(255, 255, 255, .82);--glass-border: 1px solid rgba(255, 255, 255, .65);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-full: 9999px;--transition: all .22s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Plus Jakarta Sans,Noto Sans TC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-main);background-image:radial-gradient(at 0% 0%,rgba(99,102,241,.07) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(239,68,68,.04) 0px,transparent 50%);background-attachment:fixed;color:var(--text-primary);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}.app-container{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;max-width:1280px;width:100%;margin:0 auto;padding:2rem 1.5rem 4rem}.navbar{position:sticky;top:0;z-index:50;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-card);box-shadow:0 2px 10px #00000005}.nav-wrapper{max-width:1280px;margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.brand-area{display:flex;align-items:center;gap:.85rem}.brand-logo-badge{width:42px;height:42px;background:linear-gradient(135deg,var(--primary-600),#818cf8);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #4f46e54d}.brand-title{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);line-height:1.2}.brand-subtitle{font-size:.75rem;font-weight:500;color:var(--text-muted)}.nav-status-group{display:flex;align-items:center;gap:1rem}.live-clock{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--text-secondary);background:#f1f5f9cc;padding:.35rem .75rem;border-radius:var(--radius-full);border:1px solid var(--border-card)}.env-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.3rem .7rem;border-radius:var(--radius-full)}.env-badge.online{background:var(--green-50);color:var(--green-600);border:1px solid var(--green-100)}.env-badge.demo{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}.hero-banner{background:linear-gradient(135deg,#1e1b4b,#312e81 60%,#4338ca);border-radius:var(--radius-lg);padding:2.25rem;color:#fff;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:var(--shadow-xl)}.hero-banner:before{content:"";position:absolute;top:-50%;right:-20%;width:350px;height:350px;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);border-radius:50%;pointer-events:none}.hero-title{font-size:1.85rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}.hero-description{font-size:.95rem;color:#e0e7ff;max-width:680px;line-height:1.6}.hero-metrics{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}.metric-pill{background:#ffffff1f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);padding:.6rem 1rem;display:flex;align-items:center;gap:.65rem;font-size:.85rem}.metric-pill strong{font-size:1.15rem;font-weight:700;color:#fff}.controls-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.75rem;background:#fff;padding:.9rem 1.25rem;border-radius:var(--radius-md);border:1px solid var(--border-card);box-shadow:var(--shadow-sm)}.filter-tabs{display:flex;flex-wrap:wrap;gap:.4rem}.filter-tab-btn{border:none;background:transparent;padding:.45rem .9rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.4rem}.filter-tab-btn:hover{background:#f1f5f9;color:var(--text-primary)}.filter-tab-btn.active{background:var(--primary-50);color:var(--primary-600)}.filter-tab-btn.active.red{background:var(--red-50);color:var(--red-600)}.filter-tab-btn.active.yellow{background:var(--yellow-50);color:var(--yellow-600)}.filter-tab-btn.active.green{background:var(--green-50);color:var(--green-600)}.search-and-select{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.search-input-wrap{position:relative}.search-input-wrap svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}.search-input{padding:.45rem .75rem .45rem 2.25rem;border:1px solid var(--border-card);border-radius:var(--radius-sm);font-size:.85rem;font-family:inherit;outline:none;transition:var(--transition);width:200px}.search-input:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px #6366f126;width:240px}.select-unit-filter{padding:.45rem .75rem;border:1px solid var(--border-card);border-radius:var(--radius-sm);font-size:.85rem;font-family:inherit;outline:none;background:#fff;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:var(--transition)}.select-unit-filter:focus{border-color:var(--primary-500)}.announcements-grid{display:flex;flex-direction:column;gap:1.25rem}.announcement-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:1.5rem 1.75rem;box-shadow:var(--shadow-sm);transition:var(--transition);position:relative;overflow:hidden}.announcement-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:var(--bg-card-hover);border-color:#cbd5e1}.announcement-card.urgent-card{border-left:5px solid var(--red-500)}.announcement-card.warning-card{border-left:5px solid var(--yellow-500)}.announcement-card.safe-card{border-left:5px solid var(--green-500)}.card-top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.85rem}.card-title-group{flex:1}.card-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);line-height:1.35;margin-bottom:.35rem}.card-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;font-size:.85rem;color:var(--text-secondary)}.meta-item{display:inline-flex;align-items:center;gap:.35rem}.meta-item strong{color:var(--text-primary)}.traffic-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .85rem;border-radius:var(--radius-full);font-size:.825rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;box-shadow:var(--shadow-sm)}.badge-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.traffic-badge.red{background:var(--red-50);color:var(--red-600);border:1px solid var(--red-100)}.traffic-badge.red .badge-dot{background:var(--red-500);box-shadow:0 0 0 0 var(--red-glow);animation:pulse-red 1.8s infinite}.traffic-badge.yellow{background:var(--yellow-50);color:var(--yellow-600);border:1px solid var(--yellow-100)}.traffic-badge.yellow .badge-dot{background:var(--yellow-500);box-shadow:0 0 0 0 var(--yellow-glow);animation:pulse-yellow 2.2s infinite}.traffic-badge.green{background:var(--green-50);color:var(--green-600);border:1px solid var(--green-100)}.traffic-badge.green .badge-dot{background:var(--green-500)}@keyframes pulse-red{0%{transform:scale(.95);box-shadow:0 0 #ef4444b3}70%{transform:scale(1);box-shadow:0 0 0 6px #ef444400}to{transform:scale(.95);box-shadow:0 0 #ef444400}}@keyframes pulse-yellow{0%{transform:scale(.95);box-shadow:0 0 #f59e0b99}70%{transform:scale(1);box-shadow:0 0 0 5px #f59e0b00}to{transform:scale(.95);box-shadow:0 0 #f59e0b00}}.card-content{font-size:.95rem;color:var(--text-secondary);line-height:1.65;margin:.85rem 0 1.25rem;white-space:pre-line;background:#f8fafc99;padding:.85rem 1rem;border-radius:var(--radius-sm);border:1px solid rgba(241,245,249,.8)}.external-link-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--primary-600);text-decoration:none;background:var(--primary-50);padding:.35rem .75rem;border-radius:var(--radius-sm);transition:var(--transition);margin-bottom:1.15rem}.external-link-btn:hover{background:var(--primary-100);color:var(--primary-700)}.unit-tracking-box{background:#fff;border:1px solid var(--border-card);border-radius:var(--radius-md);padding:1rem 1.15rem}.tracking-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.tracking-title{font-size:.85rem;font-weight:700;color:var(--text-secondary);display:flex;align-items:center;gap:.4rem}.progress-pill{font-size:.8rem;font-weight:700;padding:.15rem .6rem;border-radius:var(--radius-full)}.progress-pill.completed-all{background:var(--green-50);color:var(--green-600)}.progress-pill.in-progress{background:#f1f5f9;color:var(--text-secondary)}.progress-bar-bg{height:6px;background:#f1f5f9;border-radius:var(--radius-full);overflow:hidden;margin-bottom:.85rem}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-500),var(--green-500));border-radius:var(--radius-full);transition:width .4s ease}.units-groups-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:640px){.units-groups-row{grid-template-columns:1fr}}.unit-group{display:flex;flex-direction:column;gap:.4rem}.unit-group-label{font-size:.775rem;font-weight:700;display:flex;align-items:center;gap:.3rem}.unit-group-label.completed{color:var(--green-600)}.unit-group-label.pending{color:#d97706}.unit-chips-wrap{display:flex;flex-wrap:wrap;gap:.35rem}.unit-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.775rem;font-weight:600;padding:.25rem .6rem;border-radius:var(--radius-sm);transition:var(--transition)}.unit-chip.completed{background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100)}.unit-chip.pending{background:#fffbeb;color:#b45309;border:1px solid #fef3c7}.unit-chip.none-text{font-size:.75rem;color:var(--text-muted);font-style:italic;padding:.2rem 0}.admin-view-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem;background:#fff;padding:1.25rem 1.75rem;border-radius:var(--radius-lg);border:1px solid var(--border-card);box-shadow:var(--shadow-sm)}.admin-title-group h1{font-size:1.5rem;font-weight:800;color:var(--text-primary)}.admin-title-group p{font-size:.85rem;color:var(--text-secondary)}.admin-actions-group{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:.45rem;font-size:.875rem;font-weight:600;font-family:inherit;padding:.55rem 1.15rem;border-radius:var(--radius-sm);cursor:pointer;border:none;transition:var(--transition);text-decoration:none}.btn-primary{background:var(--primary-600);color:#fff;box-shadow:0 2px 8px #4f46e54d}.btn-primary:hover{background:var(--primary-700);transform:translateY(-1px)}.btn-secondary{background:#f1f5f9;color:var(--text-secondary);border:1px solid var(--border-card)}.btn-secondary:hover{background:#e2e8f0;color:var(--text-primary)}.btn-danger{background:var(--red-50);color:var(--red-600);border:1px solid var(--red-100)}.btn-danger:hover{background:var(--red-500);color:#fff}.btn-sm{padding:.35rem .7rem;font-size:.8rem}.admin-card{background:#fff;border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:1.35rem 1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:1rem}.admin-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.admin-card-controls{display:flex;align-items:center;gap:.4rem}.icon-btn{background:transparent;border:1px solid transparent;width:34px;height:34px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:var(--transition)}.icon-btn:hover{background:#f1f5f9;color:var(--text-primary)}.icon-btn.delete:hover{background:var(--red-50);color:var(--red-600)}.admin-unit-selector-bar{background:#f8fafc;border:1px solid var(--border-card);border-radius:var(--radius-md);padding:.85rem 1rem}.admin-unit-selector-bar p{font-size:.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:.6rem}.interactive-chips-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.interactive-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:var(--radius-sm);font-size:.825rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:var(--transition);-webkit-user-select:none;user-select:none}.interactive-chip.checked{background:var(--green-50);color:var(--green-700);border-color:var(--green-500)}.interactive-chip.unchecked{background:#fff;color:var(--text-secondary);border-color:var(--border-card)}.interactive-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1.5rem}.modal-box{background:#fff;border-radius:var(--radius-lg);max-width:620px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);border:1px solid var(--border-card);animation:modal-enter .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-enter{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-card);display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:1.25rem;font-weight:800;color:var(--text-primary)}.modal-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.15rem}.form-group{display:flex;flex-direction:column;gap:.4rem}.form-label{font-size:.85rem;font-weight:700;color:var(--text-primary)}.form-input,.form-textarea{padding:.6rem .85rem;border:1px solid var(--border-card);border-radius:var(--radius-sm);font-size:.9rem;font-family:inherit;outline:none;transition:var(--transition)}.form-input:focus,.form-textarea:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px #6366f126}.form-textarea{resize:vertical;min-height:90px}.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-card);display:flex;align-items:center;justify-content:flex-end;gap:.75rem;background:#f8fafc}.empty-state{background:#fff;border:2px dashed var(--border-card);border-radius:var(--radius-lg);padding:3.5rem 1.5rem;text-align:center;color:var(--text-muted)}.empty-state svg{margin-bottom:.85rem;color:var(--text-muted)}.empty-state h3{font-size:1.1rem;font-weight:700;color:var(--text-secondary);margin-bottom:.35rem}.app-footer{text-align:center;padding:1.5rem;font-size:.8rem;color:var(--text-muted);border-top:1px solid var(--border-card);background:#fff}