/* Common bar of the InkDOS Hub tools: same colors as InkDOS, no shadows or animations. */
:root{--bg:#f2f5f8;--card:#fff;--text:#192235;--muted:#697486;--border:#e3e8ef;--btn:#f0f2f5;--btn-active:#e3e8ef;--accent:#3fb950}
html[data-theme="dark"]{--bg:#11161c;--card:#1c222a;--text:#edf2f7;--muted:#aab5c3;--border:#323c49;--btn:#252d37;--btn-active:#323c49}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body.ink-app{display:flex;flex-direction:column;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);box-sizing:border-box}
.ink-bar{flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;position:relative;align-items:center;gap:8px;min-height:44px;padding:4px 10px;box-sizing:border-box;background:var(--card);border-bottom:1px solid var(--border);font-size:14px}
.ink-bar a.ink-home{color:var(--text);text-decoration:none;font-weight:700;padding:6px 4px;white-space:nowrap}
.ink-bar .ink-title{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ink-btn{font:inherit;font-size:14px;color:var(--text);background:var(--btn);border:1px solid var(--border);border-radius:8px;padding:6px 11px;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
.ink-btn:active{background:var(--btn-active)}
.ink-btn.on{background:var(--accent);border-color:var(--accent);color:#0d1117}
.ink-main{flex:1;min-height:0;position:relative}
.ink-main>iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:620px){.ink-bar{gap:6px}.ink-btn{padding:6px 9px}}
.ink-ico{width:18px;height:18px;flex:none;vertical-align:-4px}
.ink-btn:has(>.ink-ico:only-child){display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:6px 9px}
.ink-bar a.ink-home{display:inline-flex;align-items:center;gap:2px}
.ink-bar a.ink-home .ink-ico{width:20px;height:20px;margin-left:-4px}
.ink-esq,.ink-dir{display:flex;align-items:center;gap:8px;min-width:0}
.ink-dir{justify-content:flex-end}
.ink-itens{display:flex;align-items:center;gap:8px}
.ink-meio{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.ink-simbolo{width:24px;height:24px;flex:none;border-radius:6px}
.ink-bar .ink-btn.ink-menu{display:none}
.ink-bar .ink-btn.ink-menu[hidden]{display:none!important}
.ink-status[hidden]{display:none}
.ink-bar.compacta .ink-btn.ink-menu{display:inline-flex}
.ink-bar.compacta .ink-itens{display:none;position:absolute;top:calc(100% + 4px);right:8px;z-index:1000;flex-direction:column;align-items:stretch;gap:2px;min-width:200px;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.ink-bar.compacta.menu-aberto .ink-itens{display:flex}
.ink-bar.compacta .ink-itens .ink-btn{display:block;width:100%;box-sizing:border-box;background:transparent;border-color:transparent;text-align:left;padding:9px 10px}
.ink-bar.compacta .ink-itens .ink-btn[hidden],.ink-bar.compacta .ink-itens [hidden]{display:none}
.ink-bar.compacta .ink-itens .ink-btn.on,.ink-bar.compacta .ink-itens .ink-btn[aria-pressed="true"]{background:var(--btn-active);color:var(--text)}
.ink-bar .ink-rotulo{display:none}
.ink-bar.compacta .ink-itens .ink-btn{display:flex;align-items:center;gap:10px}
.ink-bar.compacta .ink-itens .ink-rotulo{display:inline}
.ink-dir>details.i{order:-1}
.ink-bar.compacta .ink-itens .ink-btn:disabled{opacity:.4;cursor:default}
/* "i" in the bar sits at the right edge: its explanation opens toward the left, inside the screen */
.ink-dir details.i.solto .pop{left:auto;right:0}