/* KoiAI · Cyber Sky visual test
 * Additive override: original styles.css remains unchanged.
 * The skyline SVG is original vector artwork included with this patch.
 * Revert by removing this stylesheet from index.html.
 */
:root {
  color-scheme: dark;
  --bg: #06131f;
  --panel: #102435;
  --panel2: #153044;
  --pink: #37c5e5; /* legacy variable, repurposed as cyan accent */
  --purple: #2fd1bc;
  --text: #edfaff;
  --muted: #a7c3d1;
  --line: rgba(106,190,213,.23);
  --green: #55e5b0;
}
html { background: #071523; }
body {
  color: var(--text);
  background-color: #06131f;
  background-image:
    radial-gradient(ellipse 49% 42% at 88% 5%,rgba(21,148,175,.23),transparent 78%),
    radial-gradient(ellipse 46% 36% at 3% 31%,rgba(22,105,187,.22),transparent 78%),
    radial-gradient(ellipse 42% 40% at 90% 79%,rgba(24,149,125,.13),transparent 77%),
    linear-gradient(148deg,#061420 0%,#0a2032 42%,#061725 68%,#071b27 100%);
  background-attachment: fixed;
  isolation: isolate;
}
/* Distant skyline and orbit, always behind content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .54;
  background: url("cyber-skyline.svg") center bottom / cover no-repeat;
}
/* Soft, drifting blue/teal atmosphere. Does not intercept clicks. */
body::after {
  content:"";
  position:fixed;
  inset:-12%;
  z-index:-1;
  pointer-events:none;
  opacity:.52;
  filter: blur(42px);
  background:
    radial-gradient(ellipse 24% 28% at 15% 12%,rgba(49,145,228,.24),transparent 83%),
    radial-gradient(ellipse 29% 24% at 87% 43%,rgba(17,192,164,.22),transparent 82%);
  animation:cyber-sky-pulse 19s ease-in-out infinite alternate;
}
@keyframes cyber-sky-pulse {
  from {transform:translate3d(-1%,0,0) scale(1)}
  to {transform:translate3d(1.3%,-1%,0) scale(1.04)}
}
/* Header / brand */
.nav { border-bottom-color: rgba(120,199,214,.18); }
.brand-mark { color:#5fe1c4; }
.navlinks a {color:#b0d2de;}
.navlinks a:hover {color:#f5ffff;}
#languageSelect {
  background:#0d2636 !important;
  color:#e7faff !important;
  border:1px solid rgba(91,189,209,.35) !important;
}
#languageSelect option {background:#0d2636;color:#e7faff;}
/* Control accents: blue-green not pink */
.btn {
  color:#06202b;
  background:linear-gradient(115deg,#40b9ed,#47e0b6);
  box-shadow:0 7px 24px rgba(22,188,194,.17);
}
.btn:hover { filter:brightness(1.10); }
.btn.secondary {
  color:#d6f3f9;
  background:rgba(12,34,50,.58);
  border:1px solid rgba(102,188,211,.36);
  box-shadow:none;
}
.btn.secondary:hover { background:rgba(27,72,88,.72); }
.eyebrow {
  color:#93f4df;
  background:rgba(34,126,149,.12);
  border:1px solid rgba(61,202,184,.32);
}
.gradient {
  background:linear-gradient(100deg,#75d5ff 0%,#5cf2cf 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero h1,.section h2 {text-shadow:0 8px 40px rgba(51,184,214,.08);}
.hero p,.sub,.features {color:var(--muted);}
/* Hero illustration vignette uses the skyline too */
.hero-art {
  background:
    linear-gradient(180deg,rgba(8,30,46,.08),rgba(6,18,31,.75)),
    url("cyber-skyline.svg") center 77% / cover no-repeat,
    radial-gradient(circle at 75% 18%,rgba(34,176,201,.43),transparent 52%),
    linear-gradient(145deg,#0c3650,#071625 80%);
  border:1px solid rgba(106,207,219,.34);
  box-shadow:0 20px 75px rgba(0,8,23,.35), inset 0 1px 0 rgba(108,214,225,.12);
}
.hero-art::before {background:rgba(51,153,233,.21);filter:blur(34px);}
.hero-art::after {background:rgba(27,214,177,.20);filter:blur(30px);}
.art-orbit {border-color:rgba(88,230,212,.32);box-shadow:0 0 32px rgba(38,195,217,.07);}
.avatar-main {
  background:linear-gradient(150deg,#36a0bf,#19435e 58%,#10243b);
  border:1px solid rgba(133,233,226,.48);
  box-shadow:0 25px 68px rgba(0,17,28,.56), inset 0 1px 30px rgba(97,229,219,.1);
}
.float-card {background:rgba(8,29,44,.93);border-color:rgba(94,185,211,.37);}
/* Cards and chat readability */
.creator-panel,.saved-character,.chat-info,.chatbox,.plan,.modal {
  background:linear-gradient(145deg,rgba(15,38,55,.96),rgba(7,23,38,.97));
  border-color:rgba(91,180,202,.25);
  box-shadow:0 15px 36px rgba(0,8,22,.17);
}
.character {
  background:linear-gradient(160deg,rgba(19,43,61,.96),rgba(8,27,42,.97));
  border-color:rgba(101,186,214,.23);
}
.character:hover {border-color:rgba(72,226,202,.68);box-shadow:0 12px 36px rgba(0,149,170,.1);}
.portrait {
  background:radial-gradient(circle at 50% 25%,var(--glow),transparent 60%),linear-gradient(145deg,var(--tone),#0b2738);
}
.portrait::after {background:linear-gradient(transparent 55%,rgba(6,26,40,.95));}
.tag {background:rgba(6,29,43,.84);border-color:rgba(122,220,217,.25);}
.filter {background:rgba(12,36,53,.94);border-color:rgba(102,186,204,.27);color:#b5d3dc;}
.filter:hover {border-color:rgba(94,218,219,.53);}
.filter.active {background:rgba(18,108,118,.46);border-color:rgba(76,222,200,.68);color:#f1fffc;}
.creator-panel label {color:#d8eef3;}
.creator-panel input,.creator-panel select,.creator-panel textarea,.chat-compose input {
  background:#091b2b;
  color:var(--text);
  border-color:rgba(105,172,198,.43);
}
.creator-panel input:focus,.creator-panel select:focus,.creator-panel textarea:focus,.chat-compose input:focus {
  outline:2px solid rgba(68,218,196,.72);
  outline-offset:2px;
  border-color:#5fd5d6;
}
.creator-preview {
  background:radial-gradient(circle at 50% 37%,rgba(31,135,151,.46),rgba(8,29,48,.97) 69%);
}
.chat-avatar {background:linear-gradient(140deg,#3aa7dc,#27a58f);}
.chat-head {border-bottom-color:rgba(96,180,201,.24);}
.bubble.ai {background:#173548;border-color:rgba(107,185,214,.27);}
.bubble.user {background:linear-gradient(120deg,#19699f,#158b81);color:#f9ffff;}
.chat-compose {border-top-color:rgba(96,180,201,.24);}
.messages {scrollbar-color:#277789 #091b2b;}
.plan.featured {border-color:#40c7bb;box-shadow:0 0 34px rgba(21,160,166,.11);}
.plan ul {color:#c5dfe7;}
.ribbon {color:#a8ffea;background:#125953;}
.modal {border-color:rgba(102,191,202,.42);}
.toast {background:#173649;border-color:#367d8a;}
.character:focus-visible,.btn:focus-visible,.filter:focus-visible {outline:2px solid #63e8c3;outline-offset:3px;}
@media(max-width:720px) {
  body::before {opacity:.35;background-position:62% bottom;}
  body::after {opacity:.36;filter:blur(30px);}
  .hero-art {background-position:center,64% 78%,center,center;}
}
@media(prefers-reduced-motion:reduce) {
  body::after {animation:none;}
}

/* KoiAI: lightweight navigation with more breathing room (20px) */
.navlinks { gap: 42px; }
.navlinks a {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}
.navlinks a:focus-visible {
  outline: 2px solid #63e8c3;
  outline-offset: 5px;
  border-radius: 4px;
}
/* Keep the header tidy on laptops/tablets. */
@media (min-width: 681px) and (max-width: 1050px) {
  .navlinks { gap: 24px; }
  .navlinks a { font-size: clamp(16px, 1.9vw, 20px); }
}
@media (min-width: 561px) and (max-width: 680px) {
  .navlinks { display: none; }
}