*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;color:#313534;min-height:100vh;overflow-x:hidden}
a{color:#4182F8;text-decoration:none;cursor:pointer}

/* HEADER */
.header{background:#fff;padding:10px 24px 10px;display:flex;align-items:center;min-height:80px}
.header .emblem{height:70px;width:auto;flex-shrink:0}
.header .title-area{flex:1;text-align:right;padding-right:8px}
.header .title-area h1{font-size:24px;font-weight:700;color:#313534;line-height:1.3;margin:0}
.header .title-area .sub{font-size:16px;color:#4182F8;margin-top:3px;font-weight:400}
@media(max-width:600px){
  .header{flex-direction:column;text-align:center;padding:14px 12px;min-height:auto}
  .header .emblem{height:56px;margin-bottom:8px}
  .header .title-area{text-align:center;padding-right:0}
  .header .title-area h1{font-size:16px}
  .header .title-area .sub{font-size:12px}
}

/* RED MARQUEE BAR */
.red-bar{background:#FF0000;padding:10px;overflow:hidden;white-space:nowrap}
.red-bar marquee{color:#fff;font-size:20px;font-weight:500}
@media(max-width:600px){.red-bar marquee{font-size:14px}}

/* BLUE NAV */
.nav{background:#4182F8;height:40px;display:flex;align-items:center;padding:0 8px}
.nav a{color:#fff;font-size:16px;font-weight:600;padding:0 10px;display:inline-flex;align-items:center;height:40px;white-space:nowrap;cursor:pointer;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.nav a:hover{background:#2265DE}
.nav .sep{color:rgba(255,255,255,.5);font-size:16px;user-select:none}
.nav .spacer{flex:1}
/* Blink buttons */
.blink{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:2px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;margin:0 4px;background:#40E0D0;animation:blinker .9s step-start infinite;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)}
@keyframes blinker{50%{background:#FFA500}}
.nav .lang-sel{background:#4182F8;color:#fff;border:none;border-radius:2px;height:27px;font-size:14px;padding:0 8px;cursor:pointer;outline:none;margin-left:4px}
.nav .lang-sel option{color:#313534;background:#fff}
@media(max-width:600px){
  .nav{height:auto;flex-wrap:wrap;padding:4px 6px}
  .nav a{font-size:12px;height:32px;padding:0 6px}
  .blink{font-size:11px;height:24px;padding:0 8px;margin:2px}
}

/* STATE NOTICE */
.state-notice{background:#FCF8E3;border:1px solid #FAEBCC;margin:14px 24px;padding:15px;border-radius:4px;font-size:14px;color:#8A6D3B;line-height:1.7}
.state-notice a{color:#4182F8;text-decoration:underline;font-weight:500}
@media(max-width:600px){.state-notice{margin:8px 10px;font-size:12px;padding:10px 12px}}

/* LOGIN SECTION */
.login-section{background:#E5E6E6;padding:25px 0 40px}
.main-wrap{display:flex;justify-content:center;padding:0 16px}
.form-card{background:#fff;width:100%;max-width:420px;border-radius:2px;box-shadow:0 1px 3px 0 rgba(0,0,0,.33);padding:32px 44px 28px;text-align:center}
@media(max-width:600px){.form-card{padding:24px 20px 20px;max-width:100%}}

/* Avatar with animation */
.avatar{width:100px;height:100px;border-radius:50%;background:#DFDFDF;border:13px solid #DFDFDF;margin:0 auto 28px;position:relative;overflow:hidden}
.avatar .head{width:34px;height:34px;border-radius:50%;background:#AAA;position:absolute;top:16px;left:50%;transform:translateX(-50%);animation:user-head .5s forwards}
.avatar .body{width:60px;height:36px;border-radius:30px 30px 0 0;background:#AAA;position:absolute;bottom:-2px;left:50%;transform:translateX(-50%) translateY(36px);animation:user-body .5s .3s forwards}
@keyframes user-head{from{transform:translateX(-50%) scale(0)}to{transform:translateX(-50%) scale(1)}}
@keyframes user-body{from{transform:translateX(-50%) translateY(36px)}to{transform:translateX(-50%) translateY(2px)}}

.mat-field{margin-bottom:15px;text-align:left;position:relative}
.mat-field input{width:100%;border:none;border-bottom:1px solid #9E9E9E;padding:10px 0;font-size:14.5px;color:#313534;background:transparent;outline:none;height:43px;transition:border-color .2s;letter-spacing:1px;text-transform:uppercase;font-weight:500}
.mat-field input::placeholder{text-transform:none;font-weight:400;letter-spacing:0;color:#9E9E9E;font-size:14.5px}
.mat-field input:focus{border-bottom-color:#4182F8}
.mat-field .highlight{position:absolute;bottom:0;left:50%;width:0;height:2px;background:#4182F8;transition:all .3s}
.mat-field input:focus~.highlight{width:100%;left:0}

.btn-submit{width:100%;height:36px;line-height:36px;background:#4182F8;color:#fff;border:none;border-radius:2px;font-size:14px;font-weight:500;cursor:pointer;letter-spacing:.5px;text-transform:uppercase;transition:.2s ease-out;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);margin-top:10px}
.btn-submit:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)}
.btn-submit:active{opacity:.85}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}

.form-links{display:flex;justify-content:space-between;margin-top:20px;font-size:14px}
.form-links a{color:#4182F8;text-transform:capitalize}

.ld{display:none;text-align:center;padding:16px 0}
.ld.show{display:block}
.ld-spinner{width:30px;height:30px;border:3px solid #E5E6E6;border-top-color:#4182F8;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 8px}
@keyframes spin{to{transform:rotate(360deg)}}
.ld p{font-size:12px;color:#9E9E9E}

/* FOOTER */
.footer{background:#E5E6E6;padding:70px 24px 16px;text-align:center}
.footer-top{display:flex;align-items:center;justify-content:space-between;max-width:900px;margin:0 auto 12px}
.footer-top .f-logo-left{height:58px;width:auto}
.footer-top .f-logo-right{height:38px;width:auto}
.footer-top .f-center{flex:1;text-align:center}
.footer-links{margin-bottom:10px}
.footer-links a{color:#3388CC;font-size:15px;font-weight:700;margin:0 6px;text-shadow:0 1px 0 #f3f3f3}
.footer-contact{font-size:16px;color:#212121;line-height:1.7}
.footer-contact a{color:#1B84F1}
.footer-copy{font-size:14px;color:#313534;margin-top:10px}
@media(max-width:600px){
  .footer{padding:30px 12px 16px}
  .footer-top{flex-direction:column;gap:12px}
  .footer-top .f-logo-left{height:48px}
  .footer-top .f-logo-right{height:32px}
  .footer-links a{font-size:13px;margin:0 3px}
  .footer-contact{font-size:13px}
}

/* MODAL */
.overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.4);align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:2px;width:100%;max-width:380px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.3);animation:mPop .2s ease}
@keyframes mPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.m-head{background:#d32f2f;padding:16px 20px;color:#fff;display:flex;align-items:center;gap:10px}
.m-head svg{width:24px;height:24px;fill:#fff;flex-shrink:0}
.m-head h3{font-size:16px;font-weight:500}
.m-body{padding:20px}
.m-body p{font-size:14px;color:#676767;line-height:1.6;margin-bottom:8px}
.m-body .veh-num{display:inline-block;background:#e8eaf6;color:#1a237e;font-weight:700;font-size:16px;padding:6px 18px;border-radius:4px;letter-spacing:2px;margin:6px 0}
.m-body .flag{display:inline-flex;align-items:center;gap:6px;background:#fff3e0;border:1px solid #ffe0b2;color:#e65100;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;margin:10px 0}
.m-body .flag .dot{width:8px;height:8px;background:#ff9800;border-radius:50%;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.m-body .note{font-size:11px;color:#aaa;margin-top:12px;line-height:1.5}
.m-btns{display:flex;gap:10px;padding:4px 20px 20px}
.m-btns button{flex:1;padding:12px;border-radius:2px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:.2s ease-out;text-transform:uppercase;letter-spacing:.5px}
.m-btns button:active{opacity:.8}
.m-btns .btn-c{background:#f5f5f5;color:#888;border:1px solid #e0e0e0}
.m-btns .btn-y{background:#4caf50;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)}

/* Page 2 — installation guide（主样式在 index 内联，这里作兜底） */
.guide-wrap{width:100%;background:#E5E6E6;min-height:60vh;padding:20px 0 40px;box-sizing:border-box}
.guide-content{width:100%;max-width:480px;margin:0 auto;padding:0 16px;box-sizing:border-box}
.guide-note{background:#FCF8E3;border:1px solid #FAEBCC;border-radius:4px;padding:15px;margin-bottom:12px;font-size:14px;color:#8a6d3b;line-height:1.5}
.guide-note a{color:#4182f8;font-weight:500}
.step{background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.33);padding:16px 18px;margin-bottom:12px}
.step h3{font-size:14px;font-weight:700;color:#313534;margin-bottom:8px}
.step p{font-size:14px;color:#676767;line-height:1.6}
.step .sub{font-size:13px;color:#9e9e9e;margin-top:6px;line-height:1.5}
html,body{overflow-x:hidden;max-width:100%}
.nav{flex-wrap:wrap;height:auto}
.red-bar{overflow:hidden;max-width:100%}