/*
PNASystems: OSK License
Version 1.3
Copyright © Roblox User "Goplop0959"
Original Creator and License Author: Roblox UserName "Goplop0959"
Discord: asherploploto
GitHub: Goplop0959

1. Grant of Permission
Permission is granted to any individual or entity ("the User") to use, copy,
modify, merge, publish, and distribute this software ("the Software"),
including both the original version and any modified versions, subject to
the conditions of this License. These permissions apply to all copies,
derivatives, and redistributions of the Software in any form.

2. Required Attribution
The following attribution requirements apply to all redistributions:
    - The original creator must always be credited as:
          "Original Creator: Roblox User Goplop0959"
    - All credits must appear at the top of the script, before any executable code.
    - If the Software is modified, the modifier must be credited as:
          "Modified By: [Modifier's Name]"
    - If a modified version is further modified and redistributed, all contributors
      in the chain must be credited, including:
          1. The original creator (Goplop0959)
          2. All previous modifiers
          3. The most recent modifier
    - The Credits section is the ONLY part of this License that may be edited,
      and ONLY for the purpose of adding your own name when you modify the
      Software. You may NOT remove, alter, or reorder any existing names.

3. Modification and Redistribution
Users may modify the Software and distribute modified versions only if:
    - All required credits are preserved exactly as described.
    - This License text remains included and unmodified.
    - The modified version clearly indicates that it has been modified.
    - Modification of the License itself is strictly prohibited except by the
      original creator, Roblox User "Goplop0959".
Redistribution is permitted only when these conditions are met.

4. Prohibition on Obfuscation
To preserve transparency and maintain the integrity of the attribution chain:
    - The Software may not be obfuscated in any way that renders the code unreadable,
      partially unreadable, or intentionally difficult to interpret.
    - This includes, but is not limited to:
          * Symbol renaming intended to obscure meaning
          * Control-flow flattening
          * Encoded or encrypted source
          * Automated obfuscation tools
    - Exception:
          Unusual, unconventional, or "questionable" coding style or comment style
          does NOT count as obfuscation, provided the code remains reasonably readable
          by a human.

5. Prohibition on Monetary Sale
The Software, whether original or modified, may not be sold for monetary value of
any kind, including:
    - Real-world currency
    - Virtual currency
    - In-game currency
    - Tokens, credits, or any exchangeable digital asset
Exception:
    The Software may be included as a dependency within a paid product, provided:
        - The Software itself is not sold independently.
        - All required credits remain intact.
        - This License remains included and unmodified.

6. No Warranty
The Software is provided "as is," without warranty of any kind, express or implied.
The original creator and all contributors shall not be liable for any damages
arising from the use of the Software.

7. Acceptance of Terms
By using, modifying, or distributing the Software, the User acknowledges and agrees
to all terms and conditions of the PNAsystems: OSK License. Use of the Software
constitutes full acceptance of this License.

---------------------------------------------------------
Credits:
Original Creator: Roblox User "Goplop0959"
Discord: asherploploto
GitHub: Goplop0959
*/

/* ============================================================
   CSS Reset & Base
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #e0e0e0;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

/* ============================================================
   Animated Gradient Background
   Colors: Red, Blue, Purple, Pink, Magenta
   ============================================================ */
.bg-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(
        135deg,
        #8B0000 0%,
        #1a0a3e 15%,
        #00008B 30%,
        #4B0082 45%,
        #8B008B 60%,
        #FF1493 75%,
        #DC143C 90%,
        #8B0000 100%
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* Additional animated overlay for depth */
.bg-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at 20% 50%,
        rgba(139, 0, 0, 0.4) 0%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 80% 20%,
        rgba(0, 0, 139, 0.3) 0%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 50% 80%,
        rgba(139, 0, 139, 0.3) 0%,
        transparent 50%
    );
    animation: overlayPulse 20s ease-in-out infinite alternate;
}

@keyframes overlayPulse {
    0% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
    100% { opacity: 0.6; transform: scale(1); }
}

/* ============================================================
   Main Container
   ============================================================ */
.app-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

/* ============================================================
   Header
   ============================================================ */
.app-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(15, 15, 25, 0.85);
    border: 2px solid rgba(139, 0, 139, 0.5);
    border-radius: 12px;
    box-shadow:
        0 0 20px rgba(139, 0, 139, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.app-header h1 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(90deg, #FF1493, #8B008B, #4B0082, #00008B);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGradient 4s linear infinite;
    margin-bottom: 0.25rem;
}

@keyframes textGradient {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.app-header p {
    color: #a0a0b0;
    font-size: 0.95rem;
}

/* ============================================================
   Tab Navigation
   ============================================================ */
.tab-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(15, 15, 25, 0.8);
    border: 2px solid rgba(100, 100, 150, 0.3);
    border-radius: 8px;
    color: #a0a0b0;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 20, 147, 0.1), transparent);
    transition: left 0.5s ease;
}

.tab-btn:hover::before {
    left: 100%;
}

.tab-btn:hover {
    border-color: rgba(139, 0, 139, 0.6);
    color: #e0e0e0;
    box-shadow: 0 0 15px rgba(139, 0, 139, 0.15);
}

.tab-btn.active {
    background: rgba(139, 0, 139, 0.25);
    border-color: rgba(255, 20, 147, 0.7);
    color: #fff;
    box-shadow:
        0 0 20px rgba(139, 0, 139, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Tab Content Panels
   ============================================================ */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel {
    background: rgba(15, 15, 25, 0.85);
    border: 2px solid rgba(100, 100, 150, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

/* ============================================================
   Form Elements - UI Strokes
   ============================================================ */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #c0c0d0;
    font-size: 0.9rem;
}

textarea,
input[type="text"],
input[type="password"],
input[type="file"],
select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(20, 20, 35, 0.9);
    border: 2px solid rgba(100, 100, 150, 0.3);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

textarea {
    min-height: 150px;
    resize: vertical;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
    border-color: rgba(139, 0, 139, 0.7);
    box-shadow:
        0 0 15px rgba(139, 0, 139, 0.2),
        inset 0 0 0 1px rgba(255, 20, 147, 0.1);
}

textarea::placeholder,
input::placeholder {
    color: #606070;
}

input[type="file"] {
    padding: 0.5rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    padding: 0.5rem 1rem;
    background: rgba(139, 0, 139, 0.3);
    border: 1px solid rgba(139, 0, 139, 0.5);
    border-radius: 6px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 0.75rem;
}

input[type="file"]::file-selector-button:hover {
    background: rgba(139, 0, 139, 0.5);
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0b0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

select option {
    background: #1a1a2e;
    color: #e0e0e0;
}

/* Pipeline info display */
.pipeline-info {
    padding: 0.75rem 1rem;
    background: rgba(20, 20, 35, 0.9);
    border: 2px solid rgba(100, 100, 150, 0.3);
    border-radius: 8px;
    color: #a0a0b0;
    font-size: 0.85rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    line-height: 1.5;
    word-break: break-all;
}

/* License tab content */
.license-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.license-content h2 {
    font-size: 1.4rem;
    color: #e0e0e0;
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
}

.license-content h2:first-child {
    margin-top: 0;
}

.license-content h3 {
    font-size: 1.1rem;
    color: #c0c0d0;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.license-content p {
    color: #a0a0b0;
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.license-content ul, .license-content ol {
    color: #a0a0b0;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.license-content li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.license-content hr {
    border: none;
    border-top: 1px solid rgba(100, 100, 150, 0.3);
    margin: 1.5rem 0;
}

.license-content a {
    color: #FF1493;
    text-decoration: none;
}

.license-content a:hover {
    text-decoration: underline;
}

/* ============================================================
   Method Checklist
   ============================================================ */
.method-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.method-checklist label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(20, 20, 35, 0.7);
    border: 1px solid rgba(100, 100, 150, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 400;
}

.method-checklist label:hover {
    border-color: rgba(139, 0, 139, 0.5);
    background: rgba(139, 0, 139, 0.1);
}

.method-checklist input[type="checkbox"] {
    accent-color: #8B008B;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    padding: 0.75rem 2rem;
    border: 2px solid rgba(139, 0, 139, 0.5);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, rgba(139, 0, 139, 0.6), rgba(75, 0, 130, 0.6));
    color: #fff;
    box-shadow: 0 4px 15px rgba(139, 0, 139, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, rgba(139, 0, 139, 0.8), rgba(75, 0, 130, 0.8));
    border-color: rgba(255, 20, 147, 0.7);
    box-shadow: 0 6px 25px rgba(139, 0, 139, 0.4);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(139, 0, 139, 0.3);
}

.btn-secondary {
    background: rgba(30, 30, 50, 0.8);
    color: #c0c0d0;
    border-color: rgba(100, 100, 150, 0.4);
}

.btn-secondary:hover {
    background: rgba(40, 40, 60, 0.9);
    border-color: rgba(139, 0, 139, 0.5);
    color: #e0e0e0;
}

.btn-copy {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    background: rgba(30, 30, 50, 0.8);
    color: #a0a0b0;
    border: 1px solid rgba(100, 100, 150, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy:hover {
    border-color: rgba(139, 0, 139, 0.5);
    color: #e0e0e0;
    background: rgba(139, 0, 139, 0.2);
}

.btn-group {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* ============================================================
   Output Area
   ============================================================ */
.output-area {
    margin-top: 1.25rem;
    padding: 1rem;
    background: rgba(10, 10, 20, 0.9);
    border: 2px solid rgba(100, 100, 150, 0.2);
    border-radius: 8px;
    min-height: 100px;
    max-height: 400px;
    overflow-y: auto;
    word-break: break-all;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #b0b0c0;
    white-space: pre-wrap;
    position: relative;
}

.output-area.has-content {
    border-color: rgba(0, 150, 100, 0.4);
    color: #c0e0d0;
}

.output-area.error {
    border-color: rgba(200, 50, 50, 0.5);
    color: #e0a0a0;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.output-header span {
    font-size: 0.85rem;
    color: #808090;
    font-weight: 500;
}

/* ============================================================
   Toast Notifications
   ============================================================ */
.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    padding: 0.75rem 1.25rem;
    background: rgba(15, 15, 25, 0.95);
    border: 2px solid rgba(100, 100, 150, 0.4);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 0.9rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
    max-width: 350px;
}

.toast.success {
    border-color: rgba(0, 180, 100, 0.6);
    background: rgba(0, 60, 30, 0.9);
}

.toast.error {
    border-color: rgba(200, 50, 50, 0.6);
    background: rgba(60, 10, 10, 0.9);
}

.toast.info {
    border-color: rgba(0, 100, 200, 0.6);
    background: rgba(10, 20, 60, 0.9);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(50px); }
}

/* ============================================================
   Loading Spinner
   ============================================================ */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #FF1493;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* ============================================================
   Footer
   ============================================================ */
.app-footer {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    color: #606070;
    font-size: 0.8rem;
}

.app-footer a {
    color: #8B008B;
    text-decoration: none;
    transition: color 0.2s ease;
}

.app-footer a:hover {
    color: #FF1493;
}

/* ============================================================
   Responsive Design
   ============================================================ */
@media (max-width: 768px) {
    .app-container {
        padding: 1rem;
    }

    .app-header h1 {
        font-size: 1.5rem;
    }

    .tab-nav {
        gap: 0.35rem;
    }

    .tab-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .panel {
        padding: 1rem;
    }

    .method-checklist {
        grid-template-columns: 1fr;
    }

    .btn {
        padding: 0.65rem 1.5rem;
        font-size: 0.9rem;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .app-header {
        padding: 1rem;
    }

    .app-header h1 {
        font-size: 1.25rem;
    }
}

/* ============================================================
   Scrollbar Styling
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 15, 25, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(139, 0, 139, 0.4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 0, 139, 0.6);
}