FIX terminal

GAL_SYSTEM_DOCUMENTATION.md

@@ -0,0 +1,1398 @@
+# GAL Compiler — Full System Documentation
+
+> **GAL (Grow A Language)** is a custom programming language with a garden/nature theme. This document covers the complete compilation pipeline: architecture, lexical analysis, context-free grammar, parsing, semantic analysis, intermediate code generation, interpretation, and the web-based UI.
+
+---
+
+## Table of Contents
+
+1. [System Architecture & Flow](#1-system-architecture--flow)
+2. [Lexical Analysis (Lexer)](#2-lexical-analysis-lexer)
+3. [Context-Free Grammar (CFG)](#3-context-free-grammar-cfg)
+4. [Syntax Analysis (Parser)](#4-syntax-analysis-parser)
+5. [Semantic Analysis](#5-semantic-analysis)
+6. [Intermediate Code Generation (ICG)](#6-intermediate-code-generation-icg)
+7. [Interpreter](#7-interpreter)
+8. [NLP Fallback / AI Chat Assistant](#8-nlp-fallback--ai-chat-assistant)
+9. [Web Interface & Server](#9-web-interface--server)
+10. [General Rules & Constraints](#10-general-rules--constraints)
+11. [Keyword Reference: GAL ↔ Conventional](#11-keyword-reference-gal--conventional)
+12. [AST Node Types Reference](#12-ast-node-types-reference)
+13. [Complete Error Catalogue](#13-complete-error-catalogue)
+
+---
+
+## 1. System Architecture & Flow
+
+### 1.1 High-Level Pipeline
+
+The GAL compiler follows a **classic multi-phase compilation pipeline**. Each phase validates its input and passes structured output to the next phase. If any phase encounters an error, the pipeline halts and reports the error to the user.
+
+```
+ ┌────────────────────────────────────────────────────────────────────────────┐
+ │                          GAL Source Code (.gal)                           │
+ └──────────────────────────────────┬─────────────────────────────────────────┘
+                                    │
+                                    ▼
+ ┌──────────────────────────────────────────────────────────────────────────┐
+ │  PHASE 1: LEXICAL ANALYSIS  (lexer.py)                                  │
+ │  • Reads source code character-by-character                              │
+ │  • Groups characters into tokens (keywords, identifiers, literals, etc.) │
+ │  • Validates delimiters after each token                                 │
+ │  • Detects lexical errors (illegal chars, unclosed strings, etc.)        │
+ │  Output: Token Stream  [Token(type, value, line, col), ...]              │
+ └──────────────────────────────────┬───────────────────────────────────────┘
+                                    │
+                                    ▼
+ ┌──────────────────────────────────────────────────────────────────────────┐
+ │  PHASE 2: SYNTAX ANALYSIS  (Gal_Parser.py + cfg.py)                     │
+ │  • LL(1) table-driven predictive parser                                  │
+ │  • Uses FIRST, FOLLOW, PREDICT sets computed from CFG                    │
+ │  • Validates token sequence against grammar productions                  │
+ │  • Detects syntax errors with helpful, context-aware messages            │
+ │  • Detects conventional keyword misuse (e.g., "if" → "spring")          │
+ │  Output: Validated token stream (syntax is correct)                      │
+ └──────────────────────────────────┬───────────────────────────────────────┘
+                                    │
+                                    ▼
+ ┌──────────────────────────────────────────────────────────────────────────┐
+ │  PHASE 3: SEMANTIC ANALYSIS  (GALsemantic.py)                           │
+ │  • Builds Abstract Syntax Tree (AST) from token stream                   │
+ │  • Tree-walking validation of the AST                                    │
+ │  • Type checking, scope validation, function signature checking          │
+ │  • Detects semantic errors (type mismatch, undeclared vars, etc.)        │
+ │  Output: Validated AST + Symbol Table                                    │
+ └──────────────┬───────────────────────────────────────────┬───────────────┘
+                │                                           │
+                ▼                                           ▼
+ ┌──────────────────────────┐              ┌────────────────────────────────┐
+ │  PHASE 4A: ICG (icg.py)  │              │  PHASE 4B: INTERPRETER         │
+ │  • Three-Address Code     │              │  (GALinterpreter.py)           │
+ │  • Quad format            │              │  • Tree-walk interpreter       │
+ │  • (op, arg1, arg2, res)  │              │  • Executes AST nodes          │
+ │  Output: TAC instructions │              │  • Async I/O via WebSocket     │
+ └──────────────────────────┘              │  Output: Program output        │
+                                           └────────────────────────────────┘
+```
+
+### 1.2 Module Inventory
+
+| Module | File | Approx. Lines | Responsibility |
+|--------|------|---------------|----------------|
+| Lexer | `Backend/lexer.py` | ~2000 | Hand-written character-by-character tokenizer |
+| CFG | `Backend/cfg.py` | ~850 | Context-free grammar definition + FIRST/FOLLOW/PREDICT computation |
+| Parser | `Backend/Gal_Parser.py` | ~1600 | LL(1) table-driven parser with rich error messages |
+| Semantic Analyzer | `Backend/GALsemantic.py` | ~4000 | AST construction + tree-walking semantic validation |
+| Interpreter | `Backend/GALinterpreter.py` | ~1600 | Tree-walk interpreter with async I/O (Socket.IO) |
+| ICG | `Backend/icg.py` | ~1200 | Three-address code generator from token stream |
+| Server | `Backend/server.py` | ~600 | Flask + Socket.IO web server with REST API endpoints |
+| NLP Fallback | `Backend/gal_fallback.py` | ~800 | Regex + semantic-search AI chat assistant for error help |
+| Frontend | `UI/index.html`, `UI/style.pixel.css`, `UI/main.js` | — | Web-based code editor UI |
+
+### 1.3 How the Phases Connect (Server Flow)
+
+When the user clicks **"Run"** in the web UI:
+
+1. The frontend sends the source code to the server via **Socket.IO** (`run_code` event) or **REST API** (`/api/run`).
+2. **Lexer** tokenizes the code → if errors, stop and return lexical errors.
+3. **Parser** validates syntax using LL(1) table → if errors, stop and return syntax errors.
+4. **Semantic Analyzer** builds AST and validates types/scopes → if errors, stop and return semantic errors.
+5. **Interpreter** executes the AST → streams output back via Socket.IO events.
+6. If `water()` (input) is called, the server emits `input_required` and waits for user response.
+
+For **ICG** (intermediate code generation), the pipeline is:
+Lexer → Parser → Semantic → ICG (generates three-address code from tokens in parallel).
+
+---
+
+## 2. Lexical Analysis (Lexer)
+
+**File:** `Backend/lexer.py` (~2000 lines)
+
+### 2.1 How It Works
+
+The lexer is a **hand-written, character-by-character scanner** (not using regex or generator tools like Lex/Flex). It works as follows:
+
+1. The source code string is scanned one character at a time using a `Position` tracker (index, line, column).
+2. For each character, the lexer determines what token it could start:
+   - **Letters** → could be a keyword or identifier
+   - **Digits** → integer or double literal
+   - **Quote characters** → string or character literal
+   - **Operator characters** → single or multi-character operator
+   - **Whitespace** → skipped (except newlines, which are emitted as `\n` tokens)
+3. Keywords are recognized by **character-by-character matching** (e.g., `s` → `se` → `see` → `seed` → check delimiter). If the full keyword is matched and followed by a valid delimiter, it's emitted as a keyword token. Otherwise, it falls through to identifier parsing.
+4. After each token is recognized, the lexer checks the **delimiter** — the character immediately following the token — to ensure it's valid for that token type. Invalid delimiters produce a lexical error.
+
+### 2.2 Character Sets
+
+| Constant | Characters | Purpose |
+|----------|-----------|---------|
+| `ZERO` | `0` | Special case for leading zeros |
+| `DIGIT` | `123456789` | Non-zero digits |
+| `ZERODIGIT` | `0123456789` | All digits |
+| `LOW_ALPHA` | `a-z` | Lowercase letters |
+| `UPPER_ALPHA` | `A-Z` | Uppercase letters |
+| `ALPHA` | `a-zA-Z` | All letters |
+| `ALPHANUM` | `a-zA-Z0-9_` | Valid identifier characters |
+
+### 2.3 Reserved Keywords (24 keywords)
+
+GAL uses a garden/nature theme for all its keywords:
+
+| GAL Keyword | Conventional Equivalent | Category | Description |
+|-------------|------------------------|----------|-------------|
+| `seed` | `int` | Data Type | Integer type |
+| `tree` | `float` / `double` | Data Type | Floating-point type |
+| `leaf` | `char` | Data Type | Character type |
+| `branch` | `bool` / `boolean` | Data Type | Boolean type |
+| `vine` | `string` | Data Type | String type |
+| `empty` | `void` | Return Type | Void return type |
+| `fertile` | `const` | Modifier | Constant declaration |
+| `bundle` | `struct` | Aggregate | Struct/record type |
+| `root` | `main` | Entry Point | Main function |
+| `pollinate` | `function` | Function | Function declaration keyword |
+| `spring` | `if` | Conditional | If statement |
+| `bud` | `else if` / `elif` | Conditional | Else-if statement |
+| `wither` | `else` | Conditional | Else statement |
+| `grow` | `while` | Loop | While loop |
+| `cultivate` | `for` | Loop | For loop |
+| `tend` | `do` | Loop | Do-while loop start |
+| `harvest` | `switch` | Switch | Switch statement |
+| `variety` | `case` | Switch | Case label |
+| `soil` | `default` | Switch | Default case |
+| `plant` | `print` / `printf` | I/O | Output function |
+| `water` | `input` / `scanf` | I/O | Input function |
+| `prune` | `break` | Control Flow | Break out of loop/switch |
+| `skip` | `continue` | Control Flow | Skip to next iteration |
+| `reclaim` | `return` | Control Flow | Return from function |
+
+### 2.4 Boolean Literals
+
+| Token | Meaning |
+|-------|---------|
+| `sunshine` | Boolean `true` |
+| `frost` | Boolean `false` |
+
+### 2.5 Token Types
+
+The lexer produces the following token categories:
+
+#### 2.5.1 Literal Tokens
+
+| Token Type | Description | Example |
+|------------|-------------|---------|
+| `intlit` | Integer literal (max 8 digits) | `42`, `100` |
+| `dbllit` | Double/float literal (max 8.8 digits) | `3.14`, `2.5` |
+| `stringlit` | String literal (double-quoted) | `"hello world"` |
+| `chrlit` | Character literal (single-quoted, exactly 1 char) | `'a'`, `'Z'` |
+| `~intlit` | Negated integer literal | `~5` → `-5` |
+| `~dbllit` | Negated double literal | `~3.14` → `-3.14` |
+| `sunshine` | Boolean true literal | `sunshine` |
+| `frost` | Boolean false literal | `frost` |
+
+#### 2.5.2 Operator Tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `+` | Arithmetic | Addition |
+| `-` | Arithmetic | Subtraction |
+| `*` | Arithmetic | Multiplication |
+| `/` | Arithmetic | Division |
+| `%` | Arithmetic | Modulo (remainder) |
+| `**` | Arithmetic | Exponentiation |
+| `~` | Unary | Negation (replaces unary minus) |
+| `++` | Unary | Increment |
+| `--` | Unary | Decrement |
+| `=` | Assignment | Simple assignment |
+| `+=` | Assignment | Add and assign |
+| `-=` | Assignment | Subtract and assign |
+| `*=` | Assignment | Multiply and assign |
+| `/=` | Assignment | Divide and assign |
+| `%=` | Assignment | Modulo and assign |
+| `==` | Comparison | Equality |
+| `!=` | Comparison | Not equal |
+| `<` | Comparison | Less than |
+| `>` | Comparison | Greater than |
+| `<=` | Comparison | Less than or equal |
+| `>=` | Comparison | Greater than or equal |
+| `&&` | Logical | Logical AND |
+| `\|\|` | Logical | Logical OR |
+| `!` | Logical | Logical NOT |
+| `` ` `` | String | Concatenation operator |
+| `.` | Access | Struct member access |
+
+#### 2.5.3 Delimiter Tokens
+
+| Token | Description |
+|-------|-------------|
+| `(` | Left parenthesis |
+| `)` | Right parenthesis |
+| `{` | Left brace (block start) |
+| `}` | Right brace (block end) |
+| `[` | Left bracket (array indexing) |
+| `]` | Right bracket |
+| `;` | Semicolon (statement terminator) |
+| `,` | Comma (separator) |
+| `:` | Colon (switch cases) |
+
+#### 2.5.4 Special Tokens
+
+| Token | Description |
+|-------|-------------|
+| `\n` | Newline (skipped by parser) |
+| `EOF` | End of file marker |
+| `id` | Identifier (variable/function name) |
+
+### 2.6 Delimiter Validation
+
+A key feature of the GAL lexer is **post-token delimiter checking**. After recognizing each token, the lexer verifies that the character immediately following the token is valid for that token type. For example:
+
+- After `seed` (data type keyword): must be followed by a space, tab, or newline
+- After `bud` (else-if): must be followed by whitespace, `:`, or `(`
+- After an identifier: must be followed by a space, comma, semicolon, operator, bracket, etc.
+- After an integer literal: must be followed by a semicolon, operator, closing bracket, etc.
+
+This catches errors like `seedx` (missing space) or `42abc` (identifier starting with a digit).
+
+### 2.7 Escape Sequences in Strings
+
+| Sequence | Meaning |
+|----------|---------|
+| `\n` | Newline |
+| `\t` | Tab |
+| `\\` | Backslash |
+| `\"` | Double quote |
+| `\{` | Literal left brace |
+| `\}` | Literal right brace |
+
+### 2.8 Comments
+
+| Syntax | Type |
+|--------|------|
+| `// ...` | Single-line comment (until end of line) |
+| `/* ... */` | Multi-line comment (must be closed) |
+
+### 2.9 Identifier Rules
+
+- Must start with a **letter** (a-z, A-Z)
+- Can contain letters, digits (0-9), and underscore (`_`)
+- **Maximum length: 15 characters**
+- Cannot be a reserved keyword
+- Cannot start with a digit
+
+### 2.10 Number Literal Rules
+
+- **Integers**: Maximum 8 digits. No leading zeros (except `0` itself).
+- **Doubles/Floats**: Integer part max 8 digits + decimal point + fractional part max 8 digits.
+- **Negative numbers**: Use the `~` prefix (e.g., `~5` for -5, `~3.14` for -3.14).
+
+### 2.11 Lexer Error Messages
+
+| Error | Trigger |
+|-------|---------|
+| `"Invalid delimiter 'X' after 'Y'"` | Unexpected character following a token |
+| `"Identifier exceeds maximum length of 15 characters"` | Identifier > 15 chars |
+| `"Integer exceeds maximum of 8 digits"` | Integer portion > 8 digits |
+| `"Fractional part exceeds maximum of 8 digits"` | Decimal portion > 8 digits |
+| `"Missing closing '"' for string literal"` | Unclosed string |
+| `"Missing closing quote for character literal"` | Unclosed char literal |
+| `"Character literal must contain exactly one character"` | Multi-char in `'...'` |
+| `"Illegal Character 'X'"` | Unknown/disallowed character |
+| `"Identifiers cannot start with a number"` | e.g., `1abc` |
+| `"Invalid escape sequence"` | `\x` where `x` is not recognized |
+| `"Missing closing '*/' for multi-line comment"` | Unclosed `/* */` |
+
+---
+
+## 3. Context-Free Grammar (CFG)
+
+**File:** `Backend/cfg.py` (~850 lines)
+
+### 3.1 What Is the CFG?
+
+The **Context-Free Grammar (CFG)** formally defines the syntax of the GAL language. It specifies which arrangements of tokens are valid programs. The CFG is used to build the **LL(1) parsing table** that drives the parser.
+
+### 3.2 Notation
+
+- **Non-terminals**: Enclosed in angle brackets, e.g., `<program>`, `<expression>`
+- **Terminals**: Actual token types from the lexer, e.g., `seed`, `id`, `{`, `;`
+- **λ (lambda/epsilon)**: Represents an empty production (the rule can produce nothing)
+- **|**: Separates alternatives (multiple productions for the same non-terminal)
+
+### 3.3 FIRST, FOLLOW, and PREDICT Sets
+
+The CFG module computes three critical sets used for LL(1) parsing:
+
+**FIRST(X)** — the set of terminals that can appear at the **beginning** of any string derived from non-terminal X.
+- Example: `FIRST(<data_type>) = {seed, tree, leaf, branch, vine}`
+
+**FOLLOW(X)** — the set of terminals that can appear **immediately after** non-terminal X in any derivation.
+- Example: `FOLLOW(<statement>) includes }, EOF`
+
+**PREDICT(A → α)** — the set of terminals that indicate which production to use:
+- If α does NOT derive λ: `PREDICT = FIRST(α)`
+- If α CAN derive λ: `PREDICT = FIRST(α) ∪ FOLLOW(A)`
+
+These sets are computed automatically by `compute_first()`, `compute_follow()`, and `compute_predict()` in `cfg.py`.
+
+### 3.4 Complete Grammar Productions
+
+#### 3.4.1 Program Structure
+
+```
+<program> → <global_declaration> <function_definition> root ( ) { <statement> }
+```
+
+Every GAL program must have a `root()` function as its entry point (equivalent to `main()` in C).
+
+#### 3.4.2 Global Declarations
+
+```
+<global_declaration> → bundle id <bundle_or_var> <global_declaration>
+                      | <data_type> id <array_dec> <var_value> ; <global_declaration>
+                      | fertile <data_type> id = <init_val> <const_next> ; <global_declaration>
+                      | λ
+```
+
+#### 3.4.3 Data Types
+
+```
+<data_type> → seed | tree | leaf | branch | vine
+```
+
+#### 3.4.4 Variable Declarations
+
+```
+<var_dec> → <data_type> id <array_dec> <var_value>
+          | bundle id <bundle_mem_dec>
+
+<var_value> → = <init_val> <var_value_next>
+            | <var_value_next>
+
+<var_value_next> → , id <array_dec> <var_value>
+                 | λ
+
+<init_val> → <array_init_opt>
+           | water ( <water_arg> )
+           | <expression>
+```
+
+Multiple variables can be declared in one statement: `seed x = 1, y = 2, z;`
+
+#### 3.4.5 Constant Declarations
+
+```
+<const_dec> → fertile <data_type> id = <init_val> <const_next>
+
+<const_next> → , id = <init_val> <const_next>
+             | λ
+```
+
+Example: `fertile seed MAX = 100;`
+
+#### 3.4.6 Array Declarations
+
+```
+<array_dec> → [ <array_dim_opt> ] <array_dec>
+            | λ
+
+<array_dim_opt> → intlit | λ
+```
+
+Supports multi-dimensional arrays: `seed matrix[2][3];`
+
+#### 3.4.7 Array Initialization
+
+```
+<array_init_opt> → { <init_vals> }
+                 | λ
+
+<init_vals> → <init_val_item> <init_vals_next>
+            | λ
+
+<init_val_item> → { <init_vals> }
+               | <expression>
+```
+
+Example: `seed arr[] = {1, 2, 3};` or nested: `seed m[][] = {{1, 2}, {3, 4}};`
+
+#### 3.4.8 Bundle (Struct) Definition
+
+```
+<bundle_declaration> → bundle id { <bundle_members> }
+
+<bundle_members> → <data_type> id ; <bundle_members>
+                 | id id ; <bundle_members>
+                 | λ
+```
+
+Example:
+```
+bundle Person {
+    seed age;
+    vine name;
+};
+```
+
+#### 3.4.9 Function Definition
+
+```
+<function_definition> → pollinate <return_type> id ( <parameters> ) { <statement> } <function_definition>
+                       | λ
+
+<return_type> → <data_type> | empty | id
+
+<parameters> → <param> <param_next> | λ
+
+<param> → <data_type> id | id id
+
+<param_next> → , <param> <param_next> | λ
+```
+
+Example:
+```
+pollinate seed add(seed a, seed b) {
+    reclaim a + b;
+}
+```
+
+#### 3.4.10 Statements
+
+```
+<statement> → <simple_stmt> <statement>
+            | λ
+
+<simple_stmt> → id <id_stmt>
+              | <inc_dec_op> id ;
+              | <io_stmt>
+              | <conditional_stmt>
+              | <loop_stmt>
+              | <switch_stmt>
+              | <control_stmt>
+              | reclaim <reclaim_value>
+              | <var_dec> ;
+              | <const_dec> ;
+```
+
+Declarations and statements can be **interleaved** (like C99), not just at the beginning of a block.
+
+#### 3.4.11 Assignment Statements
+
+```
+<id_stmt> → <id_next> <assign_op> <assign_rhs> ;
+           | <inc_dec_op> ;
+           | ( <arguments> ) ;
+
+<assign_op> → = | += | -= | *= | /= | %=
+
+<assign_rhs> → water ( <water_arg> )
+             | <expression>
+```
+
+#### 3.4.12 I/O Statements
+
+```
+<io_stmt> → plant ( <arguments> ) ;
+          | water ( <water_arg> ) ;
+
+<water_arg> → <data_type> | id <water_id_tail> | λ
+```
+
+- `plant("Hello {}!", name)` — output with placeholder substitution
+- `water(seed)` — read integer input
+- `water(name)` — read input into variable
+
+#### 3.4.13 Conditional Statements (if / else-if / else)
+
+```
+<conditional_stmt> → spring ( <expression> ) { <statement> } <elseif_chain> <else_opt>
+
+<elseif_chain> → bud ( <expression> ) { <statement> } <elseif_chain>
+               | λ
+
+<else_opt> → wither { <statement> }
+           | λ
+```
+
+Example:
+```
+spring (x > 0) {
+    plant("positive");
+}
+bud (x < 0) {
+    plant("negative");
+}
+wither {
+    plant("zero");
+}
+```
+
+#### 3.4.14 Loop Statements
+
+**While loop:**
+```
+grow ( <expression> ) { <statement> }
+```
+
+**For loop:**
+```
+cultivate ( <for_init> ; <expression> ; <for_update> ) { <statement> }
+
+<for_init> → <data_type> id <array_dec> <var_value>
+           | id <id_next> <assign_op> <expression>
+           | λ
+
+<for_update> → id <for_update_type> | λ
+
+<for_update_type> → <inc_dec_op>
+                  | <id_next> <assign_op> <expression>
+```
+
+**Do-while loop:**
+```
+tend { <statement> } grow ( <expression> ) ;
+```
+
+Examples:
+```
+grow (i < 10) { plant("{}",i); i++; }
+
+cultivate (seed i = 0; i < 10; i++) { plant("{}",i); }
+
+tend { plant("at least once"); } grow (frost);
+```
+
+#### 3.4.15 Switch Statement
+
+```
+<switch_stmt> → harvest ( <expression> ) { <case_list> <default_opt> }
+
+<case_list> → variety <case_literal> : <case_statements> <case_list>
+            | λ
+
+<case_literal> → intlit | chrlit | stringlit | sunshine | frost
+
+<default_opt> → soil : <case_statements> | λ
+```
+
+Example:
+```
+harvest (choice) {
+    variety 1: plant("One"); prune;
+    variety 2: plant("Two"); prune;
+    soil: plant("Default");
+}
+```
+
+#### 3.4.16 Expressions (Operator Precedence — lowest to highest)
+
+```
+Level 1 (lowest):  <expression> → <logic_or>
+Level 2:           <logic_or>   → <logic_and> ( || <logic_and> )*
+Level 3:           <logic_and>  → <relational> ( && <relational> )*
+Level 4:           <relational> → <arithmetic> ( <rel_op> <arithmetic> )?
+Level 5:           <arithmetic> → <term> ( (+|-|`) <term> )*
+Level 6:           <term>       → <factor> ( (*|/|%) <factor> )*
+Level 7 (highest): <factor>     → ( <paren_expr> ) | <unary_op> <factor>
+                                 | id <factor_id_next> | <literal>
+```
+
+**Operator Precedence Table:**
+
+| Precedence | Operators | Associativity | Description |
+|------------|-----------|---------------|-------------|
+| 1 (lowest) | `\|\|` | Left-to-right | Logical OR |
+| 2 | `&&` | Left-to-right | Logical AND |
+| 3 | `==` `!=` `<` `>` `<=` `>=` | Non-associative | Relational |
+| 4 | `+` `-` `` ` `` | Left-to-right | Addition, subtraction, concatenation |
+| 5 | `*` `/` `%` | Left-to-right | Multiplication, division, modulo |
+| 6 (highest) | `~` `!` `++` `--` | Right-to-left (unary) | Negation, NOT, increment, decrement |
+
+#### 3.4.17 Type Casting
+
+```
+<paren_expr> → <data_type> ) <factor>    // Cast: (seed)x, (tree)3.14
+             | <expression> )             // Grouped: (x + 1)
+```
+
+#### 3.4.18 Control Flow
+
+```
+<control_stmt> → prune ;     // break
+               | skip ;      // continue
+```
+
+#### 3.4.19 Return Statement
+
+```
+<reclaim_value> → <expression> ;   // Return with value: reclaim x + y;
+                | ;                // Return without value: reclaim;
+```
+
+---
+
+## 4. Syntax Analysis (Parser)
+
+**File:** `Backend/Gal_Parser.py` (~1600 lines)
+
+### 4.1 Parser Type
+
+The GAL parser is an **LL(1) table-driven predictive parser**. This means:
+
+- **LL**: reads input **L**eft-to-right, produces **L**eftmost derivation
+- **(1)**: uses **1** token of lookahead to decide which production to apply
+- **Table-driven**: uses a pre-computed parsing table (not recursive descent)
+
+### 4.2 How It Works
+
+1. **Parsing Table Construction**: At startup, the `LL1Parser` class builds a parsing table from the PREDICT sets computed in `cfg.py`. For each non-terminal and lookahead terminal, the table stores which production to use.
+
+2. **Stack-Based Parsing**: The parser maintains a stack initialized with `[<program>, EOF]`. At each step:
+   - If the top of stack is a **terminal**: match it against the current input token, then pop and advance.
+   - If the top of stack is a **non-terminal**: look up the parsing table using the non-terminal and the current input token to find the production, then replace the non-terminal on the stack with the production's right-hand side.
+   - If the top is **λ (epsilon)**: simply pop it (empty production).
+
+3. **Token Normalization**: The parser normalizes token types to match CFG terminal names (e.g., `dbllit` → `dblit`). Newline tokens (`\n`) are automatically skipped.
+
+4. **Error Detection**: If no matching production exists in the parsing table for a given (non-terminal, lookahead) pair, a syntax error is reported. The parser **does not perform error recovery** — it stops at the first error.
+
+### 4.3 After Parsing: AST Construction
+
+After the LL(1) syntax validation succeeds, the parser calls `GALsemantic.build_ast()` to construct the Abstract Syntax Tree. The method `parse_and_build()` combines:
+1. LL(1) syntax validation
+2. AST construction
+3. Returns `{success, ast, symbol_table, errors}`
+
+### 4.4 Context-Aware Error Messages
+
+The parser provides **smart, context-aware error messages** rather than generic "unexpected token" errors:
+
+#### 4.4.1 Conventional Keyword Detection
+
+If a user accidentally uses a keyword from another language, the parser recognizes it and suggests the GAL equivalent:
+
+| Mistaken Keyword | Suggestion |
+|------------------|-----------|
+| `if` | `'if' is not a GAL keyword. Use 'spring' instead.` |
+| `else` | `'else' is not a GAL keyword. Use 'wither' instead.` |
+| `elif` | `'elif' is not a GAL keyword. Use 'bud' instead.` |
+| `while` | `'while' is not a GAL keyword. Use 'grow' instead.` |
+| `for` | `'for' is not a GAL keyword. Use 'cultivate' instead.` |
+| `switch` | `'switch' is not a GAL keyword. Use 'harvest' instead.` |
+| `case` | `'case' is not a GAL keyword. Use 'variety' instead.` |
+| `default` | `'default' is not a GAL keyword. Use 'soil' instead.` |
+| `break` | `'break' is not a GAL keyword. Use 'prune' instead.` |
+| `continue` | `'continue' is not a GAL keyword. Use 'skip' instead.` |
+| `return` | `'return' is not a GAL keyword. Use 'reclaim' instead.` |
+| `int` | `'int' is not a GAL keyword. Use 'seed' instead.` |
+| `float` / `double` | Use `'tree'` instead |
+| `char` | Use `'leaf'` instead |
+| `bool` / `boolean` | Use `'branch'` instead |
+| `string` | Use `'vine'` instead |
+| `void` | Use `'empty'` instead |
+| `const` | Use `'fertile'` instead |
+| `struct` | Use `'bundle'` instead |
+| `function` | Use `'pollinate'` instead |
+| `printf` / `print` | Use `'plant'` instead |
+| `scanf` / `input` | Use `'water'` instead |
+
+#### 4.4.2 Invalid Operator Detection
+
+| Pattern | Error Message |
+|---------|---------------|
+| `===` used | `'===' is not valid in GAL. Use '==' for comparison.` |
+| Single `&` | `'&' is not valid in GAL. Use '&&' for logical AND.` |
+| Single `\|` | `'\|' is not valid in GAL. Use '\|\|' for logical OR.` |
+
+#### 4.4.3 Structural Error Detection
+
+| Situation | Error Message |
+|-----------|---------------|
+| Empty block `{}` | `Empty block. Expected at least one statement inside braces.` |
+| Code after `reclaim` | `Unreachable code after 'reclaim'. Statements after a return will never execute.` |
+| Chained `++`/`--` | `Increment/decrement operators cannot be chained.` |
+| Missing return type after `pollinate` | `Missing return type after 'pollinate'.` |
+| Missing parameter type | `Missing type for parameter '{name}'.` |
+| Code after program end | `Unexpected token after program end. All code must be inside functions or global declarations.` |
+
+### 4.5 Syntax Error Format
+
+```
+SYNTAX error line {line} col {col} {message}. Expected: {expected_set}
+```
+
+---
+
+## 5. Semantic Analysis
+
+**File:** `Backend/GALsemantic.py` (~4000 lines)
+
+### 5.1 Overview
+
+Semantic analysis is the **third phase** of compilation. It ensures the program is **meaningful** — not just syntactically correct. The semantic analyzer:
+
+1. **Builds the Abstract Syntax Tree (AST)** from the validated token stream
+2. **Tree-walks the AST** to check types, scopes, function signatures, and other rules
+3. Maintains a **Symbol Table** to track variables, functions, and scopes
+
+### 5.2 Symbol Table
+
+The `SymbolTable` class manages all declared symbols:
+
+```
+SymbolTable:
+  ├── variables: {}           # Global variable registry
+  ├── global_variables: {}    # Global scope variables
+  ├── functions: {}           # Function declarations {name: {return_type, params, ...}}
+  ├── scopes: [{}]            # Stack of scopes (push on block entry, pop on exit)
+  ├── current_func_name: None # Currently being analyzed function
+  ├── function_variables: {}  # Variables per function (for duplicate detection)
+  └── bundle_types: {}        # Struct type definitions
+```
+
+**Scope Rules:**
+- A new scope is pushed when entering a function body, loop body, or conditional block.
+- When a scope is popped, its local variables are no longer accessible.
+- Variables in outer scopes are visible in inner scopes (lexical scoping).
+- Global variables are accessible from all functions.
+
+### 5.3 AST Construction
+
+The `build_ast()` function walks the token stream and constructs a tree of `ASTNode` objects. Each node type represents a language construct:
+
+- `ProgramNode` — root of the AST
+- `VariableDeclarationNode` — `seed x = 5;`
+- `AssignmentNode` — `x = 10;`
+- `BinaryOpNode` — `a + b`, `x == y`
+- `UnaryOpNode` — `~x`, `!flag`, `x++`
+- `FunctionDeclarationNode` — `pollinate seed add(...) { ... }`
+- `FunctionCallNode` — `add(2, 3)`
+- `IfStatementNode` — `spring (...) { ... } bud (...) { ... } wither { ... }`
+- `ForLoopNode` — `cultivate (...) { ... }`
+- `WhileLoopNode` — `grow (...) { ... }`
+- `DoWhileLoopNode` — `tend { ... } grow (...);`
+- `SwitchNode` — `harvest (...) { variety ...: ... }`
+- `PrintNode` — `plant(...);`
+- `ReturnNode` — `reclaim x;`
+- `ListNode` — `{1, 2, 3}` (array literal)
+- `ListAccessNode` — `arr[i]`
+- `CastNode` — `seed(x)`, `tree(3)`
+- `MemberAccessNode` — `person.age`
+- `BundleDefinitionNode` — `bundle Person { ... }`
+
+### 5.4 Semantic Rules — General Rules
+
+These rules apply across the entire program:
+
+#### 5.4.1 Variable Declaration Rules
+
+| Rule | Error If Violated |
+|------|-------------------|
+| Variables must be declared before use | `Variable '{name}' used before declaration.` |
+| No duplicate variable names in the same scope | `Variable '{name}' already declared.` |
+| Variable name cannot conflict with function name | `'{name}' is already declared as a function.` |
+| Constants (`fertile`) must be initialized at declaration | `Fertile variables must be initialized.` |
+| Constants cannot be reassigned | `Variable '{name}' is declared as fertile and cannot be re-assigned.` |
+| Multiple `fertile` variables in one line are not allowed | `Multiple fertile declaration is not allowed.` |
+
+#### 5.4.2 Type System Rules
+
+GAL has a **static type system** with 5 primitive types:
+
+| Type | GAL Keyword | Values |
+|------|-------------|--------|
+| Integer | `seed` | Whole numbers: `0`, `42`, `~5` |
+| Float | `tree` | Decimal numbers: `3.14`, `~2.5` |
+| Character | `leaf` | Single characters: `'a'`, `'Z'` |
+| Boolean | `branch` | `sunshine` (true), `frost` (false) |
+| String | `vine` | Text: `"hello"` |
+
+**Type Compatibility Matrix:**
+
+| Operation | Allowed Types | Notes |
+|-----------|--------------|-------|
+| Assignment `=` | Must match or be `seed`↔`tree` | Implicit numeric conversion |
+| Arithmetic `+ - * /` | `seed`, `tree` | `seed`↔`tree` mixing allowed |
+| Modulo `%` | `seed` only | Both operands must be `seed` |
+| Comparison `== != < > <= >=` | Same type or `seed`↔`tree` | Cannot compare incompatible types |
+| Logical `&& \|\|` | `branch` | Must be boolean |
+| NOT `!` | `branch` | Operand must be boolean |
+| Concatenation `` ` `` | `vine` | At least one operand must be `vine` |
+| Increment/Decrement `++ --` | `seed`, `tree` | Numeric types only |
+
+**Implicit Conversions:**
+- `seed` ↔ `tree` are compatible (implicit numeric conversion)
+- All other type mismatches produce errors
+
+#### 5.4.3 Function Rules
+
+| Rule | Error If Violated |
+|------|-------------------|
+| Functions must be declared before use | `Function '{name}' is not defined.` |
+| No duplicate function declarations | `Function '{name}' already declared.` |
+| Argument count must match parameter count | `Function '{name}' expects {n} argument(s), got {m}.` |
+| Argument types must match parameter types | `Argument {i} of function '{name}': expected '{expected}', got '{actual}'.` |
+| `empty` functions must not return a value | `empty function must not return any value.` |
+| Non-`empty` functions must return a value | `Function expects to return a '{type}' value.` |
+| Return type must match function declaration | `Function '{name}' returns '{actual}', but expected '{expected}'.` |
+| All code paths must return a value | `Function '{name}' must return a value on all code paths.` |
+| Functions must end with `reclaim` | `Function '{name}' must end with 'reclaim'.` |
+| `water()` cannot be used as an expression value | `'water()' is an I/O statement, not a value expression.` |
+
+#### 5.4.4 Control Flow Rules
+
+| Rule | Error If Violated |
+|------|-------------------|
+| `spring`/`bud` condition must be `branch` | `spring condition must be branch, got {type}.` |
+| `grow` condition must be `branch` | `grow condition must be branch, got {type}.` |
+| `tend` condition must be `branch` | `tend condition must be branch, got {type}.` |
+| `cultivate` condition must be `branch` | `cultivate condition must be branch, got {type}.` |
+| `prune` only inside loop or switch | `'prune' used outside a loop or switch.` |
+| `skip` only inside loop | `'skip' used outside a loop.` |
+
+### 5.5 Semantic Rules — Specific Rules
+
+These rules apply to specific language constructs:
+
+#### 5.5.1 Array/List Rules
+
+| Rule | Error If Violated |
+|------|-------------------|
+| Array size must be `seed` (integer) | `Array size must be of type 'seed' (integer).` |
+| List index must be `seed` | `List index must be of type 'seed', got '{type}'.` |
+| Only lists can be indexed | `'{name}' is not a list.` |
+| Lists must be indexed in expressions | `List '{name}' must be indexed with '[]' in expressions.` |
+
+#### 5.5.2 Switch (Harvest) Rules
+
+| Rule | Error If Violated |
+|------|-------------------|
+| `harvest` expression must be `seed`, `leaf`, or `branch` | `'harvest' expression must be 'seed'/'leaf'/'branch', not '{type}'.` |
+| `variety` value must match switch expression type | `'variety' value type mismatch.` |
+| No duplicate `variety` values | `Duplicate 'variety' value '{value}' in 'harvest'.` |
+
+#### 5.5.3 Bundle (Struct) Rules
+
+| Rule | Error If Violated |
+|------|-------------------|
+| Bundle type must be defined before use | `Bundle type '{name}' is not defined.` |
+| No duplicate members in a bundle | `Duplicate member '{name}' in bundle.` |
+
+#### 5.5.4 Built-in Function Rules
+
+| Rule | Error If Violated |
+|------|-------------------|
+| `ts()` only on lists or strings | `'ts()' can only be used on lists or vines.` |
+| `taper()` only on `leaf` type | `'taper()' can only be used on 'leaf' type.` |
+| `plant()` max 15 arguments | `Exceeded maximum amount of 15 arguments in plant statement.` |
+| `plant()` placeholder count must match args | `Found {n} argument(s). Expected {m} argument(s).` |
+| `plant()` string concat only with `vine` | `Only values of type vine can be concatenated in plant().` |
+
+#### 5.5.5 Constant (`fertile`) Rules
+
+| Rule | Error If Violated |
+|------|-------------------|
+| Must be initialized with matching literal type | `'{name}' must be initialized with a {type} literal.` |
+| `seed` constants: `intlit` or `dbllit` accepted | — |
+| `tree` constants: `intlit` or `dbllit` accepted | — |
+| `leaf` constants: only `chrlit` | — |
+| `branch` constants: only `sunshine` or `frost` | — |
+| `vine` constants: only `stringlit` | — |
+
+### 5.6 Error Format
+
+```
+Ln {line} Semantic Error: {message}
+```
+
+---
+
+## 6. Intermediate Code Generation (ICG)
+
+**File:** `Backend/icg.py` (~1200 lines)
+
+### 6.1 Overview
+
+The ICG module generates **Three-Address Code (TAC)** from the GAL token stream. TAC is an intermediate representation where each instruction has at most three operands:
+
+```
+result = arg1 op arg2
+```
+
+This is represented as a quad: `(op, arg1, arg2, result)`
+
+### 6.2 How It Works
+
+1. The ICG receives the **token stream** (after lexing — it runs in parallel with semantic analysis).
+2. It walks through the tokens, generating TAC instructions for each construct.
+3. Temporary variables (`t0`, `t1`, ...) are created for intermediate values.
+4. Labels (`L0`, `L1`, ...) are created for control flow.
+
+### 6.3 GAL → TAC Type Mapping
+
+| GAL Type | TAC Type |
+|----------|----------|
+| `seed` | `int` |
+| `tree` | `float` |
+| `leaf` | `char` |
+| `branch` | `bool` |
+| `vine` | `string` |
+| `empty` | `void` |
+
+### 6.4 TAC Instruction Types
+
+| Instruction | Format | Example |
+|-------------|--------|---------|
+| `DECLARE` | `(DECLARE, type, _, name)` | `declare x : int` |
+| `ASSIGN` | `(=, value, _, name)` | `x = 5` |
+| `CONST` | `(CONST, type, value, name)` | `const MAX : int = 100` |
+| `ARRAY_DECLARE` | `(ARRAY_DECLARE, type, size, name)` | `declare arr[10] : int` |
+| `ARRAY_STORE` | `(ARRAY_STORE, value, index, name)` | `arr[0] = 5` |
+| `ARRAY_LOAD` | `(ARRAY_LOAD, name, index, temp)` | `t0 = arr[0]` |
+| `STRUCT_STORE` | `(STRUCT_STORE, value, member, name)` | `person.age = 25` |
+| `STRUCT_LOAD` | `(STRUCT_LOAD, name, member, temp)` | `t0 = person.age` |
+| Binary ops | `(op, left, right, temp)` | `t0 = a + b` |
+| `UNARY_MINUS` | `(UNARY_MINUS, arg, _, temp)` | `t0 = -a` |
+| `NOT` | `(NOT, arg, _, temp)` | `t0 = !flag` |
+| `INC` / `DEC` | `(INC, name, _, name)` | `x = x + 1` |
+| `LABEL` | `(LABEL, _, _, label)` | `L0:` |
+| `GOTO` | `(GOTO, _, _, label)` | `goto L1` |
+| `IF` | `(IF, cond, _, label)` | `if t0 goto L1` |
+| `IFFALSE` | `(IFFALSE, cond, _, label)` | `ifFalse t0 goto L2` |
+| `PARAM` | `(PARAM, _, _, value)` | `param x` |
+| `CALL` | `(CALL, func, argc, temp)` | `t1 = call add, 2` |
+| `RETURN` | `(RETURN, _, _, value)` | `return t0` |
+| `FUNC` | `(FUNC, _, _, name)` | `func add:` |
+| `ENDFUNC` | `(ENDFUNC, _, _, name)` | `endfunc` |
+| `PRINT` | `(PRINT, _, _, value)` | `print t0` |
+| `READ` | `(READ, type, _, name)` | `read x` |
+
+### 6.5 ICG Example
+
+**GAL Source:**
+```
+root() {
+    seed x = 5;
+    seed y = 10;
+    seed z = x + y;
+    plant("{}", z);
+}
+```
+
+**Generated TAC:**
+```
+func main:
+  declare x : int
+  x = 5
+  declare y : int
+  y = 10
+  t0 = x + y
+  declare z : int
+  z = t0
+  print z
+endfunc
+```
+
+### 6.6 Public API
+
+```python
+generate_icg(tokens) → {
+    "success": bool,
+    "tac": List[TACInstruction],
+    "tac_text": str,           # Human-readable TAC output
+    "errors": List[str]
+}
+```
+
+---
+
+## 7. Interpreter
+
+**File:** `Backend/GALinterpreter.py` (~1600 lines)
+
+### 7.1 Overview
+
+The interpreter is a **tree-walk interpreter** that directly executes the AST produced by the semantic analyzer. It does NOT compile to machine code — it traverses the AST nodes and evaluates them on the fly.
+
+### 7.2 How It Works
+
+1. The `Interpreter` class receives the validated AST (rooted at a `ProgramNode`).
+2. It walks the tree, evaluating each node:
+   - `VariableDeclarationNode` → stores variable in the current scope
+   - `AssignmentNode` → updates variable value
+   - `BinaryOpNode` → evaluates left and right children, applies operator
+   - `IfStatementNode` → evaluates condition, enters appropriate branch
+   - `ForLoopNode` → evaluates init, then loops: check condition → body → update
+   - `PrintNode` → evaluates arguments, sends output via Socket.IO
+   - `FunctionCallNode` → pushes new scope, evaluates body, pops scope
+3. For `water()` (input): the interpreter emits an `input_required` event via Socket.IO and **blocks** until the client sends the input value back.
+
+### 7.3 Scope Management
+
+The interpreter uses a **stack-based scope system**:
+- `self.scopes = [{}]` — starts with one global scope
+- `enter_scope()` — pushes a new empty scope dict onto the stack
+- `exit_scope()` — pops the top scope
+- Variable lookup searches from innermost scope outward (lexical scoping)
+- `self.global_variables` — separate dict for globally declared variables
+
+### 7.4 Type Casting
+
+The interpreter supports explicit type casting:
+
+| Cast | Behaviour |
+|------|-----------|
+| `seed(x)` | Converts to integer (`int(x)`) |
+| `tree(x)` | Converts to float (`float(x)`) |
+| `leaf(x)` | Converts to character (first char of string or `chr()`) |
+| `branch(x)` | Converts to boolean |
+| `vine(x)` | Converts to string (`str(x)`) |
+
+### 7.5 Built-in Functions
+
+| Function | Description |
+|----------|-------------|
+| `ts(x)` | Returns length of list or string (like `len()`) |
+| `taper(x)` | Splits a `leaf`/string into a list of individual characters (like `split('')`) |
+| `.append(x)` | Appends element to a list |
+| `.insert(i, x)` | Inserts element at index in a list |
+| `.remove(i)` | Removes element at index from a list |
+
+### 7.6 Runtime Behaviour
+
+| Feature | Behaviour |
+|---------|-----------|
+| Max loop iterations | 10,000 (prevents infinite loops) |
+| Max number digits | 16 digits for any evaluated number |
+| Float display | Truncated to 5 decimal places, trailing zeros stripped |
+| `seed` ↔ `tree` coercion | Implicit — `seed` vars can hold `tree` values and vice versa |
+| String interpolation | `plant("Hello {}!", name)` — `{}` replaced positionally |
+| Async I/O | Uses Socket.IO + eventlet for non-blocking `water()` input |
+| `++`/`--` | Pre and post: pre returns new value, post returns old |
+
+### 7.7 Runtime Error Catalogue
+
+| Category | Errors |
+|----------|--------|
+| **Arithmetic** | Division by zero; Number exceeds 16 digits |
+| **Loop** | Infinite loop detected (>10,000 iterations) |
+| **Type** | Condition must be boolean; List index must be integer; Expected int/float/branch/leaf value |
+| **Array** | Index out of bounds; Not a list; Cannot index non-list |
+| **Bundle** | Value is not a bundle; No member '{name}'; Member not a bundle |
+| **Function** | Argument count mismatch; Break/continue outside loop |
+| **Variable** | Already declared; Not declared; Used before declaration |
+
+---
+
+## 8. NLP Fallback / AI Chat Assistant
+
+**File:** `Backend/gal_fallback.py` (~800 lines)
+
+### 8.1 Three-Layer Architecture
+
+The AI chat assistant uses a hybrid approach to help users understand errors:
+
+**Layer 1 — Rule Engine** (regex-based):
+- Matches compiler error messages against 50+ regex patterns
+- Returns structured explanations with: Stage, Cause, Rule, Fix, Explanation
+
+**Layer 2 — Semantic Retrieval** (sentence-transformers):
+- Uses a fine-tuned `gal-mpnet-finetuned` model for semantic search
+- Matches user questions against 50+ knowledge base topics
+- Returns the most relevant topic if similarity > 0.35 threshold
+
+**Layer 3 — Default**:
+- Falls back to a help menu if no match is found
+- Returns a general help message listing available topics
+
+### 8.2 Error Explanation Format
+
+```
+**Stage:** Lexical Analysis (Lexer)
+**Cause:** An identifier exceeded 15 characters.
+**Rule:** Identifiers must be at most 15 characters long.
+**Fix:**
+// BAD:  seed thisIsWayTooLong = 5;
+// GOOD: seed shortName = 5;
+```
+
+---
+
+## 9. Web Interface & Server
+
+### 9.1 Server (`Backend/server.py`)
+
+- **Framework**: Flask + Flask-SocketIO (with eventlet for async)
+- **CORS**: Enabled for cross-origin requests
+
+**REST API Endpoints:**
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/lex` | POST | Lexical analysis only → returns tokens + errors |
+| `/api/parse` | POST | Lexer + Parser → returns syntax analysis results |
+| `/api/semantic` | POST | Full pipeline through semantic analysis → returns AST + symbol table |
+| `/api/icg` | POST | Full pipeline + ICG → returns three-address code |
+| `/api/run` | POST | Full pipeline + execution (REST, no input support) |
+| `/api/health` | GET | Health check |
+
+**Socket.IO Events:**
+
+| Event | Direction | Description |
+|-------|-----------|-------------|
+| `run_code` | Client → Server | Send source code for execution |
+| `output` | Server → Client | Program output line |
+| `input_required` | Server → Client | Program needs user input (`water()`) |
+| `input_response` | Client → Server | User provides input value |
+| `stage_complete` | Server → Client | Compilation stage completed |
+| `execution_complete` | Server → Client | Program finished |
+
+### 9.2 Frontend (`UI/`)
+
+- `index.html` — Main page with code editor and output panels
+- `style.pixel.css` — Pixel/retro-themed CSS styling
+- `main.js` — Client-side logic: editor, Socket.IO communication, UI updates
+
+---
+
+## 10. General Rules & Constraints
+
+### 10.1 Program Structure Rules
+
+1. Every program **must** have a `root()` function (entry point).
+2. Global declarations (variables, constants, bundles) come **before** function definitions.
+3. Function definitions come **before** `root()`.
+4. All code must be inside functions or global declarations.
+5. Statements end with semicolons (`;`).
+6. Blocks are delimited by `{ }`.
+7. Declarations and statements can be interleaved within blocks (C99-style).
+
+### 10.2 Limits & Constraints
+
+| Constraint | Value |
+|------------|-------|
+| Max identifier length | 15 characters |
+| Max integer literal digits | 8 digits |
+| Max fractional digits | 8 digits |
+| Max evaluated number digits (runtime) | 16 digits |
+| Max loop iterations | 10,000 |
+| Max `plant()` arguments | 15 |
+| Float display precision | 5 decimal places |
+| String escape sequences | `\n`, `\t`, `\\`, `\"`, `\{`, `\}` |
+
+### 10.3 Naming Conventions
+
+- **Identifiers**: Start with a letter, followed by letters/digits/underscores, max 15 chars.
+- **Keywords**: All lowercase, garden-themed (see Section 2.3).
+- **Boolean literals**: `sunshine` (true), `frost` (false).
+- **Negation**: Uses `~` prefix instead of unary minus `-`.
+
+---
+
+## 11. Keyword Reference: GAL ↔ Conventional
+
+| Category | Conventional | GAL Keyword |
+|----------|-------------|-------------|
+| **Data Types** | `int` | `seed` |
+| | `float` / `double` | `tree` |
+| | `char` | `leaf` |
+| | `bool` / `boolean` | `branch` |
+| | `string` | `vine` |
+| | `void` | `empty` |
+| **Modifiers** | `const` | `fertile` |
+| **Aggregates** | `struct` | `bundle` |
+| **Booleans** | `true` | `sunshine` |
+| | `false` | `frost` |
+| **Entry Point** | `main` | `root` |
+| **Functions** | `function` | `pollinate` |
+| | `return` | `reclaim` |
+| **Conditionals** | `if` | `spring` |
+| | `else if` | `bud` |
+| | `else` | `wither` |
+| **Loops** | `while` | `grow` |
+| | `for` | `cultivate` |
+| | `do` (do-while) | `tend` |
+| **Switch** | `switch` | `harvest` |
+| | `case` | `variety` |
+| | `default` | `soil` |
+| **Control Flow** | `break` | `prune` |
+| | `continue` | `skip` |
+| **I/O** | `print` / `printf` | `plant` |
+| | `input` / `scanf` | `water` |
+| **Built-ins** | `len()` | `ts()` |
+| | `split('')` | `taper()` |
+| | `.append()` | `.append()` |
+| | `.insert()` | `.insert()` |
+| | `.remove()` | `.remove()` |
+| **Operators** | unary `-` | `~` (tilde) |
+| | string `+` | `` ` `` (backtick) |
+
+---
+
+## 12. AST Node Types Reference
+
+| Node Class | Purpose | Example |
+|-----------|---------|---------|
+| `ProgramNode` | Root of AST | Entire program |
+| `VariableDeclarationNode` | Variable declaration | `seed x = 5;` |
+| `FertileDeclarationNode` | Constant declaration | `fertile seed MAX = 100;` |
+| `AssignmentNode` | Assignment statement | `x = 10;` |
+| `BinaryOpNode` | Binary operation | `a + b`, `x == y` |
+| `UnaryOpNode` | Unary operation | `~x`, `!flag`, `x++` |
+| `FunctionDeclarationNode` | Function definition | `pollinate seed add(...)` |
+| `FunctionCallNode` | Function call | `add(2, 3)` |
+| `IfStatementNode` | Conditional chain | `spring/bud/wither` |
+| `ForLoopNode` | For loop | `cultivate (...)` |
+| `WhileLoopNode` | While loop | `grow (...)` |
+| `DoWhileLoopNode` | Do-while loop | `tend {...} grow (...)` |
+| `SwitchNode` | Switch statement | `harvest (...)` |
+| `PrintNode` | Output statement | `plant(...)` |
+| `ReturnNode` | Return statement | `reclaim x;` |
+| `UpdateNode` | For-loop update | `i++` in for-loop |
+| `ContinueNode` | Continue statement | `skip;` |
+| `BreakNode` | Break statement | `prune;` |
+| `ListNode` | Array literal | `{1, 2, 3}` |
+| `ListAccessNode` | Array indexing | `arr[i]` |
+| `AppendNode` | List append | `.append(x)` |
+| `InsertNode` | List insert | `.insert(0, x)` |
+| `RemoveNode` | List remove | `.remove(0)` |
+| `CastNode` | Type cast | `seed(x)` |
+| `TaperNode` | Character split | `taper(str)` |
+| `TSNode` | Length function | `ts(arr)` |
+| `MemberAccessNode` | Struct member access | `person.age` |
+| `ArrayMemberAccessNode` | Array element member | `people[0].name` |
+| `BundleDefinitionNode` | Struct definition | `bundle Person {...}` |
+
+---
+
+## 13. Complete Error Catalogue
+
+### 13.1 Lexical Errors
+
+| # | Error Message | Cause |
+|---|---------------|-------|
+| L1 | `Invalid delimiter 'X' after 'Y'` | Wrong character after a token |
+| L2 | `Identifier exceeds maximum length of 15 characters` | Identifier too long |
+| L3 | `Integer exceeds maximum of 8 digits` | Integer literal too large |
+| L4 | `Fractional part exceeds maximum of 8 digits` | Too many decimal digits |
+| L5 | `Missing closing '"' for string literal` | Unclosed string |
+| L6 | `Missing closing quote for character literal` | Unclosed char |
+| L7 | `Character literal must contain exactly one character` | Multi-char in `'...'` |
+| L8 | `Illegal Character 'X'` | Unknown character |
+| L9 | `Identifiers cannot start with a number` | e.g., `1abc` |
+| L10 | `Invalid escape sequence` | Bad escape like `\x` |
+| L11 | `Missing closing '*/' for multi-line comment` | Unclosed comment |
+
+### 13.2 Syntax Errors
+
+| # | Error Message | Cause |
+|---|---------------|-------|
+| S1 | `'X' is not a GAL keyword. Use 'Y' instead.` | Conventional keyword used |
+| S2 | `'===' is not valid in GAL. Use '==' for comparison.` | Triple equals |
+| S3 | `'&' is not valid. Use '&&' for logical AND.` | Single ampersand |
+| S4 | `'\|' is not valid. Use '\|\|' for logical OR.` | Single pipe |
+| S5 | `Empty block. Expected at least one statement.` | Empty `{}` |
+| S6 | `Unreachable code after 'reclaim'.` | Code after return |
+| S7 | `Increment/decrement operators cannot be chained.` | `++++x` |
+| S8 | `Missing return type after 'pollinate'.` | No type before function name |
+| S9 | `Missing type for parameter '{name}'.` | Parameter without type |
+| S10 | `Unexpected token after program end.` | Code after `root(){}` closing |
+| S11 | `Type mismatch in declaration` | Wrong literal type |
+| S12 | `Empty character literal.` | `''` |
+| S13 | `Invalid character literal: '{value}'.` | `'abc'` |
+
+### 13.3 Semantic Errors
+
+| # | Error Message | Cause |
+|---|---------------|-------|
+| SE1 | `Variable '{name}' already declared.` | Duplicate declaration |
+| SE2 | `Variable '{name}' used before declaration.` | Undeclared variable use |
+| SE3 | `'{name}' is already declared as a function.` | Name conflict |
+| SE4 | `Fertile variables must be initialized.` | Uninitialized constant |
+| SE5 | `Variable '{name}' is declared as fertile and cannot be re-assigned.` | Constant mutation |
+| SE6 | `Type Mismatch! Cannot assign {rhs} to variable '{name}' of type {lhs}.` | Type mismatch |
+| SE7 | `Modulo operator '%' requires 'seed' operands.` | Non-integer modulo |
+| SE8 | `'!' operator can only be used with 'branch' values.` | NOT on non-boolean |
+| SE9 | `Cannot compare '{type1}' and '{type2}'.` | Incompatible comparison |
+| SE10 | `Cannot concatenate non-vine with backtick.` | Non-string concat |
+| SE11 | `Array size must be of type 'seed'.` | Non-integer array size |
+| SE12 | `List index must be of type 'seed'.` | Non-integer index |
+| SE13 | `'{name}' is not a list.` | Indexing non-array |
+| SE14 | `Function '{name}' already declared.` | Duplicate function |
+| SE15 | `Function '{name}' is not defined.` | Undefined function |
+| SE16 | `Function '{name}' expects {n} argument(s), got {m}.` | Wrong arg count |
+| SE17 | `Argument {i}: expected '{expected}', got '{actual}'.` | Wrong arg type |
+| SE18 | `empty function must not return any value.` | Void returning value |
+| SE19 | `spring condition must be branch, got {type}.` | Non-boolean condition |
+| SE20 | `'prune' used outside a loop or switch.` | Break outside loop |
+| SE21 | `'skip' used outside a loop.` | Continue outside loop |
+| SE22 | `'harvest' expression must be 'seed'/'leaf'/'branch'.` | Invalid switch type |
+| SE23 | `Duplicate 'variety' value '{value}'.` | Duplicate case |
+| SE24 | `Bundle type '{name}' is not defined.` | Unknown struct |
+| SE25 | `'ts()' can only be used on lists or vines.` | Wrong ts() target |
+| SE26 | `'taper()' can only be used on 'leaf' type.` | Wrong taper() target |
+| SE27 | `Exceeded maximum of 15 arguments in plant.` | Too many print args |
+
+### 13.4 Runtime Errors
+
+| # | Error Message | Cause |
+|---|---------------|-------|
+| R1 | `Division by zero is undefined` | `x / 0` |
+| R2 | `Evaluated number exceeds maximum of 16 digits` | Number overflow |
+| R3 | `Infinite loop detected!` | > 10,000 iterations |
+| R4 | `Condition must be a boolean. Got '{value}'` | Non-boolean in condition |
+| R5 | `List index must be an integer. Got '{index}'` | Non-integer index |
+| R6 | `Index '{idx}' out of bounds for list '{name}'` | Array out of bounds |
+| R7 | `Variable '{name}' is not a list` | Indexing non-array |
+| R8 | `Value is not a bundle` | Struct access on non-struct |
+| R9 | `Bundle has no member '{name}'` | Invalid member access |
+| R10 | `Function '{name}' expects N argument(s), got M` | Wrong arg count at runtime |
+| R11 | `Input value exceeds maximum of 16 digits` | Input too large |
+
+---
+
+## Sample GAL Program
+
+```gal
+// Global constant
+fertile seed MAX = 100;
+
+// Function definition
+pollinate seed add(seed a, seed b) {
+    reclaim a + b;
+}
+
+// Main entry point
+root() {
+    seed x = 10;
+    seed y = 20;
+    seed result = add(x, y);
+
+    spring (result > MAX) {
+        plant("Result {} exceeds max!", result);
+    }
+    bud (result == MAX) {
+        plant("Result equals max.");
+    }
+    wither {
+        plant("Result is {}", result);
+    }
+
+    // Loop example
+    cultivate (seed i = 0; i < 5; i++) {
+        plant("i = {}", i);
+    }
+
+    // Array example
+    seed arr[] = {1, 2, 3, 4, 5};
+    plant("Array length: {}", ts(arr));
+
+    // Input example
+    seed userInput = water(seed);
+    plant("You entered: {}", userInput);
+}
+```
+
+---
+
+*End of Documentation*

UI/index.html

@@ -202,7 +202,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs/loader.js"></script> <!-- Monaco editor -->
 
         
-        <script src="main.js?v=20260222a"></script>
+        <script src="main.js?v=20260329h"></script>
 
         
         <script>
@@ -281,7 +281,7 @@
 
             // Lexer / Syntax / Semantic modes — call global functions directly
             if (modeText.indexOf('Lexer') !== -1) {
-              if (term) { term.reset(); term.clear(); }
+              if (term) { term.write('\x1b[2J\x1b[3J\x1b[H'); }
               resetChips();
               if (window._clearErrorHighlights) window._clearErrorHighlights();
               if (window.runLexer) return window.runLexer({ silent: false });
@@ -289,7 +289,7 @@
               return;
             }
             if (modeText.indexOf('Syntax') !== -1) {
-              if (term) { term.reset(); term.clear(); }
+              if (term) { term.write('\x1b[2J\x1b[3J\x1b[H'); }
               resetChips();
               if (window._clearErrorHighlights) window._clearErrorHighlights();
               if (window.runSyntax) return window.runSyntax({ silent: false });
@@ -297,7 +297,7 @@
               return;
             }
             if (modeText.indexOf('Semantic') !== -1) {
-              if (term) { term.reset(); term.clear(); }
+              if (term) { term.write('\x1b[2J\x1b[3J\x1b[H'); }
               resetChips();
               if (window._clearErrorHighlights) window._clearErrorHighlights();
               if (window.runSemantic) return window.runSemantic({ silent: false });
@@ -309,7 +309,8 @@
             try { code = monaco.editor.getModels()[0].getValue(); }
             catch(e) { tw('Error: Editor not ready.\r\n'); return; }
 
-            if (term) { term.reset(); term.clear(); }
+            if (term) { term.write('\x1b[2J\x1b[3J\x1b[H'); }
+            window._needsNewline = false;
             resetChips();
             // Clear previous error highlights immediately
             if (window._clearErrorHighlights) window._clearErrorHighlights();

UI/main.js

@@ -966,9 +966,17 @@
                 updateStatusChips(data.stage, data.success);
                 if (data.stage === 'execution') {
                   if (data.success) {
-                    if (!silent) term.write('Code execution successful.\r\n');
+                    if (!silent) {
+                      if (window._needsNewline) term.write('\r\n');
+                      term.write('\x1b[1;32mCode execution successful.\x1b[0m\r\n');
+                      window._needsNewline = false;
+                    }
                   } else {
-                    if (!silent) term.write('Code execution failed.\r\n');
+                    if (!silent) {
+                      if (window._needsNewline) term.write('\r\n');
+                      term.write('\x1b[1;31mCode execution failed.\x1b[0m\r\n');
+                      window._needsNewline = false;
+                    }
                   }
                 }
                 // Highlight errors from collected socket output
@@ -1000,11 +1008,6 @@
             const silent = options.silent || false;
             const sourceCode = editor.getValue();
 
-            // Clear terminal FIRST, before anything else
-            if (!silent) {
-              term.reset();
-              term.clear();
-            }
             // Clear previous error highlights
             if (window._clearErrorHighlights) window._clearErrorHighlights();
             // Remove stale socket listeners
@@ -1037,12 +1040,17 @@
         // Run generation counter — ignore output from stale/previous runs
         window._runGeneration = 0;
         window._socketOutputLog = [];
+        window._needsNewline = false;
         socket.on('output', function (data) {
             // Ignore output from a previous run
             if (data._gen !== undefined && data._gen !== window._runGeneration) return;
             const text = data.output;
             window._socketOutputLog.push(text);
             const isError = /error|Error/.test(text);
+            // Add newline before this output if a previous output already wrote to the terminal
+            if (window._needsNewline) {
+              term.write('\r\n');
+            }
             const lines = text.split('\n');
             lines.forEach((line, index) => {
               if (isError) {
@@ -1054,8 +1062,7 @@
                 term.write('\r\n');
               }
             });
-            // Ensure each message ends on its own line
-            term.write('\r\n');
+            window._needsNewline = true;
             if (autoScroll) term.scrollToBottom();
             term.focus();
         });
@@ -1088,6 +1095,7 @@
 
             if (e === '\r') {
               term.write('\r\n');
+              window._needsNewline = false;
               waitingForInput = false;
               socket.emit('capture_input', { var_name: variable, input: userInput });
               userInput = '';
@@ -1107,11 +1115,7 @@
             const prompt = data.prompt;
             variable = data.variable;
 
-            // Display the prompt so the user knows to type
-            if (prompt) {
-              term.write(prompt);
-            }
-
+            window._needsNewline = false;
             waitingForInput = true;
             userInput = '';  
         });
@@ -1121,8 +1125,8 @@
           
       window.runCode = async function () {
         // Clear terminal and error highlights at the start of each run
-        term.reset();
-        term.clear();
+        term.write('\x1b[2J\x1b[3J\x1b[H');
+        window._needsNewline = false;
         if (window._clearErrorHighlights) window._clearErrorHighlights();
         // Remove any stale socket listeners from previous runs
         socket.removeAllListeners('execution_complete');

UI/style.pixel.css

@@ -12,11 +12,31 @@
   --shadow: rgba(0,0,0,.25);
   --radius: 12px;
   --pixel-font: 'Press Start 2P', system-ui, sans-serif;
+
+  /* RGB components for theme-aware rgba() */
+  --accent-rgb: 124,210,111;
+  --accent-2-rgb: 255,211,110;
+  --accent-3-rgb: 255,138,91;
+  --btn-start-rgb: 42,90,53;
+
+  /* Button / gradient */
+  --btn-start: #2a5a35;
+  --btn-end: #1a3a21;
+  --btn-hover-start: #35744a;
+  --btn-hover-end: #224b2b;
+
+  /* Editor (Monaco) */
+  --editor-bg: #18361d;
+  --editor-line: #204b27;
+
+  /* AI chat accent (separate from compiler) */
+  --chat-accent: #7cd26f;
+  --chat-accent-rgb: 124,210,111;
 }
 
 /* Monaco Editor Line Highlighting */
 .current-line-highlight {
-  background: rgba(124, 210, 111, 0.03) !important;
+  background: rgba(var(--accent-rgb), 0.03) !important;
   border-left: none !important;
 }
 
@@ -60,10 +80,10 @@ body{
   font-family: 'Baloo 2', Arial, sans-serif;
   margin: 0;
   padding: 0;
-  background: radial-gradient(1400px 700px at 80% -20%, rgba(124,210,111,.18), transparent),
-              radial-gradient(1000px 600px at 0% 100%, rgba(255,211,110,.15), transparent),
-              radial-gradient(800px 800px at 50% 50%, rgba(124,210,111,.08), transparent),
-              linear-gradient(135deg, #0a150c 0%, #0d1b0f 50%, #0f2014 100%);
+  background: radial-gradient(1400px 700px at 80% -20%, rgba(var(--accent-rgb),.18), transparent),
+              radial-gradient(1000px 600px at 0% 100%, rgba(var(--accent-2-rgb),.15), transparent),
+              radial-gradient(800px 800px at 50% 50%, rgba(var(--accent-rgb),.08), transparent),
+              linear-gradient(135deg, #0a150c 0%, var(--bg) 50%, var(--panel-2) 100%);
   color: var(--ink);
   display: flex;
   flex-direction: column;
@@ -83,8 +103,8 @@ body::before {
   width: 100%;
   height: 100%;
   background: 
-    radial-gradient(circle at 20% 30%, rgba(124,210,111,.05) 0%, transparent 25%),
-    radial-gradient(circle at 80% 70%, rgba(255,211,110,.05) 0%, transparent 25%);
+    radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb),.05) 0%, transparent 25%),
+    radial-gradient(circle at 80% 70%, rgba(var(--accent-2-rgb),.05) 0%, transparent 25%);
   pointer-events: none;
   animation: breathe 8s ease-in-out infinite alternate;
 }
@@ -107,7 +127,7 @@ img, canvas{ image-rendering: pixelated; }
 ::-webkit-scrollbar-thumb{ 
   background:linear-gradient(135deg, #35543b 0%, #2a4530 100%); 
   border-radius: 6px; 
-  border: 2px solid rgba(42,90,53,.6);
+  border: 2px solid rgba(var(--btn-start-rgb),.6);
   box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
 }
 ::-webkit-scrollbar-thumb:hover{ 
@@ -138,9 +158,9 @@ img, canvas{ image-rendering: pixelated; }
   height: 2px;
   background: linear-gradient(90deg, 
     transparent 0%, 
-    rgba(124,210,111,.4) 20%, 
-    rgba(124,210,111,.6) 50%, 
-    rgba(124,210,111,.4) 80%, 
+    rgba(var(--accent-rgb),.4) 20%, 
+    rgba(var(--accent-rgb),.6) 50%, 
+    rgba(var(--accent-rgb),.4) 80%, 
     transparent 100%);
   animation: shimmer 3s ease-in-out infinite;
 }
@@ -156,10 +176,10 @@ img, canvas{ image-rendering: pixelated; }
   align-items:center; 
   justify-content:space-between; 
   padding:10px 20px; 
-  background:linear-gradient(135deg, #2a5a35 0%, #1a3a21 100%); 
-  border-bottom:3px solid #2a5a35; 
+  background:linear-gradient(135deg, var(--btn-start) 0%, var(--btn-end) 100%); 
+  border-bottom:3px solid var(--btn-start); 
   box-shadow: 0 4px 16px rgba(0,0,0,.4), 
-              inset 0 1px 0 rgba(124,210,111,.15);
+              inset 0 1px 0 rgba(var(--accent-rgb),.15);
   position: relative;
   z-index: 90;
 }
@@ -171,7 +191,7 @@ img, canvas{ image-rendering: pixelated; }
   font-weight: 700;
   color: #b6ffb6;
   background: linear-gradient(135deg, rgba(15,32,20,.7) 0%, rgba(10,24,14,.85) 100%);
-  border: 1px solid rgba(124,210,111,.3);
+  border: 1px solid rgba(var(--accent-rgb),.3);
   border-radius: 6px;
   padding: 7px 14px 7px 30px;
   max-width: 280px;
@@ -179,7 +199,7 @@ img, canvas{ image-rendering: pixelated; }
   text-overflow: ellipsis;
   white-space: nowrap;
   letter-spacing: .4px;
-  text-shadow: 0 0 8px rgba(124,210,111,.4), 0 1px 3px rgba(0,0,0,.5);
+  text-shadow: 0 0 8px rgba(var(--accent-rgb),.4), 0 1px 3px rgba(0,0,0,.5);
   position: relative;
   box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
   transition: all .3s ease;
@@ -191,16 +211,16 @@ img, canvas{ image-rendering: pixelated; }
   top: 50%;
   transform: translateY(-50%);
   font-size: 12px;
-  filter: drop-shadow(0 0 3px rgba(124,210,111,.4));
+  filter: drop-shadow(0 0 3px rgba(var(--accent-rgb),.4));
 }
 .current-file-name:hover {
-  border-color: rgba(124,210,111,.5);
-  text-shadow: 0 0 12px rgba(124,210,111,.6), 0 1px 3px rgba(0,0,0,.5);
-  box-shadow: 0 3px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08), 0 0 15px rgba(124,210,111,.08);
+  border-color: rgba(var(--accent-rgb),.5);
+  text-shadow: 0 0 12px rgba(var(--accent-rgb),.6), 0 1px 3px rgba(0,0,0,.5);
+  box-shadow: 0 3px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08), 0 0 15px rgba(var(--accent-rgb),.08);
 }
 .app-title{ font-family: var(--pixel-font); letter-spacing:.5px; color: var(--ink); opacity:.9; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
 .tb-btn{ 
-  border:2px solid rgba(42,90,53,.8); 
+  border:2px solid rgba(var(--btn-start-rgb),.8); 
   background:linear-gradient(135deg, #15301e 0%, #102417 100%); 
   color:var(--ink); 
   padding:10px 16px; 
@@ -223,7 +243,7 @@ img, canvas{ image-rendering: pixelated; }
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(124,210,111,.2), transparent);
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.2), transparent);
   transition: left .5s ease;
 }
 
@@ -232,11 +252,11 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .tb-btn:hover{ 
-  background:linear-gradient(135deg, #1a3a21 0%, #15301e 100%); 
+  background:linear-gradient(135deg, var(--btn-end) 0%, #15301e 100%); 
   transform: translateY(-2px); 
   box-shadow: 0 6px 16px rgba(0,0,0,.4), 
               inset 0 1px 0 rgba(255,255,255,.12);
-  border-color: rgba(124,210,111,.6);
+  border-color: rgba(var(--accent-rgb),.6);
 }
 
 .tb-btn:active{ 
@@ -255,7 +275,7 @@ img, canvas{ image-rendering: pixelated; }
   left: 0;
   min-width: 180px;
   background: linear-gradient(135deg, #152a18 0%, #0f1d12 100%);
-  border: 2px solid rgba(124,210,111,.35);
+  border: 2px solid rgba(var(--accent-rgb),.35);
   border-radius: 8px;
   padding: 6px 0;
   box-shadow: 0 10px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.3);
@@ -282,7 +302,7 @@ img, canvas{ image-rendering: pixelated; }
   transition: background .15s, color .15s;
 }
 .file-popup-item:hover {
-  background: rgba(124,210,111,.15);
+  background: rgba(var(--accent-rgb),.15);
   color: #fff;
 }
 .file-popup-item.danger {
@@ -295,21 +315,21 @@ img, canvas{ image-rendering: pixelated; }
 .file-popup-divider {
   height: 1px;
   margin: 4px 12px;
-  background: rgba(124,210,111,.2);
+  background: rgba(var(--accent-rgb),.2);
 }
 
 .tb-run{ 
-  background:linear-gradient(135deg, #7cd26f 0%, #49a25c 100%); 
+  background:linear-gradient(135deg, var(--accent) 0%, #49a25c 100%); 
   color:#0f1d12; 
   border-color:#2e6f3e; 
   text-shadow: 0 1px 2px rgba(255,255,255,.4);
-  box-shadow: 0 3px 12px rgba(124,210,111,.4), 
+  box-shadow: 0 3px 12px rgba(var(--accent-rgb),.4), 
               inset 0 1px 0 rgba(255,255,255,.2);
 }
 
 .tb-run:hover{ 
   background:linear-gradient(135deg, #8ee280 0%, #55b86a 100%);
-  box-shadow: 0 6px 20px rgba(124,210,111,.6), 
+  box-shadow: 0 6px 20px rgba(var(--accent-rgb),.6), 
               inset 0 1px 0 rgba(255,255,255,.3);
 }
 
@@ -326,7 +346,7 @@ img, canvas{ image-rendering: pixelated; }
   min-height: 48px;
   background: linear-gradient(180deg, #1a2e1d 0%, #111f14 100%);
   padding: 0 14px;
-  border-bottom: 1px solid rgba(42,90,53,.5);
+  border-bottom: 1px solid rgba(var(--btn-start-rgb),.5);
   z-index: 100;
   flex-shrink: 0;
   position: relative;
@@ -379,8 +399,8 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .ide-menu-btn {
-  background: linear-gradient(135deg, #2a5a35 0%, #1a3a21 100%);
-  border: 1px solid rgba(124,210,111,.35);
+  background: linear-gradient(135deg, var(--btn-start) 0%, var(--btn-end) 100%);
+  border: 1px solid rgba(var(--accent-rgb),.35);
   color: var(--ink);
   font-family: var(--pixel-font);
   font-size: 10px;
@@ -393,8 +413,8 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .ide-menu-btn:hover {
-  background: linear-gradient(135deg, #35744a 0%, #224b2b 100%);
-  border-color: rgba(124,210,111,.6);
+  background: linear-gradient(135deg, var(--btn-hover-start) 0%, var(--btn-hover-end) 100%);
+  border-color: rgba(var(--accent-rgb),.6);
   color: #8ee280;
 }
 
@@ -405,7 +425,7 @@ img, canvas{ image-rendering: pixelated; }
   height: 20px;
   min-height: 20px;
   background: #0b160d;
-  border-bottom: 1px solid rgba(42,90,53,.35);
+  border-bottom: 1px solid rgba(var(--btn-start-rgb),.35);
   flex-shrink: 0;
   overflow-x: auto;
   overflow-y: hidden;
@@ -417,7 +437,7 @@ img, canvas{ image-rendering: pixelated; }
   gap: 4px;
   padding: 0 10px;
   background: transparent;
-  border-right: 1px solid rgba(42,90,53,.2);
+  border-right: 1px solid rgba(var(--btn-start-rgb),.2);
   cursor: default;
   white-space: nowrap;
   min-width: 0;
@@ -492,7 +512,7 @@ img, canvas{ image-rendering: pixelated; }
   height: 32px;
   min-height: 32px;
   background: linear-gradient(180deg, #162e1b 0%, #0e1f12 100%);
-  border-top: 1px solid rgba(42,90,53,.4);
+  border-top: 1px solid rgba(var(--btn-start-rgb),.4);
   padding: 0 14px;
   flex-shrink: 0;
   z-index: 100;
@@ -549,18 +569,18 @@ img, canvas{ image-rendering: pixelated; }
 
 /* Sidebar drag-resize handle */
 .sidebarResizer{ width:6px; background:linear-gradient(180deg, #35543b, #2a4530); cursor:ew-resize; border-radius:2px; flex-shrink:0; transition: background .2s ease; position:relative; z-index:5; margin:0 3px; }
-.sidebarResizer:hover, .sidebarResizer.active{ background:linear-gradient(180deg, #7cd26f, #49a25c); }
-.sidebarResizer::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:30px; background:rgba(124,210,111,.5); border-radius:1px; }
+.sidebarResizer:hover, .sidebarResizer.active{ background:linear-gradient(180deg, var(--accent), #49a25c); }
+.sidebarResizer::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:30px; background:rgba(var(--accent-rgb),.5); border-radius:1px; }
 .sidebar{ 
   width: 520px;
   min-width: 200px;
   max-width: 70%;
   flex-shrink: 0;
   background:linear-gradient(135deg, rgba(24,54,29,.95) 0%, rgba(18,40,22,.95) 100%); 
-  outline:2px solid rgba(42,90,53,.9); 
+  outline:2px solid rgba(var(--btn-start-rgb),.9); 
   padding:16px; 
   box-shadow:0 6px 24px rgba(0,0,0,.4), 
-              inset 0 1px 0 rgba(124,210,111,.1); 
+              inset 0 1px 0 rgba(var(--accent-rgb),.1); 
   border-radius:8px; 
   backdrop-filter: blur(6px); 
   overflow-y:auto;
@@ -574,7 +594,7 @@ img, canvas{ image-rendering: pixelated; }
   left: 0;
   width: 100%;
   height: 2px;
-  background: linear-gradient(90deg, transparent, rgba(124,210,111,.4), transparent);
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.4), transparent);
   animation: slideGlow 3s ease-in-out infinite;
 }
 
@@ -586,8 +606,8 @@ img, canvas{ image-rendering: pixelated; }
 .sd-section{ font-family:var(--pixel-font); font-size:11px; color:var(--accent-2); margin:12px 0 8px; text-transform:uppercase; letter-spacing:.8px; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
 .explorer-list, .themes-list{ list-style:none; padding:0; margin:0; }
 .explorer-list li, .themes-list li{ padding:8px 10px; border-left:3px solid transparent; cursor:pointer; transition: all .2s ease; border-radius:3px; margin-bottom:2px; }
-.explorer-list li:hover, .themes-list li:hover{ background:rgba(26,58,33,.8); border-left-color:#7cd26f; transform: translateX(2px); }
-.themes-list .active{ background:linear-gradient(90deg, rgba(34,75,43,.9) 0%, rgba(26,58,33,.7) 100%); border-left-color:#7cd26f; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
+.explorer-list li:hover, .themes-list li:hover{ background:rgba(26,58,33,.8); border-left-color:var(--accent); transform: translateX(2px); }
+.themes-list .active{ background:linear-gradient(90deg, rgba(34,75,43,.9) 0%, rgba(26,58,33,.7) 100%); border-left-color:var(--accent); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
 .navbar img{ margin-right: 10px; }
 .logoContainer{ display:flex; justify-content:flex-end; align-items:center; }
 .logo-img{ height: 96px; width: auto; max-width: 260px; object-fit: contain; }
@@ -602,9 +622,9 @@ img, canvas{ image-rendering: pixelated; }
   background: linear-gradient(135deg, rgba(13,27,15,.95) 0%, rgba(18,36,20,.9) 100%);
   padding: 6px;
   border-radius: 10px;
-  border: 2px solid rgba(124,210,111,.15);
+  border: 2px solid rgba(var(--accent-rgb),.15);
   box-shadow: 0 4px 16px rgba(0,0,0,.6), 
-              inset 0 1px 0 rgba(124,210,111,.1);
+              inset 0 1px 0 rgba(var(--accent-rgb),.1);
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(8px);
@@ -631,8 +651,8 @@ img, canvas{ image-rendering: pixelated; }
 
 .mode-radio:hover {
   color: rgba(166,195,169,.95);
-  background: rgba(124,210,111,.08);
-  border-color: rgba(124,210,111,.2);
+  background: rgba(var(--accent-rgb),.08);
+  border-color: rgba(var(--accent-rgb),.2);
   transform: translateY(-1px);
 }
 
@@ -645,26 +665,26 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .mode-radio input[type="radio"]:checked ~ span {
-  color: #7cd26f;
+  color: var(--accent);
   font-weight: bold;
   letter-spacing: 0.5px;
   animation: modeGlow 0.5s ease-out;
 }
 
 .mode-radio input[type="radio"]:checked {
-  accent-color: #7cd26f;
+  accent-color: var(--accent);
 }
 
 .mode-radio:has(input:checked) {
-  color: #7cd26f;
-  background: rgba(124,210,111,.12);
-  border-color: rgba(124,210,111,.4);
+  color: var(--accent);
+  background: rgba(var(--accent-rgb),.12);
+  border-color: rgba(var(--accent-rgb),.4);
   transform: scale(1.03);
 }
 
 @keyframes modeGlow {
   0% {
-    text-shadow: 0 0 4px rgba(124,210,111,.4);
+    text-shadow: 0 0 4px rgba(var(--accent-rgb),.4);
   }
   50% {
     text-shadow: 0 2px 6px rgba(0,0,0,.6);
@@ -677,16 +697,16 @@ img, canvas{ image-rendering: pixelated; }
 
 
 /* Sidebar tokens table */
-.side-tokens{ max-height: 90%; overflow:auto; margin-top:8px; border-radius:6px; outline:2px solid rgba(42,90,53,.6); box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05); background:linear-gradient(135deg, rgba(24,54,29,.9), rgba(18,40,22,.9)); }
+.side-tokens{ max-height: 90%; overflow:auto; margin-top:8px; border-radius:6px; outline:2px solid rgba(var(--btn-start-rgb),.6); box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05); background:linear-gradient(135deg, rgba(24,54,29,.9), rgba(18,40,22,.9)); }
 .side-token-table{ width:100%; border-collapse:separate; border-spacing:0; color: #e8ffe4; font-size:12px; }
-.side-token-table thead th{ position:sticky; top:0; z-index:2; background:linear-gradient(135deg, #1a3a21, #153018); padding:8px; font-family:var(--pixel-font); font-size:10px; letter-spacing:.5px; text-align:left; color: #ffd36e; font-weight: bold; border: 1px solid rgba(42,90,53,.6); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
-.side-token-table td{ padding:6px 8px; border: 1px solid rgba(42,90,53,.4); word-break:break-word; font-weight: bold; color: #e8ffe4; }
+.side-token-table thead th{ position:sticky; top:0; z-index:2; background:linear-gradient(135deg, var(--btn-end), #153018); padding:8px; font-family:var(--pixel-font); font-size:10px; letter-spacing:.5px; text-align:left; color: #ffd36e; font-weight: bold; border: 1px solid rgba(var(--btn-start-rgb),.6); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
+.side-token-table td{ padding:6px 8px; border: 1px solid rgba(var(--btn-start-rgb),.4); word-break:break-word; font-weight: bold; color: #e8ffe4; }
 .side-token-table td:first-child{ color: #f2ffef; }
 .side-token-table td:nth-child(2){ color: #89cff0; }
 .side-token-table td:nth-child(3){ color: #ffa86a; }
 .side-token-table tr:nth-child(even){ background:rgba(16,36,20,.7); }
 .side-token-table tr:nth-child(odd){ background:rgba(20,44,26,.7); }
-.side-token-table tr:hover{ background:rgba(42,90,53,.55) !important; transition: background .15s ease; }
+.side-token-table tr:hover{ background:rgba(var(--btn-start-rgb),.55) !important; transition: background .15s ease; }
 /* Make Token Type (3rd column) a bit smaller to fit */
 .side-token-table th:nth-child(3), .side-token-table td:nth-child(3){
   font-size: 11px;
@@ -723,7 +743,7 @@ img, canvas{ image-rendering: pixelated; }
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(135deg, rgba(124,210,111,.1), transparent);
+  background: linear-gradient(135deg, rgba(var(--accent-rgb),.1), transparent);
   opacity: 0;
   transition: opacity .3s ease;
 }
@@ -736,7 +756,7 @@ img, canvas{ image-rendering: pixelated; }
   background:linear-gradient(135deg, rgba(32,75,43,.95) 0%, rgba(26,58,33,.95) 100%);
 }
 
-.button-group .dropdown-toggle{ border-left:2px solid rgba(124,210,111,0.2); }
+.button-group .dropdown-toggle{ border-left:2px solid rgba(var(--accent-rgb),0.2); }
 
 .nav-links{ 
   list-style:none; 
@@ -748,7 +768,7 @@ img, canvas{ image-rendering: pixelated; }
   z-index:10; 
   box-shadow:0 10px 30px rgba(0,0,0,.5); 
   transition:all .3s ease; 
-  outline:2px solid rgba(124,210,111,.6); 
+  outline:2px solid rgba(var(--accent-rgb),.6); 
   border-radius:6px; 
   overflow:hidden; 
   backdrop-filter:blur(10px);
@@ -772,7 +792,7 @@ img, canvas{ image-rendering: pixelated; }
   top: 0;
   width: 3px;
   height: 100%;
-  background: linear-gradient(180deg, #7cd26f, #49a25c);
+  background: linear-gradient(180deg, var(--accent), #49a25c);
   transform: scaleY(0);
   transition: transform .3s ease;
 }
@@ -782,7 +802,7 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .nav-links li a:hover{ 
-  background:rgba(42,90,53,.6);
+  background:rgba(var(--btn-start-rgb),.6);
   padding-left: 22px;
 }
 .hidden{ display:none; }
@@ -795,10 +815,10 @@ img, canvas{ image-rendering: pixelated; }
   min-width:50%; 
   background:linear-gradient(135deg, rgba(24,54,29,.95) 0%, rgba(18,40,22,.95) 100%); 
   border-radius:8px; 
-  outline:2px solid rgba(42,90,53,.9); 
+  outline:2px solid rgba(var(--btn-start-rgb),.9); 
   padding:10px; 
   box-shadow:0 6px 24px rgba(0,0,0,.4), 
-              inset 0 1px 0 rgba(124,210,111,.1); 
+              inset 0 1px 0 rgba(var(--accent-rgb),.1); 
   position:relative; 
   height:auto; 
   backdrop-filter: blur(6px); 
@@ -807,21 +827,21 @@ img, canvas{ image-rendering: pixelated; }
 
 .textFieldCont:hover{ 
   box-shadow:0 8px 32px rgba(0,0,0,.5), 
-              inset 0 1px 0 rgba(124,210,111,.15);
-  outline-color: rgba(124,210,111,.7);
+              inset 0 1px 0 rgba(var(--accent-rgb),.15);
+  outline-color: rgba(var(--accent-rgb),.7);
 }
-.editor-header{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg, rgba(26,58,33,.7), rgba(16,36,23,.6)); border-radius:4px; padding:6px 8px; margin-bottom:8px; border:1px solid rgba(42,90,53,.5); }
+.editor-header{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg, rgba(26,58,33,.7), rgba(16,36,23,.6)); border-radius:4px; padding:6px 8px; margin-bottom:8px; border:1px solid rgba(var(--btn-start-rgb),.5); }
 .editor-tabs{ display:flex; gap:6px; }
 .tab{ padding:6px 10px; border-radius:4px; border:1px solid transparent; font-family:var(--pixel-font); font-size:10px; color:var(--ink); background:transparent; cursor:pointer; transition:all .2s ease; }
 .tab:hover{ background:rgba(26,58,33,.55); }
-.tab.active{ background:linear-gradient(135deg, #224b2b, #1a3a21); border-color:#2a5a35; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
-.editor-actions .tab-btn{ padding:6px 8px; border:1px solid #2a5a35; border-radius:4px; background:linear-gradient(135deg, #15301e, #102417); color:var(--ink); font-family:var(--pixel-font); font-size:10px; cursor:pointer; }
+.tab.active{ background:linear-gradient(135deg, var(--btn-hover-end), var(--btn-end)); border-color:var(--btn-start); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
+.editor-actions .tab-btn{ padding:6px 8px; border:1px solid var(--btn-start); border-radius:4px; background:linear-gradient(135deg, #15301e, #102417); color:var(--ink); font-family:var(--pixel-font); font-size:10px; cursor:pointer; }
 .editor-body{ height: calc(100% - 36px); }
 .widthResizer{ width:4px; background:linear-gradient(135deg, #35543b, #2a4530); cursor:ew-resize; position:relative; height:10%; top:45%; border-radius:2px; transition: background .2s ease; }
 .widthResizer:hover{ background:linear-gradient(135deg, #4a6d4f, #35543b); }
 .heightResizer{ width:100%; height:6px; background:linear-gradient(180deg, #35543b, #2a4530); cursor:ns-resize; border-radius:2px; flex-shrink:0; transition: background .2s ease; position:relative; z-index:5; }
-.heightResizer:hover, .heightResizer.active{ background:linear-gradient(180deg, #7cd26f, #49a25c); }
-.heightResizer::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:2px; background:rgba(124,210,111,.5); border-radius:1px; }
+.heightResizer:hover, .heightResizer.active{ background:linear-gradient(180deg, var(--accent), #49a25c); }
+.heightResizer::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:2px; background:rgba(var(--accent-rgb),.5); border-radius:1px; }
 .outputCont{ flex:1; display:flex; flex-direction:column; overflow-y:auto; border-radius:6px; overflow-x:hidden; }
 
 /* Mobile tokens section - visible by default, hidden on desktop */
@@ -838,8 +858,8 @@ img, canvas{ image-rendering: pixelated; }
   overflow: hidden;
   border-radius: 12px;
   background: rgba(24,54,29,.98);
-  outline: 3px solid rgba(124,210,111,.6);
-  box-shadow: 0 10px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(124,210,111,.3);
+  outline: 3px solid rgba(var(--accent-rgb),.6);
+  box-shadow: 0 10px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--accent-rgb),.3);
   z-index: 1000;
   flex-direction: column;
   will-change: transform;
@@ -855,7 +875,7 @@ img, canvas{ image-rendering: pixelated; }
   align-items: center;
   padding: 12px 16px;
   background: linear-gradient(135deg, #2a4c30 0%, #234026 100%);
-  border-bottom: 2px solid rgba(42,90,53,.8);
+  border-bottom: 2px solid rgba(var(--btn-start-rgb),.8);
 }
 
 .mobile-tokens-title {
@@ -964,13 +984,13 @@ img, canvas{ image-rendering: pixelated; }
   width: 48px;
   height: 48px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2a5a35, #1a3a21);
-  border: 2px solid rgba(124,210,111,.5);
-  color: #7cd26f;
+  background: linear-gradient(135deg, var(--btn-start), var(--btn-end));
+  border: 2px solid rgba(var(--accent-rgb),.5);
+  color: var(--accent);
   font-size: 20px;
   cursor: pointer;
   z-index: 998;
-  box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(124,210,111,.2);
+  box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--accent-rgb),.2);
   align-items: center;
   justify-content: center;
   transition: all .2s ease;
@@ -1012,8 +1032,8 @@ img, canvas{ image-rendering: pixelated; }
   max-width: 80vw;
   border-radius: 12px;
   background: rgba(24,54,29,.98);
-  outline: 3px solid rgba(124,210,111,.6);
-  box-shadow: 0 10px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(124,210,111,.3);
+  outline: 3px solid rgba(var(--accent-rgb),.6);
+  box-shadow: 0 10px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--accent-rgb),.3);
   z-index: 1000;
   flex-direction: column;
   overflow: hidden;
@@ -1029,7 +1049,7 @@ img, canvas{ image-rendering: pixelated; }
   align-items: center;
   padding: 10px 14px;
   background: linear-gradient(135deg, #2a4c30 0%, #234026 100%);
-  border-bottom: 2px solid rgba(42,90,53,.8);
+  border-bottom: 2px solid rgba(var(--btn-start-rgb),.8);
 }
 
 .mobile-status-title {
@@ -1074,18 +1094,18 @@ img, canvas{ image-rendering: pixelated; }
   font-size: 11px;
   padding: 8px 12px;
   border-radius: 6px;
-  background: rgba(42,90,53,.3);
-  border: 1px solid rgba(42,90,53,.5);
+  background: rgba(var(--btn-start-rgb),.3);
+  border: 1px solid rgba(var(--btn-start-rgb),.5);
   color: var(--muted);
   letter-spacing: .3px;
   text-align: center;
 }
 
 .mobile-status-chip.ok {
-  background: linear-gradient(135deg, #7cd26f 0%, #49a25c 100%);
+  background: linear-gradient(135deg, var(--accent) 0%, #49a25c 100%);
   color: #0f1d12;
   border-color: #2e6f3e;
-  box-shadow: 0 2px 8px rgba(124,210,111,.3);
+  box-shadow: 0 2px 8px rgba(var(--accent-rgb),.3);
 }
 
 .mobile-status-chip.err {
@@ -1101,7 +1121,7 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .btn-toggle-lexemes {
-  background: linear-gradient(135deg, #7cd26f 0%, #49a25c 100%);
+  background: linear-gradient(135deg, var(--accent) 0%, #49a25c 100%);
   color: #0f1d12;
   border: 2px solid #2e6f3e;
   border-radius: 6px;
@@ -1157,7 +1177,7 @@ img, canvas{ image-rendering: pixelated; }
   
   /* Mobile performance optimizations */
   * {
-    -webkit-tap-highlight-color: rgba(124,210,111,0.2);
+    -webkit-tap-highlight-color: rgba(var(--accent-rgb),0.2);
     box-sizing: border-box;
   }
   
@@ -1204,14 +1224,14 @@ img, canvas{ image-rendering: pixelated; }
   background:linear-gradient(135deg, rgba(24,54,29,.95) 0%, rgba(18,40,22,.95) 100%); 
   color: white; 
   border-radius:8px; 
-  outline:2px solid rgba(42,90,53,.9); 
+  outline:2px solid rgba(var(--btn-start-rgb),.9); 
   box-shadow:0 6px 24px rgba(0,0,0,.4), 
-              inset 0 1px 0 rgba(124,210,111,.1); 
+              inset 0 1px 0 rgba(var(--accent-rgb),.1); 
   overflow:hidden;
 }
 
 .tokenTable th{ 
-  background:linear-gradient(135deg, #1a3a21 0%, #153018 100%); 
+  background:linear-gradient(135deg, var(--btn-end) 0%, #153018 100%); 
   color: #ffd36e; 
   text-align:center; 
   padding:12px 14px; 
@@ -1220,7 +1240,7 @@ img, canvas{ image-rendering: pixelated; }
   letter-spacing:.6px; 
   text-shadow: 0 1px 3px rgba(0,0,0,.4); 
   font-weight: bold; 
-  border: 1px solid rgba(42,90,53,.7);
+  border: 1px solid rgba(var(--btn-start-rgb),.7);
   position: sticky;
   top: 0;
   z-index: 2;
@@ -1233,7 +1253,7 @@ img, canvas{ image-rendering: pixelated; }
   left: 0;
   width: 100%;
   height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(124,210,111,.5), transparent);
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.5), transparent);
 }
 
 .tokenTable td{ 
@@ -1241,7 +1261,7 @@ img, canvas{ image-rendering: pixelated; }
   padding:10px 14px; 
   font-size:14px; 
   word-break:break-word; 
-  border: 1px solid rgba(42,90,53,.4); 
+  border: 1px solid rgba(var(--btn-start-rgb),.4); 
   font-weight: bold;
   transition: background .15s ease;
   color: #e8ffe4;
@@ -1254,7 +1274,7 @@ img, canvas{ image-rendering: pixelated; }
 .tokenTable tr:nth-child(odd){ background:rgba(20,44,26,.75); }
 
 .tokenTable tr:hover{ 
-  background:rgba(42,90,53,.6) !important; 
+  background:rgba(var(--btn-start-rgb),.6) !important; 
 }
 /* Make Token Type (3rd column) smaller to aid fit */
 .tokenTable th:nth-child(3), .tokenTable td:nth-child(3){
@@ -1272,14 +1292,14 @@ img, canvas{ image-rendering: pixelated; }
   flex-shrink:0;
   background:linear-gradient(135deg, rgba(24,54,29,.95) 0%, rgba(18,40,22,.95) 100%);
   border-radius:8px; 
-  border:2px solid rgba(42,90,53,.9); 
+  border:2px solid rgba(var(--btn-start-rgb),.9); 
   color:var(--ink);
   margin:0; 
   display:flex; 
   flex-direction:column; 
   overflow:hidden;
   box-shadow:0 6px 24px rgba(0,0,0,.4), 
-              inset 0 1px 0 rgba(124,210,111,.1);
+              inset 0 1px 0 rgba(var(--accent-rgb),.1);
   backdrop-filter: blur(6px);
   position:relative;
   box-sizing:border-box;
@@ -1291,7 +1311,7 @@ img, canvas{ image-rendering: pixelated; }
   justify-content:space-between; 
   gap:10px;
   padding:8px 12px; 
-  border-bottom:2px solid rgba(42,90,53,.7);
+  border-bottom:2px solid rgba(var(--btn-start-rgb),.7);
   background:linear-gradient(135deg, rgba(26,58,33,.8), rgba(16,36,23,.7));
   box-shadow: 0 2px 10px rgba(0,0,0,.2);
   flex-shrink: 0;
@@ -1299,7 +1319,7 @@ img, canvas{ image-rendering: pixelated; }
 .panel-tabs{ display:flex; gap:6px; }
 .panel-tabs .tab{ padding:6px 10px; border-radius:4px; border:1px solid transparent; font-family:var(--pixel-font); font-size:10px; color:var(--ink); background:transparent; cursor:pointer; transition:all .2s ease; }
 .panel-tabs .tab:hover{ background:rgba(26,58,33,.55); }
-.panel-tabs .tab.active{ background:linear-gradient(135deg, #224b2b, #1a3a21); border-color:#2a5a35; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
+.panel-tabs .tab.active{ background:linear-gradient(135deg, var(--btn-hover-end), var(--btn-end)); border-color:var(--btn-start); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
 .term-title{ 
   font-family:var(--pixel-font); 
   font-size:11px; 
@@ -1325,14 +1345,14 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .dot-green{ 
-  background:#7cd26f;
-  box-shadow:0 0 8px rgba(124,210,111,.7), 
+  background:var(--accent);
+  box-shadow:0 0 8px rgba(var(--accent-rgb),.7), 
              inset 0 0 4px rgba(255,255,255,.3);
 }
 .term-actions{ display:flex; gap:8px; }
 .term-btn{ 
   padding:7px 12px; 
-  border:2px solid rgba(42,90,53,.8); 
+  border:2px solid rgba(var(--btn-start-rgb),.8); 
   border-radius:5px; 
   cursor:pointer; 
   font-family:var(--pixel-font); 
@@ -1346,17 +1366,17 @@ img, canvas{ image-rendering: pixelated; }
 
 .term-btn:hover{ 
   transform: translateY(-2px); 
-  background:linear-gradient(135deg, #1a3a21, #15301e);
+  background:linear-gradient(135deg, var(--btn-end), #15301e);
   box-shadow:0 5px 15px rgba(0,0,0,.4), 
               inset 0 1px 0 rgba(255,255,255,.12);
-  border-color: rgba(124,210,111,.6);
+  border-color: rgba(var(--accent-rgb),.6);
 }
 
 .term-btn[aria-pressed="true"]{ 
-  background:linear-gradient(135deg, #7cd26f, #49a25c); 
+  background:linear-gradient(135deg, var(--accent), #49a25c); 
   color:#0f1d12; 
   border-color:#2e6f3e;
-  box-shadow:0 3px 12px rgba(124,210,111,.5), 
+  box-shadow:0 3px 12px rgba(var(--accent-rgb),.5), 
               inset 0 1px 0 rgba(255,255,255,.2);
 }
 
@@ -1372,23 +1392,23 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 /* Status chips inside terminal */
-.term-status{ display:flex; flex-wrap:nowrap; gap:6px; align-items:center; padding:6px 8px; border-bottom:2px solid rgba(42,90,53,.4); background:linear-gradient(135deg, rgba(18,40,22,.7), rgba(12,28,17,.7)); }
+.term-status{ display:flex; flex-wrap:nowrap; gap:6px; align-items:center; padding:6px 8px; border-bottom:2px solid rgba(var(--btn-start-rgb),.4); background:linear-gradient(135deg, rgba(18,40,22,.7), rgba(12,28,17,.7)); }
 .term-status .status-chip{ padding:4px 8px; font-size:10px; white-space:nowrap; }
 
-.terminal-body{ flex:1; padding:12px; position:relative; overflow:auto; border:2px solid rgba(42,90,53,.6); border-radius:6px; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); background:linear-gradient(135deg,#0f2014,#0a1a0e 60%); }
+.terminal-body{ flex:1; padding:12px; position:relative; overflow:auto; border:2px solid rgba(var(--btn-start-rgb),.6); border-radius:6px; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); background:linear-gradient(135deg,var(--panel-2),#0a1a0e 60%); }
 #terminal{ 
   height:100%; width:100%; background:#0a1a0e; color:var(--ink);
   border:none; border-radius:4px;
   padding:0; overflow:hidden; box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
   font-family: 'Courier New', monospace; font-size:14px; line-height:1.4;
 }
-.panel-placeholder{ position:absolute; inset:12px; background:linear-gradient(135deg, rgba(24,54,29,.6), rgba(18,40,22,.6)); color:var(--muted); border:1px dashed rgba(42,90,53,.6); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--pixel-font); font-size:10px; letter-spacing:.6px; }
+.panel-placeholder{ position:absolute; inset:12px; background:linear-gradient(135deg, rgba(24,54,29,.6), rgba(18,40,22,.6)); color:var(--muted); border:1px dashed rgba(var(--btn-start-rgb),.6); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--pixel-font); font-size:10px; letter-spacing:.6px; }
 .token-value{ white-space:pre; }
 
 /* Analysis status row */
 .analysis-status{ display:flex; gap:12px; align-items:center; padding:10px 16px; height:auto; flex-shrink:0; }
-.status-chip{ padding:6px 12px; border:2px solid rgba(42,90,53,.8); background:linear-gradient(135deg, rgba(16,36,23,.95) 0%, rgba(12,28,17,.95) 100%); border-radius:4px; font-family:var(--pixel-font); font-size:10px; color:var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05); text-align: center; white-space: nowrap; box-sizing: border-box; }
-.status-chip.ok{ background:linear-gradient(135deg, #7cd26f 0%, #49a25c 100%); color:#0f1d12; border-color:#2e6f3e; box-shadow: 0 2px 8px rgba(124,210,111,.3), inset 0 1px 0 rgba(255,255,255,.2); }
+.status-chip{ padding:6px 12px; border:2px solid rgba(var(--btn-start-rgb),.8); background:linear-gradient(135deg, rgba(16,36,23,.95) 0%, rgba(12,28,17,.95) 100%); border-radius:4px; font-family:var(--pixel-font); font-size:10px; color:var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05); text-align: center; white-space: nowrap; box-sizing: border-box; }
+.status-chip.ok{ background:linear-gradient(135deg, var(--accent) 0%, #49a25c 100%); color:#0f1d12; border-color:#2e6f3e; box-shadow: 0 2px 8px rgba(var(--accent-rgb),.3), inset 0 1px 0 rgba(255,255,255,.2); }
 .status-chip.err{ background:linear-gradient(135deg, #ff8a5b 0%, #c95f36 100%); color:#2b0c06; border-color:#8c3b21; box-shadow: 0 2px 8px rgba(255,138,91,.3), inset 0 1px 0 rgba(255,255,255,.2); }
 
 /* Accessibility */
@@ -1396,16 +1416,16 @@ img, canvas{ image-rendering: pixelated; }
 
 /* HUD */
 .hud{ display:flex; align-items:center; gap:14px; }
-.coin-badge{ background:linear-gradient(135deg, #ffd36e 0%, #ffb800 100%); color:#3a271c; font-weight:800; padding:6px 12px; border-radius:6px; border:2px solid #f3a300; box-shadow: 0 3px 10px rgba(255,211,110,.4), inset 0 1px 0 rgba(255,231,169,.6); min-width:50px; text-align:center; font-family:var(--pixel-font); transition: transform .2s ease; }
+.coin-badge{ background:linear-gradient(135deg, #ffd36e 0%, #ffb800 100%); color:#3a271c; font-weight:800; padding:6px 12px; border-radius:6px; border:2px solid #f3a300; box-shadow: 0 3px 10px rgba(var(--accent-2-rgb),.4), inset 0 1px 0 rgba(255,231,169,.6); min-width:50px; text-align:center; font-family:var(--pixel-font); transition: transform .2s ease; }
 .coin-badge:hover{ transform: scale(1.05); }
 .energy-wrap{ display:flex; align-items:center; gap:10px; }
 .energy-bar{ width:170px; height:16px; background:#0a1a0e; border-radius:8px; padding:2px; border:2px solid #2d5d38; box-shadow: inset 0 2px 6px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2); }
-.energy-fill{ height:100%; background:linear-gradient(90deg, #7cd26f 0%, #b6ff85 100%); border-radius:6px; box-shadow:0 0 12px rgba(124,210,111,.6), inset 0 1px 0 rgba(255,255,255,.3); transition: width .3s ease; }
+.energy-fill{ height:100%; background:linear-gradient(90deg, var(--accent) 0%, #b6ff85 100%); border-radius:6px; box-shadow:0 0 12px rgba(var(--accent-rgb),.6), inset 0 1px 0 rgba(255,255,255,.3); transition: width .3s ease; }
 .energy-label{ color:var(--ink); font-weight:700; font-family:var(--pixel-font); font-size:12px; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
 
 
 /* Status Bar */
-.statusbar{ position:fixed; bottom:0; left:0; right:0; height:28px; background:linear-gradient(180deg, #15301e, #0f2014); border-top:3px solid #2a5a35; color:var(--ink); display:flex; align-items:center; justify-content:space-between; padding:0 12px; font-size:12px; }
+.statusbar{ position:fixed; bottom:0; left:0; right:0; height:28px; background:linear-gradient(180deg, #15301e, var(--panel-2)); border-top:3px solid var(--btn-start); color:var(--ink); display:flex; align-items:center; justify-content:space-between; padding:0 12px; font-size:12px; }
 .sb-left{ opacity:.85; }
 .sb-right{ opacity:.85; }
 
@@ -1415,8 +1435,8 @@ img, canvas{ image-rendering: pixelated; }
 .btn{ 
   border-radius:6px; 
   padding:12px 20px; 
-  border:2px solid rgba(42,90,53,.8); 
-  background:linear-gradient(135deg, #1a3a21 0%, #15301e 100%); 
+  border:2px solid rgba(var(--btn-start-rgb),.8); 
+  background:linear-gradient(135deg, var(--btn-end) 0%, #15301e 100%); 
   color:var(--ink); 
   font-weight:800; 
   cursor:pointer; 
@@ -1435,7 +1455,7 @@ img, canvas{ image-rendering: pixelated; }
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(124,210,111,.25), transparent);
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.25), transparent);
   transition: left .5s ease;
 }
 
@@ -1444,11 +1464,11 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .btn:hover{ 
-  background:linear-gradient(135deg, #224b2b 0%, #1a3a21 100%); 
+  background:linear-gradient(135deg, var(--btn-hover-end) 0%, var(--btn-end) 100%); 
   transform: translateY(-2px); 
   box-shadow: 0 6px 20px rgba(0,0,0,.4), 
               inset 0 1px 0 rgba(255,255,255,.12);
-  border-color: rgba(124,210,111,.7);
+  border-color: rgba(var(--accent-rgb),.7);
 }
 
 .btn:active{ 
@@ -1457,20 +1477,20 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .btn-primary{ 
-  background:linear-gradient(135deg, #2a5a35 0%, #1a3a21 100%); 
-  border-color:#1a3a21; 
-  color:#7cd26f; 
+  background:linear-gradient(135deg, var(--btn-start) 0%, var(--btn-end) 100%); 
+  border-color:var(--btn-end); 
+  color:var(--accent); 
   text-shadow:0 1px 2px rgba(0,0,0,.5);
   box-shadow: 0 4px 16px rgba(0,0,0,.4), 
-              inset 0 1px 0 rgba(124,210,111,.15);
+              inset 0 1px 0 rgba(var(--accent-rgb),.15);
   min-width: 140px;
   padding: 10px 32px;
 }
 
 .btn-primary:hover{ 
-  background:linear-gradient(135deg, #35744a 0%, #224b2b 100%);
+  background:linear-gradient(135deg, var(--btn-hover-start) 0%, var(--btn-hover-end) 100%);
   box-shadow: 0 6px 24px rgba(0,0,0,.5), 
-              inset 0 1px 0 rgba(124,210,111,.25);
+              inset 0 1px 0 rgba(var(--accent-rgb),.25);
   color:#8ee280;
 }
 
@@ -1487,24 +1507,24 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .btn-dropdown-toggle {
-  background: linear-gradient(135deg, #2a5a35 0%, #1a3a21 100%);
-  border: 2px solid #1a3a21;
-  border-left: 1px solid rgba(124,210,111,0.2);
+  background: linear-gradient(135deg, var(--btn-start) 0%, var(--btn-end) 100%);
+  border: 2px solid var(--btn-end);
+  border-left: 1px solid rgba(var(--accent-rgb),0.2);
   border-radius: 0 8px 8px 0;
-  color: #7cd26f;
+  color: var(--accent);
   font-family: 'Press Start 2P', monospace;
   font-size: 10px;
   padding: 10px 12px;
   cursor: pointer;
   text-shadow: 0 1px 2px rgba(0,0,0,.5);
-  box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(124,210,111,.15);
+  box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(var(--accent-rgb),.15);
   transition: all 0.2s ease;
 }
 
 .btn-dropdown-toggle:hover {
-  background: linear-gradient(135deg, #35744a 0%, #224b2b 100%);
+  background: linear-gradient(135deg, var(--btn-hover-start) 0%, var(--btn-hover-end) 100%);
   color: #8ee280;
-  box-shadow: 0 6px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(124,210,111,.25);
+  box-shadow: 0 6px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(var(--accent-rgb),.25);
 }
 
 .run-dropdown-menu {
@@ -1512,8 +1532,8 @@ img, canvas{ image-rendering: pixelated; }
   top: 100%;
   right: 0;
   margin-top: 8px;
-  background: linear-gradient(135deg, #2a5a35 0%, #1a3a21 100%);
-  border: 2px solid #1a3a21;
+  background: linear-gradient(135deg, var(--btn-start) 0%, var(--btn-end) 100%);
+  border: 2px solid var(--btn-end);
   border-radius: 8px;
   min-width: 160px;
   box-shadow: 0 8px 32px rgba(0,0,0,.6);
@@ -1527,12 +1547,12 @@ img, canvas{ image-rendering: pixelated; }
 
 .run-dropdown-item {
   padding: 12px 20px;
-  color: #7cd26f;
+  color: var(--accent);
   font-family: 'Press Start 2P', monospace;
   font-size: 10px;
   cursor: pointer;
   transition: all 0.2s ease;
-  border-bottom: 1px solid rgba(124,210,111,0.1);
+  border-bottom: 1px solid rgba(var(--accent-rgb),0.1);
 }
 
 .run-dropdown-item:last-child {
@@ -1540,7 +1560,7 @@ img, canvas{ image-rendering: pixelated; }
 }
 
 .run-dropdown-item:hover {
-  background: rgba(124,210,111,0.15);
+  background: rgba(var(--accent-rgb),0.15);
   color: #8ee280;
 }
 
@@ -1788,7 +1808,7 @@ img, canvas{ image-rendering: pixelated; }
   .run-dropdown-item {
     padding: 14px 16px;
     font-size: 10px;
-    -webkit-tap-highlight-color: rgba(124,210,111,0.3);
+    -webkit-tap-highlight-color: rgba(var(--accent-rgb),0.3);
     cursor: pointer;
   }
   
@@ -2091,27 +2111,27 @@ img, canvas{ image-rendering: pixelated; }
   gap: 4px;
   font-family: var(--pixel-font);
   font-size: 11px;
-  background: linear-gradient(135deg, #2a5a35 0%, #1a3a21 100%);
-  border: 2px solid rgba(42,90,53,.8);
+  background: linear-gradient(135deg, var(--btn-start) 0%, var(--btn-end) 100%);
+  border: 2px solid rgba(var(--btn-start-rgb),.8);
   border-radius: 5px;
   padding: 4px 18px;
   cursor: pointer;
   transition: all .3s ease;
-  box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(124,210,111,.15);
+  box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(var(--accent-rgb),.15);
   white-space: nowrap;
 }
 .btn-chat-toggle:hover {
-  background: linear-gradient(135deg, #35744a 0%, #224b2b 100%);
-  border-color: rgba(124,210,111,.7);
+  background: linear-gradient(135deg, var(--btn-hover-start) 0%, var(--btn-hover-end) 100%);
+  border-color: rgba(var(--accent-rgb),.7);
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(124,210,111,.25);
+  box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(var(--accent-rgb),.25);
 }
 .btn-chat-toggle:active {
   transform: translateY(0);
   box-shadow: 0 2px 8px rgba(0,0,0,.3);
 }
 .chat-btn-text {
-  color: #7cd26f;
+  color: var(--accent);
   font-size: 8px;
   font-weight: 800;
   text-shadow: 0 1px 2px rgba(0,0,0,.5);
@@ -2138,7 +2158,7 @@ img, canvas{ image-rendering: pixelated; }
   width: 420px;
   max-width: 100vw;
   background: var(--bg);
-  border-left: 1px solid rgba(124,210,111,.15);
+  border-left: 1px solid rgba(var(--accent-rgb),.15);
   box-shadow: -2px 0 16px rgba(0,0,0,.4);
   z-index: 999;
   display: flex;
@@ -2157,7 +2177,7 @@ img, canvas{ image-rendering: pixelated; }
   justify-content: space-between;
   padding: 12px 16px;
   background: linear-gradient(180deg, var(--panel) 0%, rgba(24,54,29,.95) 100%);
-  border-bottom: 1px solid rgba(124,210,111,.18);
+  border-bottom: 1px solid rgba(var(--accent-rgb),.18);
   flex-shrink: 0;
   min-height: 52px;
   box-sizing: border-box;
@@ -2199,9 +2219,9 @@ img, canvas{ image-rendering: pixelated; }
   transition: all .15s ease;
 }
 .chat-header-btn:hover {
-  background: rgba(124,210,111,.08);
+  background: rgba(var(--accent-rgb),.08);
   color: var(--ink);
-  border-color: rgba(124,210,111,.2);
+  border-color: rgba(var(--accent-rgb),.2);
 }
 
 /* Messages container — KEY: min-height:0 enables flex scroll */
@@ -2218,7 +2238,7 @@ img, canvas{ image-rendering: pixelated; }
 /* Individual message row */
 .chat-msg {
   padding: 12px 20px;
-  border-bottom: 1px solid rgba(124,210,111,.06);
+  border-bottom: 1px solid rgba(var(--accent-rgb),.06);
   display: flex;
   gap: 12px;
   align-items: flex-start;
@@ -2231,12 +2251,12 @@ img, canvas{ image-rendering: pixelated; }
   to { opacity: 1; transform: translateY(0); }
 }
 .chat-msg.user {
-  background: rgba(124,210,111,.08);
-  border-left: 3px solid rgba(124,210,111,.25);
+  background: rgba(var(--accent-rgb),.08);
+  border-left: 3px solid rgba(var(--accent-rgb),.25);
 }
 .chat-msg.assistant {
   background: rgba(13,27,15,.3);
-  border-left: 3px solid rgba(124,210,111,.08);
+  border-left: 3px solid rgba(var(--accent-rgb),.08);
 }
 
 /* Avatar icon */
@@ -2253,11 +2273,11 @@ img, canvas{ image-rendering: pixelated; }
   margin-top: 1px;
 }
 .chat-msg.user .chat-avatar {
-  background: rgba(255,211,110,.12);
+  background: rgba(var(--accent-2-rgb),.12);
   color: var(--accent-2);
 }
 .chat-msg.assistant .chat-avatar {
-  background: rgba(124,210,111,.18);
+  background: rgba(var(--accent-rgb),.18);
   color: var(--accent);
 }
 
@@ -2307,7 +2327,7 @@ img, canvas{ image-rendering: pixelated; }
   margin: 6px 0;
   border-radius: 8px;
   overflow: hidden;
-  border: 1px solid rgba(124,210,111,.12);
+  border: 1px solid rgba(var(--accent-rgb),.12);
   background: #0a140c;
 }
 .chat-bubble .code-block-header {
@@ -2315,8 +2335,8 @@ img, canvas{ image-rendering: pixelated; }
   align-items: center;
   justify-content: space-between;
   padding: 4px 10px;
-  background: rgba(124,210,111,.06);
-  border-bottom: 1px solid rgba(124,210,111,.08);
+  background: rgba(var(--accent-rgb),.06);
+  border-bottom: 1px solid rgba(var(--accent-rgb),.08);
   min-height: 26px;
 }
 .chat-bubble .code-block-lang {
@@ -2328,7 +2348,7 @@ img, canvas{ image-rendering: pixelated; }
 }
 .chat-copy-btn {
   background: transparent;
-  border: 1px solid rgba(124,210,111,.15);
+  border: 1px solid rgba(var(--accent-rgb),.15);
   border-radius: 4px;
   color: var(--muted);
   font-size: 10.5px;
@@ -2338,9 +2358,9 @@ img, canvas{ image-rendering: pixelated; }
   font-family: 'Baloo 2', sans-serif;
 }
 .chat-copy-btn:hover {
-  background: rgba(124,210,111,.12);
+  background: rgba(var(--accent-rgb),.12);
   color: var(--ink);
-  border-color: rgba(124,210,111,.3);
+  border-color: rgba(var(--accent-rgb),.3);
 }
 .chat-copy-btn.copied {
   color: var(--accent);
@@ -2355,7 +2375,7 @@ img, canvas{ image-rendering: pixelated; }
 }
 .chat-bubble pre {
   background: #0a140c;
-  border: 1px solid rgba(124,210,111,.12);
+  border: 1px solid rgba(var(--accent-rgb),.12);
   border-radius: 8px;
   padding: 10px 12px;
   margin: 6px 0;
@@ -2377,16 +2397,16 @@ img, canvas{ image-rendering: pixelated; }
   background: transparent;
 }
 .chat-bubble pre::-webkit-scrollbar-thumb {
-  background: rgba(124,210,111,.12);
+  background: rgba(var(--accent-rgb),.12);
   border-radius: 2px;
 }
 .chat-bubble pre::-webkit-scrollbar-thumb:hover {
-  background: rgba(124,210,111,.22);
+  background: rgba(var(--accent-rgb),.22);
 }
 .chat-bubble code {
   font-family: 'Consolas', 'Courier New', monospace;
   font-size: 12px;
-  background: rgba(124,210,111,.08);
+  background: rgba(var(--accent-rgb),.08);
   padding: 2px 5px;
   border-radius: 3px;
   color: var(--accent);
@@ -2437,8 +2457,8 @@ img, canvas{ image-rendering: pixelated; }
   font-weight: 400;
   line-height: 1.4;
 }
-.chat-tag.tag-syntax    { background: rgba(124,210,111,.12); color: var(--accent); border: 1px solid rgba(124,210,111,.2); }
-.chat-tag.tag-semantic  { background: rgba(255,211,110,.1);  color: var(--accent-2); border: 1px solid rgba(255,211,110,.2); }
+.chat-tag.tag-syntax    { background: rgba(var(--accent-rgb),.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.2); }
+.chat-tag.tag-semantic  { background: rgba(var(--accent-2-rgb),.1);  color: var(--accent-2); border: 1px solid rgba(var(--accent-2-rgb),.2); }
 .chat-tag.tag-code      { background: rgba(138,180,255,.1);  color: #8ab4ff; border: 1px solid rgba(138,180,255,.2); }
 .chat-tag.tag-fix       { background: rgba(255,138,91,.1);   color: var(--accent-3); border: 1px solid rgba(255,138,91,.2); }
 .chat-tag.tag-info      { background: rgba(166,195,169,.08); color: var(--muted); border: 1px solid rgba(166,195,169,.15); }
@@ -2450,14 +2470,14 @@ img, canvas{ image-rendering: pixelated; }
   flex-wrap: wrap;
   margin-top: 8px;
   padding-top: 8px;
-  border-top: 1px solid rgba(124,210,111,.06);
+  border-top: 1px solid rgba(var(--accent-rgb),.06);
 }
 .chat-action-btn {
   font-family: 'Baloo 2', sans-serif;
   font-size: 11px;
   color: var(--muted);
-  background: rgba(124,210,111,.04);
-  border: 1px solid rgba(124,210,111,.12);
+  background: rgba(var(--accent-rgb),.04);
+  border: 1px solid rgba(var(--accent-rgb),.12);
   border-radius: 6px;
   padding: 4px 10px;
   cursor: pointer;
@@ -2467,9 +2487,9 @@ img, canvas{ image-rendering: pixelated; }
   gap: 4px;
 }
 .chat-action-btn:hover {
-  background: rgba(124,210,111,.1);
+  background: rgba(var(--accent-rgb),.1);
   color: var(--ink);
-  border-color: rgba(124,210,111,.3);
+  border-color: rgba(var(--accent-rgb),.3);
 }
 .chat-action-btn .action-icon {
   font-size: 12px;
@@ -2480,6 +2500,7 @@ img, canvas{ image-rendering: pixelated; }
   display: flex;
   gap: 4px;
   padding: 4px 0;
+  align-items: center;
 }
 .chat-typing span {
   width: 6px;
@@ -2495,10 +2516,71 @@ img, canvas{ image-rendering: pixelated; }
   to { opacity: 1; transform: translateY(-3px); }
 }
 
+/* Thinking indicator — multi-phase */
+.chat-thinking {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 0;
+  max-width: 240px;
+}
+.chat-thinking-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--pixel-font);
+  font-size: 8px;
+  color: rgba(var(--accent-rgb), .8);
+  animation: thinkFadeIn .3s ease;
+}
+.chat-thinking-status .think-icon {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(var(--accent-rgb), .3);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: thinkSpin .8s linear infinite;
+  flex-shrink: 0;
+}
+.chat-thinking-status .think-text {
+  opacity: 1;
+  transition: opacity .3s ease;
+}
+.chat-thinking-status.fading .think-text {
+  opacity: 0;
+}
+.chat-thinking-progress {
+  height: 2px;
+  background: rgba(var(--accent-rgb), .1);
+  border-radius: 1px;
+  overflow: hidden;
+}
+.chat-thinking-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .4));
+  border-radius: 1px;
+  width: 0%;
+  animation: thinkProgress 2s ease-out forwards;
+}
+@keyframes thinkSpin {
+  to { transform: rotate(360deg); }
+}
+@keyframes thinkFadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes thinkProgress {
+  0% { width: 0%; }
+  30% { width: 45%; }
+  60% { width: 70%; }
+  90% { width: 85%; }
+  100% { width: 95%; }
+}
+
 /* Input area */
 .chat-input-area {
   padding: 12px 16px 14px;
-  border-top: 1px solid rgba(124,210,111,.15);
+  border-top: 1px solid rgba(var(--accent-rgb),.15);
   flex-shrink: 0;
   background: linear-gradient(0deg, var(--panel) 0%, rgba(24,54,29,.95) 100%);
 }
@@ -2527,14 +2609,14 @@ img, canvas{ image-rendering: pixelated; }
   display: flex;
   align-items: center;
   background: var(--bg);
-  border: 1px solid rgba(124,210,111,.2);
+  border: 1px solid rgba(var(--accent-rgb),.2);
   border-radius: 8px;
   transition: border-color .2s ease, box-shadow .2s ease;
   min-height: 38px;
 }
 .chat-input-wrap:focus-within {
   border-color: var(--accent);
-  box-shadow: 0 0 0 2px rgba(124,210,111,.12), 0 0 12px rgba(124,210,111,.08);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.12), 0 0 12px rgba(var(--accent-rgb),.08);
 }
 .chat-input-icon {
   padding-left: 10px;
@@ -2566,7 +2648,7 @@ img, canvas{ image-rendering: pixelated; }
   width: 38px;
   height: 38px;
   background: linear-gradient(135deg, #3a8f45, #2a6a32);
-  border: 1px solid rgba(124,210,111,.3);
+  border: 1px solid rgba(var(--accent-rgb),.3);
   border-radius: 8px;
   color: #fff;
   font-size: 13px;
@@ -2579,7 +2661,7 @@ img, canvas{ image-rendering: pixelated; }
 }
 .chat-send-btn:hover {
   background: linear-gradient(135deg, #4aaf55, #3a8f45);
-  box-shadow: 0 0 12px rgba(124,210,111,.25);
+  box-shadow: 0 0 12px rgba(var(--accent-rgb),.25);
   transform: translateY(-1px);
 }
 .chat-send-btn:disabled {
@@ -2597,11 +2679,11 @@ img, canvas{ image-rendering: pixelated; }
   background: transparent;
 }
 .chat-messages::-webkit-scrollbar-thumb {
-  background: rgba(124,210,111,.15);
+  background: rgba(var(--accent-rgb),.15);
   border-radius: 3px;
 }
 .chat-messages::-webkit-scrollbar-thumb:hover {
-  background: rgba(124,210,111,.3);
+  background: rgba(var(--accent-rgb),.3);
 }
 
 /* ── Empty state / Welcome ──────────────────────────── */
@@ -2629,7 +2711,7 @@ img, canvas{ image-rendering: pixelated; }
   height: 180px;
   object-fit: contain;
   image-rendering: pixelated;
-  filter: drop-shadow(0 0 8px rgba(124,210,111,.08));
+  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb),.08));
 }
 .chat-welcome-title {
   font-family: 'Baloo 2', sans-serif;
@@ -2655,8 +2737,8 @@ img, canvas{ image-rendering: pixelated; }
   font-family: 'Baloo 2', sans-serif;
   font-size: 11px;
   color: rgba(166,195,169,.7);
-  background: rgba(124,210,111,.04);
-  border: 1px solid rgba(124,210,111,.08);
+  background: rgba(var(--accent-rgb),.04);
+  border: 1px solid rgba(var(--accent-rgb),.08);
   border-radius: 20px;
   padding: 3px 10px;
   letter-spacing: .2px;
@@ -2674,8 +2756,8 @@ img, canvas{ image-rendering: pixelated; }
   font-family: 'Baloo 2', sans-serif;
   font-size: 12px;
   color: var(--accent);
-  background: rgba(124,210,111,.08);
-  border: 1px solid rgba(124,210,111,.25);
+  background: rgba(var(--accent-rgb),.08);
+  border: 1px solid rgba(var(--accent-rgb),.25);
   border-radius: 8px;
   padding: 7px 14px;
   cursor: pointer;
@@ -2685,9 +2767,9 @@ img, canvas{ image-rendering: pixelated; }
   letter-spacing: .1px;
 }
 .chat-chip:hover {
-  background: rgba(124,210,111,.18);
-  border-color: rgba(124,210,111,.5);
-  box-shadow: 0 2px 12px rgba(124,210,111,.15);
+  background: rgba(var(--accent-rgb),.18);
+  border-color: rgba(var(--accent-rgb),.5);
+  box-shadow: 0 2px 12px rgba(var(--accent-rgb),.15);
   transform: translateY(-1px);
   color: #fff;
 }