:root {
  color-scheme: dark;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  background: #0b1020;
  color: #edf2ff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background:
    radial-gradient(ellipse at 13% -8%, rgba(66, 91, 178, .25), transparent 37%),
    radial-gradient(ellipse at 95% 0%, rgba(30, 145, 169, .12), transparent 29%),
    #0b1020;
}
button { font: inherit; }
.app-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 19px 22px 12px; gap: 14px; }
.topbar { height: 58px; flex: 0 0 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 13px;
  background: #192238; box-shadow: 0 8px 24px #465cbe42;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
h1 { margin: 0; font-size: 18px; letter-spacing: -.35px; }
h1 span { color: #8fa6ff; font-weight: 600; }
.brand p { margin: 3px 0 0; color: #8490aa; font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.session-badge { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #27314a; border-radius: 9px; background: #121a2a; color: #aebbd4; font-size: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #56d9a4; box-shadow: 0 0 11px #56d9a4aa; }
.button { height: 36px; border: 1px solid #34405c; border-radius: 9px; background: #1a2335; color: #dbe4f9; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.button:hover { border-color: #5f73ad; background: #242f48; }
.button:active, .control-button:active { transform: scale(.97); }
.button-subtle { padding: 0 12px; font-size: 13px; }
.button-subtle span { margin-left: 5px; }
.button-subtle.active { border-color: #5368a9; background: #253153; color: #dfe7ff; }
.panel-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; }
.panel-card { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #29344c; border-radius: 13px; background: #111827; box-shadow: 0 8px 26px #0003; }
.panel-card.is-hidden .panel-viewport { background: repeating-linear-gradient(135deg, #121b2b, #121b2b 12px, #151f31 12px, #151f31 24px); }
.panel-toolbar { position: relative; z-index: 2; flex: 0 0 51px; min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px 0 13px; border-bottom: 1px solid #273248; background: linear-gradient(180deg, #182236, #151e2e); }
.panel-identity { min-width: 100px; display: flex; align-items: center; gap: 10px; }
.panel-index { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #27345a; color: #a9baff; font: 700 10px/1 "Segoe UI", sans-serif; letter-spacing: .4px; }
.panel-identity h2 { margin: 0; font-size: 13px; font-weight: 650; }
.panel-status { display: block; margin-top: 3px; color: #7f8ca5; font-size: 10px; }
.panel-status.ready { color: #66d6aa; }
.panel-status.loading { color: #cfb66e; }
.panel-status.error { color: #f28e91; }
.panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.control-button { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #aebbd1; cursor: pointer; font-size: 12px; white-space: nowrap; transition: .15s; }
.control-label { border-color: #303d57; background: #1b263a; font-size: 10px; font-weight: 600; }
.zoom-button { min-width: 52px; }
.audio-button { min-width: 45px; }
.focus-button { color: #b7c5ff; border-color: #46598e; background: #202b49; }
.focus-button:hover { border-color: #788fe0; background: #2a3960; }
.control-button:hover { border-color: #394967; background: #27334a; color: white; }
.control-button.is-active { color: #9eb4ff; background: #243156; }
.control-button.focus-button { color: #a6b7ff; }
.hide-button { height: 29px; padding: 0 9px; border: 1px solid #37435c; border-radius: 7px; background: #202b40; color: #c9d4e8; cursor: pointer; font-size: 10px; }
.hide-button:hover { border-color: #6176b5; background: #293751; }
.panel-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #0e1522; }
.viewport-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #8390a8; font-size: 12px; pointer-events: none; }
.viewport-placeholder[hidden] { display: none; }
.loader-orb { width: 13px; height: 13px; border: 2px solid #394767; border-top-color: #89a0ff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.app-footer { height: 19px; flex: 0 0 19px; display: flex; justify-content: space-between; color: #69758c; font-size: 10px; }
.footer-right { color: #55617a; letter-spacing: .3px; }
.focus-mode .panel-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.focus-mode .panel-card:not(.is-focused) { display: none; }
.focus-mode .panel-card.is-focused .panel-toolbar { flex-basis: 55px; min-height: 55px; }
@media (max-width: 920px) {
  .app-shell { padding: 13px; gap: 10px; }
  .panel-grid { gap: 9px; }
  .panel-actions { gap: 2px; max-width: 100%; }
  .panel-toolbar { flex: 0 0 auto; flex-wrap: wrap; height: auto; min-height: 54px; padding: 5px 8px; }
  .hide-button { padding-inline: 6px; }
}
@media (max-width: 720px) {
  .topbar { height: auto; flex-basis: auto; align-items: flex-start; }
  .session-badge { display: none; }
  .panel-grid { gap: 7px; }
  .panel-toolbar { flex-wrap: wrap; height: auto; min-height: 54px; padding-block: 7px; }
  .panel-actions { justify-content: flex-end; flex-wrap: wrap; }
  .panel-identity { gap: 6px; }
  .hide-button { font-size: 10px; }
}
/* As WebViews ocupam somente a área abaixo da barra de ferramentas de cada cartão. */
.game-view { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0e1522; }
.game-view.view-hidden { visibility: hidden; }
.panel-toolbar { flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 7px; padding-bottom: 7px; }
.panel-actions { flex: 1 1 100%; justify-content: flex-start; }
.panel-identity { flex: 1 1 100%; }
.control-label { min-width: 64px; height: 29px; padding-inline: 7px; }
.zoom-button { min-width: 64px; }
.audio-button { min-width: 52px; }
.focus-button { min-width: 92px; }
.hide-button { min-width: 66px; }
.panel-viewport { isolation: isolate; }
@media (max-width: 1100px) {
  .control-label { min-width: 58px; padding-inline: 5px; font-size: 10px; }
  .focus-button { min-width: 86px; }
}
/* Barra compacta em uma única linha, incorporada ao topo de cada cartão. */
.panel-toolbar {
  position: relative;
  z-index: 2;
  flex: 0 0 54px;
  min-height: 54px;
  height: 54px;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 9px 0 11px;
}
.panel-identity { flex: 0 1 auto; min-width: 86px; gap: 7px; }
.panel-identity > div { min-width: 0; }
.panel-identity h2 { white-space: nowrap; }
.panel-status { white-space: nowrap; }
.panel-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; margin-left: auto; }
.control-button.icon-button { flex: 0 0 32px; width: 32px; min-width: 32px; height: 32px; padding: 0; font-size: 15px; }
.control-button.audio-button { font-family: "Segoe UI Emoji", "Segoe UI", sans-serif; font-size: 14px; }
.control-button.hide-button { height: 32px; padding: 0; }
.panel-viewport { flex: 1 1 0; min-height: 0; }
.game-view { position: absolute; top: 0; left: 0; display: block; min-width: 1px; min-height: 1px; border: 0; background: #0e1522; }
@media (max-width: 920px) {
  .app-shell { padding: 12px; gap: 8px; }
  .panel-grid { gap: 8px; }
  .panel-toolbar { flex: 0 0 50px; min-height: 50px; height: 50px; padding-inline: 7px; gap: 5px; }
  .panel-identity { min-width: 72px; gap: 5px; }
  .panel-index { width: 24px; height: 24px; }
  .panel-actions { gap: 2px; }
  .control-button.icon-button { flex-basis: 29px; width: 29px; min-width: 29px; height: 29px; }
}
@media (max-width: 720px) {
  .app-shell { padding: 8px; gap: 6px; }
  .panel-grid { gap: 6px; }
  .panel-toolbar { flex-basis: 46px; min-height: 46px; height: 46px; padding-inline: 5px; gap: 4px; }
  .panel-identity { min-width: 66px; gap: 4px; }
  .panel-identity h2 { font-size: 11px; }
  .panel-status { font-size: 9px; }
  .panel-index { width: 21px; height: 21px; }
  .panel-actions { gap: 1px; }
  .control-button.icon-button { flex-basis: 27px; width: 27px; min-width: 27px; height: 27px; }
}
/* O próprio elemento webview precisa manter display:flex para o iframe interno preencher toda a altura. */
.panel-viewport { display: flex; position: relative; min-width: 0; min-height: 0; }
.game-view {
  position: relative;
  inset: auto;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
}
.viewport-placeholder { z-index: 1; }
.license-gate[hidden],#panel-grid[hidden]{display:none!important}.license-gate{flex:1;min-height:0;display:grid;place-items:center;padding:24px}.license-card{width:min(100%,500px);padding:38px;border:1px solid #29344c;border-radius:18px;background:linear-gradient(145deg,#172237,#111827);box-shadow:0 20px 60px #0005}.license-eyebrow{color:#91a5ff;font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}.license-card h2{margin:12px 0 8px;font-size:25px}.license-card>p{color:#aab5ca;font-size:13px;line-height:1.55}.license-card form{display:flex;flex-direction:column;gap:9px;margin-top:23px}.license-card label{color:#aab5ca;font-size:12px;font-weight:650}.license-card input{height:44px;padding:0 13px;border:1px solid #34415d;border-radius:9px;background:#0e1625;color:#f4f6fb;font:inherit;letter-spacing:.5px}.license-primary{height:43px;border:0;border-radius:9px;background:#657be0;color:white;font-weight:750;cursor:pointer}.license-primary:hover{background:#7589e8}.license-primary:disabled,.license-actions button:disabled{opacity:.6;cursor:wait}.license-actions{display:flex;gap:9px;margin-top:13px}.license-actions .button{padding:0 12px}.license-footnote{margin:23px 0 0!important;color:#73809a!important;font-size:11px!important}.license-error{padding:10px;border-radius:8px;background:#48242d;color:#ffb1b3!important;font-size:12px!important}