:root {

    --bg: #050816;
    --bg-secondary: #0b1220;

    --card: rgba(15, 23, 42, 0.75);

    --border: rgba(255,255,255,0.08);

    --primary: #2563eb;
    --primary-light: #3b82f6;
    --accent: #60a5fa;

    --text: #f8fafc;
    --muted: #94a3b8;

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {

font-family: 'Inter', sans-serif;

background: var(--bg);

color: var(--text);

min-height: 100vh;

overflow-x: hidden;

}

/* ==========================
BACKGROUND
========================== */

.background-grid {

position: fixed;
inset: 0;

background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size: 50px 50px;

z-index: -3;

}

.background-grid::before {

content: "";

position: absolute;
inset: 0;

background:
    radial-gradient(
        circle at top,
        rgba(37,99,235,.18),
        transparent 50%
    );

}

/* ==========================
CURSOR GLOW
========================== */

.cursor-glow {

position: fixed;

width: 500px;
height: 500px;

border-radius: 50%;

background:
    radial-gradient(
        circle,
        rgba(37,99,235,.18),
        transparent 70%
    );

pointer-events: none;

transform: translate(-50%, -50%);

z-index: -2;

}

/* ==========================
NAVBAR
========================== */

nav {

display: flex;
justify-content: space-between;
align-items: center;

padding: 24px 40px;

border-bottom:
    1px solid rgba(255,255,255,.05);

backdrop-filter: blur(20px);

}

.logo {

font-size: 1.2rem;

font-weight: 800;

letter-spacing: -.5px;

}

.nav-right {

display: flex;
align-items: center;
gap: 10px;

color: var(--muted);

font-size: .9rem;

}

.status-dot {

width: 10px;
height: 10px;

border-radius: 50%;

background: #10b981;

box-shadow:
    0 0 10px #10b981;

}

/* ==========================
MAIN
========================== */

main {

max-width: 950px;

margin: auto;

padding: 90px 24px;

}

/* ==========================
HERO
========================== */

.hero {

text-align: center;

margin-bottom: 60px;

}

.badge {

display: inline-flex;

padding: 10px 18px;

border-radius: 999px;

border: 1px solid rgba(59,130,246,.3);

background: rgba(124,58,237,.1);

color: #93c5fd;

margin-bottom: 24px;

}

.hero h1 {

font-size: 5rem;

font-weight: 900;

line-height: .95;

letter-spacing: -4px;

margin-bottom: 24px;

}

.hero p {

max-width: 700px;

margin: auto;

color: var(--muted);

line-height: 1.8;

font-size: 1.1rem;

}

/* ==========================
GLASS CARDS
========================== */

.input-card,
.metrics-card,
.result-card {

background: var(--card);

border: 1px solid var(--border);

backdrop-filter: blur(25px);

-webkit-backdrop-filter: blur(25px);

border-radius: 24px;

transition: .3s ease;

}

.input-card:hover,
.metrics-card:hover,
.result-card:hover {

border-color:
    rgba(59,130,246,.3);

}

/* ==========================
INPUT CARD
========================== */

.input-card {

padding: 30px;

}

.input-header {

margin-bottom: 20px;

}

.input-header h3 {

margin-bottom: 8px;

}

.input-header span {

color: var(--muted);

}

textarea {

width: 100%;

min-height: 220px;

background: #0b1220;

border: 1px solid rgba(255,255,255,.08);

border-radius: 18px;

padding: 18px;

color: white;

resize: none;

font-size: 1rem;

outline: none;

transition: .3s;

}

textarea:focus {

border-color: var(--primary);

box-shadow:
    0 0 0 4px rgba(37,99,235,.15);

}

textarea::placeholder {

color: #64748b;

}

/* ==========================
EXAMPLES
========================== */

.examples {

display: flex;
flex-wrap: wrap;
gap: 10px;

margin-top: 16px;

}

.examples span {

width: 100%;

color: var(--muted);

font-size: .9rem;

}

.example-btn {

width: auto !important;

padding: 10px 16px !important;

background: rgba(255,255,255,.05) !important;

border: 1px solid rgba(255,255,255,.08);

font-size: .85rem;

color: white;

cursor: pointer;

}

/* ==========================
BUTTON
========================== */

.analyze-btn {

width: 100%;

margin-top: 20px;

padding: 16px;

border: none;

border-radius: 18px;

color: white;

font-size: 1rem;

font-weight: 700;

cursor: pointer;

position: relative;

overflow: hidden;

background:
    linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

}

.analyze-btn::before {

content: "";

position: absolute;

top: 0;
left: -100%;

width: 100%;
height: 100%;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

transition: .6s;

}

.analyze-btn:hover::before {

left: 100%;

}

.analyze-btn:hover {

transform: translateY(-2px);

box-shadow:
    0 15px 35px rgba(59,130,246,.4);

}

/* ==========================
METRICS
========================== */

.metrics-card {

margin-top: 25px;

padding: 25px;

}

.metric-row {

display: flex;
align-items: center;

gap: 12px;

margin-top: 16px;

}

.metric-label {

width: 120px;

}

.metric-bar {

flex: 1;

height: 12px;

background: #1e293b;

border-radius: 999px;

overflow: hidden;

}

.metric-fill {

height: 100%;

border-radius: 999px;

background:
    linear-gradient(
        90deg,
        #2563eb,
        #3b82f6,
        #60a5fa
    );

box-shadow:
    0 0 15px rgba(59,130,246,.5);

}

.metric-value {

width: 45px;

text-align: right;

}

/* ==========================
RESULT
========================== */

.result-card {

margin-top: 30px;

padding: 40px;

text-align: center;

}

.score-circle {

width: 190px;
height: 190px;

margin: auto auto 24px;

border-radius: 50%;

background:
    conic-gradient(
        #3b82f6,
        #60a5fa,
        #2563eb,
        #3b82f6
    );

display: flex;
justify-content: center;
align-items: center;

padding: 8px;

}

.score-circle span {

width: 100%;
height: 100%;

border-radius: 50%;

background: #0b1220;

display: flex;
justify-content: center;
align-items: center;

font-size: 3rem;

font-weight: 900;

}

#aura-change {

margin-top: 10px;

color: #93c5fd;

font-weight: 600;

}

.analysis-box {

margin-top: 30px;

text-align: left;

background: #0b1220;

border-radius: 16px;

padding: 20px;

line-height: 1.8;

}

/* ==========================
LOADER
========================== */

.loader {

position: fixed;

inset: 0;

background:
    rgba(5,8,22,.97);

display: flex;

justify-content: center;
align-items: center;

z-index: 9999;

}

.loader-content {

text-align: center;

}

.orb {

width: 120px;
height: 120px;

margin: auto auto 20px;

border-radius: 50%;

background:
    radial-gradient(
        circle,
        #3b82f6,
        transparent
    );

animation: pulse 1.5s infinite;

}

@keyframes pulse {

0% {
    transform: scale(.8);
    opacity: .5;
}

50% {
    transform: scale(1.2);
    opacity: 1;
}

100% {
    transform: scale(.8);
    opacity: .5;
}

}

.hidden {
display: none;
}

/* ==========================
FOOTER
========================== */

footer {

text-align: center;

padding: 40px;

color: var(--muted);

border-top:
    1px solid rgba(255,255,255,.05);

}

/* ==========================
MOBILE
========================== */

@media (max-width:768px) {

nav {

    padding: 20px;
}

.hero h1 {

    font-size: 3rem;

    letter-spacing: -2px;
}

.metric-row {

    flex-direction: column;
    align-items: stretch;
}

.metric-label,
.metric-value {

    width: auto;
}

}

.toast{

    position:fixed;

    bottom:30px;
    right:30px;

    background:#111827;

    color:white;

    padding:14px 20px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    transform:translateY(20px);

    opacity:0;

    transition:.3s;

    z-index:10000;
}

.toast.show{

    transform:translateY(0);

    opacity:1;
}

.user-aura {

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 14px;

    background: rgba(37,99,235,.1);

    border: 1px solid rgba(59,130,246,.25);

    border-radius: 999px;

    font-weight: 600;
}

#current-aura {
    color: white;
}

#current-level {
    font-weight: 700;
}