/* ═══════════════════════════════════════════════
   IronQx Clinical & Performance Coaching
   03-layout — Topbar, Bottom Nav, Section Label
   AUTO-EXTRACTED — safe to edit individually
═══════════════════════════════════════════════ */


/* TOPBAR */
.topbar{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;padding-top:calc(10px + var(--safe-t));
  background:rgba(5,8,12,.98);
  backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
  border-bottom:1px solid rgba(212,146,14,.08);
  flex-shrink:0;z-index:10;min-height:52px;
  box-shadow:0 1px 0 rgba(212,146,14,.06),0 4px 24px rgba(0,0,0,.4);
  position:relative
}
.topbar::after{
  content:"";position:absolute;bottom:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,146,14,.18),transparent);
  pointer-events:none
}
.tb-logo{height:26px;width:auto;min-width:34px;filter:drop-shadow(0 1px 10px rgba(212,146,14,.28))}
.tb-wm{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:900;letter-spacing:4px;color:var(--gold);text-transform:uppercase;line-height:1}
.tb-sub{font-size:9.5px;letter-spacing:1.8px;color:rgba(212,146,14,.45);text-transform:uppercase;margin-top:2px;font-family:"DM Mono",monospace}
.tb-r{display:flex;align-items:center;gap:6px;margin-left:auto}
.ibtn{width:36px;height:36px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;transition:all .17s cubic-bezier(.32,1,.36,1);flex-shrink:0;position:relative;appearance:none;-webkit-appearance:none;font-family:inherit;color:inherit;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
.ibtn:active{transform:scale(.86);background:rgba(212,146,14,.1);border-color:rgba(212,146,14,.25);box-shadow:0 0 0 2px rgba(212,146,14,.08)}
.iq-ic{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;color:currentColor;vertical-align:middle;flex-shrink:0}
.iq-ic svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iq-ic.fill svg{fill:currentColor;stroke:none}
.iq-ic.stroke-light svg{stroke-width:1.7}
.iq-ic.sm{width:.95em;height:.95em}
.iq-ic.lg{width:1.3em;height:1.3em}
.iq-ic.xl{width:1.6em;height:1.6em}
.iq-ic.gold{color:var(--gold)}
.iq-ic.blue{color:var(--blue)}
.iq-ic.green{color:var(--green)}
.iq-ic.red{color:var(--red)}
.iq-ic.amber{color:var(--amber)}
.iq-ic.muted{color:var(--muted)}
.ibtn .iq-ic{width:18px;height:18px;color:var(--silver)}
.dot-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;background:var(--red);border-radius:99px;border:2px solid var(--bg);display:none;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;padding:0 3px;font-family:"DM Mono",monospace}
.dot-badge.on{display:flex}

/* BOTTOM NAV */
#bnav{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:rgba(4,6,10,.99);
  backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
  border-top:1px solid rgba(212,146,14,.07);
  padding:5px 0 calc(5px + var(--safe-b));display:none;
  box-shadow:0 -12px 40px rgba(0,0,0,.6),0 -1px 0 rgba(212,146,14,.05)
}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 4px;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.ni-ic{font-size:20px;line-height:1;transition:transform .22s cubic-bezier(.32,1,.36,1),color .2s;position:relative;display:flex;align-items:center;justify-content:center;min-height:22px;color:var(--silver2)}
.ni-ic .iq-ic{width:20px;height:20px;transition:filter .25s}
.ni-lb{font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--muted);transition:color .2s,opacity .2s;text-transform:uppercase}
.ni-bar{position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:2.5px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .28s cubic-bezier(.22,1,.36,1)}
.ni-glow{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:32px;height:20px;background:radial-gradient(ellipse,rgba(212,146,14,.18) 0%,transparent 70%);border-radius:50%;opacity:0;transition:opacity .28s;pointer-events:none}
.ni.on .ni-lb{color:var(--gold);opacity:1}
.ni.on .ni-ic{color:var(--gold);transform:translateY(-3px) scale(1.12)}
.ni.on .ni-ic .iq-ic{filter:drop-shadow(0 0 5px rgba(212,146,14,.5))}
.ni.on .ni-bar{opacity:1;width:32px}
.ni.on .ni-glow{opacity:1}
.ni-pip{position:absolute;top:-2px;right:-4px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--bg);display:none}
.ni-pip.on{display:block;animation:bounce-in .3s ease}

/* SECTION LABEL */
.sl{
  font-size:9.5px;font-weight:700;letter-spacing:2.8px;text-transform:uppercase;
  color:rgba(82,87,106,.9);margin:20px 0 10px;padding-left:1px;
  display:flex;align-items:center;gap:7px;font-family:"DM Mono",monospace
}
.sl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(42,45,56,.8),transparent)}
.sl:first-child{margin-top:2px}
.sl .iq-ic{width:13px;height:13px;color:var(--gold);opacity:.8}