/* ===== Hyderabad FYI — styles ===== */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}

/* --- Base --- */
:root{--bg:#03040a;--ink:#e8f4ff;--dim:#7f93ad;--faint:#4a5a70;--cy:#00f0ff;--mg:#ff2bd6;--yl:#ffe600;--lm:#7dff4f;--rd:#ff3b4e;--panel:rgba(6,10,20,.72);color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Rajdhani',sans-serif;font-size:16px;--ft:0px;--fb:0px;--fs:0px}
body.fx{--ft:34px;--fb:34px;--fs:14px}
@media(max-width:520px){body.fx{--ft:30px;--fb:30px;--fs:8px}}
:focus-visible{outline:2px solid var(--yl);outline-offset:2px}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}

/* --- Layout --- */
.stage{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:calc(var(--ft) + 16px) calc(var(--fs) + 18px) calc(var(--fb) + 14px);height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:24px;flex:none}
.hero{text-align:center;margin-bottom:22px;flex:none;margin-top:max(0px,calc(50vh - 200px))} /* pushes the search bar to the vertical centre of the screen */
main,.board{flex:1;min-height:0;display:flex;flex-direction:column}

/* --- Header: logo + controls --- */
.wm{position:relative;display:block;flex:0 0 200px;width:200px;height:70px;overflow:hidden;text-decoration:none}
.wm img{position:absolute;top:-65px;left:0;width:200px;height:200px;max-width:none;mix-blend-mode:screen}
.ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill,.sw{font-family:'Share Tech Mono',monospace;font-size:11.5px;color:var(--dim);background:var(--panel);border:1px solid rgba(0,240,255,.35);padding:7px 11px;display:flex;align-items:center;gap:7px;cursor:pointer;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.pill{cursor:default}
.sw b{color:var(--lm)}
.sw[aria-pressed=false] b{color:var(--faint)}

/* --- Hero + search bar --- */
.sub{color:var(--dim);margin:0 0 28px;font-size:17px}
.hint{margin-top:12px;font-size:14px;color:var(--faint)}
@media(max-height:780px){.sub,.hint{display:none}}
.fxs{position:relative;isolation:isolate;margin-top:12px;padding:2px;border-radius:16px;background:conic-gradient(from var(--a),#00f0ff,#7dff4f,#ffe600,#ff7a1a,#ff2bd6,#8a5cff,#00f0ff);animation:spin 5s linear infinite}
@keyframes spin{to{--a:360deg}}
form{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;background:#050812;border-radius:14px;padding:6px 16px}
form>:not(#astc){position:relative;z-index:1}
#astc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .3s}
form.busy #astc{opacity:0}
.pr{font-family:'Share Tech Mono',monospace;color:var(--cy);font-size:18px}
input[type=text]{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-family:'Share Tech Mono',monospace;font-size:16px;padding:13px 0}
input::placeholder{color:var(--faint)}

/* --- Suggestions dropdown --- */
.sbox{position:relative}
#sg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;margin:0;padding:6px;list-style:none;text-align:left;background:rgba(4,7,16,.97);border:1px solid rgba(0,240,255,.45);max-height:min(46vh,330px);overflow-y:auto;overscroll-behavior:contain;backdrop-filter:blur(8px)}
#sg li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;border-left:3px solid transparent;cursor:pointer;font-size:17px;font-weight:600;color:var(--dim)}
#sg li[aria-selected=true],#sg li:hover{background:rgba(0,240,255,.09);border-left-color:var(--cy);color:var(--ink)}
#sg mark{background:none;color:var(--cy)}
#sg em{font:400 11px 'Share Tech Mono',monospace;color:var(--faint);font-style:normal;white-space:nowrap}
#sg .none,#sg .none:hover{cursor:default;color:var(--faint);font-weight:500;background:none;border-left-color:transparent}

/* --- Tabs (Alerts / Traffic / Weather / Helplines) --- */
.tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.tab{display:block;text-align:center;text-decoration:none;font-family:Orbitron,sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#ff6b78;background:rgba(255,59,78,.07);border:1px solid rgba(255,59,78,.5);box-shadow:inset 0 -2px 0 var(--rd);padding:11px 4px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.tab:hover{color:#fff;border-color:var(--rd);background:rgba(255,59,78,.16)}
@media(max-width:520px){.tab{font-size:9.5px;letter-spacing:1px}}

/* --- Trending board --- */
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 6px 30px;scrollbar-width:thin;scrollbar-color:rgba(0,240,255,.35) transparent;-webkit-mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 28px),transparent)}
.wall{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.wall li{display:contents}
.plate{--c:var(--cy);position:relative;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;background:linear-gradient(135deg,rgba(0,240,255,.09),var(--panel));border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-left:3px solid var(--c);backdrop-filter:blur(6px);transition:transform .15s,box-shadow .15s;animation:in .5s backwards}
.plate::before,.plate::after{content:'';position:absolute;width:7px;height:7px;border:solid var(--c)}
.plate::before{top:-4px;right:-4px;border-width:1px 1px 0 0}
.plate::after{bottom:-4px;right:-4px;border-width:0 1px 1px 0}
.plate:hover{transform:translateY(-2px);box-shadow:0 0 18px -4px var(--c)}
.plate.still{animation:none}
.plate.hit{outline:1px solid var(--yl);outline-offset:3px}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.rk,.ct{font-family:'Share Tech Mono',monospace;font-style:normal;font-weight:400}
.rk{color:var(--c);font-size:.72em}
.ct{color:var(--dim);font-size:.62em}
.t1,.t2{font-size:18px;padding:11px 16px}
.t3,.t4{--c:var(--cy)}
.t3{font-size:16px}
.t4{font-size:14px;padding:7px 11px;color:var(--ink)}
.pin .pi{width:13px;height:13px;color:var(--cy);flex:none}
.pin b{font-weight:600}
.adtag{font:400 8px 'Share Tech Mono',monospace;font-style:normal;color:var(--faint);border:1px solid var(--faint);padding:0 3px;letter-spacing:1px}

/* --- Toast --- */
.toast{position:fixed;left:50%;bottom:calc(var(--fb) + 22px);transform:translate(-50%,16px);opacity:0;z-index:60;background:var(--panel);border:1px solid var(--cy);color:var(--ink);font-family:'Share Tech Mono',monospace;font-size:12.5px;padding:11px 16px;pointer-events:none;transition:.2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* --- Cockpit frame --- */
.cockpit{display:none;position:fixed;inset:0;z-index:50;pointer-events:none}
body.fx .cockpit{display:block}
.win{position:absolute;inset:calc(var(--ft) + env(safe-area-inset-top,0px)) var(--fs) calc(var(--fb) + env(safe-area-inset-bottom,0px));border-radius:26px;border:1px solid rgba(0,240,255,.5);box-shadow:0 0 0 100vmax #05070c,inset 0 0 50px rgba(0,240,255,.16),inset 0 0 0 4px rgba(0,0,0,.5);background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.55)),linear-gradient(115deg,rgba(255,255,255,.06),transparent 28%)}
.bar{position:absolute;left:calc(var(--fs) + 22px);right:calc(var(--fs) + 22px);display:flex;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:2px;color:#5f7da0}
.bar.t{top:calc(env(safe-area-inset-top,0px) + 11px)}
.bar.b{bottom:calc(env(safe-area-inset-bottom,0px) + 11px)}
@media(max-width:520px){.bar{font-size:9px;letter-spacing:1px}.bar i{display:none}}

/* --- Accessibility --- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}