/* cygnus-smart.css — Cygnus Connect banner styles for WebToolChest
   Loaded by every tool page. Modal CSS is injected dynamically by
   Cygnus.initSmartModal() since modals only appear after user interaction. */

.smart-lock {
  border: 1px solid rgba(168,85,247,.24);
  background: linear-gradient(180deg, rgba(168,85,247,.08), rgba(168,85,247,.04));
  border-radius: 8px;
  padding: 10px 11px;
  margin: 0 0 10px;
}
.smart-lock-title {
  font-size: .66rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #d8b4fe; margin-bottom: 4px;
}
.smart-lock-copy  { font-size: .75rem; line-height: 1.45; color: #c4b5fd; }
.smart-lock-copy strong { color: #f5d0fe; }

/* ── WTC Universal Button Colors ─────────────────────────────────────────
   Targets action bar buttons by ID so overrides apply across all tools
   without touching per-app CSS. Two-file source of truth for the palette.
   ───────────────────────────────────────────────────────────────────── */

/* Main action — light yellow */
#scanBtn, #buildBtn, #runBtn, #generate-btn, #bottomSeoBtn {
  background: linear-gradient(180deg, #fef08a, #facc15) !important;
  color: #422006 !important;
  border-color: rgba(250,204,21,.18) !important;
  box-shadow: 0 4px 14px rgba(250,204,21,.22) !important;
}
#scanBtn:hover:not(:disabled), #buildBtn:hover:not(:disabled),
#runBtn:hover:not(:disabled), #generate-btn:hover:not(:disabled),
#bottomSeoBtn:hover:not(:disabled) {
  opacity: .9;
  filter: none !important;
}

/* DOWNLOAD IT — purple */
#dlBtn, #dlMenuBtn, #bottomDownloadBtn, #download-btn, #btnDownload {
  background: linear-gradient(180deg, #7c3aed, #5b21b6) !important;
  color: #fff !important;
  border: 1px solid rgba(168,85,247,.28) !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.22) !important;
}

/* CLEAR — restored dark */
#clearBtn, #bottomClearBtn, #btnClear,
button.clear-btn, .btn.clear-btn, button[data-action="clear"], .wtc-clear-btn {
  background: transparent !important;
  background-image: linear-gradient(180deg, #64748b 0%, #334155 100%) !important;
  color: #f8fafc !important;
  border: 1px solid #94a3b8 !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.22) !important;
  filter: none !important;
  font-weight: 700 !important;
}

/* KEY — subdued dark finish
   Broadened to class-based selectors because several tool pages use
   .btn-key without a matching #keyBtn ID in the live action row. */
#keyBtn, #bottomKeyBtn,
.btn-key,
button.btn-key,
.wtc-universal-actions > .btn-key,
.wtc-universal-actions > .btn.btn-key,
.action-bar .btn-key {
  background: linear-gradient(180deg, #2f3846, #151b23) !important;
  color: #f4f7fb !important;
  border: 1px solid #697488 !important;
  box-shadow: none !important;
  filter: none !important;
}


/* Backup IT yellow Cygnus color */
.tool-color-yellow,
.cygnus-tool-yellow,
[data-tool-color="yellow"],
[data-color="yellow"] {
  background: #f5c542 !important;
  border-color: #c89313 !important;
  color: #1d1600 !important;
}
.tool-color-yellow .tool-symbol,
.cygnus-tool-yellow .tool-symbol,
[data-tool-color="yellow"] .tool-symbol,
[data-color="yellow"] .tool-symbol {
  background: #f5c542 !important;
  border-color: #c89313 !important;
  color: #1d1600 !important;
}
.tool-color-yellow .tool-title,
.cygnus-tool-yellow .tool-title,
[data-tool-color="yellow"] .tool-title,
[data-color="yellow"] .tool-title {
  color: #f5c542 !important;
}


/* Yellow color token for Backup IT */
.tool-color-yellow,
.cygnus-tool-yellow,
[data-color="yellow"],
[data-tool-color="yellow"] {
  --tool-color:#f5c542 !important;
  --tool-accent:#f5c542 !important;
  --accent:#f5c542 !important;
  color:#f5c542 !important;
}
.tool-color-yellow .tool-symbol,
.cygnus-tool-yellow .tool-symbol,
[data-color="yellow"] .tool-symbol,
[data-tool-color="yellow"] .tool-symbol {
  background:#f5c542 !important;
  border-color:#c89313 !important;
  color:#1d1600 !important;
  box-shadow:0 0 20px rgba(245,197,66,.85) !important;
}

/* WTC Cygnus Status Orb Image Standard - 2026-05-07
   Uses the approved purple constellation image while preserving each app's existing orb size. */
.cy-orb,
#cyOrb,
.cygnus-status-orb,
[data-cygnus-status-orb] {
  background-image: url('cygnus-status-orb.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(196,181,253,.62) !important;
  box-shadow: 0 0 8px rgba(168,85,247,.42), inset 0 0 8px rgba(255,255,255,.10) !important;
}
.cy-orb > svg,
#cyOrb > svg,
.cygnus-status-orb > svg,
[data-cygnus-status-orb] > svg,
.cy-orb > img,
#cyOrb > img,
.cygnus-status-orb > img,
[data-cygnus-status-orb] > img {
  opacity: 0 !important;
  visibility: hidden !important;
}
.cy-orb.ok,
.cy-orb.run,
.cy-orb.state-loaded,
.cy-orb.state-working,
.cygnus-status-orb.ok,
.cygnus-status-orb.state-loaded,
.cygnus-status-orb.state-working {
  filter: drop-shadow(0 0 5px rgba(46,200,122,.55)) drop-shadow(0 0 10px rgba(168,85,247,.25)) !important;
}
.cy-orb.ready,
.cy-orb.charged,
.cy-orb.state-ready,
.cygnus-status-orb.ready,
.cygnus-status-orb.charged,
.cygnus-status-orb.state-ready {
  filter: drop-shadow(0 0 5px rgba(59,130,246,.55)) drop-shadow(0 0 10px rgba(168,85,247,.25)) !important;
}
.cy-orb.wrn,
.cy-orb.warn,
.cy-orb.state-download,
.cy-orb.state-done,
.cygnus-status-orb.wrn,
.cygnus-status-orb.warn,
.cygnus-status-orb.state-download,
.cygnus-status-orb.state-done {
  filter: drop-shadow(0 0 5px rgba(240,168,50,.55)) drop-shadow(0 0 10px rgba(168,85,247,.25)) !important;
}
.cy-orb.err,
.cy-orb.error,
.cy-orb.state-error,
.cygnus-status-orb.err,
.cygnus-status-orb.error,
.cygnus-status-orb.state-error {
  filter: drop-shadow(0 0 5px rgba(224,87,87,.55)) drop-shadow(0 0 10px rgba(168,85,247,.25)) !important;
}

/* === UNIVERSAL READABILITY PASS === */
:root {
  --wtc-readable-text: #d7dee8;
  --wtc-readable-soft: #c9d3df;
  --wtc-readable-muted: #b9c5d4;
}

small,
.helper-text,
.status-text,
.activity-log,
.activity-item,
.log-entry,
.cygnus-helper,
.cygnus-subtext,
.cygnus-note,
.upgrade-copy,
.smart-lock-copy,
.footer-note,
.footer-links,
.diagnostic-text,
.result-note,
.output-note,
label,
p,
li {
  text-shadow: 0 0 1px rgba(255,255,255,.06);
}

small,
.helper-text,
.status-text,
.activity-log,
.activity-item,
.log-entry,
.cygnus-helper,
.cygnus-subtext,
.cygnus-note,
.footer-note,
.footer-links,
.diagnostic-text,
.result-note,
.output-note {
  color: var(--wtc-readable-text) !important;
}

.smart-lock-copy,
.upgrade-copy {
  color: #d2c4ff !important;
}

label {
  color: var(--wtc-readable-soft) !important;
}

p,
li {
  color: var(--wtc-readable-muted);
}



/* =========================================================
   WEBTOOLCHEST ENVIRONMENTAL SHELL LAYER V2
   Phase 1 foundation system
   ========================================================= */

:root{
  --wtc-env-strength: 0.16;
  --wtc-env-strength-strong: 0.28;
  --wtc-env-border-strength: 0.34;
  --wtc-env-shadow: 0 18px 48px rgba(0,0,0,.52);
}

/* shell environmental harmonics */
.shell,
.wtc-shell,
[data-shell="custom"],
[data-cygnus-shell="true"]{
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    var(--wtc-env-shadow) !important;
}

.shell::before,
.wtc-shell::before,
[data-shell="custom"]::before,
[data-cygnus-shell="true"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--shell2, #9ca7b8) 18%, transparent), transparent 28%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--shell2, #9ca7b8) 12%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%);
  opacity:.92;
}

/* internal screen environment */
.screen{
  position: relative;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--shell2, #9ca7b8) 10%, transparent), transparent 30%),
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--shell2, #9ca7b8) 08%, transparent), transparent 38%),
    linear-gradient(180deg, #070b11 0%, #05080d 100%) !important;
  border-color: color-mix(in srgb, var(--shell2, #9ca7b8) 32%, rgba(255,255,255,.08)) !important;
}

/* atmospheric card harmonics */
.screen .card,
.screen .panel,
.screen .box,
.screen .section,
.screen textarea,
.screen input,
.screen select,
.screen .input-card,
.screen .result-card{
  border-color: color-mix(in srgb, var(--shell2, #9ca7b8) var(--wtc-env-border-strength), rgba(255,255,255,.10)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--shell2, #9ca7b8) 8%, transparent),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* subtle environmental headers */
.screen h2,
.screen h3,
.screen .section-title,
.screen label{
  color: color-mix(in srgb, var(--shell2, #9ca7b8) 26%, #ffffff) !important;
}

/* preserve app identity colors for primary titles/icons */
.screen h1,
.screen .app-title,
.screen .tool-title{
  text-shadow: 0 0 18px rgba(255,255,255,.04);
}

/* smoother atmospheric transitions */
.shell,
.screen,
.screen .card,
.screen .panel,
.screen .box,
.screen section{
  transition:
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    color .28s ease;
}



/* Stronger shell-only skins - VAULT branch */
html[data-shell-theme="obsidian"] {
  --shell1: #f2f6ff !important;
  --shell2: #9aa5b5 !important;
  --shell3: #313844 !important;
  --wtc-shell-glow: rgba(210,225,245,.38);
  --wtc-shell-border: #d5deec;
}
html[data-shell-theme="cobalt"] {
  --shell1: #d8ebff !important;
  --shell2: #4d91ff !important;
  --shell3: #083a85 !important;
  --wtc-shell-glow: rgba(75,145,255,.46);
  --wtc-shell-border: #8ec1ff;
}
html[data-shell-theme="ember"] {
  --shell1: #ffe4c8 !important;
  --shell2: #ff7a2f !important;
  --shell3: #74300b !important;
  --wtc-shell-glow: rgba(255,118,47,.48);
  --wtc-shell-border: #ffb47d;
}
html[data-shell-theme="emerald"] {
  --shell1: #c7ffd8 !important;
  --shell2: #21c45a !important;
  --shell3: #0a672e !important;
  --wtc-shell-glow: rgba(33,196,90,.46);
  --wtc-shell-border: #7dffac;
}
html[data-shell-theme="violet"] {
  --shell1: #eadcff !important;
  --shell2: #9b5cff !important;
  --shell3: #4e1fa0 !important;
  --wtc-shell-glow: rgba(155,92,255,.55);
  --wtc-shell-border: #c4a3ff;
}
html[data-shell-theme="crimson"] {
  --shell1: #ffd6df !important;
  --shell2: #ff365f !important;
  --shell3: #801629 !important;
  --wtc-shell-glow: rgba(255,54,95,.5);
  --wtc-shell-border: #ff95aa;
}
html[data-shell-theme] .shell,
html[data-shell-theme] .wtc-shell,
html[data-shell-theme] [data-cygnus-shell="true"],
html[data-shell-theme] .app-shell {
  border-color: var(--wtc-shell-border) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--wtc-shell-border) 68%, transparent),
    0 0 42px var(--wtc-shell-glow),
    0 24px 78px rgba(0,0,0,.68) !important;
}
html[data-shell-theme] .shell::before,
html[data-shell-theme] .wtc-shell::before,
html[data-shell-theme] [data-cygnus-shell="true"]::before,
html[data-shell-theme] .app-shell::before {
  opacity:.92 !important;
}
html[data-shell-theme] .brand-plate {
  filter: none !important;
}