body {
  font-family: 'Segoe UI', sans-serif;
  background: radial-gradient(circle at top, #0b0f2a, #020311);
  color: white;
  text-align: center;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
  opacity: 0.3;
  pointer-events: none;
}

/* main container */
.oracle-box{

max-width:700px;
margin:auto;
padding:40px 20px;

backdrop-filter: blur(20px);
background: rgba(255,255,255,0.05);

border-radius:20px;

border:1px solid rgba(255,255,255,0.1);

box-shadow:
0 0 20px rgba(255,255,255,0.05),
0 0 40px rgba(140,0,255,0.2);

} 

/* cosmic glass card */
.card{

    backdrop-filter: blur(20px);
    background: rgba(255,255,255,0.05);

    border-radius:20px;

    border:1px solid rgba(255,255,255,0.1);

    padding:30px;

    box-shadow:
        0 0 20px rgba(255,255,255,0.05),
        0 0 40px rgba(140,0,255,0.2);
}

/* title */
h1{
    text-align:center;
    font-size:32px;
    margin-bottom:20px;

    text-shadow:
    0 0 10px rgba(255,255,255,0.6),
    0 0 25px rgba(140,0,255,0.6);
}

/* dropdown */
button{

background:linear-gradient(135deg,#6f7cff,#b06cff);

color:white;

border:none;

padding:10px 18px;

border-radius:20px;

font-size:14px;

cursor:pointer;

margin-top:10px;

transition:0.25s;

}

button:hover{

transform:scale(1.05);

box-shadow:0 0 12px rgba(140,0,255,0.5);

}button.share{
background:#6b4cff;
color:white;
margin-top:10px;
}
/* tabs */
.tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 25px;
  flex-wrap: wrap;
}
.tab-content{
margin-top:20px;
}
.tab-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: #e6e6ff;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}

.tab-btn:hover {
  background: rgba(255,255,255,0.15);
}

.tab-btn.active {
  background: #6f7cff;
  color: white;
}
.tabs{

display:flex;
justify-content:center;
gap:12px;

margin-bottom:20px;

}
/* reading output */

#output{

    margin-top:20px;

    line-height:1.6;

    font-size:18px;
}

/* numerology block */

.numerology{

    margin-top:20px;

    padding:15px;

    border-radius:12px;

    background:rgba(0,0,0,0.4);

    border:1px solid rgba(255,255,255,0.1);
}

/* paywall */

.paywall{

margin-top:20px;
padding:20px;

border-radius:14px;

background:rgba(255,255,255,0.06);

border:1px solid rgba(255,255,255,0.15);

text-align:center;

backdrop-filter: blur(8px);

}

.paywall-sub{

opacity:0.8;
margin-bottom:15px;

}

.paywall-features{

list-style:none;
padding:0;
margin:15px 0;

}

.paywall-features li{

margin:6px 0;
opacity:0.9;

}

.paywall-buttons button{

margin:6px;
padding:10px 16px;

border-radius:10px;

background:rgba(255,255,255,0.15);

border:none;

cursor:pointer;

font-weight:600;

}



h1::after{

content:" ✦ ✧ ✦";

color:#b76dff;

font-size:18px;

margin-left:10px;

}button {

background: linear-gradient(45deg,#6f7cff,#b76dff);

border:none;

padding:12px 22px;

border-radius:20px;

color:white;

font-weight:bold;

cursor:pointer;

transition:0.3s;

box-shadow:
0 0 10px rgba(140,0,255,0.6);

}

button:hover{

transform:scale(1.05);

box-shadow:
0 0 20px rgba(140,0,255,0.9);
#stars{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:-1;
pointer-events:none;
}

body{
margin:0;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:#0a0a19;
color:white;
font-family:sans-serif;
}

.moon{

position:fixed;

top:80px;

right:80px;

width:160px;
height:160px;

border-radius:50%;

background:radial-gradient(circle at 30% 30%, #ffffff, #e6e6ff 40%, #a8a8ff 70%);

box-shadow:
0 0 60px rgba(255,255,255,0.8),
0 0 120px rgba(150,150,255,0.6),
0 0 180px rgba(120,120,255,0.5);

z-index:-2;

}
#compatibilityResult{

margin-top:20px;

padding:15px;

border-radius:12px;

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.1);

}
.cosmic-meter{

margin-top:15px;
padding:12px;

border-radius:10px;

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.1);

font-size:14px;

}
.constellation{

margin-top:20px;
padding:15px;
border-radius:12px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(5px);

}

.constellation h3{

margin-bottom:8px;

}.locked-reading{
filter: blur(4px);
opacity:0.6;
pointer-events:none;
user-select:none;
}

.blur-fade{
position:relative;
}

.blur-fade::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
background:linear-gradient(to bottom, transparent, rgba(10,10,25,0.85));
pointer-events:none;
}
}