/* Student app = eappointment user PWA look (shared/styles.css + user.css): navy #0b2545, orange #f26b1d, 430px phone shell, white bars, pill buttons. */
:root{--pmu:#0b2545;--brand:#0b2545;--pmu-light:#e8eef6;--accent:#f26b1d;--accent-light:#fdebdf;--ink:#1c2430;--muted:#6b7280;--line:#e3e8ee;--bg:#f4f6f9;--ok:#1e8e3e;--m-shadow:0 2px 10px rgb(11 37 69 / 8%);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:16px/1.45 system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;color:var(--ink);background:#e9edf2;overscroll-behavior:none}
.shell{position:relative;max-width:430px;min-height:100vh;min-height:100dvh;margin:0 auto;background:var(--bg);box-shadow:0 0 40px rgb(0 0 0 / 12%)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:max(.6rem,env(safe-area-inset-top)) 1rem .6rem;background:#fff;color:var(--pmu);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--pmu);text-decoration:none;font-weight:700;font-size:1.05rem}
.brand img{border-radius:50%;background:#fff;border:2px solid var(--accent)}
.top-actions{display:flex;gap:.4rem}
.chip{border:1px solid var(--pmu);background:#fff;color:var(--pmu);border-radius:999px;padding:.3rem .8rem;font:inherit;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.screen{display:none}
.screen.on{display:block}
#home{padding:1rem 1rem 1.5rem}
.hero{text-align:center;padding:.6rem 0 .2rem}
.hero-name{max-width:280px;width:70%;height:auto}
.hero h1{font-size:1.15rem;font-weight:700;color:var(--pmu);margin:.75rem 0}
.card{background:#fff;border-radius:12px;padding:.85rem 1rem;margin:0 0 .75rem;box-shadow:var(--m-shadow)}
.lbl{font-weight:600;color:var(--brand);display:block;margin-bottom:.35rem}
input[type=search],.sel{width:100%;font:inherit;color:inherit;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:#fff}
input[type=search]:focus,.sel:focus{outline:none;border-color:var(--accent)}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.1rem,1fr));gap:.5rem;margin:.85rem 0 0}
.cats button{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:0;padding:.55rem .1rem .35rem;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--pmu);font:inherit;font-size:.7rem;font-weight:600;line-height:1.15;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.cats .ci{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--pmu-light);color:var(--pmu);transition:background .15s,color .15s}
.cats .ci svg{width:1.3rem;height:1.3rem}
.cats .cl{max-width:100%;text-align:center;overflow-wrap:normal;letter-spacing:-.01em;min-height:2.3em;display:flex;align-items:center}
.cats button:hover{border-color:#c9d3df;box-shadow:0 4px 12px rgb(11 37 69 / 8%)}
.cats button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cats button.on{border-color:var(--accent);background:#fff7f1;color:var(--accent)}
.cats button.on .ci{background:var(--accent);color:#fff}
.results{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
.results .rh{font-size:.8rem;font-weight:600;color:var(--muted);padding:.1rem .2rem}
.results .muted{padding:.6rem .2rem;color:var(--muted)}
.results .res{width:100%;display:flex;align-items:center;gap:.7rem;padding:.6rem .65rem;border:1px solid var(--line);border-radius:14px;background:#fff;color:inherit;font:inherit;text-align:start;cursor:pointer;box-shadow:0 2px 8px rgb(11 37 69 / 6%);transition:border-color .15s,box-shadow .15s,transform .1s}
.results .res:hover{border-color:var(--accent);box-shadow:0 6px 16px rgb(11 37 69 / 10%)}
.results .res:active{transform:scale(.985)}
.results .res:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.results img{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:none}
.results .ico{width:46px;height:46px;border-radius:12px;background:var(--pmu-light);color:var(--pmu);display:grid;place-items:center;flex:none}
.results .ico svg{width:1.4rem;height:1.4rem}
.results .rt{flex:1;min-width:0}
.results b{display:block;color:var(--pmu)}
.results small{color:var(--muted)}
.results .go{display:inline-flex;align-items:center;gap:.3rem;flex:none;padding:.45rem .8rem;border-radius:999px;background:var(--accent);color:#fff;font-size:.85rem;font-weight:700}
.results .go svg{width:1rem;height:1rem}
[dir=rtl] .results .go svg{transform:scaleX(-1)}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.row .sel{flex:1;min-width:10rem}
.from{margin:.2rem 0 .3rem}
.from.set{color:var(--ok);font-weight:600}
.here{display:flex;gap:.45rem;align-items:flex-start;margin:.25rem 0 .35rem;font-size:.92rem;font-weight:600}.here svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.1rem}
.gmap{display:block;text-align:center;margin:.5rem 0;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--pmu);border-radius:999px;padding:.6rem 1.1rem;font:inherit;font-weight:700;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;background:var(--pmu);color:#fff;cursor:pointer}
[dir=rtl] .btn{letter-spacing:0}
.btn.big{padding:.85rem 1.2rem;font-size:.9rem}
.btn.accent{background:var(--accent);border-color:var(--accent)}
.btn.sec{background:#fff;color:var(--pmu)}
.btn:disabled{opacity:.5}
.muted{color:var(--muted)}
.center{text-align:center}
.dark{position:fixed;top:0;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;z-index:40;background:#000;color:#fff;overflow:hidden}
.dark video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;left:50%;top:45%;width:65vmin;height:65vmin;transform:translate(-50%,-50%);border:3px solid var(--accent);border-radius:18px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.scan-hint{position:absolute;left:0;right:0;bottom:22%;text-align:center;font-weight:600}
.floating{position:absolute;left:50%;bottom:calc(2rem + var(--safe-b));transform:translateX(-50%)}
#nav.on{position:fixed;top:57px;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;display:flex;flex-direction:column}
.map{flex:1;position:relative;background:#e9edf2;overflow:hidden;touch-action:none}
.map svg{width:100%;height:100%}
.floor-tabs{position:absolute;top:.6rem;inset-inline:.6rem;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem;z-index:5;pointer-events:none}
.floor-tabs button{pointer-events:auto;box-shadow:var(--m-shadow)}
.floor-tabs button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.3rem .55rem;font:inherit;font-size:.85rem;cursor:pointer}
.floor-tabs button{color:var(--pmu)}
.floor-tabs button.on{background:var(--pmu);color:#fff}
.floor-tabs button.route{border-color:var(--accent)}
.sheet{background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -3px 12px rgba(0,0,0,.12);padding:.4rem 1rem calc(.8rem + var(--safe-b));max-height:55vh;overflow:auto}
.sheet.min .steps,.sheet.min #summary,.sheet.min #endBtn{display:none}
.handle{width:42px;height:5px;border-radius:3px;background:#cbd3dc;margin:.2rem auto .6rem;cursor:pointer}
.cur{display:flex;gap:.8rem;align-items:center}
.step-icon{width:52px;height:52px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1.7rem;flex:none}
.step-text{font-size:1.15rem;font-weight:700}
.clip{width:100%;max-height:28vh;border-radius:10px;background:#000;margin-top:.6rem}
.nav-btns{justify-content:space-between}
.nav-btns #camBtn{flex:1}
.steps{padding-inline-start:1.3rem;margin:.6rem 0}
.steps li{padding:.3rem 0;cursor:pointer}
.steps li.on{color:var(--accent);font-weight:700}
.steps li.done{color:var(--muted)}
.arrow{position:absolute;left:50%;top:50%;width:46vmin;height:46vmin;transform:translate(-50%,-50%);transition:transform .25s ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.arrow path{fill:var(--accent);stroke:#fff;stroke-width:3}
.arrow.lost path{fill:#9aa5b1}
.g-top{position:absolute;top:0;left:0;right:0;padding:max(1rem,env(safe-area-inset-top)) 1rem 1rem;background:linear-gradient(rgba(11,37,69,.92),rgba(11,37,69,.55));text-align:center}
.g-text{font-size:1.3rem;font-weight:700}
.g-sub{opacity:.85}
.g-bot{position:absolute;bottom:0;left:0;right:0;padding:1rem 1rem calc(1rem + var(--safe-b));background:linear-gradient(transparent,rgba(0,0,0,.75))}
.g-bot .row{justify-content:center}
.g-conf{height:6px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.g-conf span{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}
.g-status{text-align:center;margin:.4rem 0;font-size:.95rem}
.toast{position:fixed;left:50%;bottom:calc(1.2rem + var(--safe-b));transform:translateX(-50%);z-index:60;background:#14202c;color:#fff;padding:.6rem 1rem;border-radius:10px;max-width:90vw}
.p-edge{stroke:#b8c2cd;fill:none}
.p-route{stroke:var(--accent);fill:none;stroke-linecap:round;stroke-linejoin:round}
.p-done{stroke:#9aa5b1}
.p-me{fill:#1a73e8;stroke:#fff}
.p-dest{fill:var(--pmu);stroke:#fff}
.p-label{fill:#14202c;paint-order:stroke;stroke:#fff;stroke-width:3px;font-weight:600}
.search-wrap{position:relative}
.search-wrap input{padding-inline-end:3rem}
.mic{position:absolute;top:50%;inset-inline-end:.35rem;transform:translateY(-50%);width:2.4rem;height:2.4rem;border-radius:50%;border:0;background:var(--pmu-light);color:var(--pmu);display:grid;place-items:center;cursor:pointer}
.mic.on{background:var(--accent);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(242 107 29 / 50%)}100%{box-shadow:0 0 0 14px rgb(242 107 29 / 0%)}}

.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
#muteBtn{display:inline-grid;place-items:center;padding:.3rem .55rem}
#muteBtn .v-off,#muteBtn.off .v-on{display:none}
#muteBtn.off .v-off{display:inline}
#muteBtn.off{background:#fff;color:var(--muted);border-color:var(--line)}
#muteBtn:not(.off){background:var(--accent);border-color:var(--accent);color:#fff}
.card.attn{animation:attn 1.6s ease 2;border-color:var(--accent)}
@keyframes attn{0%,100%{box-shadow:0 0 0 0 rgb(242 107 29 / 0%)}40%{box-shadow:0 0 0 6px rgb(242 107 29 / 35%)}}