/* AERILIS Control Center | three isolated WPF companion-window previews.
   No CORE, no SimConnect, no pairing tokens, no real QR, no external service calls. */
.window-preview{box-sizing:border-box;width:min(92vw,720px);max-height:88vh;margin:auto;padding:0;
 border:1px solid #879691;border-radius:14px;color:#edf2ed;
 background:linear-gradient(140deg,#151c1b,#050706 32%,#0b100e 100%);
 box-shadow:0 24px 70px #000e,inset 0 1px 0 #d5ded550;
 font-family:"Segoe UI Variable","Segoe UI",sans-serif}
.window-preview::backdrop{background:rgba(0,0,0,.79)}
.window-preview .window-head{padding:15px 22px;border-bottom:1px solid #495650;
 display:flex;gap:16px;align-items:center;background:linear-gradient(#1b2422,#090e0c)}
.window-preview .brand-mark{width:124px;height:40px;overflow:hidden;flex-shrink:0;position:relative}
.window-preview .brand-mark img{position:absolute;width:198px;height:auto;left:-37px;top:50%;transform:translateY(-50%)}
.window-preview .window-headings{min-width:0;flex:1}
.window-preview .window-kicker{font-family:"Aerilis Michroma","Segoe UI",sans-serif;color:#a6b3a9;
 font-size:10px;letter-spacing:.05em}
.window-preview h2{font-family:"Segoe UI Variable Display","Segoe UI",sans-serif;
 font-weight:350;font-size:clamp(18px,2.7vw,25px);margin:4px 0 0;color:#edf2ed}
.window-preview .window-dismiss{font-size:22px;font-weight:400;cursor:pointer;
 background:transparent;border:1px solid #54615c;color:#d5ded5;border-radius:6px;width:38px;height:36px}
.window-preview .window-body{padding:22px 26px 26px;overflow:auto;max-height:calc(88vh - 80px)}
.window-preview .muted{color:#a6b3a9;font-size:14px;line-height:1.5}
.window-preview .window-label{font-family:"Aerilis Michroma","Segoe UI",sans-serif;
 font-size:12px;color:#d5ded5;letter-spacing:.03em}
.window-preview .window-panel{border:1px solid #596660;border-radius:9px;
 background:linear-gradient(180deg,#141c1a,#080d0b);padding:15px;
 box-shadow:inset 0 1px 0 #c4d0c42d}
.window-preview .window-panel + .window-panel{margin-top:13px}
.window-preview .window-row{display:flex;align-items:center;justify-content:space-between;gap:15px}
.window-preview .window-row + .window-row{border-top:1px solid #3b4640;margin-top:11px;padding-top:11px}
.window-preview .state-preview{color:#a6b3a9;font-family:"Aerilis Michroma","Segoe UI",sans-serif;font-size:12px}
.window-preview .preview-button{border:1px solid #889992;border-radius:7px;padding:11px 15px;
 color:#d5ded5;background:linear-gradient(180deg,#26302d,#101714,#080e0d);
 box-shadow:inset 0 1px 0 #d9e4df55;font-family:"Segoe UI Variable",sans-serif;
 font-size:14px;font-weight:600;cursor:default}
.window-preview .preview-button:disabled{opacity:.57}
.window-preview .preview-button.close-btn{cursor:pointer}
.window-preview .preview-button.danger{border-color:#76585a;color:#deb4b4}
.window-preview .button-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.window-preview .no-data-note{font-size:12px;color:#748379;margin-top:12px}
.window-preview .qr-shell{width:min(245px,65vw);height:min(245px,65vw);margin:16px auto;
 display:grid;place-content:center;text-align:center;gap:10px;
 background:#f4f7f4;color:#37453e;border-radius:10px;border:12px solid #edf2ed}
.window-preview .qr-shell svg{width:74px;height:74px;margin:auto;stroke:#425d51;fill:none;stroke-width:3}
.window-preview .qr-shell strong{font-size:14px;line-height:1.4}
.window-preview .browser-row{display:flex;align-items:center;gap:12px;padding:13px 10px;
 border-bottom:1px solid #35413b}
.window-preview .browser-row:last-child{border:0}
.window-preview .browser-identity{flex:1}
.window-preview .browser-identity small{display:block;font-size:12px;color:#87988e;margin-top:5px}
.window-preview .browser-row input{accent-color:#5bfd3d}
.window-preview .report-preview{white-space:pre-wrap;font-family:Consolas,"Cascadia Mono",monospace;
 font-size:13px;line-height:1.75;color:#d5ded5;overflow:auto}
.window-preview .preview-separator{height:1px;background:linear-gradient(90deg,transparent,#748379,transparent);margin:15px 0}
@media(max-width:600px){.window-preview .window-body{padding:15px}.window-preview .window-head{padding:12px}.window-preview .brand-mark{display:none}
 .window-preview .window-row{flex-wrap:wrap}.window-preview .button-row{justify-content:stretch}.window-preview .preview-button{flex:1}}

/* QR WINDOW — PRECISION TITANIUM V1
   Visual-only treatment of the existing WPF connection window. The main dashboard
   and other companion-window themes are intentionally unaffected. */
#qr-window-preview{
 width:min(92vw,570px);max-height:min(92vh,860px);
 border:1px solid #93a29c;border-radius:12px;
 background:linear-gradient(162deg,#141b19 0%,#050706 28%,#0b100e 100%);
 box-shadow:0 26px 75px #000e,inset 0 1px 0 #d5ded551;
}
#qr-window-preview .window-head{
 padding:20px 22px 18px;
 border-bottom:1px solid #53625b;
 background:linear-gradient(180deg,#222a27 0%,#121916 27%,#060907 100%);
 box-shadow:inset 0 2px 0 #d5ded539,0 5px 13px #0009;
}
#qr-window-preview .brand-mark{width:126px;height:49px}
#qr-window-preview .brand-mark img{width:205px;left:-40px}
#qr-window-preview .window-headings{padding-left:10px}
#qr-window-preview .window-kicker{
 font-size:10px;letter-spacing:.10em;color:#83928b;
}
#qr-window-preview h2{
 font-family:"Aerilis Michroma","Segoe UI",sans-serif;
 font-size:clamp(15px,2vw,20px);font-weight:400;line-height:1.4;
 letter-spacing:.026em;
 background:linear-gradient(180deg,#f9fafb 0%,#d2d6d8 19%,#6f767a 46%,#f0f3f3 57%,#a1a8ac 76%,#555d62 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 1px 0 #000);
}
#qr-window-preview .window-dismiss{
 background:#0d1411;border:1px solid #748379;border-radius:5px;
 box-shadow:inset 0 1px 0 #edf2ed33;
}
#qr-window-preview .window-body{padding:23px 27px 27px;max-height:calc(92vh - 95px)}
#qr-window-preview .window-panel{
 border:1px solid #596760;
 border-radius:6px;
 background:linear-gradient(180deg,#171e1b,#0a100d);
 box-shadow:inset 0 1px 0 #e6efed33,0 2px 5px #0006;
 padding:14px 17px;
}
#qr-window-preview .window-label{font-size:11px;letter-spacing:.04em}
#qr-window-preview .state-preview{
 color:#94a99c;font-size:10px;text-align:right;letter-spacing:.01em;
}
#qr-window-preview .qr-shell{
 width:265px;height:265px;max-width:min(72vw,265px);
 max-height:min(72vw,265px);
 margin:21px auto 14px;
 border:11px solid #dfe8e1;border-radius:8px;
 background:#f5f8f5;
 box-shadow:0 0 0 1px #71837a,0 4px 15px #0009;
 color:#37443c;
 gap:7px
}
#qr-window-preview .qr-shell strong{
 font-family:"Segoe UI Variable","Segoe UI",sans-serif;
 font-size:15px;font-weight:650;letter-spacing:.015em
}
#qr-window-preview .qr-shell span{font-size:12px;color:#65776c}
#qr-window-preview .qr-shell svg{width:76px;height:76px;stroke:#394f45}
#qr-window-preview .window-body > .muted{
 font-size:14px;color:#c7d4ca;max-width:410px;
 line-height:1.5;margin:15px auto;
}
#qr-window-preview .window-body > .window-row{
 padding:10px 5px;border-bottom:1px solid #34413a;
}
#qr-window-preview .window-body > .window-row .window-label{font-size:10px}
#qr-window-preview .window-body > .window-row .state-preview{font-size:10px}
#qr-window-preview .preview-separator{
 height:1px;margin:18px 0 9px;
 background:linear-gradient(90deg,transparent,#8d9b96 50%,transparent)
}
#qr-window-preview .button-row{
 margin-top:20px;display:grid;grid-template-columns:1fr 1fr;
 gap:10px;align-items:stretch
}
#qr-window-preview .preview-button{
 border-radius:5px;min-height:42px;
 font-size:12px;line-height:1.25;letter-spacing:.025em;
 padding:10px 9px;
}
#qr-window-preview .button-row .close-btn{grid-column:1 / -1;max-width:140px;justify-self:end}
#qr-window-preview .no-data-note{
 text-align:center;font-size:11px;line-height:1.5;
 margin-top:18px;color:#87988d
}
@media(max-width:600px){
 #qr-window-preview .window-head{padding:13px 14px}
 #qr-window-preview .window-headings{padding-left:0}
 #qr-window-preview .window-body{padding:16px 17px 20px}
 #qr-window-preview .qr-shell{width:min(240px,70vw);height:min(240px,70vw)}
 #qr-window-preview h2{font-size:clamp(14px,4vw,19px)}
}

/* SECONDARY WINDOWS — BROWSERS + DIAGNOSTICS V1
   Keeps all QR refinements and the main Control Center strictly unchanged. */
#browsers-window-preview,#diagnostics-window-preview{
 border:1px solid #93a29c;border-radius:12px;
 background:linear-gradient(160deg,#141b19 0%,#050706 29%,#0b100e 100%);
 box-shadow:0 26px 75px #000e,inset 0 1px 0 #d5ded551
}
#browsers-window-preview{width:min(92vw,690px)}
#diagnostics-window-preview{width:min(92vw,770px)}
#browsers-window-preview .window-head,
#diagnostics-window-preview .window-head{
 padding:19px 22px 17px;border-bottom:1px solid #53625b;
 background:linear-gradient(180deg,#222a27,#101713 38%,#060907);
 box-shadow:inset 0 2px 0 #d5ded539,0 5px 13px #0009
}
#browsers-window-preview .brand-mark,
#diagnostics-window-preview .brand-mark{height:49px}
#browsers-window-preview .window-kicker,
#diagnostics-window-preview .window-kicker{
 font-size:10px;letter-spacing:.11em;color:#83928b
}
#browsers-window-preview h2,#diagnostics-window-preview h2{
 font-family:"Aerilis Michroma","Segoe UI",sans-serif;
 font-weight:400;font-size:clamp(16px,2vw,21px);
 letter-spacing:.018em;line-height:1.35;
 background:linear-gradient(180deg,#f9fafb,#d2d6d8 19%,#6f767a 46%,#f0f3f3 57%,#a1a8ac 76%,#555d62);
 background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 1px 0 #000)
}
#browsers-window-preview .window-body,
#diagnostics-window-preview .window-body{padding:23px 26px 27px}
#browsers-window-preview .window-panel,
#diagnostics-window-preview .window-panel{
 border:1px solid #596760;border-radius:7px;
 background:linear-gradient(180deg,#151d1a,#070d0a);
 box-shadow:inset 0 1px 0 #d5ded531,0 3px 10px #0005;
 padding:16px
}
#browsers-window-preview .window-label,
#diagnostics-window-preview .window-label{font-size:11px}
#browsers-window-preview .window-dismiss,
#diagnostics-window-preview .window-dismiss{
 background:#0d1411;border:1px solid #748379;
 box-shadow:inset 0 1px 0 #edf2ed33;border-radius:5px
}
#browsers-window-preview .browser-row{
 gap:14px;padding:16px 9px;border-bottom:1px solid #3e4c44;
 background:transparent;cursor:default
}
#browsers-window-preview .browser-row input{
 accent-color:#5bfd3d;width:17px;height:17px;flex:0 0 17px
}
#browsers-window-preview .browser-identity{
 font-size:15px;font-weight:600;color:#e1e9e2
}
#browsers-window-preview .browser-identity small{
 font-size:12px;font-weight:400;line-height:1.4;color:#8ea199
}
#browsers-window-preview .state-preview{font-size:10px;color:#a1b1a8}
#browsers-window-preview .button-row,
#diagnostics-window-preview .button-row{gap:10px;margin-top:20px}
#browsers-window-preview .preview-button,
#diagnostics-window-preview .preview-button{
 border-radius:5px;font-size:12px;letter-spacing:.02em;
 padding:11px 13px;min-height:43px
}
#browsers-window-preview .preview-button.danger{
 color:#debaba;border:1px solid #79585a;
 background:linear-gradient(180deg,#342526,#170f10);
 box-shadow:inset 0 1px 0 #e6baba33
}
#diagnostics-window-preview .report-preview{
 margin:0;padding:5px;max-height:320px;min-height:250px;
 font-family:"Cascadia Mono",Consolas,monospace;font-size:13px;
 line-height:1.76;color:#cdd7d0;
 white-space:pre;overflow:auto;tab-size:4
}
#diagnostics-window-preview .window-body>.muted{
 color:#a8bbb0;line-height:1.5;margin:0 0 18px
}
#diagnostics-window-preview .window-panel{
 border-left:2px solid #85988e;
 background:linear-gradient(180deg,#111816,#070c09);
}
@media(max-width:600px){
 #browsers-window-preview .window-head,
 #diagnostics-window-preview .window-head{padding:13px}
 #browsers-window-preview .window-body,
 #diagnostics-window-preview .window-body{padding:16px 17px 20px}
 #browsers-window-preview h2,#diagnostics-window-preview h2{font-size:clamp(14px,4vw,19px)}
 #browsers-window-preview .button-row{display:grid;grid-template-columns:1fr 1fr}
 #browsers-window-preview .button-row .close-btn{grid-column:1/-1}
 #browsers-window-preview .preview-button,
 #diagnostics-window-preview .preview-button{padding:9px 6px}
 #diagnostics-window-preview .report-preview{font-size:11px;min-height:200px}
}

/* AUTHORIZED BROWSERS — LOGO AND ACTION FINISHING V1.1
   Source PNG preserved. Explicit offset removes transparent margins without
   clipping any of the actual AERILIS SIMULATION glyphs. Other windows unchanged. */
#browsers-window-preview .brand-mark{
 width:136px;height:49px;flex:0 0 136px;
 position:relative;overflow:hidden
}
#browsers-window-preview .brand-mark img{
 position:absolute;width:178px;max-width:none;height:auto;
 left:-27px;top:50%;transform:translateY(-50%)
}
/* Readable yet inactive controls: preview cannot access real authorizations. */
#browsers-window-preview .button-row{
 gap:12px;justify-content:flex-end;align-items:stretch
}
#browsers-window-preview .preview-button{
 min-height:44px;padding:11px 14px;font-size:13px;
 line-height:1.2;letter-spacing:.01em;
 border:1px solid #81938b;color:#e5eee8;
 background:linear-gradient(180deg,#202b26,#0c1410);
 box-shadow:inset 0 1px 0 #e6efe951,0 2px 5px #0007
}
#browsers-window-preview .preview-button:disabled{
 opacity:1;color:#c7d4cb;cursor:not-allowed;
 border-color:#6b7a72;
 background:linear-gradient(180deg,#1b2420,#0b120f);
 box-shadow:inset 0 1px 0 #d9e4dc38
}
#browsers-window-preview .preview-button.danger:disabled{
 opacity:1;color:#d4a5a5;border-color:#9b696b;
 background:linear-gradient(180deg,#342323,#1a1112);
 box-shadow:inset 0 1px 0 #e6baba3d
}
#browsers-window-preview .preview-button.close-btn{
 color:#f0f5f0;border-color:#9baba3;
 background:linear-gradient(180deg,#26332e,#111a16);
 box-shadow:inset 0 1px 0 #edf2ed63,0 2px 5px #0007
}
@media(max-width:600px){
 #browsers-window-preview .brand-mark{display:none}
 #browsers-window-preview .button-row{gap:9px}
 #browsers-window-preview .preview-button{font-size:12px;padding:10px 8px}
}

/* DIAGNOSTICS — LOGO, REPORT & ACTIONS FINISHING V1.1
   Isolated to diagnostics; preserves validated main screen, QR and browsers. */
#diagnostics-window-preview .brand-mark{
 width:136px;height:49px;flex:0 0 136px;
 position:relative;overflow:hidden
}
#diagnostics-window-preview .brand-mark img{
 position:absolute;width:178px;max-width:none;height:auto;
 left:-27px;top:50%;transform:translateY(-50%)
}
#diagnostics-window-preview .window-body>.muted{
 font-size:14px;line-height:1.55;color:#b4c2b9;
 margin:0 0 18px
}
#diagnostics-window-preview .window-panel{
 padding:15px 16px;
 border:1px solid #74877b;border-left:2px solid #a0b0a6;
 border-radius:7px;
 background:linear-gradient(180deg,#151c19 0%,#0a100d 100%);
 box-shadow:inset 0 1px 0 #e7eee744,0 3px 10px #0008
}
#diagnostics-window-preview .report-preview{
 display:block;margin:0;padding:6px 7px;
 max-height:340px;min-height:245px;
 font-family:"Cascadia Mono",Consolas,"Courier New",monospace;
 font-size:13px;line-height:1.75;
 color:#dfebe1;letter-spacing:.002em;
 white-space:pre;overflow:auto;tab-size:4;
 font-variant-numeric:tabular-nums;
}
#diagnostics-window-preview .report-preview::selection{
 background:#5bfd3d;color:#050706
}
#diagnostics-window-preview .button-row{
 display:flex;gap:12px;margin-top:20px;
 align-items:center;justify-content:flex-end;flex-wrap:wrap
}
#diagnostics-window-preview .preview-button{
 min-height:44px;font-size:13px;line-height:1.2;letter-spacing:.015em;
 padding:11px 16px;border-radius:5px;
 border:1px solid #82948b;color:#e5eee8;
 background:linear-gradient(180deg,#222d27,#0b130e);
 box-shadow:inset 0 1px 0 #edf2ed55,0 2px 5px #0008
}
#diagnostics-window-preview .preview-button:disabled{
 opacity:1;cursor:not-allowed;color:#c7d4cb;
 border-color:#6e8074;
 background:linear-gradient(180deg,#1d2720,#0c1410);
 box-shadow:inset 0 1px 0 #d9e4dc38
}
#diagnostics-window-preview .preview-button.close-btn{
 color:#f0f5f0;border-color:#9baba3;cursor:pointer;
 background:linear-gradient(180deg,#28352e,#111a16);
 box-shadow:inset 0 1px 0 #edf2ed63,0 2px 5px #0007
}
@media(max-width:600px){
 #diagnostics-window-preview .brand-mark{display:none}
 #diagnostics-window-preview .window-panel{padding:11px 10px}
 #diagnostics-window-preview .report-preview{font-size:11px;min-height:200px}
 #diagnostics-window-preview .button-row{gap:9px}
 #diagnostics-window-preview .preview-button{font-size:12px;padding:10px 11px}
}

/* CONNECT A DISPLAY — QR FINISHING V1.1 */
/* Restore the complete official logo exactly as in the validated browser window.
   Only the QR dialog is affected; the bitmap asset itself is unchanged. */
#qr-window-preview .brand-mark{
  position:relative;width:136px;height:49px;flex:0 0 136px;
  overflow:hidden
}
#qr-window-preview .brand-mark img{
  position:absolute;width:178px;max-width:none;height:auto;
  left:-27px;top:50%;transform:translateY(-50%)
}
/* Keep QR central and legible, with clear preview-only status. */
#qr-window-preview .window-panel .state-preview{
  color:#b6c6bb;font-size:11px
}
#qr-window-preview .qr-shell{
  border-color:#e6ede7;
  box-shadow:0 0 0 1px #8e9f93,0 5px 17px #0009
}
#qr-window-preview .window-body > .muted{
  max-width:440px;color:#c7d4cb
}
#qr-window-preview .button-row{
  column-gap:12px;row-gap:10px
}
#qr-window-preview .preview-button{
  min-height:44px;border:1px solid #81938b;
  color:#e5eee8;background:linear-gradient(180deg,#222d27,#0b130e);
  box-shadow:inset 0 1px 0 #edf2ed55,0 2px 5px #0008;
  font-size:13px;line-height:1.25;letter-spacing:.012em;
  border-radius:5px;padding:11px 13px
}
#qr-window-preview .preview-button:disabled{
  opacity:1;color:#c7d4cb;cursor:not-allowed;
  border-color:#6e8074;background:linear-gradient(180deg,#1d2720,#0c1410);
  box-shadow:inset 0 1px 0 #d9e4dc38
}
#qr-window-preview .preview-button.close-btn{
  color:#f0f5f0;cursor:pointer;border-color:#9baba3;
  background:linear-gradient(180deg,#28352e,#111a16);
  box-shadow:inset 0 1px 0 #edf2ed63,0 2px 5px #0007
}
@media(max-width:600px){
  #qr-window-preview .brand-mark{display:none}
  #qr-window-preview .preview-button{font-size:12px;padding:10px 8px}
}

/* QR TITANIUM DIAL — V1
   Circular instrument housing inspired by the AERILIS deck. The QR stays
   fully square, solid white, and unobstructed for the future real WPF image.
   Preview placeholder only: intentionally not a scannable pairing code. */
#qr-window-preview .qr-titanium-dial{
 width:min(408px,calc(92vw - 98px));
 aspect-ratio:1;
 margin:22px auto 17px;
 position:relative;display:grid;place-items:center;
 border-radius:50%;isolation:isolate;
 background:
   repeating-linear-gradient(0deg,rgba(250,255,253,.075) 0px,rgba(0,0,0,0) 1px,rgba(0,0,0,.10) 3px,rgba(0,0,0,0) 4px),
   conic-gradient(from -20deg,
      #38474d 0deg,#e8eeed 25deg,#7b898c 46deg,#273237 76deg,
      #c9d3d1 108deg,#eef2ef 137deg,#465358 176deg,
      #18242a 212deg,#9daead 250deg,#edf0ec 286deg,#566268 321deg,#38474d 360deg);
 box-shadow:0 0 0 1px #202b2d,0 8px 26px #000c,
   inset 0 0 0 1px #eef3ef98,inset 0 3px 6px #f7faf45c;
}
#qr-window-preview .qr-titanium-dial::before{
 content:"";position:absolute;inset:16px;
 border-radius:50%;
 background:radial-gradient(circle at 50% 35%,#101a19 0%,#030706 64%,#020404 100%);
 border:2px solid #5e7071;
 box-shadow:0 0 0 2px #1a2629,inset 0 3px 17px #000e,
   inset 0 0 0 2px #050a0b;
 pointer-events:none;z-index:0;
}
#qr-window-preview .qr-titanium-dial .qr-shell{
 position:relative;z-index:1;
 box-sizing:border-box;
 width:60%;height:60%;
 max-width:none;max-height:none;min-width:0;
 aspect-ratio:1;margin:0;
 border:10px solid #f6f8f5;border-radius:5px;
 background:#fff;
 color:#334b3b;
 display:grid;place-content:center;justify-items:center;gap:6px;
 text-align:center;
 box-shadow:0 0 0 1px #cad5cb,0 0 0 5px #0b1210,0 4px 14px #000b;
}
#qr-window-preview .qr-titanium-dial .qr-shell svg{
 width:72px;height:72px;stroke:#415b50
}
#qr-window-preview .qr-titanium-dial .qr-shell strong{
 font-size:14px;line-height:1.3;color:#35453c
}
#qr-window-preview .qr-titanium-dial .qr-shell span{
 font-size:11px;line-height:1.25;color:#65776c
}
@media(max-width:600px){
 #qr-window-preview .qr-titanium-dial{
   width:min(338px,calc(100vw - 73px));
   margin:17px auto 13px;
 }
 #qr-window-preview .qr-titanium-dial::before{inset:12px}
 #qr-window-preview .qr-titanium-dial .qr-shell{width:60%;height:60%;border-width:7px}
 #qr-window-preview .qr-titanium-dial .qr-shell svg{width:clamp(40px,10vw,64px);height:clamp(40px,10vw,64px)}
 #qr-window-preview .qr-titanium-dial .qr-shell strong{font-size:clamp(10px,3vw,13px)}
 #qr-window-preview .qr-titanium-dial .qr-shell span{font-size:clamp(9px,2.4vw,11px)}
}


/* QR ROUND WINDOW R1 — exact original 2048x2048 RGBA asset, easily replaceable.
   No CSS-painted replacement ring, no real QR or tokens. */
#qr-window-preview.qr-round-window{
 --qr-master-image:url("./assets/aerilis-qr-window-base-r2.png");
 --qr-size:min(94vw,86dvh,710px);
 display:none;width:var(--qr-size);height:var(--qr-size);
 max-width:none;max-height:none;min-width:0;
 padding:0;margin:auto;box-sizing:border-box;
 border:0;border-radius:50%;overflow:hidden;box-shadow:none;
 color:#2a3a30;background:transparent var(--qr-master-image) center/100% 100% no-repeat;
 isolation:isolate;
}
#qr-window-preview.qr-round-window[open]{display:block}
#qr-window-preview.qr-round-window::backdrop{background:rgba(0,0,0,.87)}
#qr-window-preview .qr-round-close{
 position:absolute;top:16.5%;left:73%;width:6%;height:6%;
 padding:0;min-width:0;min-height:0;z-index:8;
 display:grid;place-items:center;border-radius:50%;
 color:#edf2ed;background:#111a16;border:1px solid #82958a;
 font-size:clamp(15px,2.5vw,25px);font-weight:400;
 box-shadow:inset 0 1px 0 #edf2ed77;cursor:pointer
}
#qr-window-preview .qr-round-header{
 position:absolute;left:17%;top:18%;width:66%;height:13%;z-index:3;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:7%;text-align:center;pointer-events:none
}
#qr-window-preview .qr-round-kicker{
 font:400 clamp(7px,.9vw,10px) "Aerilis Michroma","Segoe UI",sans-serif;
 letter-spacing:.06em;color:#68766e;white-space:nowrap
}
#qr-window-preview .qr-round-header h2{
 margin:0;padding:0;font:400 clamp(11px,1.6vw,18px) "Aerilis Michroma","Segoe UI",sans-serif;
 line-height:1.25;letter-spacing:.005em;white-space:nowrap;
 background:none;filter:none;color:#2b4034;-webkit-text-fill-color:#2b4034
}
#qr-window-preview .qr-round-code{
 position:absolute;top:33%;left:29%;width:42%;height:39%;
 box-sizing:border-box;padding:3% 1%;z-index:2;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;
 background:#fff;border:1px solid #edf0ed;border-radius:2px;
 color:#334c3d;text-align:center
}
#qr-window-preview .qr-round-code svg{width:29%;height:29%;flex:none;fill:none;stroke:#455d4e;stroke-width:3}
#qr-window-preview .qr-round-code strong{
 font:650 clamp(10px,1.5vw,16px) "Segoe UI Variable","Segoe UI",sans-serif;
 white-space:nowrap;color:#374a3e
}
#qr-window-preview .qr-round-code span{font-size:clamp(8px,1.1vw,12px);color:#718176;white-space:nowrap}
#qr-window-preview .qr-round-instruction{
 position:absolute;left:17%;top:74%;width:66%;margin:0;
 text-align:center;white-space:nowrap;line-height:1.2;
 font:400 clamp(8px,1.06vw,12px) "Aerilis Michroma","Segoe UI",sans-serif;
 color:#36493b
}
#qr-window-preview .qr-round-devices{
 position:absolute;left:22%;top:77.4%;width:56%;margin:0;
 font-size:clamp(9px,1.05vw,12px);line-height:1.2;
 color:#68786e;text-align:center;white-space:nowrap
}
#qr-window-preview .qr-round-details{
 position:absolute;left:25%;top:82%;width:50%;height:6.8%;z-index:6;
 color:#33473c
}
#qr-window-preview .qr-round-details summary{
 width:100%;height:100%;box-sizing:border-box;list-style:none;
 display:flex;align-items:center;justify-content:center;
 font:600 clamp(9px,1.05vw,12px) "Segoe UI Variable","Segoe UI",sans-serif;
 color:#34473b;letter-spacing:.03em;cursor:pointer;
 border-top:1px solid #aebeb1;background:transparent
}
#qr-window-preview .qr-round-details summary::-webkit-details-marker{display:none}
#qr-window-preview .qr-round-details[open] summary{background:#edf2ed;border:1px solid #b1c2b4;border-radius:4px}
#qr-window-preview .qr-round-details-panel{
 position:absolute;left:-5%;bottom:108%;width:110%;padding:10px;
 box-sizing:border-box;background:#f6f8f5;border:1px solid #9db0a1;
 border-radius:7px;box-shadow:0 9px 18px #0005;
 font-size:10px;line-height:1.45;color:#314a39
}
#qr-window-preview .qr-detail-row{
 display:flex;align-items:center;justify-content:space-between;gap:7px;
 padding:6px 0;border-bottom:1px solid #c9d5ca
}
#qr-window-preview .qr-detail-row strong{font-size:10px;text-align:right}
#qr-window-preview .qr-detail-actions{display:flex;gap:6px;margin-top:9px}
#qr-window-preview .qr-detail-actions button{
 flex:1;min-width:0;cursor:not-allowed;opacity:1;
 padding:7px 4px;border:1px solid #a4b7a8;border-radius:4px;
 color:#596a5e;background:#e0e8e0;box-shadow:none;font-size:10px
}
#qr-window-preview .qr-round-details-panel p{margin:9px 0 0;font-size:10px;color:#697c70}
@media(max-width:530px){
 #qr-window-preview .qr-round-kicker{font-size:clamp(6px,1.8vw,9px)}
 #qr-window-preview .qr-round-header h2{font-size:clamp(9px,2.65vw,15px)}
 #qr-window-preview .qr-round-code strong{font-size:clamp(9px,3vw,13px)}
 #qr-window-preview .qr-round-code span{font-size:clamp(7px,2vw,10px)}
 #qr-window-preview .qr-round-instruction{font-size:clamp(7px,2vw,10px)}
 #qr-window-preview .qr-round-devices{font-size:clamp(8px,2vw,10px)}
}

/* QR ROUND WINDOW — PRESENTATION R2: retain original R1 master artwork unchanged.
   Real QR will replace the single square foreground element in WPF. */
#qr-window-preview .qr-round-header{
 top:18.7%;height:11.8%;gap:7%;
}
#qr-window-preview .qr-round-header h2{
 font-size:clamp(12px,1.7vw,19px);letter-spacing:0;
}
#qr-window-preview .qr-round-close{
 top:18.5%;left:78%;width:5.1%;height:5.1%;
 font-size:clamp(14px,2vw,20px);border-color:#6e8275;
 box-shadow:inset 0 1px 0 #edf2ed65,0 2px 5px #0005
}
#qr-window-preview .qr-round-code{
 top:32%;left:28.5%;width:43%;height:43%;
 display:grid;place-items:center;padding:4% 3%;gap:0;
 border:1px solid #e5eae6;border-radius:1px;
 background:#fff;box-shadow:0 0 0 1px #d7dfd8;
}
#qr-window-preview .qr-round-code .qr-round-graphic{
 display:block;width:100%;height:100%;max-width:none;max-height:none;
 fill:none;stroke:none;overflow:visible
}
#qr-window-preview .qr-round-instruction{
 top:75.6%;font-size:clamp(9px,1.12vw,13px);
 color:#34483b
}
#qr-window-preview .qr-round-devices{top:78.4%}
#qr-window-preview .qr-round-details{top:81%;height:5%}
#qr-window-preview .qr-round-details summary{
 border-top:1px solid #a7b8ab;color:#314739;
}
@media(max-width:530px){
 #qr-window-preview .qr-round-header h2{font-size:clamp(10px,2.8vw,15px)}
 #qr-window-preview .qr-round-instruction{font-size:clamp(8px,2.2vw,11px)}
}

/* R2 finishing: reduce the lower titanium separator without reducing
   the clickable CONNECTION OPTIONS target. R2 artwork remains unedited. */
#qr-window-preview .qr-round-details summary{
 position:relative;border-top:0;
}
#qr-window-preview .qr-round-details summary::before{
 content:"";position:absolute;top:0;left:17.5%;width:65%;height:1px;
 background:linear-gradient(90deg,transparent,#a7b8ab 25%,#a7b8ab 75%,transparent);
 pointer-events:none;
}


/* QR WINDOW R2 — TWO EXCLUSIVE VIEWS
   The circle is always the original PNG R2. Only its safe white interior changes.
   Connection options REPLACE the QR; no popovers, overlap or backend calls. */
#qr-window-preview [hidden]{display:none!important}
#qr-window-preview .qr-round-options-panel{
 position:absolute;top:32.7%;left:24.5%;width:51%;height:44%;
 box-sizing:border-box;padding:1.2% 0;z-index:6;
 display:flex;flex-direction:column;justify-content:space-between;
 align-items:stretch;background:transparent;color:#33483a;
 text-align:center;
}
#qr-window-preview .qr-options-caption{
 font:400 clamp(8px,1.17vw,13px) "Aerilis Michroma","Segoe UI",sans-serif;
 line-height:1.35;letter-spacing:.018em;color:#354d3d;
 padding:0 0 3%;white-space:nowrap;
}
#qr-window-preview .qr-option-row{
 flex:1;min-height:0;display:flex;align-items:center;
 justify-content:space-between;gap:3%;padding:1% 1%;
 border-bottom:1px solid #d3dcd3;
 font-size:clamp(8px,1.05vw,12px);line-height:1.15;
}
#qr-window-preview .qr-option-row span{
 color:#68796d;font-weight:500;text-align:left;white-space:nowrap;
}
#qr-window-preview .qr-option-row strong{
 color:#324838;font-weight:650;text-align:right;white-space:nowrap;
}
#qr-window-preview .qr-option-actions{
 display:grid;grid-template-columns:1fr 1fr;gap:5%;
 width:100%;margin-top:5%;min-height:21%;
}
#qr-window-preview .qr-option-actions button{
 min-width:0;height:100%;margin:0;padding:3%;
 border:1px solid #a6b8aa;border-radius:4px;
 background:linear-gradient(#e9eee8,#dce6dc);
 box-shadow:inset 0 1px 0 #fff9;
 font:600 clamp(7px,.9vw,10px) "Segoe UI Variable","Segoe UI",sans-serif;
 color:#627164;line-height:1.2;opacity:1;cursor:not-allowed;
}
#qr-window-preview .qr-options-note{
 margin:4% 0 0;padding:0 3%;
 font-size:clamp(7px,.95vw,10px);line-height:1.35;color:#718073;
}
#qr-window-preview .qr-round-nav{
 position:absolute;left:25%;top:81%;width:50%;height:5%;
 display:flex;align-items:center;justify-content:center;
 border:0;border-radius:0;background:transparent;
 padding:0;margin:0;box-shadow:none;cursor:pointer;z-index:7;
 color:#304637;
 font:600 clamp(9px,1.05vw,12px) "Segoe UI Variable","Segoe UI",sans-serif;
 letter-spacing:.035em;
}
#qr-window-preview .qr-round-nav::before{
 content:"";position:absolute;left:17.5%;top:0;
 width:65%;height:1px;pointer-events:none;
 background:linear-gradient(90deg,transparent,#a7b8ab 25%,#a7b8ab 75%,transparent);
}
#qr-window-preview .qr-round-nav:hover{color:#0b2e19;background:transparent}
#qr-window-preview .qr-round-nav:focus-visible{
 outline:2px solid #5bfd3d;outline-offset:1px
}
@media(max-width:530px){
 #qr-window-preview .qr-options-caption{font-size:clamp(8px,2.05vw,10px)}
 #qr-window-preview .qr-option-row{font-size:clamp(7px,1.9vw,10px)}
 #qr-window-preview .qr-option-actions button{font-size:clamp(7px,1.75vw,9px)}
 #qr-window-preview .qr-options-note{font-size:clamp(7px,1.65vw,9px)}
 #qr-window-preview .qr-round-nav{font-size:clamp(9px,2vw,11px)}
}

/* QR ROUND VIEW — COUNTDOWN VALUE ONLY
   Static 00:58 preview. Windows already owns _expiresAt and renewal;
   no independent timer or CORE connection is introduced here. */
#qr-window-preview .qr-round-code{
 top:31%;left:30%;width:40%;height:40%;
}
#qr-window-preview .qr-round-countdown{
 position:absolute;left:30%;top:72.5%;width:40%;height:4.5%;z-index:5;
 display:flex;align-items:center;justify-content:center;
 padding:0;margin:0;line-height:1.1;white-space:nowrap;
 pointer-events:none;color:#65746a
}
#qr-window-preview .qr-countdown-value{
 font:400 clamp(15px,1.8vw,21px) "Aerilis Michroma","Segoe UI",sans-serif;
 line-height:1.1;letter-spacing:.02em;color:#65746a
}
#qr-window-preview .qr-round-countdown[data-state="warning"] .qr-countdown-value{color:#FF9800}
#qr-window-preview .qr-round-countdown[data-state="critical"] .qr-countdown-value,
#qr-window-preview .qr-round-countdown[data-state="expired"] .qr-countdown-value{color:#FF2020}
#qr-window-preview .qr-round-instruction{
 top:77.2%;font-size:clamp(8px,1.07vw,12px)
}
#qr-window-preview .qr-round-devices{
 top:79.7%;font-size:clamp(8px,.93vw,11px)
}
#qr-window-preview .qr-round-nav{
 top:82.2%;height:4%;font-size:clamp(9px,1vw,11px)
}
@media(max-width:530px){
 #qr-window-preview .qr-countdown-value{font-size:clamp(13px,3.3vw,19px)}
 #qr-window-preview .qr-round-instruction{font-size:clamp(8px,1.95vw,10px)}
 #qr-window-preview .qr-round-devices{font-size:clamp(7px,1.78vw,9px)}
 #qr-window-preview .qr-round-nav{font-size:clamp(8px,1.9vw,10px)}
}