/* ===========================
   UNIVERSAL CONSCIOUSNESS UI
   Premium Editorial System
=========================== */

:root{
  --ink: #0e0f12;
  --paper: #f6f3ee;
  --muted: #6c6a66;

  --teal: #7aa6a1;
  --pink: #d8b4b0;
  --grey: #a7a29a;

  --aurora-blue: #0b1b2b;
  --aurora-green: #2f6f6a;

  --gold: #c8a96a;
  --copper: #b87333;
  --teal-deep: #2b7a78;
}

body{
  font-family: "Inter", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Container */
.uc-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

/* Typography */
.uc-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 1rem 0;
}

.uc-subtitle{
  font-size: 1.3rem;
  color: var(--muted);
  max-width: 600px;
}

.uc-description{
  max-width: 650px;
  margin-top: 1.5rem;
  color: var(--muted);
}

/* Labels */
.uc-label{
  text-transform: none;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--grey);
  margin-bottom: 1rem;
}

/* Buttons */
.uc-actions{
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.uc-btn{
  padding: 0.8rem 1.4rem;
  border: 1px solid rgba(0,0,0,0.2);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.35s ease;
}

.uc-btn.primary{
  background: var(--ink);
  color: white;
}

.uc-btn.secondary{
  background: transparent;
  color: var(--ink);
}

.uc-btn:hover{
  transform: translateY(-2px);
  border-color: var(--gold);
}

/* Tags */
.uc-tags{
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--grey);
}

/* ===========================
   SECTION 2 — AURORA
=========================== */

.uc-aurora{
  background: linear-gradient(180deg, var(--aurora-blue), #0f2a2a);
  color: #eaeaea;
  position: relative;
  overflow: hidden;
}

.uc-aurora::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(47,111,106,0.25), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(122,166,161,0.2), transparent 55%);
  animation: drift 40s ease-in-out infinite alternate;
}

@keyframes drift{
  0%{ transform: translate3d(-2%, -2%, 0); }
  100%{ transform: translate3d(2%, 2%, 0); }
}

.uc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  position: relative;
}

.uc-card{
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: all 0.4s ease;
}

.uc-card:hover{
  transform: translateY(-4px);
  border-color: rgba(200,169,106,0.5);
}

.uc-card.highlight{
  border-color: rgba(200,169,106,0.4);
}

/* ===========================
   SECTION 3 — DISCOVERY SPLIT
=========================== */

.uc-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

.uc-left,
.uc-right{
  padding: 5rem 3rem;
  transition: all 0.5s ease;
}

/* LEFT — MONOCHROME */
.uc-left{
  background: #f2f2f2;
  color: #111;
}

/* RIGHT — COLOR WORLD */
.uc-right{
  background: linear-gradient(135deg, #1b1b1b, #2a1f17);
  color: #f3e7d3;
}

.uc-split h2{
  font-family: "Playfair Display", serif;
  font-weight: 400;
  margin-bottom: 2rem;
}

/* MINI CARDS */
.uc-mini-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.uc-mini-card{
  padding: 1rem;
  border: 1px solid rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

/* MONOCHROME hover → color awakening */
.uc-left .uc-mini-card:hover{
  background: #111;
  color: #fff;
  transform: translateY(-3px);
}

.uc-right .uc-mini-card{
  border-color: rgba(200,169,106,0.2);
}

.uc-right .uc-mini-card:hover{
  background: linear-gradient(135deg, var(--gold), var(--copper));
  color: #111;
  transform: translateY(-3px);
}

/* RESPONSIVE */
@media (max-width: 900px){
  .uc-split{
    grid-template-columns: 1fr;
  }
}

/* =========================
UNIVERSAL CONSCIOUSNESS CORE
========================= */

body{
  font-family: Inter, sans-serif;
  background: #f6f3ee;
  color: #0e0f12;
}

/* Smooth containers */
.uc-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

/* Titles */
.uc-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem,5vw,5rem);
  font-weight: 400;
}

/* Buttons */
.uc-btn{
  padding: 0.9rem 1.3rem;
  border: 1px solid rgba(0,0,0,0.2);
  text-decoration: none;
  display: inline-block;
  transition: 0.3s;
}

.uc-btn:hover{
  transform: translateY(-2px);
}

/* =========================
ORACLE
========================= */

.uc-oracle{
  background: #0b0f14;
  color: #eaeaea;
  padding: 5rem 2rem;
  text-align: center;
}

.uc-oracle-input{
  display: flex;
  gap: 10px;
  max-width: 600px;
  margin: 2rem auto;
}

.uc-oracle-input input{
  flex: 1;
  padding: 1rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  outline: none;
}

.uc-oracle-input button{
  padding: 1rem 1.3rem;
  background: #c8a96a;
  border: none;
  cursor: pointer;
}

.uc-oracle-response{
  max-width: 800px;
  margin: 3rem auto;
  display: grid;
  gap: 1rem;
}

.uc-oracle-card{
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  text-align: left;
}

.uc-oracle-card:hover{
  transform: translateY(-3px);
}
.uc-oracle-card{
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn{
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.uc-oracle-response pre{
  white-space: pre-wrap;
  line-height: 1.6;
}