/* Global Reset */
        * { box-sizing: border-box; }

        :root {
            --wpn-h: #d38b1a; --wpn-b: #281a07; --wpn-light: #482f0c;
            --vit-h: #86bd22; --vit-b: #1c2405; --vit-light: #35440c;
            --spi-h: #c776c7; --spi-b: #240f24; --spi-light: #421c42;
            --cyan: #82fffd;
            --ui-bg: #0f1115;
            --ui-panel: #1a1d23;
            --ui-border: #2d323a;
            --ui-accent: #3d4450;
            --ui-text: #e2e8f0;
            --ui-text-dim: #94a3b8;
            --ui-export: #f59e0b;
        }

        body { font-family: 'Inter', sans-serif; background: var(--ui-bg); color: var(--ui-text); margin: 0; display: flex; flex-direction: column; align-items: center; scroll-behavior: smooth; }

        header { text-align: center; padding: 60px 20px 30px 20px; max-width: 900px; }
        header h1 { font-size: 48px; font-weight: 800; margin: 0; letter-spacing: -1.5px; color: white; }
        header p.subtitle { font-size: 18px; color: var(--ui-text-dim); margin-top: 10px; font-weight: 500; line-height: 1.4; }

        /* --- STICKY MOBILE NAV --- */
        .mobile-nav {
            display: none;
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(15, 17, 21, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--ui-border);
            padding: 10px 20px;
            width: 100%;
            justify-content: center;
        }

        .tab-btn-wrapper {
            background: #111418;
            border: 1px solid var(--ui-border);
            border-radius: 12px;
            padding: 4px;
            display: flex;
            width: 100%;
            max-width: 400px;
            gap: 4px;
        }

        .tab-btn {
            flex: 1; padding: 12px; border-radius: 8px; border: none; background: transparent;
            color: var(--ui-text-dim); font-weight: 700; cursor: pointer; display: flex;
            align-items: center; justify-content: center; gap: 10px; font-size: 15px; transition: 0.2s;
        }
        .tab-btn svg { width: 18px; height: 18px; opacity: 0.6; }
        .tab-btn.active { background: #2d323a; color: white; }
		
		/* --- MAIN NAVBAR CSS --- */
		.site-navbar {
			width: 100%;
			background: var(--ui-bg);
			border-bottom: 1px solid var(--ui-border);
			position: sticky;
			top: 0;
			z-index: 2000; /* Stays above everything */
		}
		.nav-content {
			max-width: 1300px;
			margin: 0 auto;
			padding: 0 20px;
			height: 70px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.nav-logo {
			color: white;
			text-decoration: none;
			font-weight: 700;
			font-size: 18px;
			letter-spacing: -0.5px;
		}

		.nav-links {
			display: flex;
			list-style: none;
			gap: 20px;
			margin: 0;
			padding: 0;
		}
		.nav-links a {
			color: var(--ui-text-dim);
			text-decoration: none;
			font-size: 14px;
			font-weight: 600;
			transition: 0.2s;
		}
		.nav-links a:hover { color: var(--cyan); }

		/* Hamburger Button */
		.nav-hamburger {
			display: none;
			flex-direction: column;
			gap: 5px;
			background: none;
			border: none;
			cursor: pointer;
			padding: 5px;
		}
		.nav-hamburger span {
			display: block;
			width: 25px;
			height: 2px;
			background-color: white;
			transition: 0.3s;
		}

/* Mobile View (1050px to match your site) */
@media (max-width: 1050px) {
    .nav-hamburger { display: flex; }
    .nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--ui-panel);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        border-bottom: 0px solid var(--ui-border);
    }
    .nav-links.active {
        max-height: 500px;
        border-bottom: 1px solid var(--ui-border);
    }
    .nav-links li { width: 100%; text-align: center; }
    .nav-links li a {
        display: block;
        padding: 15px 0;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
    
    /* Hamburger to 'X' animation */
    .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.active span:nth-child(2) { opacity: 0; }
    .nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* REQUIRED ADJUSTMENT: Offset your existing sticky mobile tabs so they don't overlap */
    .mobile-nav { top: 70px !important; }
}

        /* --- MAIN LAYOUT --- */
        .main-container { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 50px; padding: 20px; max-width: 1300px; width: 100%; box-sizing: border-box; }

        /* --- EDITOR PANEL --- */
        .editor-container { width: 480px; flex-shrink: 0; background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0,0,0,0.4); max-height: 85vh; }
        .editor-content { padding: 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
        .input-group { display: flex; flex-direction: column; gap: 8px; width: 100%; }
        .input-group label { font-size: 11px; font-weight: 700; color: var(--ui-text-dim); text-transform: uppercase; letter-spacing: 1px; }
        input, select, textarea { background: #0f1115; border: 1px solid var(--ui-border); color: white; padding: 12px; border-radius: 8px; font-size: 14px; outline: none; transition: 0.2s; width: 100%; display: block; }
        input:focus, textarea:focus { border-color: var(--ui-export); }
        ::placeholder { color: #4a515c; }

        .ability-editor-block { background: rgba(255,255,255,0.02); border: 1px solid var(--ui-border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 15px; margin-bottom: 10px; width: 100%; }
        .block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
        .btn { padding: 10px 15px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; justify-content: center;}
        .btn-add { background: var(--ui-accent); color: white; font-size: 11px; width: 100%; }
        .btn-del { background: #ef444415; color: #ef4444; font-size: 10px; border: 1px solid #ef444433; padding: 6px 10px; }
        
        .export-btn { background: var(--ui-export); color: #000; padding: 20px; font-weight: 800; font-size: 14px; border-radius: 0 0 16px 16px; width: 100%; text-transform: uppercase; cursor: pointer; border:none; transition: 0.2s; }
        .export-btn:hover { background: #fbbf24; transform: scale(1.01); }
        .export-btn:disabled { background: #2a2a2a; color: #666; cursor: not-allowed; opacity: 0.6; }

        .preview-hint { display: block; text-align: center; margin-top: 15px; font-size: 13px; color: var(--ui-text-dim); cursor: pointer; opacity: 0.5; transition: 0.2s; text-decoration: underline; padding-bottom: 15px; }

        /* --- THE CARD (PROPORTIONAL SCALING) --- */
        .preview-wrapper { position: sticky; top: 40px; flex-shrink: 0; }
        #item-card { 
            width: 375px; /* FIXED WIDTH to prevent "Long" look */
            height: auto;
            background: radial-gradient(circle at center, var(--active-l) 0%, var(--active-b) 100%); 
            display: flex; flex-direction: column; 
            box-shadow: 0 40px 80px rgba(0,0,0,0.9); 
            border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; 
            font-family: 'Segoe UI', Tahoma, sans-serif; 
            position: relative; 
            overflow: visible; 
            margin: 0 auto;
            scroll-margin-top: 120px;
        }

        .card-content-wrapper { display: flex; flex-direction: column; min-height: 100%; width: 100%; padding-bottom: 35px; }

        .card-header { padding: 22px 25px; background-color: var(--active-h); background-image: radial-gradient(rgba(0,0,0,0.15) 1.5px, transparent 0); background-size: 6px 6px; flex-shrink: 0; }
        #out-name { font-size: 28px; font-weight: 700; margin: 0; line-height: 1; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .soul-val { color: var(--cyan); font-weight: 700; font-size: 20px; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
        
        .stats-area { padding: 20px 25px; display: flex; flex-direction: column; gap: 4px; }
        .stat-line { display: flex; justify-content: space-between; font-size: 16px; color: #ccc; }
        .stat-nums { font-weight: 700; color: #888; }
        .stat-nums b { color: var(--active-h); filter: brightness(1.7) saturate(1.2); }
        
        .ability-bar { background: rgba(0,0,0,0.35); padding: 10px 25px; display: flex; justify-content: space-between; align-items: center; font-style: italic; font-weight: 700; color: rgba(255,255,255,0.4); border-top: 1px solid rgba(255,255,255,0.05); }
        .cooldown { background: #000; padding: 2px 10px; font-style: normal; color: #fff; border: 1px solid #333; font-size: 14px; display: flex; align-items: center; gap: 8px; font-weight: 700; }
        .cd-icon { width: 14px; height: 14px; fill: white; }
        .desc-area { padding: 15px 25px; line-height: 1.4; font-size: 16px; color: #bbb; }
        .desc-area b { color: #fff; font-weight: 700;}
        
        .box-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px 20px; box-sizing: border-box; }
        .c-box { background: rgba(0,0,0,0.35); flex: 1; min-width: 130px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.03); border-radius: 4px; }
        .c-box-val { font-weight: 800; font-size: 20px; color: #fff; line-height: 1; }
        .c-box-lbl { font-size: 13px; color: #999; margin-top: 4px; text-align: center; font-weight: 600; }
        .c-box-cond { font-size: 10px; color: #666; font-style: italic; margin-top: 5px; }
        
        .footer { background: rgba(0,0,0,0.4); padding: 18px 25px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: auto; }
        .up-label { font-size: 10px; font-weight: 700; color: #555; text-transform: uppercase; }
        .up-name { font-weight: 700; font-size: 16px; color: #999; display: flex; align-items: center; gap: 10px; margin-top: 5px; }
        .up-icon { width: 24px; height: 24px; background: #000; border: 1px solid #333; border-radius: 2px; }
        
        .card-watermark { text-align: right; padding: 10px 15px; font-size: 13px; color: rgba(255, 255, 255, 0.4); font-weight: 700; margin-top: auto; pointer-events: none; }

        /* --- CONTENT & SEO ARTICLE --- */
        .content-container { max-width: 850px; padding: 40px 20px 40px 20px; line-height: 1.8; color: var(--ui-text-dim); font-size: 17px; }
        .content-container h2 { color: white; margin-top: 60px; font-size: 32px; letter-spacing: -1px; }
        .content-container h3 { color: white; margin-top: 30px; font-size: 20px; }
        
        /* Unified link styling: Cyan and stays Cyan */
        article a, article a:visited, article a:active,
        .related-links-container a, .related-links-container a:visited, .related-links-container a:active
		.extra-container a, .extra-container a:visited, .extra-container a:active {
            color: var(--cyan) !important;
            text-decoration: none;
            font-weight: 600;
            transition: 0.2s;
        }
        article a:hover, .related-links-container a:hover { text-decoration: underline; opacity: 1; }

        .faq-section { width: 100%; margin-top: 60px; }
        .faq-sub { color: var(--ui-export); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin-bottom: 30px; display: block; }
        .faq-item { background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
        .faq-question { padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: white; font-weight: 700; font-size: 18px; user-select: none; }
        .faq-question::after { content: '+'; font-size: 20px; color: var(--ui-text-dim); }
        .faq-answer { padding: 0 25px; max-height: 0; overflow: hidden; transition: 0.3s; color: var(--ui-text-dim); font-size: 16px; }
        .faq-item.active .faq-answer { max-height: 800px; padding-bottom: 25px; }

        /* --- FOOTER --- */
        footer.site-footer { width: 100%; border-top: 1px solid var(--ui-border); padding: 40px 20px 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
        .related-links-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 15px; max-width: 900px; font-size: 14px; }
        .related-links-container strong { color: white; margin-right: 5px; }
        .related-links-container span.dot { color: #444; font-weight: bold; }
        .jump-links { font-size: 14px; font-weight: 700; color: white; margin-top: 10px; }
        .jump-links a { color: var(--cyan); text-decoration: none; margin: 0 12px; opacity: 0.8; transition: 0.2s; }
        .disclaimer { font-size: 13px; color: #444; text-align: center; max-width: 800px; line-height: 1.5; }
		.extra-container {font-size: 14px; margin-top: 10px; display: flex; gap: 8px; align-items: center; }

        /* --- MOBILE SCALING & STACKING --- */
        @media (max-width: 1050px) {
            .mobile-nav { display: flex; }
            .main-container { flex-direction: column; align-items: center; padding-top: 0; }
            .preview-wrapper { 
                position: relative; 
                top: 0; 
                display: none; 
                width: 100%; 
                justify-content: center; 
                overflow: hidden; /* Important for scaling */
            }
            .editor-container { width: 100%; max-width: 500px; max-height: none; }
            body.show-preview .editor-container { display: none; }
            body.show-preview .preview-wrapper { display: flex; }

            /* FIX: Proportionally scale the card instead of letting it wrap and grow long */
            #item-card { 
                width: 375px; /* Forced width to keep Card shape */
                transform: scale(0.9);
                transform-origin: top center;
                margin-top: 20px;
                margin-bottom: -50px; /* Offset the white space left by scale */
            }
            @media (max-width: 380px) {
                #item-card { transform: scale(0.8); margin-bottom: -120px; }
            }
            @media (max-width: 320px) {
                #item-card { transform: scale(0.7); margin-bottom: -180px; }
            }
            .related-links-container span.dot { display: none; }
        }