@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Orbitron:wght@600;800;900&family=Cinzel:wght@700;900&family=Righteous&family=Share+Tech+Mono&family=Syncopate:wght@700&family=Pacifico&display=swap');

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

:root {
    --bg-color: #08070f;
    --bg-gradient: radial-gradient(circle at 50% 35%, #1a103c 0%, #07060c 75%);
    --primary: #00f3ff;
    --secondary: #ff00a0;
    --accent: #7000ff;
    --text-color: #ffffff;
    --subtext-color: #a8b2d1;
    --logo-font: 'Righteous', cursive;
    --logo-gradient: linear-gradient(90deg, #00f3ff, #ff00a0);
    --logo-shadow: 0 0 25px rgba(0, 243, 255, 0.55), 0 0 45px rgba(255, 0, 160, 0.35);
    --input-bg: rgba(14, 12, 28, 0.85);
    --input-border: rgba(0, 243, 255, 0.5);
    --input-radius: 50px;
    --btn-bg: linear-gradient(90deg, #00d2ff 0%, #ff007f 100%);
    --btn-text: #ffffff;
    --btn-shadow: 0 0 20px rgba(255, 0, 127, 0.5);
    --card-bg: rgba(13, 12, 26, 0.92);
    --card-radius: 22px;
    --code-color: #ffffff;
    --code-shadow: 0 0 20px rgba(0, 243, 255, 0.7);
}

/* ==========================================================================
   10 JAW-DROPPING THEMES DEFINITIONS (Matching the Showcase Image)
   ========================================================================== */

/* No. 01: CYBERPUNK NEON */
body.theme-1 {
    --bg-color: #070510;
    --bg-gradient: radial-gradient(circle at 50% 30%, #1c0d38 0%, #070510 70%);
    --primary: #00f3ff;
    --secondary: #ff00a0;
    --accent: #9d00ff;
    --logo-font: 'Pacifico', cursive;
    --logo-gradient: linear-gradient(90deg, #00f3ff 0%, #d400ff 50%, #ff00a0 100%);
    --logo-shadow: 0 0 20px rgba(0, 243, 255, 0.6), 0 0 40px rgba(255, 0, 160, 0.4);
    --input-bg: rgba(15, 11, 29, 0.9);
    --input-radius: 50px;
    --btn-bg: linear-gradient(135deg, #00f3ff 0%, #c800ff 60%, #ff00a0 100%);
    --btn-shadow: 0 0 22px rgba(200, 0, 255, 0.55);
    --card-bg: rgba(14, 11, 28, 0.94);
    --card-radius: 24px;
    --code-color: #e0ffff;
    --code-shadow: 0 0 22px rgba(0, 243, 255, 0.85);
}

/* No. 02: LUXURY GOLD */
body.theme-2 {
    --bg-color: #080705;
    --bg-gradient: radial-gradient(circle at 50% 35%, #211a0c 0%, #070604 75%);
    --primary: #ffd700;
    --secondary: #b8860b;
    --accent: #fff3b0;
    --subtext-color: #d4c49e;
    --logo-font: 'Cinzel', serif;
    --logo-gradient: linear-gradient(135deg, #fff6cc 0%, #ffd700 45%, #b37e16 100%);
    --logo-shadow: 0 0 25px rgba(255, 215, 0, 0.45);
    --input-bg: rgba(18, 15, 10, 0.92);
    --input-radius: 45px;
    --btn-bg: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
    --btn-text: #0a0804;
    --btn-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    --card-bg: rgba(15, 13, 9, 0.95);
    --card-radius: 18px;
    --code-color: #ffe875;
    --code-shadow: 0 0 22px rgba(255, 215, 0, 0.65);
}

/* No. 03: SYNTHWAVE RETRO */
body.theme-3 {
    --bg-color: #110521;
    --bg-gradient: linear-gradient(180deg, #0d031a 0%, #250838 55%, #4a0e4e 100%);
    --primary: #ff2a85;
    --secondary: #9b00e8;
    --accent: #00f0ff;
    --subtext-color: #f3c1df;
    --logo-font: 'Righteous', cursive;
    --logo-gradient: linear-gradient(180deg, #ffea79 0%, #ff2a85 55%, #9b00e8 100%);
    --logo-shadow: 0 0 25px rgba(255, 42, 133, 0.7);
    --input-bg: rgba(24, 7, 43, 0.88);
    --input-radius: 12px;
    --btn-bg: linear-gradient(90deg, #ff2a85 0%, #9b00e8 100%);
    --btn-shadow: 0 0 20px rgba(255, 42, 133, 0.6);
    --card-bg: rgba(23, 6, 40, 0.92);
    --card-radius: 14px;
    --code-color: #ffffff;
    --code-shadow: 0 0 18px #ff2a85, 0 0 35px #9b00e8;
}

body.theme-3::after {
    content: "";
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 38vh;
    background-image: 
        linear-gradient(to right, rgba(255, 42, 133, 0.22) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 42, 133, 0.22) 1px, transparent 1px);
    background-size: 45px 30px;
    transform: perspective(300px) rotateX(65deg);
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

/* No. 04: GLASSMORPHIC NEBULA */
body.theme-4 {
    --bg-color: #161936;
    --bg-gradient: radial-gradient(circle at 25% 30%, #3a2b78 0%, transparent 55%),
                   radial-gradient(circle at 75% 65%, #1d5a73 0%, transparent 55%),
                   linear-gradient(135deg, #101329 0%, #20254a 100%);
    --primary: #7be3ff;
    --secondary: #b983ff;
    --accent: #ff94e8;
    --subtext-color: #d0dcff;
    --logo-font: 'Righteous', cursive;
    --logo-gradient: linear-gradient(90deg, #ffffff 0%, #a6ecff 50%, #d4b2ff 100%);
    --logo-shadow: 0 8px 30px rgba(123, 227, 255, 0.45);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-radius: 50px;
    --btn-bg: linear-gradient(135deg, rgba(123, 227, 255, 0.85), rgba(185, 131, 255, 0.85));
    --btn-text: #0c0f24;
    --btn-shadow: 0 8px 25px rgba(123, 227, 255, 0.35);
    --card-bg: rgba(255, 255, 255, 0.09);
    --card-radius: 28px;
    --code-color: #ffffff;
    --code-shadow: 0 4px 20px rgba(185, 131, 255, 0.6);
}

/* No. 05: SCI-FI HOLOGRAPHIC */
body.theme-5 {
    --bg-color: #030e14;
    --bg-gradient: radial-gradient(circle at 50% 40%, #072c3d 0%, #020b10 80%);
    --primary: #00e5ff;
    --secondary: #007799;
    --accent: #66f7ff;
    --subtext-color: #7cd4e6;
    --logo-font: 'Orbitron', sans-serif;
    --logo-gradient: linear-gradient(180deg, #ffffff 0%, #00e5ff 100%);
    --logo-shadow: 0 0 20px rgba(0, 229, 255, 0.75);
    --input-bg: rgba(4, 28, 40, 0.88);
    --input-radius: 8px;
    --btn-bg: linear-gradient(90deg, #00e5ff 0%, #0088aa 100%);
    --btn-text: #01131a;
    --btn-shadow: 0 0 20px rgba(0, 229, 255, 0.55);
    --card-bg: rgba(4, 26, 38, 0.92);
    --card-radius: 6px;
    --code-color: #5cf2ff;
    --code-shadow: 0 0 22px rgba(0, 229, 255, 0.9);
}

/* No. 06: BIOLUMINESCENT TEAL */
body.theme-6 {
    --bg-color: #03120e;
    --bg-gradient: radial-gradient(circle at 50% 35%, #083b2d 0%, #020f0b 75%);
    --primary: #00ffa3;
    --secondary: #00a86b;
    --accent: #7fffd4;
    --subtext-color: #93e5c7;
    --logo-font: 'Righteous', cursive;
    --logo-gradient: linear-gradient(90deg, #a8ffdb 0%, #00ffa3 50%, #00b894 100%);
    --logo-shadow: 0 0 28px rgba(0, 255, 163, 0.6);
    --input-bg: rgba(5, 29, 22, 0.9);
    --input-radius: 50px;
    --btn-bg: linear-gradient(135deg, #00ffa3 0%, #009e60 100%);
    --btn-text: #021a11;
    --btn-shadow: 0 0 22px rgba(0, 255, 163, 0.45);
    --card-bg: rgba(5, 28, 21, 0.94);
    --card-radius: 22px;
    --code-color: #6bffc8;
    --code-shadow: 0 0 25px rgba(0, 255, 163, 0.75);
}

/* No. 07: VOLCANIC EMBER */
body.theme-7 {
    --bg-color: #110603;
    --bg-gradient: radial-gradient(circle at 50% 35%, #3d1407 0%, #0e0402 75%);
    --primary: #ff5e00;
    --secondary: #ff2200;
    --accent: #ffaa00;
    --subtext-color: #e6b29a;
    --logo-font: 'Righteous', cursive;
    --logo-gradient: linear-gradient(180deg, #ffdd75 0%, #ff6a00 55%, #d91b00 100%);
    --logo-shadow: 0 0 28px rgba(255, 94, 0, 0.65);
    --input-bg: rgba(28, 10, 5, 0.92);
    --input-radius: 45px;
    --btn-bg: linear-gradient(135deg, #ff8800 0%, #d42000 100%);
    --btn-text: #ffffff;
    --btn-shadow: 0 0 22px rgba(255, 94, 0, 0.55);
    --card-bg: rgba(26, 9, 4, 0.95);
    --card-radius: 20px;
    --code-color: #ff9d42;
    --code-shadow: 0 0 25px rgba(255, 94, 0, 0.85);
}

/* No. 08: COSMIC AMETHYST */
body.theme-8 {
    --bg-color: #0c0517;
    --bg-gradient: radial-gradient(circle at 50% 35%, #2f1059 0%, #0a0414 75%);
    --primary: #b84dff;
    --secondary: #6f00ff;
    --accent: #e5b8ff;
    --subtext-color: #cbb3e6;
    --logo-font: 'Righteous', cursive;
    --logo-gradient: linear-gradient(90deg, #f0d9ff 0%, #c466ff 50%, #8c1aff 100%);
    --logo-shadow: 0 0 30px rgba(184, 77, 255, 0.65);
    --input-bg: rgba(21, 9, 38, 0.9);
    --input-radius: 50px;
    --btn-bg: linear-gradient(135deg, #c466ff 0%, #6f00ff 100%);
    --btn-text: #ffffff;
    --btn-shadow: 0 0 22px rgba(184, 77, 255, 0.55);
    --card-bg: rgba(19, 8, 36, 0.94);
    --card-radius: 22px;
    --code-color: #e6b8ff;
    --code-shadow: 0 0 25px rgba(184, 77, 255, 0.8);
}

/* No. 09: NEO-BRUTALIST DIGITAL */
body.theme-9 {
    --bg-color: #020804;
    --bg-gradient: linear-gradient(180deg, #020804 0%, #05160b 100%);
    --primary: #00ff66;
    --secondary: #008f39;
    --accent: #00ffaa;
    --subtext-color: #66cc8f;
    --logo-font: 'Share Tech Mono', monospace;
    --logo-gradient: linear-gradient(90deg, #00ff66 0%, #00cc52 100%);
    --logo-shadow: 0 0 20px rgba(0, 255, 102, 0.65);
    --input-bg: rgba(3, 18, 8, 0.95);
    --input-radius: 10px;
    --btn-bg: linear-gradient(90deg, #00993d 0%, #00ff66 100%);
    --btn-text: #010f05;
    --btn-shadow: 0 0 18px rgba(0, 255, 102, 0.5);
    --card-bg: rgba(3, 16, 7, 0.96);
    --card-radius: 10px;
    --code-color: #00ff66;
    --code-shadow: 0 0 20px rgba(0, 255, 102, 0.85);
}

/* No. 10: LIQUID CHROME */
body.theme-10 {
    --bg-color: #0b0c10;
    --bg-gradient: radial-gradient(circle at 50% 35%, #242834 0%, #090a0d 75%);
    --primary: #e6ecf5;
    --secondary: #7e899b;
    --accent: #ffffff;
    --subtext-color: #aeb7c4;
    --logo-font: 'Syncopate', sans-serif;
    --logo-gradient: linear-gradient(180deg, #ffffff 0%, #b0bac9 48%, #5e6673 52%, #e6ecf5 100%);
    --logo-shadow: 0 0 25px rgba(255, 255, 255, 0.45);
    --input-bg: rgba(20, 23, 30, 0.9);
    --input-radius: 50px;
    --btn-bg: linear-gradient(180deg, #ffffff 0%, #9aa4b5 100%);
    --btn-text: #0b0c10;
    --btn-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
    --card-bg: rgba(18, 20, 26, 0.94);
    --card-radius: 20px;
    --code-color: #ffffff;
    --code-shadow: 0 0 22px rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   CORE LAYOUT & MINIMALIST FULLSCREEN DESIGN (NO NAV / NO BARS)
   ========================================================================== */

body.public-page {
    background-color: var(--bg-color);
    background-image: var(--bg-gradient);
    color: var(--text-color);
    font-family: 'Cairo', sans-serif;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
    padding: 24px;
}

/* Ambient glowing particles in background */
.ambient-glow {
    position: fixed;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: 0.11;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulseGlow 6s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.08; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.16; }
}

.main-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 820px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Paradise Brand Logo */
.brand-logo {
    font-family: var(--logo-font);
    font-size: clamp(3.3rem, 7vw, 5.4rem);
    font-weight: 900;
    letter-spacing: 2px;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(var(--logo-shadow));
    margin-bottom: 8px;
    user-select: none;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease;
    line-height: 1.2;
    padding: 0 12px;
}

.brand-logo:hover {
    transform: scale(1.03);
}

.subtitle {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    color: var(--subtext-color);
    font-weight: 600;
    margin-bottom: 38px;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* ==========================================================================
   WIDE ROUNDED URL INPUT BOX WITH ANIMATED SHIMMER BORDER
   ========================================================================== */

.url-form {
    width: 100%;
    max-width: 780px;
}

.input-glow-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--input-radius);
    padding: 2.5px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent), var(--primary));
    background-size: 300% 300%;
    animation: borderFlow 5s ease infinite;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), 0 0 22px color-mix(in srgb, var(--primary) 35%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.input-glow-wrapper:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 0 35px color-mix(in srgb, var(--primary) 55%, transparent),
                0 0 60px color-mix(in srgb, var(--secondary) 35%, transparent);
}

.input-inner {
    display: flex;
    align-items: center;
    background: var(--input-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: calc(var(--input-radius) - 2px);
    padding: 8px 10px 8px 24px;
    width: 100%;
}

.url-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: 1.08rem;
    font-family: 'Cairo', sans-serif;
    direction: ltr;
    text-align: left;
    padding: 12px 14px;
    width: 100%;
}

.url-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
    direction: rtl;
    text-align: right;
}

.submit-btn {
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    outline: none;
    border-radius: calc(var(--input-radius) - 6px);
    padding: 14px 32px;
    font-family: 'Cairo', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    transition: all 0.25s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.submit-btn:hover {
    transform: scale(1.04);
    filter: brightness(1.12);
}

.submit-btn:active {
    transform: scale(0.98);
}

/* ==========================================================================
   CODE DISPLAY PAGE (code.php) - ANIMATED SHIMMERING GLOW BORDER AROUND DIV
   ========================================================================== */

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

.code-showcase-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 10px auto 0;
    padding: 3.5px;
    border-radius: var(--card-radius);
    background: conic-gradient(
        from var(--border-angle),
        transparent 10%,
        var(--primary) 25%,
        var(--secondary) 45%,
        #ffffff 50%,
        var(--primary) 55%,
        transparent 75%,
        var(--secondary) 90%,
         var(--primary) 100%
    );
    animation: rotateShimmer 3.5s linear infinite;
    box-shadow: 0 0 40px color-mix(in srgb, var(--primary) 35%, transparent),
                0 0 80px color-mix(in srgb, var(--secondary) 22%, transparent);
}

/* Fallback & outer aura glow */
.code-showcase-wrapper::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: calc(var(--card-radius) + 4px);
    background: linear-gradient(125deg, var(--primary), transparent 40%, var(--secondary), var(--accent), var(--primary));
    background-size: 300% 300%;
    animation: borderFlow 4s ease infinite;
    filter: blur(14px);
    opacity: 0.75;
    z-index: -1;
}

/* Sparkle particles on corners */
.code-showcase-wrapper::after {
    content: "✦";
    position: absolute;
    top: -14px;
    right: 24px;
    color: #ffffff;
    font-size: 1.2rem;
    text-shadow: 0 0 12px var(--primary), 0 0 20px #fff;
    animation: twinkle 1.8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes rotateShimmer {
    to {
        --border-angle: 1turn;
    }
}

@keyframes borderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    100% { opacity: 1; transform: scale(1.25) rotate(25deg); }
}

/* Sci-Fi corner brackets for Theme 5 & Theme 9 */
body.theme-5 .code-showcase-wrapper,
body.theme-9 .code-showcase-wrapper {
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
}

.code-card-inner {
    background: var(--card-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: calc(var(--card-radius) - 3px);
    padding: 42px 30px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Moving light sweep inside the card */
.code-card-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.07),
        transparent
    );
    transform: skewX(-25deg);
    animation: cardSweep 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cardSweep {
    0% { left: -150%; }
    60%, 100% { left: 200%; }
}

.code-digits {
    font-family: 'Orbitron', 'Share Tech Mono', monospace;
    font-size: clamp(2.8rem, 6vw, 4.1rem);
    font-weight: 900;
    letter-spacing: 6px;
    color: var(--code-color);
    text-shadow: var(--code-shadow);
    margin-bottom: 24px;
    direction: ltr;
    user-select: all;
    padding: 8px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.copy-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
    border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
    padding: 10px 28px;
    border-radius: 50px;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    margin-bottom: 14px;
}

.copy-btn:hover {
    background: var(--primary);
    color: #060609;
    box-shadow: 0 0 20px var(--primary);
    transform: translateY(-2px);
}

.code-label {
    font-size: 0.92rem;
    color: var(--subtext-color);
    opacity: 0.85;
}

.back-home-link {
    margin-top: 26px;
    color: var(--subtext-color);
    text-decoration: none;
    font-size: 0.92rem;
    opacity: 0.65;
    transition: opacity 0.2s, color 0.2s;
}

.back-home-link:hover {
    opacity: 1;
    color: var(--primary);
}

.error-alert {
    margin-top: 18px;
    padding: 12px 24px;
    border-radius: 12px;
    background: rgba(255, 45, 85, 0.15);
    border: 1px solid rgba(255, 45, 85, 0.5);
    color: #ff859d;
    font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .input-inner {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
        border-radius: 22px;
    }
    .input-glow-wrapper {
        border-radius: 24px;
    }
    .url-input {
        text-align: center;
    }
    .submit-btn {
        width: 100%;
        justify-content: center;
        border-radius: 16px;
    }
}