/* Quantara AI: colours sampled visually from the owner's supplied artwork.
   The original artwork is reused unchanged; CSS frames its central Q as an avatar. */
:root { background: #020910; color: #eefaff; }
body {
  background:
    radial-gradient(ellipse at 12% 0%, #006eb82c, transparent 45%),
    radial-gradient(ellipse at 90% 40%, #00dca210, transparent 42%), #020910;
}
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: #00e8ce; }
.brand { gap: 13px; letter-spacing: .6px; }
.brand-avatar {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 60px; height: 60px; overflow: hidden; border-radius: 50%;
  background: #01080e; border: 1px solid #087b9f;
  box-shadow: 0 0 23px #00bfff24, inset 0 0 12px #00ddb425;
}
.brand-avatar img {
  position: absolute; width: 200%; height: auto; max-width: none;
  left: -49%; top: -30%;
}
.brand-wordmark { font-size: 22px; font-weight: 700; letter-spacing: 1.4px; }
.brand-wordmark em {
  font-style: normal; background: linear-gradient(115deg, #0cbdff, #00efb2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-caption { color: #739aac; font-size: 8px; letter-spacing: 3.8px; margin-top: 6px; }
.languages { background: #061622; border-color: #174057; }
.languages button { color: #7b9eaf; }
.languages button[aria-pressed=true] { background: #0b3b50; color: #bcf7ff; }
.eyebrow { color: #11dcde; }
.eyebrow span { color: #43768a; }
h1 { color: #effbff; }
p { color: #8dabbc; }
.card {
  background: linear-gradient(145deg, #081b28ee, #030e17f7);
  border-color: #123c50; box-shadow: 0 12px 48px #0007, inset 0 1px #17e9e408;
}
.section-label { color: #88b3c9; }
.badge { background: #00bfc214; color: #2cebd8; border-color: #117071; }
.search, .access input { background: #020d16; border-color: #184559; color: #e8faff; }
.search span, input::placeholder { color: #678d9f; }
.search:focus-within { border-color: #00c5ee; box-shadow: 0 0 14px #00c5ee10; }
.pairs { scrollbar-color: #12536a transparent; }
.pair, .expiry { background: #071d2b; border-color: #174358; }
.pair .pair-otc { color: #699bab; }
.pair[aria-pressed=true], .expiry[aria-pressed=true] {
  background: linear-gradient(115deg, #007cbd36, #00c79524);
  border-color: #00cddd; color: #d8fffa; box-shadow: inset 0 0 18px #00cad00a;
}
.pair:hover, .expiry:hover { border-color: #05aaca; }
.summary { color: #7b9daf; }
.summary strong { color: #cbeafa; }
.primary {
  color: #00202b; background: linear-gradient(110deg, #09baff, #00e8b5);
  border: 1px solid #4cebed80; box-shadow: 0 5px 24px #00bfd51c;
}
.primary:not(:disabled):hover { background: linear-gradient(110deg, #49d1ff, #38f9c9); box-shadow: 0 5px 28px #00bfd537; }
.secondary { background: #0c293a; color: #c8eafa; border: 1px solid #1b4a60; }
.small { color: #7394a8; }
.result-icon { color: #00e2d5; background: radial-gradient(ellipse at top, #06749b45, #06202c); border-color: #11677b; box-shadow: 0 0 30px #00b8d50c; }
.result[data-direction=BUY] .result-icon { color: #00f3b8; border-color: #008c79; }
.result[data-direction=SELL] .result-icon { color: #ff9bac; border-color: #843c57; background: #321326; }
.result[data-direction=WAIT] .result-icon, .result[data-direction=NO_DATA] .result-icon { color: #92bed1; background: #0b2433; border-color: #285369; }
.result dl { border-color: #153b4d; }
.result dt { color: #7d9cad; }
.notice { background: #082031; border-color: #17536d; color: #b4d5e7; }
footer { color: #527b8f; }
dialog {
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 40px);
  padding: 30px 24px 24px; border: 1px solid #15829a; border-radius: 23px;
  background: linear-gradient(145deg, #0a2637, #020e16); color: #e9faff;
  box-shadow: 0 0 70px #00aece20; overflow-y: auto;
}
dialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
dialog h2 { margin-top: 20px; }
dialog p { font-size: 14px; margin-bottom: 23px; }
dialog .link { display: block; text-align: center; }
.dialog-avatar { width: 76px; height: 76px; }
.dialog-close { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; background: transparent; border: 0; font-size: 28px; color: #84bbd0; }
@media(max-width:690px) {
  .brand-avatar { width: 48px; height: 48px; }
  .brand-wordmark { font-size: 17px; letter-spacing: 1px; }
  .brand-caption { font-size: 7px; letter-spacing: 2.7px; }
  .brand { gap: 9px; }
  .dialog-avatar { width: 76px; height: 76px; }
}
@media(max-width:350px) {
  .brand-wordmark { font-size: 14px; }
  .brand-avatar { width: 41px; height: 41px; }
  .brand-caption { font-size: 6px; letter-spacing: 2px; }
  .languages button { padding: 8px; }
}