diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 000000000..63774b0f6
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,127 @@
+# Copilot Instructions — Adminer UI Modernization
+
+## Project Goal
+
+This project is a fork of Adminer. The goal is to modernize the user interface while preserving Adminer's existing behavior, database support, portability, and lightweight nature.
+
+The main objective is **UI modernization only**, not a full rewrite.
+
+Modernization should improve:
+
+- Visual design
+- Layout clarity
+- Spacing and typography
+- Tables
+- Forms
+- Buttons
+- Navigation
+- Login screen
+- Responsive behavior
+- Optional dark mode support
+
+The project must continue to behave like Adminer.
+
+---
+
+## Important Context
+
+Adminer is a legacy-style PHP application where PHP logic and HTML output are often mixed together.
+
+Because of this, UI changes must be made carefully. Some HTML elements are directly connected to form submission, routing, query parameters, session handling, database actions, and SQL execution.
+
+Do not assume markup is purely visual.
+
+---
+
+## Absolute Rules
+
+Copilot must follow these rules strictly:
+
+1. Do not rewrite the application architecture.
+2. Do not convert the project to React, Vue, Angular, Svelte, or any frontend SPA framework.
+3. Do not change database logic.
+4. Do not change SQL execution behavior.
+5. Do not change authentication, session, or permission logic.
+6. Do not rename existing form fields.
+7. Do not remove hidden inputs.
+8. Do not change form `method` or `action` attributes unless explicitly requested.
+9. Do not change existing query parameters or URL behavior.
+10. Do not change driver-specific database behavior.
+11. Do not remove accessibility-related attributes.
+12. Do not introduce large JavaScript dependencies.
+13. Do not make broad changes across many screens in one step.
+14. Do not optimize or refactor backend logic unless explicitly requested.
+15. Do not change behavior while modernizing UI.
+
+When uncertain, preserve the existing code behavior.
+
+---
+
+## Preferred Approach
+
+Use a safe, incremental approach.
+
+Priority order:
+
+1. CSS-first modernization
+2. Add wrapper classes around existing markup
+3. Improve spacing, typography, buttons, forms, and tables
+4. Refactor repeated UI output into small PHP helper functions only when safe
+5. Improve one screen at a time
+6. Avoid large-scale structural changes
+
+Prefer small, reviewable pull requests.
+
+---
+
+## UI Modernization Strategy
+
+Start by improving global UI styles before changing deep PHP logic.
+
+Recommended first areas:
+
+1. Login page
+2. Main layout shell
+3. Sidebar / navigation
+4. Header / top actions
+5. Table browsing screen
+6. Forms for insert/edit/update
+7. SQL command screen
+8. Export/import screens
+9. Messages, warnings, and error states
+10. Responsive layout improvements
+
+Each UI change should preserve existing behavior.
+
+---
+
+## Styling Guidelines
+
+Prefer modern plain CSS unless otherwise instructed.
+
+Use:
+
+- CSS variables
+- Consistent spacing scale
+- Consistent border radius
+- Modern typography
+- Clear focus states
+- Accessible color contrast
+- Responsive layout
+- Minimal JavaScript
+
+Example CSS direction:
+
+```css
+:root {
+  --color-bg: #f8fafc;
+  --color-surface: #ffffff;
+  --color-text: #0f172a;
+  --color-muted: #64748b;
+  --color-border: #e2e8f0;
+  --color-primary: #2563eb;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
+}
\ No newline at end of file
diff --git a/specs/00-architecture-overview.md b/specs/00-architecture-overview.md
new file mode 100644
index 000000000..1e6c492d1
--- /dev/null
+++ b/specs/00-architecture-overview.md
@@ -0,0 +1,140 @@
+# Adminer UI Architecture Overview
+
+## Purpose
+
+This document maps the files and functions responsible for generating HTML output in Adminer. It is the reference for all UI modernization work. **Do not change behavior — only change appearance.**
+
+---
+
+## Request Routing
+
+All requests enter through `adminer/index.php`, which dispatches to a specific `*.inc.php` page based on `$_GET` parameters.
+
+| `$_GET` key | File loaded | Screen |
+|---|---|---|
+| _(none)_ | `db.inc.php` | Database / table list |
+| `select` | `select.inc.php` | Browse table rows |
+| `edit` | `edit.inc.php` | Insert / edit row |
+| `table` | `table.inc.php` | Table structure |
+| `create` | `create.inc.php` | Alter/create table |
+| `indexes` | `indexes.inc.php` | Index management |
+| `sql` | `sql.inc.php` | SQL command |
+| `dump` | `dump.inc.php` | Export |
+| `privileges` | `privileges.inc.php` | User privileges |
+| `schema` | `schema.inc.php` | ER diagram |
+| `database` | `database.inc.php` | Alter database |
+| `call` / `callf` | `call.inc.php` | Stored procedure call |
+| `foreign` | `foreign.inc.php` | Foreign key editor |
+| `view` | `view.inc.php` | View editor |
+| `procedure` / `function` | `procedure.inc.php` | Routine editor |
+| `trigger` | `trigger.inc.php` | Trigger editor |
+| `event` | `event.inc.php` | Event editor |
+| `type` | `type.inc.php` | User-defined type editor |
+| `user` | `user.inc.php` | User management |
+| `processlist` | `processlist.inc.php` | Process list |
+| `variables` | `variables.inc.php` | Server variables |
+| `sequence` | `sequence.inc.php` | Sequence editor |
+| `check` | `check.inc.php` | Check constraint editor |
+
+Every page file calls `page_header()` at the top and relies on `page_footer()` being called at the bottom of `index.php`.
+
+---
+
+## HTML Shell — The Two Functions That Wrap Every Screen
+
+### `page_header()` — `adminer/include/design.inc.php`
+
+Outputs:
+- Full `<!DOCTYPE html>` preamble, `<head>`, CSS links, JS links
+- `<body>` opening with classes (`ltr`, `nojs`, `adminer`, etc.)
+- `<div id="content">` wrapper
+- `#menuopen` hamburger button (mobile only)
+- `<p id="breadcrumb">` navigation trail
+- `<h2>` page title
+- Flash / error message divs (`.message`, `.error`)
+
+### `page_footer()` — `adminer/include/design.inc.php`
+
+Outputs:
+- Closing `</div>` for `#content`
+- `<div id="foot">` containing:
+  - `<div id="menu">` — sidebar navigation (rendered by `navigation()`)
+  - Logout `<form>` with username display and `<input type="submit" name="logout">`
+
+---
+
+## CSS Files
+
+| File | Role |
+|---|---|
+| `adminer/static/default.css` | Main stylesheet (light mode + layout) |
+| `adminer/static/dark.css` | Dark mode overrides |
+| `externals/jush/jush.css` | Syntax highlight (light) |
+| `externals/jush/jush-dark.css` | Syntax highlight (dark) |
+| `adminer.css` / `adminer-dark.css` | Optional per-deployment custom CSS (loaded via `Adminer::css()`) |
+
+CSS is loaded from `Adminer::head()` and `page_header()`. The active color scheme is determined by `adminer()->css()` and whether `prefers-color-scheme: dark` is referenced in the custom CSS.
+
+---
+
+## JavaScript Files
+
+| File | Role |
+|---|---|
+| `adminer/static/functions.js` | Core utilities: DOM helpers (`qs`, `qsl`, `qsa`), `mixin`, `toggle`, `cookie`, AJAX helpers |
+| `adminer/static/editing.js` | Form behavior: file uploads, field change handlers, select-table click, inline edit |
+
+No large JS framework is used. All interactivity is hand-rolled vanilla JS.
+
+---
+
+## CSS Variable System (current)
+
+The existing stylesheet uses four CSS variables defined on `html {}`:
+
+```css
+--bg    /* page background */
+--fg    /* foreground text */
+--dim   /* dimmed surface (header, table headers, hover) */
+--lit   /* highlighted surface (breadcrumb, thead, focus target) */
+```
+
+These are minimal and must be kept. Modernization should expand this system with new variables without removing these four.
+
+---
+
+## Key HTML IDs and Classes (do not rename)
+
+These IDs and classes are referenced by PHP logic, existing JavaScript, or designs:
+
+| Selector | Used by |
+|---|---|
+| `#content` | Layout: main area offset from sidebar |
+| `#foot` | Layout: sidebar + footer container |
+| `#menu` | Navigation sidebar |
+| `#menuopen` | Mobile hamburger toggle |
+| `#breadcrumb` | Navigation breadcrumb |
+| `#logins` | Login session list in sidebar |
+| `#tables` | Table list in sidebar |
+| `#dbs` | Database list in sidebar |
+| `#help` | Inline SQL help popup |
+| `#ajaxstatus` | AJAX loading indicator |
+| `#logout` | Logout submit button |
+| `.message` | Success flash messages |
+| `.error` | Error messages |
+| `.hidden` | JS show/hide toggle |
+| `.jsonly` | Shown only when JS is active |
+| `.nojs` | Shown only without JS |
+| `.active` | Active nav item (bold) |
+| `.links` | Action link bar under headings |
+| `.nowrap` | Table with no-wrap cells |
+| `.checkable` | Selectable table rows |
+| `.checked` | Selected row highlight |
+| `.odds` | Alternating row colors |
+| `.scrollable` | Horizontally scrollable table wrapper |
+| `.footer` | Sticky bottom action bar in select |
+| `.icon` | Icon buttons (background-image based) |
+| `.function` | Right-aligned function select cell in edit form |
+| `.sqlarea` | Full-width SQL textarea |
+| `.layout` | Login form table |
+| `form#form` | Main select/search form |
diff --git a/specs/01-css-design-system.md b/specs/01-css-design-system.md
new file mode 100644
index 000000000..017279ffb
--- /dev/null
+++ b/specs/01-css-design-system.md
@@ -0,0 +1,178 @@
+# Spec: CSS Design System
+
+**Priority:** 1 (must be done before all other UI tasks)  
+**Risk:** Low — CSS-only, no PHP changes  
+**Screen:** Global
+
+---
+
+## Goal
+
+Replace the minimal 4-variable CSS system with a full design token system using CSS custom properties. All subsequent UI tasks will reference these tokens.
+
+---
+
+## Current State
+
+`adminer/static/default.css` defines only four variables on `html {}`:
+
+```css
+html {
+    --bg: #fff;
+    --fg: #000;
+    --dim: #eee;
+    --lit: #ddf;
+}
+```
+
+The dark theme overrides these same four in `adminer/static/dark.css`.
+
+Typography is set on `body`:
+```css
+body { font: 90%/1.25 Verdana, Arial, Helvetica, sans-serif; }
+```
+
+Spacing, radius, shadow, and color are all hard-coded throughout the stylesheet.
+
+---
+
+## Tasks
+
+### TASK-CSS-01: Define expanded CSS variable set on `html {}`
+
+Add to `adminer/static/default.css`, expanding the existing `html {}` block:
+
+```css
+html {
+    /* Existing — keep these */
+    --bg: #fff;
+    --fg: #000;
+    --dim: #f1f5f9;
+    --lit: #e0e7ff;
+
+    /* Surfaces */
+    --color-surface: #ffffff;
+    --color-surface-raised: #f8fafc;
+    --color-border: #e2e8f0;
+
+    /* Text */
+    --color-text: #0f172a;
+    --color-muted: #64748b;
+
+    /* Brand / primary */
+    --color-primary: #2563eb;
+    --color-primary-hover: #1d4ed8;
+
+    /* Status */
+    --color-success-bg: #f0fdf4;
+    --color-success-text: #166534;
+    --color-success-border: #bbf7d0;
+    --color-error-bg: #fef2f2;
+    --color-error-text: #991b1b;
+    --color-error-border: #fecaca;
+
+    /* Spacing scale */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+
+    /* Border radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+
+    /* Shadow */
+    --shadow-sm: 0 1px 3px rgba(15,23,42,0.08);
+    --shadow-md: 0 4px 12px rgba(15,23,42,0.12);
+
+    /* Typography */
+    --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
+    --font-size-base: 14px;
+    --line-height: 1.5;
+}
+```
+
+**Preserve:** Keep `--bg`, `--fg`, `--dim`, `--lit` so existing designs and dark.css still work.
+
+---
+
+### TASK-CSS-02: Update `body {}` typography
+
+Replace:
+```css
+body { color: var(--fg); background: var(--bg); font: 90%/1.25 Verdana, Arial, Helvetica, sans-serif; ... }
+```
+
+With:
+```css
+body {
+    color: var(--color-text);
+    background: var(--bg);
+    font-family: var(--font-body);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height);
+    margin: 0;
+    min-width: fit-content;
+}
+```
+
+---
+
+### TASK-CSS-03: Update `dark.css` dark token overrides
+
+Add dark-mode equivalents of all new tokens to `adminer/static/dark.css`:
+
+```css
+html {
+    /* Existing */
+    --bg: #002240;
+    --fg: #829bb0;
+    --dim: #154269;
+    --lit: #011d35;
+
+    /* New tokens — dark overrides */
+    --color-surface: #011d35;
+    --color-surface-raised: #0c2d4a;
+    --color-border: #1a4570;
+    --color-text: #c8d8e8;
+    --color-muted: #5e8ab0;
+    --color-primary: #3b82f6;
+    --color-primary-hover: #60a5fa;
+    --color-success-bg: #052e16;
+    --color-success-text: #86efac;
+    --color-success-border: #166534;
+    --color-error-bg: #450a0a;
+    --color-error-text: #fca5a5;
+    --color-error-border: #991b1b;
+}
+```
+
+---
+
+### TASK-CSS-04: Migrate hard-coded color values to tokens
+
+Audit `default.css` and replace hard-coded colors with the new tokens where safe. Target:
+
+- `#999` border colors → `var(--color-border)`
+- `color: red` on errors → `var(--color-error-text)`
+- `background: #fee` on errors → `var(--color-error-bg)`
+- `color: green` on messages → `var(--color-success-text)`
+- `background: #efe` on messages → `var(--color-success-bg)`
+- `color: #777` muted text → `var(--color-muted)`
+
+**Do not** replace colors that are part of syntax highlighting (`.char`, `.date`, `.enum`, `.binary`).
+
+---
+
+## Acceptance Criteria
+
+- [ ] All new variables defined on `html {}`
+- [ ] Dark overrides defined in `dark.css`
+- [ ] Existing designs still render (they override `--bg`, `--fg`, `--dim`, `--lit`)
+- [ ] No behavior changes
+- [ ] `Adminer::css()` return value unchanged
+- [ ] No PHP files modified
diff --git a/specs/02-login-screen.md b/specs/02-login-screen.md
new file mode 100644
index 000000000..a142ba4f3
--- /dev/null
+++ b/specs/02-login-screen.md
@@ -0,0 +1,216 @@
+# Spec: Login Screen
+
+**Priority:** 2  
+**Risk:** Low — CSS wrapper only, no PHP form field changes  
+**Screen:** Login page (no `db` or `username` in URL)  
+**PHP entry:** `adminer/include/connect.inc.php` → `Adminer::loginForm()` in `adminer/include/adminer.inc.php`
+
+---
+
+## Goal
+
+Modernize the login screen layout. Present a clean centered card with clear field labels, a styled submit button, and the Adminer logo/name at the top.
+
+---
+
+## Current State
+
+The login form is rendered by `Adminer::loginForm()`:
+
+```php
+function loginForm(): void {
+    echo "<table class='layout'>\n";
+    // rows: driver, server, username, password, db
+    echo "</table>\n";
+    echo "<p><input type='submit' value='" . lang('Login') . "'>\n";
+    echo checkbox("auth[permanent]", 1, ..., lang('Permanent login')) . "\n";
+}
+```
+
+The outer form is wrapped in a `<form method="post">` in `connect.inc.php`. The `page_header()` function still renders the breadcrumb and `#content` wrapper.
+
+The login form fields use `name="auth[driver]"`, `name="auth[server]"`, `name="auth[username]"`, `name="auth[password]"`, `name="auth[db]"`. These names must not change.
+
+---
+
+## Current HTML structure
+
+```html
+<div id="content">
+  <!-- breadcrumb, h2 omitted on login -->
+  <form method="post">
+    <table class="layout">
+      <tr><th>System<td><select name="auth[driver]">...</select>
+      <tr><th>Server<td><input name="auth[server]">
+      <tr><th>Username<td><input name="auth[username]">
+      <tr><th>Password<td><input type="password" name="auth[password]">
+      <tr><th>Database<td><input name="auth[db]">
+    </table>
+    <p><input type="submit" value="Login">
+    <label><input type="checkbox" name="auth[permanent]">Permanent login</label>
+  </form>
+</div>
+```
+
+The `#foot` / `#menu` sidebar still appears for the session list.
+
+---
+
+## Tasks
+
+### TASK-LOGIN-01: Center the login card
+
+Add CSS for the login screen only. The `<body>` gains class `adminer` (from `Adminer::bodyClass()`). The login page does not have a DB selected, so the `#content` margin-left should be overridden.
+
+```css
+/* Login page: no sidebar needed, center the form */
+body.adminer:not(.js) #content,
+body.adminer.js #content {
+    /* override sidebar offset for login screens */
+}
+```
+
+**Better approach:** Target the absence of logged-in state. When `page_header()` is called from `connect.inc.php`, breadcrumb is `null` (missing="auth"). Add a CSS class `no-db` or `login-page` to `<body>` via `Adminer::bodyClass()` override — but since that would require a PHP change, use the existing `<body>` class approach.
+
+The current body classes on login are: `ltr nojs adminer` (or `ltr js adminer` after JS runs). Use an approach that does not require PHP changes:
+
+```css
+/* When #menu contains #logins (login page), center #content */
+/* CSS cannot select parent — use layout approach instead */
+
+/* Override: if #content has no content except the login form,
+   the sidebar (#foot) is still positioned absolute/fixed at left.
+   Push #content to center when sidebar is narrow. */
+```
+
+**Recommended approach without PHP changes:** Target `table.layout` which only appears on the login screen:
+
+```css
+/* Login form card */
+table.layout {
+    display: block;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    padding: var(--space-6);
+    margin: var(--space-6) auto;
+    max-width: 380px;
+    border-spacing: 0;
+}
+
+table.layout tr {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--space-4);
+}
+
+table.layout th {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 0 0 var(--space-1) 0;
+    border: none;
+    background: none;
+}
+
+table.layout td {
+    padding: 0;
+    border: none;
+}
+
+table.layout input,
+table.layout select {
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-base);
+    background: var(--color-surface);
+    color: var(--color-text);
+    box-sizing: border-box;
+}
+
+table.layout input:focus,
+table.layout select:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -1px;
+}
+```
+
+---
+
+### TASK-LOGIN-02: Style the Login button
+
+The submit button is a plain `<input type='submit'>`. Style all submit buttons globally (see TASK-BTN-01), and additionally ensure the login submit has full-width display on the login screen:
+
+```css
+table.layout + p > input[type="submit"] {
+    width: 100%;
+    margin-top: var(--space-2);
+}
+```
+
+---
+
+### TASK-LOGIN-03: Style the Permanent login checkbox
+
+```css
+table.layout ~ label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: var(--space-3);
+    font-size: 13px;
+    color: var(--color-muted);
+    cursor: pointer;
+}
+```
+
+---
+
+### TASK-LOGIN-04: Improve the sidebar login session list
+
+The `#logins` `<ul>` in the sidebar shows existing sessions. Modernize list item appearance:
+
+```css
+#logins {
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border);
+}
+
+#logins li {
+    list-style: none;
+    padding: var(--space-1) 0;
+}
+
+#logins a {
+    display: block;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    font-size: 13px;
+    transition: background 0.15s;
+}
+
+#logins a:hover {
+    background: var(--color-surface-raised);
+    text-decoration: none;
+    color: var(--color-primary);
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] Login form renders as a centered card on wide screens
+- [ ] All five `auth[*]` inputs are present and functional
+- [ ] `name="logout"` submit button unchanged
+- [ ] Permanent login checkbox still submits `auth[permanent]` value
+- [ ] Form `method="post"` and `action=""` unchanged
+- [ ] Hidden token input (`name="token"`) still present
+- [ ] No PHP files modified
+- [ ] Mobile layout still works (stacked)
diff --git a/specs/03-layout-shell.md b/specs/03-layout-shell.md
new file mode 100644
index 000000000..fa9222a7e
--- /dev/null
+++ b/specs/03-layout-shell.md
@@ -0,0 +1,277 @@
+# Spec: Global Layout Shell
+
+**Priority:** 3  
+**Risk:** Medium — touches layout structure used by every page  
+**Screen:** All screens (post-login)  
+**PHP source:** `adminer/include/design.inc.php` — `page_header()`, `page_footer()`
+
+---
+
+## Goal
+
+Modernize the overall page chrome: header bar, sidebar, breadcrumb, and the main content area. Improve spacing, typography, and visual hierarchy without changing any IDs, form fields, or URL parameters.
+
+---
+
+## Current Layout Structure
+
+```
+<body class="ltr js adminer">
+
+  <!-- Hamburger (mobile only) -->
+  <span id="menuopen" class="jsonly">...</span>
+
+  <div id="content">
+    <p id="breadcrumb">...</p>
+    <h2>Page Title</h2>
+    <div id="ajaxstatus" class="jsonly hidden"></div>
+    <!-- flash messages: .message / .error -->
+    <!-- PAGE CONTENT -->
+  </div>
+
+  <div id="foot" class="foot">
+    <div id="menu">
+      <h1>  ← Adminer logo + version
+      <ul id="logins"> or <ul id="tables">
+      <p class="links"> ← SQL, Import, Export, Create table
+      ...
+    </div>
+
+    <form action="" method="post">
+      <p class="logout">
+        <span>username</span>
+        <input type="submit" name="logout" value="Logout">
+        <input type="hidden" name="token" ...>
+      </p>
+    </form>
+  </div>
+
+</body>
+```
+
+### Current CSS metrics
+
+- Sidebar (`#menu`): `position: absolute; left: 0; width: 19em; top: 2em`
+- Content (`#content`): `margin: 2em 0 0 21em; padding: 10px 20px 20px 0`
+- Breadcrumb (`#breadcrumb`): `position: absolute; top: 0; left: 21em; height: 2em`
+- Logo (`h1`): `padding: .8em .667em; border-bottom: 1px solid #999`
+- Body font: Verdana 90% / 1.25
+
+---
+
+## Tasks
+
+### TASK-LAYOUT-01: Sidebar visual refresh
+
+Modernize `#menu` appearance. The sidebar position and width must not change (existing designs depend on the `19em` metric; the JS hamburger relies on `#foot`/`.foot` toggle).
+
+```css
+#menu {
+    position: absolute;
+    margin: 0;
+    top: 0;
+    left: 0;
+    width: 19em;
+    height: 100%;
+    background: var(--color-surface);
+    border-right: 1px solid var(--color-border);
+    box-shadow: var(--shadow-sm);
+    overflow-y: auto;
+}
+
+#menu p,
+#logins,
+#tables {
+    padding: var(--space-3) var(--space-4);
+    margin: 0;
+    border-bottom: 1px solid var(--color-border);
+}
+```
+
+---
+
+### TASK-LAYOUT-02: Header / logo area
+
+`h1` inside `#menu` renders the Adminer logo and version. It is output by `Adminer::navigation()`. CSS-only change:
+
+```css
+#menu h1 {
+    font-size: 16px;
+    margin: 0;
+    padding: var(--space-4) var(--space-4) var(--space-3);
+    border-bottom: 1px solid var(--color-border);
+    font-weight: 600;
+    color: var(--color-text);
+    background: var(--color-surface-raised);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+#h1 {
+    color: var(--color-text);
+    text-decoration: none;
+    font-style: normal;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+#logo {
+    width: 24px;
+    height: 24px;
+    vertical-align: middle;
+}
+
+.version {
+    color: var(--color-muted);
+    font-size: 11px;
+    font-weight: normal;
+    margin-left: auto;
+}
+```
+
+---
+
+### TASK-LAYOUT-03: Breadcrumb bar
+
+`#breadcrumb` is positioned `absolute; top: 0; left: 21em`. Keep positioning, modernize appearance:
+
+```css
+#breadcrumb {
+    white-space: nowrap;
+    position: absolute;
+    top: 0;
+    left: 21em;
+    background: var(--color-surface-raised);
+    border-bottom: 1px solid var(--color-border);
+    height: 2.5em;
+    line-height: 2.5em;
+    padding: 0 var(--space-5);
+    margin: 0;
+    font-size: 13px;
+    color: var(--color-muted);
+}
+
+#breadcrumb a {
+    color: var(--color-muted);
+    text-decoration: none;
+}
+
+#breadcrumb a:hover {
+    color: var(--color-primary);
+}
+```
+
+---
+
+### TASK-LAYOUT-04: Content area spacing
+
+```css
+#content {
+    margin: 2.5em 0 0 21em;
+    padding: var(--space-5) var(--space-6) var(--space-6) var(--space-5);
+}
+```
+
+---
+
+### TASK-LAYOUT-05: Page title (`h2`)
+
+```css
+h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0 0 var(--space-5) 0;
+    padding: 0 0 var(--space-4) 0;
+    border-bottom: 1px solid var(--color-border);
+    color: var(--color-text);
+    background: none;
+}
+```
+
+**Note:** Current `h2` has `margin: 0 0 20px -18px` and `background: var(--lit)`. The negative margin and colored background must be removed carefully — confirm no existing designs target these specific values before removing.
+
+---
+
+### TASK-LAYOUT-06: Flash messages (`.message`, `.error`)
+
+```css
+.message {
+    padding: var(--space-3) var(--space-4);
+    margin: 0 0 var(--space-4);
+    background: var(--color-success-bg);
+    color: var(--color-success-text);
+    border: 1px solid var(--color-success-border);
+    border-radius: var(--radius-sm);
+    font-size: 14px;
+}
+
+.error {
+    padding: var(--space-3) var(--space-4);
+    margin: 0 0 var(--space-4);
+    background: var(--color-error-bg);
+    color: var(--color-error-text);
+    border: 1px solid var(--color-error-border);
+    border-radius: var(--radius-sm);
+    font-size: 14px;
+}
+```
+
+---
+
+### TASK-LAYOUT-07: Logout area
+
+The logout form is inside `#foot`, positioned `absolute; top: 0; right: 0`. Keep positioning, style:
+
+```css
+.logout {
+    margin: 0;
+    padding: var(--space-2) var(--space-4);
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: var(--color-surface-raised);
+    border-left: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    border-radius: 0 0 0 var(--radius-sm);
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    font-size: 13px;
+}
+
+.logout span {
+    color: var(--color-muted);
+}
+```
+
+---
+
+### TASK-LAYOUT-08: Mobile layout (≤800px)
+
+The existing `@media all and (max-width: 800px)` block handles the sidebar collapsing. Keep all existing rules. Modernize only appearance:
+
+```css
+@media all and (max-width: 800px) {
+    /* Keep existing layout rules unchanged */
+    /* Add only visual improvements: */
+    #menu {
+        box-shadow: var(--shadow-md);
+    }
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] `#menu` ID retained, width remains ~19em
+- [ ] `#foot` class toggle for mobile still works
+- [ ] `#menuopen` hamburger still visible on mobile
+- [ ] `#breadcrumb` position preserved (top, left: 21em)
+- [ ] `name="logout"` submit button present
+- [ ] `name="token"` hidden input present in logout form
+- [ ] RTL styles (`.rtl`) not broken
+- [ ] Print styles not broken
+- [ ] No PHP files modified
diff --git a/specs/04-sidebar-navigation.md b/specs/04-sidebar-navigation.md
new file mode 100644
index 000000000..d65595a55
--- /dev/null
+++ b/specs/04-sidebar-navigation.md
@@ -0,0 +1,223 @@
+# Spec: Sidebar Navigation
+
+**Priority:** 4  
+**Risk:** Medium — sidebar JS interactions must be preserved  
+**Screen:** All post-login screens  
+**PHP source:** `Adminer::navigation()`, `Adminer::tablesPrint()`, `Adminer::databasesPrint()` in `adminer/include/adminer.inc.php`
+
+---
+
+## Goal
+
+Improve readability and visual hierarchy of the left sidebar: the table list (`#tables`), database list (`#dbs`), and action links (`p.links`).
+
+---
+
+## Current Structure (inside `#menu`)
+
+```html
+<h1>  ← logo + version (TASK-LAYOUT-02 handles this)
+
+<!-- Login page: session list -->
+<ul id="logins">
+  <li><a href="...">...</a>
+  ...
+</ul>
+
+<!-- Post-login: database list -->
+<div id="dbs">
+  ...
+</div>
+
+<!-- Post-login: action links -->
+<p class="links">
+  <a href="?...sql=">SQL command</a>
+  <a href="?...import=">Import</a>
+  <a href="?...dump=...">Export</a>
+  <a href="?...create=">Create table</a>
+</p>
+
+<!-- Table list -->
+<ul id="tables">
+  <li><a href="?...select=tablename">tablename</a>
+  ...
+</ul>
+```
+
+**Important:** `#tables` uses JS events: `onmouseover: menuOver, onmouseout: menuOut` (from `functions.js`). The table name `<a>` elements are wrapped by JS for hover menus. Do not change the `<ul>` / `<li>` / `<a>` structure.
+
+`#dbs` is also populated dynamically by AJAX (`functions.js: fillDbs()`). Structure must be preserved.
+
+---
+
+## Current CSS for nav
+
+```css
+#menu { position: absolute; margin: 10px 0 0; top: 2em; left: 0; width: 19em; }
+#menu p, #logins, #tables { padding: .8em 1em; margin: 0; border-bottom: 1px solid #ccc; }
+#logins li, #tables li { list-style: none; }
+#dbs { overflow: hidden; }
+#logins, #tables { white-space: nowrap; overflow: hidden; }
+#logins a, #tables a, #tables span { background: var(--bg); }
+.active { font-weight: bold; }
+```
+
+---
+
+## Tasks
+
+### TASK-NAV-01: Table list items
+
+Modernize list item styles. Do not change HTML structure.
+
+```css
+#tables {
+    white-space: nowrap;
+    overflow: hidden;
+    padding: var(--space-2) 0;
+    margin: 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+#tables li {
+    list-style: none;
+}
+
+#tables a,
+#tables span {
+    display: block;
+    padding: var(--space-1) var(--space-4);
+    font-size: 13px;
+    color: var(--color-text);
+    text-decoration: none;
+    background: var(--color-surface); /* keep for JS column overlay */
+    border-radius: 0;
+    transition: background 0.1s;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#tables a:hover {
+    background: var(--color-surface-raised);
+    color: var(--color-primary);
+    text-decoration: none;
+}
+
+#tables .active {
+    font-weight: 600;
+    color: var(--color-primary);
+    background: var(--lit);
+}
+```
+
+---
+
+### TASK-NAV-02: Sidebar action links
+
+The `<p class="links">` inside `#menu` contains SQL command / Import / Export / Create table links.
+
+```css
+#menu .links {
+    padding: var(--space-3) var(--space-4);
+    margin: 0;
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+#menu .links a {
+    display: block;
+    padding: var(--space-2) var(--space-3);
+    font-size: 13px;
+    color: var(--color-text);
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    transition: background 0.1s;
+    white-space: nowrap;
+}
+
+#menu .links a:hover {
+    background: var(--color-surface-raised);
+    color: var(--color-primary);
+}
+
+#menu .links a.active {
+    font-weight: 600;
+    color: var(--color-primary);
+    background: var(--lit);
+}
+```
+
+**Note:** The `bold()` PHP function adds `class='active'` to the current page's link. This relies on the class name `active` — do not rename it.
+
+---
+
+### TASK-NAV-03: Database list (`#dbs`)
+
+`#dbs` is populated by `databasesPrint()`. Its inner structure varies by driver. Apply conservative styling only:
+
+```css
+#dbs {
+    overflow: hidden;
+    padding: var(--space-2) 0;
+    border-bottom: 1px solid var(--color-border);
+    font-size: 13px;
+}
+```
+
+---
+
+### TASK-NAV-04: Language switcher (`#lang`)
+
+```css
+#lang {
+    position: absolute;
+    top: -2.6em;
+    left: 0;
+    padding: var(--space-1) var(--space-3);
+    font-size: 12px;
+}
+
+#lang select {
+    font-size: 12px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-surface);
+    color: var(--color-text);
+    padding: 2px var(--space-2);
+}
+```
+
+---
+
+### TASK-NAV-05: Mobile hamburger button (`#menuopen`)
+
+```css
+#menuopen {
+    display: none; /* shown by media query */
+    position: absolute;
+    top: 3px;
+    left: 6px;
+    cursor: pointer;
+    padding: var(--space-2);
+    border-radius: var(--radius-sm);
+    transition: background 0.15s;
+}
+
+#menuopen:hover {
+    background: var(--color-surface-raised);
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] `#tables` `<ul>`/`<li>`/`<a>` structure unchanged
+- [ ] `#dbs` structure unchanged
+- [ ] JS mouse hover menus still function (`.column` absolute overlay)
+- [ ] `.active` class still produces visual active state
+- [ ] Mobile sidebar toggle (`#foot` / `.foot` CSS class swap) still works
+- [ ] No PHP files modified
diff --git a/specs/05-buttons-controls.md b/specs/05-buttons-controls.md
new file mode 100644
index 000000000..60d46e02d
--- /dev/null
+++ b/specs/05-buttons-controls.md
@@ -0,0 +1,223 @@
+# Spec: Buttons & Interactive Controls
+
+**Priority:** 5  
+**Risk:** Low — pure CSS, no HTML or PHP changes  
+**Screen:** All screens  
+**PHP source:** Submit buttons rendered inline in all `*.inc.php` files; icons via `icon()` helper
+
+---
+
+## Goal
+
+Establish a consistent, modern button and control style across all screens. All buttons remain `<input type="submit">` or `<button>` elements — no HTML changes are needed.
+
+---
+
+## Current State
+
+Buttons are completely unstyled — they use the browser default appearance. Icon buttons (`.icon`) are 18×18px elements with `background-image` (base64 GIF).
+
+```css
+/* Existing button-related rules */
+input.default { box-shadow: 1px 1px 1px #777; }
+input.required, input.maxlength { box-shadow: 1px 1px 1px red; }
+.icon { width: 18px; height: 18px; background: navy center no-repeat; border: 0; padding: 0; vertical-align: middle; }
+.icon span { display: none; }
+.icon:hover { background-color: red; }
+```
+
+---
+
+## Tasks
+
+### TASK-BTN-01: Primary submit button
+
+Style all `<input type="submit">` as modern buttons:
+
+```css
+input[type="submit"],
+button[type="submit"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2) var(--space-5);
+    background: var(--color-primary);
+    color: #fff;
+    border: 1px solid var(--color-primary);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-base);
+    font-family: var(--font-body);
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+    white-space: nowrap;
+}
+
+input[type="submit"]:hover,
+button[type="submit"]:hover {
+    background: var(--color-primary-hover);
+    border-color: var(--color-primary-hover);
+}
+
+input[type="submit"]:focus-visible,
+button[type="submit"]:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+/* Keep .default highlight for the primary save action */
+input.default {
+    box-shadow: none;
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+```
+
+---
+
+### TASK-BTN-02: Danger / destructive button variants
+
+Some submit buttons perform destructive actions (Drop, Truncate, Delete). PHP renders these as regular `<input type="submit" name="drop">` etc. We cannot add classes in PHP without editing PHP files. Use attribute selectors where possible, or accept uniform styling for now.
+
+If a PHP change is acceptable for one file: `edit.inc.php` renders `<input type="submit" name="delete" value="Delete">`. Adding `class="danger"` to that one input is a minimal, safe PHP edit.
+
+```css
+/* If class added via PHP: */
+input.danger {
+    background: var(--color-error-text);
+    border-color: var(--color-error-text);
+    color: #fff;
+}
+
+input.danger:hover {
+    background: #7f1d1d;
+    border-color: #7f1d1d;
+}
+```
+
+**Decision required:** Whether to make minimal PHP changes to add classes. See `edit.inc.php` line that renders delete button.
+
+---
+
+### TASK-BTN-03: Secondary / neutral buttons
+
+Some buttons are not primary (e.g., "Clone", "Cancel"-like actions). For now, use a secondary style for `<input type="button">` and `<a>` links styled as buttons:
+
+```css
+input[type="button"] {
+    padding: var(--space-2) var(--space-4);
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-base);
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+input[type="button"]:hover {
+    background: var(--color-surface-raised);
+}
+```
+
+---
+
+### TASK-BTN-04: Icon buttons (`.icon`)
+
+Icon buttons are `<input type="image">` or `<button>` with class `icon`. They use base64 GIF background images. Keep the image; modernize the container:
+
+```css
+.icon {
+    width: 22px;
+    height: 22px;
+    background-color: transparent;
+    background-size: 14px 14px;
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border-radius: var(--radius-sm);
+    padding: 0;
+    cursor: pointer;
+    vertical-align: middle;
+    transition: background-color 0.15s;
+}
+
+.icon:hover {
+    background-color: var(--color-surface-raised);
+}
+
+/* Dark mode icon inversion is already handled by dark.css: filter: invert(1) */
+```
+
+---
+
+### TASK-BTN-05: Form action bar (`.footer`)
+
+The sticky footer fieldset area on the select/browse screen uses class `.footer`. Modernize:
+
+```css
+.footer {
+    position: sticky;
+    bottom: 0;
+    margin: var(--space-6) calc(-1 * var(--space-5)) 0;
+    box-shadow: 0 -2px 8px rgba(15,23,42,0.08);
+}
+
+.footer > div {
+    background: var(--color-surface);
+    padding: var(--space-3) var(--space-5);
+    border-top: 1px solid var(--color-border);
+}
+```
+
+---
+
+### TASK-BTN-06: Text inputs and selects (global)
+
+```css
+input[type="text"],
+input[type="number"],
+input[type="search"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+select,
+textarea {
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-base);
+    font-family: var(--font-body);
+    background: var(--color-surface);
+    color: var(--color-text);
+    box-sizing: border-box;
+    transition: border-color 0.15s, outline 0.15s;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -1px;
+    border-color: var(--color-primary);
+}
+
+/* Keep validation states */
+input.required,
+input.maxlength {
+    border-color: var(--color-error-text);
+    box-shadow: none;
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] All submit buttons visible and clickable
+- [ ] `input.default` still visually highlighted as primary action
+- [ ] `input.required` / `input.maxlength` error states preserved
+- [ ] Icon buttons (`.icon`) still show correct background images
+- [ ] Dark mode icon filter still applied
+- [ ] No `name`, `value`, `type`, `action`, `method` attributes changed
+- [ ] No PHP files modified (except optional TASK-BTN-02 PHP change)
diff --git a/specs/06-data-tables.md b/specs/06-data-tables.md
new file mode 100644
index 000000000..cb3dfda0a
--- /dev/null
+++ b/specs/06-data-tables.md
@@ -0,0 +1,249 @@
+# Spec: Data Tables (Browse / Select Screen)
+
+**Priority:** 6  
+**Risk:** Medium — table JS interactions (inline edit, row selection) must be preserved  
+**Screen:** `select.inc.php` (Browse table rows), `db.inc.php` (table list), `table.inc.php` (structure), `variables.inc.php`, `processlist.inc.php`  
+**PHP source:** `Adminer::tableStructurePrint()`, `Adminer::tableIndexesPrint()`, `Adminer::selectVal()` in `adminer/include/adminer.inc.php`; main select table in `select.inc.php`
+
+---
+
+## Goal
+
+Make data tables cleaner, more readable, and more scannable. Improve row spacing, header styling, and selected/hover states. Preserve all JS-driven interaction.
+
+---
+
+## Current State
+
+```css
+table { margin: 1em 20px 0 0; font-size: 90%; border-spacing: 0; border-width: 1px 0 0 1px; }
+table, td, th, .js .column { border-color: #999; border-style: solid; }
+td, th { border-width: 0 1px 1px 0; padding: .2em .3em; margin: 0; }
+th { background: var(--dim); text-align: left; }
+thead { position: sticky; top: 0; }
+thead th { text-align: center; padding: .2em .5em; }
+thead td, thead th { background: var(--lit); }
+tbody tr:hover td, tbody tr:hover th { background: var(--dim); }
+.odds tbody tr { background: var(--bg); }
+.odds tbody tr:nth-child(2n) { background: #F5F5F5; }
+.js .checkable .checked td, .js .checkable .checked th { background: var(--lit); }
+```
+
+### Key table classes
+
+| Class | Meaning |
+|---|---|
+| `.nowrap` | White-space: pre (query results) |
+| `.checkable` | Rows can be selected via checkbox |
+| `.checked` | Row is currently selected |
+| `.odds` | Alternating row colors |
+| `.scrollable` | Wrapper div, horizontal scroll |
+| `.wrap` | Normal white-space |
+
+### Key JS behavior
+
+- `tableClick` / `partialArg(tableClick, true)` on `onclick`/`ondblclick` selects rows in `.checkable` tables
+- `.checked` class is toggled by JS on `<tr>` elements
+- Inline edit is triggered by double-clicking a cell
+- `thead` is `position: sticky; top: 0` — this must be preserved
+
+---
+
+## Tasks
+
+### TASK-TABLE-01: Base table reset and spacing
+
+```css
+table {
+    margin: 0 0 var(--space-5) 0;
+    font-size: var(--font-size-base);
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: auto;
+}
+
+td, th {
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border);
+    vertical-align: top;
+    font-size: inherit;
+}
+```
+
+**Note:** The existing border model uses `border-width: 1px 0 0 1px` on `table` and `border-width: 0 1px 1px 0` on cells to avoid double borders. With `border-collapse: collapse`, this is handled automatically. Test carefully with the existing border color CSS variable chain.
+
+---
+
+### TASK-TABLE-02: Column headers (`th`, `thead`)
+
+```css
+th {
+    background: var(--color-surface-raised);
+    text-align: left;
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--color-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-color: var(--color-border);
+    white-space: nowrap;
+}
+
+thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+thead th {
+    text-align: center;
+    background: var(--color-surface-raised);
+    border-bottom: 2px solid var(--color-border);
+}
+
+thead td,
+thead th {
+    background: var(--color-surface-raised);
+}
+```
+
+---
+
+### TASK-TABLE-03: Row hover and selection states
+
+```css
+tbody tr:hover td,
+tbody tr:hover th {
+    background: var(--dim);
+}
+
+/* Alternating rows */
+.odds tbody tr {
+    background: var(--bg);
+}
+
+.odds tbody tr:nth-child(2n) {
+    background: var(--color-surface-raised);
+}
+
+/* Selected row (JS toggles .checked on <tr>) */
+.js .checkable .checked td,
+.js .checkable .checked th {
+    background: var(--lit);
+}
+```
+
+---
+
+### TASK-TABLE-04: Scrollable table wrapper
+
+```css
+.scrollable {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: var(--space-4);
+}
+
+/* Ensure sticky header works inside scroll container */
+.scrollable table {
+    min-width: max-content;
+}
+```
+
+---
+
+### TASK-TABLE-05: Null / special value display
+
+```css
+/* NULL values shown as <i>NULL</i> */
+td i {
+    color: var(--color-muted);
+    font-style: italic;
+    font-size: 12px;
+}
+
+/* Char / binary / date type coloring — keep existing */
+.char  { color: #007F00; }
+.date  { color: #7F007F; }
+.enum  { color: #007F7F; }
+.binary { color: var(--color-error-text); }
+```
+
+---
+
+### TASK-TABLE-06: Pagination (`.pages`)
+
+Pagination links appear above/below the browse table. Currently positioned `sticky; left: 21em`.
+
+```css
+.pages {
+    position: sticky;
+    left: 21em;
+    font-size: 13px;
+    padding: var(--space-2) 0;
+    margin-bottom: var(--space-3);
+}
+
+.pages a {
+    display: inline-block;
+    padding: var(--space-1) var(--space-3);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    text-decoration: none;
+    margin: 0 2px;
+    font-size: 13px;
+    transition: background 0.1s;
+}
+
+.pages a:hover {
+    background: var(--color-surface-raised);
+    color: var(--color-primary);
+}
+```
+
+---
+
+### TASK-TABLE-07: `td table` nested tables
+
+Nested tables appear inside edit forms (fieldsets with multiple inputs per cell). Keep existing `width: 100%; margin: 0`:
+
+```css
+td table {
+    width: 100%;
+    margin: 0;
+    border: none;
+    box-shadow: none;
+}
+
+td table td,
+td table th {
+    border: none;
+    background: none;
+    padding: var(--space-1) var(--space-2);
+}
+```
+
+---
+
+### TASK-TABLE-08: Time display (`.time`)
+
+```css
+.time {
+    color: var(--color-muted);
+    font-size: 11px;
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] `.checkable` row selection (JS toggle `.checked`) still works visually
+- [ ] `thead position: sticky; top: 0` preserved
+- [ ] `.js .column` absolute overlay for hover menu still renders over cells
+- [ ] `td.nowrap` / `.nowrap td` pre-wrap behavior preserved
+- [ ] `.scrollable` horizontal scroll still works
+- [ ] Sorting links in `thead th a` still visible
+- [ ] Checkbox in header (`#check-all`) still functional
+- [ ] No PHP files modified
diff --git a/specs/07-edit-form.md b/specs/07-edit-form.md
new file mode 100644
index 000000000..2e6ebbc6a
--- /dev/null
+++ b/specs/07-edit-form.md
@@ -0,0 +1,222 @@
+# Spec: Insert / Edit Row Form
+
+**Priority:** 7  
+**Risk:** High — form fields directly drive INSERT/UPDATE queries; fieldnames and function selects must not change  
+**Screen:** `edit.inc.php` (Insert / Edit row)  
+**PHP source:** `input()` in `adminer/include/html.inc.php`; `Adminer::editInput()`, `Adminer::editFunctions()`, `Adminer::editRowPrint()` in `adminer/include/adminer.inc.php`
+
+---
+
+## Goal
+
+Improve readability of the insert/edit form. Each field row has: a column name, a function selector, and an input. These should be clearly aligned and easy to scan.
+
+---
+
+## Current HTML Structure
+
+The edit form uses a `<table id="edit-fields">` structure:
+
+```html
+<form method="post" id="form-edit">
+  <table id="edit-fields">
+    <thead>
+      <tr>
+        <th>Column</th>
+        <th>Function</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>field_name</th>
+        <td class="function">
+          <select name="function[field_name]">...</select>
+          <!-- OR plain text function name -->
+        </td>
+        <td>
+          <input name="fields[field_name]" value="...">
+          <!-- OR <textarea> / <select> for enum / <input type="file"> -->
+        </td>
+      </tr>
+      ...
+    </tbody>
+  </table>
+
+  <p>
+    <input type="submit" value="Save" name="save" class="default">
+    <input type="submit" value="Save and continue edit" name="insert">
+    <input type="submit" value="Delete" name="delete">
+    <!-- hidden: token, referer, where[...] -->
+  </p>
+</form>
+```
+
+**Critical:** `name="fields[field_name]"`, `name="function[field_name]"`, `name="save"`, `name="insert"`, `name="delete"` must not change.
+
+### `input()` function output (html.inc.php)
+
+The `input()` function outputs:
+1. `<td class="function">` with function selector (or plain text)
+2. `<td>` with the actual input (`<input>`, `<textarea>`, `<select>`, radio/checkbox enum)
+
+The `<tr>` and first `<th>` (column name) are rendered by `edit.inc.php`.
+
+---
+
+## Tasks
+
+### TASK-EDIT-01: Edit table layout
+
+```css
+#edit-fields {
+    width: 100%;
+    max-width: 900px;
+    border-collapse: collapse;
+    margin: 0 0 var(--space-5);
+}
+
+#edit-fields th,
+#edit-fields td {
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border);
+    vertical-align: middle;
+}
+
+#edit-fields thead th {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-weight: 600;
+    color: var(--color-muted);
+    background: var(--color-surface-raised);
+    white-space: nowrap;
+}
+
+#edit-fields tbody tr:hover td,
+#edit-fields tbody tr:hover th {
+    background: var(--dim);
+}
+
+/* Column name cell */
+#edit-fields tbody th {
+    font-weight: 500;
+    font-size: 13px;
+    color: var(--color-text);
+    background: var(--color-surface-raised);
+    white-space: nowrap;
+    min-width: 120px;
+    max-width: 200px;
+}
+```
+
+---
+
+### TASK-EDIT-02: Function column
+
+```css
+/* The <td class="function"> holds the function selector */
+#edit-fields td.function {
+    text-align: right;
+    white-space: nowrap;
+    width: 14em;
+    color: var(--color-muted);
+    font-size: 12px;
+}
+
+#edit-fields td.function select {
+    font-size: 12px;
+    color: var(--color-muted);
+    border-color: var(--color-border);
+    background: var(--color-surface);
+    max-width: 12em;
+}
+```
+
+---
+
+### TASK-EDIT-03: Input cells
+
+```css
+/* Value input cell — full width inputs */
+#edit-fields tbody td:last-child {
+    width: 100%;
+}
+
+#edit-fields tbody td:last-child input[type="text"],
+#edit-fields tbody td:last-child input[type="number"],
+#edit-fields tbody td:last-child textarea {
+    width: 100%;
+    min-width: 240px;
+}
+
+#edit-fields textarea {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    resize: vertical;
+    min-height: 80px;
+}
+```
+
+---
+
+### TASK-EDIT-04: Enum / set radio+checkbox
+
+```css
+/* Enum input radio/checkbox labels */
+#edit-fields label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-right: var(--space-3);
+    font-size: 13px;
+    cursor: pointer;
+}
+```
+
+---
+
+### TASK-EDIT-05: Form action buttons
+
+```css
+/* The <p> after the edit table contains Save / Save and continue / Delete */
+#form-edit > p,
+form > p.submit {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    align-items: center;
+    margin-top: var(--space-4);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--color-border);
+}
+```
+
+---
+
+## Field Types Reference (PHP → HTML)
+
+| Field type | Input rendered |
+|---|---|
+| enum | `<input type="radio">` per option |
+| set | `<input type="checkbox">` per option |
+| JSON / jsonb | `<textarea class="jush-js">` |
+| TEXT / BLOB | `<textarea>` |
+| boolean | `<input type="hidden">` + `<input type="checkbox">` |
+| integer | `<input type="number">` |
+| file upload | `<input type="file">` |
+| other | `<input>` (text) |
+
+---
+
+## Acceptance Criteria
+
+- [ ] All `name="fields[*]"` inputs present
+- [ ] All `name="function[*]"` selects present  
+- [ ] `name="save"`, `name="insert"`, `name="delete"` buttons present
+- [ ] Hidden fields (`name="token"`, `name="referer"`, `name="where[*]"`) untouched
+- [ ] `autofocus` attribute on first field preserved
+- [ ] Textarea for JSON/TEXT types renders correctly
+- [ ] Enum radio group renders correctly
+- [ ] File upload input present when applicable
+- [ ] No PHP files modified
diff --git a/specs/08-sql-command-screen.md b/specs/08-sql-command-screen.md
new file mode 100644
index 000000000..061947ff5
--- /dev/null
+++ b/specs/08-sql-command-screen.md
@@ -0,0 +1,200 @@
+# Spec: SQL Command Screen
+
+**Priority:** 8  
+**Risk:** Medium — textarea and execution form must be preserved exactly  
+**Screen:** `sql.inc.php`  
+**PHP source:** `sql.inc.php`, `Adminer::sqlPrintAfter()`, `Adminer::sqlCommandQuery()`
+
+---
+
+## Goal
+
+Improve the SQL command screen layout: larger, cleaner editor area, clearer action buttons, better result display.
+
+---
+
+## Current HTML Structure
+
+```html
+<h2>SQL command</h2>
+
+<form id="form" action="" method="post">
+  <!-- Hidden fields: token, db, limit, error_stops, only_errors -->
+
+  <p>
+    <textarea name="sql" id="sql" class="sqlarea jush-sql" ...>
+      <!-- current SQL -->
+    </textarea>
+  </p>
+
+  <!-- Syntax help popup anchor -->
+  <p id="help-links">
+    <a href="...">Help</a>
+    ...
+  </p>
+
+  <!-- adminer()->sqlPrintAfter() output here -->
+
+  <p>
+    <input type="submit" value="Execute" name="sql">
+    <label>
+      <input type="checkbox" name="error_stops" ...> Stop on error
+    </label>
+    <label>
+      <input type="checkbox" name="only_errors" ...> Show only errors
+    </label>
+  </p>
+</form>
+
+<!-- Query history -->
+<div id="history">...</div>
+
+<!-- Results (tables / messages) rendered below form -->
+```
+
+**Critical fields:** `name="sql"` (textarea), `name="error_stops"`, `name="only_errors"`, `name="limit"`, `name="token"`. The submit button also has `name="sql"` — it must be preserved.
+
+---
+
+## Tasks
+
+### TASK-SQL-01: SQL textarea
+
+```css
+.sqlarea {
+    width: 100%;
+    min-height: 180px;
+    box-sizing: border-box;
+    font-family: var(--font-mono);
+    font-size: 13px;
+    line-height: 1.6;
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    color: var(--color-text);
+    resize: vertical;
+}
+
+.sqlarea:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -1px;
+    border-color: var(--color-primary);
+}
+
+/* SQL highlight is applied by jush to .jush-sql */
+pre.jush {
+    background: var(--color-surface-raised);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: var(--space-3) var(--space-4);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    overflow-x: auto;
+}
+```
+
+---
+
+### TASK-SQL-02: SQL form footer
+
+```css
+/* Action bar below textarea */
+.sql-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-4);
+    margin: var(--space-3) 0 var(--space-5);
+    padding-bottom: var(--space-5);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.sql-footer label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: 13px;
+    color: var(--color-muted);
+    cursor: pointer;
+}
+```
+
+---
+
+### TASK-SQL-03: Query result display
+
+After execution, SQL results are shown as a `<table>` (normal data table rules apply) or as a `.message` / `.error` div. The query itself is shown via `Adminer::selectQuery()` output which wraps in `<p><code class="jush-...">`:
+
+```css
+/* Query display above result */
+p > code.jush-sql,
+p > code[class^="jush-"] {
+    display: inline-block;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    background: var(--color-surface-raised);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: var(--space-1) var(--space-2);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+```
+
+---
+
+### TASK-SQL-04: Query history panel
+
+```css
+#history {
+    margin-top: var(--space-5);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--color-border);
+}
+
+/* Each history entry toggle */
+#history a.toggle {
+    font-size: 13px;
+    color: var(--color-primary);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+#history a.toggle:hover {
+    text-decoration: underline;
+}
+
+/* Collapsed SQL blocks */
+#history .hidden {
+    display: none;
+}
+
+#history pre code {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    padding: var(--space-3);
+    background: var(--color-surface-raised);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    overflow-x: auto;
+    white-space: pre;
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] `<textarea name="sql">` present with correct `name` and `id="sql"`
+- [ ] `name="error_stops"`, `name="only_errors"`, `name="limit"` checkboxes present
+- [ ] `<input type="submit" name="sql">` Execute button present
+- [ ] Hidden `name="token"` present
+- [ ] SQL syntax highlighting (jush) still loads and applies
+- [ ] Autocomplete still works (jush-autocomplete-sql)
+- [ ] History toggle (`#sql-N` anchors) still functions
+- [ ] No PHP files modified
diff --git a/specs/09-select-filter-bar.md b/specs/09-select-filter-bar.md
new file mode 100644
index 000000000..72923ada9
--- /dev/null
+++ b/specs/09-select-filter-bar.md
@@ -0,0 +1,229 @@
+# Spec: Select / Browse Screen — Filter & Action Bar
+
+**Priority:** 9  
+**Risk:** High — filter form drives SQL WHERE/ORDER/LIMIT; all field names are query parameters  
+**Screen:** `select.inc.php`  
+**PHP source:** `Adminer::selectColumnsPrint()`, `selectSearchPrint()`, `selectOrderPrint()`, `selectLimitPrint()`, `selectLengthPrint()`, `selectActionPrint()` in `adminer/include/adminer.inc.php`
+
+---
+
+## Goal
+
+Improve the visual appearance of the collapsible filter/sort/limit fieldsets above the data table. Keep all form inputs and their names intact.
+
+---
+
+## Current HTML Structure
+
+```html
+<form id="form" action="" method="get">
+  <!-- Hidden: driver, username, db, token, select (table name) -->
+
+  <!-- Fieldsets — each is collapsible via JS toggle -->
+  <fieldset>
+    <legend><a href="#fieldset-select">Select</a></legend>
+    <div id="fieldset-select" class="hidden">
+      <!-- Column pickers: columns[N][fun], columns[N][col] -->
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <legend><a href="#fieldset-search">Search</a></legend>
+    <div id="fieldset-search" class="hidden">
+      <!-- where[N][col], where[N][op], where[N][val] -->
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <legend><a href="#fieldset-sort">Sort</a></legend>
+    <div id="fieldset-sort" class="hidden">
+      <!-- order[N], desc[N] -->
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <legend>Limit</legend>
+    <div>
+      <input type="number" name="limit" class="size" value="50">
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <legend>Action</legend>
+    <div>
+      <input type="submit" value="Select">
+      <span id="noindex" title="Full table scan"></span>
+    </div>
+  </fieldset>
+
+</form>
+```
+
+**Critical form fields:** `columns[N][fun]`, `columns[N][col]`, `where[N][col]`, `where[N][op]`, `where[N][val]`, `fulltext[N]`, `boolean[N]`, `order[N]`, `desc[N]`, `limit`, `text_length`, `page`.
+
+---
+
+## Tasks
+
+### TASK-SELECT-01: Fieldset container styling
+
+```css
+/* The filter fieldsets sit in a horizontal strip */
+fieldset {
+    display: inline-block;
+    vertical-align: top;
+    padding: var(--space-3) var(--space-4);
+    margin: 0 var(--space-3) var(--space-3) 0;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-sm);
+}
+
+fieldset legend {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 0 var(--space-2);
+}
+
+fieldset legend a {
+    color: var(--color-muted);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+fieldset legend a:hover {
+    color: var(--color-primary);
+}
+
+/* Sticky footer fieldset group */
+.footer fieldset {
+    margin-top: 0;
+    box-shadow: none;
+    background: none;
+}
+```
+
+---
+
+### TASK-SELECT-02: Fieldset inner div (row of controls)
+
+Each collapsible fieldset has a `<div id="fieldset-*">` child. Each row inside is a `<div>` with selects/inputs:
+
+```css
+fieldset > div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    align-items: center;
+}
+
+/* Each row in search/sort/columns boxes */
+fieldset > div > div {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-1);
+}
+```
+
+---
+
+### TASK-SELECT-03: `.size` inputs (limit / text_length)
+
+```css
+input.size {
+    width: 7ex;
+    text-align: right;
+    padding: var(--space-1) var(--space-2);
+}
+```
+
+---
+
+### TASK-SELECT-04: "No index" warning indicator
+
+```css
+#noindex {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: transparent;
+    transition: background 0.2s;
+}
+
+/* JS sets title when no index is used — visual hint only */
+#noindex[title]:not([title=""]) {
+    background: var(--color-error-text);
+    cursor: help;
+}
+```
+
+---
+
+### TASK-SELECT-05: Action bar below data table (`.footer`)
+
+The sticky footer below the table contains checkboxes, bulk-action buttons, and export form. This area uses `<fieldset>` elements with class `.footer`.
+
+```css
+/* Already covered in TASK-BTN-05, extend for select page specifics: */
+.footer fieldset legend {
+    font-size: 12px;
+    color: var(--color-muted);
+}
+
+/* Bulk actions: Clone, Delete selected, etc. */
+.footer input[type="submit"] {
+    font-size: 13px;
+    padding: var(--space-1) var(--space-3);
+}
+```
+
+---
+
+### TASK-SELECT-06: Links bar above the table (`.links`)
+
+```css
+p.links {
+    margin: 0 0 var(--space-4);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    align-items: center;
+    font-size: 13px;
+}
+
+p.links a {
+    color: var(--color-primary);
+    text-decoration: none;
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-sm);
+    transition: background 0.1s;
+}
+
+p.links a:hover {
+    background: var(--color-surface-raised);
+    text-decoration: none;
+}
+
+p.links a.active {
+    font-weight: 600;
+    background: var(--lit);
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] All `columns[*]`, `where[*]`, `order[*]`, `desc[*]`, `limit`, `text_length` fields present
+- [ ] `form#form` GET action preserved (no `method="post"` added)
+- [ ] Fieldset collapse/expand (JS `toggle('fieldset-*')`) still works (`.hidden` class)
+- [ ] `#noindex` element present for JS to populate `title`
+- [ ] `selectFieldChange` JS handler still fires on input changes (drives auto-submit)
+- [ ] `selectAddRow` JS handler still fires on last row select change (adds new row)
+- [ ] No PHP files modified
diff --git a/specs/10-table-structure-schema.md b/specs/10-table-structure-schema.md
new file mode 100644
index 000000000..c9d365120
--- /dev/null
+++ b/specs/10-table-structure-schema.md
@@ -0,0 +1,217 @@
+# Spec: Table Structure & Schema Screens
+
+**Priority:** 10  
+**Risk:** Low–Medium — mostly display tables with some action forms  
+**Screens:** `table.inc.php` (structure), `create.inc.php` (alter table), `indexes.inc.php`, `foreign.inc.php`, `schema.inc.php`  
+**PHP source:** `Adminer::tableStructurePrint()`, `Adminer::tableIndexesPrint()` in `adminer/include/adminer.inc.php`
+
+---
+
+## Goal
+
+Make table structure, indexes, and foreign key screens more readable. Improve the column editor form in create/alter table.
+
+---
+
+## Screen: Table Structure (`table.inc.php`)
+
+### Current HTML (from `tableStructurePrint()`)
+
+```html
+<div class="scrollable">
+  <table class="nowrap odds">
+    <thead>
+      <tr><th>Column<td>Type<td>Comment (if supported)
+    </thead>
+    <tr>
+      <th>column_name
+      <td><span title="collation">type [NULL] [Auto Increment] [default]</span>
+      <td>comment text
+    </tr>
+    ...
+  </table>
+</div>
+```
+
+### Tasks
+
+#### TASK-STRUCT-01: Structure table column widths
+
+```css
+/* Column name column */
+.nowrap.odds th:first-child {
+    min-width: 150px;
+    font-weight: 500;
+    color: var(--color-text);
+}
+
+/* Type column */
+.nowrap.odds td:first-child {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--color-muted);
+}
+
+/* NULL / Auto Increment / default value styling */
+.nowrap.odds td i {
+    color: var(--color-muted);
+    font-style: normal;
+    font-size: 11px;
+    background: var(--color-surface-raised);
+    border: 1px solid var(--color-border);
+    border-radius: 3px;
+    padding: 1px 4px;
+    margin-left: 4px;
+}
+
+/* Default value badge */
+.nowrap.odds td b {
+    font-weight: normal;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--color-primary);
+}
+```
+
+---
+
+## Screen: Alter Table / Create Table (`create.inc.php`)
+
+### Current HTML structure
+
+The create/alter table form uses `<table id="edit-fields">` (same ID as the row edit form, but different content structure):
+
+```html
+<form method="post">
+  <table id="edit-fields">
+    <!-- Each row is a column definition:
+         name, type, length, options (NULL, auto_increment, default...) -->
+  </table>
+  <p>
+    <input type="submit" value="Save" name="create" class="default">
+  </p>
+</form>
+```
+
+The column definition inputs have names like `fields[N][field]`, `fields[N][type]`, `fields[N][length]`, `fields[N][null]`, etc. These must not change.
+
+#### TASK-STRUCT-02: Column editor table
+
+```css
+/* Reuse #edit-fields rules from TASK-EDIT-01 */
+/* Additional create-table specific: type select should be compact */
+#edit-fields select[name*="[type]"] {
+    min-width: 120px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+}
+
+/* Length/precision input */
+#edit-fields input[name*="[length]"] {
+    width: 8ex;
+    text-align: right;
+}
+
+/* Options column: NULL checkbox, AI checkbox, etc. */
+#edit-fields td:last-child label {
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--color-muted);
+}
+```
+
+---
+
+## Screen: Indexes (`indexes.inc.php`)
+
+### Current HTML
+
+```html
+<form method="post">
+  <table>
+    <thead>
+      <tr><th>Name<th>Type<th>Column<th>(actions)
+    </thead>
+    <!-- Existing indexes and new index form rows -->
+  </table>
+  <p>
+    <input type="submit" value="Save" name="indexes" class="default">
+  </p>
+</form>
+```
+
+#### TASK-STRUCT-03: Index table
+
+No specific additions beyond the base table styles. Ensure the column picker `<select>` elements inside the table are readable:
+
+```css
+/* Column picker selects in index rows */
+table select[name*="[columns]"] {
+    min-width: 120px;
+}
+```
+
+---
+
+## Screen: ER Diagram (`schema.inc.php`)
+
+The schema screen renders `<div id="schema">` with absolutely positioned `<div class="table">` elements connected by `<svg class="references">`.
+
+This screen uses mouse drag (JS). CSS changes should be minimal — only improve the table card appearance:
+
+#### TASK-STRUCT-04: Schema table cards
+
+```css
+#schema {
+    margin-left: 60px;
+    position: relative;
+    user-select: none;
+}
+
+#schema .table {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: 0;
+    cursor: move;
+    position: absolute;
+    background: var(--color-surface);
+    box-shadow: var(--shadow-sm);
+    min-width: 140px;
+    font-size: 12px;
+}
+
+#schema .table a {
+    display: block;
+    padding: var(--space-1) var(--space-3);
+    color: var(--color-text);
+    text-decoration: none;
+    border-bottom: 1px solid var(--color-border);
+}
+
+#schema .table a:last-child {
+    border-bottom: none;
+}
+
+#schema .table a:first-child {
+    font-weight: 600;
+    background: var(--color-surface-raised);
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+    border-bottom: 2px solid var(--color-border);
+}
+
+#schema .table a:hover {
+    background: var(--color-surface-raised);
+    color: var(--color-primary);
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] All `fields[N][*]` column definition inputs present
+- [ ] `name="create"` save button present
+- [ ] `name="indexes"` save button present
+- [ ] Schema drag-and-drop JS still works
+- [ ] `.references` SVG arrows still render
+- [ ] No PHP files modified
diff --git a/specs/11-export-import.md b/specs/11-export-import.md
new file mode 100644
index 000000000..429bb7949
--- /dev/null
+++ b/specs/11-export-import.md
@@ -0,0 +1,150 @@
+# Spec: Export, Import & Dump Screens
+
+**Priority:** 11  
+**Risk:** Low — these are mostly forms with radio/checkbox groups  
+**Screens:** `dump.inc.php` (Export), `sql.inc.php` import section  
+**PHP source:** `Adminer::dumpOutput()`, `Adminer::dumpFormat()`, `Adminer::dumpHeaders()`
+
+---
+
+## Goal
+
+Clean up the export/import forms. Improve grouping of options, spacing, and the action buttons.
+
+---
+
+## Export Screen (`dump.inc.php`) — Current HTML
+
+```html
+<h2>Export</h2>
+
+<form action="" method="post" id="dump">
+
+  <fieldset>
+    <legend>Output</legend>
+    <div>
+      <!-- radio: name="output" values: text, file, gz -->
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <legend>Format</legend>
+    <div>
+      <!-- radio: name="format" values: sql, csv, csv;, tsv -->
+    </div>
+  </fieldset>
+
+  <!-- Database / table options (varies by context) -->
+
+  <p>
+    <input type="submit" value="Export" name="export" class="default">
+  </p>
+
+</form>
+```
+
+**Critical fields:** `name="output"`, `name="format"`, `name="export"`, `name="token"`. Also `name="tables[]"`, `name="views[]"`, `name="data[]"` when exporting multiple tables.
+
+---
+
+## Import Section — Current HTML (inside `sql.inc.php`)
+
+```html
+<!-- Import tab (triggered by ?import=) -->
+<form action="" method="post" enctype="multipart/form-data">
+  <p>
+    <input type="file" name="sql_file[]">
+    <!-- or server-side path input: <input name="webfile" value="adminer.sql"> -->
+  </p>
+  <p>
+    <label>
+      <input type="checkbox" name="error_stops" ...> Stop on error
+    </label>
+    <label>
+      <input type="checkbox" name="only_errors" ...> Show only errors
+    </label>
+    <input type="submit" value="Execute" name="sql">
+    <input type="hidden" name="token" ...>
+  </p>
+</form>
+```
+
+---
+
+## Tasks
+
+### TASK-DUMP-01: Export fieldset groups
+
+```css
+/* Side-by-side fieldsets for Output + Format */
+#dump fieldset {
+    display: inline-block;
+    vertical-align: top;
+    min-width: 160px;
+    margin: 0 var(--space-4) var(--space-4) 0;
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+}
+
+#dump fieldset legend {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-muted);
+    padding: 0 var(--space-2);
+}
+```
+
+---
+
+### TASK-DUMP-02: Radio/checkbox option lists
+
+```css
+/* Each radio/checkbox option in dump fieldsets */
+#dump label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) 0;
+    font-size: 13px;
+    cursor: pointer;
+    color: var(--color-text);
+}
+
+#dump label:hover {
+    color: var(--color-primary);
+}
+```
+
+---
+
+### TASK-DUMP-03: Table selection list
+
+When exporting from the database screen, a table of checkboxes is shown. This uses the standard `.checkable` table — covered by TASK-TABLE-03. No additional work needed.
+
+---
+
+### TASK-DUMP-04: Import file input
+
+```css
+/* File input styling */
+input[type="file"] {
+    font-size: 13px;
+    color: var(--color-muted);
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] `name="output"` radios present
+- [ ] `name="format"` radios present
+- [ ] `name="export"` submit button present
+- [ ] `name="token"` hidden input present
+- [ ] `name="sql_file[]"` file input present on import
+- [ ] `enctype="multipart/form-data"` on import form preserved
+- [ ] No PHP files modified
diff --git a/specs/12-responsive-layout.md b/specs/12-responsive-layout.md
new file mode 100644
index 000000000..334e290cd
--- /dev/null
+++ b/specs/12-responsive-layout.md
@@ -0,0 +1,171 @@
+# Spec: Responsive Layout Improvements
+
+**Priority:** 12  
+**Risk:** Low — extends existing media queries  
+**Screen:** All screens  
+**PHP source:** None — CSS only
+
+---
+
+## Goal
+
+Improve the mobile/small-screen experience. The current responsive breakpoint is `800px`. Enhance the collapsed sidebar, stacked layout, and touch targets.
+
+---
+
+## Current Mobile Behavior (`@media (max-width: 800px)`)
+
+```css
+#menu { position: static; width: auto; min-width: 23em; background: var(--bg); border: 1px solid var(--fg); margin-top: 9px; box-shadow: 0 0 20px -3px var(--fg); }
+#content { margin-left: 10px !important; }
+#lang { position: static; }
+#breadcrumb { left: 48px !important; }
+.js #foot { position: absolute; top: 2em; left: 0; }
+.js .foot { display: none; }
+.js #menuopen { display: block; position: absolute; top: 3px; left: 6px; }
+.nojs #menu { position: static; }
+```
+
+The sidebar collapses behind the hamburger `#menuopen` button. When open (`.foot` class removed), `#foot` overlaps the content.
+
+---
+
+## Tasks
+
+### TASK-RESP-01: Improved mobile sidebar overlay
+
+```css
+@media all and (max-width: 800px) {
+    /* Keep existing layout rules */
+    .js #foot {
+        position: fixed; /* was absolute — fixed keeps it in place on scroll */
+        top: 2.5em;
+        left: 0;
+        z-index: 100;
+        max-height: calc(100vh - 2.5em);
+        overflow-y: auto;
+    }
+
+    #menu {
+        position: static;
+        width: 280px;
+        min-width: unset;
+        background: var(--color-surface);
+        border: none;
+        border-right: 1px solid var(--color-border);
+        box-shadow: var(--shadow-md);
+        margin: 0;
+    }
+
+    /* Backdrop when sidebar open */
+    .js #foot::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.3);
+        z-index: -1;
+    }
+
+    .js .foot {
+        display: none;
+    }
+
+    .js .foot::before {
+        display: none;
+    }
+}
+```
+
+---
+
+### TASK-RESP-02: Touch targets
+
+Minimum 44px touch targets for interactive elements on mobile:
+
+```css
+@media all and (max-width: 800px) {
+    #tables a,
+    #logins a,
+    #menu .links a {
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        padding: var(--space-2) var(--space-4);
+    }
+
+    #menuopen {
+        min-width: 44px;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+```
+
+---
+
+### TASK-RESP-03: Responsive breadcrumb
+
+On very narrow screens, the breadcrumb can overflow. Add overflow handling:
+
+```css
+@media all and (max-width: 800px) {
+    #breadcrumb {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: calc(100vw - 60px);
+    }
+}
+```
+
+---
+
+### TASK-RESP-04: Responsive tables
+
+On narrow screens, data tables are already inside `.scrollable` wrappers (horizontal scroll). Ensure this is applied consistently. No PHP change — verify `.scrollable` wrapper exists on all data table screens.
+
+```css
+@media all and (max-width: 800px) {
+    .scrollable {
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Fieldsets stack vertically on mobile */
+    fieldset {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        margin-right: 0;
+    }
+}
+```
+
+---
+
+### TASK-RESP-05: Responsive logout area
+
+```css
+@media all and (max-width: 800px) {
+    .js .logout {
+        top: 1.667em;
+        background-color: var(--color-surface-raised);
+        box-shadow: 0 0 5px 5px var(--color-surface-raised);
+        border: none;
+        border-radius: 0;
+        font-size: 12px;
+    }
+}
+```
+
+---
+
+## Acceptance Criteria
+
+- [ ] Hamburger button appears on screens ≤800px
+- [ ] Sidebar toggles open/closed via `#menuopen` click
+- [ ] `.foot` / `.js .foot` CSS class toggle still drives show/hide
+- [ ] Content is not obscured when sidebar is closed
+- [ ] Tables are horizontally scrollable on narrow screens
+- [ ] No PHP files modified
diff --git a/specs/13-dark-mode.md b/specs/13-dark-mode.md
new file mode 100644
index 000000000..e6573b39f
--- /dev/null
+++ b/specs/13-dark-mode.md
@@ -0,0 +1,129 @@
+# Spec: Dark Mode Support
+
+**Priority:** 13  
+**Risk:** Low — extends existing dark.css pattern  
+**Screen:** All screens  
+**PHP source:** `Adminer::head()`, `Adminer::css()` — no changes needed
+
+---
+
+## Goal
+
+Extend the dark mode CSS to cover all new design tokens added in TASK-CSS-01 through TASK-CSS-04. Ensure the dark theme is complete and consistent when `prefers-color-scheme: dark` is active.
+
+---
+
+## Current State
+
+`adminer/static/dark.css` overrides `--bg`, `--fg`, `--dim`, `--lit` and a set of hard-coded selectors. After the design token expansion in spec `01-css-design-system.md`, all new tokens must also have dark overrides.
+
+The dark CSS is loaded automatically when the system prefers dark mode (via `media="(prefers-color-scheme: dark)"`) unless a custom `adminer-dark.css` is present.
+
+The `dark-switcher.php` plugin allows manual toggle — it adds/removes a `dark` class to `<body>`. Any dark mode CSS should also work when `body.dark` class is set.
+
+---
+
+## Tasks
+
+### TASK-DARK-01: New token dark overrides
+
+Add to `adminer/static/dark.css` (already covered in TASK-CSS-03):
+
+```css
+html {
+    /* Existing — keep unchanged */
+    --bg: #002240;
+    --fg: #829bb0;
+    --dim: #154269;
+    --lit: #011d35;
+
+    /* New token overrides */
+    --color-surface: #011d35;
+    --color-surface-raised: #0c2d4a;
+    --color-border: #1a4570;
+    --color-text: #c8d8e8;
+    --color-muted: #5e8ab0;
+    --color-primary: #3b82f6;
+    --color-primary-hover: #60a5fa;
+    --color-success-bg: #052e16;
+    --color-success-text: #86efac;
+    --color-success-border: #166534;
+    --color-error-bg: #450a0a;
+    --color-error-text: #fca5a5;
+    --color-error-border: #991b1b;
+}
+```
+
+---
+
+### TASK-DARK-02: Dark mode form controls
+
+Browser default form controls often look inconsistent in dark mode. Add:
+
+```css
+/* Ensure inputs use token colors in dark mode */
+input,
+select,
+textarea {
+    color-scheme: dark;
+}
+```
+
+---
+
+### TASK-DARK-03: Dark mode icon inversion
+
+Already handled in existing dark.css:
+```css
+.icon { filter: invert(1); background-color: #062642; }
+.icon:hover { background-color: #d1394e; }
+```
+
+Verify these still apply after TASK-BTN-04 icon changes. No action needed if values unchanged.
+
+---
+
+### TASK-DARK-04: Dark mode schema diagram
+
+Schema cards need to look correct in dark mode:
+
+```css
+#schema .table {
+    border-color: var(--color-border);
+    background: var(--color-surface);
+}
+
+#schema .references {
+    /* SVG arrows — color is set inline by JS/PHP, may need a CSS filter */
+}
+```
+
+---
+
+### TASK-DARK-05: Body class dark toggle (dark-switcher plugin)
+
+The `dark-switcher.php` plugin adds a `dark` class to `<body>`. For compatibility, wrap dark token overrides in a dual selector:
+
+```css
+/* In dark.css — already loaded via media query,
+   also support body.dark class for manual toggle plugin */
+html,
+body.dark {
+    --bg: #002240;
+    /* ... all dark tokens ... */
+}
+```
+
+This is a CSS-only change. The PHP plugin (`plugins/dark-switcher.php`) does not need changes.
+
+---
+
+## Acceptance Criteria
+
+- [ ] Dark mode activates via `prefers-color-scheme: dark` system setting
+- [ ] Dark mode activates via `body.dark` class (dark-switcher plugin)
+- [ ] All new UI components look correct in dark mode
+- [ ] Icon buttons visible in dark mode (via `filter: invert(1)`)
+- [ ] Syntax highlighting (jush-dark.css) still loads in dark mode
+- [ ] Existing custom designs (e.g., `designs/dracula/`) not broken
+- [ ] No PHP files modified
diff --git a/specs/README.md b/specs/README.md
new file mode 100644
index 000000000..579424b28
--- /dev/null
+++ b/specs/README.md
@@ -0,0 +1,147 @@
+# UI Modernization — Task Tracker
+
+This is the master checklist of all UI modernization tasks. Work should proceed in priority order. Each task is described in detail in the corresponding spec file.
+
+---
+
+## Spec Documents
+
+| # | File | Topic | Priority | Risk |
+|---|---|---|---|---|
+| 00 | [00-architecture-overview.md](00-architecture-overview.md) | Architecture reference (read-only) | — | — |
+| 01 | [01-css-design-system.md](01-css-design-system.md) | CSS design token system | 1 | Low |
+| 02 | [02-login-screen.md](02-login-screen.md) | Login screen | 2 | Low |
+| 03 | [03-layout-shell.md](03-layout-shell.md) | Global layout shell | 3 | Medium |
+| 04 | [04-sidebar-navigation.md](04-sidebar-navigation.md) | Sidebar navigation | 4 | Medium |
+| 05 | [05-buttons-controls.md](05-buttons-controls.md) | Buttons and form controls | 5 | Low |
+| 06 | [06-data-tables.md](06-data-tables.md) | Data tables (browse screen) | 6 | Medium |
+| 07 | [07-edit-form.md](07-edit-form.md) | Insert / edit row form | 7 | High |
+| 08 | [08-sql-command-screen.md](08-sql-command-screen.md) | SQL command screen | 8 | Medium |
+| 09 | [09-select-filter-bar.md](09-select-filter-bar.md) | Select filter/sort/action bar | 9 | High |
+| 10 | [10-table-structure-schema.md](10-table-structure-schema.md) | Table structure and ER diagram | 10 | Low–Medium |
+| 11 | [11-export-import.md](11-export-import.md) | Export and import screens | 11 | Low |
+| 12 | [12-responsive-layout.md](12-responsive-layout.md) | Responsive layout | 12 | Low |
+| 13 | [13-dark-mode.md](13-dark-mode.md) | Dark mode | 13 | Low |
+
+---
+
+## Master Task List
+
+### Phase 1 — Foundation (must complete before visual changes)
+
+- [ ] **TASK-CSS-01** Define expanded CSS variable set on `html {}`
+- [ ] **TASK-CSS-02** Update `body {}` typography
+- [ ] **TASK-CSS-03** Update `dark.css` dark token overrides
+- [ ] **TASK-CSS-04** Migrate hard-coded colors to tokens
+
+### Phase 2 — Login + Global Shell
+
+- [ ] **TASK-LOGIN-01** Center the login card
+- [ ] **TASK-LOGIN-02** Style the Login button (links to TASK-BTN-01)
+- [ ] **TASK-LOGIN-03** Style the Permanent login checkbox
+- [ ] **TASK-LOGIN-04** Improve sidebar login session list
+- [ ] **TASK-LAYOUT-01** Sidebar visual refresh
+- [ ] **TASK-LAYOUT-02** Header / logo area
+- [ ] **TASK-LAYOUT-03** Breadcrumb bar
+- [ ] **TASK-LAYOUT-04** Content area spacing
+- [ ] **TASK-LAYOUT-05** Page title (h2)
+- [ ] **TASK-LAYOUT-06** Flash messages (.message, .error)
+- [ ] **TASK-LAYOUT-07** Logout area
+- [ ] **TASK-LAYOUT-08** Mobile layout (≤800px)
+
+### Phase 3 — Navigation
+
+- [ ] **TASK-NAV-01** Table list items
+- [ ] **TASK-NAV-02** Sidebar action links
+- [ ] **TASK-NAV-03** Database list (#dbs)
+- [ ] **TASK-NAV-04** Language switcher (#lang)
+- [ ] **TASK-NAV-05** Mobile hamburger button
+
+### Phase 4 — Controls
+
+- [ ] **TASK-BTN-01** Primary submit button
+- [ ] **TASK-BTN-02** Danger / destructive button variants
+- [ ] **TASK-BTN-03** Secondary / neutral buttons
+- [ ] **TASK-BTN-04** Icon buttons (.icon)
+- [ ] **TASK-BTN-05** Form action bar (.footer)
+- [ ] **TASK-BTN-06** Text inputs and selects (global)
+
+### Phase 5 — Data Tables
+
+- [ ] **TASK-TABLE-01** Base table reset and spacing
+- [ ] **TASK-TABLE-02** Column headers (th, thead)
+- [ ] **TASK-TABLE-03** Row hover and selection states
+- [ ] **TASK-TABLE-04** Scrollable table wrapper
+- [ ] **TASK-TABLE-05** Null / special value display
+- [ ] **TASK-TABLE-06** Pagination
+- [ ] **TASK-TABLE-07** Nested tables (td table)
+- [ ] **TASK-TABLE-08** Time display (.time)
+
+### Phase 6 — Per-Screen Polish
+
+- [ ] **TASK-EDIT-01** Edit table layout
+- [ ] **TASK-EDIT-02** Function column styling
+- [ ] **TASK-EDIT-03** Input cells
+- [ ] **TASK-EDIT-04** Enum/set radio+checkbox
+- [ ] **TASK-EDIT-05** Form action buttons
+- [ ] **TASK-SQL-01** SQL textarea
+- [ ] **TASK-SQL-02** SQL form footer
+- [ ] **TASK-SQL-03** Query result display
+- [ ] **TASK-SQL-04** Query history panel
+- [ ] **TASK-SELECT-01** Fieldset container styling
+- [ ] **TASK-SELECT-02** Fieldset inner div
+- [ ] **TASK-SELECT-03** .size inputs
+- [ ] **TASK-SELECT-04** No-index warning
+- [ ] **TASK-SELECT-05** Action bar below data table
+- [ ] **TASK-SELECT-06** Links bar
+- [ ] **TASK-STRUCT-01** Structure table column widths
+- [ ] **TASK-STRUCT-02** Column editor table (alter table)
+- [ ] **TASK-STRUCT-03** Index table
+- [ ] **TASK-STRUCT-04** Schema table cards (ER diagram)
+- [ ] **TASK-DUMP-01** Export fieldset groups
+- [ ] **TASK-DUMP-02** Radio/checkbox option lists
+- [ ] **TASK-DUMP-04** Import file input
+
+### Phase 7 — Responsive + Dark Mode
+
+- [ ] **TASK-RESP-01** Improved mobile sidebar overlay
+- [ ] **TASK-RESP-02** Touch targets
+- [ ] **TASK-RESP-03** Responsive breadcrumb
+- [ ] **TASK-RESP-04** Responsive tables
+- [ ] **TASK-RESP-05** Responsive logout area
+- [ ] **TASK-DARK-01** New token dark overrides
+- [ ] **TASK-DARK-02** Dark mode form controls
+- [ ] **TASK-DARK-03** Dark mode icon inversion (verify)
+- [ ] **TASK-DARK-04** Dark mode schema diagram
+- [ ] **TASK-DARK-05** Body class dark toggle compatibility
+
+---
+
+## Implementation Rules
+
+All tasks are CSS-only unless explicitly noted otherwise.
+
+When a task says "PHP change acceptable," the allowed PHP change is limited to adding a CSS `class` attribute to a single HTML element. No logic, form fields, URLs, or behavior may change.
+
+Before marking any task complete:
+1. Verify the changed element still submits the correct form data
+2. Verify JS event handlers still fire (open browser DevTools)
+3. Verify dark mode renders correctly
+4. Verify mobile layout (≤800px) still works
+5. Check existing designs in `designs/` folder do not visually break
+
+---
+
+## Files Modified by This Project
+
+Only these files should be modified:
+
+| File | Change type |
+|---|---|
+| `adminer/static/default.css` | CSS additions/modifications |
+| `adminer/static/dark.css` | CSS additions/modifications |
+
+Optionally (minimal PHP-class additions only):
+| File | Change type |
+|---|---|
+| `adminer/edit.inc.php` | Add `class="danger"` to delete button only |