:root{
  --bg:#030912; --panel:rgba(5,15,28,.84); --line:rgba(46,230,255,.28);
  --acc:#2ee6ff; --acc2:#8a5cff; --txt:#cfeaf7; --dim:#6f8da3;
  --ok:#2ef2c4; --info:#ffc233; --warn:#ff7a2e; --alarm:#ff2e6e; --off:#5b6b7c;
  --k:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--txt);font-family:'Rajdhani',sans-serif;font-size:15px;overflow:hidden}
.mono{font-family:'Share Tech Mono',monospace}
.orb-font{font-family:'Orbitron',sans-serif;letter-spacing:.08em}
#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{background:rgba(3,9,18,.6)!important;color:var(--dim)!important;font-size:10px}
.maplibregl-ctrl-attrib a{color:var(--dim)!important}

/* ---------- overlays ---------- */
#fx,#flow{position:absolute;inset:0;pointer-events:none;z-index:1}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 55% 50%,transparent 45%,rgba(2,6,14,.75) 100%),
             linear-gradient(to bottom,rgba(3,9,18,.8),transparent 14%,transparent 86%,rgba(3,9,18,.7))}
#scan{position:absolute;left:0;right:0;height:140px;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,transparent,rgba(46,230,255,.07) 70%,rgba(46,230,255,.22) 99%,transparent);
  top:0;will-change:transform;animation:scan 9s linear infinite}
@keyframes scan{from{transform:translateY(-140px)}to{transform:translateY(100vh)}}
#lines{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}

/* ---------- panels ---------- */
.panel{position:absolute;z-index:10;background:var(--panel);  border:1px solid var(--line);box-shadow:0 0 40px rgba(46,230,255,.08),inset 0 0 30px rgba(46,230,255,.04)}
.panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--acc);pointer-events:none;filter:drop-shadow(0 0 4px var(--acc))}
.panel::before{left:-2px;top:-2px;border-right:0;border-bottom:0}
.panel::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.cap{font-family:'Orbitron';font-size:10px;letter-spacing:.22em;color:var(--acc);text-transform:uppercase}

/* header */
#top{left:12px;right:12px;top:12px;height:46px;display:flex;align-items:center;padding:0 18px;gap:26px}
#logo{display:flex;align-items:center;gap:12px}
#logo svg{width:26px;height:26px;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#logo h1{white-space:nowrap;font:900 15px 'Orbitron';letter-spacing:.2em;color:#fff;text-shadow:0 0 12px var(--acc)}
#logo h1 span{color:var(--acc)}
.stat{display:flex;align-items:baseline;gap:8px}
.stat b{font:700 20px 'Orbitron';color:#fff}
.stat small{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.sp{flex:1}
#live{display:flex;align-items:center;gap:8px;font:700 11px 'Orbitron';letter-spacing:.2em;color:var(--ok)}
#live i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
#clock{font:400 17px 'Share Tech Mono';color:var(--acc);text-shadow:0 0 8px var(--acc);min-width:150px;text-align:right}

/* left */
#left{left:12px;top:70px;bottom:12px;width:330px;display:flex;flex-direction:column;padding:14px 0 0}
#netw{display:flex;gap:14px;align-items:center;padding:0 16px 12px;border-bottom:1px solid var(--line)}
#radar{position:relative;width:104px;height:104px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:radial-gradient(circle,rgba(46,230,255,.1),transparent 70%)}
#radar::before{content:"";position:absolute;inset:25%;border:1px solid var(--line);border-radius:50%}
#radar::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);box-shadow:0 0 0 0 transparent}
#radar .h{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
#sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 270deg,rgba(46,230,255,.5) 360deg);animation:spin 4s linear infinite}
.blip{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);opacity:.35;animation:blip 4s linear infinite}
@keyframes blip{0%{opacity:1;transform:scale(1.8)}30%{opacity:.35;transform:scale(1)}100%{opacity:.35}}
#sum{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
#sum div{line-height:1.05}
#sum b{display:block;font:700 20px 'Orbitron';color:var(--c,#fff);text-shadow:0 0 10px var(--c,transparent)}
#sum small{font-size:11px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
#chips{display:flex;gap:6px;padding:10px 16px 8px}
.chip{flex:1;text-align:center;padding:5px 0;font:600 11px 'Orbitron';letter-spacing:.12em;color:var(--dim);border:1px solid rgba(46,230,255,.18);cursor:pointer;transition:.2s}
.chip:hover{color:#fff;border-color:var(--acc)}
.chip.on{color:#02121a;background:var(--acc);border-color:var(--acc);box-shadow:0 0 14px rgba(46,230,255,.5)}
#list{flex:1;overflow-y:auto;padding:2px 10px 8px 16px;scrollbar-width:thin;scrollbar-color:var(--acc) transparent}
.card{position:relative;display:grid;grid-template-columns:12px 1fr 74px 62px;align-items:center;gap:8px;padding:8px 10px;margin-bottom:5px;
  background:linear-gradient(90deg,rgba(46,230,255,.06),transparent);border-left:2px solid var(--c);cursor:pointer;transition:.25s;
  animation:cardIn .6s both}
@keyframes cardIn{from{opacity:0;transform:translateX(-20px)}}
.card:hover,.card.sel{background:linear-gradient(90deg,rgba(46,230,255,.2),rgba(46,230,255,.02));transform:translateX(4px)}
.card.sel{box-shadow:inset 0 0 0 1px var(--acc),0 0 18px rgba(46,230,255,.25)}
.card .dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);animation:blink 2s infinite}
.card .nm b{display:block;font-weight:700;font-size:16px;color:#fff;line-height:1}
.card .nm small{font-size:12px;color:var(--dim)}
.card .v{text-align:right;line-height:1}
.card .v b{font:400 18px 'Share Tech Mono';color:var(--c)}
.card .v small{display:block;font-size:10px;color:var(--dim);letter-spacing:.1em}
.card canvas{width:74px;height:28px}
#log{height:116px;border-top:1px solid var(--line);padding:8px 16px;font:400 11px/1.5 'Share Tech Mono';color:var(--dim);overflow:hidden;position:relative}
#log .cap{display:block;margin-bottom:3px}
#log p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:logIn .5s}
#log p b{color:var(--acc);font-weight:400}
#log p i{color:var(--ok);font-style:normal}
@keyframes logIn{from{opacity:0;transform:translateX(-10px);color:#fff}}

/* controls */
#ctl{right:12px;top:70px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;width:206px}
.btn{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;font:600 11px 'Orbitron';letter-spacing:.12em;
  border:1px solid rgba(46,230,255,.25);color:var(--txt);cursor:pointer;background:rgba(46,230,255,.04);transition:.2s;user-select:none}
.btn:hover{border-color:var(--acc);box-shadow:0 0 14px rgba(46,230,255,.35);color:#fff}
.btn em{font-style:normal;color:var(--dim)}
.btn.on em{color:var(--ok);text-shadow:0 0 8px var(--ok)}
#ctl label{display:block;font:600 10px 'Orbitron';letter-spacing:.16em;color:var(--dim);margin-bottom:5px}
input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:rgba(46,230,255,.3);outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:16px;background:var(--acc);box-shadow:0 0 12px var(--acc);cursor:pointer}
#legend{display:grid;gap:4px;padding-top:6px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
#legend span{display:flex;align-items:center;gap:8px}
#legend i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}

/* drawer */
#drawer{left:354px;right:12px;bottom:12px;height:318px;max-height:calc(100vh - 80px);display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:116px 1fr 232px;gap:0;
  transform:translateY(calc(100% + 30px));opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s}
#drawer.open{transform:none;opacity:1}
#dhead{position:absolute;left:18px;right:18px;top:10px;display:flex;align-items:center;gap:14px}
#dhead h2{font:900 20px 'Orbitron';letter-spacing:.14em;color:#fff;text-shadow:0 0 14px var(--c)}
#dhead small{color:var(--dim);font-size:14px;letter-spacing:.06em}
#dstat{font:700 11px 'Orbitron';letter-spacing:.14em;padding:3px 10px;color:var(--c);border:1px solid var(--c);box-shadow:0 0 12px -2px var(--c)}
#dx{width:28px;height:28px;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--acc);font-size:16px;transition:.2s}
#dx:hover{background:var(--acc);color:#000}
#gaugeWrap{position:relative;min-height:0;overflow:hidden}
#gauge{position:absolute;left:18px;top:54px;bottom:14px;width:90px;height:calc(100% - 68px)}
#chartWrap{position:relative;min-width:0;min-height:0;overflow:hidden}
#chartBox{position:absolute;left:14px;right:14px;top:80px;bottom:10px}
#tabs{position:absolute;left:52px;top:46px;display:flex;gap:4px}
#tabs div{padding:4px 12px;font:600 11px 'Orbitron';letter-spacing:.1em;color:var(--dim);border:1px solid rgba(46,230,255,.18);cursor:pointer;transition:.2s}
#tabs div:hover{color:#fff}
#tabs div.on{background:var(--acc);color:#001018;border-color:var(--acc);box-shadow:0 0 12px rgba(46,230,255,.5)}
#chart{position:absolute;left:0;top:0;width:100%;height:100%;display:block;cursor:crosshair}
#dstats{padding:50px 18px 14px 6px;display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;align-content:start}
#big{grid-column:1/3;line-height:1}
#big b{font:400 48px 'Share Tech Mono';color:var(--c);text-shadow:0 0 22px var(--c)}
#big small{font:600 13px 'Orbitron';color:var(--dim);margin-left:6px}
#trend{grid-column:1/3;font:600 14px 'Rajdhani';color:var(--dim);margin-top:-4px}
.kv{border-left:2px solid var(--line);padding-left:8px;line-height:1.1}
.kv small{display:block;font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.kv b{font:400 18px 'Share Tech Mono';color:#fff}

/* tooltip */
#tip{position:fixed;z-index:30;pointer-events:none;width:230px;padding:12px 14px;background:rgba(4,12,24,.94);
  border:1px solid var(--c);box-shadow:0 0 28px -4px var(--c);opacity:0;transform:translate(-50%,-100%) translateY(-8px) scale(.94);transition:opacity .18s,transform .18s}
#tip.show{opacity:1;transform:translate(-50%,-100%) translateY(-8px)}
#tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:#04101e;border-right:1px solid var(--c);border-bottom:1px solid var(--c);transform:rotate(45deg)}
#tip h3{font:700 15px 'Orbitron';letter-spacing:.1em;color:#fff}
#tip .rv{font-size:13px;color:var(--dim);margin-bottom:6px}
#tip .row{display:flex;justify-content:space-between;align-items:flex-end}
#tip .val{font:400 34px/1 'Share Tech Mono';color:var(--c);text-shadow:0 0 14px var(--c)}
#tip .val small{font-size:13px;color:var(--dim);margin-left:3px}
#tip .st{font:700 10px 'Orbitron';letter-spacing:.12em;color:var(--c)}
#tip canvas{width:100%;height:34px;margin-top:8px}
#tip .ft{display:flex;justify-content:space-between;font:400 11px 'Share Tech Mono';color:var(--dim);margin-top:4px}
#tip .hint{color:var(--acc)}

/* markers */
.ground{width:0;height:0;position:relative;pointer-events:none}
.ground .r{position:absolute;left:0;top:0;width:calc(120px*var(--k));height:calc(120px*var(--k));border-radius:50%;border:1.5px solid var(--c);
  transform:translate(-50%,-50%) scale(0);opacity:0;will-change:transform,opacity;
  animation:ring var(--spd,3s) cubic-bezier(.15,.6,.3,1) infinite}
.ground .r2{animation-delay:calc(var(--spd,3s)/-2)}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(0);opacity:.95}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.ground .core{position:absolute;left:0;top:0;width:calc(14px*var(--k));height:calc(14px*var(--k));margin:calc(-7px*var(--k));border-radius:50%;
  background:var(--c);box-shadow:0 0 10px 3px var(--c)}
.ground .ret{position:absolute;left:0;top:0;width:calc(90px*var(--k));height:calc(90px*var(--k));margin:calc(-45px*var(--k));opacity:0;transition:opacity .4s;animation:spin 6s linear infinite}
.ground.sel .ret{opacity:1}
.ground.off .r{animation:none;opacity:0}
.beacon{width:90px;cursor:pointer;pointer-events:none}
.beacon .hit{position:absolute;left:50%;top:6px;bottom:0;width:34px;margin-left:-17px;pointer-events:auto}
.beacon .pillar{position:absolute;left:50%;top:30px;bottom:0;width:2px;margin-left:-1px;pointer-events:none;
  background:linear-gradient(to top,transparent,var(--c) 80%);box-shadow:0 0 6px var(--c)}
.beacon .orb{position:absolute;left:50%;top:22px;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;transition:transform .25s;
  background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,transparent 78%);box-shadow:0 0 10px 2px var(--c)}
.beacon:hover .orb,.beacon.sel .orb{transform:scale(1.7)}
.beacon:hover .pillar{width:3px;margin-left:-1.5px;box-shadow:0 0 22px var(--c)}
.beacon .lbl{position:absolute;left:50%;top:-8px;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font:600 12px 'Rajdhani';letter-spacing:.05em;color:#fff;text-shadow:0 0 3px #000;display:flex;gap:6px;align-items:baseline}
.beacon .lbl .val{font:400 12px 'Share Tech Mono';color:var(--c)}
.beacon.off{filter:grayscale(1);opacity:.7}

/* boot */
#boot{position:fixed;inset:0;z-index:100;background:#02060d;display:grid;place-items:center;transition:opacity 1s .2s,visibility 0s 1.3s}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
#boot .in{width:min(520px,80vw)}
#boot h1{font:900 34px 'Orbitron';letter-spacing:.3em;color:#fff;text-shadow:0 0 24px var(--acc);margin-bottom:6px}
#boot .tx{font:400 13px/1.8 'Share Tech Mono';color:var(--acc);min-height:110px;margin:14px 0}
#boot .bar{height:3px;background:rgba(46,230,255,.18)}
#boot .bar i{display:block;height:100%;width:0;background:var(--acc);box-shadow:0 0 14px var(--acc);transition:width .3s}

@media (max-width:1100px){#dId{display:none}#top .stat:nth-of-type(n+3){display:none}#ctl{display:none}#drawer{grid-template-columns:1fr 200px}#gaugeWrap{display:none}}
@media (max-width:760px){#left{display:none}#drawer{left:12px}#top .stat{display:none}}

/* ---------- ergänzt für die Live-Version ---------- */
#live.sim{color:var(--info)} #live.sim i{background:var(--info);box-shadow:0 0 10px var(--info)}
#live.off{color:var(--alarm)} #live.off i{background:var(--alarm);box-shadow:0 0 10px var(--alarm)}
#sensors{position:absolute;left:52px;right:14px;top:80px;display:none;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#chartWrap.has-sensors #sensors{display:flex}
#chartWrap.has-sensors #chartBox{top:116px}
#sensors div{flex:none}
#sensors div{padding:4px 9px;font:600 10px 'Orbitron';letter-spacing:.08em;color:var(--dim);border:1px solid rgba(46,230,255,.18);cursor:pointer;transition:.2s}
#sensors div:hover{color:#fff}
#sensors div.on{color:#001018;background:var(--acc2);border-color:var(--acc2);box-shadow:0 0 12px rgba(138,92,255,.5)}
#sensors div small{font:400 9px 'Share Tech Mono';opacity:.7;margin-left:4px}
#chartMsg{position:absolute;inset:90px 14px 36px 46px;display:grid;place-items:center;font:600 12px 'Orbitron';letter-spacing:.2em;color:var(--dim);pointer-events:none;opacity:0;transition:opacity .3s}
#chartMsg.show{opacity:1}
.card.nopos{opacity:.75}
.card.nopos .nm small::after{content:" · ohne Position";color:var(--info)}
.beacon.ping .orb{animation:orbping 1.2s ease-out}
@keyframes orbping{0%{transform:scale(3.2);filter:brightness(2.4)}100%{transform:scale(1)}}
#dnote{grid-column:1/3;font:400 11px 'Share Tech Mono';color:var(--dim);line-height:1.35}
#dnote b{color:var(--info);font-weight:400}
.card:focus-visible,.chip:focus-visible,.btn:focus-visible,#dx:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){#scan{display:none}.ground .r,.card .dot,#sweep,#logo svg{animation:none}}

.far .beacon:not(:hover):not(.sel) .lbl{opacity:0}
.beacon .lbl{transition:opacity .3s}

#toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-12px);z-index:40;padding:8px 18px;font:600 12px 'Orbitron';letter-spacing:.1em;color:var(--info);
  background:rgba(4,12,24,.92);border:1px solid var(--info);box-shadow:0 0 22px -4px var(--info);opacity:0;pointer-events:none;transition:.35s}
#toast.show{opacity:1;transform:translate(-50%,0)}


/* ---------- Mobile (Telefon) ---------- */
html{-webkit-tap-highlight-color:transparent}
#sheetBar,#ctlBtn{display:none}
@media (max-width:1100px){   /* Tablet: Steuerung per Zahnrad statt festem Panel */
  #ctlBtn{display:grid;place-items:center;position:fixed;right:12px;top:70px;width:38px;height:38px;z-index:13;font-size:18px;color:var(--acc);cursor:pointer}
  #ctl.show{display:flex;top:116px;z-index:13}
}
@media (max-width:760px){
  #top{left:8px;right:8px;top:max(8px,env(safe-area-inset-top));height:42px;padding:0 12px;gap:10px}
  #logo{gap:8px;min-width:0}
  #logo svg{width:20px;height:20px}
  #logo h1{font-size:12px;letter-spacing:.12em}
  #logo h1 span+span{display:none}
  #top .stat,#clock{display:none}
  #live{font-size:9px;letter-spacing:.1em;white-space:nowrap;gap:6px}

  /* Stationsliste = Bottom-Sheet */
  #left{display:flex;left:0;right:0;top:auto;bottom:0;width:auto;height:min(64vh,520px);padding:0;
    transform:translateY(calc(100% - 52px - env(safe-area-inset-bottom)));transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:12}
  #left.open{transform:none}
  #sheetBar{display:flex;align-items:center;gap:10px;flex:none;height:52px;padding:0 16px;border-bottom:1px solid var(--line);cursor:pointer;
    font:700 11px 'Orbitron';letter-spacing:.18em;color:var(--acc)}
  #sheetBar b{font:700 15px 'Orbitron';color:#fff}
  #sheetBar em{font-style:normal;font:600 11px 'Orbitron';color:var(--info);letter-spacing:.08em}
  #sheetBar i{margin-left:auto;font-style:normal;font-size:16px;transition:transform .4s}
  #left.open #sheetBar i{transform:rotate(180deg)}
  #netw,#log{display:none}
  #chips{padding:8px 12px 6px}
  #list{padding:2px 14px 8px 12px}
  .card{grid-template-columns:12px 1fr 64px 58px;gap:6px;padding:8px}
  .card canvas{width:64px}
  body.drawer-open .maplibregl-ctrl-bottom-right,body.drawer-open .maplibregl-ctrl-bottom-left{display:none}
  body.drawer-open #ctlBtn{display:none}

  /* Darstellung per Zahnrad */
  #ctlBtn{display:grid;place-items:center;position:fixed;right:8px;top:calc(max(8px,env(safe-area-inset-top)) + 50px);width:38px;height:38px;z-index:13;font-size:18px;color:var(--acc);cursor:pointer}
  #ctl{display:none;right:8px;top:calc(max(8px,env(safe-area-inset-top)) + 94px);width:210px;z-index:13}
  #ctl.show{display:flex}
  #legend{display:none}

  /* Verlauf = Bottom-Sheet über der Liste */
  #drawer{left:0;right:0;bottom:0;height:min(66vh,540px);max-height:none;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);z-index:14}
  #dhead{left:12px;right:12px;top:8px;gap:8px}
  #dhead h2{font-size:14px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #dhead small{display:none}
  #dstat{font-size:9px;padding:2px 7px;white-space:nowrap}
  #dstats{order:1;padding:44px 14px 6px;grid-template-columns:repeat(4,1fr);gap:6px 8px;align-content:start}
  #big{grid-column:1/3}
  #big b{font-size:34px}
  #big small{font-size:11px}
  #trend{grid-column:3/5;align-self:end;font-size:13px}
  .kv b{font-size:15px}
  #dnote{grid-column:1/5;font-size:10px}
  #chartWrap{order:2}
  #tabs{left:12px;top:2px}
  #tabs div{padding:4px 10px}
  #sensors{left:12px;right:12px;top:36px}
  #chartBox{left:8px;right:8px;top:38px;bottom:8px}
  #chartWrap.has-sensors #chartBox{top:74px}
  #chartMsg{inset:50px 10px 20px 10px}

  /* Karte & Sonstiges */
  .maplibregl-ctrl-bottom-right{bottom:62px}
  .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-attrib{font-size:9px}
  #toast{top:56px;max-width:90vw;text-align:center;font-size:10px}
  #tip{display:none}
  #boot h1{font-size:22px;letter-spacing:.2em}
  #boot .in{width:84vw}
}
@media (max-width:760px) and (max-height:500px){   /* Querformat am Telefon */
  #left{height:80vh}
  #drawer{height:84vh}
}

.btn{white-space:nowrap}
.btn em{margin-left:8px}
@media (max-width:760px){#bQual em{font-size:10px}}