/* Luzman's primary portrait; the existing component indicators keep their data sources. */
.bg-canvas{
 background:
  radial-gradient(ellipse 54% 46% at 50% 42%,rgba(0,126,222,.24) 0%,rgba(0,60,130,.10) 42%,transparent 78%),
  radial-gradient(ellipse 42% 36% at 12% 78%,rgba(0,212,255,.10),transparent 76%),
  radial-gradient(ellipse 46% 42% at 88% 20%,rgba(38,92,190,.12),transparent 78%),
  radial-gradient(ellipse 80% 60% at 50% 50%,#021428 0%,#020810 100%) !important;
}
.bg-canvas::after{
 content:"";position:absolute;inset:0;pointer-events:none;opacity:.72;
 background-image:
  radial-gradient(circle at 8% 17%,rgba(190,235,255,.75) 0 1px,transparent 1.8px),
  radial-gradient(circle at 23% 72%,rgba(90,190,255,.62) 0 1px,transparent 1.8px),
  radial-gradient(circle at 38% 28%,rgba(190,235,255,.68) 0 1.2px,transparent 2px),
  radial-gradient(circle at 57% 78%,rgba(90,190,255,.58) 0 1px,transparent 1.8px),
  radial-gradient(circle at 74% 18%,rgba(190,235,255,.72) 0 1px,transparent 1.8px),
  radial-gradient(circle at 91% 63%,rgba(90,190,255,.62) 0 1.2px,transparent 2px);
 background-size:173px 191px,211px 229px,257px 263px,193px 241px,281px 223px,227px 271px;
}
#tab-main.active{grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(190px,230px);grid-template-rows:minmax(360px,1fr) 240px;}
#tab-main.active>.center-zone{min-width:0;min-height:360px;}
#tab-main.active>.side-panel{gap:10px;padding:22px 16px;overflow-y:auto;}
#tab-main.active>.side-panel .service-dot{font-size:14px;line-height:1.35;}
#tab-main.active>.side-panel .panel-section-title{font-size:12px;letter-spacing:1.5px;}
#tab-main.active .hud-clock{top:14px;min-width:0;width:100%;pointer-events:none;}
#tab-main.active .clock-time{font-size:clamp(24px,2.2vw,34px);}
#tab-main.active .clock-date{font-size:12px;letter-spacing:1.5px;}
#luzman-avatar{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .5s ease;}
/* Preserve adaptive sizing in ordinary windows; bound growth on large displays. */
#luzman-avatar canvas,#luzman-avatar img{object-fit:cover!important;object-position:center;position:absolute;left:50%;top:50%;max-width:960px;max-height:540px;transform:translate(-50%,-50%) scale(.88);transform-origin:center;mix-blend-mode:screen;}
.luzman-avatar-ready #luzman-avatar{opacity:1;}
.luzman-avatar-ready #coreCanvas{opacity:0;}
#tab-main.active .core-hud-overlay{bottom:16px;width:100%;padding:0 10px;}
#tab-main.active .core-label{font-size:13px;letter-spacing:3px;white-space:normal;}
#tab-main.active .core-readout{font-size:11px;letter-spacing:.8px;white-space:normal;}
#tab-main.active .component-activity{display:flex;flex-direction:column;gap:11px;padding:8px 0;}
#tab-main.active .component-activity .sat-hud{position:static;transform:none;flex-direction:row;font-size:13px;letter-spacing:1.2px;color:#7795a9;}
#tab-main.active .component-activity .sat-hud.active{color:var(--sat-color);}
/* Small screens place the portrait first, with the two component columns directly below. */
@media(max-width:900px){
 #tab-main.active{display:grid!important;position:relative;height:100%!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:380px auto minmax(230px,auto)!important;overflow-y:auto!important;align-content:start;}
 #tab-main.active>.center-zone{position:relative;inset:auto;width:100%;height:380px;min-height:380px!important;grid-column:1/-1;grid-row:1;}
 #tab-main.active>.side-panel,#tab-main.active>.side-panel.right{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;width:auto;height:auto;max-height:none;min-width:0;overflow:visible;padding:16px 12px;grid-row:2;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0;}
 #tab-main.active>.side-panel:first-child{grid-column:1;grid-row:2;left:auto;}
 #tab-main.active>.side-panel.right{grid-column:2;grid-row:2;right:auto;}
 #tab-main.active>.chat-dock{position:relative;inset:auto;width:100%;height:260px;max-height:none;min-height:230px!important;grid-column:1/-1;grid-row:3;}
 #tab-main.active .chat-resize-handle{display:none;}
 #tab-main.active>.side-panel .metric-label,#tab-main.active>.side-panel .metric-value{font-size:14px;}
 #tab-main.active>.side-panel .service-dot{font-size:13px;overflow-wrap:anywhere;}
 #tab-main.active>.side-panel .panel-section-title{font-size:12px;}
 #tab-main.active .hud-clock{top:10px;}
 #tab-main.active .clock-time{font-size:26px;}
 #luzman-avatar{inset:0;}
}
@media(prefers-reduced-motion:reduce){#luzman-avatar{transition:none;}}