@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#0c3159;--blue:#116fda;--ink:#173652;--muted:#8498aa;--line:#e7eef5;--bg:#f5f8fc;--green:#1bb779;--red:#e34c5c;--amber:#ecab32;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}#app{max-width:500px;margin:0 auto;min-height:100vh;background:var(--bg);box-shadow:0 0 30px #1a365016}.statusbar{height:env(safe-area-inset-top);background:var(--navy)}.header{background:var(--navy);color:white;padding:14px 17px 17px;position:sticky;top:0;z-index:20}.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.header h1{font:800 18px Manrope,Arial;margin:0;letter-spacing:-.4px}.header small{display:block;font-size:10px;color:#b7d0e8;margin-top:2px}.head-icon{border:0;color:white;background:#ffffff18;width:32px;height:32px;border-radius:7px;font-size:18px;display:grid;place-items:center}.head-actions{display:flex;gap:7px}.header .back{border:0;color:white;background:none;font-size:20px;padding:0 8px 0 0}.main{padding:15px 14px 92px}.welcome{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.welcome h2{font:800 16px Manrope;margin:0 0 3px}.welcome p{font-size:10px;color:var(--muted);margin:0}.welcome .date{font-size:9px;color:#86a0b7}.card{background:white;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;box-shadow:0 2px 8px #173e5c08}.card-head{display:flex;justify-content:space-between;align-items:start;gap:8px;margin-bottom:11px}.card h3{font:800 12px Manrope;margin:0 0 3px}.card-head p,.sub{font-size:9px;color:var(--muted);margin:0}.card .link{font-size:9px;color:var(--blue);font-weight:800;border:0;background:none;padding:2px}.pill{border-radius:20px;padding:4px 7px;font-size:8px;font-weight:800;display:inline-flex;align-items:center;gap:4px;background:#e7f7ef;color:#168e63;white-space:nowrap}.pill:before{content:'';width:5px;height:5px;background:currentColor;border-radius:50%}.pill.warning,.pill.pending,.pill.delayed{background:#fff2da;color:#c98816}.pill.danger,.pill.high,.pill.absent{background:#ffeaea;color:#d74e58}.pill.blue,.pill.in-progress{background:#e9f3ff;color:#216bc4}.hero{background:linear-gradient(130deg,#165f9d,#0d315c);color:white;position:relative;overflow:hidden;border:0}.hero:after{content:'🚌';position:absolute;right:8px;top:25px;font-size:63px;opacity:.75}.hero .eyebrow{font-size:8px;letter-spacing:1.3px;color:#a9daf9;font-weight:800}.hero h2{font:800 18px Manrope;margin:6px 0 4px;max-width:65%}.hero p{font-size:10px;color:#d7edff;max-width:70%;margin:0 0 12px}.hero .pill{background:#ffffff2a;color:white}.hero .pill:before{background:#59e6af}.hero .button{background:white;color:#165b9e;width:auto;position:relative;z-index:2}.row{display:flex;align-items:center;gap:9px}.row.space{justify-content:space-between}.avatar{background:#e2f0ff;color:#2876c6;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 37px}.avatar.large{width:57px;height:57px;flex-basis:57px;font-size:18px}.row-grow{flex:1;min-width:0}.row-grow strong,.row-grow small{display:block}.row-grow strong{font-size:11px}.row-grow small{font-size:9px;color:var(--muted);margin-top:3px}.chevron{font-size:17px;color:#a3b7c8}.button{border:0;background:var(--blue);color:white;border-radius:7px;padding:10px 13px;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:35px}.button.secondary{background:#edf5ff;color:#206fc3}.button.outline{background:white;color:var(--blue);border:1px solid #cfe1f6}.button.danger{background:var(--red)}.button.green{background:var(--green)}.button.block{display:flex;width:100%;margin-top:10px}.button:disabled{opacity:.45;cursor:not-allowed}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.quick{background:white;border:1px solid var(--line);border-radius:9px;padding:10px 7px;min-height:77px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#45637c;font-size:8px;font-weight:800}.quick b{font-size:19px;color:var(--blue)}.quick.red b{color:var(--red)}.quick.green b{color:var(--green)}.list-item{border-top:1px solid #edf2f6;padding:10px 0;display:flex;align-items:center;gap:8px}.list-item:first-of-type{border-top:0}.list-item:last-child{padding-bottom:0}.list-item>div:nth-child(2){flex:1}.list-item strong,.list-item small{display:block}.list-item strong{font-size:10px}.list-item small{font-size:8px;color:var(--muted);margin-top:3px}.list-icon{width:30px;height:30px;border-radius:7px;background:#e9f3ff;color:var(--blue);display:grid;place-items:center;font-size:16px;flex:0 0 30px}.list-icon.green{background:#e8f9f1;color:#18a675}.list-icon.red{background:#fff0f0;color:#df5c64}.list-icon.amber{background:#fff5e3;color:#d99c2b}.divider-title{font-size:9px;letter-spacing:1px;color:#91a5b6;font-weight:800;margin:17px 2px 9px}.timeline{position:relative}.timeline-item{display:flex;gap:10px;position:relative;padding:0 0 17px}.timeline-item:before{content:'';position:absolute;left:10px;top:22px;bottom:0;width:1px;background:#d8e5f1}.timeline-item:last-child:before{display:none}.timeline-dot{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#e9f4ff;color:var(--blue);font-size:9px;font-weight:800;flex:0 0 21px;z-index:1}.timeline-dot.done{background:var(--green);color:white}.timeline-content{flex:1}.timeline-content strong{font-size:10px;display:block}.timeline-content small{font-size:8px;color:var(--muted)}.timeline-content .actions{display:flex;gap:5px;margin-top:8px}.mini-button{border:1px solid #cfe3f6;background:#f3f9ff;color:#216fc5;border-radius:5px;padding:6px 7px;font-size:8px;font-weight:800}.mini-button.red{border-color:#ffe0e0;color:#d3555b;background:#fff5f5}.progress{height:6px;background:#e9eff5;border-radius:10px;overflow:hidden;margin:10px 0}.progress i{display:block;height:100%;background:var(--green);border-radius:10px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 15px}.info-grid span{font-size:8px;color:var(--muted)}.info-grid strong{display:block;margin-top:3px;font-size:10px;color:var(--ink)}.map{height:235px;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(35deg,transparent 44%,#c4def6 44% 46%,transparent 46%),linear-gradient(105deg,transparent 46%,#c5e0f2 46% 48%,transparent 48%),repeating-linear-gradient(0deg,#f0f6f3 0 23px,#ddeee6 24px 25px,#f0f6f3 26px 46px);border:1px solid #dce9e6}.map:before{content:'';position:absolute;width:155%;height:15px;background:#ffffffdc;border-top:1px solid #b6ccd8;border-bottom:1px solid #b6ccd8;top:44%;left:-25%;transform:rotate(-27deg)}.map:after{content:'';position:absolute;width:130%;height:10px;background:#ffffffcf;top:70%;left:-10%;transform:rotate(31deg)}.route-line{position:absolute;width:60%;height:6px;background:#2f85e3;top:49%;left:20%;transform:rotate(-28deg);border-radius:9px;z-index:2;box-shadow:0 0 0 2px white}.map-pin{position:absolute;z-index:3;border:3px solid white;box-shadow:0 2px 5px #214e6959;background:var(--blue);width:29px;height:29px;border-radius:50%;display:grid;place-items:center;color:white;font-size:13px}.map-pin.bus{left:44%;top:39%;background:#216fcd}.map-pin.school{right:18%;top:17%;background:#1aae7b}.map-pin.home{left:19%;bottom:30%;background:#e68843}.map-label{position:absolute;z-index:4;background:white;border-radius:5px;padding:4px 6px;box-shadow:0 2px 5px #13436622;font-size:8px;font-weight:800}.map-label.bus{left:36%;top:28%}.map-label.school{right:6%;top:29%}.map-label.home{left:5%;bottom:20%}.map-pulse{position:absolute;left:43%;top:38%;width:35px;height:35px;border-radius:50%;background:#1978de55;z-index:2;animation:pulse 2s infinite}@keyframes pulse{to{transform:scale(1.7);opacity:0}}.notice{padding:10px;border:1px solid #cfe9db;background:#f0fbf5;border-radius:7px;color:#287b59;font-size:9px;line-height:1.5;margin:10px 0}.notice.warn{background:#fff8e8;border-color:#ffebc1;color:#9d761d}.notice.danger{background:#fff0f0;border-color:#ffd8d8;color:#b94b53}.field{display:block;font-size:9px;color:#6d849a;font-weight:800;margin:12px 0}.field input,.field select,.field textarea{display:block;margin-top:5px;width:100%;background:white;border:1px solid #d8e5f0;border-radius:6px;padding:10px;color:var(--ink);font-size:11px;outline:0}.field textarea{min-height:75px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#2b81df}.check{display:flex;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid #edf2f6;font-size:10px}.check input{width:17px;height:17px;accent-color:var(--green)}.check span{flex:1}.check small{font-size:8px;color:var(--muted)}.check-group{margin-bottom:10px}.bottom{position:fixed;bottom:0;width:min(500px,100%);height:calc(61px + env(safe-area-inset-bottom));background:white;border-top:1px solid #e5ecf3;display:flex;align-items:start;justify-content:space-around;padding:7px 4px env(safe-area-inset-bottom);z-index:30}.bottom button{background:none;border:0;min-width:55px;display:flex;flex-direction:column;align-items:center;gap:3px;color:#9cafbf;font-size:8px;font-weight:800}.bottom button b{font-size:19px;line-height:20px}.bottom button.active{color:var(--blue)}.login-screen{min-height:100vh;background:linear-gradient(160deg,#0e3a63,#0b2850 55%,#f5f8fc 55%);padding:24px 16px}.login-brand{color:white;display:flex;align-items:center;gap:8px;font:800 16px Manrope}.login-brand span{background:#ffc940;color:#12405e;border-radius:6px;width:30px;height:30px;display:grid;place-items:center}.login-intro{color:white;margin:50px 7px 65px}.login-intro h1{font:800 30px/1.12 Manrope;margin:0 0 11px}.login-intro em{font-style:normal;color:#f9d549}.login-intro p{font-size:11px;line-height:1.6;color:#d1e4f4}.login-choice{background:white;border-radius:12px;box-shadow:0 8px 30px #09254a2c;padding:17px;margin-top:-40px}.login-choice h2{font:800 16px Manrope;margin:0 0 4px}.login-choice p{font-size:10px;color:var(--muted);margin:0 0 14px}.login-choice button{width:100%;display:flex;align-items:center;gap:12px;background:white;border:1px solid #e4ebf4;border-radius:8px;padding:13px;text-align:left;margin-top:9px}.login-choice button b{font-size:26px;color:var(--blue)}.login-choice button span{flex:1}.login-choice strong,.login-choice small{display:block}.login-choice strong{font-size:11px}.login-choice small{font-size:9px;color:var(--muted);margin-top:3px}.login-foot{text-align:center;color:#6e8ca6;font-size:9px;margin:20px}.photo-box{border:1px dashed #aecde9;border-radius:8px;padding:12px;text-align:center;background:#f5faff;color:#6b9ac4;font-size:9px;display:block}.photo-box input{display:none}.photo-preview{max-width:100%;max-height:160px;border-radius:6px;margin-top:7px}.chat{height:calc(100vh - 250px);overflow:auto;display:flex;flex-direction:column;gap:8px}.bubble{background:white;border:1px solid #e1eaf3;padding:9px 11px;border-radius:9px 9px 9px 2px;max-width:83%;align-self:start}.bubble.mine{background:#e6f3ff;border-color:#d4e8fb;border-radius:9px 9px 2px 9px;align-self:end}.bubble small{font-size:8px;color:#8ba3b8}.bubble p{margin:4px 0 0;font-size:10px;line-height:1.45}.chat-compose{display:flex;gap:6px;margin-top:10px}.chat-compose input{flex:1;min-width:0;border:1px solid #d8e5f0;border-radius:7px;padding:9px;font-size:10px}.toast{position:fixed;bottom:75px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;background:#143b5e;color:white;padding:9px 12px;border-radius:7px;font-size:10px;z-index:90;box-shadow:0 4px 18px #11324e55}.section-action{display:flex;gap:8px;margin-top:10px}.section-action .button{flex:1}.small-text{font-size:9px;color:var(--muted);line-height:1.5}.full-row{border:0;background:white;text-align:left;width:100%}.screen-footer{text-align:center;font-size:8px;color:#a2b3c3;margin:20px 0 3px}.scan-box{width:190px;height:190px;border:4px solid var(--blue);border-radius:16px;margin:16px auto;position:relative;background:repeating-linear-gradient(0deg,#fff 0 6px,#f1f7ff 6px 12px)}.scan-box:after{content:'';position:absolute;top:45%;left:10px;right:10px;height:2px;background:#1ebc89;box-shadow:0 0 15px #1ebc89;animation:scan 2s infinite}@keyframes scan{50%{top:75%}}.segmented{display:flex;gap:5px;background:#e9f1f8;padding:4px;border-radius:8px;margin-bottom:12px}.segmented button{flex:1;border:0;background:transparent;border-radius:5px;color:#7290a9;padding:7px;font-size:9px;font-weight:800}.segmented button.active{background:white;color:var(--blue);box-shadow:0 1px 4px #133b5b16}