/* ----- global reset & theme from Keith Site index.html ----- */
        * {margin: 0;padding: 0;box-sizing: border-box}

        :root {
            --primary: #00df9a;
            --secondary: #7c3aed;
            --dark: #0a0a0a;
            --darker: #111111;
            --light: #f5f5f5;
            --gray: #a1a1aa;
            --border: rgba(255, 255, 255, 0.1);
            --card-bg: var(--darker);
            --text-color: var(--light);
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
            --radius: 0.75rem;
            --success: #10b981;
            --error: #ef4444;
            --error-bg: rgba(239, 68, 68, 0.15);
            --accent: var(--primary);
            --transition: all 0.3s ease;
        }

        body {font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: var(--dark);color: var(--text-color);min-height: 100vh;transition: background 0.3s, color 0.3s;line-height: 1.6;display: flex;align-items: center;justify-content: center;padding: 40px 20px;background-image: radial-gradient(circle at 25% 25%, rgba(0, 223, 154, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.04) 0%, transparent 50%)}

        .container {background: var(--card-bg);border: 4px solid #000;border-radius: var(--radius);padding: 40px;box-shadow: var(--shadow);width: 100%;max-width: 480px;position: relative;overflow: hidden;transition: background 0.3s, border-color 0.3s}

        .container::before {display: none}

        /* ----- header with keith green accent & theme toggle ----- */
        .header {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 0.8rem;margin-bottom: 20px}

        .header-left {display: flex;align-items: center;gap: 10px}

        .logo-icon {font-size: 2rem;color: #000}

        .header-left h1 {font-size: 1.6rem;font-weight: 700;color: var(--text-color)}

        .header-left h1 span {color: #000}

        .header-subtitle {color: var(--gray);font-size: 0.85rem;margin-top: 1px}

        .header-right {display: flex;align-items: center}

        /* form */
        .form-header {text-align: center;margin-bottom: 25px}

        .form-header .icon {font-size: 2.5rem;color: #000;margin-bottom: 8px;display: block}

        .form-header h2 {color: var(--text-color);font-size: 1.8rem;margin-bottom: 4px;font-weight: 700}

        .form-header p {color: var(--gray);font-size: 0.9rem}

        .form-group {margin-bottom: 1.2rem;position: relative}

        .form-group label {display: block;margin-bottom: 0.4rem;font-weight: 600;color: var(--text-color);font-size: 0.9rem}

        .form-control {width: 100%;padding: 0.8rem 1rem;border: 3px solid #000;border-radius: 3rem;font-size: 0.95rem;transition: 0.2s;background: #ffffff;color: var(--text-color);outline: none}

        .form-control:focus {border-color: var(--primary);box-shadow: 4px 4px 0 0 #000}

        .form-control::placeholder {color: var(--gray)}

        textarea.form-control {min-height: 100px;resize: vertical;border-radius: var(--radius)}

        .input-hint {font-size: 0.75rem;color: var(--gray);margin-top: 0.3rem;display: block}

        .country-code-hint {position: absolute;right: 1rem;top: 2.5rem;background: var(--primary);color: #000;padding: 0.1rem 0.6rem;border-radius: 20px;font-size: 0.7rem;font-weight: 700}

        /* media upload */
        .media-upload-container {margin-bottom: 1.2rem}

        .media-upload-label {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 1.2rem;border: 2px dashed var(--border);border-radius: var(--radius);background: #ffffff;cursor: pointer;transition: 0.2s}

        .media-upload-label:hover {border-color: var(--primary);background: rgba(0, 223, 154, 0.04)}

        .media-upload-label i {font-size: 1.8rem;color: #000;margin-bottom: 0.4rem}

        .media-upload-label span {color: var(--gray);font-size: 0.85rem;text-align: center}

        .media-upload-label strong {color: #000;font-weight: 600}

        #mediaFile {display: none}

        .media-preview {margin-top: 0.8rem;display: none}

        .media-preview img,
        .media-preview video {max-width: 100%;border-radius: var(--radius);max-height: 180px;object-fit: contain}

        .media-preview audio {width: 100%;margin-top: 0.5rem}

        .file-preview {display: flex;align-items: center;padding: 0.6rem 0.8rem;background: #ffffff;border-radius: var(--radius);border: 3px solid #000}

        .file-preview i {font-size: 1.5rem;margin-right: 0.6rem;color: #000}

        .file-info {flex: 1;overflow: hidden}

        .file-name {font-weight: 600;font-size: 0.9rem;color: var(--text-color);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}

        .file-size {font-size: 0.75rem;color: var(--gray)}

        .remove-media {margin-top: 0.4rem;color: var(--error);cursor: pointer;font-size: 0.8rem;font-weight: 600;display: inline-block;transition: 0.2s}

        .remove-media:hover {opacity: 0.7}

        /* button */
        .btn {width: 100%;padding: 0.9rem;border-radius: 3rem;background: var(--primary);color: #000;font-size: 1rem;font-weight: 600;cursor: pointer;transition: 0.2s;display: flex;align-items: center;justify-content: center;gap: 0.5rem;border: 3px solid #000;box-shadow: 3px 3px 0 0 #000}

        .btn:hover:not(:disabled) {background: #00c98a;transform: translateY(-2px)}

        .btn:disabled {opacity: 0.6;cursor: not-allowed;transform: none !important}

        .btn i {font-size: 1.1rem}

        /* status */
        #status {margin-top: 1.2rem;padding: 0.8rem 1rem;border-radius: var(--radius);text-align: center;font-size: 0.9rem;display: none}

        .status-success {background: rgba(0, 223, 154, 0.1);color: #000;border: 1px solid rgba(0, 223, 154, 0.2);display: block}

        .status-error {background: var(--error-bg);color: var(--error);border: 1px solid var(--error);display: block}

        .status-loading {color: var(--gray);background: #ffffff;border: 2px solid #000;display: block}

        /* footer */
        .footer {text-align: center;padding: 1.2rem 0 0;border-top: 3px solid #000;color: var(--gray);font-size: 0.85rem;margin-top: 20px}

        .footer .brand {color: #000;font-weight: 500}

        /* shake animation */
        @keyframes shake {
            0%, 100% {transform: translateX(0)}
            20%, 60% {transform: translateX(-6px)}
            40%, 80% {transform: translateX(6px)}
        }

        .shake {animation: shake 0.4s ease-in-out}

        /* responsive */
        @media (max-width: 576px) {
            .container {padding: 25px 18px}
            .header {flex-direction: column;align-items: center;text-align: center}
            .header-left h1 {font-size: 1.4rem}
            .form-header h2 {font-size: 1.5rem}
            .media-upload-label {padding: 1rem}
            .country-code-hint {top: 2.4rem;right: 0.8rem}
        }

        @media (max-width: 400px) {
            .container {padding: 18px 12px}
            .header-left h1 {font-size: 1.2rem}
            .logo-icon {font-size: 1.6rem}
            .form-control {font-size: 0.85rem;padding: 0.7rem 0.9rem}
            .btn {font-size: 0.9rem;padding: 0.8rem}
        }