:root {
--mlg-plc-bg: #0f172a;
--mlg-plc-fg: #f8fafc;
--mlg-plc-muted: #94a3b8;
--mlg-plc-accent: #38bdf8;
--mlg-plc-danger: #f87171;
--mlg-plc-height: 780px;
--mlg-plc-min-height: 520px;
}
.mlg-plc-shell {
position: relative;
display: flex; flex-direction: column;
height: var(--mlg-plc-height);
min-height: var(--mlg-plc-min-height);
border-radius: 12px;
} .mlg-plc-shell--fill {
height: max(var(--mlg-plc-height), calc(100vh - 46px));
min-height: var(--mlg-plc-min-height);
} .mlg-plc-topbar {
display: flex; align-items: center; gap: 2px; padding: 6px 10px;
flex: 0 0 auto;
background: rgba(15, 23, 42, .6);
border-bottom: 1px solid rgba(148, 163, 184, .22);
}
.mlg-plc-shell--light .mlg-plc-topbar {
background: rgba(15, 23, 42, .05);
border-bottom-color: rgba(15, 23, 42, .14);
}
.mlg-plc-group { display: flex; align-items: center; gap: 2px; }
.mlg-plc-group + .mlg-plc-group {
border-left: 1px solid rgba(148, 163, 184, .28);
padding-left: 8px; margin-left: 8px;
}
.mlg-plc-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer;
background: rgba(148, 163, 184, .14); color: inherit; font: inherit; font-size: 12px;
white-space: nowrap;
}
.mlg-plc-btn:hover { background: rgba(148, 163, 184, .28); color: #fff; }
.mlg-plc-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.mlg-plc-frame-wrap { overflow: hidden; background: var(--mlg-plc-bg); box-shadow: 0 8px 24px rgba(2, 6, 23, .35); } .mlg-plc-shell:fullscreen,
.mlg-plc-shell.is-fullscreen {
width: 100vw; height: 100vh;
max-width: none; max-height: none;
border-radius: 0;
box-shadow: none;
background: var(--mlg-plc-bg);
padding: 0; margin: 0;
}
.mlg-plc-shell:fullscreen .mlg-plc-frame-wrap,
.mlg-plc-shell.is-fullscreen .mlg-plc-frame-wrap { flex: 1; }
.mlg-plc-shell:fullscreen .mlg-plc-frame,
.mlg-plc-shell.is-fullscreen .mlg-plc-frame { height: 100%; }
.mlg-plc-shell--light { --mlg-plc-bg: #f8fafc; --mlg-plc-fg: #0f172a; --mlg-plc-muted: #64748b; }
.mlg-plc-shell--no-toolbar .mlg-plc-header { display: none; }
.mlg-plc-shell--no-toolbar .mlg-plc-topbar { display: none; } .mlg-plc-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px; gap: 12px;
background: rgba(15, 23, 42, .55);
border-bottom: 1px solid rgba(148, 163, 184, .2);
flex: 0 0 auto;
}
.mlg-plc-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mlg-plc-logo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.mlg-plc-heading strong { font-size: 15px; }
.mlg-plc-heading small  { display: block; font-size: 11px; color: var(--mlg-plc-muted); }
.mlg-plc-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mlg-plc-muted); }
.mlg-plc-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mlg-plc-accent); }
.mlg-plc-actions { display: flex; gap: 4px; }
.mlg-plc-icon-button {
width: 32px; height: 32px; border-radius: 8px; border: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: inherit;
}
.mlg-plc-icon-button:hover { background: rgba(148, 163, 184, .16); }
.mlg-plc-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.mlg-plc-frame-wrap { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }
.mlg-plc-frame { flex: 1 1 auto; border: 0; background: #fff; width: 100%; height: 100%; display: block; }
.mlg-plc-loader {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
background: rgba(15, 23, 42, .8); color: #fff; z-index: 2;
}
.mlg-plc-spinner {
width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff;
border-radius: 50%; animation: mlg-plc-spin .8s linear infinite;
}
@keyframes mlg-plc-spin { to { transform: rotate(360deg); } }
.mlg-plc-error { padding: 20px; border: 1px solid var(--mlg-plc-danger); border-radius: 12px; }
.mlg-plc-shell--with-chat .mlg-plc-chat-panel { display: flex; }