html,body{margin:0;height:100%;overflow:hidden;background:#101418;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#e8ecf0;touch-action:none}
#c{display:block;width:100%;height:100%}
.hidden{display:none!important}
#title{position:fixed;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top)) 12px 8px;background:linear-gradient(to bottom,rgba(10,13,17,.9),transparent);pointer-events:none}
#title h1{margin:0;font-size:15px;font-weight:700}
#title p{margin:3px 0 0;font-size:12px;color:#aab4be}
#ui{position:fixed;left:0;right:0;bottom:0;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(10,13,17,.97),rgba(10,13,17,.7) 70%,transparent);pointer-events:none}
.row{display:flex;gap:6px;overflow-x:auto;pointer-events:auto;margin-bottom:8px;padding-bottom:2px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
button{border:1px solid #3a4652;background:#1b232b;color:#e8ecf0;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;white-space:nowrap;flex:0 0 auto}
button.on{background:#e8731a;border-color:#e8731a;color:#fff}
button:disabled{opacity:.5}
.askrow{display:flex;gap:6px;pointer-events:auto;margin-bottom:6px}
.askrow input{flex:1;min-width:0;border:1px solid #3a4652;background:#0e1317;color:#fff;border-radius:10px;padding:10px 12px;font-size:16px}
.askrow #bMic{font-size:18px;padding:6px 10px}
.askrow #bMic.rec{background:#c0392b;border-color:#c0392b}
.hint{font-size:11px;color:#8894a0;pointer-events:auto}
.hint a{color:#aab4be}
#status{pointer-events:auto;background:#1b232b;border:1px solid #3a4652;border-left:4px solid #e8731a;border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:8px;white-space:pre-wrap}
#status.err{border-left-color:#c0392b}
#status.busy{border-left-color:#3a7bd5}
.panel{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,13,17,.96);overflow:auto;padding:calc(16px + env(safe-area-inset-top)) 16px 60px;font-size:14px;line-height:1.45;z-index:5}
.panel h2{font-size:16px;margin:14px 0 8px}
.panel table{border-collapse:collapse;width:100%;font-size:13px}
.panel td{padding:5px 4px;border-bottom:1px solid #2a343e;vertical-align:top}
.panel td:first-child{color:#aab4be;white-space:nowrap}
.panel .close{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px}
.muted{color:#aab4be;font-size:13px}
.hitem{display:block;width:100%;text-align:left;margin:6px 0;padding:10px;border-radius:10px}
.hitem small{display:block;color:#aab4be;font-weight:400;margin-top:3px;white-space:normal}
.overlay{position:fixed;inset:0;background:#101418;display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}
.card{width:100%;max-width:380px;background:#171d23;border:1px solid #2a343e;border-radius:16px;padding:22px}
.card h2{margin:6px 0 4px;font-size:18px}
.logo{font-size:40px;text-align:center}
.big{display:block;width:100%;padding:14px;font-size:16px;border-radius:12px;background:#e8731a;border-color:#e8731a;color:#fff;margin:14px 0 10px}
.big.secondary{background:#1b232b;border-color:#3a4652;color:#e8ecf0}
.card input{display:block;width:100%;box-sizing:border-box;margin:8px 0;border:1px solid #3a4652;background:#0e1317;color:#fff;border-radius:10px;padding:12px;font-size:16px}
details summary{cursor:pointer;color:#aab4be;font-size:13px;margin-top:6px}
.msg{min-height:1.2em;font-size:13px;color:#ffb3a7}

#planSvg{background:#fff;border-radius:10px;padding:8px;overflow:auto}
#planSvg svg{width:100%;height:auto;max-height:80vh;display:block}
#planList{background:#0e1317;border:1px solid #2a343e;border-radius:8px;padding:10px;font-size:12px;white-space:pre-wrap;color:#dfe5ea}
@media print{
  body{background:#fff;overflow:visible}
  #c,#title,#ui,#info,#hist,#login,.close,#planActions,#planList+*{display:none!important}
  #plan{position:static;display:block!important;background:#fff;color:#000;padding:0;overflow:visible}
  #plan h2{color:#000}
  #planSvg{padding:0}
  #planList{background:#fff;color:#000;border:1px solid #999}
}