/* QOSE Solar System case study — stylesheet. Responsive: phone, tablet and desktop, touch / mouse / keyboard. */
:root{--bg:#02040a;--p:rgba(8,14,28,.88);--ln:rgba(120,170,255,.22);--ac:#5cc8ff;--tx:#dfe9ff;--dim:#8da2c4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:14px/1.35 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lb{position:absolute;transform:translate(-50%,-135%);padding:2px 8px;font-size:12px;border-radius:10px;background:rgba(2,8,20,.6);border:1px solid transparent;color:var(--tx);pointer-events:auto;cursor:pointer;white-space:nowrap}
.lb.on{border-color:var(--ac);color:var(--ac)}
.ic{width:18px;height:18px;margin-right:6px;flex:none;vertical-align:-4px}.ttl .ic{width:22px;height:22px;vertical-align:-6px}
button{display:inline-flex;align-items:center;justify-content:center}
.bar{position:fixed;left:0;right:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--p);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:5;padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
#top{top:0;padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:8px;border-bottom:1px solid var(--ln)}
#bot{bottom:0;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--ln)}
.ttl{font-size:15px;letter-spacing:.3px}.sp{flex:1}.dim{color:var(--dim);font-size:12px}
button,select,input{font:inherit;color:var(--tx);background:rgba(30,50,90,.55);border:1px solid var(--ln);border-radius:8px;min-height:38px;padding:4px 10px}
button{cursor:pointer}button.on{border-color:var(--ac);color:var(--ac)}
input[type=range]{padding:0;min-height:30px;width:120px;accent-color:var(--ac);background:none;border:0}
#chips{display:flex;gap:6px;overflow-x:auto;width:100%;padding-bottom:2px;scrollbar-width:none}#chips::-webkit-scrollbar{display:none}
#chips button{white-space:nowrap;flex:none}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;width:100%}
#info{position:fixed;z-index:6;right:calc(8px + env(safe-area-inset-right));top:var(--topH,52px);margin-top:8px;width:min(330px,calc(100% - 16px));max-height:calc(100% - var(--topH,52px) - var(--botH,120px) - 16px);overflow:auto;background:var(--p);border:1px solid var(--ln);border-radius:12px;padding:10px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#info[hidden]{display:none}
.ih{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-bottom:6px}
#info table{width:100%;border-collapse:collapse}#info td{padding:3px 0;vertical-align:top;border-top:1px solid var(--ln)}#info td:first-child{color:var(--dim);padding-right:10px;white-space:nowrap}
#info p{margin:8px 0 0;color:var(--dim);font-size:12px}
#info{width:min(390px,calc(100% - 16px))}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 8px;padding-bottom:2px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:34px;font-size:13px;padding:2px 10px}
#info ul{margin:6px 0 0;padding-left:18px}#info li{margin:0 0 5px}#info a{color:var(--ac)}#info p.sm{margin:0 0 8px;color:var(--tx);font-size:13px}
@media (max-width:600px){.ttl{font-size:14px}input[type=range]{width:100px}}

/* ---------- Auth gate (same pattern as Echo / CAD Inspector) ---------- */
#auth-gate{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.gate-spinner{width:36px;height:36px;border-radius:50%;border:3px solid rgba(0,194,255,.2);border-top-color:var(--ac);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gate-card{text-align:center;padding:32px;max-width:340px;margin:0 16px;background:var(--p);border:1px solid var(--ln);border-radius:8px}
.gate-mark{font-weight:700;font-size:28px;color:var(--ac);margin-bottom:12px}
.gate-title{font-size:16px;margin-bottom:8px}
.gate-sub{font-size:12px;color:var(--dim);margin-bottom:20px;line-height:1.5}
.gate-btn{display:inline-block;padding:8px 20px;border:1px solid var(--ac);color:var(--ac);text-decoration:none;border-radius:4px;font-size:12px}
#app-root{display:none}
a.btn{display:inline-flex;align-items:center;min-height:38px;padding:4px 10px;border:1px solid var(--ln);border-radius:8px;background:rgba(30,50,90,.55);color:var(--tx);text-decoration:none;font-size:13px}
a.btn:hover{border-color:var(--ac);color:var(--ac)}