/* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Design system variables */
        :root {
            /* Clean, minimal backgrounds */
            --background: 0 0% 100%;
            --foreground: 0 0% 13%;
            
            /* Subtle surfaces */
            --surface: 0 0% 99%;
            --surface-secondary: 0 0% 97%;
            
            /* Clean borders and inputs */
            --border: 0 0% 90%;
            --border-subtle: 0 0% 95%;
            --input: 0 0% 97%;
            --input-border: 0 0% 88%;
            
            /* Text hierarchy */
            --text-primary: 0 0% 13%;
            --text-secondary: 0 0% 40%;
            --text-tertiary: 0 0% 60%;
            --text-disabled: 0 0% 75%;
            
            /* Apple-style blue accent */
            --accent: 212 100% 50%;
            --accent-hover: 212 100% 45%;
            --accent-foreground: 0 0% 100%;
            
            /* Subtle interactive states */
            --hover: 0 0% 96%;
            --active: 0 0% 94%;
            
            /* Clean shadows */
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            
            /* Smooth radius */
            --radius: 12px;
            --radius-sm: 8px;
        }

        body {
            display: flex;
            flex-direction: column;
            height: 99.8vh;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
            line-height: 1.5;
        }

        .container {
           flex: 1;
            display: flex;
            justify-content: center;
            padding: 2rem 1rem;
        }

        .main-content {
            width: 100%;
            max-width: 42rem;
            margin: 0 auto;
        }

        /* Header */
        .header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .title {
            font-size: 3rem;
            font-weight: 600;
            color: hsl(var(--text-primary));
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
        }

        .subtitle {
            color: hsl(var(--text-secondary));
            font-size: 1.25rem;
            font-weight: 400;
        }

        /* Main interface */
        .interface {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        /* Input fields */
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .input-label {
            color: hsl(var(--text-secondary));
            font-size: 0.875rem;
            font-weight: 500;
        }

        .input-field {
            width: 100%;
            padding: 1rem 1.25rem;
            background: hsl(var(--surface));
            border: 1px solid hsl(var(--input-border));
            border-radius: var(--radius);
            color: hsl(var(--text-primary));
            font-size: 1rem;
            transition: all 0.2s ease-out;
            box-shadow: var(--shadow-sm);
        }

        .input-field::placeholder {
            color: hsl(var(--text-tertiary));
        }

        .input-field:focus {
            outline: none;
            border-color: hsl(var(--accent));
            box-shadow: 0 0 0 3px hsl(var(--accent) / 0.1), var(--shadow-md);
        }

        .textarea-field {
            height: 8rem;
            resize: vertical;
        }

        /* Tone selector */
        .tone-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .tone-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 0.5rem 0;
        }

        .tone-toggle {
            background: none;
            border: none;
            color: hsl(var(--text-tertiary));
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.2s ease-out;
            height: 24px;
            width: 24px;
        }

        .tone-toggle:hover {
            color: hsl(var(--text-secondary));
        }

        .tone-content {
            overflow: hidden;
            transition: all 0.3s ease-out;
        }

        .tone-content.collapsed {
            max-height: 0;
            opacity: 0;
        }

        .tone-content.expanded {
            max-height: 200px;
            opacity: 1;
        }

        .tone-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 0.75rem;
            padding-top: 0.5rem;
        }

        .tone-option {
            padding: 0.75rem 1rem;
            background: hsl(var(--surface));
            border: 2px solid hsl(var(--border-subtle));
            border-radius: var(--radius);
            color: hsl(var(--text-secondary));
            cursor: pointer;
            transition: all 0.2s ease-out;
            text-align: center;
            font-weight: 500;
            box-shadow: var(--shadow-sm);
        }
        .tone-option.disabled{
            cursor: not-allowed
        }
        .tone-option.selected.disabled{
            background: hsl(var(--text-disabled));
            border: 2px solid hsl(var(--border-subtle));
            color: #fff;
        }
        .tone-option:hover {
            background: hsl(var(--surface-secondary));
            border-color: hsl(var(--border));
            transform: translateY(-1px);
        }

        .tone-option.selected {
            background: hsl(var(--accent) / 0.1);
            border-color: hsl(var(--accent));
            color: hsl(var(--accent));
        }

        /* Generate button */
        .primary-button-container {
            display: flex;
            justify-content: center;
        }

        .primary-button {
           font-family: 'DM Sans', sans-serif;
            background: hsl(var(--accent));
            color: hsl(var(--accent-foreground));
            padding: 1rem 3rem;
            border: none;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 1.2rem;
            letter-spacing: -0.025rem;
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: all 0.2s ease-out;
        }

        .primary-button:hover {
            background: hsl(var(--accent-hover));
            box-shadow: var(--shadow-lg);
        }

        .primary-button:focus {
            outline: none;
            box-shadow: 0 0 0 3px hsl(var(--accent) / 0.3), var(--shadow-lg);
        }

        .primary-button:active {
            transform: scale(0.95);
        }

        .primary-button:disabled {
            background: hsl(var(--text-disabled));
            cursor: not-allowed;
            transform: none;
        }
        .error-message {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border: 1px solid #90caf9;
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
            color: #1565c0;
            font-weight: 500;
            text-align: center;
            box-shadow: 0 2px 8px rgba(21, 101, 192, 0.1);
            position: relative;
            z-index: 1000;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }
        
        .subject-line-result {
            margin-bottom: 1rem;
        }
        
        .copy-button-main {
            background: hsl(var(--surface-secondary));
            border: 1px solid hsl(var(--border-subtle));
            border-radius: var(--radius);
            padding: 0.75rem;
            color: hsl(var(--text-tertiary));
            cursor: pointer;
            transition: all 0.2s ease-out;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            box-shadow: var(--shadow-sm);
        }

        .copy-button-main:hover {
            background: hsl(var(--surface));
            color: hsl(var(--text-secondary));
            border-color: hsl(var(--border));
            transform: translateY(-1px);
        }

        .copy-button-main svg {
            width: 16px;
            height: 16px;
        }

        .subject-line-input:focus {
            outline: none;
            border-color: hsl(var(--accent));
            box-shadow: 0 0 0 3px hsl(var(--accent) / 0.1), var(--shadow-md);
        }
        /* Results area */
        .results-container {
            margin-top: 0;
            opacity: 0;
            max-height: 0;
            transform: translateY(20px);
            transition: all 0.3s ease-out;
        }

        .results-container.visible {
            margin-top: 2rem;
            opacity: 1;
            transform: translateY(0);
            max-height: 1000px;
        }

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

        .results-label {
            color: hsl(var(--text-secondary));
            font-size: 0.875rem;
            font-weight: 500;
        }

        .regenerate-button {
            background: hsl(var(--surface));
            border: 1px solid hsl(var(--border-subtle));
            border-radius: var(--radius-sm);
            padding: 0.5rem 1rem;
            color: hsl(var(--text-secondary));
            cursor: pointer;
            transition: all 0.2s ease-out;
            font-size: 0.875rem;
            box-shadow: var(--shadow-sm);
        }

        .regenerate-button:hover {
            background: hsl(var(--surface-secondary));
            border-color: hsl(var(--border));
        }

        .results-grid {
            display: grid;
            gap: 1rem;
        }

        .subject-line-card {
            position: relative;
            background: hsl(var(--surface));
            border: 1px solid hsl(var(--border-subtle));
            border-radius: var(--radius);
            padding: 1.25rem;
            transition: all 0.2s ease-out;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
        }

        .subject-line-card:hover {
            background: hsl(var(--surface-secondary));
            border-color: hsl(var(--border));
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .subject-line-text {
            font-size: 1rem;
            font-weight: 500;
            color: hsl(var(--text-primary));
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }

        .subject-line-stats {
            display: flex;
            gap: 1rem;
            font-size: 0.75rem;
            color: hsl(var(--text-tertiary));
        }

        .copy-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 1.75rem;
            height: 1.75rem;
            background: hsl(var(--surface-secondary));
            border: 1px solid hsl(var(--border-subtle));
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: hsl(var(--text-disabled));
            cursor: pointer;
            transition: all 0.2s ease-out;
            opacity: 0;
        }

        .subject-line-card:hover .copy-button {
            opacity: 1;
        }

        .copy-button:hover {
            background: hsl(var(--background));
            color: hsl(var(--text-tertiary));
            border-color: hsl(var(--border));
        }

        .copy-button svg {
            width: 12px;
            height: 12px;
        }

        /* Character counter */
        .character-counter {
            position: absolute;
            bottom: 0.5rem;
            right: 0.5rem;
            font-size: 0.75rem;
            color: hsl(var(--text-tertiary));
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);

        }

        .character-counter.warning {
            color: #dc2626;
            border-color: #dc2626;
            background: #fef2f2;
        }

        /* Footer */
        .ai-footer {
            text-align: center;
            position: relative;
        }

        .ai-footer-text {
            color: hsl(var(--text-tertiary));
            font-size: 0.875rem;
        }

        .ai-footer-text::after {
            content: ''; 
            position: absolute;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:v="https://vecta.io/nano" fill="%23000000" width="800" height="800" viewBox="0 0 24 24"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.911 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.429a4.476 4.476 0 0 1-2.876-1.041l.142-.08 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zm-9.661-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.369v2.332a.08.08 0 0 1-.033.061L9.74 19.95a4.499 4.499 0 0 1-6.141-1.646zM2.341 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.786a4.504 4.504 0 0 1-1.646-6.141zm16.596 3.856l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.677 8.104v-5.677a.79.79 0 0 0-.407-.667zm2.011-3.023l-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66zM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.454l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.098-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 15px;
            width: 20px;
            height: 20px;
            opacity: 0.4;
            margin-left: 2px;
        }


        /* Loading state */
        .loading {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: hsl(var(--text-secondary));
            font-size: 0.875rem;
        }

        .loading.visible {
            display: flex;
        }

        .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid hsl(var(--border-subtle));
            border-top: 2px solid hsl(var(--accent));
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .title {
                font-size: 2.5rem;
            }
            
            .subtitle {
                font-size: 1.125rem;
            }
            
            .container {
                padding: 1rem 0.5rem;
            }

            .tone-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }