/* ══════════════════════════════════════════════════════════════════════════
   BitCommunication — EXTRAS stylesheet (standalone)
   ══════════════════════════════════════════════════════════════════════════
   Pairs with bitcom-extras.js. Kept separate from style.css for the same reason
   the JS is separate: a broken rule or a stale cached copy of the big file
   cannot take these features down.

   All colours are literal — no dependency on the CSS variables declared in
   style.css, so this renders correctly even if that file fails to load.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════ HOME ANSWER BOX ══════════ */
.bx{
  margin: 0 0 26px;
  position: relative;
}
.bx-head{ margin-bottom: 14px }
.bx-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; margin-bottom: 10px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #d8ccff;
}
.bx-chip .bx-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80; box-shadow: 0 0 8px #4ADE80;
  animation: bxPulse 2s ease-in-out infinite;
}
@keyframes bxPulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
.bx-title{
  font-size: clamp(22px, 3.2vw, 32px); font-weight: 800; line-height: 1.12;
  letter-spacing: -.03em; margin: 0; color: #F4F7FB;
}

/* Ask / Image switch */
.bx-modes{
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 10px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
}
.bx-mode{
  border: 0; background: transparent; color: #A7B0C0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 650;
  padding: 8px 18px; border-radius: 9px;
  transition: background .2s ease, color .2s ease;
}
.bx-mode:hover{ color: #fff; background: rgba(255,255,255,.07) }
.bx-mode.on{
  color: #fff;
  background: linear-gradient(135deg, #7C5CFF, #22D3EE);
  box-shadow: 0 4px 14px rgba(124,92,255,.35);
}

.bx-composer{
  border-radius: 18px; padding: 2px;
  background: linear-gradient(135deg, rgba(124,92,255,.55), rgba(34,211,238,.45) 55%, rgba(255,79,216,.5));
}
.bx-composer > textarea,
#bxInput{
  display: block; width: 100%; box-sizing: border-box;
  min-height: 86px; max-height: 260px; resize: none;
  padding: 16px 16px 10px;
  border: 0; outline: none;
  border-radius: 16px 16px 0 0;
  background: #0c0c1c; color: #F4F7FB;
  font-family: inherit; font-size: 16px; line-height: 1.6;
}
#bxInput::placeholder{ color: #5f6273 }
.bx-bar{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 12px;
  background: #0c0c1c; border-radius: 0 0 16px 16px;
}
.bx-count{ font-size: 11.5px; color: #6F7A90; margin-right: auto }
.bx-run{
  border: 0; cursor: pointer;
  padding: 11px 22px; border-radius: 11px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7C5CFF, #22D3EE);
  box-shadow: 0 6px 20px rgba(124,92,255,.4);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, opacity .2s;
}
.bx-run:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,211,238,.45) }
.bx-run:disabled{ opacity: .6; cursor: progress }
.bx-kbd{
  font-size: 10.5px; font-weight: 700; opacity: .8;
  padding: 2px 6px; margin-left: 4px;
  border-radius: 5px; background: rgba(0,0,0,.3);
}

.bx-chips{ display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0 }
.bx-q{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: #A7B0C0;
  cursor: pointer; font-family: inherit; font-size: 12.5px;
  padding: 7px 13px; border-radius: 999px;
  transition: background .2s, color .2s, transform .2s;
}
.bx-q:hover{ background: rgba(255,255,255,.12); color: #fff; transform: translateY(-1px) }

/* the answer panel — deliberately right under the prompt */
.bx-outwrap{
  margin-top: 18px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(12,12,26,.6);
}
.bx-outhead{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.24);
}
.bx-outhead b{ font-size: 13px; font-weight: 650; color: #F4F7FB; margin-right: auto }
.bx-mini{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #A7B0C0;
  cursor: pointer; font-family: inherit; font-size: 11.5px;
  padding: 5px 11px; border-radius: 8px;
  transition: background .2s, color .2s;
}
.bx-mini:hover{ background: rgba(255,255,255,.14); color: #fff }
.bx-out{
  padding: 20px 22px;
  min-height: 200px; max-height: 62vh; overflow-y: auto;
  font-size: 14.5px; line-height: 1.7; color: #C9CDD8;
}
.bx-empty{ color: #6F7A90; font-size: 13.5px; margin: 0 }
.bx-err{ color: #fca5a5; font-size: 13.5px; margin: 0; line-height: 1.6 }
.bx-err small{ color: #8b8e9e }

.bx-md h4{ font-size: 16px; font-weight: 700; color: #F4F7FB; margin: 18px 0 8px }
.bx-md h4:first-child{ margin-top: 0 }
.bx-md p{ margin: 0 0 12px }
.bx-md b{ color: #fff }
.bx-md ul{ margin: 0 0 13px; padding-left: 20px }
.bx-md li{ margin-bottom: 6px }
.bx-md code{
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px;
  background: rgba(255,255,255,.09); padding: 2px 6px; border-radius: 5px; color: #e9d5ff;
}
.bx-pre{
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px; padding: 13px 15px; margin: 0 0 13px;
  overflow-x: auto; white-space: pre; color: #e5e7eb; line-height: 1.6;
}

.bx-skel{
  height: 15px; border-radius: 7px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.13) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
  animation: bxShimmer 1.3s ease-in-out infinite;
}
.bx-skel.w90{ width: 90% } .bx-skel.w75{ width: 75% }
.bx-skel.imgskel{ height: 320px; border-radius: 14px }
@keyframes bxShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Generated image + the follow-up hint */
.bx-imgwrap{ display: block }
.bx-img{
  display: block; width: 100%; max-width: 640px; height: auto;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.12);
}
.bx-imgbar{
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 11px;
}
.bx-imgp{
  font-size: 12.5px; color: #A7B0C0; margin-right: auto;
  max-width: 100%; overflow-wrap: anywhere;
}
.bx-imgbar .bx-mini{ text-decoration: none; display: inline-block }
.bx-imghint{
  margin: 12px 0 0; padding: 10px 12px;
  border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: #A7B0C0;
  background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.3);
}
.bx-imghint b{ color: #fff }

/* "In context: the image you generated" note under a follow-up answer */
.bx-ctx{
  margin: 14px 0 0; padding-top: 11px; font-size: 12px; color: #6F7A90;
  border-top: 1px solid rgba(255,255,255,.09);
}

@media(max-width: 768px){
  #bxInput{ font-size: 15.5px; min-height: 74px; padding: 13px 13px 8px }
  .bx-out{ padding: 15px; min-height: 150px; max-height: none }
  .bx-run{ flex: 1 }
  .bx-bar{ flex-wrap: wrap }
}

/* ══════════ PRE-LOGIN SITE ASSISTANT ══════════ */
/* The landing page is a fixed overlay at z-index 100002 and the splash sits
   above that, so this must be higher than both or it is simply painted behind
   them and looks like it never appeared. Using a very high value so no future
   overlay can bury it either. */
#bxaRoot{
  position: fixed; right: 22px; bottom: 22px;
  z-index: 2147483000;
}

.bxa-fab{
  display: inline-flex; align-items: center; gap: 9px; position: relative;
  padding: 13px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7C5CFF, #22D3EE);
  box-shadow: 0 10px 30px rgba(124,92,255,.45);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, opacity .2s;
}
.bxa-fab:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(34,211,238,.5) }
.bxa-fab-i{ font-size: 17px; line-height: 1 }
.bxa-fab-dot{
  position: absolute; top: 10px; right: 13px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ADE80; box-shadow: 0 0 8px #4ADE80;
  animation: bxPulse 2s ease-in-out infinite;
}
#bxaRoot.is-open .bxa-fab{ opacity: 0; pointer-events: none; transform: translateY(10px) scale(.9) }

.bxa-panel{
  position: absolute; right: 0; bottom: 0;
  width: 380px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.14);
  background: #12142a;
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
  animation: bxaIn .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bxaIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }

.bxa-head{
  display: flex; align-items: center; gap: 11px; padding: 14px 15px;
  border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
}
.bxa-av{
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 17px;
  background: linear-gradient(135deg, #7C5CFF, #22D3EE);
}
.bxa-who{ flex: 1; min-width: 0 }
.bxa-who b{ display: block; font-size: 13.5px; font-weight: 700; color: #F4F7FB }
.bxa-who span{ display: block; font-size: 11px; color: #A7B0C0 }
.bxa-x{
  border: 0; background: rgba(255,255,255,.08); color: #A7B0C0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; font-size: 16px; flex: 0 0 auto;
  line-height: 1; transition: background .2s, color .2s;
}
.bxa-x:hover{ background: rgba(255,255,255,.16); color: #fff }

/* ── The close button did nothing ──────────────────────────────────────────
   .bxa-panel sets `display: flex`. The HTML `hidden` attribute is implemented
   by the browser's own stylesheet as `[hidden]{display:none}`, and ANY author
   `display:` declaration outranks it. So `panel.hidden = true` set the
   attribute, the panel kept its `display:flex`, and nothing moved: the popup
   could not be closed, and — worse — it was on screen from page load with an
   empty message area, because open() had never run to push the greeting.
   It also swallowed clicks meant for the FAB underneath it.
   Every other collapsible in this project already pairs the two (see
   .bcs-opts[hidden], .vm-overlay[hidden], .auth-gate[hidden]). This one was
   missed. RULE: if you style a element's `display`, give it a [hidden] rule. */
.bxa-panel[hidden]{ display: none !important; }


.bxa-log{
  padding: 15px; overflow-y: auto; height: 320px; max-height: 46vh;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13.5px; line-height: 1.6;
}
.bxa-msg{ max-width: 88%; padding: 10px 13px; border-radius: 14px }
.bxa-msg p{ margin: 0 0 8px } .bxa-msg p:last-child{ margin: 0 }
.bxa-msg ul{ margin: 4px 0 8px; padding-left: 18px }
.bxa-msg li{ margin-bottom: 4px }
.bxa-msg b{ color: #fff }
.bxa-msg h4{ font-size: 14px; color: #fff; margin: 6px 0 4px }
.bxa-user{
  align-self: flex-end; color: #fff;
  background: linear-gradient(135deg, #7C5CFF, #6D4DF2);
  border-bottom-right-radius: 5px;
}
.bxa-assistant{
  align-self: flex-start; color: #D7DBE6;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09);
  border-bottom-left-radius: 5px;
}
.bxa-typing{ display: flex; gap: 5px; align-items: center; padding: 13px }
.bxa-typing span{
  width: 6px; height: 6px; border-radius: 50%; background: #8b8e9e;
  animation: bxaDot 1.2s ease-in-out infinite;
}
.bxa-typing span:nth-child(2){ animation-delay: .18s }
.bxa-typing span:nth-child(3){ animation-delay: .36s }
@keyframes bxaDot{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)} }

.bxa-quick{ display: flex; gap: 6px; padding: 0 13px 11px; flex-wrap: wrap }
.bxa-q{
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #A7B0C0; cursor: pointer; font-family: inherit; font-size: 11.5px;
  padding: 6px 11px; border-radius: 999px; transition: background .2s, color .2s;
}
.bxa-q:hover{ background: rgba(255,255,255,.12); color: #fff }

.bxa-form{
  display: flex; gap: 8px; padding: 11px 13px;
  border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.24);
}
.bxa-form input{
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 11px 13px; font-family: inherit; font-size: 13.5px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #F4F7FB; outline: none;
}
.bxa-form input:focus{ border-color: rgba(124,92,255,.7); box-shadow: 0 0 0 3px rgba(124,92,255,.16) }
.bxa-form input::placeholder{ color: #6F7A90 }
.bxa-send{
  flex: 0 0 42px; width: 42px; border: 0; border-radius: 11px; cursor: pointer;
  color: #fff; font-size: 14px; background: linear-gradient(135deg, #7C5CFF, #22D3EE);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.bxa-send:hover{ transform: translateY(-1px) }
.bxa-foot{ margin: 0; padding: 0 13px 12px; font-size: 10.5px; color: #6F7A90; text-align: center }

@media(max-width: 520px){
  #bxaRoot{ right: 14px; bottom: 14px; left: 14px }
  .bxa-fab{ width: 100%; justify-content: center }
  .bxa-panel{ width: 100%; right: 0 }
  .bxa-log{ height: 44vh }
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM RUNNER — proper centred overlay instead of an inline panel
   ══════════════════════════════════════════════════════════════════════════
   The problem: #premRunner sat INSIDE the Premium tab, below a grid of 15
   feature cards, and premOpen() called scrollIntoView() on it. So clicking any
   premium feature smooth-scrolled the whole page far down, the tool opened
   somewhere below the fold, and getting back to the cards meant scrolling all
   the way up again. On a laptop the tool often opened half off-screen.

   The fix is pure CSS plus one small JS change (page-scroll lock in
   bitcom-extras.js): the same element, same ids, same 15 PREM.* functions —
   but presented as a real modal that scrolls internally. Nothing inside it had
   to be rewritten.
   ══════════════════════════════════════════════════════════════════════════ */
#premRunner:not(.hidden){
  position: fixed !important;
  inset: 0 !important;
  z-index: 99800 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(4,4,12,.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  box-shadow: none !important;
  animation: premFade .22s ease both;
}
@keyframes premFade{ from{opacity:0} to{opacity:1} }

/* The header row and the body are wrapped visually into one sheet. Because we
   cannot add a wrapper element without touching the 15 PREM.* functions, the
   two direct children are laid out as a column and the sheet look is applied
   to them jointly. */
#premRunner:not(.hidden) > .row{
  position: sticky; top: 0; z-index: 2;
  order: 1;
  width: min(920px, calc(100% - 32px));
  margin: 28px auto 0 !important;
  padding: 16px 20px !important;
  box-sizing: border-box;
  background: #121428;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  align-items: center;
}
#premRunner:not(.hidden) > .row h3{
  font-size: 17px; font-weight: 700; color: #F4F7FB; margin: 0;
}
#premRunner:not(.hidden) > #premBody{
  order: 2;
  width: min(920px, calc(100% - 32px));
  margin: 0 auto 32px;
  padding: 20px 20px 24px;
  box-sizing: border-box;
  background: #0e1022;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

/* Close button — always reachable in the sticky header. */
#premRunner:not(.hidden) #premClose{
  margin-left: auto;
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08); color: #cfd3de;
  font-size: 15px; line-height: 1;
}
#premRunner:not(.hidden) #premClose:hover{ background: rgba(255,255,255,.18); color: #fff }

/* Stop the page behind from scrolling while the tool is open. */
body.prem-open{ overflow: hidden !important }

/* Canvases and wide tools inside must not overflow the sheet. */
#premRunner:not(.hidden) canvas,
#premRunner:not(.hidden) img,
#premRunner:not(.hidden) video{ max-width: 100%; height: auto }
#premRunner:not(.hidden) pre{ overflow-x: auto }

@media(max-width: 620px){
  #premRunner:not(.hidden) > .row{ margin-top: 12px !important; padding: 13px 15px !important }
  #premRunner:not(.hidden) > #premBody{ padding: 15px }
  #premRunner:not(.hidden) > .row,
  #premRunner:not(.hidden) > #premBody{ width: calc(100% - 20px) }
}

/* ══════════════════════════════════════════════════════════════════════════
   REMEMBER ME — checkbox under the sign-in fields
   ══════════════════════════════════════════════════════════════════════════
   The native checkbox is hidden but kept in the DOM (not display:none) so it
   stays keyboard-focusable and screen-reader accessible; .ag-rem-box is the
   visible control drawn in its place.
   ══════════════════════════════════════════════════════════════════════════ */
.ag-remember{
  display: flex; align-items: flex-start; gap: 11px;
  margin: 4px 0 14px; padding: 11px 13px;
  border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  transition: background .2s ease, border-color .2s ease;
  text-align: left;
}
.ag-remember:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18) }

.ag-remember input[type="checkbox"]{
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.ag-rem-box{
  flex: 0 0 19px; width: 19px; height: 19px; margin-top: 1px;
  border-radius: 6px; position: relative;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.05);
  transition: background .18s ease, border-color .18s ease;
}
.ag-rem-box::after{
  content: ''; position: absolute;
  left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.ag-remember input:checked ~ .ag-rem-box{
  background: linear-gradient(135deg, #7C5CFF, #22D3EE);
  border-color: transparent;
}
.ag-remember input:checked ~ .ag-rem-box::after{ transform: rotate(45deg) scale(1) }
.ag-remember input:focus-visible ~ .ag-rem-box{
  box-shadow: 0 0 0 3px rgba(124,92,255,.35);
}

.ag-rem-txt{ flex: 1; min-width: 0; line-height: 1.4 }
.ag-rem-txt b{
  display: block; font-size: 13.5px; font-weight: 650; color: #F4F7FB;
}
.ag-rem-txt small{
  display: block; font-size: 11.5px; color: #8b8e9e; margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM VIEW — removed on request
   ══════════════════════════════════════════════════════════════════════════
   The inline runner could not be made to behave, so the section is taken out of
   the interface. Done in CSS as well as JS so it stays hidden even if the
   script fails to run, and so there is no flash of it during page load.

   To bring Premium back: delete this block and the `if (true)` guard in
   bitcom-extras.js. Nothing was removed from index.html or script.js.
   ══════════════════════════════════════════════════════════════════════════ */
.tab[data-tab="premium"],
.sb-item[data-tab="premium"],
[data-go="premium"],
#premium,
#premRunner{
  display: none !important;
}
/* The overlay styling added earlier is now unnecessary; make sure it can never
   take over the page. */
body.prem-open{ overflow: auto !important }

/* ══════════════════════════════════════════════════════════════════════════
   EVERYTHING AFTER CLOUD — removed on request
   ══════════════════════════════════════════════════════════════════════════
   The 20 added tools and the Plans page were appended to the sidebar after
   Cloud. They are hidden here as well as in JS so they never flash on screen
   during load. The sidebar ends at Cloud, as it did before they existed.

   To bring them back: delete this block and the matching one in
   bitcom-extras.js (block 12).
   ══════════════════════════════════════════════════════════════════════════ */
.tab[data-tab="emailwriter"],  .sb-item[data-tab="emailwriter"],  #emailwriter,
.tab[data-tab="meetingnotes"], .sb-item[data-tab="meetingnotes"], #meetingnotes,
.tab[data-tab="resume"],       .sb-item[data-tab="resume"],       #resume,
.tab[data-tab="mealfit"],      .sb-item[data-tab="mealfit"],      #mealfit,
.tab[data-tab="travel"],       .sb-item[data-tab="travel"],       #travel,
.tab[data-tab="money"],        .sb-item[data-tab="money"],        #money,
.tab[data-tab="decide"],       .sb-item[data-tab="decide"],       #decide,
.tab[data-tab="social"],       .sb-item[data-tab="social"],       #social,
.tab[data-tab="vscript"],      .sb-item[data-tab="vscript"],      #vscript,
.tab[data-tab="blogseo"],      .sb-item[data-tab="blogseo"],      #blogseo,
.tab[data-tab="thumb"],        .sb-item[data-tab="thumb"],        #thumb,
.tab[data-tab="hashtag"],      .sb-item[data-tab="hashtag"],      #hashtag,
.tab[data-tab="newsletter"],   .sb-item[data-tab="newsletter"],   #newsletter,
.tab[data-tab="podcast"],      .sb-item[data-tab="podcast"],      #podcast,
.tab[data-tab="invoicegen"],   .sb-item[data-tab="invoicegen"],   #invoicegen,
.tab[data-tab="proposal"],     .sb-item[data-tab="proposal"],     #proposal,
.tab[data-tab="contract"],     .sb-item[data-tab="contract"],     #contract,
.tab[data-tab="salesmail"],    .sb-item[data-tab="salesmail"],    #salesmail,
.tab[data-tab="hrletter"],     .sb-item[data-tab="hrletter"],     #hrletter,
.tab[data-tab="swot"],         .sb-item[data-tab="swot"],         #swot,
.tab[data-tab="pricing"],      .sb-item[data-tab="pricing"],      #pricing,
#bcQuotaMeter,
#bcUpgrade{
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK AURORA THEME — removed on request
   ══════════════════════════════════════════════════════════════════════════
   The premium theme and its sidebar switch are taken out. The theme worked by
   putting `theme-aurora` on <body> and overriding the colour variables, plus two
   full-screen decorative layers (an aurora curtain and drifting particles).

   Neutralised here rather than deleted from style.css so that nothing else in
   that 5,700-line file has to be touched — and so it can be restored later by
   removing this block.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide the switch in the sidebar footer. */
#ccTheme,
.cc-theme{ display: none !important }

/* Kill the two decorative full-screen layers. These were the heaviest part of
   the theme (blur + infinite animation on a fixed layer), so removing them also
   takes load off lower-end machines. */
body.theme-aurora::before,
body.theme-aurora::after{ display: none !important; content: none !important }

/* Put the original palette back, in case the class is still on <body> from a
   previous visit. Values match the defaults in style.css. */
body.theme-aurora{
  --bg-0: #050510;
  --bg-1: #0a0a18;
  --bg-2: #101024;
  --surface-1: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.075);
  --surface-3: rgba(255,255,255,.11);
  --hairline: rgba(255,255,255,.10);
  --hairline-strong: rgba(255,255,255,.18);
  --text: #f4f4f7;
  --text-dim: #b9bbc6;
  --muted: #8b8e9e;
  --accent-1: #7C3AED;
  --accent-2: #EC4899;
  --accent-3: #F59E0B;
  --ok: #10B981;
  --danger: #EF4444;
  --radius: 18px;
  --grad-brand: linear-gradient(135deg, #7C3AED 0%, #A855F7 45%, #EC4899 100%);
  --grad-text: linear-gradient(135deg,#ffffff 20%,#d8ccff 55%,#ffc9e6 100%);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, rgba(236,72,153,.22), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(245,158,11,.16), transparent 60%),
    linear-gradient(180deg, #050510, #0a0a18) !important;
}
/* The original background orbs were hidden by the theme — bring them back. */
body.theme-aurora .bg-orbs{ display: block !important }
/* The gold "premium" button treatment belonged to the theme. */
body.theme-aurora .q-up,
.btn.premium{
  background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.35) !important;
}