/* ========================================
   SHARED.CSS — Global Styles
   ======================================== */

/* ── CSS VARIABLES ── */
:root {
    --blue: #0066ff;
    --blue-bright: #00a8ff;
    --blue-glow: #0044cc;
    --green: #00ff88;
    --white: #f0f4ff;
    --gray: #8a9bb5;
    --dark: #040810;
    --dark2: #070e1a;
    --card-bg: rgba(255,255,255,0.04);
    --card-border: rgba(255,255,255,0.10);
    --icon-surface: rgba(255,255,255,0.06);
    --icon-border: rgba(255,255,255,0.12);
    --icon-color: #00a8ff;
    --text-primary: #f0f4ff;
    --text-secondary: #c8d6f0;
    --text-muted: #8a9bb5;
    --surface-1: rgba(255,255,255,0.04);
    --surface-2: rgba(255,255,255,0.07);
}

body.light-mode {
    --blue: #0055dd;
    --blue-bright: #0077cc;
    --blue-glow: #0044bb;
    --green: #00b85e;
    --white: #0a1628;
    --gray: #3a4a6b;
    --dark: #e8f0ff;
    --dark2: #d8e4f8;
    --card-bg: rgba(0,60,160,0.07);
    --card-border: rgba(0,60,160,0.18);
    --icon-surface: rgba(0,60,160,0.10);
    --icon-border: rgba(0,60,160,0.20);
    --icon-color: #0055dd;
    --text-primary: #0a1628;
    --text-secondary: #1a2c4e;
    --text-muted: #3a4a6b;
    --surface-1: rgba(0,60,160,0.05);
    --surface-2: rgba(0,60,160,0.09);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.7;
    cursor: none;
    transition: background 0.4s, color 0.4s;
}

body.light-mode { cursor: auto; }

/* ── CANVAS BACKGROUND ── */
#bgCanvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    opacity: 0.6;
}
body.light-mode #bgCanvas { opacity: 0.25; }

/* ── CUSTOM CURSOR ── */
.cursor {
    position: fixed; width: 12px; height: 12px;
    background: var(--blue-bright); border-radius: 50%;
    pointer-events: none; z-index: 99999;
    transition: transform 0.15s, background 0.2s;
    mix-blend-mode: screen;
}
.cursor-follower {
    position: fixed; width: 36px; height: 36px;
    border: 1.5px solid var(--blue-bright); border-radius: 50%;
    pointer-events: none; z-index: 99998;
    transition: border-color 0.3s;
}
body.light-mode .cursor, body.light-mode .cursor-follower { display: none; }

/* ── HEADER / NAV ── */
header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 0;
    backdrop-filter: blur(20px);
    background: rgba(4,8,16,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: background 0.4s;
}
body.light-mode header {
    background: rgba(232,240,255,0.85);
    border-bottom-color: rgba(0,60,160,0.15);
}
nav {
    max-width: 1300px; margin: 0 auto;
    display: flex; align-items: center; gap: 2rem;
    padding: 1.1rem 2rem;
}
.logo {
    font-family: 'Orbitron', monospace; font-size: 1.25rem; font-weight: 700;
    color: var(--text-primary); text-decoration: none; margin-right: auto;
    letter-spacing: 2px; transition: color 0.3s;
}
.logo span { color: var(--blue-bright); }
.logo:hover { color: var(--blue-bright); }

.nav-links { list-style: none; display: flex; gap: 0.5rem; align-items: center; }
.nav-links a {
    font-family: 'Space Mono', monospace; font-size: 0.78rem;
    color: var(--text-secondary); text-decoration: none;
    padding: 0.55rem 1.1rem; border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.25s; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 0.5rem;
}
.nav-links a:hover, .nav-links a.active {
    color: var(--blue-bright); background: rgba(0,168,255,0.08);
    border-color: rgba(0,168,255,0.25);
}
.nav-contact-btn {
    background: linear-gradient(135deg, var(--blue), #0055cc) !important;
    color: #fff !important; border-color: transparent !important;
    box-shadow: 0 0 18px rgba(0,102,255,0.35);
}
.nav-contact-btn:hover {
    box-shadow: 0 0 28px rgba(0,168,255,0.5) !important;
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--blue-bright), var(--blue)) !important;
}
.nav-contact-btn.active {
    background: linear-gradient(135deg, var(--blue-bright), var(--blue)) !important;
}

/* Theme toggle */
.theme-bulb {
    background: none; border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-secondary); border-radius: 8px;
    width: 38px; height: 38px; display: flex;
    align-items: center; justify-content: center;
    cursor: none; transition: all 0.3s; font-size: 1rem;
}
.theme-bulb:hover { border-color: var(--blue-bright); color: var(--blue-bright); background: rgba(0,168,255,0.08); }
body.light-mode .theme-bulb { cursor: pointer; }

/* Hamburger */
.hamburger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: none;
    padding: 4px;
}
body.light-mode .hamburger { cursor: pointer; }
.hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--text-secondary); border-radius: 2px;
    transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-links {
        position: fixed; top: 0; right: -100%; height: 100vh; width: 260px;
        background: rgba(4,8,16,0.97); backdrop-filter: blur(20px);
        flex-direction: column; justify-content: center;
        padding: 2rem; gap: 1rem; transition: right 0.4s;
        border-left: 1px solid rgba(255,255,255,0.07);
    }
    body.light-mode .nav-links { background: rgba(232,240,255,0.97); }
    .nav-links.open { right: 0; }
    .nav-links a { padding: 0.8rem 1.2rem; font-size: 0.85rem; }
}

/* ── SECTION TITLES ── */
.section-title {
    font-family: 'Orbitron', monospace; font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900; letter-spacing: 3px; line-height: 1.2;
    color: var(--text-primary); margin-bottom: 1rem;
}
.gradient-text {
    background: linear-gradient(135deg, var(--blue-bright), var(--green));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-line {
    width: 80px; height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    margin: 0 auto 1.5rem; border-radius: 2px;
}
.section-subtitle {
    color: var(--text-muted); font-size: 1.1rem;
    max-width: 600px; margin: 0 auto 2rem;
}

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s, transform 0.6s; }
.reveal.visible { opacity: 1; transform: none; }

/* ── BUTTONS ── */
.btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1.8rem; border-radius: 10px;
    font-family: 'Space Mono', monospace; font-size: 0.82rem;
    font-weight: 700; letter-spacing: 1px; text-decoration: none;
    border: none; cursor: none; transition: all 0.3s;
}
body.light-mode .btn { cursor: pointer; }
.btn-primary {
    background: linear-gradient(135deg, var(--blue), #0044cc);
    color: #fff; box-shadow: 0 0 20px rgba(0,102,255,0.4);
}
.btn-primary:hover {
    box-shadow: 0 0 35px rgba(0,168,255,0.6);
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--blue-bright), var(--blue));
}
.btn-secondary {
    background: transparent; color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.18);
}
.btn-secondary:hover {
    border-color: var(--blue-bright); color: var(--blue-bright);
    background: rgba(0,168,255,0.08); transform: translateY(-2px);
}

/* ── PROJECT CARD (shared between index + projects page) ── */
.project-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px; overflow: hidden;
    cursor: none; transition: all 0.35s;
    position: relative;
}
body.light-mode .project-card { cursor: pointer; }
.project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0,168,255,0.4);
    box-shadow: 0 20px 50px rgba(0,102,255,0.18);
}
.project-img { position: relative; overflow: hidden; height: 200px; }
.project-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s;
}
.project-card:hover .project-img img { transform: scale(1.06); }
.project-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(4,8,16,0.85));
}
body.light-mode .project-img-overlay {
    background: linear-gradient(to bottom, transparent 40%, rgba(232,240,255,0.7));
}
.project-num {
    position: absolute; top: 0.9rem; right: 0.9rem;
    font-family: 'Orbitron', monospace; font-size: 0.7rem;
    color: rgba(255,255,255,0.5); font-weight: 700;
    background: rgba(0,0,0,0.4); padding: 0.3rem 0.6rem;
    border-radius: 6px; backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
}
.project-body { padding: 1.4rem 1.5rem 1.5rem; }
.project-body h3 {
    font-family: 'Orbitron', monospace; font-size: 1rem;
    color: var(--text-primary); margin-bottom: 0.6rem;
    line-height: 1.3;
}
.project-body p {
    color: var(--text-muted); font-size: 0.9rem;
    line-height: 1.6; margin-bottom: 1rem;
}
.tech-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.tech-badge {
    font-family: 'Space Mono', monospace; font-size: 0.7rem;
    padding: 0.25rem 0.65rem; border-radius: 6px;
    background: rgba(0,168,255,0.1); color: var(--blue-bright);
    border: 1px solid rgba(0,168,255,0.2);
}
.project-links-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.project-links-row a {
    font-family: 'Space Mono', monospace; font-size: 0.72rem;
    padding: 0.4rem 0.9rem; border-radius: 8px;
    text-decoration: none; transition: all 0.25s;
    display: flex; align-items: center; gap: 0.4rem;
    border: 1px solid;
}
.link-demo {
    color: var(--blue-bright); border-color: rgba(0,168,255,0.3);
    background: rgba(0,168,255,0.06);
}
.link-demo:hover { background: rgba(0,168,255,0.15); box-shadow: 0 0 14px rgba(0,168,255,0.3); }
.link-code {
    color: var(--text-muted); border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
}
.link-code:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.3); }

/* Loading spinner */
.projects-loading {
    text-align: center; padding: 5rem 2rem;
    color: var(--text-muted); font-family: 'Space Mono', monospace; font-size: 0.85rem;
}
.loading-spinner {
    width: 40px; height: 40px; margin: 0 auto 1.5rem;
    border: 3px solid rgba(0,168,255,0.15);
    border-top-color: var(--blue-bright); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Firebase error */
.firebase-error {
    text-align: center; padding: 4rem 2rem;
    color: var(--text-muted); font-family: 'Space Mono', monospace; font-size: 0.85rem;
    border: 1px solid rgba(255,100,100,0.2); border-radius: 16px;
    background: rgba(255,50,50,0.04);
}

/* ── POPUP ── */
.popup-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(2,5,12,0.92); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.popup-overlay.active { opacity: 1; pointer-events: all; }
.popup-card {
    background: #070e1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; max-width: 680px; width: 100%;
    max-height: 88vh; overflow-y: auto;
    position: relative;
    transform: translateY(20px); transition: transform 0.3s;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
body.light-mode .popup-card { background: #f0f5ff; border-color: rgba(0,60,160,0.2); }
.popup-overlay.active .popup-card { transform: translateY(0); }
.popup-close {
    position: absolute; top: 1rem; right: 1rem; z-index: 10;
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted); font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    cursor: none; transition: all 0.2s;
}
body.light-mode .popup-close { cursor: pointer; background: rgba(0,0,0,0.06); }
.popup-close:hover { background: rgba(255,70,70,0.12); color: #ff6666; border-color: rgba(255,70,70,0.3); }
.popup-img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 14px 14px 0 0; display: block; }
.popup-img-placeholder {
    height: 200px; display: flex; align-items: center; justify-content: center;
    font-size: 4rem; background: linear-gradient(135deg, rgba(0,102,255,0.1), rgba(0,255,136,0.05));
    border-radius: 14px 14px 0 0;
}
.popup-gallery {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem;
    padding: 0.7rem 1.2rem 0;
}
.popup-thumb {
    height: 60px; object-fit: cover; border-radius: 8px;
    cursor: pointer; border: 2px solid transparent; transition: all 0.2s;
    opacity: 0.6;
}
.popup-thumb.active, .popup-thumb:hover { opacity: 1; border-color: var(--blue-bright); }
.popup-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; z-index: 5;
}
.popup-nav:hover { background: rgba(0,102,255,0.6); }
.popup-nav-prev { left: 0.7rem; }
.popup-nav-next { right: 0.7rem; }
.popup-glow-bar { height: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); }
.popup-body { padding: 1.5rem 1.8rem 2rem; }
.popup-tag {
    display: inline-block; font-family: 'Space Mono', monospace; font-size: 0.7rem;
    color: var(--blue-bright); background: rgba(0,168,255,0.1);
    border: 1px solid rgba(0,168,255,0.2); border-radius: 6px;
    padding: 0.25rem 0.75rem; letter-spacing: 1px; margin-bottom: 0.8rem;
}
.popup-body h2 {
    font-family: 'Orbitron', monospace; font-size: 1.35rem;
    color: var(--text-primary); margin-bottom: 0.8rem;
}
.popup-short-desc { color: var(--text-secondary); font-size: 1rem; line-height: 1.65; margin-bottom: 0.8rem; }
.popup-long-desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.2rem; }
.popup-tech { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.popup-tech span {
    font-family: 'Space Mono', monospace; font-size: 0.7rem;
    padding: 0.25rem 0.65rem; border-radius: 6px;
    background: rgba(0,168,255,0.1); color: var(--blue-bright);
    border: 1px solid rgba(0,168,255,0.2);
}
.popup-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── FOOTER ── */
footer {
    position: relative; z-index: 10;
    text-align: center; padding: 3rem 2rem 2.5rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(2,5,12,0.6); backdrop-filter: blur(10px);
}
body.light-mode footer { background: rgba(220,232,255,0.6); border-top-color: rgba(0,60,160,0.12); }
.footer-logo {
    font-family: 'Orbitron', monospace; font-size: 1.4rem;
    font-weight: 900; margin-bottom: 0.8rem;
}
footer p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.8; }
footer a { transition: color 0.25s; }
footer a:hover { color: var(--blue-bright) !important; }

/* ── BADMINTON WIDGET ── */
#badminton-widget {
    position: fixed; right: 1.6rem; bottom: 1.8rem;
    z-index: 8000; user-select: none;
}
.badminton-container {
    display: flex; flex-direction: column;
    align-items: center; gap: 0.3rem;
    cursor: none;
}
body.light-mode .badminton-container { cursor: pointer; }
.racket-icon {
    font-size: 2.2rem; line-height: 1;
    transition: transform 0.2s;
    filter: drop-shadow(0 0 6px rgba(0,168,255,0.5));
}
.badminton-container:hover .racket-icon { transform: scale(1.15) rotate(-10deg); }
.racket-label {
    font-family: 'Space Mono', monospace; font-size: 0.6rem;
    color: var(--text-muted); letter-spacing: 1px;
    text-transform: uppercase;
}
/* Shuttlecock animated */
#shuttlecock {
    position: fixed; z-index: 7999;
    font-size: 1.6rem;
    pointer-events: none; display: none;
    transition: none;
}
#shuttlecock.flying {
    display: block;
    animation: shuttleFly 0.65s cubic-bezier(0.22,0.68,0,1.3) forwards;
}
@keyframes shuttleFly {
    0%   { opacity: 0; transform: scale(0.3) rotate(-20deg); }
    20%  { opacity: 1; transform: scale(1.1) rotate(10deg); }
    80%  { opacity: 1; transform: scale(1) rotate(-5deg); }
    100% { opacity: 0; transform: scale(0.4) rotate(20deg); }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: rgba(0,102,255,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-bright); }

/* ── REVIEWS SECTION ── */
.reviews-section {
    position: relative; z-index: 10;
    padding: 5rem 2rem;
    max-width: 1200px; margin: 0 auto;
}
.reviews-section .section-header {
    text-align: center; margin-bottom: 3rem;
}
.reviews-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    gap: 1.8rem;
}
.review-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px; padding: 1.8rem;
    position: relative; transition: all 0.35s;
}
.review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0,168,255,0.35);
    box-shadow: 0 18px 45px rgba(0,102,255,0.14);
}
.review-card::before {
    content: '"';
    position: absolute; top: 1rem; right: 1.5rem;
    font-size: 4rem; line-height: 1;
    color: rgba(0,168,255,0.12);
    font-family: Georgia, serif;
}
.review-stars { color: #ffd700; font-size: 0.9rem; margin-bottom: 0.8rem; letter-spacing: 2px; }
.review-text {
    color: var(--text-secondary); font-size: 0.95rem;
    line-height: 1.7; margin-bottom: 1.2rem; font-style: italic;
}
.review-author { display: flex; align-items: center; gap: 0.9rem; }
.review-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--green));
    display: flex; align-items: center; justify-content: center;
    font-family: 'Orbitron', monospace; font-size: 0.85rem;
    color: #fff; font-weight: 700; flex-shrink: 0;
    border: 2px solid rgba(0,168,255,0.3);
}
.review-author-info h4 {
    font-family: 'Orbitron', monospace; font-size: 0.78rem;
    color: var(--text-primary); margin-bottom: 0.15rem;
}
.review-author-info span {
    font-size: 0.8rem; color: var(--text-muted);
}
.reviews-loading {
    text-align: center; padding: 3rem;
    color: var(--text-muted); font-family: 'Space Mono', monospace; font-size: 0.85rem;
}

/* ── LEAVE REVIEW BUTTON ── */
.btn-review-leave {
    background: transparent;
    border: 1px solid rgba(255,215,0,0.35);
    color: #ffd700;
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    cursor: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 1px;
}
.btn-review-leave:hover {
    background: rgba(255,215,0,0.1);
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
    transform: translateY(-2px);
}
body.light-mode .btn-review-leave { cursor: pointer; }

/* ── REVIEW MODAL ── */
.review-modal-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(2,5,12,0.92);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.review-modal-overlay.active { opacity: 1; pointer-events: all; }

.review-modal {
    background: #070e1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 22px;
    max-width: 460px; width: 100%;
    padding: 2.5rem 2.2rem 2.2rem;
    position: relative;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.3s;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
body.light-mode .review-modal {
    background: #f0f5ff;
    border-color: rgba(0,60,160,0.18);
    box-shadow: 0 20px 60px rgba(0,60,160,0.12);
}
.review-modal-overlay.active .review-modal { transform: translateY(0) scale(1); }

/* Accent bar at top */
.review-modal::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, #ffd700, #ff8c00, var(--blue-bright));
    border-radius: 22px 22px 0 0;
}

.review-modal-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted); font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center;
    cursor: none; transition: all 0.2s;
}
body.light-mode .review-modal-close { cursor: pointer; background: rgba(0,0,0,0.05); }
.review-modal-close:hover { background: rgba(255,70,70,0.12); color: #ff6666; border-color: rgba(255,70,70,0.3); }

.review-modal-icon { font-size: 2.6rem; margin-bottom: 0.8rem; text-align: center; }
.review-modal h3 {
    font-family: 'Orbitron', monospace; font-size: 1.2rem;
    color: var(--text-primary); text-align: center; margin-bottom: 0.5rem;
}
.review-modal-sub {
    color: var(--text-muted); font-size: 0.88rem;
    text-align: center; line-height: 1.6; margin-bottom: 1.8rem;
}

/* PIN inputs */
.review-pin-row {
    display: flex; gap: 0.9rem; justify-content: center;
    margin-bottom: 1rem;
}
.pin-input {
    width: 56px; height: 60px;
    text-align: center;
    font-family: 'Orbitron', monospace; font-size: 1.5rem; font-weight: 700;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: var(--text-primary);
    outline: none;
    transition: all 0.25s;
    -webkit-text-security: disc;
}
.pin-input:focus {
    border-color: var(--blue-bright);
    box-shadow: 0 0 16px rgba(0,168,255,0.25);
    background: rgba(0,168,255,0.06);
}
body.light-mode .pin-input {
    background: rgba(0,60,160,0.05);
    border-color: rgba(0,60,160,0.2);
}

.review-pin-error {
    color: #ff6666; font-family: 'Space Mono', monospace;
    font-size: 0.75rem; text-align: center; min-height: 1.2em;
    margin-bottom: 1rem;
}

/* Review form */
.review-form-group { margin-bottom: 1.1rem; }
.review-form-group label {
    display: block;
    font-family: 'Space Mono', monospace; font-size: 0.7rem;
    color: var(--blue-bright); letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 0.4rem;
}
.review-form-group input,
.review-form-group textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif; font-size: 1rem;
    outline: none; transition: all 0.25s;
    resize: vertical;
}
body.light-mode .review-form-group input,
body.light-mode .review-form-group textarea {
    background: rgba(0,60,160,0.05);
    border-color: rgba(0,60,160,0.18);
}
.review-form-group input:focus,
.review-form-group textarea:focus {
    border-color: var(--blue-bright);
    background: rgba(0,168,255,0.05);
    box-shadow: 0 0 14px rgba(0,168,255,0.15);
}
.review-char-count {
    text-align: right; font-family: 'Space Mono', monospace;
    font-size: 0.68rem; color: var(--text-muted); margin-top: 0.3rem;
}

/* Star picker */
.star-picker {
    display: flex; gap: 0.4rem; font-size: 1.8rem;
    cursor: default;
}
.star-pick {
    color: rgba(255,215,0,0.25);
    cursor: none;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}
body.light-mode .star-pick { cursor: pointer; }
.star-pick.active { color: #ffd700; }
.star-pick.hover  { color: rgba(255,215,0,0.7); transform: scale(1.15); }

.review-form-error {
    color: #ff6666; font-family: 'Space Mono', monospace;
    font-size: 0.75rem; min-height: 1.2em; margin-bottom: 0.8rem;
}

.review-btn-full {
    width: 100%; justify-content: center;
    font-size: 0.85rem; padding: 0.85rem;
}