/* ============================================================
   SUPRA ORACULO INTERGALACTICO v7.0
   ULTRA-PREMIUM EGYPTIAN-GALACTIC DESIGN SYSTEM
   Sacred Geometry · Dimensional Portals · Sirian/Pleiadian Aesthetic
   ============================================================ */

/* === SACRED VARIABLES === */
:root {
  --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-tech: 'Orbitron', monospace;
  --font-sacred: 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;

  /* Egyptian Night Sky Palette */
  --bg-deep: #020209;
  --bg: #06060f;
  --bg-surface: #0a0a1a;
  --bg-card: rgba(8, 8, 24, 0.88);
  --bg-card-hover: rgba(14, 14, 38, 0.95);
  --bg-glass: rgba(255,255,255,0.025);

  /* Sacred Gold — Ra's Light */
  --gold: #d4a017;
  --gold-bright: #f0c040;
  --gold-dim: rgba(212, 160, 23, 0.12);
  --gold-glow: rgba(212, 160, 23, 0.25);
  --gold-text: #e8c547;

  /* Cosmic Purple — Pleiadian Frequency */
  --purple: #8b5cf6;
  --purple-dim: rgba(139, 92, 246, 0.1);
  --purple-glow: rgba(139, 92, 246, 0.2);

  /* Sirian Blue — Star Knowledge */
  --cyan: #06b6d4;
  --cyan-dim: rgba(6, 182, 212, 0.1);

  /* Egyptian Teal */
  --teal: #0d9488;
  --teal-dim: rgba(13, 148, 136, 0.1);

  /* Life & Warning */
  --green: #10b981;
  --green-dim: rgba(16, 185, 129, 0.1);
  --red: #ef4444;
  --blue: #3b82f6;

  /* Text Hierarchy */
  --text: #e2dff0;
  --text-dim: rgba(226, 223, 240, 0.55);
  --text-muted: rgba(226, 223, 240, 0.3);

  /* Borders — Sacred Lines */
  --border: rgba(212, 160, 23, 0.08);
  --border-gold: rgba(212, 160, 23, 0.15);
  --border-purple: rgba(139, 92, 246, 0.12);
  --border-active: rgba(212, 160, 23, 0.35);

  /* Dimensions */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow-card: 0 4px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,160,23,0.05);
  --shadow-glow: 0 0 40px rgba(212,160,23,0.08);
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text);
  min-height:100dvh;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Egyptian papyrus texture overlay */
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(139,92,246,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(212,160,23,0.02) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 50% 0%, rgba(6,182,212,0.02) 0%, transparent 50%);
}
.hidden{display:none!important}
img{max-width:100%;height:auto}
a{color:var(--cyan);text-decoration:none}
::selection{background:rgba(212,160,23,0.25);color:var(--gold-bright)}

/* === COSMIC CANVAS === */
#cosmicCanvas{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;opacity:0.5;
}

/* === SACRED GEOMETRY DECORATORS === */
.sacred-border{
  position:relative;
  border:1px solid var(--border-gold);
}
.sacred-border::before{
  content:'';position:absolute;top:-1px;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity:0.4;
}
.sacred-border::after{
  content:'';position:absolute;bottom:-1px;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity:0.4;
}

/* Eye of Horus separator */
.horus-divider{
  text-align:center;padding:16px 0;
  font-size:1.5rem;opacity:0.3;
  letter-spacing:12px;
}
.horus-divider::before{content:'𓂀 ◆ 𓂀'}

/* === WELCOME PORTAL === */
.welcome-fullscreen{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(212,160,23,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at center, rgba(8,8,24,0.98) 0%, rgba(2,2,9,1) 80%);
  padding:20px;
}
.welcome-inner{
  text-align:center;max-width:440px;width:100%;
  animation:fadeInUp .8s ease;
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Portal rings — Dimensional Gateway */
.welcome-portal{
  position:relative;width:160px;height:160px;
  margin:0 auto 28px;
}
.portal-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid;
}
.ring-1{
  border-color:rgba(212,160,23,0.2);
  animation:portalSpin 15s linear infinite;
  /* Sacred geometry — hexagonal pattern via dashed */
  border-style:dashed;
}
.ring-2{
  inset:12px;border-color:rgba(139,92,246,0.2);
  animation:portalSpin 10s linear infinite reverse;
  border-style:dotted;
}
.ring-3{
  inset:24px;border-color:rgba(6,182,212,0.2);
  animation:portalSpin 20s linear infinite;
}
.ring-4{
  inset:36px;border-color:rgba(212,160,23,0.1);
  animation:portalSpin 8s linear infinite reverse;
  border-style:dashed;
}
@keyframes portalSpin{to{transform:rotate(360deg)}}

.portal-core{
  position:absolute;inset:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;border-radius:50%;
  background:radial-gradient(circle, rgba(212,160,23,0.06) 0%, transparent 70%);
  animation:portalPulse 4s ease infinite;
}
@keyframes portalPulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.08);filter:brightness(1.2)}
}

/* Hieroglyphic decoration around portal */
.welcome-hieroglyphs{
  font-family:var(--font-sacred);
  font-size:0.65rem;letter-spacing:3px;
  color:var(--text-muted);margin-bottom:16px;
  opacity:0.5;
}

.welcome-title{
  font-family:var(--font-display);
  font-size:clamp(0.75rem, 2.5vw, 1rem);
  letter-spacing:5px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:4px;
  text-shadow:0 0 30px rgba(212,160,23,0.2);
}
.welcome-subtitle{
  font-size:0.82rem;color:var(--text-dim);
  margin-bottom:32px;font-weight:300;
  letter-spacing:0.5px;
}

/* === FORM — Papyrus Style === */
.welcome-form{text-align:left}
.form-group{margin-bottom:18px}
.form-group label{
  display:block;font-size:0.72rem;font-weight:600;
  color:var(--gold);opacity:0.7;
  margin-bottom:6px;letter-spacing:1px;text-transform:uppercase;
  font-family:var(--font-display);
}
.form-input{
  width:100%;padding:13px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-gold);
  background:rgba(212,160,23,0.03);
  color:var(--text);font-family:var(--font-body);font-size:1rem;
  transition:all .3s;outline:none;
}
.form-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-dim), 0 0 20px rgba(212,160,23,0.08);
  background:rgba(212,160,23,0.05);
}
.form-input::placeholder{color:var(--text-muted)}
select.form-input{cursor:pointer;background-color:rgba(8,8,24,0.9)}
.form-row{display:flex;gap:10px;align-items:flex-end}
.flex-1{flex:1}

.btn-detect{
  width:46px;height:46px;border-radius:var(--radius-sm);
  border:1px solid var(--border-gold);
  background:var(--bg-glass);
  color:var(--gold);font-size:1.1rem;cursor:pointer;
  transition:all .3s;flex-shrink:0;
}
.btn-detect:hover{background:var(--gold-dim);border-color:var(--gold)}
.btn-detect.detecting{animation:spin .8s linear infinite}

/* Cosmic button — Ra's Eye */
.btn-cosmic{
  width:100%;padding:15px 24px;
  border-radius:var(--radius);
  border:1px solid var(--gold);
  background:
    linear-gradient(135deg, rgba(212,160,23,0.1) 0%, rgba(139,92,246,0.05) 50%, rgba(6,182,212,0.05) 100%);
  color:var(--gold-bright);
  font-family:var(--font-display);font-size:0.9rem;font-weight:700;
  letter-spacing:2px;cursor:pointer;
  transition:all .4s;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:28px;text-transform:uppercase;
  position:relative;overflow:hidden;
}
.btn-cosmic::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, transparent 30%, rgba(212,160,23,0.08) 50%, transparent 70%);
  transform:translateX(-100%);transition:transform .6s;
}
.btn-cosmic:hover::before{transform:translateX(100%)}
.btn-cosmic:hover{
  background:linear-gradient(135deg, rgba(212,160,23,0.18), rgba(139,92,246,0.1));
  transform:translateY(-2px);
  box-shadow:0 8px 40px rgba(212,160,23,0.15), 0 0 60px rgba(212,160,23,0.05);
}
.btn-cosmic:active{transform:translateY(0)}

/* === STICKY NAV — Temple Header === */
.oracle-nav-sticky{
  position:sticky;top:0;z-index:200;
  background:rgba(2,2,9,0.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-gold);
}
.oracle-nav-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;gap:10px;
}
.oracle-nav-title-row{display:flex;flex-direction:column;gap:1px;min-width:0}
.oracle-nav-title{
  font-family:var(--font-display);
  font-size:0.6rem;color:rgba(212,160,23,0.45);
  letter-spacing:3px;text-transform:uppercase;
}
.oracle-nav-user{
  font-size:0.82rem;font-weight:600;color:var(--cyan);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;
}
.oracle-nav-actions{display:flex;gap:8px;flex-shrink:0}

.btn-nav-oracles,.btn-nav-summary{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:30px;
  border:1px solid var(--border-gold);
  background:var(--gold-dim);color:var(--gold);
  font-family:var(--font-body);font-size:0.72rem;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:all .3s;
}
.btn-nav-oracles:hover,.btn-nav-summary:hover{
  background:rgba(212,160,23,0.2);border-color:var(--gold);
  transform:translateY(-1px);
}
.btn-nav-summary{background:var(--purple-dim);border-color:var(--border-purple);color:var(--purple)}
.btn-nav-summary:hover{background:var(--purple-glow);border-color:var(--purple)}

/* === ORACLE MENU PANEL === */
.oracle-menu-panel{
  max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(0.4,0,0.2,1);
  border-top:1px solid var(--border);
}
.oracle-menu-panel.open{max-height:700px;overflow-y:auto}
.oracle-menu-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px;padding:14px 16px;
}
.oracle-menu-item{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--bg-glass);border:1px solid var(--border);
  cursor:pointer;transition:all .25s;
  font-size:0.76rem;color:var(--text-dim);
}
.oracle-menu-item:hover{
  background:var(--gold-dim);border-color:var(--gold);
  color:var(--gold);transform:translateY(-1px);
}
.oracle-menu-item.completed{border-color:rgba(16,185,129,0.25)}
.oracle-menu-item.completed::after{
  content:'✓ ';margin-left:auto;
  color:var(--green);font-weight:900;font-size:0.85rem;
}
.oracle-menu-item .menu-num{
  font-family:var(--font-tech);font-size:0.55rem;
  color:var(--text-muted);min-width:18px;
}
.oracle-menu-item .menu-emoji{font-size:1.1rem}

/* === CONTENT AREA === */
.content-area{
  position:relative;z-index:1;
  padding:20px 16px 120px;
  max-width:820px;margin:0 auto;
}

/* === SUMMARY HEADER — Temple Entrance === */
.summary-header{
  text-align:center;margin-bottom:28px;padding:24px 20px;
  background:
    linear-gradient(145deg, rgba(212,160,23,0.04) 0%, rgba(139,92,246,0.02) 50%, rgba(6,182,212,0.02) 100%);
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
}
.summary-header::before{
  content:'𓂀';position:absolute;top:8px;right:16px;
  font-size:1.2rem;opacity:0.08;
}
.section-title{
  font-family:var(--font-display);font-size:1.1rem;
  color:var(--text);margin-bottom:8px;
}
.title-icon{font-size:1.2rem}
.summary-stats{
  font-size:0.78rem;color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.stat-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 14px;border-radius:20px;
  background:var(--gold-dim);border:1px solid var(--border-gold);
  color:var(--gold);font-weight:700;
  font-family:var(--font-tech);font-size:0.72rem;
}

/* === ORACLE CARDS — Sacred Tablets === */
.oracle-cards-grid{
  display:grid;grid-template-columns:1fr;gap:10px;
}
@media(min-width:600px){.oracle-cards-grid{grid-template-columns:repeat(2,1fr)}}

.oracle-card{
  position:relative;padding:16px 18px;
  border-radius:var(--radius);
  background:var(--bg-card);
  border:1px solid var(--border);
  cursor:pointer;transition:all .35s;
  display:flex;align-items:center;gap:14px;
  overflow:hidden;
}
.oracle-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,160,23,0.12), transparent);
}
.oracle-card:hover{
  background:var(--bg-card-hover);
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
}

/* Completed oracle — Watermark & Corner Badge */
.oracle-card.completed{border-color:rgba(16,185,129,0.2)}
.oracle-card.completed::after{
  content:'𓂀 CONSULTADO';
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-20deg);
  font-family:var(--font-display);font-size:0.7rem;
  color:rgba(16,185,129,0.12);letter-spacing:3px;
  pointer-events:none;white-space:nowrap;
  text-transform:uppercase;font-weight:700;
}
.oracle-card.completed .oracle-card-check{
  display:flex;
}
.oracle-card-check{
  display:none;position:absolute;top:6px;right:8px;
  width:20px;height:20px;border-radius:50%;
  background:var(--green);
  align-items:center;justify-content:center;
  font-size:0.6rem;color:white;font-weight:900;
}

.oracle-card-num{
  font-family:var(--font-tech);font-size:0.5rem;
  color:var(--text-muted);position:absolute;top:6px;left:10px;
  letter-spacing:1.5px;
}
.oracle-card-emoji{font-size:2rem;flex-shrink:0}
.oracle-card-info{flex:1;min-width:0}
.oracle-card-name{
  font-family:var(--font-display);font-size:0.88rem;font-weight:600;
  color:var(--text);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.oracle-card-desc{
  font-size:0.7rem;color:var(--text-dim);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.oracle-card-arrow{
  color:var(--text-muted);font-size:0.75rem;flex-shrink:0;
  transition:all .3s;
}
.oracle-card:hover .oracle-card-arrow{transform:translateX(4px);color:var(--gold)}

/* === BACK BUTTON === */
.btn-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;margin-bottom:20px;
  border-radius:30px;border:1px solid var(--border);
  background:var(--bg-glass);color:var(--text-dim);
  font-size:0.8rem;font-weight:600;cursor:pointer;
  transition:all .3s;
}
.btn-back:hover{
  background:var(--purple-dim);border-color:var(--purple);color:var(--purple);
}

/* === ORACLE DETAIL HERO — Temple Chamber === */
.oracle-detail-hero{
  text-align:center;padding:32px 20px;
  background:
    linear-gradient(145deg, rgba(212,160,23,0.05) 0%, rgba(139,92,246,0.03) 50%, rgba(6,182,212,0.02) 100%);
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  margin-bottom:20px;position:relative;overflow:hidden;
}
/* Egyptian column decorators */
.oracle-detail-hero::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
  background:linear-gradient(180deg, var(--gold), transparent);opacity:0.2;
}
.oracle-detail-hero::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:3px;
  background:linear-gradient(180deg, var(--gold), transparent);opacity:0.2;
}
.oracle-detail-emoji{font-size:3.5rem;margin-bottom:12px;position:relative}
.oracle-detail-num{
  font-family:var(--font-tech);font-size:0.5rem;
  color:var(--text-muted);letter-spacing:2.5px;margin-bottom:6px;
}
.oracle-detail-title{
  font-family:var(--font-display);font-size:1.2rem;
  color:var(--gold-text);letter-spacing:2px;margin-bottom:8px;
  text-shadow:0 0 20px rgba(212,160,23,0.15);
}
.oracle-detail-subtitle{
  font-size:0.8rem;color:var(--text-dim);max-width:500px;margin:0 auto;
}

/* === READING CARDS — Papyrus Scrolls === */
.reading-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden;
  transition:all .3s;
}
.reading-card.expanded{
  box-shadow:0 0 30px rgba(212,160,23,0.06);
  border-color:var(--border-gold);
}
.reading-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;cursor:pointer;user-select:none;
  transition:background .2s;
}
.reading-card-header:hover{background:rgba(212,160,23,0.03)}
.reading-card-header-left{display:flex;align-items:center;gap:10px;min-width:0}
.rc-icon{font-size:1.2rem}
.reading-card-header-left h4{
  font-family:var(--font-display);font-size:0.86rem;font-weight:600;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reading-card-arrow{
  color:var(--gold);font-size:0.7rem;
  transition:transform .3s;flex-shrink:0;
}
.reading-card.expanded .reading-card-arrow{transform:rotate(180deg)}
.reading-card-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.reading-card-body.open{max-height:8000px;overflow:visible}
.reading-card-content{padding:16px 18px;border-top:1px solid var(--border)}

/* === INFO TABLE — Hieroglyphic Records === */
.info-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.info-table th,.info-table td{
  padding:11px 12px;text-align:left;
  border-bottom:1px solid var(--border);font-size:0.84rem;
}
.info-table th{
  color:var(--gold);font-weight:600;width:38%;
  vertical-align:top;font-family:var(--font-display);
  font-size:0.78rem;letter-spacing:0.5px;
}
.info-table td{color:var(--text);line-height:1.6}

/* === TAGS === */
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{
  display:inline-block;padding:3px 10px;
  border-radius:20px;background:var(--gold-dim);
  border:1px solid var(--border-gold);
  color:var(--gold);font-size:0.68rem;font-weight:600;
  letter-spacing:0.3px;
}
.tag.purple{background:var(--purple-dim);border-color:var(--border-purple);color:var(--purple)}
.tag.cyan{background:var(--cyan-dim);border-color:rgba(6,182,212,0.15);color:var(--cyan)}
.tag.green{background:var(--green-dim);border-color:rgba(16,185,129,0.15);color:var(--green)}

/* === READING BLOCKS — Sacred Inscriptions === */
.reading-block{
  margin-bottom:14px;padding:14px 16px;
  border-radius:var(--radius-sm);
  background:rgba(212,160,23,0.02);
  border-left:3px solid var(--gold);
  position:relative;
}
.reading-block h5{
  font-size:0.8rem;font-weight:700;
  color:var(--gold-text);margin-bottom:6px;
  font-family:var(--font-display);letter-spacing:0.5px;
}
.reading-block p{font-size:0.84rem;color:var(--text);line-height:1.75}
.reading-block.advice{border-left-color:var(--cyan);background:rgba(6,182,212,0.02)}
.reading-block.advice h5{color:var(--cyan)}
.reading-block.spiritual{border-left-color:var(--purple);background:rgba(139,92,246,0.02)}
.reading-block.spiritual h5{color:var(--purple)}
.reading-block.health{border-left-color:var(--green);background:rgba(16,185,129,0.02)}
.reading-block.health h5{color:var(--green)}
.reading-block.warning{border-left-color:var(--red);background:rgba(239,68,68,0.02)}
.reading-block.warning h5{color:var(--red)}

/* === SPECIAL ORACLE SECTIONS === */

/* Egyptian deity card */
.deity-card{
  text-align:center;padding:24px 20px;
  background:linear-gradient(145deg, rgba(212,160,23,0.04), rgba(139,92,246,0.02));
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);margin-bottom:16px;
}
.deity-emoji{font-size:4rem;margin-bottom:12px;display:block}
.deity-name{
  font-family:var(--font-display);font-size:1.3rem;
  color:var(--gold-text);letter-spacing:2px;margin-bottom:4px;
}
.deity-title{font-size:0.82rem;color:var(--cyan);margin-bottom:8px;font-style:italic}
.deity-domain{
  font-size:0.72rem;color:var(--text-dim);
  padding:4px 14px;display:inline-block;
  border-radius:20px;background:var(--bg-glass);border:1px solid var(--border);
}

/* Rune display */
.rune-display{
  text-align:center;padding:20px;
  background:var(--bg-card);border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);margin-bottom:16px;
}
.rune-symbol{
  font-size:4rem;color:var(--gold-bright);
  text-shadow:0 0 30px rgba(212,160,23,0.3);
  margin-bottom:8px;display:block;
  font-family:var(--font-sacred);
}
.rune-name{font-family:var(--font-display);font-size:1.1rem;color:var(--text);margin-bottom:4px}
.rune-meaning{font-size:0.82rem;color:var(--text-dim)}

/* Spread display — for rune/tarot spreads */
.spread-row{
  display:flex;gap:10px;justify-content:center;
  flex-wrap:wrap;margin:16px 0;
}
.spread-item{
  flex:1;min-width:100px;max-width:160px;
  padding:14px 10px;text-align:center;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);transition:all .3s;
}
.spread-item:hover{border-color:var(--gold);transform:translateY(-2px)}
.spread-item .spread-label{
  font-size:0.6rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-muted);margin-bottom:6px;
  font-family:var(--font-tech);
}
.spread-item .spread-symbol{font-size:1.8rem;margin-bottom:6px;display:block}
.spread-item .spread-name{font-size:0.75rem;color:var(--gold);font-weight:600}

/* Hexagram display — I Ching */
.hexagram-display{
  text-align:center;padding:24px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);margin-bottom:16px;
}
.hexagram-lines{
  display:flex;flex-direction:column;gap:5px;
  align-items:center;margin:16px 0;
}
.hex-line{
  width:80px;height:8px;border-radius:2px;
}
.hex-line.yang{background:var(--gold)}
.hex-line.yin{
  background:transparent;position:relative;
  display:flex;gap:8px;justify-content:center;
}
.hex-line.yin::before,.hex-line.yin::after{
  content:'';width:34px;height:8px;border-radius:2px;background:var(--gold);
}

/* === LOADING === */
.loading-oracle{text-align:center;padding:50px 20px}
.loading-spinner{
  width:50px;height:50px;margin:0 auto 20px;position:relative;
}
.loading-spinner::before{
  content:'𓂀';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;animation:spin 2s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:0.85rem;color:var(--text-dim)}

/* === PALMISTRY === */
.palm-hero{
  text-align:center;padding:28px 20px;
  background:linear-gradient(145deg, rgba(212,160,23,0.04), rgba(139,92,246,0.02));
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);margin-bottom:20px;
}
.palm-hero-emoji{font-size:3.5rem;margin-bottom:10px}
.palm-hero-title{
  font-family:var(--font-display);font-size:1.2rem;
  color:var(--gold-text);letter-spacing:2px;margin-bottom:6px;
}
.palm-hero-subtitle{font-size:0.82rem;color:var(--text-dim)}

.palm-origins{
  padding:16px;margin-bottom:16px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);font-size:0.84rem;line-height:1.7;
  color:var(--text-dim);
}
.palm-origins strong{color:var(--gold)}
.palm-origins-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.palm-otag{
  padding:4px 10px;border-radius:16px;
  background:var(--bg-glass);border:1px solid var(--border);
  font-size:0.68rem;color:var(--text-dim);
}

.palm-dual{
  display:flex;gap:12px;margin-bottom:16px;align-items:stretch;
}
.palm-hand-card{
  flex:1;padding:16px;text-align:center;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);
}
.palm-hand-icon{font-size:2.5rem;margin-bottom:8px}
.palm-hand-card h4{
  font-family:var(--font-display);font-size:0.85rem;
  color:var(--gold);margin-bottom:4px;
}
.palm-hand-card p{font-size:0.72rem;color:var(--text-dim);line-height:1.5}
.palm-divider{
  display:flex;align-items:center;color:var(--text-muted);
  font-size:1.2rem;flex-shrink:0;
}

.palm-guide{
  padding:18px;margin-bottom:16px;
  background:var(--bg-card);border:1px solid var(--border-gold);
  border-radius:var(--radius);
}
.palm-guide h4{
  font-family:var(--font-display);font-size:0.88rem;
  color:var(--gold);margin-bottom:12px;
}
.palm-guide-tips{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.palm-guide-tip{
  padding:8px 10px;border-radius:var(--radius-sm);
  background:var(--bg-glass);border:1px solid var(--border);
  font-size:0.75rem;color:var(--text-dim);
  display:flex;align-items:center;gap:8px;
}
.palm-guide-tip i{color:var(--gold);font-size:0.9rem}

.palm-example-imgs{
  display:flex;gap:12px;justify-content:center;margin-top:14px;
}
.palm-example-img{
  width:100px;height:100px;border-radius:var(--radius-sm);
  background:var(--bg-glass);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;
}

/* Palm capture steps */
.palm-steps{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.palm-step{
  padding:20px;border-radius:var(--radius);
  background:var(--bg-card);border:1px solid var(--border);
  opacity:0.5;transition:all .3s;
}
.palm-step.active{opacity:1;border-color:var(--gold)}
.palm-step.done{opacity:0.8;border-color:var(--green)}
.palm-step-num{
  font-family:var(--font-tech);font-size:0.6rem;
  color:var(--gold);letter-spacing:2px;margin-bottom:6px;
}
.palm-step-title{
  font-family:var(--font-display);font-size:0.92rem;
  color:var(--text);margin-bottom:4px;
}
.palm-step-hint{font-size:0.72rem;color:var(--text-dim);margin-bottom:12px}

.palm-preview{
  margin-bottom:12px;border-radius:var(--radius-sm);overflow:hidden;
  position:relative;max-height:300px;
}
.palm-preview img{width:100%;max-height:280px;object-fit:cover;border-radius:var(--radius-sm)}
.btn-retake{
  position:absolute;top:8px;right:8px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,0.7);border:1px solid var(--border);
  color:var(--red);font-size:0.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* Success indicator for capture */
.palm-step.done .palm-step-num::after{
  content:' ✓';color:var(--green);font-weight:900;
}

.btn-capture{
  width:100%;padding:12px;border-radius:var(--radius);
  border:1px solid var(--gold);
  background:var(--gold-dim);color:var(--gold);
  font-family:var(--font-display);font-size:0.85rem;font-weight:600;
  cursor:pointer;transition:all .3s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-capture:hover{background:rgba(212,160,23,0.2);transform:translateY(-1px)}

.btn-analyze{
  width:100%;padding:14px;border-radius:var(--radius);
  border:1px solid var(--gold);
  background:linear-gradient(135deg, rgba(212,160,23,0.12), rgba(139,92,246,0.06));
  color:var(--gold-bright);font-family:var(--font-display);
  font-size:0.9rem;font-weight:700;letter-spacing:1.5px;
  cursor:pointer;transition:all .3s;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:20px;
}
.btn-analyze:disabled{opacity:0.35;cursor:not-allowed}
.btn-analyze:not(:disabled):hover{
  background:linear-gradient(135deg, rgba(212,160,23,0.2), rgba(139,92,246,0.1));
  transform:translateY(-2px);box-shadow:var(--shadow-glow);
}

/* Palm line results */
.palm-results{margin-top:16px}
.palm-line-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:10px;overflow:hidden;
  cursor:pointer;transition:all .3s;
}
.palm-line-card.open{border-color:var(--border-gold)}
.palm-line-header{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
}
.palm-line-icon{font-size:1.5rem}
.palm-line-info{flex:1;min-width:0}
.palm-line-name{font-family:var(--font-display);font-size:0.88rem;color:var(--text)}
.palm-line-sub{font-size:0.68rem;color:var(--text-muted);font-style:italic}
.palm-line-arrow{
  color:var(--gold);font-size:0.7rem;transition:transform .3s;flex-shrink:0;
}
.palm-line-card.open .palm-line-arrow{transform:rotate(180deg)}
.palm-line-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.palm-line-card.open .palm-line-body{max-height:3000px;overflow:visible}
.palm-line-content{padding:16px;border-top:1px solid var(--border)}

/* Line diagram */
.palm-line-diagram{
  width:100%;max-width:240px;height:auto;margin:12px auto;display:block;
  border-radius:var(--radius-sm);
}

/* Palm comparison */
.palm-comparison{
  display:flex;gap:10px;margin-top:12px;
}
.palm-comp-col{
  flex:1;padding:12px;text-align:center;
  background:var(--bg-glass);border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.palm-comp-col h5{font-size:0.75rem;color:var(--gold);margin-bottom:4px}
.palm-comp-col p{font-size:0.72rem;color:var(--text-dim)}

/* === TOAST === */
.toast-container{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;
}
.toast{
  padding:10px 22px;border-radius:30px;
  background:rgba(2,2,9,0.95);border:1px solid var(--gold);
  color:var(--gold);font-size:0.8rem;font-weight:600;
  backdrop-filter:blur(12px);white-space:nowrap;
  animation:toastIn .3s ease, toastOut .3s ease 2.7s forwards;
}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* === SCROLL TOP === */
.scroll-top-btn{
  position:fixed;bottom:24px;right:20px;z-index:900;
  width:44px;height:44px;border-radius:50%;
  background:rgba(2,2,9,0.92);border:1px solid var(--border-gold);
  color:var(--gold);font-size:1rem;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(12px);transition:all .3s;
}
.scroll-top-btn.visible{display:flex}
.scroll-top-btn:hover{background:var(--gold-dim);transform:translateY(-2px)}

/* === RESPONSIVE === */
@media(max-width:480px){
  .oracle-nav-header{padding:8px 12px}
  .btn-nav-oracles span,.btn-nav-summary span{display:none}
  .btn-nav-oracles,.btn-nav-summary{padding:8px 10px}
  .oracle-menu-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .content-area{padding:16px 12px 100px}
  .oracle-detail-emoji{font-size:2.8rem}
  .oracle-detail-title{font-size:1rem}
  .palm-dual{flex-direction:column}
  .spread-row{gap:6px}
  .spread-item{min-width:80px;padding:10px 6px}
  .palm-guide-tips{grid-template-columns:1fr}
}
@media(min-width:768px){
  .oracle-menu-grid{grid-template-columns:repeat(4,1fr)}
  .palm-steps{flex-direction:row}
  .palm-step{flex:1}
}