:root {
    /* Genesis Palette */
    --primary: #6366F1;
    --primary-hover: #4F46E5;
    --secondary: #20970B;
    --neutral: #9C9C9C;
    --background: #FAFAFA;
    --surface: #FFFFFF;
    --text-primary: #0A0A0A;
    --text-secondary: #6B6B6B;
    --border: #E8E8EC;
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;

    /* Base 4px scale */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
}

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

body {
    background-color: var(--background);
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

h1, h2, h3, .logo, .display-title {
    font-family: 'General Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.display-title { font-size: 60px; line-height: 1.1; margin-bottom: var(--sp-4); }
.subhead { font-size: 24px; color: var(--text-secondary); max-width: 650px; }

code, pre { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

/* Layout */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); }
.header { margin-top: var(--sp-16); margin-bottom: var(--sp-12); }

/* Navigation */
.nav {
    position: sticky;
    top: 0;
    height: 56px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    z-index: 10;
}
.nav-container {
    max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6);
    height: 100%; display: flex; justify-content: space-between; align-items: center;
}
.logo { font-size: 20px; letter-spacing: -0.04em; }

/* Cards & Surfaces */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 200ms ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.chat-card { display: flex; flex-direction: column; min-height: 500px; margin-bottom: var(--sp-16); }

/* Setup & Loading */
.setup-state { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-8); }
.setup-content { text-align: center; max-width: 400px; display: flex; flex-direction: column; gap: var(--sp-4); }
.setup-content h3 { font-size: 24px; }
.setup-content p { color: var(--text-secondary); font-size: 15px; }

.progress-container { width: 100%; margin-top: var(--sp-2); }
.progress-bar-bg { width: 100%; height: 6px; background-color: var(--border); border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; background-color: var(--primary); width: 0%; transition: width 100ms linear; }
.progress-text { display: block; margin-top: var(--sp-2); font-size: 12px; color: var(--neutral); font-weight: 500; }

/* Chat UI */
.chat-state { flex: 1; display: flex; flex-direction: column; height: 100%; }
.chat-history { flex: 1; overflow-y: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); min-height: 400px; }
.message { font-size: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.message pre { background-color: var(--background); padding: var(--sp-3) var(--sp-4); border-radius: 4px; border: 1px solid var(--border); margin-top: var(--sp-2); width: 100%; overflow-x: auto; }

/* Inputs */
.input-area { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); background-color: var(--surface); }
.input-wrapper { display: flex; gap: var(--sp-3); }
textarea {
    flex: 1; background-color: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 10px 14px; font-family: 'DM Sans', sans-serif;
    font-size: 14px; color: var(--text-primary); resize: none; outline: none; transition: all 200ms ease;
}
textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
textarea::placeholder { color: var(--neutral); }

/* Buttons */
.btn {
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
    border-radius: 6px; padding: 0 var(--sp-4); height: 44px; /* Large size */
    cursor: pointer; transition: all 200ms ease; display: inline-flex;
    align-items: center; justify-content: center;
}
.btn-primary { background-color: var(--primary); color: var(--surface); border: none; }
.btn-primary:hover:not(:disabled) { background-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }
.btn:disabled { background-color: var(--border); color: var(--neutral); cursor: not-allowed; transform: none; box-shadow: none; }

/* Chips */
.chip { background-color: #F3F4F6; color: var(--text-secondary); padding: var(--sp-1) var(--sp-3); border-radius: 9999px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }
.status-published { background-color: rgba(16, 185, 129, 0.1); color: var(--success); }
.status-pending { background-color: rgba(245, 158, 11, 0.1); color: var(--warning); }
.status-error { background-color: rgba(239, 68, 68, 0.1); color: var(--error); }