:root{ --u: 1vmin; }
*{box-sizing:border-box}
html,body{height:100%;width:100%;margin:0;overflow:hidden;background:#000}
body{font-family:'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
#bg,#container{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#ui{position:fixed;inset:0;z-index:10;pointer-events:none}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*6);padding:calc(var(--u)*6);opacity:0;visibility:hidden;transition:opacity .5s ease, visibility .5s ease;pointer-events:none}
.screen.show{opacity:1;visibility:visible;pointer-events:auto}

/* Fixed top-left header on Hub & App */
.global-header{position:fixed;top:calc(var(--u)*2);left:calc(var(--u)*2);display:flex;align-items:center;gap:calc(var(--u)*2);z-index:20;pointer-events:auto}
.brand-small{width:calc(var(--u)*24);height:auto;filter:grayscale(1) brightness(0) invert(1);cursor:pointer}
.spacer{width:calc(var(--u)*2)}
.search-wrap{display:flex}
#search{width:min(50vw, calc(var(--u)*80));height:calc(var(--u)*6);border:calc(var(--u)*0.35) solid #fff;background:transparent;color:#fff;font-size:calc(var(--u)*2);padding:0 calc(var(--u)*2);outline:none}

.pad-top{padding-top:calc(var(--u)*16)} /* keeps content clear of the fixed header */

/* One glow system for all buttons */
.btn{transition:border-color .2s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;filter:drop-shadow(0 0 calc(var(--u)*0.5) rgba(255,255,255,.35));box-shadow:0 0 0 calc(var(--u)*0.2) rgba(255,255,255,.35) inset;border-color:rgba(255,255,255,.9)}
.btn:hover,.btn:focus-visible{border-color:#fff;background:rgba(255,255,255,.06);filter:drop-shadow(0 0 calc(var(--u)*1) rgba(255,255,255,.85));box-shadow:0 0 0 calc(var(--u)*0.4) rgba(255,255,255,.9) inset;outline:none}

/* Login */
.brand-center{width:calc(var(--u)*52);height:auto;filter:grayscale(1) brightness(0) invert(1);pointer-events:none}
#login{width:calc(var(--u)*56);max-width:92vw}
#login fieldset{border:calc(var(--u)*0.35) solid #fff;padding:calc(var(--u)*4);background:transparent}
.field{margin:calc(var(--u)*2.4) 0}
#login input{width:100%;height:calc(var(--u)*6.2);padding:0 calc(var(--u)*2);border:calc(var(--u)*0.35) solid #fff;background:transparent;color:#fff;font-size:calc(var(--u)*2);outline:none}
#login input::placeholder{color:rgba(255,255,255,.92)}
#submit{display:block;width:44%;height:calc(var(--u)*6);margin:calc(var(--u)*3) auto 0;color:#fff;background:transparent;border:calc(var(--u)*0.35) solid #fff;font-size:calc(var(--u)*2);cursor:pointer}

/* Back button */
.back{width:calc(var(--u)*6);height:calc(var(--u)*6);border:calc(var(--u)*0.35) solid #fff;background:transparent;color:#fff;display:grid;place-items:center;border-radius:calc(var(--u)*0.8);cursor:pointer}
.back svg{width:70%;height:70%}

/* Hub grid */
#hubScreen{align-items:stretch;justify-content:flex-start;gap:0;padding-left:calc(var(--u)*3);padding-right:calc(var(--u)*3)}
.hub-grid{position:relative;flex:1;min-height:0;overflow:auto;padding:calc(var(--u)*3);display:grid;grid-template-columns:repeat(auto-fill, minmax(calc(var(--u)*22), 1fr));grid-auto-rows:1fr;gap:calc(var(--u)*3);pointer-events:auto}
.tile{aspect-ratio:1/1;border:calc(var(--u)*0.35) solid rgba(255,255,255,.75);background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.2);font-size:calc(var(--u)*2.2);text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.tile .t1{font-weight:700}.tile .t2{opacity:.9}

/* Workspace (chat) */
.workspace{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:calc(var(--u)*2);padding-bottom:calc(var(--u)*10)}
.chat-frame{position:relative;width:min(86vw, calc(var(--u)*130));height:min(80vh, calc(var(--u)*110));border:calc(var(--u)*0.35) solid #fff;display:flex;flex-direction:column;background:transparent}
.model-badge{position:absolute;top:calc(var(--u)*1);right:calc(var(--u)*1);padding:calc(var(--u)*0.7) calc(var(--u)*1.2);border:calc(var(--u)*0.35) solid #fff;background:rgba(0,0,0,.15);font-size:calc(var(--u)*1.6);letter-spacing:.06em}
.chat-scroll{flex:1;overflow:auto;padding:calc(var(--u)*2)}
.composer{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:calc(var(--u)*2);border-top:calc(var(--u)*0.35) solid #fff;padding:calc(var(--u)*1.5) calc(var(--u)*2)}

/* Upload */
.upload{width:calc(var(--u)*6);height:calc(var(--u)*6);border:calc(var(--u)*0.35) solid #fff;color:#fff;display:grid;place-items:center;background:transparent;cursor:pointer}
.upload span{font-size:calc(var(--u)*3);line-height:1;transform:translateY(-4%)}

/* Transparent select */
.model{height:calc(var(--u)*6);background:transparent;color:#fff;border:calc(var(--u)*0.35) solid #fff;padding:0 calc(var(--u)*2);font-size:calc(var(--u)*2);appearance:none;-webkit-appearance:none;-moz-appearance:none}
.model option{background:rgba(0,0,0,.3);color:#fff}

/* Input + send */
.input-wrap{height:calc(var(--u)*6);display:flex;align-items:center;border:calc(var(--u)*0.35) solid #ffffff66}
.prompt{width:100%;height:100%;background:transparent;border:0;color:#fff;font-size:calc(var(--u)*2);padding:0 calc(var(--u)*2);resize:none;outline:none}
.send{width:calc(var(--u)*6);height:calc(var(--u)*6);border:calc(var(--u)*0.35) solid #fff;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.send svg{width:80%;height:80%}

@media (orientation:portrait){
  .hub-grid{grid-template-columns:repeat(auto-fill, minmax(calc(var(--u)*28), 1fr))}
}