:root{
  --bg:#eceff1;
  --panel-border:#b7bec5;
  --text:#20293a;
  --muted:#4b5563;
  --input-border:#9aa3ad;
  --input-bg:#ffffff;
  --input-disabled-bg:#e6e9ec;
  --input-disabled-text:#8a929b;
  --accent1:#1f3b73;
  --accent2:#2f6690;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  /*Made the body transparent so the layers show through */
  background: transparent;
  color:var(--text);
  font-family:'Segoe UI', Roboto, system-ui, -apple-system, Arial, sans-serif;
  font-size:14px;
  line-height:1.35;
}


.app-shell{
  max-width:1080px;
  margin:12px auto;
  padding:72px 0 40px;
  background:
    linear-gradient(165deg, rgba(248, 251, 255, 0.92) 0%, rgba(233, 240, 249, 0.9) 50%, rgba(227, 235, 246, 0.88) 100%),
    radial-gradient(1200px 420px at 10% -20%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 65%);
  box-shadow: 0 24px 60px rgba(8, 23, 53, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(168, 186, 216, 0.35);
  border-radius: 14px;
  overflow: hidden;
  min-height: calc(100vh - 24px);
  position: relative;
  backdrop-filter: blur(2px);
}

/* ---------- Header / branding ---------- */
.header-bar{
  background:linear-gradient(135deg,#0e1c38,#1c3a68);
  padding:26px 20px 22px;
  margin-bottom:18px;
}
.brand-row{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;}
.brand{color:#fff;text-align:left;display:flex;align-items:center;gap:12px;}
.brand .mark{font-size:28px;font-weight:800;letter-spacing:2px;line-height:1;}
.brand .sub{font-size:10.5px;letter-spacing:3px;opacity:.72;margin-top:4px;text-transform:uppercase;}
.brand.qf .mark{font-size:22px;letter-spacing:1.5px;}
.brand.qf .sub{letter-spacing:2.5px;}
.atom-icon{flex:0 0 auto;}
.app-title{
  text-align:center;color:#c9d6ee;font-size:12px;letter-spacing:1px;
  margin-top:14px;opacity:.85;
}

/* ---------- Panels (mimic ttk LabelFrame groupboxes) ---------- */
.panel{
  position:relative;
  border:1px solid var(--panel-border);
  border-radius:6px;
  padding:20px 18px 16px;
  margin:0 16px 16px;
  background:transparent;
}
.panel > .legend{
  position:absolute;top:-11px;left:12px;
  background:var(--bg);
  padding:0 8px;
  font-weight:700;font-size:14.5px;color:var(--text);
}
.panel.nested{margin:10px 0 14px;background:transparent;}
.panel.nested > .legend{background:var(--bg);}

/* ---------- Form grid (label left, control right, shared column width per panel) ---------- */
.form-grid{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:14px;
  row-gap:9px;
  align-items:center;
}
.form-grid > label{font-size:13.5px;color:var(--text);white-space:nowrap;}
.span2{grid-column:1 / -1;}

input[type="text"], input[type="number"], select{
  width:100%;
  font:inherit;font-size:13.5px;
  padding:6px 8px;
  border:1px solid var(--input-border);
  border-radius:3px;
  background:var(--input-bg);
  color:var(--text);
}
select{appearance:auto;}
input:disabled, select:disabled{
  background:var(--input-disabled-bg);
  color:var(--input-disabled-text);
}
input:focus, select:focus{outline:2px solid #8fb2e6;outline-offset:0;}

.note-text{
  grid-column:1 / -1;
  font-size:12.3px;color:var(--muted);
  line-height:1.5;white-space:pre-line;
  margin:2px 0 2px;
}

/* ---------- Circuit elements section (equations + sketch) ---------- */
.circuit-body{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-top:8px;}
.circuit-controls{flex:1 1 440px;min-width:280px;}
.equation-row{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 14px;}
.eq-box{
  flex:1 1 250px;position:relative;
  border:1px solid var(--panel-border);border-radius:6px;
  padding:12px 12px 10px;background:transparent;
}
.eq-box > .legend{
  position:absolute;top:-9px;left:10px;background:var(--bg);
  padding:0 6px;font-size:12px;font-weight:700;color:#33415a;
}
.eq-box pre{
  margin:4px 0 0;font-family:'Segoe UI', system-ui, sans-serif;
  font-size:12.2px;line-height:1.6;white-space:pre-line;color:#20293a;
}
.sketch-col{flex:0 0 260px;}
.sketch-box{
  border:1px solid #c7c7c7;border-radius:6px;background:#fff;
  padding:8px;
}
.sketch-box svg{width:100%;height:auto;display:block;}

/* ---------- Two-column layout: inputs left, output right ---------- */
.columns{display:grid;grid-template-columns:3fr 2fr;gap:0;align-items:start;}
@media (max-width:880px){ .columns{grid-template-columns:1fr;} }

.calc-btn{
  display:block;width:calc(100% - 32px);margin:4px 16px 16px;
  padding:12px;font-size:15px;font-weight:700;letter-spacing:.3px;
  color:#fff;background:#003A40;
  border:none;border-radius:8px;cursor:pointer;
}
.calc-btn:hover{filter:brightness(1.08);}
.calc-btn:active{transform:translateY(1px);}

.btn-back {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 20;
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: normal;
  border-radius: 8px;
  border: 1px solid #003A40;
  background: #003A40;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 58, 64, 0.36);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.btn-back:hover{filter:brightness(1.08);transform:translateY(-1px);}

.corner-logo {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 20;
  pointer-events: none;
  width: 250px;
}
.corner-logo img {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  filter: url(#logo-color-filter);
}

.output-list p{margin:7px 0;font-size:13px;line-height:1.5;color:#20293a;word-break:break-word;}

/* ---------- Alert banner (mirrors messagebox.showerror/showwarning) ---------- */
.alert-banner{
  margin:0 16px 16px;padding:12px 40px 12px 14px;border-radius:6px;
  position:relative;font-size:13px;line-height:1.5;
}
.alert-error{background:#fdecea;border:1px solid #f3a6a0;color:#7a1f1a;}
.alert-warning{background:#fff6e0;border:1px solid #f0d385;color:#6b4e00;}
.alert-banner strong{display:block;margin-bottom:4px;font-size:13.5px;}
.alert-close{
  position:absolute;top:6px;right:8px;background:#003A40;border:1px solid #003A40;
  font-size:16px;line-height:1;cursor:pointer;color:#fff;border-radius:8px;padding:2px 6px;
}

.page-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(7, 18, 44, 0.72), rgba(16, 35, 77, 0.62));
  backdrop-filter: blur(2px);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.page-loading-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loading-card {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(191, 206, 228, 0.5);
  background: rgba(20, 22, 58, 0.78);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.loading-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(191, 206, 228, 0.35);
  border-top-color: #bfcee4;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.svg-defs { position: absolute; }
.landing-backdrops-fixed { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; }
.plain-link { text-decoration: none; }

#lbl_resonator_f0,
#entry_resonator_target_f0,
#lbl_resonator_z0,
#entry_resonator_target_z0,
#sketch_circular,
#sketch_resonator,
#circular_pad_frame,
#resonator_frame,
#alert_banner {
  display: none;
}